/* /Components/DemandsOnShelf.razor.rz.scp.css */
@keyframes expandFade-b-cypkilsar1 {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================
MOBILE DEMANDS - URO STYLE
========================================= */
[b-cypkilsar1] .incoming-mobile {
width: 100%;
}
[b-cypkilsar1] .incoming-mobile .incoming-card {
position: relative;
display: flex;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,248,251,.94) 100%);
border: 1px solid rgba(255,255,255,.78);
box-shadow: 0 18px 45px rgba(15,23,42,.10), 0 8px 20px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
color: #111827;
height: auto;
}
[b-cypkilsar1] .incoming-mobile .incoming-accent {
width: 0;
min-width: 0;
background: transparent;
}
[b-cypkilsar1] .incoming-mobile .incoming-content {
flex: 1;
min-width: 0;
padding: 0;
}
[b-cypkilsar1] .incoming-mobile .incoming-header-btn {
width: 100%;
border: 0;
background: transparent;
padding: 0;
margin: 0;
text-align: left;
display: contents;
color: inherit;
}
[b-cypkilsar1] .incoming-mobile .incoming-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 16px 18px 12px;
background: linear-gradient(135deg, var(--wallet-accent-soft) 0%, rgba(255,255,255,.28) 100%);
border-bottom: 1px solid var(--wallet-accent-border);
}
[b-cypkilsar1] .incoming-mobile .header-left {
min-width: 0;
flex: 1;
}
[b-cypkilsar1] .incoming-mobile .header-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
[b-cypkilsar1] .incoming-mobile .reg-pill {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 7px 12px;
border-radius: 999px;
font-size: .76rem;
font-weight: 800;
letter-spacing: .02em;
color: var(--wallet-accent);
background: var(--wallet-accent-soft);
border: 1px solid var(--wallet-accent-border);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[b-cypkilsar1] .incoming-mobile .incoming-btn {
border-radius: 999px;
padding: 7px 12px;
font-size: .76rem;
font-weight: 800;
letter-spacing: .02em;
}
[b-cypkilsar1] .incoming-mobile .demand-number {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
[b-cypkilsar1] .incoming-mobile .demand-badge,
[b-cypkilsar1] .incoming-mobile .demand-badge-large {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
min-height: 44px;
padding: 6px 12px;
border-radius: 18px;
color: var(--wallet-accent);
background: rgba(255,255,255,.72);
border: 1px solid var(--wallet-accent-border);
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.04);
font-size: 1.05rem;
font-weight: 900;
line-height: 1;
}
[b-cypkilsar1] .incoming-mobile .chev {
display: inline-block;
font-size: 1.3rem;
line-height: 1;
transform: rotate(0deg);
transition: transform .15s ease, opacity .15s ease;
opacity: .65;
color: var(--wallet-accent);
}
[b-cypkilsar1] .incoming-mobile .chev-open {
transform: rotate(90deg);
opacity: .95;
}
[b-cypkilsar1] .incoming-mobile .compact-header {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: start;
width: 100%;
}
[b-cypkilsar1] .incoming-mobile .compact-left {
display: flex;
align-items: flex-start;
}
[b-cypkilsar1] .incoming-mobile .compact-right {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
[b-cypkilsar1] .incoming-mobile .compact-topline {
font-size: .76rem;
font-weight: 700;
letter-spacing: .02em;
color: #475569;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[b-cypkilsar1] .incoming-mobile .compact-pn {
font-size: .82rem;
font-weight: 800;
line-height: 1.25;
word-break: break-word;
color: #111827;
}
[b-cypkilsar1] .incoming-mobile .compact-desc {
font-size: .96rem;
font-weight: 800;
line-height: 1.4;
color: #111827;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[b-cypkilsar1] .incoming-mobile .compact-chevron-wrap {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 2px;
}
[b-cypkilsar1] .incoming-mobile .incoming-expanded {
padding: 14px 18px 18px;
animation: expandFade-b-cypkilsar1 .22s ease;
}
[b-cypkilsar1] .incoming-mobile .incoming-meta {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 0;
}
[b-cypkilsar1] .incoming-mobile .meta-item {
width: 100%;
border-radius: 22px;
padding: 14px 15px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(15,23,42,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.04);
}
[b-cypkilsar1] .incoming-mobile .meta-label {
display: block;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: #6b7280;
margin-bottom: 8px;
line-height: 1.35;
}
[b-cypkilsar1] .incoming-mobile .meta-value {
font-size: .95rem;
font-weight: 700;
line-height: 1.55;
color: #111827;
word-break: break-word;
}
[b-cypkilsar1] .incoming-mobile .incoming-details {
margin-top: 12px;
padding-top: 0;
border-top: 0;
}
[b-cypkilsar1] .incoming-mobile .details-block {
border-radius: 22px;
padding: 14px 15px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(15,23,42,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.04);
}
[b-cypkilsar1] .incoming-mobile .details-title {
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: #6b7280;
margin-bottom: 8px;
line-height: 1.35;
}
[b-cypkilsar1] .incoming-mobile .details-text {
font-size: .95rem;
font-weight: 700;
line-height: 1.55;
color: #111827;
}
[b-cypkilsar1] .incoming-mobile .details-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
font-size: .95rem;
}
[b-cypkilsar1] .incoming-mobile .notes {
margin-top: 12px;
border-radius: 22px;
padding: 14px 15px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(15,23,42,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.04);
font-size: .9rem;
color: #111827;
}
[b-cypkilsar1] .incoming-mobile .notes-label {
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: #6b7280;
margin-bottom: 8px;
}
[b-cypkilsar1] .incoming-mobile .notes-value {
line-height: 1.55;
word-break: break-word;
font-weight: 700;
}
[b-cypkilsar1] .incoming-mobile .incoming-footer {
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
/* =========================================
DESKTOP DEMANDS - SAME CARD STYLE
========================================= */
[b-cypkilsar1] .incoming-desktop-compact {
width: 100%;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-reg-group {
margin-bottom: 18px;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-reg-header-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: transparent;
border: 0;
padding: 0;
margin: 0 0 12px 0;
text-align: left;
cursor: pointer;
height:auto;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-reg-pill {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
font-size: .76rem;
font-weight: 800;
letter-spacing: .02em;
background: var(--wallet-accent-soft);
color: var(--wallet-accent);
border: 1px solid var(--wallet-accent-border);
box-shadow: 0 4px 12px rgba(15,23,42,.04);
}
[b-cypkilsar1] .incoming-desktop-compact .compact-reg-count {
font-size: .8rem;
color: #475569;
font-weight: 700;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-reg-chevron {
display: inline-block;
font-size: 1.2rem;
line-height: 1;
color: var(--wallet-accent);
opacity: .75;
transform: rotate(0deg);
transition: transform .18s ease, opacity .18s ease;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-reg-chevron.open {
transform: rotate(90deg);
opacity: 1;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demands-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
align-items: start;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card {
grid-column: span 2;
position: relative;
display: block;
width: 100%;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,248,251,.94) 100%);
border: 1px solid rgba(255,255,255,.78);
box-shadow: 0 18px 45px rgba(15,23,42,.10), 0 8px 20px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
color: #111827;
padding: 0;
transition: transform .15s ease, box-shadow .15s ease;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card.expanded {
grid-column: span 2;
z-index: 2;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card:hover {
transform: translateY(-1px);
box-shadow: 0 22px 50px rgba(15,23,42,.13), 0 10px 24px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.95);
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-accent {
display: none;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-btn {
width: 100%;
border: 0;
background: transparent;
padding: 0;
margin: 0;
text-align: left;
display: block;
color: inherit;
cursor: pointer;
height:auto;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: start;
padding: 10px 16px 6px;
background: linear-gradient(135deg, var(--wallet-accent-soft) 0%, rgba(255,255,255,.28) 100%);
border-bottom: 1px solid var(--wallet-accent-border);
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-left {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-id {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
min-height: 44px;
padding: 6px 12px;
border-radius: 18px;
color: var(--wallet-accent);
background: rgba(255,255,255,.72);
border: 1px solid var(--wallet-accent-border);
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.04);
font-size: 1.05rem;
font-weight: 900;
line-height: 1;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-right {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-pn {
font-size: .82rem;
font-weight: 800;
line-height: 1.25;
word-break: break-word;
color: #111827;
margin-top:14px
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-desc {
font-size: .96rem;
font-weight: 800;
line-height: 1.4;
color: #111827;
display:block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8em;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-expanded {
padding: 14px 18px 18px;
animation: expandFade-b-cypkilsar1 .22s ease;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-meta-row {
display: block;
margin-bottom: 12px;
border-radius: 28px;
padding: 14px 15px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(15,23,42,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.04);
}
[b-cypkilsar1] .incoming-desktop-compact .compact-meta-label {
display: block;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: #6b7280;
margin-bottom: 8px;
line-height: 1.35;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-meta-value {
font-size: .95rem;
font-weight: 700;
line-height: 1.55;
color: #111827;
word-break: break-word;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-notes {
margin-top: 12px;
border-radius: 22px;
padding: 14px 15px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(15,23,42,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.04);
font-size: .9rem;
color: #111827;
line-height: 1.55;
font-weight: 700;
}
/* =========================================
RESPONSIVE GRID
========================================= */
@media (max-width: 1600px) {
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card.expanded {
grid-column: span 3;
}
}
@media (max-width: 1300px) {
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card.expanded {
grid-column: span 4;
}
}
@media (max-width: 1100px) {
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card.expanded {
grid-column: span 6;
}
}
@media (max-width: 900px) {
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card.expanded {
grid-column: span 12;
}
}
/* =========================================
HIGHLIGHT
========================================= */
[b-cypkilsar1] .dem-highlight {
background: #ffeb3b;
color: inherit;
padding: 0 .15rem;
border-radius: 0.2em;
font-weight: 800;
}
/* =========================================
DARK MODE
========================================= */
@media (prefers-color-scheme: dark) {
[b-cypkilsar1] .incoming-mobile .incoming-card,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card {
background: linear-gradient(180deg, rgba(30,41,59,.96) 0%, rgba(15,23,42,.94) 100%);
border-color: rgba(255,255,255,.08);
color: #f8fafc;
box-shadow: 0 18px 45px rgba(0,0,0,.34), 0 8px 20px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05);
}
[b-cypkilsar1] .incoming-mobile .incoming-header,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-head {
background: linear-gradient(135deg, color-mix(in srgb, var(--wallet-accent) 18%, transparent) 0%, rgba(255,255,255,.03) 100%);
border-bottom-color: rgba(255,255,255,.10);
height: auto;
}
[b-cypkilsar1] .incoming-mobile .reg-pill,
[b-cypkilsar1] .incoming-desktop-compact .compact-reg-pill,
[b-cypkilsar1] .incoming-mobile .demand-badge,
[b-cypkilsar1] .incoming-mobile .demand-badge-large,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-id,
[b-cypkilsar1] .incoming-mobile .meta-item,
[b-cypkilsar1] .incoming-mobile .details-block,
[b-cypkilsar1] .incoming-mobile .notes,
[b-cypkilsar1] .incoming-desktop-compact .compact-meta-row,
[b-cypkilsar1] .incoming-desktop-compact .compact-notes {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 4px 12px rgba(0,0,0,.18);
}
[b-cypkilsar1] .incoming-mobile .compact-topline,
[b-cypkilsar1] .incoming-desktop-compact .compact-reg-count,
[b-cypkilsar1] .incoming-mobile .meta-label,
[b-cypkilsar1] .incoming-mobile .details-title,
[b-cypkilsar1] .incoming-mobile .notes-label,
[b-cypkilsar1] .incoming-desktop-compact .compact-meta-label {
color: rgba(255,255,255,.68);
}
[b-cypkilsar1] .incoming-mobile .compact-pn,
[b-cypkilsar1] .incoming-mobile .compact-desc,
[b-cypkilsar1] .incoming-mobile .meta-value,
[b-cypkilsar1] .incoming-mobile .details-text,
[b-cypkilsar1] .incoming-mobile .notes-value,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-pn,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-desc,
[b-cypkilsar1] .incoming-desktop-compact .compact-meta-value,
[b-cypkilsar1] .incoming-desktop-compact .compact-notes {
color: #f8fafc;
}
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card {
position: relative;
overflow: hidden;
}
/* RIGHT ACCENT BAR */
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: var(--reg-accent);
}
.dem-tab-scroll-mobile[b-cypkilsar1]{
height:60vh;
overflow-y:auto;
}
.dem-tab-scroll[b-cypkilsar1] {
height: 85vh;
overflow-y: auto;
}
/* =========================================
AIRCRAFT ACCENT STRIPE - LEFT SIDE
========================================= */
[b-cypkilsar1] .incoming-mobile .incoming-card,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card {
position: relative;
overflow: hidden;
}
[b-cypkilsar1] .incoming-mobile .incoming-card::before,
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: var(--reg-accent);
z-index: 2;
}
/* =========================================
DEMAND STATUS THEMES
========================================= */
[b-cypkilsar1] .demand-theme-open {
--wallet-accent: #e6528f;
--wallet-accent-soft: rgba(230,82,143,.14);
--wallet-accent-border: rgba(230,82,143,.22);
}
[b-cypkilsar1] .demand-theme-ready {
--wallet-accent: #16a34a;
--wallet-accent-soft: rgba(22,163,74,.14);
--wallet-accent-border: rgba(22,163,74,.22);
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card {
position: relative;
overflow: hidden;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: var(--reg-accent);
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card {
grid-column: span 2;
position: relative;
display: block;
width: 100%;
border-radius: 28px;
overflow: visible;
background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,248,251,.94) 100%);
border: 1px solid rgba(255,255,255,.78);
box-shadow: 0 18px 45px rgba(15,23,42,.10), 0 8px 20px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
color: #111827;
padding: 0;
transition: transform .18s ease, box-shadow .18s ease;
z-index: 1;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card:hover {
transform: translateY(-2px);
box-shadow: 0 24px 52px rgba(15,23,42,.14), 0 12px 26px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.95);
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-card.expanded {
transform: translateY(-6px) scale(1.01);
z-index: 80;
box-shadow: 0 34px 70px rgba(15,23,42,.22), 0 16px 34px rgba(15,23,42,.14), 0 0 0 1px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.96);
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-btn {
width: 100%;
border: 0;
background: transparent;
padding: 0;
margin: 0;
text-align: left;
display: block;
color: inherit;
cursor: pointer;
position: relative;
z-index: 2;
}
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-expanded {
position: absolute;
top: calc(100% - 24px);
left: 0;
right: 0;
z-index: 90;
padding: 16px 18px 18px 22px;
-moz-border-radius-bottomleft: 28px;
-moz-border-radius-bottomright: 28px;
background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(246,248,251,.98) 100%);
border: 1px solid rgba(255,255,255,.82);
box-shadow: 0 28px 60px rgba(15,23,42,.20), 0 12px 26px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.96);
animation: expandFade-b-cypkilsar1 .22s ease;
}
/* soft join shadow so it feels attached but lifted */
[b-cypkilsar1] .incoming-desktop-compact .compact-demand-expanded::after {
content: "";
position: absolute;
top: -10px;
left: 18px;
right: 18px;
height: 16px;
border-radius: 28px;
background: radial-gradient(ellipse at center, rgba(15,23,42,.10) 0%, rgba(15,23,42,0) 70%);
pointer-events: none;
}
.same-row-toolbar[b-cypkilsar1] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
width: 100%;
}
.toolbar-ready[b-cypkilsar1] {
flex: 0 0 auto;
display: flex;
align-items: center;
white-space: nowrap;
}
.toolbar-search[b-cypkilsar1] {
flex: 1 1 auto;
min-width: 120px;
}
[b-cypkilsar1] .toolbar-search .dxbl-text-edit,
.toolbar-search .dx-texteditor[b-cypkilsar1],
.toolbar-search .dx-searchbox[b-cypkilsar1],
.toolbar-search input[b-cypkilsar1] {
width: 95%;
}
.incoming-toolbar.same-row-toolbar[b-cypkilsar1] {
display: flex !important;
flex-direction: row !important;
align-items: center;
}
/* /Components/Layout/Drawer.razor.rz.scp.css */
.dxbl-drawer.dxbl-drawer-overlap > .dxbl-drawer-panel[b-c44iwix820] {
z-index: 10000 !important;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-1yfjg4tycy] {
font-family: var(--bs-font-sans-serif);
min-height: 100dvh;
}
[b-1yfjg4tycy] .icon {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-position: center center;
width: 1rem;
height: 1rem;
background-repeat: no-repeat;
background-color: var(--dxbl-btn-color);
}
[b-1yfjg4tycy] .icon-menu {
-webkit-mask-image: url("images/menu.svg");
mask-image: url("images/menu.svg");
background-color: gray;
}
[b-1yfjg4tycy] .navigation-drawer {
--dxbl-drawer-panel-footer-justify-content: center;
height: auto;
max-height: 100%;
overflow-y: hidden;
}
[b-1yfjg4tycy] .dxbl-drawer .dxbl-drawer-content {
padding: 0rem 0rem !important;
background-color: white !important;
}
[b-1yfjg4tycy] .dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
--dxbl-drawer-panel-body-padding-x: 0;
--dxbl-drawer-panel-body-padding-y: 1rem;
}
[b-1yfjg4tycy] .dxbl-drawer .dxbl-drawer-panel {
background-image: linear-gradient(180deg, #bb348a 0%, var(--bs-black) 150%);
}
[b-1yfjg4tycy] .menu-button:hover .icon {
background-color: var(--dxbl-btn-hover-color);
}
.menu-button[b-1yfjg4tycy] {
background-image: url("images/close.svg");
width: 1.875rem;
height: 1.875rem;
}
.dxbl-btn-standalone .dxbl-btn-text-dark[b-1yfjg4tycy] {
color: white;
}
[b-1yfjg4tycy] .dxbl-btn-standalone .dxbl-btn-text-light .dxbl-btn-icon-only {
vertical-align: middle;
}
[b-1yfjg4tycy] .dxbl-btn-standalone.dxbl-btn-text-light.dxbl-btn-icon-only {
--dxbl-btn-padding-x: 0.375rem;
--dxbl-btn-padding-y: 0.375rem;
vertical-align: middle;
}
.navbar-toggler[b-1yfjg4tycy] {
appearance: none;
cursor: pointer;
width: 3.5rem;
height: 2.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
[b-1yfjg4tycy] .navigation-drawer > .dxbl-drawer-panel {
display: flex;
}
[b-1yfjg4tycy].page:has(.navbar-toggler:not(:checked)) .navigation-drawer:not(.mobile) > .dxbl-drawer-panel {
width: 0 !important;
}
.brand-logo[b-1yfjg4tycy] {
height: 28px; /* tweak as needed */
width: auto;
}
/* iOS-like switch */
.ios-switch[b-1yfjg4tycy] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: 51px;
height: 31px;
}
.ios-switch input[b-1yfjg4tycy] {
display: none;
}
.ios-switch-slider[b-1yfjg4tycy] {
position: relative;
width: 51px;
height: 31px;
background: #e5e5ea;
border-radius: 999px;
transition: background .25s ease;
}
.ios-switch-slider[b-1yfjg4tycy]::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 27px;
height: 27px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition: transform .25s ease;
}
.ios-switch input:checked + .ios-switch-slider[b-1yfjg4tycy] {
background: #34c759;
}
.ios-switch input:checked + .ios-switch-slider[b-1yfjg4tycy]::before {
transform: translateX(20px);
}
.ios-number-input[b-1yfjg4tycy] {
border: none;
background: transparent;
text-align: right;
width: 70px;
font-size: 0.9rem;
color: #111827;
}
.ios-number-input:focus[b-1yfjg4tycy] {
outline: none;
}
.ios-select[b-1yfjg4tycy] {
border: none;
background: transparent;
font-size: 0.9rem;
color: #111827;
padding: 2px 0;
}
.ios-select:focus[b-1yfjg4tycy] {
outline: none;
}
.ios-segmented[b-1yfjg4tycy] {
display: inline-flex;
padding: 2px;
background: #e5e5ea;
border-radius: 8px;
gap: 2px;
}
.ios-segmented button[b-1yfjg4tycy] {
border: none;
background: transparent;
font-size: 0.8rem;
padding: 4px 10px;
border-radius: 6px;
color: #111827;
}
.ios-segmented button.active[b-1yfjg4tycy] {
background: #ffffff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.ios-value[b-1yfjg4tycy] {
font-size: 0.8rem;
color: #4b5563;
margin-left: 8px;
white-space: nowrap;
}
.ios-settings-dialog[b-1yfjg4tycy] {
max-width: 420px; /* fixed-ish width, tweak if you want */
width: 100%;
height: 75vh; /* requested height */
margin: 0 auto; /* center horizontally */
}
.ios-settings-content[b-1yfjg4tycy] {
height: 85%;
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
}
.ios-settings-header[b-1yfjg4tycy] {
position: sticky;
top: 0;
z-index: 20;
background: #f9fafb; /* subtle tint */
border-bottom: 1px solid #e5e7eb;
height: 3rem;
}
.ios-settings-body-scroll[b-1yfjg4tycy] {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.ios-settings-footer[b-1yfjg4tycy] {
border-top: 1px solid #e5e7eb;
background: #f9fafb;
}
@media (max-width: 768px) {
[b-1yfjg4tycy] .navigation-drawer > .dxbl-drawer-panel {
display: none;
}
[b-1yfjg4tycy] .navigation-drawer.mobile > .dxbl-drawer-panel {
display: flex;
}
/* Remove focus ring/box-shadow when clicked/tapped */
.no-ring:focus[b-1yfjg4tycy],
.no-ring:active[b-1yfjg4tycy],
.no-ring:focus:active[b-1yfjg4tycy] {
outline: none !important;
box-shadow: none !important;
}
/* Remove the grey tap highlight on iOS/Android */
.no-ring[b-1yfjg4tycy] {
-webkit-tap-highlight-color: transparent;
}
/* (Accessible version) keep keyboard focus ring, remove only for pointer/touch */
.no-ring:focus:not(:focus-visible)[b-1yfjg4tycy] {
outline: none !important;
box-shadow: none !important;
}
[b-1yfjg4tycy].page:has(.navbar-toggler:checked) .navigation-drawer.mobile > .dxbl-drawer-shading {
}
.navbar-toggler:checked .menu-button[b-1yfjg4tycy] {
background-color: gray;
}
.navbar-toggler:checked[b-1yfjg4tycy] {
background-color: gray;
}
.navbar-toggler:checked .shading-copy[b-1yfjg4tycy] {
opacity: 0;
visibility: unset;
height: unset;
}
.world-clocks-panel[b-1yfjg4tycy] {
display: none;
}
.world-clocks[b-1yfjg4tycy] {
display: none;
}
}
.dev-watermark[b-1yfjg4tycy] {
position: fixed;
inset: 0;
z-index: 9999; /* above map + panels */
display: grid;
place-items: center;
pointer-events: none; /* IMPORTANT: doesn't block clicks/zoom */
user-select: none;
font: 900 clamp(42px, 8vw, 110px)/1 system-ui, Segoe UI, Roboto, Arial;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(220, 38, 38, 0.12); /* faded red */
transform: rotate(-18deg);
}
.world-clocks-panel[b-1yfjg4tycy] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.world-clocks[b-1yfjg4tycy] {
display: flex;
align-items: center;
gap: 18px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(6px);
}
.clock-box[b-1yfjg4tycy] {
min-width: 84px;
padding: 3px 14px;
border-radius: 10px;
text-align: center;
color: white;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.clock-label[b-1yfjg4tycy] {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
opacity: 0.85;
margin-bottom: 3px;
color: yellow;
}
.clock-time[b-1yfjg4tycy] {
font-size: 18px;
font-weight: 900;
font-family: Consolas, "Courier New", monospace;
line-height: 1.1;
letter-spacing: 1.8px;
color: yellow;
}
.clock-toggle-btn[b-1yfjg4tycy] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
}
.clock-toggle-btn:hover[b-1yfjg4tycy] {
transform: scale(1.05);
}
.show-clocks-btn[b-1yfjg4tycy] {
background: #0f4c81;
color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.close-clocks-btn[b-1yfjg4tycy] {
background: #1f2937;
color: #f8fafc;
font-size: 18px;
font-weight: 700;
}
.zone-z[b-1yfjg4tycy] {
background: linear-gradient(180deg, #0b3b66, #0f4c81);
color: #e6f4ff;
}
.zone-uk[b-1yfjg4tycy] {
background: linear-gradient(180deg, #14532d, #166534);
color: #ecfdf5;
}
.zone-mst[b-1yfjg4tycy] {
background: linear-gradient(180deg, #9a3412, #c2410c);
color: #fff7ed;
}
.zone-jnb[b-1yfjg4tycy] {
background: linear-gradient(180deg, #7c3aed, #6d28d9);
color: #f5f3ff;
}
.zone-urc[b-1yfjg4tycy] {
background: linear-gradient(180deg, #7f1d1d, #991b1b);
color: #fef2f2;
}
.zone-ckg[b-1yfjg4tycy] {
background: linear-gradient(180deg, #1d4ed8, #2563eb);
color: #eff6ff;
}
.inline-world-clocks[b-1yfjg4tycy] {
display: flex;
gap: 6px;
align-items: center;
font-family: Consolas, monospace;
}
.inline-clock[b-1yfjg4tycy] {
padding: 2px 8px;
font-size: 13px;
background: white;
color: black;
border-radius: 6px;
border: 2px solid;
font-weight: 600;
}
/* different border colors */
.inline-clock.z[b-1yfjg4tycy] {
border-color: #2563eb;
}
.inline-clock.uk[b-1yfjg4tycy] {
border-color: #16a34a;
}
.inline-clock.mst[b-1yfjg4tycy] {
border-color: #ea580c;
}
.inline-clock.jnb[b-1yfjg4tycy] {
border-color: #9333ea;
}
.inline-clock.urc[b-1yfjg4tycy] {
border-color: #dc2626;
}
.inline-clock.ckg[b-1yfjg4tycy] {
border-color: #0891b2;
}
.phone-panel-backdrop[b-1yfjg4tycy] {
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 1040;
animation: phoneFadeIn-b-1yfjg4tycy .2s ease;
}
.phone-panel[b-1yfjg4tycy] {
position: fixed;
top: 6%;
left: 50%;
transform: translateX(-50%) translateY(20px);
width: min(720px, 92vw);
height: 60vh;
background: #fff;
z-index: 1050;
box-shadow: 0 18px 45px rgba(0,0,0,.20);
border-radius: 22px;
transition: transform .28s ease, opacity .28s ease;
opacity: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.phone-panel.open[b-1yfjg4tycy] {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.phone-panel-header[b-1yfjg4tycy] {
padding: 1rem 1rem .75rem 1rem;
border-bottom: 1px solid #e9ecef;
background: #fff;
position: sticky;
top: 0;
z-index: 2;
}
.phone-panel-body[b-1yfjg4tycy] {
flex: 1;
overflow-y: auto;
padding: 1rem;
background: #f8fafc;
}
@keyframes phoneFadeIn-b-1yfjg4tycy {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 768px) {
.phone-panel[b-1yfjg4tycy] {
top: 12%;
width: 94vw;
height: 70vh;
border-radius: 18px;
}
}
.phone-card-ext[b-1yfjg4tycy] {
white-space: nowrap;
background: #eef2ff;
color: #334155;
padding: .25rem .6rem;
border-radius: 999px;
font-size: 1.4rem;
font-weight: 700;
}
@media (min-width: 992px) {
[b-1yfjg4tycy] .navigation-drawer {
--dxbl-drawer-panel-footer-justify-content: center;
height: auto;
max-height: 95vh;
}
}
.world-clocks-panel[b-1yfjg4tycy] {
top: 12px;
margin-left:15px;
z-index: 20;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
}
.world-clocks-strip[b-1yfjg4tycy] {
display: flex;
flex-wrap: wrap;
gap: 8px;
pointer-events: auto;
}
.clock-pill[b-1yfjg4tycy] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 6px;
min-height: 34px;
border-radius: 8px;
font-weight: 700;
line-height: 1;
color: white;
background: #2f4f6f;
border: 2px solid rgba(255, 215, 90, 0.35);
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
white-space: nowrap;
letter-spacing: 0.3px;
}
.zone-z[b-1yfjg4tycy] {
border-color: #d6c24d;
}
.zone-uk[b-1yfjg4tycy] {
border-color: #44b36b;
}
.zone-mst[b-1yfjg4tycy] {
border-color: #d96a6a;
}
.zone-jnb[b-1yfjg4tycy] {
border-color: #9d7cf0;
}
.zone-urc[b-1yfjg4tycy] {
border-color: #cf4e66;
}
.zone-ckg[b-1yfjg4tycy] {
border-color: #5ea7cc;
}
.clock-toggle-btn[b-1yfjg4tycy] {
pointer-events: auto;
width: 34px;
height: 34px;
border: none;
border-radius: 8px;
background: #2f4f6f;
color: #f3d86b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.close-clocks-btn:hover[b-1yfjg4tycy],
.show-clocks-btn:hover[b-1yfjg4tycy] {
filter: brightness(1.08);
}
@media (max-width: 768px) {
.world-clocks-panel[b-1yfjg4tycy] {
display: none;
}
.world-clocks-strip[b-1yfjg4tycy] {
display:none;
}
.clock-pill[b-1yfjg4tycy] {
display: none;
}
}
.world-clocks-strip[b-1yfjg4tycy] {
display: flex;
flex-wrap: nowrap; /* keep in one line */
gap: 6px;
align-items: center;
min-width: 0;
}
.clock-pill[b-1yfjg4tycy] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 1; /* allow shrinking */
min-width: 0;
padding: 4px 8px;
font-size: clamp(10px, 0.7vw, 13px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.world-clocks-panel[b-1yfjg4tycy] {
display: flex;
align-items: center;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.menu-button[b-4keuu0uz9m] {
padding: 0.1375rem;
width: 1rem;
height: 1rem;
background-image: url("images/menu.svg");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
[b-4keuu0uz9m] .navigation-menu.display-mobile {
margin-bottom: 2rem;
}
[b-4keuu0uz9m] .navigation-menu {
background-color: inherit;
--dxbl-menu-bg: inherit;
}
[b-4keuu0uz9m] .navigation-menu .dxbl-menu-item-list {
gap: 0.5rem;
}
[b-4keuu0uz9m] .menu-item {
color: var(--bs-white);
}
[b-4keuu0uz9m] .icon {
width: 1rem;
height: 1rem;
background-position: center;
background-repeat: no-repeat;
margin-left: 0.5rem;
}
[b-4keuu0uz9m] .home-icon {
background-image: url("images/home.svg");
}
[b-4keuu0uz9m] .weather-icon {
background-image: url("images/weather.svg");
}
[b-4keuu0uz9m] .counter-icon {
background-image: url("images/counter.svg");
}
/* /Components/LinkComponents/CircularProgressOps.razor.rz.scp.css */
/* Container for each gauge */
.circle-gauge-container[b-ijjj7natuc] {
display: flex;
width: 220px;
padding: 20px 0;
border-radius: 8px;
background-color: white;
flex-direction: column;
align-items: center;
}
/* Circular Progress */
.circular-progress[b-ijjj7natuc] {
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
}
/* Inner white circle */
.circular-progress[b-ijjj7natuc]::before {
content: "";
position: absolute;
height: 130px;
width: 130px;
border-radius: 50%;
background-color: #fff;
}
/* Progress value text */
.progress-value[b-ijjj7natuc] {
position: relative;
font-size: 24px;
font-weight: 600;
color: green;
}
/* /Components/LinkComponents/Collapsible.razor.rz.scp.css */
.collapsible[b-hgsxl5tm1q] {
position: relative;
}
.collapsible:not([open]) .collapsible-body[b-hgsxl5tm1q] {
display: none !important;
}
.collapsible[open] .collapsible-body[b-hgsxl5tm1q] {
display: block;
}
/* /Components/LinkComponents/DayCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
DAY CARD – shell
═══════════════════════════════════════════════════ */
.day-card[b-qgcj74x17c] {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(15,23,42,0.08);
background: #ffffff;
box-shadow: 0 2px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
margin: 8px;
width: 360px;
transition: box-shadow .2s ease;
cursor: default;
font-family: system-ui, -apple-system, sans-serif;
}
.day-card:hover[b-qgcj74x17c] {
box-shadow: 0 6px 24px rgba(15,23,42,0.10);
}
/* ── shift tints ── */
.day-card--blue[b-qgcj74x17c] {
background: #f8fbff;
}
.day-card--yellow[b-qgcj74x17c] {
background: #fffdf5;
}
/* ── weekend accent ── */
.day-card--weekend[b-qgcj74x17c] {
border-color: rgba(220,38,38,0.22);
}
.day-card--weekend[b-qgcj74x17c]::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(239,68,68,0.18);
}
/* month view override */
.monthview-detail-panel__body .day-card[b-qgcj74x17c] {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
border-radius: 16px;
}
/* ═══════════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════════ */
.day-card__header[b-qgcj74x17c] {
padding: 0;
position: relative;
flex-shrink: 0;
}
.day-card__header--yellow[b-qgcj74x17c] {
background: linear-gradient(120deg,#d97706,#f59e0b 60%,#fbbf24);
}
.day-card__header--blue[b-qgcj74x17c] {
background: linear-gradient(120deg,#1d4ed8,#2563eb 60%,#3b82f6);
}
.day-card__header--green[b-qgcj74x17c] {
background: linear-gradient(120deg,#15803d,#16a34a 60%,#22c55e);
}
.day-card__header--orange[b-qgcj74x17c] {
background: linear-gradient(120deg,#c2410c,#ea580c 60%,#fb923c);
}
.day-card__header--five[b-qgcj74x17c],
.day-card__header--seven[b-qgcj74x17c],
.day-card__header--lucy[b-qgcj74x17c] {
background: linear-gradient(120deg,#334155,#475569 60%,#64748b);
}
.day-card__header-row[b-qgcj74x17c] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
padding: 14px 16px 12px;
color: #fff;
}
.day-card__date[b-qgcj74x17c] {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1;
}
.day-card__day[b-qgcj74x17c] {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -.01em;
}
.day-card__rest[b-qgcj74x17c] {
font-size: .82rem;
font-weight: 600;
opacity: .82;
}
.day-card__sub[b-qgcj74x17c] {
margin-top: 4px;
font-size: .72rem;
opacity: .72;
font-weight: 500;
letter-spacing: .02em;
color: #fff;
}
.day-card__chips[b-qgcj74x17c] {
display: flex;
gap: 5px;
flex-shrink: 0;
margin-top: 2px;
}
.day-chip[b-qgcj74x17c] {
padding: 3px 9px;
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
letter-spacing: .04em;
color: #fff;
border: 1px solid rgba(255,255,255,.25);
}
.day-chip--arr[b-qgcj74x17c] {
background: rgba(16,185,129,.75);
}
.day-chip--dep[b-qgcj74x17c] {
background: rgba(239,68,68,.58);
}
/* ═══════════════════════════════════════════════════
CORNER EXPAND BUTTON
═══════════════════════════════════════════════════ */
.day-card__corner-toggle[b-qgcj74x17c] {
position: absolute;
top: 0;
right: 0;
width: 42px;
height: 42px;
border: none;
background: transparent;
clip-path: polygon(100% 0, 0 0, 100% 100%);
cursor: pointer;
z-index: 6;
}
.day-card__corner-toggle[b-qgcj74x17c]::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,.14);
clip-path: polygon(100% 0, 0 0, 100% 100%);
transition: background .14s ease;
}
.day-card__corner-toggle:hover[b-qgcj74x17c]::before {
background: rgba(0,0,0,.26);
}
.day-card__corner-icon[b-qgcj74x17c] {
position: absolute;
top: 5px;
right: 5px;
font-size: .9rem;
font-weight: 900;
color: rgba(255,255,255,.9);
pointer-events: none;
}
/* ═══════════════════════════════════════════════════
BODY
═══════════════════════════════════════════════════ */
.day-card__body[b-qgcj74x17c] {
flex: 1 1 auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 5px;
overflow-y: auto;
}
/* ═══════════════════════════════════════════════════
COLLAPSIBLE SECTIONS
═══════════════════════════════════════════════════ */
.day-card__section[b-qgcj74x17c] {
border-radius: 12px;
background: #fff;
border: 1px solid rgba(15,23,42,.06);
overflow: hidden;
}
.day-card__section-header[b-qgcj74x17c] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
transition: background .12s ease;
}
.day-card__section-header:hover[b-qgcj74x17c] {
background: rgba(15,23,42,.025);
}
.day-card__section-title[b-qgcj74x17c] {
font-size: .74rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #475569;
}
.day-card__section-meta[b-qgcj74x17c] {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.day-card__section-badge[b-qgcj74x17c] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: rgba(15,23,42,.07);
color: #475569;
font-size: .68rem;
font-weight: 800;
}
.day-card__section-chevron[b-qgcj74x17c] {
display: inline-block;
font-size: .9rem;
color: #cbd5e1;
transform: rotate(90deg);
transition: transform .16s ease;
}
.day-card__section-chevron.open[b-qgcj74x17c] {
transform: rotate(-90deg);
}
.day-card__section-body[b-qgcj74x17c] {
padding: 0 8px 8px;
animation: section-in-b-qgcj74x17c .14s ease;
}
@keyframes section-in-b-qgcj74x17c {
from {
opacity: 0;
transform: translateY(-3px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Left-border accents */
.section--leaders[b-qgcj74x17c] {
border-left: 3px solid #7c3aed;
}
.section--available[b-qgcj74x17c] {
border-left: 3px solid #16a34a;
}
.section--early[b-qgcj74x17c] {
border-left: 3px solid #d97706;
}
.section--late[b-qgcj74x17c] {
border-left: 3px solid #4f46e5;
}
.section--offices[b-qgcj74x17c] {
border-left: 3px solid #0284c7;
}
.section--deputy[b-qgcj74x17c] {
border-left: 3px solid #7c3aed;
}
.section--moc[b-qgcj74x17c] {
border-left: 3px solid #0d9488;
}
.section--flying[b-qgcj74x17c] {
border-left: 3px solid #2563eb;
}
.section--outstations[b-qgcj74x17c] {
border-left: 3px solid #0d9488;
}
.section--other[b-qgcj74x17c] {
border-left: 3px solid #8b5cf6;
}
.section--leave[b-qgcj74x17c] {
border-left: 3px solid #dc2626;
}
.section--onleave[b-qgcj74x17c] {
border-left: 3px solid #ea580c;
}
.section--tasks[b-qgcj74x17c] {
border-left: 3px solid #ca8a04;
}
.section--managers[b-qgcj74x17c] {
border-left: 3px solid #64748b;
}
.section--apprentices[b-qgcj74x17c] {
border-left: 3px solid #65a30d;
}
.section--pdcflying[b-qgcj74x17c] {
border-left: 3px solid #2563eb;
}
.section--deadhead[b-qgcj74x17c] {
border-left: 3px solid #7c3aed;
}
.section--rest[b-qgcj74x17c] {
border-left: 3px solid #94a3b8;
}
.day-card__stack[b-qgcj74x17c] {
display: flex;
flex-direction: column;
gap: 4px;
}
.day-card__empty[b-qgcj74x17c] {
border-radius: 10px;
padding: 10px 12px;
background: #f8fafc;
border: 1px dashed rgba(100,116,139,.28);
color: #94a3b8;
font-size: .8rem;
text-align: center;
font-weight: 600;
}
/* ═══════════════════════════════════════════════════
MINI CARD — employee row
Right-click opens context menu.
═══════════════════════════════════════════════════ */
.mini-card[b-qgcj74x17c] {
position: relative;
border-radius: 10px;
background: #fafafa;
border: 1px solid rgba(15,23,42,.06);
padding: 8px 10px 6px 13px;
overflow: hidden;
cursor: context-menu;
transition: background .1s ease, border-color .1s ease;
display: flex;
flex-direction: column;
gap: 0;
}
.mini-card:hover[b-qgcj74x17c] {
background: #f1f5f9;
border-color: rgba(15,23,42,.1);
}
.mini-card[b-qgcj74x17c]::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: #e2e8f0;
border-radius: 10px 0 0 10px;
}
.mini-card--task[b-qgcj74x17c]::before {
background: #d97706;
}
.mini-card--permanent[b-qgcj74x17c]::before {
background: #16a34a;
}
.mini-card--contractor[b-qgcj74x17c]::before {
background: #7c3aed;
}
.mini-card--leader[b-qgcj74x17c]::before {
background: #f59e0b;
}
.mini-card--bx[b-qgcj74x17c] {
border-color: rgba(37,99,235,.16);
}
/* Top line */
.mini-card__main[b-qgcj74x17c] {
display: flex;
flex-direction: column;
gap: 3px;
}
.mini-card__topline[b-qgcj74x17c] {
display: flex;
align-items: center;
gap: 8px;
}
/* Avatar */
.mini-card__avatar[b-qgcj74x17c] {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 999px;
background: linear-gradient(135deg,#334155,#64748b);
color: #fff;
font-size: .62rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: .02em;
user-select: none;
}
.mini-card--leader .mini-card__avatar[b-qgcj74x17c] {
background: linear-gradient(135deg,#92400e,#d97706);
}
.mini-card--contractor .mini-card__avatar[b-qgcj74x17c] {
background: linear-gradient(135deg,#5b21b6,#7c3aed);
}
.mini-card--permanent .mini-card__avatar[b-qgcj74x17c] {
background: linear-gradient(135deg,#14532d,#16a34a);
}
/* Other card — purple left stripe + avatar */
.mini-card--other[b-qgcj74x17c]::before {
background: #8b5cf6;
}
.mini-card__avatar--other[b-qgcj74x17c] {
background: linear-gradient(135deg, #5b21b6, #8b5cf6) !important;
}
/* Reason badge next to name */
.mini-card__other-badge[b-qgcj74x17c] {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 999px;
background: rgba(139,92,246,.12);
color: #5b21b6;
font-size: .68rem;
font-weight: 700;
border: 1px solid rgba(139,92,246,.25);
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-card__avatar--outstation[b-qgcj74x17c] {
background: linear-gradient(135deg, #0f766e, #0d9488) !important;
}
/* Destination badge next to name */
.mini-card__outstation-badge[b-qgcj74x17c] {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 999px;
background: rgba(13,148,136,.12);
color: #0f766e;
font-size: .68rem;
font-weight: 800;
letter-spacing: .06em;
border: 1px solid rgba(13,148,136,.25);
white-space: nowrap;
font-family: ui-monospace, monospace;
}
.mini-card__name-wrap[b-qgcj74x17c] {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.mini-card__name[b-qgcj74x17c] {
font-size: .86rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-card__saving-badge[b-qgcj74x17c] {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 999px;
background: rgba(255,193,7,.16);
color: #92400e;
font-size: .66rem;
font-weight: 700;
border: 1px solid rgba(255,193,7,.28);
white-space: nowrap;
}
.mini-card__approval-badge[b-qgcj74x17c] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 4px;
background: #dc2626;
color: #fff;
font-size: .6rem;
font-weight: 800;
}
/* Right-click hint — shows on hover, desktop only */
.mini-card__hint[b-qgcj74x17c] {
font-size: .6rem;
color: #cbd5e1;
font-weight: 500;
padding-left: 34px;
margin-top: 1px;
opacity: 0;
transition: opacity .12s ease;
pointer-events: none;
user-select: none;
}
.mini-card:hover .mini-card__hint[b-qgcj74x17c] {
opacity: 1;
}
/* Skills toggle */
.mini-card__skills-toggle[b-qgcj74x17c] {
flex: 0 0 auto;
width: 24px;
height: 24px;
border: 0;
border-radius: 999px;
background: rgba(15,23,42,.04);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .1s ease;
}
.mini-card__skills-toggle:hover[b-qgcj74x17c] {
background: rgba(15,23,42,.09);
}
.mini-card__skills-toggle-icon[b-qgcj74x17c] {
display: inline-block;
font-size: .9rem;
color: #cbd5e1;
transform: rotate(90deg);
transition: transform .16s ease;
line-height: 1;
}
.mini-card__skills-toggle-icon.open[b-qgcj74x17c] {
transform: rotate(-90deg);
}
.mini-card__skills-row[b-qgcj74x17c] {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(15,23,42,.05);
animation: section-in-b-qgcj74x17c .14s ease;
}
.mini-card__skills-grid[b-qgcj74x17c] {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* ═══════════════════════════════════════════════════
SKILL SQUARES
═══════════════════════════════════════════════════ */
.skill-square[b-qgcj74x17c] {
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: .68rem;
font-weight: 800;
border: 1px solid rgba(100,116,139,.18);
background: #f1f5f9;
color: #94a3b8;
}
.skill-square--active[b-qgcj74x17c] {
background: #0f172a;
color: #fff;
border-color: transparent;
box-shadow: 0 1px 4px rgba(15,23,42,.22);
}
.skill-square--not-active[b-qgcj74x17c] {
display: none;
}
/* ═══════════════════════════════════════════════════
FOOTER STATS
═══════════════════════════════════════════════════ */
.day-card__footer[b-qgcj74x17c] {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 6px;
padding: 8px;
border-top: 1px solid rgba(15,23,42,.05);
background: #f8fafc;
flex-shrink: 0;
}
.day-card__stat[b-qgcj74x17c] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 7px 6px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(15,23,42,.05);
}
.day-card__stat-label[b-qgcj74x17c] {
font-size: .6rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #94a3b8;
font-weight: 700;
}
.day-card__stat-value[b-qgcj74x17c] {
font-size: 1.05rem;
font-weight: 900;
color: #0f172a;
line-height: 1;
}
.day-card__stat-value--good[b-qgcj74x17c] {
color: #16a34a;
}
.day-card__stat-value--warn[b-qgcj74x17c] {
color: #dc2626;
}
/* ═══════════════════════════════════════════════════
CONTEXT MENU (desktop right-click)
═══════════════════════════════════════════════════ */
.daycard-menu-backdrop[b-qgcj74x17c] {
position: fixed;
inset: 0;
z-index: 9998;
background: transparent;
}
.daycard-menu[b-qgcj74x17c] {
min-width: 230px;
max-width: 280px;
background: #fff;
border-radius: 14px;
box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06);
overflow: hidden;
}
.daycard-menu__header[b-qgcj74x17c] {
padding: 11px 13px 9px;
background: #f8fafc;
border-bottom: 1px solid rgba(15,23,42,.06);
}
.daycard-menu__title[b-qgcj74x17c] {
font-size: .88rem;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
}
.daycard-menu__subtitle[b-qgcj74x17c] {
margin-top: 2px;
font-size: .7rem;
color: #64748b;
}
.daycard-menu__group[b-qgcj74x17c] {
padding: 4px 4px 2px;
}
.daycard-menu__group-title[b-qgcj74x17c] {
padding: 5px 10px;
font-size: .66rem;
font-weight: 700;
text-transform: uppercase;
color: #94a3b8;
letter-spacing: .06em;
}
.daycard-menu__item[b-qgcj74x17c] {
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
gap: 9px;
padding: 9px 10px;
font-size: .86rem;
font-weight: 600;
color: #0f172a;
text-align: left;
cursor: pointer;
border-radius: 8px;
transition: background .1s ease;
}
.daycard-menu__item:hover[b-qgcj74x17c] {
background: #f1f5f9;
}
.daycard-menu__icon[b-qgcj74x17c] {
width: 18px;
min-width: 18px;
text-align: center;
color: #94a3b8;
font-size: .86rem;
}
.daycard-menu__item span:last-child[b-qgcj74x17c] {
flex: 1;
}
.daycard-menu__divider[b-qgcj74x17c] {
height: 1px;
margin: 3px 6px;
background: rgba(15,23,42,.06);
}
.daycard-menu__item--success[b-qgcj74x17c] {
color: #166534;
background: rgba(34,197,94,.08);
border: 1px solid rgba(34,197,94,.18);
}
.daycard-menu__item--success:hover[b-qgcj74x17c] {
background: rgba(34,197,94,.14);
}
.daycard-menu__item--success .daycard-menu__icon[b-qgcj74x17c] {
color: #16a34a;
}
.daycard-menu__item--danger[b-qgcj74x17c] {
color: #991b1b;
background: rgba(239,68,68,.08);
border: 1px solid rgba(239,68,68,.18);
}
.daycard-menu__item--danger:hover[b-qgcj74x17c] {
background: rgba(239,68,68,.14);
}
.daycard-menu__item--danger .daycard-menu__icon[b-qgcj74x17c] {
color: #dc2626;
}
/* ═══════════════════════════════════════════════════
MOBILE BOTTOM SHEET
═══════════════════════════════════════════════════ */
.daycard-sheet-backdrop[b-qgcj74x17c] {
position: fixed;
inset: 0;
background: rgba(15,23,42,.32);
backdrop-filter: blur(3px);
z-index: 99998;
}
.daycard-sheet[b-qgcj74x17c] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: #fff;
border-radius: 18px 18px 0 0;
box-shadow: 0 -8px 30px rgba(0,0,0,.16);
max-height: 82vh;
display: flex;
flex-direction: column;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
animation: sheet-up-b-qgcj74x17c .2s ease;
}
@keyframes sheet-up-b-qgcj74x17c {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.daycard-sheet__handle[b-qgcj74x17c] {
width: 36px;
height: 4px;
border-radius: 999px;
background: #e2e8f0;
margin: 10px auto 8px;
}
.daycard-sheet__header[b-qgcj74x17c] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 0 16px 10px;
border-bottom: 1px solid #f1f5f9;
}
.daycard-sheet__title[b-qgcj74x17c] {
font-size: .95rem;
font-weight: 800;
color: #0f172a;
}
.daycard-sheet__subtitle[b-qgcj74x17c] {
margin-top: 3px;
font-size: .78rem;
color: #64748b;
}
.daycard-sheet__close[b-qgcj74x17c] {
width: 32px;
height: 32px;
border: 0;
border-radius: 999px;
background: #f1f5f9;
color: #475569;
font-weight: 800;
cursor: pointer;
font-size: .9rem;
}
.daycard-sheet__body[b-qgcj74x17c] {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.daycard-sheet__group[b-qgcj74x17c] {
display: flex;
flex-direction: column;
gap: 5px;
}
.daycard-sheet__group-title[b-qgcj74x17c] {
padding: 0 4px;
font-size: .7rem;
font-weight: 800;
letter-spacing: .05em;
color: #94a3b8;
text-transform: uppercase;
}
.daycard-sheet__item[b-qgcj74x17c] {
width: 100%;
min-height: 48px;
border: 0;
border-radius: 12px;
background: #f8fafc;
color: #0f172a;
text-align: left;
padding: 12px 14px;
font: 700 14px/1.2 system-ui;
cursor: pointer;
transition: background .1s ease;
}
.daycard-sheet__item:hover[b-qgcj74x17c] {
background: #f1f5f9;
}
.daycard-sheet__item--success[b-qgcj74x17c] {
color: #166534;
background: #f0fdf4;
}
.daycard-sheet__item--danger[b-qgcj74x17c] {
color: #b91c1c;
background: #fef2f2;
}
.daycard-sheet__footer[b-qgcj74x17c] {
padding: 10px 12px 0;
}
.daycard-sheet__cancel[b-qgcj74x17c] {
width: 100%;
min-height: 48px;
border: 0;
border-radius: 12px;
background: #f1f5f9;
color: #475569;
font: 700 14px/1 system-ui;
cursor: pointer;
}
/* ═══════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
.daycard-menu[b-qgcj74x17c] {
display: none !important;
}
.day-card[b-qgcj74x17c] {
width: calc(100vw - 16px);
margin: 6px;
}
.mini-card__hint[b-qgcj74x17c] {
display: none;
}
}
@media (min-width: 769px) {
.daycard-sheet[b-qgcj74x17c],
.daycard-sheet-backdrop[b-qgcj74x17c] {
display: none !important;
}
}
/* /Components/LinkComponents/FlightProgress.Razor.rz.scp.css */
.flight-progress-container[b-gv90jg7hbc] {
margin-top: 10px;
margin-left: 0.2rem;
margin-right: 0.8rem;
width: 100%;
padding: 0.6rem;
font-family: Arial, sans-serif;
border: solid 1px green;
background-color: #e6f0ff;
border-radius: 8px;
}
.progress-bar[b-gv90jg7hbc] {
background-color: #e0e0e0;
border-radius: 12px;
height: 8px;
position: relative;
overflow: hidden;
}
.progress-fill[b-gv90jg7hbc] {
animation: flashing-b-gv90jg7hbc 2s infinite;
background-color: green;
height: 100%;
transition: width 1s linear;
position: relative;
}
.plane[b-gv90jg7hbc] {
position: absolute;
top: -1.5em;
font-size: 1.4em;
z-index: 10;
color: black;
}
.time-labels[b-gv90jg7hbc] {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
margin-top: 0.8rem;
}
.time-labels-top[b-gv90jg7hbc] {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
margin-top: 0.1rem;
margin-bottom:2.4rem;
}
.dest-labels[b-gv90jg7hbc] {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
margin-top: 0.4rem;
}
@keyframes flashing-b-gv90jg7hbc {
0% {
background-color: #228B22; /* ForestGreen */
}
50% {
background-color: #7CFC00; /* LawnGreen */
}
100% {
background-color: #228B22; /* ForestGreen */
}
}
.flash-blue[b-gv90jg7hbc] {
animation: flash-b-gv90jg7hbc 1s infinite;
padding: 1px 10px;
border-radius: 4px;
background-color: #e6f0ff; /* light blue */
color: #0056b3; /* deeper blue */
font-weight: bold;
margin-left: 0.8rem;
margin-right: 0.8rem;
align-items: center;
text-align: center;
padding: 10px;
color: blue;
}
@keyframes flash-b-gv90jg7hbc {
0% {
background-color: #e6f0ff;
}
50% {
background-color: #cce0ff;
}
100% {
background-color: #e6f0ff;
}
}
.arrival-normal[b-gv90jg7hbc] {
background-color: #e6f0ff;
color: blue;
font-weight: 500;
padding: 10px;
border-radius: 8px;
font-weight: normal;
margin-left: 0.8rem;
margin-right: 0.8rem;
align-items: center;
text-align: center;
}
.flight-remaining-container[b-gv90jg7hbc] {
position: absolute;
top: -36px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 5;
}
.flight-remaining-box[b-gv90jg7hbc] {
background: #ffffff;
color: #000;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
white-space: nowrap;
}
.flight-arrow-down[b-gv90jg7hbc] {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid white;
}
/* /Components/LinkComponents/FlyingGanttView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
FLYING GANTT VIEW
Full-cell colour lives on | so it truly fills the cell.
Border-radius is only on the first and last day of each span.
═══════════════════════════════════════════════════════════════ */
.fgantt-shell[b-0d6b2qywgq] {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
border-radius: 20px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 6px 24px rgba(15,23,42,.07);
}
/* ── toolbar ── */
.fgantt-toolbar[b-0d6b2qywgq] {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid rgba(15,23,42,.07);
background: rgba(248,250,252,.97);
flex-wrap: wrap;
}
.fgantt-toolbar__search[b-0d6b2qywgq] {
flex: 1 1 240px;
min-width: 0;
}
/* Scope DevExpress textbox to look right in our toolbar */
.fgantt-search-box[b-0d6b2qywgq] {
width: 100%;
border-radius: 10px !important;
}
.fgantt-toolbar__legend[b-0d6b2qywgq] {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
}
.fgantt-toolbar__meta[b-0d6b2qywgq] {
flex-shrink: 0;
}
.fgantt-row-count[b-0d6b2qywgq] {
font-size: .76rem;
font-weight: 700;
color: #94a3b8;
white-space: nowrap;
}
/* ── legend pills ── */
.fgantt-legend__item[b-0d6b2qywgq] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
}
.fgantt-legend__item--flying[b-0d6b2qywgq] {
background: rgba(37,99,235,.1);
color: #1d4ed8;
border: 1px solid rgba(37,99,235,.2);
}
.fgantt-legend__item--deadhead[b-0d6b2qywgq] {
background: rgba(139,92,246,.1);
color: #6d28d9;
border: 1px solid rgba(139,92,246,.2);
}
.fgantt-legend__item--rest[b-0d6b2qywgq] {
background: rgba(100,116,139,.1);
color: #475569;
border: 1px solid rgba(100,116,139,.2);
}
/* ── empty states ── */
.fgantt-empty[b-0d6b2qywgq] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 48px 20px;
}
.fgantt-empty__icon[b-0d6b2qywgq] {
font-size: 2.4rem;
opacity: .35;
}
.fgantt-empty__text[b-0d6b2qywgq] {
font-size: .95rem;
color: #64748b;
font-weight: 700;
}
.fgantt-empty__hint[b-0d6b2qywgq] {
font-size: .8rem;
color: #94a3b8;
font-weight: 600;
}
/* ── scrollable host ── */
.fgantt-scroll-host[b-0d6b2qywgq] {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* ═══════════════════════════════════════════════════════════════
TABLE
═══════════════════════════════════════════════════════════════ */
.fgantt-table[b-0d6b2qywgq] {
border-collapse: collapse; /* critical — collapse so adjacent td borders merge */
width: max-content;
min-width: 100%;
font-size: 11px;
table-layout: fixed;
}
/* ── sticky header ── */
.fgantt-th[b-0d6b2qywgq] {
position: sticky;
top: 0;
z-index: 3;
background: #f8fafc;
border-bottom: 2px solid rgba(15,23,42,.1);
border-right: 1px solid rgba(15,23,42,.07);
padding: 6px 2px;
text-align: center;
white-space: nowrap;
width: 40px;
min-width: 40px;
}
.fgantt-th--name[b-0d6b2qywgq] {
position: sticky;
left: 0;
z-index: 4;
text-align: left;
width: 170px;
min-width: 170px;
padding: 6px 10px;
font-size: .72rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: #64748b;
background: #f1f5f9;
border-right: 2px solid rgba(15,23,42,.1);
}
.fgantt-th__num[b-0d6b2qywgq] {
font-size: .82rem;
font-weight: 900;
color: #0f172a;
line-height: 1.2;
}
.fgantt-th__dow[b-0d6b2qywgq] {
font-size: .6rem;
font-weight: 700;
color: #94a3b8;
letter-spacing: .06em;
}
.fgantt-th--today[b-0d6b2qywgq] {
background: #eff6ff;
border-bottom-color: #2563eb;
}
.fgantt-th--today .fgantt-th__num[b-0d6b2qywgq] {
color: #2563eb;
}
.fgantt-th--weekend[b-0d6b2qywgq] {
background: #fafafa;
}
.fgantt-th--weekend .fgantt-th__num[b-0d6b2qywgq] {
color: #94a3b8;
}
.fgantt-th--weekend .fgantt-th__dow[b-0d6b2qywgq] {
color: #cbd5e1;
}
/* ── body rows ── */
.fgantt-row:nth-child(even) > .fgantt-td:not([class*="fgantt-td--flying"]):not([class*="fgantt-td--deadhead"]):not([class*="fgantt-td--rest"])[b-0d6b2qywgq] {
background: rgba(248,250,252,.6);
}
.fgantt-row:hover > .fgantt-td:not([class*="fgantt-td--flying"]):not([class*="fgantt-td--deadhead"]):not([class*="fgantt-td--rest"])[b-0d6b2qywgq] {
background: rgba(241,245,249,.8);
}
/* ═══════════════════════════════════════════════════════════════
DATA CELLS — colour lives HERE on the |
so it fills 100% of the cell with no padding gap.
═══════════════════════════════════════════════════════════════ */
.fgantt-td[b-0d6b2qywgq] {
border-right: 1px solid rgba(15,23,42,.06);
border-bottom: 1px solid rgba(15,23,42,.06);
padding: 0; /* zero padding — colour must fill edge-to-edge */
vertical-align: middle;
text-align: left;
width: 40px;
min-width: 40px;
height: 34px;
position: relative;
overflow: hidden;
}
/* sticky name column */
.fgantt-td--name[b-0d6b2qywgq] {
position: sticky;
left: 0;
z-index: 2;
background: #fff;
text-align: left;
padding: 5px 10px;
border-right: 2px solid rgba(15,23,42,.1);
min-width: 170px;
width: 170px;
overflow: hidden;
}
.fgantt-row:hover .fgantt-td--name[b-0d6b2qywgq] {
background: #f8fafc;
}
/* today / weekend base tints (only when no activity colour) */
.fgantt-td--today[b-0d6b2qywgq] {
background: rgba(239,246,255,.5);
}
.fgantt-td--weekend[b-0d6b2qywgq] {
background: rgba(241,245,249,.45);
}
/* ── name text ── */
.fgantt-name[b-0d6b2qywgq] {
font-size: .82rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fgantt-crewcode[b-0d6b2qywgq] {
font-size: .64rem;
font-weight: 600;
color: #94a3b8;
margin-top: 1px;
white-space: nowrap;
}
/* ── Activity colours on the td ── */
.fgantt-td--flying[b-0d6b2qywgq] {
background: #2563eb;
color: #fff;
}
.fgantt-td--deadhead[b-0d6b2qywgq] {
background: #7c3aed;
color: #fff;
}
.fgantt-td--rest[b-0d6b2qywgq] {
background: #64748b;
color: #fff;
}
/* Hover brightness on coloured cells */
.fgantt-td--flying:hover[b-0d6b2qywgq] {
background: #1d4ed8;
}
.fgantt-td--deadhead:hover[b-0d6b2qywgq] {
background: #6d28d9;
}
.fgantt-td--rest:hover[b-0d6b2qywgq] {
background: #475569;
}
/* ── Border-radius: only on the true FIRST and LAST day of each span ──
We use border-radius on the td itself.
border-collapse:collapse means we have to use outline/box-shadow tricks
for "internal" rounded corners — instead we rely on overflow:hidden
on the td and set border-radius directly.
First day → left corners rounded, right corners square
Middle days → all corners square (no radius)
Last day → left corners square, right corners rounded
Single day → all four corners rounded (both first AND last)
──────────────────────────────────────────────────────────────── */
/* Single-day activity (first AND last) */
.fgantt-td--span-first:not(.fgantt-td--span-last)[b-0d6b2qywgq] {
border-radius: 6px 0 0 6px;
}
/* Last day — right side rounded */
.fgantt-td--span-last:not(.fgantt-td--span-first)[b-0d6b2qywgq] {
border-radius: 0 6px 6px 0;
}
/* A span that is both first and last = single day */
.fgantt-td--span-first.fgantt-td--span-last[b-0d6b2qywgq] {
border-radius: 6px;
}
/* Middle days — completely square */
.fgantt-td--span-mid[b-0d6b2qywgq] {
border-radius: 0;
}
/* ── Label inside the coloured td (only on first day) ── */
.fgantt-cell__label[b-0d6b2qywgq] {
display: block;
padding: 0 5px;
font-size: .62rem;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: inherit;
line-height: 34px; /* vertically centre in the td height */
letter-spacing: .02em;
}
/* /Components/LinkComponents/MapSettingsModal.razor.rz.scp.css */
/* iOS-like switch */
.ios-switch[b-990xidbutn] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: 51px;
height: 31px;
}
.ios-switch input[b-990xidbutn] {
display: none;
}
.ios-switch-slider[b-990xidbutn] {
position: relative;
width: 51px;
height: 31px;
background: #e5e5ea;
border-radius: 999px;
transition: background .25s ease;
}
.ios-switch-slider[b-990xidbutn]::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 27px;
height: 27px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition: transform .25s ease;
}
.ios-switch input:checked + .ios-switch-slider[b-990xidbutn] {
background: #34c759;
}
.ios-switch input:checked + .ios-switch-slider[b-990xidbutn]::before {
transform: translateX(20px);
}
.ios-number-input[b-990xidbutn] {
border: none;
background: transparent;
text-align: right;
width: 70px;
font-size: 0.9rem;
color: #111827;
}
.ios-number-input:focus[b-990xidbutn] {
outline: none;
}
.ios-select[b-990xidbutn] {
border: none;
background: transparent;
font-size: 0.9rem;
color: #111827;
padding: 2px 0;
}
.ios-select:focus[b-990xidbutn] {
outline: none;
}
.ios-segmented[b-990xidbutn] {
display: inline-flex;
padding: 2px;
background: #e5e5ea;
border-radius: 8px;
gap: 2px;
}
.ios-segmented button[b-990xidbutn] {
border: none;
background: transparent;
font-size: 0.8rem;
padding: 4px 10px;
border-radius: 6px;
color: #111827;
}
.ios-segmented button.active[b-990xidbutn] {
background: #ffffff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.ios-value[b-990xidbutn] {
font-size: 0.8rem;
color: #4b5563;
margin-left: 8px;
white-space: nowrap;
}
.ios-settings-dialog[b-990xidbutn] {
max-width: 420px; /* fixed-ish width, tweak if you want */
width: 100%;
height: 75vh; /* requested height */
margin: 0 auto; /* center horizontally */
}
.ios-settings-content[b-990xidbutn] {
height: 85%;
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
}
.ios-settings-header[b-990xidbutn] {
position: sticky;
top: 0;
z-index: 20;
background: #f9fafb; /* subtle tint */
border-bottom: 1px solid #e5e7eb;
height: 3rem;
}
.ios-settings-body-scroll[b-990xidbutn] {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.ios-settings-footer[b-990xidbutn] {
border-top: 1px solid #e5e7eb;
background: #f9fafb;
}
/* /Components/LinkComponents/MobileDefects.razor.rz.scp.css */
.mobile-defects-shell[b-9vk4kiwvkr] {
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
border-radius: 18px;
overflow: hidden;
}
.mobile-defects-toolbar[b-9vk4kiwvkr] {
position: sticky;
top: 0;
z-index: 5;
padding: 10px 12px 12px;
background: rgba(255,255,255,.82);
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
border-bottom: 1px solid rgba(148,163,184,.22);
}
.mobile-defects-search[b-9vk4kiwvkr] {
display: flex;
flex-direction: column;
gap: 6px;
}
.mobile-defects-search-label[b-9vk4kiwvkr] {
font-size: .78rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: #475569;
}
.mobile-defects-search-input[b-9vk4kiwvkr] {
width: 100%;
border: 1px solid rgba(148,163,184,.35);
background: rgba(255,255,255,.92);
border-radius: 14px;
padding: 12px 14px;
font-size: .95rem;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.mobile-defects-search-input:focus[b-9vk4kiwvkr] {
border-color: rgba(37,99,235,.45);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.mobile-defects-toolbar-row[b-9vk4kiwvkr] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
}
.mobile-defects-check[b-9vk4kiwvkr] {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .92rem;
font-weight: 600;
color: #0f172a;
}
.mobile-defects-btn[b-9vk4kiwvkr] {
border: none;
border-radius: 12px;
background: rgba(37,99,235,.12);
color: #2563eb;
font-weight: 700;
padding: 10px 14px;
min-width: 72px;
}
.mobile-defects-btn:disabled[b-9vk4kiwvkr] {
opacity: .45;
}
.mobile-defects-open-strip[b-9vk4kiwvkr] {
padding: 10px 12px 8px;
border-bottom: 1px solid rgba(148,163,184,.14);
}
.mobile-defects-open-strip-title[b-9vk4kiwvkr] {
font-size: .76rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 8px;
}
.mobile-defects-open-chips[b-9vk4kiwvkr] {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
}
.mobile-defects-empty-chip[b-9vk4kiwvkr] {
font-size: .88rem;
color: #94a3b8;
}
.mobile-defects-chip[b-9vk4kiwvkr] {
flex: 0 0 auto;
border: 1px solid rgba(148,163,184,.25);
background: rgba(255,255,255,.9);
border-radius: 14px;
padding: 10px 12px;
min-width: 90px;
text-align: left;
box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.mobile-defects-chip-reg[b-9vk4kiwvkr] {
display: block;
font-size: .84rem;
font-weight: 800;
color: #0f172a;
}
.mobile-defects-chip-page[b-9vk4kiwvkr] {
display: block;
margin-top: 2px;
font-size: .74rem;
color: #64748b;
}
.mobile-defects-list[b-9vk4kiwvkr] {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 12px;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.mobile-defects-empty[b-9vk4kiwvkr] {
color: #64748b;
text-align: center;
padding: 30px 12px;
}
.mobile-defect-card-wrap[b-9vk4kiwvkr] {
perspective: 1000px;
margin-bottom: 14px;
}
.mobile-defect-card[b-9vk4kiwvkr] {
position: relative;
transform-style: preserve-3d;
transition: transform .45s ease;
min-height: 320px;
}
.mobile-defect-card.is-flipped[b-9vk4kiwvkr] {
transform: rotateY(180deg);
}
.mobile-defect-card-face[b-9vk4kiwvkr] {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 20px;
padding: 14px;
box-shadow: 0 12px 24px rgba(15,23,42,.10);
border: 1px solid rgba(148,163,184,.22);
}
.mobile-defect-card-front[b-9vk4kiwvkr] {
position: relative;
background: rgba(255,255,255,.96);
}
.mobile-defect-card-back[b-9vk4kiwvkr] {
position: absolute;
inset: 0;
transform: rotateY(180deg);
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.mobile-defect-card-front.status-open[b-9vk4kiwvkr] {
background: linear-gradient(180deg, #fff1f2 0%, #ffffff 40%);
}
.mobile-defect-card-front.status-deferred[b-9vk4kiwvkr] {
background: linear-gradient(180deg, #eff6ff 0%, #ffffff 40%);
}
.mobile-defect-card-front.status-closed[b-9vk4kiwvkr] {
background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 40%);
}
.mobile-defect-card-top[b-9vk4kiwvkr] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.mobile-defect-card-reg[b-9vk4kiwvkr] {
font-size: 1rem;
font-weight: 900;
color: #0f172a;
letter-spacing: .02em;
}
.mobile-defect-card-page[b-9vk4kiwvkr] {
margin-top: 3px;
font-size: .82rem;
color: #64748b;
font-weight: 700;
}
.mobile-defect-badges[b-9vk4kiwvkr] {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.mobile-defect-badge[b-9vk4kiwvkr] {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 6px 10px;
font-size: .72rem;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
}
.badge-open[b-9vk4kiwvkr] {
background: rgba(244,63,94,.12);
color: #e11d48;
}
.badge-deferred[b-9vk4kiwvkr] {
background: rgba(37,99,235,.12);
color: #2563eb;
}
.badge-closed[b-9vk4kiwvkr] {
background: rgba(5,150,105,.12);
color: #059669;
}
.badge-info[b-9vk4kiwvkr] {
background: rgba(100,116,139,.12);
color: #475569;
}
.mobile-defect-card-section[b-9vk4kiwvkr] {
margin-bottom: 12px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255,255,255,.78);
border: 1px solid rgba(148,163,184,.18);
}
.mobile-defect-card-grid[b-9vk4kiwvkr] {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 10px;
margin-bottom: 12px;
}
.mobile-defect-mini-card[b-9vk4kiwvkr] {
padding: 10px 12px;
border-radius: 14px;
background: rgba(255,255,255,.78);
border: 1px solid rgba(148,163,184,.18);
}
.mobile-defect-label[b-9vk4kiwvkr] {
font-size: .72rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 5px;
}
.mobile-defect-value[b-9vk4kiwvkr] {
font-size: .93rem;
line-height: 1.35rem;
color: #0f172a;
font-weight: 600;
}
.mobile-defect-due[b-9vk4kiwvkr] {
border-color: rgba(37,99,235,.24);
}
.mobile-defect-card-actions[b-9vk4kiwvkr] {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.mobile-defect-action-btn[b-9vk4kiwvkr] {
border: none;
border-radius: 12px;
padding: 10px 14px;
background: #0f172a;
color: white;
font-weight: 700;
font-size: .88rem;
}
.mobile-defect-action-btn.secondary[b-9vk4kiwvkr] {
background: rgba(15,23,42,.08);
color: #0f172a;
}
@media (max-width: 420px) {
.mobile-defect-card-grid[b-9vk4kiwvkr] {
grid-template-columns: 1fr;
}
}
.mobile-defects-toolbar-row[b-9vk4kiwvkr] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom:15px;
}
/* Search takes full space */
.mobile-defects-search-input[b-9vk4kiwvkr] {
flex: 1;
}
/* ===== iOS SWITCH ===== */
.ios-switch[b-9vk4kiwvkr] {
position: relative;
width: 42px;
height: 24px;
flex: 0 0 auto;
}
.ios-switch input[b-9vk4kiwvkr] {
opacity: 0;
width: 0;
height: 0;
}
.ios-slider[b-9vk4kiwvkr] {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #d1d5db;
border-radius: 999px;
transition: .25s;
}
.ios-slider[b-9vk4kiwvkr]::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 2px;
top: 2px;
background-color: white;
border-radius: 50%;
transition: .25s;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* Checked state */
.ios-switch input:checked + .ios-slider[b-9vk4kiwvkr] {
background-color: #34c759; /* iOS green */
}
.ios-switch input:checked + .ios-slider[b-9vk4kiwvkr]::before {
transform: translateX(18px);
}
.switch-label[b-9vk4kiwvkr] {
font-size: 0.8rem;
font-weight: 600;
color: #475569;
}
.mobile-defects-btn[b-9vk4kiwvkr] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mobile-btn-spinner[b-9vk4kiwvkr] {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid currentColor;
border-right-color: transparent;
animation: mobile-btn-spin-b-9vk4kiwvkr .7s linear infinite;
display: inline-block;
}
@keyframes mobile-btn-spin-b-9vk4kiwvkr {
to {
transform: rotate(360deg);
}
}
/* /Components/LinkComponents/MonthView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
MONTH VIEW SHELL
═══════════════════════════════════════════════════ */
.monthview-shell[b-0uf7iqjheg] {
display: grid;
grid-template-columns: 74% 26%;
gap: 14px;
height: 100%;
min-height: 0;
}
/* ── shared panel base ── */
.monthview-calendar-panel[b-0uf7iqjheg],
.monthview-detail-panel[b-0uf7iqjheg] {
border-radius: 24px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.99));
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 6px 22px rgba(15,23,42,.07);
min-height: 0;
}
.monthview-calendar-panel[b-0uf7iqjheg] {
display: flex;
flex-direction: column;
height: 100%;
}
/* ── calendar header ── */
.monthview-header[b-0uf7iqjheg] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid rgba(15,23,42,.06);
background: rgba(248,250,252,.94);
flex-wrap: wrap;
}
.monthview-title-wrap[b-0uf7iqjheg] {
text-align: center;
flex-shrink: 0;
}
.monthview-title[b-0uf7iqjheg] {
font-size: .9rem;
font-weight: 900;
color: #0f172a;
letter-spacing: -.01em;
}
.monthview-subtitle[b-0uf7iqjheg] {
margin-top: 1px;
font-size: .74rem;
color: #94a3b8;
}
.monthview-nav-btn[b-0uf7iqjheg] {
width: 34px;
height: 34px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
font-size: 1.1rem;
font-weight: 900;
box-shadow: 0 4px 12px rgba(37,99,235,.24);
cursor: pointer;
flex: 0 0 auto;
transition: filter .14s ease;
}
.monthview-nav-btn:hover[b-0uf7iqjheg] {
filter: brightness(1.08);
}
/* ── weekday labels ── */
.monthview-weekdays[b-0uf7iqjheg] {
display: grid;
grid-template-columns: repeat(7,minmax(0,1fr));
gap: 6px;
padding: 10px 12px 4px;
}
.monthview-weekday[b-0uf7iqjheg] {
padding: 4px 6px;
text-align: center;
font-size: .68rem;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: .07em;
}
/* ── calendar grid ── */
.monthview-grid[b-0uf7iqjheg] {
display: grid;
grid-template-columns: repeat(7,minmax(0,1fr));
grid-auto-rows: 138px;
gap: 8px;
padding: 8px 12px 12px;
align-content: start;
min-height: 0;
overflow: auto;
}
/* ── day cell ── */
.monthview-day[b-0uf7iqjheg] {
border: 1px solid rgba(15,23,42,.08);
border-radius: 14px;
background: #fff;
padding: 8px;
display: flex;
flex-direction: column;
gap: 5px;
min-height: 138px;
position: relative;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
text-align: left;
}
.monthview-day:hover[b-0uf7iqjheg] {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15,23,42,.1);
border-color: rgba(37,99,235,.25);
}
/* modifiers */
.monthview-day--muted[b-0uf7iqjheg] {
opacity: .38;
}
.monthview-day--selected[b-0uf7iqjheg] {
border-color: #2563eb !important;
box-shadow: 0 0 0 2px rgba(37,99,235,.18);
}
.monthview-day--weekend[b-0uf7iqjheg] {
background: #fafafa;
border-color: rgba(220,38,38,.16);
}
.monthview-day--today[b-0uf7iqjheg] {
border: 2px solid #2563eb !important;
box-shadow: 0 0 0 3px rgba(37,99,235,.1);
opacity: 1 !important;
}
.monthview-day--past[b-0uf7iqjheg] {
opacity: .55;
filter: saturate(.75);
}
.monthview-day--blue[b-0uf7iqjheg] {
background: linear-gradient(160deg,rgba(239,246,255,.95),rgba(219,234,254,.8));
}
.monthview-day--yellow[b-0uf7iqjheg] {
background: linear-gradient(160deg,rgba(255,251,235,.95),rgba(254,243,199,.8));
}
/* ── day number / badges row ── */
.monthview-day__top[b-0uf7iqjheg] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 4px;
width: 100%;
min-width: 0;
}
.monthview-day__number-wrap[b-0uf7iqjheg] {
flex: 0 0 auto;
}
.monthview-day__number[b-0uf7iqjheg] {
font-size: 1.8rem;
font-weight: 900;
color: #0f172a;
line-height: 1;
}
.monthview-day--today .monthview-day__number[b-0uf7iqjheg] {
color: #2563eb;
}
.monthview-day__mini-badges[b-0uf7iqjheg] {
display: flex;
gap: 3px;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-end;
min-width: 0;
}
.monthview-day__pill[b-0uf7iqjheg] {
display: inline-flex;
align-items: center;
justify-content: center;
height: 18px;
padding: 0 6px;
border-radius: 999px;
font-size: .6rem;
font-weight: 800;
color: #fff;
white-space: nowrap;
letter-spacing: .02em;
}
.monthview-day__pill--arr[b-0uf7iqjheg] {
background: #16a34a;
}
.monthview-day__pill--dep[b-0uf7iqjheg] {
background: #7c3aed;
}
/* ── metric tiles grid ── */
.monthview-day__metrics-grid[b-0uf7iqjheg] {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 4px;
flex: 1 1 auto;
align-content: start;
min-width: 0;
}
.monthview-day__metric[b-0uf7iqjheg] {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 5px 6px;
border-radius: 8px;
background: rgba(15,23,42,.04);
border: 1px solid rgba(15,23,42,.05);
min-width: 0;
overflow: hidden;
}
.monthview-day--blue .monthview-day__metric[b-0uf7iqjheg] {
background: rgba(37,99,235,.06);
}
.monthview-day--yellow .monthview-day__metric[b-0uf7iqjheg] {
background: rgba(245,158,11,.08);
}
.monthview-day__label[b-0uf7iqjheg] {
font-size: .55rem;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: .06em;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.monthview-day__value[b-0uf7iqjheg] {
font-size: .92rem;
font-weight: 900;
color: #0f172a;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── view tab switcher ── */
.monthview-tabs[b-0uf7iqjheg] {
display: flex;
gap: 4px;
background: rgba(15,23,42,.05);
border-radius: 12px;
padding: 3px;
}
.monthview-tab[b-0uf7iqjheg] {
border: none;
border-radius: 9px;
padding: 6px 14px;
font-size: .78rem;
font-weight: 700;
color: #64748b;
background: transparent;
cursor: pointer;
transition: background .14s ease, color .14s ease, box-shadow .14s ease;
white-space: nowrap;
}
.monthview-tab:hover[b-0uf7iqjheg] {
background: rgba(255,255,255,.7);
color: #0f172a;
}
.monthview-tab--active[b-0uf7iqjheg] {
background: #fff;
color: #0f172a;
box-shadow: 0 2px 8px rgba(15,23,42,.1);
}
/* ── flying gantt host (fills remaining space below header) ── */
.monthview-gantt-host[b-0uf7iqjheg] {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 12px;
}
/* ── full-width shell when Flying tab is active ── */
.monthview-shell--fullwidth[b-0uf7iqjheg] {
grid-template-columns: 1fr !important;
}
.monthview-shell--fullwidth .monthview-calendar-panel[b-0uf7iqjheg] {
border-radius: 24px;
}
/* ── detail panel (right sidebar) ── */
.monthview-detail-panel[b-0uf7iqjheg] {
display: flex;
flex-direction: column;
height: 100%;
}
.monthview-detail-panel__header[b-0uf7iqjheg] {
padding: 14px 18px;
font-size: .92rem;
font-weight: 800;
color: #0f172a;
border-bottom: 1px solid rgba(15,23,42,.06);
background: rgba(248,250,252,.94);
}
.monthview-detail-panel__body[b-0uf7iqjheg] {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 12px;
}
.monthview-detail-panel__body .day-card[b-0uf7iqjheg] {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
/* ── summary badge / count rows (legacy support) ── */
.monthview-day__badge[b-0uf7iqjheg] {
display: inline-flex;
align-self: flex-start;
padding: 4px 8px;
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
text-transform: uppercase;
}
.monthview-day__badge--blue[b-0uf7iqjheg] {
background: rgba(37,99,235,.1);
color: #1d4ed8;
}
.monthview-day__badge--yellow[b-0uf7iqjheg] {
background: rgba(245,158,11,.14);
color: #b45309;
}
.monthview-day__counts[b-0uf7iqjheg] {
display: flex;
flex-direction: column;
gap: 2px;
font-size: .72rem;
font-weight: 700;
color: #475569;
}
/* ── responsive ── */
@media (max-width: 1100px) {
.monthview-shell[b-0uf7iqjheg] {
grid-template-columns: 1fr;
}
.monthview-grid[b-0uf7iqjheg] {
grid-auto-rows: 120px;
}
}
/* /Components/LinkComponents/PhoneQuickSearch.razor.rz.scp.css */
.phone-panel-backdrop[b-bw7zhg1d65] {
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 1040;
animation: phoneFadeIn-b-bw7zhg1d65 .2s ease;
}
.phone-panel[b-bw7zhg1d65] {
position: fixed;
top: 6%;
left: 50%;
transform: translateX(-50%) translateY(20px);
width: min(720px, 92vw);
height: 60vh;
background: #fff;
z-index: 1050;
box-shadow: 0 18px 45px rgba(0,0,0,.20);
border-radius: 22px;
transition: transform .28s ease, opacity .28s ease;
opacity: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.phone-panel.open[b-bw7zhg1d65] {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.phone-panel-header[b-bw7zhg1d65] {
padding: 1rem 1rem .75rem 1rem;
border-bottom: 1px solid #e9ecef;
background: #fff;
position: sticky;
top: 0;
z-index: 2;
}
.phone-panel-body[b-bw7zhg1d65] {
flex: 1;
overflow-y: auto;
padding: 1rem;
background: #f8fafc;
}
@keyframes phoneFadeIn-b-bw7zhg1d65 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 768px) {
.phone-panel[b-bw7zhg1d65] {
top: 6%;
width: 94vw;
height: 70vh;
border-radius: 18px;
}
}
.phone-card-ext[b-bw7zhg1d65] {
white-space: nowrap;
background: #eef2ff;
color: #334155;
padding: .25rem .6rem;
border-radius: 999px;
font-size: 1.4rem;
font-weight: 700;
}
.phone-search-shell[b-bw7zhg1d65] {
position: relative;
z-index: 20;
}
.phone-search-glass[b-bw7zhg1d65] {
display: flex;
align-items: center;
gap: 10px;
border-radius: 18px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.phone-search-icon[b-bw7zhg1d65] {
flex: 0 0 auto;
opacity: .7;
}
.phone-search-input[b-bw7zhg1d65] {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
font-size: 18px;
}
.phone-search-input:focus[b-bw7zhg1d65] {
outline: none;
box-shadow: none !important;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
.phone-search-glass[b-bw7zhg1d65] {
background: transparent;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
}
}
/* Mobile only */
@media (max-width: 800px) {
.phone-search-shell[b-bw7zhg1d65] {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(14px + env(safe-area-inset-bottom));
z-index: 1000;
pointer-events: none;
}
.phone-search-field[b-bw7zhg1d65] {
margin-bottom: 0 !important;
}
.phone-search-glass[b-bw7zhg1d65] {
pointer-events: auto;
border-radius: 22px;
min-height: 54px;
padding: 12px 16px;
}
.desktop-search-label[b-bw7zhg1d65] {
display: none;
}
/* so results don't hide behind the floating search */
.phone-results-pad[b-bw7zhg1d65] {
padding-bottom: 90px;
}
}
.phone-search-sticky[b-bw7zhg1d65] {
position: sticky;
top: 0;
z-index: 1000;
background: white;
padding: 0.5rem 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* /Components/LinkComponents/RosterMonthMatrix.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
ROSTER MONTH MATRIX
═══════════════════════════════════════════════════ */
.roster-matrix-shell[b-4k3ev6lg6t] {
overflow: auto;
max-height: 75vh;
border: 1px solid rgba(15,23,42,.1);
border-radius: 18px;
background: #fff;
box-shadow: 0 4px 18px rgba(15,23,42,.06);
}
.roster-matrix[b-4k3ev6lg6t] {
border-collapse: collapse;
font-size: 12px;
min-width: 1200px;
width: max-content;
}
.roster-matrix th[b-4k3ev6lg6t],
.roster-matrix td[b-4k3ev6lg6t] {
border: 1px solid rgba(15,23,42,.1);
width: 34px;
height: 26px;
text-align: center;
padding: 2px 3px;
}
/* ── sticky columns ── */
.roster-name-col[b-4k3ev6lg6t] {
min-width: 180px;
text-align: left !important;
background: #f8fafc;
font-weight: 600;
color: #0f172a;
}
.roster-skill-col[b-4k3ev6lg6t] {
min-width: 64px;
background: #f8fafc;
font-weight: 600;
color: #475569;
}
/* ── day header ── */
.roster-day-head[b-4k3ev6lg6t] {
background: #fff;
cursor: pointer;
transition: background .12s ease;
vertical-align: middle;
}
.roster-day-head:hover[b-4k3ev6lg6t] {
background: #f1f5f9;
}
.roster-day-head__num[b-4k3ev6lg6t] {
font-weight: 800;
font-size: 12px;
line-height: 1.2;
}
.roster-day-head__dow[b-4k3ev6lg6t] {
display: block;
font-size: 9px;
font-weight: 600;
letter-spacing: .04em;
color: #64748b;
}
/* ── group row (collapsible) ── */
.roster-group-row td[b-4k3ev6lg6t] {
font-weight: 800;
text-align: left;
background: linear-gradient(90deg,#f1f5f9,#f8fafc);
color: #0f172a;
cursor: pointer;
padding: 7px 10px;
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
user-select: none;
transition: background .12s ease;
}
.roster-group-row td:hover[b-4k3ev6lg6t] {
background: linear-gradient(90deg,#e2e8f0,#f1f5f9);
}
.roster-group-row__chevron[b-4k3ev6lg6t] {
display: inline-block;
font-size: 1rem;
font-weight: 700;
color: #94a3b8;
transform: rotate(90deg);
transition: transform .18s ease;
margin-right: 6px;
vertical-align: middle;
line-height: 1;
}
.roster-group-row__chevron.open[b-4k3ev6lg6t] {
transform: rotate(-90deg);
}
.roster-group-row__count[b-4k3ev6lg6t] {
margin-left: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: rgba(15,23,42,.08);
color: #475569;
font-size: 10px;
font-weight: 700;
vertical-align: middle;
}
/* ── body rows hover ──
We do NOT touch background at all — zero background rules on hover
so every cell colour (AL, E, F, S…) shows through untouched.
The neon border is a pointer-events:none pseudo-element on the tr
that sits on top of everything without affecting layout or colours.
──────────────────────────────────────────────────────────────────────── */
.roster-body-row[b-4k3ev6lg6t] {
position: relative;
}
.roster-body-row:hover[b-4k3ev6lg6t]::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
outline: 2px solid #3b82f6;
outline-offset: -1px;
border-radius: 2px;
box-shadow: 0 0 0 1px #3b82f6, 0 0 8px rgba(59,130,246,.45);
z-index: 10;
}
/* ── data cells ── */
.roster-cell[b-4k3ev6lg6t] {
font-size: 11px;
font-weight: 600;
transition: background .08s ease;
}
/* ── shift tints ── */
.roster-day-head.roster-cell--blue[b-4k3ev6lg6t] {
background: #1d6fa4;
color: #fff;
}
.roster-day-head.roster-cell--yellow[b-4k3ev6lg6t] {
background: #d4a000;
color: #fff;
}
.roster-cell--blue[b-4k3ev6lg6t] {
background: rgba(0,112,192,.15);
}
.roster-cell--yellow[b-4k3ev6lg6t] {
background: rgba(255,215,0,.25);
}
/* ── status cell colours ── */
.roster-cell--leave[b-4k3ev6lg6t] {
background: #0070c0;
color: #fff;
font-weight: 700;
}
.roster-cell--late[b-4k3ev6lg6t] {
background: #3b82f6;
color: #fff;
font-weight: 700;
}
.roster-cell--early[b-4k3ev6lg6t] {
background: #92d050;
color: #14532d;
font-weight: 700;
}
.roster-cell--flying[b-4k3ev6lg6t] {
background: #fbcfe8;
color: #9d174d;
font-weight: 700;
}
.roster-cell--notcounted[b-4k3ev6lg6t] {
background: #a9d18e;
color: #14532d;
font-weight: 700;
}
.roster-cell--sick[b-4k3ev6lg6t] {
background: #ef4444;
color: #fff;
font-weight: 700;
}
.roster-cell--training[b-4k3ev6lg6t] {
background: #7030a0;
color: #fff;
font-weight: 700;
}
.roster-cell--overtime[b-4k3ev6lg6t] {
background: #ffc000;
color: #78350f;
font-weight: 700;
}
.roster-cell--visa[b-4k3ev6lg6t] {
background: #f4b183;
color: #7c2d12;
font-weight: 700;
}
/* O = Outstation — teal */
.roster-cell--outstation[b-4k3ev6lg6t] {
background: #0d9488;
color: #fff;
font-weight: 700;
}
/* T = Other / Training — purple */
.roster-cell--other[b-4k3ev6lg6t] {
background: #8b5cf6;
color: #fff;
font-weight: 700;
}
/* /Components/LinkComponents/Schedule.razor.rz.scp.css */
td:empty[b-5nwhd03h30] {
display: none !important; /* or visibility: hidden; */
}
.dxbl-loading-panel[b-5nwhd03h30] {
padding: 0 0.1rem 0.1rem 0.1rem !important;
}
/*Testing Css handling color-profile small screens*/
/* Hide Day column entirely on < md screens */
@media (max-width: 767.98px) {
.dxbl-grid .col-day[b-5nwhd03h30] {
display: none !important;
}
}
/* On md+ keep it ~3 characters wide and truncate if needed */
@media (min-width: 768px) {
.dxbl-grid .col-day[b-5nwhd03h30] {
/* lock the column’s visual width; the column Width="4ch" helps too */
width: 3.6ch !important; /* ~3 chars + a bit of breathing room */
max-width: 3.6ch !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.pill-live[b-5nwhd03h30] {
display: inline-block;
margin-left: .1rem;
padding: .1rem .45rem;
font-size: 0.8rem;
font-weight: 900;
line-height: 1;
border-radius: 9999px; /* full pill */
background-color: #fde047; /* soft yellow */
color: #7a5d00; /* dark amber text */
border: 1px solid #ffe58f; /* subtle border */
vertical-align: middle;
}
.flight-text-mobile[b-5nwhd03h30] {
font-size: 17px;
font-weight: bold;
}
.flight-text[b-5nwhd03h30] {
font-size: 22px;
font-weight: bold;
}
/* /Components/LinkComponents/SmartDateRangePicker.razor.rz.scp.css */
.sdrp[b-bdbk1ij3iq] {
position: relative;
display: inline-block;
min-width: 180px;
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: bold;
}
.sdrp-input[b-bdbk1ij3iq] {
border: 1px solid #ccc;
border-radius: 8px;
padding: 7px 10px;
background: white;
cursor: pointer;
user-select: none;
min-height: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sdrp-input-text[b-bdbk1ij3iq] {
flex: 1;
}
.sdrp-input-icon[b-bdbk1ij3iq] {
flex: 0 0 30px;
border-left: 1px solid #d8d8d8;
display: flex;
align-items: center;
justify-content: center;
color: #666;
padding-left: 8px;
}
.sdrp-calendar-icon[b-bdbk1ij3iq] {
width: 16px;
height: 16px;
fill: currentColor;
display: block;
}
.sdrp-popup[b-bdbk1ij3iq] {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 1000;
background: white;
border: 1px solid #dcdcdc;
border-radius: 10px;
box-shadow: 0 8px 22px rgba(0,0,0,0.12);
padding: 10px;
min-width: 720px;
}
.sdrp-calendars[b-bdbk1ij3iq] {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.sdrp-month[b-bdbk1ij3iq] {
width: 100%;
max-width: 285px;
}
.sdrp-month-header[b-bdbk1ij3iq] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.sdrp-month-title[b-bdbk1ij3iq] {
text-align: center;
font-weight: 600;
font-size: 14px;
}
.sdrp-nav-btn[b-bdbk1ij3iq] {
border: 1px solid #ddd;
background: white;
border-radius: 6px;
width: 28px;
height: 28px;
cursor: pointer;
font-size: 16px;
line-height: 1;
}
.sdrp-weekdays[b-bdbk1ij3iq] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 4px;
}
.sdrp-weekdays div[b-bdbk1ij3iq] {
text-align: center;
font-size: 11px;
color: #666;
padding: 3px 0;
}
.sdrp-grid[b-bdbk1ij3iq] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
grid-auto-rows: 34px;
}
.sdrp-empty[b-bdbk1ij3iq] {
width: 100%;
aspect-ratio: 1 / 1;
}
.sdrp-day[b-bdbk1ij3iq] {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 6px;
background: #f5f5f5;
cursor: pointer;
font-size: 12px;
transition: all 0.15s ease;
}
.sdrp-day:hover:not(.disabled)[b-bdbk1ij3iq] {
background: #cfe0ff;
transform: scale(1.05);
}
.sdrp-day.in-range[b-bdbk1ij3iq] {
background: linear-gradient(180deg, #e8f0ff, #dbe7ff);
}
.sdrp-day.in-range:not(.start):not(.end)[b-bdbk1ij3iq] {
border-radius: 4px;
}
.sdrp-day.start[b-bdbk1ij3iq],
.sdrp-day.end[b-bdbk1ij3iq] {
background: #4c7eff;
color: white;
font-weight: 600;
}
.sdrp-day.today[b-bdbk1ij3iq] {
outline: 2px solid #8fb0ff;
}
.sdrp-day.disabled[b-bdbk1ij3iq] {
opacity: 0.35;
cursor: not-allowed;
}
.sdrp-footer[b-bdbk1ij3iq] {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid #eee;
flex-wrap: wrap;
}
.sdrp-footer-left[b-bdbk1ij3iq] {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 320px;
}
.sdrp-preview[b-bdbk1ij3iq] {
display: flex;
gap: 12px;
flex-wrap: wrap;
font-size: 13px;
color: #444;
}
.sdrp-quick-jumps[b-bdbk1ij3iq] {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.sdrp-quick-btn[b-bdbk1ij3iq],
button[b-bdbk1ij3iq] {
border: 1px solid #ccc;
border-radius: 6px;
padding: 5px 8px;
cursor: pointer;
font-size: 12px;
transition: 0.15s;
}
.sdrp-quick-btn:hover[b-bdbk1ij3iq],
button:hover[b-bdbk1ij3iq] {
background: #4c7eff;
}
.sdrp-actions[b-bdbk1ij3iq] {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-end;
}
.sdrp-actions button[b-bdbk1ij3iq] {
min-width: 80px;
height: 34px;
}
/* /Components/LinkComponents/SRPanel.razor.rz.scp.css */
.custom-switch .form-check-input[b-5ycluytr7j] {
width: 2.6rem;
height: 1.2rem;
border-color: #28a745;
}
.flight-progress-container[b-5ycluytr7j] {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0.2rem;
margin-right: 0.8rem;
width: 100%;
padding: 0.5rem;
font-family: Arial, sans-serif;
border: solid 1px green;
background-color: #e6f0ff;
border-radius: 8px;
}
.custom-switch .form-check-input:checked[b-5ycluytr7j] {
border-color: #28a745;
border-block-width: 2px;
}
.custom-switch .form-check-label[b-5ycluytr7j] {
font-weight: 125;
padding-left: 15px;
}
.empty-line[b-5ycluytr7j] {
text-align: center;
color: blue;
font-size: small;
}
.mel-tree[b-5ycluytr7j] {
list-style: none;
padding-left: 1rem;
margin: 0;
}
.mel-tree li[b-5ycluytr7j] {
margin-bottom: 0.3rem;
}
tr:hover[b-5ycluytr7j] {
background-color: #f8f9fa;
}
.fade-slide[b-5ycluytr7j] {
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
}
.fade-slide-hidden[b-5ycluytr7j] {
max-height: 0;
opacity: 0;
}
.fade-slide-show[b-5ycluytr7j] {
max-height: 1000px; /* Arbitrary large value for full height */
opacity: 1;
}
.mel-entry[b-5ycluytr7j] {
border: 1px solid #ccc;
margin-bottom: 2rem;
font-family: Arial, sans-serif;
background-color: white;
border-radius: 4px;
overflow: hidden;
}
/* ECAM Alert Header Bar */
.ecam-alert-bar[b-5ycluytr7j] {
background-color: white;
border: 1px solid #000;
text-align: center;
font-weight: bold;
padding: 6px;
font-size: 1rem;
}
.ecam-alert-text[b-5ycluytr7j] {
color: #f44336;
text-transform: uppercase;
}
/* Ident & Applicable To Section */
.mel-meta[b-5ycluytr7j] {
background-color: #f0f0f0;
padding: 8px 12px;
font-size: 0.9rem;
color: #333;
border-bottom: 1px solid #ccc;
}
.mel-meta div[b-5ycluytr7j] {
margin-bottom: 4px;
}
/* MEL Table */
.mel-table[b-5ycluytr7j] {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.mel-table th[b-5ycluytr7j],
.mel-table td[b-5ycluytr7j] {
border: 1px solid #999;
padding: 8px;
text-align: left;
}
.mel-table th[b-5ycluytr7j] {
background-color: #eee;
font-weight: bold;
}
.overlay-host[b-5ycluytr7j] {
position: relative;
}
/* when ShowProgress is true, this pseudo-element draws the grey overlay */
.overlay-host.dimmed[b-5ycluytr7j]::after {
content: "";
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: rgba(0, 0, 0, 0.4); /* grey @ 40% */
z-index: 10;
pointer-events: none; /* set to 'auto' if you want to block clicks */
border-radius: inherit; /* keeps rounded corners if any */
border-radius: 8px;
}
[b-5ycluytr7j] .dxbl-popup-cell {
z-index: 20000 !important;
}
/* /Components/LinkComponents/WaterLevel.razor.rz.scp.css */
/* --- Container grid for all cards on the page --- */
.water-cards[b-2st0wwyi04] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 1rem;
padding: .25rem .5rem;
height:25rem!important;
}
/* --- Card base --- */
.water-card .wl-card[b-2st0wwyi04] {
display: grid;
grid-template-rows: auto 1fr auto;
gap: .9rem;
padding: 1rem;
border-radius: 1rem;
background: var(--wl-bg, #0b0f14);
border: 1px solid var(--wl-border, rgba(255,255,255,0.08));
box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.water-card:hover .wl-card[b-2st0wwyi04] {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
/* --- Header --- */
.wl-header[b-2st0wwyi04] {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.wl-reg[b-2st0wwyi04] {
font-weight: 800;
font-size: 1.1rem;
letter-spacing: .6px;
text-transform: uppercase;
}
.wl-chips[b-2st0wwyi04] {
display: inline-flex;
gap: .4rem;
align-items: center;
flex-wrap: wrap;
}
/* --- Chips (badges) --- */
.chip[b-2st0wwyi04] {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .15rem .5rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
border: 1px solid transparent;
white-space: nowrap;
}
/* STD chips */
.chip-std[b-2st0wwyi04] {
background: rgba(56, 189, 248, .12);
border-color: rgba(56, 189, 248, .35);
color: #8bd9ff;
}
/* Status chips */
.chip-status[b-2st0wwyi04] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); }
.chip-status.flying[b-2st0wwyi04] { color: #7ee787; border-color: rgba(126,231,135,.35); background: rgba(126,231,135,.12); }
.chip-status.maintenance[b-2st0wwyi04] { color: #f7c843; border-color: rgba(247,200,67,.35); background: rgba(247,200,67,.12); }
.chip-status.landed[b-2st0wwyi04] { color: #9aa7b2; }
.chip-status.unknown[b-2st0wwyi04] { color: #c084fc; }
/* --- Body layout --- */
.wl-body[b-2st0wwyi04] {
display: grid;
grid-template-columns: 120px 1fr;
gap: 1rem;
align-items: center;
}
@media (max-width: 540px) {
.wl-body[b-2st0wwyi04] { grid-template-columns: 1fr; text-align: center; }
}
/* Gauge column */
.wl-gauge[b-2st0wwyi04] {
display: grid;
place-items: center;
gap: .5rem;
}
.wl-gauge-value[b-2st0wwyi04] {
font-weight: 800;
font-size: 1rem;
opacity: .9;
}
/* Metrics grid */
.wl-metrics[b-2st0wwyi04] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
}
@media (max-width: 420px) {
.wl-metrics[b-2st0wwyi04] { grid-template-columns: 1fr; }
}
.metric[b-2st0wwyi04] {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: .75rem;
padding: .6rem .75rem;
}
.metric-label[b-2st0wwyi04] {
font-size: .72rem;
letter-spacing: .2px;
opacity: .7;
}
.metric-value[b-2st0wwyi04] {
margin-top: .15rem;
font-size: 1.05rem;
font-weight: 750;
}
.metric-sub[b-2st0wwyi04] {
font-size: .7rem;
opacity: .65;
margin-top: .1rem;
}
/* --- Footer --- */
.wl-footer[b-2st0wwyi04] {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: .75rem;
opacity: .7;
}
.wl-footer-note[b-2st0wwyi04] { user-select: none; }
/* --- Card status accents (uses your existing class names) --- */
.water-card[b-2st0wwyi04] {
/* left accent */
position: relative;
}
.water-card[b-2st0wwyi04]::before {
content: "";
position: absolute;
left: 0;
top: .75rem;
bottom: .75rem;
width: 4px;
border-radius: 4px;
background: var(--wl-accent, transparent);
opacity: .9;
}
/* Flight state accent */
.flying-status[b-2st0wwyi04] { --wl-accent: linear-gradient(180deg, #4ade80, #22c55e); }
.maintenance-status[b-2st0wwyi04] { --wl-accent: linear-gradient(180deg, #f59e0b, #eab308); }
.live-status[b-2st0wwyi04] { --wl-accent: linear-gradient(180deg, #93c5fd, #60a5fa); }
.unknown-status[b-2st0wwyi04] { --wl-accent: linear-gradient(180deg, #c084fc, #a78bfa); }
/* Water STD tint (you add e.g. `std1-status` via code) */
.std1-status .wl-card[b-2st0wwyi04] { border-color: rgba(59,130,246,.25); }
.std2-status .wl-card[b-2st0wwyi04] { border-color: rgba(56,189,248,.25); }
.std3-status .wl-card[b-2st0wwyi04] { border-color: rgba(16,185,129,.25); }
.std4-status .wl-card[b-2st0wwyi04] { border-color: rgba(234,179,8,.25); }
/* Make the entire NavLink block-level */
.water-card[b-2st0wwyi04] {
display: block;
text-decoration: none;
color: inherit;
height:25rem !important;
}
/* /Components/LinkComponents/WeekView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
WEEK VIEW – CARD CONTAINER
═══════════════════════════════════════════════════ */
.card-container[b-oka8enjfl7] {
margin-top: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
position: relative;
align-items: flex-start;
padding: 4px;
}
/* ═══════════════════════════════════════════════════
EXPANDED INLINE HOST
═══════════════════════════════════════════════════ */
.expanded-host[b-oka8enjfl7],
.expanded-inline[b-oka8enjfl7] {
width: 100%;
margin: 0 0 12px;
animation: expanded-in-b-oka8enjfl7 .2s ease;
}
@keyframes expanded-in-b-oka8enjfl7 {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alone-mt[b-oka8enjfl7] {
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════
EXPANDED CARD WRAPPER
═══════════════════════════════════════════════════ */
.roster-expanded-card[b-oka8enjfl7] {
width: 100%;
border-radius: 26px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(15,23,42,.1);
background: #fff;
border: 1px solid rgba(15,23,42,.06);
}
.roster-expanded-card__header[b-oka8enjfl7] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 22px 26px 18px;
border-bottom: 1px solid rgba(15,23,42,.06);
}
.roster-expanded-card__header--yellow[b-oka8enjfl7] {
background: linear-gradient(180deg,#fff9db,#fff);
}
.roster-expanded-card__header--blue[b-oka8enjfl7] {
background: linear-gradient(180deg,#eaf4ff,#fff);
}
.roster-expanded-card__title[b-oka8enjfl7] {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
}
.roster-expanded-card__subtitle[b-oka8enjfl7] {
margin-top: 4px;
font-size: .88rem;
color: #64748b;
}
.roster-expanded-card__close[b-oka8enjfl7] {
border: none;
background: rgba(255,255,255,.88);
width: 38px;
height: 38px;
border-radius: 12px;
cursor: pointer;
font-size: 1rem;
color: #64748b;
box-shadow: 0 2px 8px rgba(15,23,42,.08);
transition: background .12s ease;
}
.roster-expanded-card__close:hover[b-oka8enjfl7] {
background: #f1f5f9;
}
.roster-expanded-card__body[b-oka8enjfl7] {
padding: 22px 26px 26px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* ── stats row ── */
.roster-expanded-card__stats[b-oka8enjfl7] {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 12px;
}
.roster-expanded-card__stat[b-oka8enjfl7] {
padding: 14px 16px;
border-radius: 18px;
background: #f8fafc;
border: 1px solid rgba(15,23,42,.05);
display: flex;
flex-direction: column;
gap: 4px;
}
.roster-expanded-card__stat-label[b-oka8enjfl7] {
font-size: .76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
color: #64748b;
}
.roster-expanded-card__stat-value[b-oka8enjfl7] {
font-size: 1.2rem;
font-weight: 800;
color: #0f172a;
}
/* ── grid layout ── */
.roster-expanded-card__grid[b-oka8enjfl7] {
display: flex;
gap: 16px;
}
.roster-expanded-card__panel[b-oka8enjfl7] {
height: 600px;
width: 35%;
padding: 18px;
border-radius: 20px;
background: #ffffff;
border: 1px solid rgba(15,23,42,.06);
box-shadow: 0 6px 18px rgba(15,23,42,.04);
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
}
.roster-expanded-card__panel-title[b-oka8enjfl7] {
font-size: .88rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
color: #334155;
flex-shrink: 0;
}
.roster-expanded-card__group[b-oka8enjfl7] {
display: flex;
flex-direction: column;
gap: 8px;
}
.roster-expanded-card__group-title[b-oka8enjfl7] {
font-size: .76rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
letter-spacing: .04em;
}
.roster-expanded-card__person[b-oka8enjfl7] {
padding: 9px 12px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid rgba(15,23,42,.05);
color: #0f172a;
font-size: .9rem;
}
.roster-expanded-card__preview[b-oka8enjfl7] {
min-width: 0;
}
.roster-expanded-card__preview-wrap .day-card[b-oka8enjfl7] {
margin: 0;
width: 100%;
height: 100%;
}
/* ── demand panel ── */
.roster-demand-panel[b-oka8enjfl7] {
width: 380px;
}
.roster-demand-panel .incoming-desktop-compact .compact-demands-grid[b-oka8enjfl7] {
display: grid;
grid-template-columns: repeat(1,1fr) !important;
gap: 12px;
width: 100%;
}
/* ═══════════════════════════════════════════════════
FAULT ROWS
═══════════════════════════════════════════════════ */
.fault-row[b-oka8enjfl7] {
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.08);
background: #f8fafc;
display: grid;
gap: 6px;
}
.fault-row__code[b-oka8enjfl7] {
font-size: .8rem;
font-weight: 800;
color: #334155;
}
.fault-row__text[b-oka8enjfl7] {
font-size: .92rem;
color: #0f172a;
line-height: 1.35;
}
.fault-row__status[b-oka8enjfl7] {
display: inline-flex;
width: fit-content;
padding: 4px 8px;
border-radius: 999px;
font-size: .74rem;
font-weight: 700;
}
.fault-row__status--open[b-oka8enjfl7] {
background: rgba(239,68,68,.12);
color: #b91c1c;
}
.fault-row__status--deferred[b-oka8enjfl7] {
background: rgba(234,179,8,.14);
color: #92400e;
}
.fault-row__status--monitor[b-oka8enjfl7] {
background: rgba(59,130,246,.12);
color: #1d4ed8;
}
/* ═══════════════════════════════════════════════════
CONTEXT MENU — desktop right-click
Uses CSS custom properties --ctx-x / --ctx-y set
inline so Blazor doesn't need JS to position it.
Smart clamping keeps it inside the viewport.
═══════════════════════════════════════════════════ */
/* Transparent backdrop — captures outside clicks */
.ctxmenu-backdrop[b-oka8enjfl7] {
position: fixed;
inset: 0;
z-index: 99990;
background: transparent;
cursor: default;
}
/* Menu panel */
.ctxmenu[b-oka8enjfl7] {
position: fixed;
left: var(--ctx-x, 0);
top: var(--ctx-y, 0);
z-index: 99999;
width: 260px;
max-width: min(260px, calc(100vw - var(--ctx-x, 0px) - 12px));
background: #fff;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.09);
box-shadow: 0 0 0 1px rgba(15,23,42,.05), 0 4px 6px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.14), 0 24px 48px rgba(15,23,42,.08);
overflow: hidden;
animation: ctxmenu-in-b-oka8enjfl7 .14s cubic-bezier(.22,.68,0,1.2) both;
transform-origin: top left;
}
/* Flipped — anchors bottom of menu to click point, opens upward */
.ctxmenu--flipped[b-oka8enjfl7] {
top: auto;
bottom: calc(100vh - var(--ctx-y, 0px));
transform-origin: bottom left;
animation: ctxmenu-in-flipped-b-oka8enjfl7 .14s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes ctxmenu-in-b-oka8enjfl7 {
from {
opacity: 0;
transform: scale(.94) translateY(-4px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes ctxmenu-in-flipped-b-oka8enjfl7 {
from {
opacity: 0;
transform: scale(.94) translateY(4px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* ── Header with avatar ── */
.ctxmenu__header[b-oka8enjfl7] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px 10px;
border-bottom: 1px solid rgba(15,23,42,.06);
background: #f8fafc;
}
.ctxmenu__avatar[b-oka8enjfl7] {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 999px;
background: linear-gradient(135deg, #334155, #64748b);
color: #fff;
font-size: .72rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: .02em;
user-select: none;
}
.ctxmenu__header-text[b-oka8enjfl7] {
flex: 1 1 0;
min-width: 0;
}
.ctxmenu__name[b-oka8enjfl7] {
font-size: .88rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ctxmenu__date[b-oka8enjfl7] {
margin-top: 2px;
font-size: .72rem;
color: #64748b;
font-weight: 500;
}
.ctxmenu__close[b-oka8enjfl7] {
flex-shrink: 0;
width: 26px;
height: 26px;
border: none;
border-radius: 999px;
background: rgba(15,23,42,.06);
color: #64748b;
font-size: .72rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .12s ease, color .12s ease;
}
.ctxmenu__close:hover[b-oka8enjfl7] {
background: rgba(15,23,42,.12);
color: #0f172a;
}
/* ── Section ── */
.ctxmenu__section[b-oka8enjfl7] {
padding: 4px 4px 2px;
}
.ctxmenu__section-label[b-oka8enjfl7] {
padding: 6px 10px 4px;
font-size: .64rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .07em;
color: #94a3b8;
}
/* ── Items ── */
.ctxmenu__item[b-oka8enjfl7] {
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 8px;
font-size: .88rem;
font-weight: 600;
color: #0f172a;
text-align: left;
cursor: pointer;
transition: background .1s ease;
}
.ctxmenu__item:hover[b-oka8enjfl7] {
background: #f1f5f9;
}
.ctxmenu__item:active[b-oka8enjfl7] {
background: #e2e8f0;
}
.ctxmenu__item-icon[b-oka8enjfl7] {
width: 20px;
min-width: 20px;
text-align: center;
font-size: .9rem;
color: #64748b;
flex-shrink: 0;
}
.ctxmenu__item-text[b-oka8enjfl7] {
flex: 1;
}
/* Keyboard shortcut hint */
.ctxmenu__item-kbd[b-oka8enjfl7] {
flex-shrink: 0;
font-size: .66rem;
font-weight: 700;
color: #94a3b8;
background: rgba(15,23,42,.06);
border: 1px solid rgba(15,23,42,.1);
border-radius: 4px;
padding: 1px 5px;
font-family: ui-monospace, monospace;
letter-spacing: .04em;
}
/* ── Success / Danger variants ── */
.ctxmenu__item--success[b-oka8enjfl7] {
color: #15803d;
background: rgba(22,163,74,.07);
border: 1px solid rgba(22,163,74,.18);
margin: 0 0 2px;
}
.ctxmenu__item--success:hover[b-oka8enjfl7] {
background: rgba(22,163,74,.13);
}
.ctxmenu__item--success .ctxmenu__item-icon[b-oka8enjfl7] {
color: #16a34a;
}
.ctxmenu__item--danger[b-oka8enjfl7] {
color: #b91c1c;
background: rgba(220,38,38,.07);
border: 1px solid rgba(220,38,38,.18);
margin: 0 0 2px;
}
.ctxmenu__item--danger:hover[b-oka8enjfl7] {
background: rgba(220,38,38,.13);
}
.ctxmenu__item--danger .ctxmenu__item-icon[b-oka8enjfl7] {
color: #dc2626;
}
/* Outstation item — teal accent */
.ctxmenu__item--outstation[b-oka8enjfl7] {
color: #0f766e;
background: rgba(13,148,136,.07);
border: 1px solid rgba(13,148,136,.18);
}
.ctxmenu__item--outstation:hover[b-oka8enjfl7] {
background: rgba(13,148,136,.13);
}
.ctxmenu__item--outstation .ctxmenu__item-icon[b-oka8enjfl7] {
color: #0d9488;
}
/* Other item — purple accent */
.ctxmenu__item--other[b-oka8enjfl7] {
color: #5b21b6;
background: rgba(139,92,246,.07);
border: 1px solid rgba(139,92,246,.18);
}
.ctxmenu__item--other:hover[b-oka8enjfl7] {
background: rgba(139,92,246,.13);
}
.ctxmenu__item--other .ctxmenu__item-icon[b-oka8enjfl7] {
color: #8b5cf6;
}
/* ── Separator ── */
.ctxmenu__sep[b-oka8enjfl7] {
height: 1px;
margin: 2px 10px;
background: rgba(15,23,42,.06);
}
@media (max-width: 768px) {
.ctxmenu[b-oka8enjfl7],
.ctxmenu-backdrop[b-oka8enjfl7] {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════
OUTSTATION FORM (inside DxPopup)
═══════════════════════════════════════════════════ */
.outstation-form[b-oka8enjfl7] {
display: flex;
flex-direction: column;
gap: 18px;
}
.outstation-form__field[b-oka8enjfl7] {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Two station selector buttons side by side */
.outstation-form__stations[b-oka8enjfl7] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.outstation-form__station-btn[b-oka8enjfl7] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 16px 12px;
border: 2px solid rgba(15,23,42,.1);
border-radius: 14px;
background: #f8fafc;
cursor: pointer;
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.outstation-form__station-btn:hover[b-oka8enjfl7] {
border-color: rgba(13,148,136,.4);
background: rgba(13,148,136,.05);
}
.outstation-form__station-btn--active[b-oka8enjfl7] {
border-color: #0d9488;
background: rgba(13,148,136,.08);
box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}
.outstation-form__station-code[b-oka8enjfl7] {
font-size: 1.3rem;
font-weight: 900;
color: #0f172a;
letter-spacing: .04em;
font-family: ui-monospace, monospace;
}
.outstation-form__station-btn--active .outstation-form__station-code[b-oka8enjfl7] {
color: #0d9488;
}
.outstation-form__station-name[b-oka8enjfl7] {
font-size: .72rem;
font-weight: 600;
color: #64748b;
}
/* ═══════════════════════════════════════════════════
DAYCARD BOTTOM SHEET (mobile)
═══════════════════════════════════════════════════ */
.daycard-sheet-backdrop[b-oka8enjfl7] {
position: fixed;
inset: 0;
background: rgba(15,23,42,.35);
backdrop-filter: blur(3px);
z-index: 99998;
}
.daycard-sheet[b-oka8enjfl7] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: #fff;
border-radius: 22px 22px 0 0;
box-shadow: 0 -12px 36px rgba(0,0,0,.2);
max-height: 82vh;
display: flex;
flex-direction: column;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
animation: sheet-slide-in-b-oka8enjfl7 .22s ease;
}
@keyframes sheet-slide-in-b-oka8enjfl7 {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.daycard-sheet__handle[b-oka8enjfl7] {
width: 42px;
height: 5px;
border-radius: 999px;
background: #cbd5e1;
margin: 10px auto 8px;
}
.daycard-sheet__header[b-oka8enjfl7] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 0 16px 12px;
}
.daycard-sheet__title[b-oka8enjfl7] {
font-size: 1rem;
font-weight: 800;
color: #0f172a;
}
.daycard-sheet__subtitle[b-oka8enjfl7] {
margin-top: 4px;
font-size: .83rem;
color: #64748b;
}
.daycard-sheet__close[b-oka8enjfl7] {
width: 34px;
height: 34px;
border: 0;
border-radius: 999px;
background: rgba(148,163,184,.14);
color: #334155;
font-weight: 800;
cursor: pointer;
}
.daycard-sheet__body[b-oka8enjfl7] {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.daycard-sheet__group[b-oka8enjfl7] {
display: flex;
flex-direction: column;
gap: 6px;
}
.daycard-sheet__group-title[b-oka8enjfl7] {
padding: 0 4px;
font-size: .74rem;
font-weight: 800;
letter-spacing: .04em;
color: #64748b;
text-transform: uppercase;
}
.daycard-sheet__item[b-oka8enjfl7] {
width: 100%;
min-height: 50px;
border: 0;
border-radius: 14px;
background: #f8fafc;
color: #0f172a;
text-align: left;
padding: 14px 16px;
font: 700 15px/1.2 system-ui;
cursor: pointer;
}
.daycard-sheet__item--success[b-oka8enjfl7] {
color: #166534;
background: #f0fdf4;
}
.daycard-sheet__item--danger[b-oka8enjfl7] {
color: #b91c1c;
background: #fef2f2;
}
.daycard-sheet__footer[b-oka8enjfl7] {
padding: 12px 12px 0;
}
.daycard-sheet__cancel[b-oka8enjfl7] {
width: 100%;
min-height: 50px;
border: 0;
border-radius: 14px;
background: #e2e8f0;
color: #0f172a;
font: 700 15px/1 system-ui;
cursor: pointer;
}
/* ═══════════════════════════════════════════════════
AVAILABILITY BOTTOM SHEET
═══════════════════════════════════════════════════ */
.availability-sheet-backdrop[b-oka8enjfl7] {
position: fixed;
inset: 0;
background: rgba(15,23,42,.35);
backdrop-filter: blur(3px);
z-index: 99998;
}
.availability-sheet[b-oka8enjfl7] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: #fff;
border-radius: 22px 22px 0 0;
box-shadow: 0 -12px 36px rgba(0,0,0,.2);
max-height: 88vh;
display: flex;
flex-direction: column;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
animation: sheet-slide-in-b-oka8enjfl7 .22s ease;
}
.availability-sheet__handle[b-oka8enjfl7] {
width: 42px;
height: 5px;
border-radius: 999px;
background: #cbd5e1;
margin: 10px auto 8px;
}
.availability-sheet__header[b-oka8enjfl7] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 0 18px 12px;
border-bottom: 1px solid rgba(148,163,184,.16);
}
.availability-sheet__title[b-oka8enjfl7] {
font-size: 1rem;
font-weight: 800;
color: #0f172a;
}
.availability-sheet__subtitle[b-oka8enjfl7] {
margin-top: 4px;
font-size: .83rem;
color: #64748b;
}
.availability-sheet__close[b-oka8enjfl7] {
width: 34px;
height: 34px;
border: 0;
border-radius: 999px;
background: rgba(148,163,184,.14);
color: #334155;
font-weight: 800;
cursor: pointer;
}
.availability-sheet__body[b-oka8enjfl7] {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 16px 18px;
}
.availability-sheet__footer[b-oka8enjfl7] {
display: flex;
gap: 10px;
padding: 12px 18px 0;
border-top: 1px solid rgba(148,163,184,.16);
background: #fff;
}
.availability-sheet__cancel[b-oka8enjfl7],
.availability-sheet__save[b-oka8enjfl7] {
flex: 1 1 0;
min-height: 48px;
border: 0;
border-radius: 14px;
font-weight: 700;
cursor: pointer;
}
.availability-sheet__cancel[b-oka8enjfl7] {
background: #e2e8f0;
color: #0f172a;
}
.availability-sheet__save[b-oka8enjfl7] {
background: linear-gradient(135deg,#2563eb,#1d4ed8);
color: #fff;
}
/* ═══════════════════════════════════════════════════
WEEKVIEW POPUP (add availability)
═══════════════════════════════════════════════════ */
.weekview-popup-shell .dxbl-popup-content[b-oka8enjfl7] {
border-radius: 24px !important;
overflow: hidden;
box-shadow: 0 24px 60px rgba(15,23,42,.22) !important;
}
.weekview-popup[b-oka8enjfl7] {
background: linear-gradient(180deg,#fff,#f8fafc);
color: #0f172a;
}
.weekview-popup__header[b-oka8enjfl7] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid rgba(148,163,184,.16);
}
.weekview-popup__title[b-oka8enjfl7] {
font-size: 1.05rem;
font-weight: 800;
}
.weekview-popup__subtitle[b-oka8enjfl7] {
margin-top: 4px;
font-size: .83rem;
color: #64748b;
}
.weekview-popup__close[b-oka8enjfl7] {
width: 34px;
height: 34px;
border: none;
border-radius: 999px;
background: rgba(148,163,184,.14);
color: #334155;
font-weight: 800;
cursor: pointer;
}
.weekview-popup__body[b-oka8enjfl7] {
padding: 18px 22px;
}
.weekview-popup__grid[b-oka8enjfl7] {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 14px;
}
.weekview-field--full[b-oka8enjfl7] {
grid-column: 1 / -1;
}
.weekview-field__label[b-oka8enjfl7] {
display: block;
margin-bottom: 6px;
font-size: .78rem;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: .03em;
}
.weekview-popup__footer[b-oka8enjfl7] {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 14px 22px 18px;
border-top: 1px solid rgba(148,163,184,.16);
}
.weekview-popup__btn[b-oka8enjfl7] {
border: none;
border-radius: 14px;
padding: 10px 18px;
font-weight: 700;
cursor: pointer;
}
.weekview-popup__btn--secondary[b-oka8enjfl7] {
background: #e2e8f0;
color: #0f172a;
}
.weekview-popup__btn--primary[b-oka8enjfl7] {
background: linear-gradient(135deg,#2563eb,#1d4ed8);
color: #fff;
}
/* ARINC grid override */
[b-oka8enjfl7] .arinc-grid-class {
height: 400px;
border-radius: 28px;
}
/* ═══════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
.daycard-menu[b-oka8enjfl7] {
display: none !important;
}
.weekview-popup-shell .dxbl-popup-content[b-oka8enjfl7],
.weekview-popup-shell .dx-overlay-content[b-oka8enjfl7],
.weekview-popup-shell .dx-popup-content[b-oka8enjfl7] {
width: 100vw !important;
max-width: 100vw !important;
}
.weekview-popup-shell .dx-overlay-content[b-oka8enjfl7] {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
margin: 0 !important;
border-radius: 18px 18px 0 0 !important;
max-height: 85vh !important;
overflow: hidden !important;
}
.weekview-popup-shell .weekview-popup[b-oka8enjfl7] {
max-height: 85vh;
display: flex;
flex-direction: column;
border-radius: 18px 18px 0 0;
}
.weekview-popup-shell .weekview-popup__body[b-oka8enjfl7] {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.weekview-popup__grid[b-oka8enjfl7] {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) {
.daycard-sheet[b-oka8enjfl7],
.daycard-sheet-backdrop[b-oka8enjfl7] {
display: none !important;
}
}
/* /Components/MobileSheetPanel.razor.rz.scp.css */
.panel-fill[b-1bse40n7iy] {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
height: 100%;
}
.panel-content[b-1bse40n7iy] {
flex: 0 0 auto;
position: relative;
z-index: 2;
}
.panel-scroll[b-1bse40n7iy] {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.panel-empty-catcher[b-1bse40n7iy] {
flex: 1 1 auto;
min-height: 0;
background: transparent;
touch-action: none;
pointer-events:none;
position: relative;
z-index: 1;
}
/* /Components/Pages/AirbusToolSearch.razor.rz.scp.css */
.tool-card[b-1r8xgkvmso] {
background-color: black;
color: white;
padding: 20px;
border-radius: 10px;
font-family: 'Consolas', monospace;
font-size: large;
max-width: 450px;
margin: auto;
text-align: center;
margin-top: 10px;
}
/* /Components/Pages/AircraftUtilization.razor.rz.scp.css */
[b-7490mwptnu] .dxbl-tabs .dxbl-tabs-content-panel {
min-height: 90vh;
}
[b-7490mwptnu] .swap-divider-btn:hover {
background: #f5f5f5;
}
.swap-divider-btn[b-7490mwptnu] {
background: white;
border: 1px solid #d0d0d0;
border-radius: 999px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
font-size: 20px;
font-weight: 700;
transition: background .2s ease;
}
.swap-divider-btn:hover[b-7490mwptnu] {
background: cornflowerblue;
}
[b-7490mwptnu] .year-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
user-select: none;
}
[b-7490mwptnu] .year-toggle input {
display: none;
}
[b-7490mwptnu] .year-toggle .slider {
position: relative;
width: 42px;
height: 22px;
background: #d8d8d8;
border-radius: 999px;
transition: background .2s ease;
display: inline-block;
cursor: pointer;
}
[b-7490mwptnu] .year-toggle .slider::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
transition: transform .2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
[b-7490mwptnu] .year-toggle input:checked + .slider {
background: #7cc576;
}
[b-7490mwptnu] .year-toggle input:checked + .slider::after {
transform: translateX(20px);
}
[b-7490mwptnu] .year-toggle span.active {
color: #111;
font-weight: 800;
}
[b-7490mwptnu] .year-toggle-lg {
font-size: 13px;
gap: 10px;
}
[b-7490mwptnu] .year-toggle-lg .slider {
width: 52px;
height: 28px;
}
[b-7490mwptnu] .year-toggle-lg .slider::after {
top: 3px;
left: 3px;
width: 22px;
height: 22px;
}
[b-7490mwptnu] .year-toggle-lg input:checked + .slider::after {
transform: translateX(24px);
}
[b-7490mwptnu] .fleet-chart-card {
position: relative;
}
[b-7490mwptnu] .chart-type-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
user-select: none;
}
[b-7490mwptnu] .chart-type-toggle input {
display: none;
}
[b-7490mwptnu] .chart-type-toggle .slider {
position: relative;
width: 46px;
height: 24px;
background: #d8d8d8;
border-radius: 999px;
transition: background .2s ease;
display: inline-block;
cursor: pointer;
}
[b-7490mwptnu] .chart-type-toggle .slider::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: white;
border-radius: 50%;
transition: transform .2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
[b-7490mwptnu] .chart-type-toggle input:checked + .slider {
background: #7cc576;
}
[b-7490mwptnu] .chart-type-toggle input:checked + .slider::after {
transform: translateX(22px);
}
[b-7490mwptnu] .chart-type-toggle span.active {
color: #111;
font-weight: 800;
}
[b-7490mwptnu] .toggle-row {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 16px;
margin-bottom: 12px;
flex-wrap: wrap;
}
[b-7490mwptnu] .chart-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
font-size: 12px;
font-weight: 600;
user-select: none;
min-height: 32px;
}
[b-7490mwptnu] .chart-toggle input {
display: none;
}
[b-7490mwptnu] .chart-toggle .slider {
position: relative;
width: 52px;
height: 28px;
background: #d8d8d8;
border-radius: 999px;
transition: background .2s ease;
display: inline-block;
cursor: pointer;
flex: 0 0 auto;
}
[b-7490mwptnu] .chart-toggle .slider::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
transition: transform .2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
[b-7490mwptnu] .chart-toggle input:checked + .slider {
background: #7cc576;
}
[b-7490mwptnu] .chart-toggle input:checked + .slider::after {
transform: translateX(24px);
}
[b-7490mwptnu] .chart-toggle span.active {
color: blue;
font-weight: 800;
}
[b-7490mwptnu] .legend-toggle-box {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
background: rgba(255,255,255,.7);
box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
[b-7490mwptnu] .legend-toggle {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
}
[b-7490mwptnu] .legend-toggle input {
cursor: pointer;
}
[b-7490mwptnu] .legend-color {
width: 12px;
height: 12px;
border-radius: 3px;
display: inline-block;
}
.legend-toggle input[b-7490mwptnu] {
cursor: pointer;
zoom: 1.4;
}
.chart-toolbar[b-7490mwptnu] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 14px;
padding: 12px 14px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(248,248,248,.9));
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.chart-toolbar-group[b-7490mwptnu] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.chart-toolbar-title[b-7490mwptnu] {
font-size: 12px;
font-weight: 700;
color: #666;
margin-right: 2px;
text-transform: uppercase;
letter-spacing: .04em;
}
.chart-toggle[b-7490mwptnu] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
background: rgba(255,255,255,.9);
box-shadow: 0 1px 4px rgba(0,0,0,.04);
font-size: 12px;
font-weight: 600;
user-select: none;
min-height: 42px;
}
.chart-toggle input[b-7490mwptnu] {
display: none;
}
.chart-toggle .slider[b-7490mwptnu] {
position: relative;
width: 52px;
height: 28px;
background: #d8d8d8;
border-radius: 999px;
transition: background .2s ease;
display: inline-block;
cursor: pointer;
flex: 0 0 auto;
}
.chart-toggle .slider[b-7490mwptnu]::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
transition: transform .2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.chart-toggle input:checked + .slider[b-7490mwptnu] {
background: #7cc576;
}
.chart-toggle input:checked + .slider[b-7490mwptnu]::after {
transform: translateX(24px);
}
.chart-toggle span.active[b-7490mwptnu] {
color: #111;
font-weight: 800;
}
.legend-pill[b-7490mwptnu] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
background: rgba(255,255,255,.9);
box-shadow: 0 1px 4px rgba(0,0,0,.04);
font-size: 12px;
font-weight: 600;
cursor: pointer;
user-select: none;
min-height: 42px;
}
.legend-pill input[b-7490mwptnu] {
cursor: pointer;
margin: 0;
zoom:1.4;
}
.legend-color[b-7490mwptnu] {
width: 12px;
height: 12px;
border-radius: 3px;
display: inline-block;
}
.legend-toolbar[b-7490mwptnu] {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 12px 14px;
margin-bottom: 12px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
background: rgba(255,255,255,.9);
box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
/* /Components/Pages/ApuNew.razor.rz.scp.css */
.apu-page[b-ghlsd8qvbw] {
overflow: visible;
padding: 0 0 16px 0;
}
.chart-toolbar[b-ghlsd8qvbw] {
position: sticky;
top: 0;
z-index: 5000;
margin-bottom: 16px;
background: white;
overflow: visible;
padding-bottom: 4px;
}
.toolbar-box[b-ghlsd8qvbw] {
position: relative;
min-width: 1500px;
border: 1px solid #dcdfe5;
background: #fff;
border-radius: 14px;
padding: 10px 12px;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
overflow: visible;
}
.apu-content[b-ghlsd8qvbw] {
height: calc(92vh - 82px);
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 16px;
}
.toolbar-grid-row[b-ghlsd8qvbw] {
display: grid;
grid-template-columns: 180px 330px 170px minmax(720px, 1fr) auto;
align-items: end;
gap: 14px;
}
.toolbar-field[b-ghlsd8qvbw] {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.toolbar-label[b-ghlsd8qvbw] {
font-size: 12px;
font-weight: 600;
color: #666;
white-space: nowrap;
}
.toolbar-range-field[b-ghlsd8qvbw] {
min-width: 720px;
}
.toolbar-stat[b-ghlsd8qvbw] {
white-space: nowrap;
font-size: 12px;
color: #888;
padding-bottom: 8px;
text-align: right;
align-self: end;
}
.quick-range-buttons[b-ghlsd8qvbw] {
display: flex;
flex-wrap: nowrap;
gap: 8px;
white-space: nowrap;
}
.quick-range-buttons button[b-ghlsd8qvbw] {
border: 1px solid #d0d7e2;
background: #fff;
color: #334155;
border-radius: 999px;
padding: 8px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .18s ease;
white-space: nowrap;
}
.quick-range-buttons button:hover[b-ghlsd8qvbw] {
border-color: #7aa2ff;
transform: translateY(-1px);
}
.quick-range-buttons button.active-range[b-ghlsd8qvbw] {
background: linear-gradient(90deg, #0d6efd, #20c997);
color: #fff;
border-color: transparent;
}
.summary-cards[b-ghlsd8qvbw] {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
align-items: stretch;
}
.summary-card[b-ghlsd8qvbw] {
flex: 0 0 170px;
min-width: 170px;
max-width: 170px;
padding: 14px;
border-radius: 14px;
border: 1px solid #dde3ea;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.03);
box-sizing: border-box;
overflow: hidden;
}
.highlight-card[b-ghlsd8qvbw] {
flex: 0 0 320px;
min-width: 320px;
max-width: 320px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border-color: #cfe0ff;
}
.summary-label[b-ghlsd8qvbw] {
font-size: .82rem;
color: #6b7280;
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.summary-value[b-ghlsd8qvbw] {
font-size: 1.15rem;
font-weight: 700;
color: #111827;
line-height: 1.3;
word-break: break-word;
}
.summary-subvalue[b-ghlsd8qvbw] {
margin-top: 4px;
font-size: .82rem;
color: #64748b;
word-break: break-word;
}
.empty-state[b-ghlsd8qvbw],
.chart-shell[b-ghlsd8qvbw],
.grid-shell[b-ghlsd8qvbw] {
border: 1px solid #dfe3e8;
border-radius: 16px;
background: white;
padding: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.empty-state[b-ghlsd8qvbw] {
text-align: center;
color: #666;
}
.grid-section[b-ghlsd8qvbw] {
margin-top: 20px;
}
.data-table[b-ghlsd8qvbw] {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
}
.data-table th[b-ghlsd8qvbw] {
background: #f8fafc;
color: #475569;
font-weight: 700;
text-align: left;
padding: 10px;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}
.data-table td[b-ghlsd8qvbw] {
padding: 10px;
border-bottom: 1px solid #eef2f7;
}
.text-right[b-ghlsd8qvbw] {
text-align: right !important;
}
[b-ghlsd8qvbw] .dxbs-calendar,
[b-ghlsd8qvbw] .dx-dropdowneditor-overlay,
[b-ghlsd8qvbw] .dxbl-dropdown,
[b-ghlsd8qvbw] .dxbl-popup,
[b-ghlsd8qvbw] .dxbl-calendar {
z-index: 99999 !important;
}
@media (max-width: 900px) {
.toolbar-box[b-ghlsd8qvbw] {
min-width: 1500px;
}
}
.apu-page[b-ghlsd8qvbw] {
height: 92vh;
overflow: visible;
padding: 8px 0 16px 0;
}
.chart-toolbar[b-ghlsd8qvbw] {
position: sticky;
top: 8px;
z-index: 5000;
margin-bottom: 16px;
background: white;
overflow: visible;
padding-top: 4px;
padding-bottom: 8px;
}
[b-ghlsd8qvbw].dxbl-popup-root {
z-index: 20000 !important;
}
/* /Components/Pages/ArincEmails.razor.rz.scp.css */
.arinc-toolbar-row[b-wbj17z2ifu] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.arinc-filter-row[b-wbj17z2ifu] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.arinc-filter-row .dxbl-filter-builder[b-wbj17z2ifu] {
width: 100%;
}
.selected-range-btn[b-wbj17z2ifu] {
border: 2px solid #28a745 !important;
box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
border-radius: 8px;
}
.toolbar-box[b-wbj17z2ifu] {
}
.arinc-toolbar-row[b-wbj17z2ifu] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding: 12px 20px;
}
.toolbar-left[b-wbj17z2ifu],
.toolbar-right[b-wbj17z2ifu] {
display: flex;
align-items: center;
gap: 10px;
}
.toolbar-title[b-wbj17z2ifu] {
flex: 1;
text-align: center;
font-size: 1rem;
font-weight: 700;
letter-spacing: 1px;
color: var(--bs-primary);
text-transform: uppercase;
padding: 0 20px;
white-space: nowrap;
}
.toolbar-title[b-wbj17z2ifu]::before,
.toolbar-title[b-wbj17z2ifu]::after {
content: "—";
margin: 0 12px;
opacity: 0.5;
}
[b-wbj17z2ifu].arinc-grid-class {
height: calc(100vh - 220px);
}
[b-wbj17z2ifu].grid-class {
height: calc(100vh - 220px);
}
/* /Components/Pages/ArrivalCard.razor.rz.scp.css */
/* =========================================================
PAGE
========================================================= */
.ops-page[b-zp8lk1ysnr] {
padding: 12px;
background: radial-gradient(circle at top left, rgba(179, 0, 0, 0.05), transparent 28%), radial-gradient(circle at top right, rgba(79, 127, 42, 0.05), transparent 28%), #f6f8fb;
min-height: 100dvh;
}
.arrival-height[b-zp8lk1ysnr] {
height: 79vh;
overflow-y: auto;
}
.ops-shell[b-zp8lk1ysnr] {
max-width: 1400px;
margin: 0 auto;
}
.ops-topbar[b-zp8lk1ysnr] {
margin-bottom: 1rem;
}
.ops-page-title[b-zp8lk1ysnr] {
font-size: 1.15rem;
font-weight: 700;
color: #1f2937;
line-height: 1.2;
}
.ops-page-subtitle[b-zp8lk1ysnr] {
font-size: .92rem;
color: #6b7280;
margin-top: .2rem;
}
.ops-chip-wrap[b-zp8lk1ysnr] {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
/* =========================================================
BASE CARD STYLE
========================================================= */
.ops-card[b-zp8lk1ysnr] {
border: 0;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
overflow: hidden;
background: #fff;
}
.ops-card .card-body[b-zp8lk1ysnr] {
padding: 1rem;
}
.ops-card-header[b-zp8lk1ysnr] {
color: #fff;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 1rem 1.25rem;
border-bottom: 0;
background: linear-gradient(135deg, #1f2937, #111827);
}
/* =========================================================
ARRIVAL THEME
========================================================= */
.arrival-theme .ops-card[b-zp8lk1ysnr] {
background: linear-gradient(180deg, #fff7f7 0%, #fff 100%);
border: 1px solid rgba(176, 0, 32, 0.14);
}
.arrival-theme .ops-card-header[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #c1121f, #8f0212);
}
.arrival-theme .ops-form-section[b-zp8lk1ysnr] {
background: linear-gradient(180deg, #fff9f9 0%, #fff 100%);
border: 1px solid rgba(176, 0, 32, 0.14);
}
.arrival-theme .ops-section-title[b-zp8lk1ysnr] {
color: #9f1239;
}
.arrival-theme .ops-note[b-zp8lk1ysnr] {
background: #fff1f2;
border-left: 4px solid #c1121f;
color: #5b2333;
}
/* =========================================================
DEPARTURE THEME
========================================================= */
.departure-theme .ops-card[b-zp8lk1ysnr] {
background: linear-gradient(180deg, #f7fff7 0%, #fff 100%);
border: 1px solid rgba(79, 127, 42, 0.16);
}
.departure-theme .ops-card-header[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #4f7f2a, #33551a);
}
.departure-theme .ops-form-section[b-zp8lk1ysnr] {
background: linear-gradient(180deg, #f9fff9 0%, #fff 100%);
border: 1px solid rgba(79, 127, 42, 0.16);
}
.departure-theme .ops-section-title[b-zp8lk1ysnr] {
color: #3f6212;
}
.departure-theme .ops-note[b-zp8lk1ysnr] {
background: #f0fdf4;
border-left: 4px solid #4f7f2a;
color: #365314;
}
/* =========================================================
FORM SECTIONS
========================================================= */
.ops-form-section[b-zp8lk1ysnr] {
border-radius: 16px;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: 0 3px 10px rgba(0, 0, 0, .03);
}
.ops-section-title[b-zp8lk1ysnr] {
font-size: .95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 1rem;
}
.ops-note[b-zp8lk1ysnr] {
border-radius: 12px;
padding: .85rem 1rem;
line-height: 1.45;
}
/* =========================================================
FLOATING INPUTS
========================================================= */
.form-floating > .form-control[b-zp8lk1ysnr],
.form-floating > .form-select[b-zp8lk1ysnr] {
min-height: 58px;
border-radius: 12px;
background-color: #fff;
}
.form-floating > textarea.form-control[b-zp8lk1ysnr] {
min-height: 100px;
}
.form-floating > label[b-zp8lk1ysnr] {
color: #6c757d;
}
/* =========================================================
FILLED FIELDS - GREENISH
========================================================= */
.field-filled[b-zp8lk1ysnr],
.form-control.field-filled[b-zp8lk1ysnr],
.form-select.field-filled[b-zp8lk1ysnr] {
background-color: #eaf8ec !important;
border-color: #63a46c !important;
box-shadow: 0 0 0 .12rem rgba(99, 164, 108, .10);
}
.form-control.field-filled:focus[b-zp8lk1ysnr],
.form-select.field-filled:focus[b-zp8lk1ysnr],
textarea.form-control.field-filled:focus[b-zp8lk1ysnr] {
background-color: #e3f5e6 !important;
border-color: #4f8d58 !important;
box-shadow: 0 0 0 .18rem rgba(79, 141, 88, .16) !important;
}
/* =========================================================
UTC FLOATING COMPONENT
========================================================= */
.utc-floating-wrap[b-zp8lk1ysnr] {
display: flex;
gap: .5rem;
align-items: stretch;
}
.utc-floating-wrap .form-floating[b-zp8lk1ysnr] {
flex: 1;
}
.utc-now-btn[b-zp8lk1ysnr] {
border-radius: 12px;
min-width: 72px;
}
/* =========================================================
COMPLIANCE
========================================================= */
.compliance-accordion[b-zp8lk1ysnr] {
display: flex;
flex-direction: column;
gap: .85rem;
}
.compliance-section[b-zp8lk1ysnr] {
margin-bottom: .5rem;
}
.section-banner[b-zp8lk1ysnr] {
width: 100%;
border: 0;
border-radius: 14px;
padding: .95rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
color: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.section-banner:hover[b-zp8lk1ysnr] {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
.section-banner-left[b-zp8lk1ysnr] {
display: flex;
align-items: center;
gap: .5rem;
}
.section-banner-title[b-zp8lk1ysnr] {
font-size: 1rem;
font-weight: 700;
}
.section-banner-icon[b-zp8lk1ysnr] {
font-size: 1.3rem;
line-height: 1;
font-weight: 700;
}
.section-body[b-zp8lk1ysnr] {
padding: 1rem 0 0;
}
.question-card[b-zp8lk1ysnr] {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 16px;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
}
.arrival-theme .question-card[b-zp8lk1ysnr] {
background: linear-gradient(180deg, #fffafa 0%, #fff 100%);
border-color: rgba(176, 0, 32, 0.10);
}
.departure-theme .question-card[b-zp8lk1ysnr] {
background: linear-gradient(180deg, #fbfffb 0%, #fff 100%);
border-color: rgba(79, 127, 42, 0.10);
}
.question-top[b-zp8lk1ysnr] {
margin-bottom: .5rem;
}
.question-code[b-zp8lk1ysnr] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: .25rem .6rem;
border-radius: 999px;
background: #eef2ff;
color: #334155;
font-weight: 700;
font-size: .85rem;
}
.question-text[b-zp8lk1ysnr] {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: .5rem 0;
line-height: 1.45;
}
.question-guide[b-zp8lk1ysnr] {
background: #f8f9fa;
border-left: 4px solid #0d6efd;
padding: .75rem .9rem;
border-radius: 10px;
margin-bottom: 1rem;
color: #475569;
white-space: pre-wrap;
line-height: 1.45;
}
.arrival-theme .question-guide[b-zp8lk1ysnr] {
background: #fff1f2;
border-left-color: #c1121f;
}
.departure-theme .question-guide[b-zp8lk1ysnr] {
background: #f0fdf4;
border-left-color: #4f7f2a;
}
.answer-row[b-zp8lk1ysnr],
.notes-row[b-zp8lk1ysnr] {
margin-top: 1rem;
}
.answer-label[b-zp8lk1ysnr] {
display: block;
font-size: .92rem;
font-weight: 600;
margin-bottom: .35rem;
color: #334155;
}
.answer-group[b-zp8lk1ysnr] {
padding: .25rem 0;
}
/* =========================================================
COMPLIANCE SECTION COLORS
========================================================= */
.tab-prearrival[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.tab-arrival[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #059669, #047857);
}
.tab-lowercargo[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.tab-mccc[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #d97706, #b45309);
}
.tab-onload[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
}
.tab-depcomm[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.tab-depcomplete[b-zp8lk1ysnr] {
background: linear-gradient(135deg, #4f46e5, #4338ca);
}
/* =========================================================
CHIPS
========================================================= */
[b-zp8lk1ysnr] .open-chip-arrival {
background: linear-gradient(135deg, #c1121f, #8f0212) !important;
color: #fff !important;
}
[b-zp8lk1ysnr] .open-chip-departure {
background: linear-gradient(135deg, #4f7f2a, #33551a) !important;
color: #fff !important;
}
/* =========================================================
ARCHIVE
========================================================= */
.archive-group-banner[b-zp8lk1ysnr] {
display: inline-block;
padding: .35rem .8rem;
border-radius: .35rem;
color: #fff;
font-weight: 700;
min-width: 160px;
text-align: center;
}
.archive-group-arrival[b-zp8lk1ysnr] {
background: #b30000;
}
.archive-group-departure[b-zp8lk1ysnr] {
background: #4f7f2a;
}
.archive-mobile-arrival[b-zp8lk1ysnr] {
border-left: 4px solid #b30000;
}
.archive-mobile-departure[b-zp8lk1ysnr] {
border-left: 4px solid #4f7f2a;
}
/* =========================================================
DEVEXPRESS TABS
========================================================= */
[b-zp8lk1ysnr] .dxbl-tabs-item {
font-weight: 600;
}
[b-zp8lk1ysnr] .dxbl-tabs-item-active {
background: #1f2937 !important;
color: #fff !important;
border-radius: 10px 10px 0 0;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
.ops-page[b-zp8lk1ysnr] {
padding: 8px;
}
.arrival-height[b-zp8lk1ysnr] {
height: 59vh;
overflow-y: auto;
}
.ops-card .card-body[b-zp8lk1ysnr] {
padding: .85rem;
}
.ops-form-section[b-zp8lk1ysnr] {
padding: .85rem;
border-radius: 14px;
}
.ops-section-title[b-zp8lk1ysnr] {
font-size: .88rem;
margin-bottom: .85rem;
}
.ops-page-title[b-zp8lk1ysnr] {
font-size: 1.02rem;
}
.ops-page-subtitle[b-zp8lk1ysnr] {
font-size: .85rem;
}
.utc-floating-wrap[b-zp8lk1ysnr] {
flex-direction: column;
}
.utc-now-btn[b-zp8lk1ysnr] {
width: 100%;
min-width: 100%;
}
.section-banner[b-zp8lk1ysnr] {
padding: .9rem 1rem;
align-items: flex-start;
}
.section-banner-title[b-zp8lk1ysnr] {
font-size: .95rem;
}
.question-card[b-zp8lk1ysnr] {
padding: .85rem;
}
.question-text[b-zp8lk1ysnr] {
font-size: .95rem;
}
.archive-group-banner[b-zp8lk1ysnr] {
min-width: 120px;
font-size: .85rem;
}
}
@media (max-width: 576px) {
.ops-page[b-zp8lk1ysnr] {
padding: 6px;
}
.ops-card[b-zp8lk1ysnr] {
border-radius: 14px;
}
.ops-card-header[b-zp8lk1ysnr] {
padding: .85rem 1rem;
font-size: .9rem;
}
.form-floating > .form-control[b-zp8lk1ysnr],
.form-floating > .form-select[b-zp8lk1ysnr] {
min-height: 54px;
}
.question-code[b-zp8lk1ysnr] {
min-width: 56px;
font-size: .8rem;
}
}
.utc-floating-group[b-zp8lk1ysnr] {
align-items: stretch;
}
.utc-floating-group .form-floating[b-zp8lk1ysnr] {
flex: 1 1 auto;
}
.utc-floating-group .form-control[b-zp8lk1ysnr] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.utc-floating-group .utc-now-btn[b-zp8lk1ysnr] {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
min-width: 72px;
}
.utc-floating-group .form-floating > .form-control[b-zp8lk1ysnr] {
min-height: 58px;
}
.utc-floating-group .form-floating > label[b-zp8lk1ysnr] {
color: #6c757d;
}
@media (max-width: 768px) {
.utc-floating-group .utc-now-btn[b-zp8lk1ysnr] {
min-width: 64px;
}
.ops-section-toggle-summary[b-zp8lk1ysnr] {
font-size: 0.85rem;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: .15rem;
}
}
/* filled field */
.form-floating.field-filled > .form-control[b-zp8lk1ysnr] {
background-color: #eaf8ec !important;
border-color: #63a46c !important;
}
/* floating label */
.form-floating.field-filled > label[b-zp8lk1ysnr] {
color: #2f6d3a;
font-weight: 600;
}
/* button match */
.field-filled + .utc-now-btn[b-zp8lk1ysnr] {
border-color: #63a46c;
}
.collapsible-section[b-zp8lk1ysnr] {
padding: 0;
overflow: hidden;
}
.ops-section-toggle[b-zp8lk1ysnr] {
width: 100%;
border: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1rem .9rem 1rem;
text-align: left;
cursor: pointer;
}
.ops-section-toggle-title[b-zp8lk1ysnr] {
font-size: .95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.ops-section-toggle-icon[b-zp8lk1ysnr] {
font-size: 1.35rem;
line-height: 1;
font-weight: 700;
opacity: .8;
}
.ops-section-content[b-zp8lk1ysnr] {
padding: 0 1rem 1rem 1rem;
}
.arrival-theme .ops-section-toggle-title[b-zp8lk1ysnr],
.arrival-theme .ops-section-toggle-icon[b-zp8lk1ysnr] {
color: #9f1239;
}
.departure-theme .ops-section-toggle-title[b-zp8lk1ysnr],
.departure-theme .ops-section-toggle-icon[b-zp8lk1ysnr] {
color: #3f6212;
}
.ops-card-collapse[b-zp8lk1ysnr] {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.35s ease, opacity 0.25s ease;
}
.ops-card-collapse.open[b-zp8lk1ysnr] {
max-height: 5000px;
opacity: 1;
}
.ops-card-toggle[b-zp8lk1ysnr] {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.ops-card-toggle-icon[b-zp8lk1ysnr] {
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
}
.form-floating > label[b-zp8lk1ysnr] {
white-space: normal;
line-height: 1.1;
}
.ops-chip-bar[b-zp8lk1ysnr] {
position: relative;
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
padding: .6rem;
overflow: hidden;
}
/* left/right fade so it feels scrollable */
.ops-chip-bar[b-zp8lk1ysnr]::before,
.ops-chip-bar[b-zp8lk1ysnr]::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 28px;
z-index: 3;
pointer-events: none;
}
.ops-chip-bar[b-zp8lk1ysnr]::before {
left: 0;
background: linear-gradient(to right, #fff 15%, rgba(255,255,255,0));
}
.ops-chip-bar[b-zp8lk1ysnr]::after {
right: 0;
background: linear-gradient(to left, #fff 15%, rgba(255,255,255,0));
}
.ops-chip-scroll[b-zp8lk1ysnr] {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 2px;
}
.ops-chip-scroll[b-zp8lk1ysnr]::-webkit-scrollbar {
height: 6px;
}
.ops-chip-scroll[b-zp8lk1ysnr]::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.18);
border-radius: 999px;
}
.ops-chip-scroll[b-zp8lk1ysnr]::-webkit-scrollbar-track {
background: transparent;
}
/* keep all chips on one line */
[b-zp8lk1ysnr] .ops-chip-group {
display: inline-flex;
flex-wrap: nowrap !important;
white-space: nowrap;
min-width: max-content;
}
/* make DevExpress group stay in one row */
[b-zp8lk1ysnr] .ops-chip-group .dxbl-btn-group {
display: inline-flex !important;
flex-wrap: nowrap !important;
white-space: nowrap;
}
/* base chip look */
[b-zp8lk1ysnr] .ops-chip-group .dxbl-btn,
[b-zp8lk1ysnr] .ops-chip-group .dxbl-btn-group-item {
border-radius: 14px !important;
min-width: 58px;
height: 42px;
padding: 0 .95rem;
border: 1px solid #e5e7eb !important;
background: #f8fafc !important;
color: #334155 !important;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
transition: all .18s ease;
margin-right: .45rem;
}
/* hover */
[b-zp8lk1ysnr] .ops-chip-group .dxbl-btn:hover,
[b-zp8lk1ysnr] .ops-chip-group .dxbl-btn-group-item:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
/* add/new chip */
[b-zp8lk1ysnr] .ops-chip-add {
background: #111827 !important;
color: #fff !important;
border-color: #111827 !important;
min-width: 44px;
padding: 0 .8rem;
}
/* arrival / departure chips keep your theme */
[b-zp8lk1ysnr] .ops-chip-item.open-chip-arrival {
background: linear-gradient(135deg, #b30000, #d62828) !important;
color: #fff !important;
border-color: #b30000 !important;
}
[b-zp8lk1ysnr] .ops-chip-item.open-chip-departure {
background: linear-gradient(135deg, #4f7f2a, #6aa33b) !important;
color: #fff !important;
border-color: #4f7f2a !important;
}
/* mobile */
@media (max-width: 768px) {
.ops-chip-bar[b-zp8lk1ysnr] {
padding: .45rem;
border-radius: 16px;
}
[b-zp8lk1ysnr] .ops-chip-group .dxbl-btn,
[b-zp8lk1ysnr] .ops-chip-group .dxbl-btn-group-item {
height: 40px;
min-width: 54px;
padding: 0 .85rem;
font-size: .92rem;
}
.ops-chip-bar[b-zp8lk1ysnr]::before,
.ops-chip-bar[b-zp8lk1ysnr]::after {
width: 20px;
}
}
.ops-field[b-zp8lk1ysnr] {
display: flex;
flex-direction: column;
gap: 6px;
}
.ops-label[b-zp8lk1ysnr] {
font-size: .85rem;
font-weight: 600;
line-height: 1.2;
color: #374151;
}
.field-filled input[b-zp8lk1ysnr],
.field-filled select[b-zp8lk1ysnr],
.field-filled textarea[b-zp8lk1ysnr] {
background-color: #e9f7ef !important;
border-color: #28a745 !important;
}
.card-body[b-zp8lk1ysnr] {
padding: 0.2rem !important;
}
/* /Components/Pages/CapacityPlan.razor.rz.scp.css */
:root[b-5jr7fenh2i] {
--surface: #f5f7fb;
--panel: #ffffff;
--ink: #152033;
--muted: #667085;
--line: #d9e1ec;
--day-width: 18px;
--meta-width: 310px;
--green: #40b14b;
--green-soft: #dff4e3;
--amber: #f5b942;
--amber-soft: #fff2d6;
--blue: #5487d7;
--blue-soft: #dfe9fb;
--yellow: #ffea75;
--red: #e5484d;
--red-soft: #fde6e7;
--slip: #229ed0;
--slip-soft: #d9f3fc;
--gray-soft: #eef2f7;
--purple-soft: #f1e8ff;
--navy: #002060;
--shadow: 0 12px 30px rgba(18, 38, 63, 0.08);
}
.capacity-plan-page[b-5jr7fenh2i] {
color: var(--ink);
background: linear-gradient(180deg, #f6f8fc 0%, #eff4fb 100%);
min-height: 100vh;
padding: 2rem;
display: grid;
gap: 1.25rem;
}
.hero[b-5jr7fenh2i],
.toolbar[b-5jr7fenh2i],
.timeline-panel[b-5jr7fenh2i],
.log-panel[b-5jr7fenh2i] {
background: var(--panel);
border: 1px solid rgba(21, 32, 51, 0.08);
border-radius: 20px;
box-shadow: var(--shadow);
}
.hero[b-5jr7fenh2i] {
padding: 1.5rem;
display: flex;
justify-content: space-between;
gap: 1.5rem;
align-items: flex-start;
}
.eyebrow[b-5jr7fenh2i] {
margin: 0 0 .35rem;
text-transform: uppercase;
letter-spacing: .12em;
font-size: .72rem;
color: #5d6b82;
font-weight: 700;
}
.hero h1[b-5jr7fenh2i],
.panel-header h2[b-5jr7fenh2i] {
margin: 0;
font-size: 1.9rem;
line-height: 1.1;
}
.subtitle[b-5jr7fenh2i],
.panel-note[b-5jr7fenh2i] {
margin: .6rem 0 0;
max-width: 60rem;
color: var(--muted);
}
.hero-actions[b-5jr7fenh2i] {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
gap: .75rem;
width: min(420px, 100%);
}
.metric-card[b-5jr7fenh2i] {
padding: 1rem;
border-radius: 16px;
background: #f8fafc;
border: 1px solid #e5ebf3;
}
.metric-card-active[b-5jr7fenh2i] {
background: #eef4ff;
border-color: #bfd0ff;
}
.metric-year[b-5jr7fenh2i] {
font-size: .8rem;
color: var(--muted);
margin-bottom: .45rem;
}
.metric-value[b-5jr7fenh2i] {
font-size: 2rem;
font-weight: 800;
line-height: 1;
}
.metric-caption[b-5jr7fenh2i] {
margin-top: .45rem;
color: var(--muted);
font-size: .82rem;
}
.toolbar[b-5jr7fenh2i] {
padding: 1rem 1.25rem;
display: grid;
gap: 1rem;
}
.year-switcher[b-5jr7fenh2i] {
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.year-button[b-5jr7fenh2i] {
border: 1px solid #d5deea;
border-radius: 999px;
background: #fff;
color: var(--ink);
padding: .55rem .95rem;
font-weight: 700;
cursor: pointer;
}
.year-button-active[b-5jr7fenh2i] {
background: #1c3f94;
color: #fff;
border-color: #1c3f94;
}
.legend[b-5jr7fenh2i] {
display: flex;
gap: .5rem .75rem;
flex-wrap: wrap;
}
.legend-pill[b-5jr7fenh2i] {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .4rem .7rem;
border-radius: 999px;
background: #f8fafc;
border: 1px solid #ebf0f6;
font-size: .82rem;
}
.legend-swatch[b-5jr7fenh2i],
.rag-pill[b-5jr7fenh2i] {
width: .9rem;
height: .9rem;
border-radius: 999px;
display: inline-block;
flex: 0 0 auto;
border: 1px solid rgba(0,0,0,.08);
}
.timeline-panel[b-5jr7fenh2i] {
overflow: hidden;
}
.timeline-scroller[b-5jr7fenh2i] {
overflow: auto;
}
.timeline-grid[b-5jr7fenh2i] {
min-width: calc(var(--meta-width) + (365 * var(--day-width)));
display: grid;
grid-template-columns: var(--meta-width) minmax(0, 1fr);
}
.meta-header[b-5jr7fenh2i],
.meta-row[b-5jr7fenh2i] {
display: grid;
grid-template-columns: 1.45fr 1fr .5fr;
align-items: center;
border-right: 1px solid var(--line);
}
.meta-header[b-5jr7fenh2i] {
min-height: 78px;
background: #f8fafc;
font-weight: 800;
color: #34445c;
}
.meta-header > div[b-5jr7fenh2i],
.meta-row > div[b-5jr7fenh2i] {
padding: .85rem 1rem;
border-bottom: 1px solid var(--line);
}
.meta-row[b-5jr7fenh2i] {
min-height: 60px;
background: #fff;
}
.sticky-meta[b-5jr7fenh2i] {
position: sticky;
left: 0;
z-index: 4;
background: inherit;
}
.aircraft-name[b-5jr7fenh2i] {
font-weight: 800;
}
.aircraft-status[b-5jr7fenh2i] {
color: var(--muted);
white-space: pre-line;
}
.timeline-header[b-5jr7fenh2i] {
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 3;
background: #fff;
}
.month-band[b-5jr7fenh2i],
.day-band[b-5jr7fenh2i],
.track-grid[b-5jr7fenh2i] {
display: grid;
}
.month-band[b-5jr7fenh2i] {
min-height: 42px;
background: #f8fafc;
}
.month-cell[b-5jr7fenh2i] {
padding: .75rem .4rem;
font-size: .74rem;
letter-spacing: .08em;
font-weight: 800;
color: #485a73;
border-left: 1px solid var(--line);
display: flex;
align-items: center;
}
.day-band[b-5jr7fenh2i] {
min-height: 36px;
}
.day-cell[b-5jr7fenh2i],
.track-cell[b-5jr7fenh2i] {
border-left: 1px solid #edf1f6;
}
.day-cell[b-5jr7fenh2i] {
font-size: .62rem;
color: #74839a;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid var(--line);
}
.track-row[b-5jr7fenh2i] {
position: relative;
min-height: 60px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, #f9fcfa 0%, #f4faf5 100%);
}
.track-grid[b-5jr7fenh2i] {
min-height: 60px;
}
.track-cell.weekend[b-5jr7fenh2i],
.day-cell.weekend[b-5jr7fenh2i] {
background: rgba(15, 23, 42, 0.03);
}
.track-cell.month-start[b-5jr7fenh2i],
.day-cell.month-start[b-5jr7fenh2i] {
border-left-color: #c5d2e2;
}
.event-bar[b-5jr7fenh2i] {
position: absolute;
top: 10px;
height: 40px;
padding: .35rem .55rem;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 3px 8px rgba(21, 32, 51, .08);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: .76rem;
font-weight: 700;
display: flex;
align-items: center;
}
.event-bar span[b-5jr7fenh2i] {
overflow: hidden;
text-overflow: ellipsis;
}
.event-landing-gear[b-5jr7fenh2i],
.legend-swatch.event-landing-gear[b-5jr7fenh2i] { background: #ffe2af; }
.event-heavy-check[b-5jr7fenh2i],
.legend-swatch.event-heavy-check[b-5jr7fenh2i] { background: #dce8fb; }
.event-conversion[b-5jr7fenh2i],
.legend-swatch.event-conversion[b-5jr7fenh2i] { background: #ffef82; }
.event-position[b-5jr7fenh2i],
.legend-swatch.event-position[b-5jr7fenh2i] { background: #e9eef5; }
.event-a-check[b-5jr7fenh2i],
.legend-swatch.event-a-check[b-5jr7fenh2i] { background: #eadfff; }
.event-other-mx[b-5jr7fenh2i],
.legend-swatch.event-other-mx[b-5jr7fenh2i] { background: #ffd69c; }
.event-aog[b-5jr7fenh2i],
.legend-swatch.event-aog[b-5jr7fenh2i] { background: #ffd4d7; color: #7a1721; }
.event-slip[b-5jr7fenh2i],
.legend-swatch.event-slip[b-5jr7fenh2i] { background: #d7f1fb; }
.event-tentative[b-5jr7fenh2i],
.legend-swatch.event-tentative[b-5jr7fenh2i] { background: #e8f3ff; }
.legend-available[b-5jr7fenh2i] { background: #dff4e3; }
.rag-green[b-5jr7fenh2i] { background: var(--green); }
.rag-amber[b-5jr7fenh2i] { background: #ea8d2e; }
.rag-red[b-5jr7fenh2i] { background: var(--red); }
.log-panel[b-5jr7fenh2i] {
padding: 1.25rem;
}
.panel-header[b-5jr7fenh2i] {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-end;
margin-bottom: 1rem;
}
.log-table[b-5jr7fenh2i] {
display: grid;
grid-template-columns: 120px 110px minmax(320px, 1fr) minmax(220px, .8fr);
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
}
.log-table > div[b-5jr7fenh2i] {
padding: .8rem .9rem;
border-bottom: 1px solid var(--line);
background: #fff;
}
.log-head[b-5jr7fenh2i] {
background: #f8fafc !important;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .08em;
color: #607086;
font-weight: 800;
}
.log-change[b-5jr7fenh2i] {
white-space: pre-line;
}
@media (max-width: 1000px) {
.hero[b-5jr7fenh2i] {
flex-direction: column;
}
.hero-actions[b-5jr7fenh2i] {
width: 100%;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.capacity-plan-page[b-5jr7fenh2i] {
padding: 1rem;
}
}
/* /Components/Pages/CapacityPlanDays.razor.rz.scp.css */
.planner-shell[b-8zbaciqz63] {
--day-width: 14px;
--row-height: 120px;
--left-width: 110px;
--job-top: 18px;
--job-height: calc(var(--row-height) - 40px);
display: flex;
flex-direction: column;
height: 100dvh;
max-height: 100dvh;
min-height: 0;
overflow: hidden;
padding: 10px 14px;
box-sizing: border-box;
background: #f6f8fb;
color: #1f2937;
font-family: Arial, sans-serif;
}
@supports not (height: 100dvh) {
.planner-shell[b-8zbaciqz63] {
height: 100vh;
max-height: 100vh;
}
}
.capacity-toolbar-wrap[b-8zbaciqz63] {
flex: 0 0 auto;
display: flex;
flex-direction: column;
margin-bottom: 6px;
}
.capacity-toolbar[b-8zbaciqz63] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 8px 12px;
border-radius: 14px;
background: rgba(255,255,255,0.95);
border: 1px solid rgba(15,23,42,0.08);
box-shadow: 0 4px 12px rgba(15,23,42,0.06);
max-height: 200px;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.capacity-toolbar--collapsed[b-8zbaciqz63] {
max-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border-color: transparent !important;
box-shadow: none !important;
}
.capacity-toolbar__left[b-8zbaciqz63] {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
}
.capacity-toolbar__right[b-8zbaciqz63] {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.capacity-toolbar-toggle-row[b-8zbaciqz63] {
display: flex;
justify-content: flex-end;
}
.capacity-toolbar-toggle-btn[b-8zbaciqz63] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 12px;
font-size: 11px;
font-weight: 600;
color: #667085;
background: rgba(255,255,255,0.9);
border: 1px solid #e5e7eb;
border-radius: 0 0 8px 8px;
border-top: none;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
line-height: 1.8;
position:absolute;
top:0;
}
.capacity-toolbar-toggle-btn:hover[b-8zbaciqz63] {
background: #f1f5f9;
color: #344054;
}
.capacity-toolbar-toggle-btn i[b-8zbaciqz63] {
font-size: 12px;
transition: transform 0.25s ease;
display: inline-block;
}
.capacity-toolbar-toggle-btn.is-collapsed i[b-8zbaciqz63] {
transform: rotate(180deg);
}
.day-width-control[b-8zbaciqz63] {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e5e7eb;
white-space: nowrap;
}
.day-width-label[b-8zbaciqz63] {
font-size: 11px;
font-weight: 700;
color: #475467;
}
.day-width-value[b-8zbaciqz63] {
min-width: 38px;
font-size: 11px;
font-weight: 700;
text-align: right;
color: #2563eb;
}
.day-width-control input[type="range"][b-8zbaciqz63] {
width: 100px;
}
.day-height-control[b-8zbaciqz63] {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e5e7eb;
white-space: nowrap;
}
.slider-group[b-8zbaciqz63] {
right:120px;
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
/* border-radius: 10px;
background: #f8fafc;
border: 1px solid #e5e7eb; I will ask Matt TODO*/
position: absolute;
top: 0;
}
.day-height-label[b-8zbaciqz63] {
font-size: 11px;
font-weight: 700;
color: #475467;
}
.day-height-value[b-8zbaciqz63] {
min-width: 38px;
font-size: 11px;
font-weight: 700;
text-align: right;
color: #2563eb;
}
.day-height-control input[type="range"][b-8zbaciqz63] {
width: 100px;
}
.capacity-readonly-badge[b-8zbaciqz63] {
padding: 3px 10px;
border-radius: 20px;
background: #fef3c7;
color: #92400e;
font-size: 11px;
font-weight: 700;
border: 1px solid #fde68a;
}
.latest-change-ticker[b-8zbaciqz63] {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
overflow: hidden;
}
.latest-change-ticker__label[b-8zbaciqz63] {
flex: 0 0 auto;
font-size: 11px;
font-weight: 700;
color: #475467;
text-transform: uppercase;
letter-spacing: 0.4px;
white-space: nowrap;
}
.latest-change-ticker__content[b-8zbaciqz63] {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
.latest-change-ticker__flip-wrap[b-8zbaciqz63] {
flex: 1 1 auto;
min-width: 0;
perspective: 800px;
overflow: hidden;
}
.latest-change-ticker__flip-card[b-8zbaciqz63] {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
transform-origin: center center;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.latest-change-ticker__flip-card.flipping[b-8zbaciqz63] {
animation: tickerFlip3d-b-8zbaciqz63 0.6s ease;
}
@keyframes tickerFlip3d-b-8zbaciqz63 {
0% {
opacity: 0;
transform: rotateX(-100deg) scale(0.98);
}
60% {
opacity: 1;
transform: rotateX(10deg) scale(1);
}
100% {
opacity: 1;
transform: rotateX(0deg) scale(1);
}
}
.latest-change-ticker__time[b-8zbaciqz63] {
flex: 0 0 auto;
font-size: 11px;
color: #667085;
white-space: nowrap;
}
.latest-change-ticker__meta[b-8zbaciqz63] {
flex: 0 0 auto;
font-size: 12px;
color: #344054;
white-space: nowrap;
}
.latest-change-ticker__text[b-8zbaciqz63] {
flex: 1 1 auto;
min-width: 0;
font-size: 12px;
color: #101828;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.latest-change-ticker__empty[b-8zbaciqz63] {
font-size: 12px;
color: #94a3b8;
}
.availability-summary[b-8zbaciqz63] {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
gap: 8px;
margin-bottom: 8px;
}
.availability-card[b-8zbaciqz63] {
background: #fff;
border: 1px solid #dbe3ee;
border-radius: 10px;
padding: 8px 10px;
text-align: center;
}
.availability-month[b-8zbaciqz63] {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
color: #6b7280;
margin-bottom: 3px;
}
.availability-value[b-8zbaciqz63] {
font-size: 20px;
font-weight: 800;
line-height: 1.1;
color: #111827;
}
.availability-caption[b-8zbaciqz63] {
font-size: 10px;
color: #6b7280;
margin-top: 2px;
}
.availability-percent[b-8zbaciqz63] {
font-size: 13px;
font-weight: 700;
color: #2563eb;
margin-top: 3px;
}
[b-8zbaciqz63] .capacity-tabs {
flex: 1 1 auto;
min-height: 0;
display: flex !important;
flex-direction: column !important;
}
[b-8zbaciqz63] .capacity-tabs > .dxbl-tabs-tablist-wrapper {
flex: 0 0 auto;
}
[b-8zbaciqz63] .capacity-tabs > .dxbl-tabs-content,
[b-8zbaciqz63] .capacity-tabs > .dxbl-tabs-pages,
[b-8zbaciqz63] .capacity-tabs > div:not(.dxbl-tabs-tablist-wrapper) {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
[b-8zbaciqz63] .dxbl-tabs-tabpage {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
[b-8zbaciqz63] .dxbl-tabs-tabpage-content {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.capacity-main-layout[b-8zbaciqz63] {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.capacity-plan-region[b-8zbaciqz63] {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
}
.planner-carousel-shell[b-8zbaciqz63] {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
}
.planner-container[b-8zbaciqz63] {
flex: 1 1 auto;
min-height: 0;
position: relative;
overflow: auto;
border: 1px solid #dbe3ee;
border-radius: 12px;
background: #fff;
visibility: hidden;
transition: opacity 0.12s ease;
}
.planner-container.is-ready[b-8zbaciqz63] {
visibility: visible;
}
.planner-container[b-8zbaciqz63]::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.planner-container[b-8zbaciqz63]::-webkit-scrollbar-track {
background: #eef2f7;
border-radius: 999px;
}
.planner-container[b-8zbaciqz63]::-webkit-scrollbar-thumb {
background: #c7d2e0;
border-radius: 999px;
}
.planner-header-row[b-8zbaciqz63],
.planner-data-row[b-8zbaciqz63] {
display: grid;
grid-template-columns: var(--left-width) 1fr;
}
.planner-header-row[b-8zbaciqz63] {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
}
.sticky-left[b-8zbaciqz63] {
position: sticky;
left: 0;
z-index: 100;
}
.left-panel[b-8zbaciqz63] {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
padding: 8px 10px;
border-right: 1px solid #dbe3ee;
background: #fff;
z-index: 100;
box-sizing: border-box;
}
.header-left[b-8zbaciqz63] {
height: 136px;
font-weight: 700;
border-bottom: 1px solid #dbe3ee;
z-index: 130;
}
.header-aircraft[b-8zbaciqz63] {
text-align: left;
}
.header-status[b-8zbaciqz63] {
text-align: right;
}
.aircraft-left[b-8zbaciqz63] {
height: var(--row-height);
border-bottom: 1px solid #eef2f7;
position: sticky;
left: 0;
z-index: 20;
overflow: visible;
padding-left: 8px;
box-sizing: border-box;
}
.aircraft-left[b-8zbaciqz63]::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
z-index: 0;
}
.aircraft-left > *[b-8zbaciqz63] {
position: relative;
z-index: 1;
}
.aircraft-left--aoc-available[b-8zbaciqz63] {
background: linear-gradient(90deg, #fff, rgba(22,163,74,0.4) 80%);
}
.aircraft-left--aoc-available[b-8zbaciqz63]::before {
background: #16a34a;
}
.aircraft-left--aoc-maint[b-8zbaciqz63] {
background: linear-gradient(90deg, #fff, rgba(220,38,38,0.4) 80%);
}
.aircraft-left--aoc-maint[b-8zbaciqz63]::before {
background: #dc2626;
}
.aircraft-left--non-aoc[b-8zbaciqz63] {
background: linear-gradient(90deg, #fff, rgba(99,102,241,0.4) 80%);
}
.aircraft-left--non-aoc[b-8zbaciqz63]::before {
background: #6366f1;
}
.aircraft-code[b-8zbaciqz63] {
font-size: 13px;
font-weight: 700;
line-height: 1.1;
text-align: center;
}
.aircraft-status[b-8zbaciqz63] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 3px 7px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
text-align: center;
}
.status-inservice[b-8zbaciqz63] {
background: #dcfce7;
color: #166534;
border: 1px solid #166534;
}
.status-maint[b-8zbaciqz63] {
background: #fee2e2;
color: #991b1b;
border: 1px solid #991b1b;
}
.status-non-aoc-inservice[b-8zbaciqz63] {
background: #ede9fe;
color: #5b21b6;
border: 1px solid #7c3aed;
}
.status-non-aoc-maint[b-8zbaciqz63] {
background: #fae8ff;
color: #86198f;
border: 1px solid #c026d3;
}
.right-panel[b-8zbaciqz63] {
border-bottom: 1px solid #dbe3ee;
}
.month-row[b-8zbaciqz63] {
display: grid;
height: 54px;
}
.week-row[b-8zbaciqz63] {
display: grid;
height: 20px;
border-bottom: 1px solid #d0d5dd;
}
.service-count-row[b-8zbaciqz63] {
display: grid;
height: 26px;
border-top: 1px solid #e4eaf2;
background: #f4faf6;
}
.day-number-row[b-8zbaciqz63] {
display: grid;
height: 28px;
border-top: 1px solid #e4eaf2;
background: #fcfdfc;
}
.month-cell[b-8zbaciqz63] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 3px 2px;
box-sizing: border-box;
text-align: center;
background: #f8fafc;
border-right: 2px dashed #16a34a;
overflow: hidden;
}
.month-cell-name[b-8zbaciqz63] {
font-size: 11px;
font-weight: 800;
color: #111827;
line-height: 1.1;
}
.month-cell-avail[b-8zbaciqz63] {
font-size: 10px;
font-weight: 700;
color: #2563eb;
line-height: 1.1;
}
.month-cell-percent[b-8zbaciqz63] {
font-size: 9px;
font-weight: 600;
color: #6b7280;
line-height: 1.1;
}
.week-cell[b-8zbaciqz63] {
border-right: 1px solid #d0d5dd;
text-align: center;
background: #f8fafc;
font-size: 10px;
padding: 3px 2px;
overflow: hidden;
color: darkmagenta;
font-weight: 600;
}
.service-count-cell[b-8zbaciqz63],
.day-number-cell[b-8zbaciqz63] {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-right: 1px solid #e9eef5;
transition: background-color 0.08s ease, color 0.08s ease, transform 0.08s ease;
}
.service-count-cell[b-8zbaciqz63] {
font-size: 9px;
font-weight: 800;
color: #166534;
background: #edf9f1;
}
.day-number-cell[b-8zbaciqz63] {
font-size: 9px;
font-weight: 700;
color: #6b7280;
background: #f8fcf9;
}
.service-count-cell.weekend[b-8zbaciqz63],
.day-number-cell.weekend[b-8zbaciqz63] {
background: #dff1e7;
}
.day-number-cell.weekend[b-8zbaciqz63] {
color: #4b5563;
}
.day-number-cell.today-header-day[b-8zbaciqz63],
.service-count-cell.today-header-day[b-8zbaciqz63] {
box-shadow: inset 0 0 0 1px #16a34a;
}
.hover-column[b-8zbaciqz63] {
position: absolute;
top: 0;
bottom: 0;
width: var(--day-width);
left: calc(var(--left-width) + (var(--hover-day-index, -9999) * var(--day-width)));
background: rgba(37,99,235,0.07);
border-left: 1px solid rgba(37,99,235,0.2);
border-right: 1px solid rgba(37,99,235,0.2);
pointer-events: none;
z-index: 4;
display: none;
}
.planner-container.has-hover-column .hover-column[b-8zbaciqz63] {
display: block;
}
.day-column-hover-js[b-8zbaciqz63] {
background-color: rgba(37,99,235,0.07) !important;
outline: 1px solid rgba(37,99,235,0.2);
outline-offset: -1px;
}
.day-number-cell.day-column-hover-js[b-8zbaciqz63],
.service-count-cell.day-column-hover-js[b-8zbaciqz63] {
position: relative;
z-index: 2;
transform: scale(1.07);
transform-origin: center;
font-weight: 800;
color: #1d4ed8 !important;
background-color: rgba(37,99,235,0.14) !important;
}
.day-box.day-column-hover-js[b-8zbaciqz63] {
background: #dbeafe !important;
}
.day-box.day-column-hover-js.weekend[b-8zbaciqz63] {
background: #c7e0fb !important;
}
.aircraft-left.day-column-hover-js[b-8zbaciqz63] {
background: #dbeafe !important;
outline: 1px solid rgba(37,99,235,0.3);
outline-offset: -1px;
}
.today-line[b-8zbaciqz63] {
position: absolute;
width: 3px;
background: #16a34a;
z-index: 30;
pointer-events: none;
box-shadow: 0 0 6px rgba(22, 163, 74, 0.35);
}
.track-wrapper[b-8zbaciqz63] {
position: relative;
height: var(--row-height);
border-bottom: 1px solid #eef2f7;
background: #fff;
}
.days-grid[b-8zbaciqz63] {
display: grid;
height: 100%;
align-items: center;
user-select: none;
-webkit-user-select: none;
}
.day-box[b-8zbaciqz63] {
width: var(--day-width);
height: var(--job-height);
box-sizing: border-box;
border-right: 1px solid #eef2f7;
background: #e6f7ed;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: background-color 0.08s ease;
}
.day-box.weekend[b-8zbaciqz63] {
background: #cdeedb;
}
.day-box:hover[b-8zbaciqz63] {
background: #b7e6cf;
}
.day-box.month-start[b-8zbaciqz63] {
border-left: 2px dashed #16a34a;
}
.day-box.selected[b-8zbaciqz63] {
background: rgba(37,99,235,0.2);
}
.selection-overlay[b-8zbaciqz63] {
position: absolute;
top: 0;
bottom: 0;
display: none;
background: rgba(59,130,246,0.15);
border: 1px solid rgba(59,130,246,0.5);
border-radius: 4px;
pointer-events: none;
z-index: 2;
box-sizing: border-box;
overflow: visible;
}
.selection-overlay__label[b-8zbaciqz63] {
position: absolute;
top: -22px;
min-width: 44px;
padding: 2px 6px;
font-size: 10px;
border-radius: 5px;
background: #111827;
color: #fff;
white-space: nowrap;
}
.selection-overlay__label--start[b-8zbaciqz63] {
left: -35px;
}
.selection-overlay__label--end[b-8zbaciqz63] {
right: -40px;
}
.capacity-is-dragging .day-box[b-8zbaciqz63] {
user-select: none;
}
.job-group[b-8zbaciqz63] {
position: absolute;
top: var(--job-top);
height: var(--job-height);
box-sizing: border-box;
border-radius: 10px;
pointer-events: none;
overflow: visible;
}
.job-group .job-block[b-8zbaciqz63] {
position: absolute;
top: 0;
height: 100%;
box-sizing: border-box;
border-radius: 0;
pointer-events: auto;
overflow: visible;
}
.job-group .job-block:first-child[b-8zbaciqz63] {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.job-group .job-block:last-child[b-8zbaciqz63] {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.job-group-bordered[b-8zbaciqz63] {
padding: 2px;
border: 2px solid rgba(59,130,246,0.4);
border-radius: 12px;
}
.job-group-awaiting[b-8zbaciqz63] {
border-color: rgba(127,29,29,0.9);
box-shadow: 0 0 0 2px #dc2626, 0 0 10px rgba(220,38,38,0.6);
}
.job-group-locked .job-block[b-8zbaciqz63] {
opacity: 0.75;
cursor: default;
pointer-events: none;
}
.job-block[b-8zbaciqz63] {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
overflow: visible;
cursor: grab;
text-align: center;
color: #fff;
font-size: clamp(8px, calc(var(--row-height) * 0.1), 13px);
font-weight: 700;
box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.job-block:active[b-8zbaciqz63] {
cursor: grabbing;
}
.job-block:hover[b-8zbaciqz63] {
filter: brightness(1.05);
}
.job-awaiting[b-8zbaciqz63] {
border: 1px solid rgba(127,29,29,0.8);
box-shadow: 0 0 0 2px #dc2626, 0 0 4px rgba(220,38,38,0.6);
}
.job-block.pos-before[b-8zbaciqz63],
.job-block.pos-after[b-8zbaciqz63] {
border: 1px dashed rgba(29,78,216,0.4);
}
.job-block.slip[b-8zbaciqz63] {
border: 1px dashed rgba(146,64,14,0.4);
}
.job-resize-handle[b-8zbaciqz63] {
position: absolute;
top: 0;
bottom: 0;
width: 8px;
z-index: 20;
opacity: 0;
transition: opacity 0.12s ease;
}
.job-block:hover .job-resize-handle[b-8zbaciqz63],
.job-block--resizing .job-resize-handle[b-8zbaciqz63] {
opacity: 1;
}
.job-resize-handle--left[b-8zbaciqz63] {
left: 0;
cursor: ew-resize;
background: rgba(17,24,39,0.2);
border-left: 2px solid rgba(17,24,39,0.6);
}
.job-resize-handle--right[b-8zbaciqz63] {
right: 0;
cursor: ew-resize;
background: rgba(17,24,39,0.2);
border-right: 2px solid rgba(17,24,39,0.6);
}
.job-block.pos-before .job-resize-handle[b-8zbaciqz63],
.job-block.pos-after .job-resize-handle[b-8zbaciqz63] {
background: rgba(29,78,216,0.15);
}
.job-block.slip .job-resize-handle[b-8zbaciqz63] {
background: rgba(146,64,14,0.15);
}
.job-block--resizing[b-8zbaciqz63] {
pointer-events: none;
filter: brightness(1.04);
}
.job-tat-badge[b-8zbaciqz63] {
position: absolute;
top: 2px;
left: 3px;
font-size: 8px;
font-weight: 700;
padding: 1px 3px;
border-radius: 3px;
background: rgba(255,255,255,0.85);
color: #111827;
z-index: 10;
pointer-events: none;
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
transform: none !important;
white-space: nowrap;
}
.job-title-three-line[b-8zbaciqz63] {
display: flex;
flex-direction: column;
gap: 1px;
width: 100%;
padding-top: 12px;
line-height: 1.1;
}
.job-title-line[b-8zbaciqz63] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.job-title-line--main[b-8zbaciqz63] {
font-weight: 800;
font-size: clamp(9px, calc(var(--row-height) * 0.1), 13px);
}
.job-title-line--comments[b-8zbaciqz63] {
font-weight: 600;
font-size: clamp(8px, calc(var(--row-height) * 0.09), 11px);
opacity: 0.92;
}
.job-title-line--other[b-8zbaciqz63] {
font-weight: 500;
font-size: clamp(7px, calc(var(--row-height) * 0.08), 10px);
opacity: 0.82;
}
.job-block-vertical[b-8zbaciqz63] {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
overflow: hidden !important;
}
.job-title-rotated[b-8zbaciqz63] {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
transform-origin: center;
white-space: nowrap;
font-size: 10px;
font-weight: 800;
line-height: 1;
max-width: calc(var(--row-height) - 40px);
overflow: hidden;
text-overflow: ellipsis;
}
.job-html-text[b-8zbaciqz63] {
width: 100%;
overflow: hidden;
text-align: center;
line-height: 1.1;
}
.job-edge-label[b-8zbaciqz63] {
position: absolute;
top: -20px;
font-size: 9px;
font-weight: 600;
color: darkviolet;
letter-spacing: 0.5px;
white-space: nowrap;
z-index: 8;
pointer-events: none;
transform-origin: center center;
}
.job-edge-label--start[b-8zbaciqz63] {
left: 0;
transform: translateX(-35%) rotate(-90deg);
}
.job-edge-label--end[b-8zbaciqz63] {
right: 0;
transform: translateX(35%) rotate(-90deg);
}
.planner-note[b-8zbaciqz63] {
position: absolute;
z-index: 20;
cursor: pointer;
box-sizing: border-box;
transition: all 0.18s ease;
}
.planner-note--collapsed[b-8zbaciqz63] {
width: 16px !important;
padding: 0;
border: none;
background: transparent;
overflow: visible;
}
.planner-note--collapsed .planner-note__pin[b-8zbaciqz63] {
width: 16px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.planner-note--collapsed .planner-note__dot[b-8zbaciqz63] {
display: block !important;
width: 12px !important;
height: 12px !important;
flex: 0 0 12px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(15,23,42,0.3);
position: relative;
z-index: 2;
}
.planner-note--collapsed .planner-note__line[b-8zbaciqz63] {
width: 2px;
flex: 1 1 auto;
margin-top: 2px;
opacity: 0.6;
border-radius: 999px;
}
.planner-note[b-8zbaciqz63] {
position: absolute;
top: 0;
bottom: 0;
width: var(--day-width);
height: var(--row-height);
z-index: 6;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.planner-note--expanded[b-8zbaciqz63] {
display: flex;
align-items: center;
gap: 6px;
height: auto !important;
padding: 6px 8px;
border: 1px solid currentColor;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(15,23,42,0.15);
overflow: visible;
z-index: 30;
}
.planner-note--expanded .planner-note__pin[b-8zbaciqz63] {
display: flex;
align-items: center;
justify-content: center;
}
.planner-note--expanded .planner-note__dot[b-8zbaciqz63] {
width: 9px;
height: 9px;
min-width: 9px;
border-radius: 999px;
}
.planner-note--expanded .planner-note__line[b-8zbaciqz63] {
display: none;
}
.planner-note__body[b-8zbaciqz63] {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 8px;
width: 100%;
}
.planner-note__date[b-8zbaciqz63] {
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.planner-note__content[b-8zbaciqz63] {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
.planner-note__title[b-8zbaciqz63] {
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.planner-note__comment[b-8zbaciqz63] {
font-size: 10px;
line-height: 1.2;
white-space: normal;
word-break: break-word;
}
.planner-note__edit[b-8zbaciqz63] {
width: 20px;
height: 20px;
min-width: 20px;
border: none;
border-radius: 50%;
background: #f2f4f7;
color: #344054;
font-size: 13px;
font-weight: 800;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.planner-note__edit:hover[b-8zbaciqz63] {
background: #e0e7ff;
color: #1d4ed8;
}
.note-help-text[b-8zbaciqz63] {
font-size: 12px;
color: #6b7280;
font-style: italic;
}
[b-8zbaciqz63] .month-nav-btn,
[b-8zbaciqz63] .month-nav-btn.dx-button,
[b-8zbaciqz63] .month-nav-btn .dxbl-btn {
color:blue !important;
position: absolute !important;
top: 27px !important;
transform: translateY(-50%);
z-index: 500 !important;
width: 32px;
height: 38px;
min-width: 32px;
padding: 0 !important;
border-radius: 8px !important;
opacity: 0.12;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
box-shadow: none !important;
transition: opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.planner-carousel-shell:hover[b-8zbaciqz63] .month-nav-btn,
[b-8zbaciqz63] .month-nav-btn:hover {
opacity: 0.9;
background: rgba(255,255,255,0.92) !important;
border-color: #3b82f6 !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.planner-carousel-shell.is-scrolling[b-8zbaciqz63] .month-nav-btn {
opacity: 0 !important;
pointer-events: none;
}
[b-8zbaciqz63] .month-nav-left {
left: 110px !important;
}
[b-8zbaciqz63] .month-nav-right {
right: 8px !important;
}
[b-8zbaciqz63] .month-nav-btn .dx-button-content {
display: flex;
justify-content: center;
align-items: center;
padding: 0 !important;
font-size: 20px;
font-weight: 700;
color: #344054;
}
.job-form[b-8zbaciqz63] {
display: flex;
flex-direction: column;
gap: 12px;
padding: 4px 2px;
}
.form-row[b-8zbaciqz63] {
display: flex;
flex-direction: column;
gap: 5px;
}
.form-row.two-cols[b-8zbaciqz63] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.form-row label[b-8zbaciqz63] {
font-size: 12px;
font-weight: 600;
color: #374151;
}
.form-row-switch-group[b-8zbaciqz63] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
}
.sub-group-card[b-8zbaciqz63] {
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #f8fafc;
}
.job-date-color-row[b-8zbaciqz63] {
display: grid;
grid-template-columns: 1fr 1fr 240px;
gap: 12px;
align-items: start;
}
.popup-footer[b-8zbaciqz63] {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.popup-footer-right[b-8zbaciqz63] {
display: flex;
gap: 10px;
}
.cw-tabs[b-8zbaciqz63] {
position: relative;
display: flex;
gap: 4px;
border-bottom: 1px solid #e4e7ec;
margin: 0 0 14px;
padding: 0 4px;
}
.cw-tab[b-8zbaciqz63] {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
border: 0;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
color: #667085;
cursor: pointer;
border-radius: 6px 6px 0 0;
transition: color 0.15s ease, background-color 0.15s ease;
}
.cw-tab:hover[b-8zbaciqz63] {
color: #1d4ed8;
background: #f5f7fb;
}
.cw-tab.is-active[b-8zbaciqz63] {
color: #1d4ed8;
font-weight: 600;
background: #eef2ff;
}
.cw-tab-icon[b-8zbaciqz63] {
font-size: 15px;
line-height: 1;
}
.cw-tab-indicator[b-8zbaciqz63] {
position: absolute;
bottom: -1px;
left: 0;
width: 50%;
height: 2px;
background: #1d4ed8;
border-radius: 2px 2px 0 0;
transition: transform 0.2s ease;
pointer-events: none;
}
.popup-tab-hidden[b-8zbaciqz63] {
display: none;
}
.job-color-grid[b-8zbaciqz63] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.job-color-card[b-8zbaciqz63] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 76px;
padding: 8px 6px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
cursor: pointer;
text-align: center;
transition: all 0.12s ease;
}
.job-color-card:hover[b-8zbaciqz63] {
background: #f8fafc;
border-color: #cbd5e1;
transform: translateY(-1px);
}
.job-color-card.selected[b-8zbaciqz63] {
border-color: #2563eb;
background: #eff6ff;
box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.job-color-swatch-large[b-8zbaciqz63] {
width: 26px;
height: 26px;
flex: 0 0 auto;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 6px;
}
.job-color-name[b-8zbaciqz63] {
font-size: 11px;
font-weight: 600;
line-height: 1.2;
text-align: center;
word-break: break-word;
color: #1f2937;
}
.color-edit-box[b-8zbaciqz63] {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.dropdown-icon-color[b-8zbaciqz63] {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid #d0d5dd;
display: inline-block;
flex-shrink: 0;
}
.color-edit-box__text[b-8zbaciqz63] {
font-size: 12px;
color: #344054;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.capacity-extra-panel[b-8zbaciqz63] {
flex: 1 1 auto;
min-height: 0;
margin-top: 8px;
padding: 12px;
border-radius: 14px;
background: rgba(255,255,255,0.96);
border: 1px solid rgba(15,23,42,0.07);
box-shadow: 0 4px 12px rgba(15,23,42,0.05);
display: flex;
flex-direction: column;
overflow: hidden;
}
.capacity-extra-panel__title[b-8zbaciqz63] {
flex: 0 0 auto;
margin-bottom: 8px;
font-size: 14px;
font-weight: 700;
color: #1f2937;
}
[b-8zbaciqz63] .capacity-grid {
flex: 1 1 auto;
min-height: 0;
}
.btn-secondary[b-8zbaciqz63] {
background: #6b7280 !important;
color: #fff !important;
border: none !important;
}
.btn-danger[b-8zbaciqz63] {
background: #dc2626 !important;
color: #fff !important;
border-color: #dc2626 !important;
}
[b-8zbaciqz63] .btn-danger {
background: #dc2626 !important;
border-color: #dc2626 !important;
color: #fff !important;
}
[b-8zbaciqz63] .btn-danger:hover {
background: #b91c1c !important;
border-color: #b91c1c !important;
}
.validation-message[b-8zbaciqz63] {
color: #b42318;
font-size: 11px;
font-weight: 600;
margin-top: 3px;
}
[b-8zbaciqz63] .change-label {
color: #667085;
margin-right: 4px;
}
[b-8zbaciqz63] .change-old {
color: #f97316;
font-weight: 600;
}
[b-8zbaciqz63] .change-arrow {
color: #98a2b3;
margin: 0 6px;
}
[b-8zbaciqz63] .change-new {
color: #16a34a !important;
font-weight: 700;
}
.latest-changes-popup[b-8zbaciqz63] {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 60vh;
overflow: auto;
padding-right: 4px;
}
.latest-changes-empty[b-8zbaciqz63] {
padding: 16px;
text-align: center;
color: #6b7280;
font-size: 13px;
}
.latest-change-date-group[b-8zbaciqz63] {
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.latest-change-date-header[b-8zbaciqz63] {
padding: 8px 12px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
font-size: 12px;
font-weight: 700;
color: #1f2937;
}
.latest-change-list[b-8zbaciqz63] {
display: flex;
flex-direction: column;
}
.latest-change-item[b-8zbaciqz63] {
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid #f1f5f9;
}
.latest-change-item:last-child[b-8zbaciqz63] {
border-bottom: none;
}
.latest-change-time[b-8zbaciqz63] {
font-size: 11px;
font-weight: 700;
color: #2563eb;
}
.latest-change-text[b-8zbaciqz63] {
font-size: 13px;
color: #111827;
}
.latest-change-meta[b-8zbaciqz63] {
font-size: 11px;
color: #6b7280;
white-space: nowrap;
}
.planner-container--bootstrapping[b-8zbaciqz63],
.planner-container--swapping[b-8zbaciqz63] {
visibility: hidden;
pointer-events: none;
}
.planner-shell--loading .capacity-main-layout[b-8zbaciqz63] {
visibility: hidden;
}
.capacity-access-denied[b-8zbaciqz63] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100dvh;
gap: 8px;
color: #6b7280;
}
.export-overlay[b-8zbaciqz63] {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.export-overlay-content[b-8zbaciqz63] {
background: white;
padding: 20px 28px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.spinner[b-8zbaciqz63] {
width: 28px;
height: 28px;
border: 3px solid #e5e7eb;
border-top: 3px solid #3b82f6;
border-radius: 50%;
animation: spin-b-8zbaciqz63 0.8s linear infinite;
}
@keyframes spin-b-8zbaciqz63 {
to {
transform: rotate(360deg);
}
}
@media print {
[b-8zbaciqz63] .dxbl-tabs-tablist.dxbl-tabs-tablist-scrollable {
display: none !important;
}
[b-8zbaciqz63] .dxButton {
display: none;
}
.capacity-toolbar-wrap[b-8zbaciqz63] {
display: none;
}
}
@media (max-width: 1024px) {
.availability-summary[b-8zbaciqz63] {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
.job-date-color-row[b-8zbaciqz63] {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.planner-shell[b-8zbaciqz63] {
--left-width: 95px;
--day-width: 16px;
--row-height: 100px;
padding: 6px 8px;
}
.day-width-control input[type="range"][b-8zbaciqz63] {
width: 70px;
}
.form-row-switch-group[b-8zbaciqz63] {
grid-template-columns: 1fr;
}
.job-date-color-row[b-8zbaciqz63] {
grid-template-columns: 1fr;
}
.job-color-grid[b-8zbaciqz63] {
grid-template-columns: repeat(2, 1fr);
}
.availability-summary[b-8zbaciqz63] {
grid-template-columns: repeat(3, minmax(76px, 1fr));
}
}
@media (max-width: 480px) {
.planner-shell[b-8zbaciqz63] {
--left-width: 78px;
--day-width: 13px;
--row-height: 80px;
padding: 4px 6px;
}
.latest-change-ticker__meta[b-8zbaciqz63] {
display: none;
}
.capacity-toolbar[b-8zbaciqz63] {
flex-direction: column;
align-items: stretch;
}
}
.planner-container[b-8zbaciqz63] {
position: relative;
overflow: auto;
border: 1px solid #dbe3ee;
border-radius: 12px;
background: #fff;
visibility: hidden;
min-height: 200px;
}
.planner-container.is-ready[b-8zbaciqz63] {
visibility: visible;
}
.flight-overlay-block[b-8zbaciqz63] {
position: absolute;
bottom: 4px;
height: 14px;
border-radius: 3px;
opacity: 0.82;
display: flex;
align-items: center;
pointer-events: auto;
overflow: hidden;
z-index: 15;
cursor: default;
transition: opacity 0.15s ease;
}
.flight-overlay-block:hover[b-8zbaciqz63] {
opacity: 1;
z-index: 25;
}
.flight-overlay-label[b-8zbaciqz63] {
font-size: 9px;
font-weight: 700;
color: #fff;
white-space: nowrap;
padding: 0 4px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
}
.flight-dot-wrap[b-8zbaciqz63] {
position: absolute;
bottom: 6px;
width: 10px;
height: 10px;
cursor: pointer;
z-index: 15;
}
.flight-dot[b-8zbaciqz63] {
width: 10px;
height: 10px;
border-radius: 50%;
background: inherit;
border: 2px solid rgba(255,255,255,0.8);
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
transition: transform 0.15s ease;
}
.flight-dot-wrap:hover .flight-dot[b-8zbaciqz63] {
transform: scale(1.3);
}
.flight-dot-wrap--expanded .flight-dot[b-8zbaciqz63] {
transform: scale(1.3);
box-shadow: 0 0 0 3px rgba(37,99,235,0.3), 0 1px 4px rgba(0,0,0,0.25);
}
.flight-popup[b-8zbaciqz63] {
position: absolute;
bottom: 18px;
left: 0;
min-width: 160px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 8px 10px;
box-shadow: 0 8px 20px rgba(15,23,42,0.15);
z-index: 100;
display: flex;
flex-direction: column;
gap: 4px;
pointer-events: none;
}
.flight-popup__fn[b-8zbaciqz63] {
font-size: 13px;
font-weight: 800;
color: #111827;
}
.flight-popup__route[b-8zbaciqz63] {
font-size: 12px;
font-weight: 600;
color: #374151;
}
.flight-popup__time[b-8zbaciqz63] {
font-size: 11px;
color: #6b7280;
}
.flight-popup__status[b-8zbaciqz63] {
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 20px;
align-self: flex-start;
margin-top: 2px;
}
.flight-status--airborne[b-8zbaciqz63] {
background: #dcfce7;
color: #166534;
}
.flight-status--scheduled[b-8zbaciqz63] {
background: #dbeafe;
color: #1e40af;
}
.flight-status--delayed[b-8zbaciqz63] {
background: #fef3c7;
color: #92400e;
}
.flight-status--onblocks[b-8zbaciqz63] {
background: #f1f5f9;
color: #475467;
}
.flight-popup__time--delayed[b-8zbaciqz63] {
color: #92400e;
font-weight: 600;
}
.flight-popup__delay[b-8zbaciqz63] {
display: inline-block;
margin-left: 6px;
background: #fef3c7;
color: #92400e;
font-size: 9px;
font-weight: 700;
padding: 1px 5px;
border-radius: 10px;
}
.flight-popup[b-8zbaciqz63] {
position: absolute;
z-index: 100;
min-width: 180px;
max-width: 240px;
}
.flight-popup--right[b-8zbaciqz63] {
left: 18px;
}
.flight-popup--left[b-8zbaciqz63] {
right: 18px;
}
.flight-popup--above[b-8zbaciqz63] {
bottom: 18px;
}
.flight-popup--below[b-8zbaciqz63] {
top: 18px;
}
.aircraft-confirm-row[b-8zbaciqz63] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: nowrap;
}
.aircraft-popup-label[b-8zbaciqz63] {
font-size: 1.25rem;
font-weight: 700;
color: #111827;
white-space: nowrap;
flex-shrink: 0;
}
.planner-vscroll-btn[b-8zbaciqz63] {
position: sticky;
left: 50%;
transform: translateX(-50%);
z-index: 300;
width: 38px;
height: 26px;
border: 1px solid rgba(15,23,42,0.15);
border-radius: 999px;
background: transparent;
color: #2563eb;
font-weight: 800;
cursor: pointer;
box-shadow: 0 4px 12px rgba(15,23,42,0.16);
}
.planner-vscroll-btn--top[b-8zbaciqz63] {
top: 148px;
}
.planner-vscroll-btn--bottom[b-8zbaciqz63] {
bottom: 10px;
}
.popup-loading[b-8zbaciqz63] {
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: #475467;
font-weight: 700;
}
/* /Components/Pages/Compliance.razor.rz.scp.css */
.compliance-page[b-sck0rhikwd] {
padding: 1rem;
max-width: 1300px;
margin: 0 auto;
}
.compliance-header[b-sck0rhikwd] {
margin-bottom: 1rem;
}
.compliance-header h2[b-sck0rhikwd] {
margin: 0;
font-weight: 700;
}
.compliance-subtitle[b-sck0rhikwd] {
color: #64748b;
margin-top: .25rem;
}
.compliance-tabs[b-sck0rhikwd] {
background: transparent;
}
.section-shell[b-sck0rhikwd] {
padding: 1rem 0 0 0;
}
.section-banner[b-sck0rhikwd] {
display: flex;
align-items: center;
justify-content: space-between;
color: white;
padding: .85rem 1rem;
border-radius: 14px;
margin-bottom: 1rem;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.section-title[b-sck0rhikwd] {
font-size: 1.1rem;
font-weight: 700;
}
.section-count[b-sck0rhikwd] {
font-size: .9rem;
opacity: .9;
}
.question-list[b-sck0rhikwd] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.question-card[b-sck0rhikwd] {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}
.question-top[b-sck0rhikwd] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
}
.question-code[b-sck0rhikwd] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: .25rem .6rem;
border-radius: 999px;
background: #eef2ff;
color: #334155;
font-weight: 700;
font-size: .85rem;
}
.question-text[b-sck0rhikwd] {
font-size: 1rem;
font-weight: 600;
color: #0f172a;
margin-bottom: .75rem;
}
.question-guide[b-sck0rhikwd] {
background: #f8fafc;
border-left: 4px solid #cbd5e1;
padding: .75rem .9rem;
border-radius: 10px;
color: #475569;
margin-bottom: .85rem;
white-space: pre-wrap;
}
.answer-row[b-sck0rhikwd] {
margin-bottom: .85rem;
}
.answer-label[b-sck0rhikwd] {
display: block;
font-size: .9rem;
font-weight: 600;
margin-bottom: .35rem;
color: #334155;
}
.notes-row label[b-sck0rhikwd] {
font-weight: 600;
margin-bottom: .35rem;
}
/* Tab colors */
.tab-prearrival .section-banner[b-sck0rhikwd] {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.tab-arrival .section-banner[b-sck0rhikwd] {
background: linear-gradient(135deg, #059669, #047857);
}
.tab-lowercargo .section-banner[b-sck0rhikwd] {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.tab-mccc .section-banner[b-sck0rhikwd] {
background: linear-gradient(135deg, #d97706, #b45309);
}
.tab-onload .section-banner[b-sck0rhikwd] {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
}
.tab-depcomm .section-banner[b-sck0rhikwd] {
background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.tab-depcomplete .section-banner[b-sck0rhikwd] {
background: linear-gradient(135deg, #4f46e5, #4338ca);
}
@media (max-width: 768px) {
.compliance-page[b-sck0rhikwd] {
padding: .75rem;
}
.section-banner[b-sck0rhikwd] {
flex-direction: column;
align-items: flex-start;
gap: .35rem;
}
.question-card[b-sck0rhikwd] {
padding: .85rem;
}
}
/* /Components/Pages/DailyReport.razor.rz.scp.css */
/* Card surfaces + status colors */
.card-surface[b-hv56438shy] {
border-radius: 1rem;
box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.card-aog[b-hv56438shy] {
background-color: lightcoral;
}
.card-unserviceable[b-hv56438shy] {
background-color: orange;
}
.card-serviceable[b-hv56438shy] {
background-color: lightgreen;
}
/* Header section titles */
.section-title[b-hv56438shy] {
font-weight: 700;
font-size: .9rem;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.card-header[b-hv56438shy] {
padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
margin-bottom: 10px;
color: var(--bs-card-cap-color);
background-color: var(--bs-card-cap-bg);
border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
border-radius:0.6rem;
}
/* Chips */
.reg-chip[b-hv56438shy] {
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
background: var(--bs-body-tertiary-bg);
color: var(--bs-body-color);
padding: .35rem .6rem;
border-radius: .6rem;
border: 1px solid var(--bs-border-color);
}
.daily-scroll[b-hv56438shy] {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
gap: 10px;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-right: auto;
margin-left: auto;
}
.status-chip[b-hv56438shy] {
padding: .35rem .6rem;
border-radius: 0.6rem;
font-weight: 700;
letter-spacing: .02em;
}
.status-aog[b-hv56438shy] {
background: #dc3545;
color: #fff;
}
.status-serviceable[b-hv56438shy] {
background: #198754;
color: #fff;
}
.status-unserviceable[b-hv56438shy] {
background: #fd7e14;
color: #212529;
}
.loc-chip[b-hv56438shy] {
padding: .35rem .6rem;
border-radius: .6rem;
font-weight: 700;
background: var(--bs-primary-bg-subtle);
color: var(--bs-primary-text);
border: 1px solid var(--bs-primary-border-subtle);
}
/* Bordered property rows */
.kv-rows[b-hv56438shy] {
display: grid;
gap: .5rem;
}
.kv-row[b-hv56438shy] {
display: grid;
grid-template-columns: 220px minmax(0,1fr);
align-items: center;
gap: .75rem;
border: 1px solid var(--bs-border-color);
border-radius: .5rem;
padding: .5rem .75rem;
background: var(--bs-body-bg);
}
@media (max-width: 576px) {
.kv-row[b-hv56438shy] {
grid-template-columns: 1fr;
}
}
.kv-label[b-hv56438shy] {
color: var(--bs-secondary-color);
text-transform: uppercase;
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
white-space: nowrap;
}
.kv-value[b-hv56438shy] {
font-weight: 600;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Deferred Defects table */
.table-dd[b-hv56438shy] {
table-layout: fixed;
width: 100%;
}
.table-dd thead th[b-hv56438shy] {
border-bottom: 1px solid var(--bs-border-color);
}
.table-dd td[b-hv56438shy], .table-dd th[b-hv56438shy] {
padding-top: .5rem;
padding-bottom: .5rem;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dd-wrap[b-hv56438shy] {
max-height: 18rem;
overflow: auto;
}
.defect-text[b-hv56438shy], .col-ops[b-hv56438shy] {
white-space: normal !important;
}
.text-mono[b-hv56438shy] {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
/* Column sizing for the table */
.col-date[b-hv56438shy] {
width: 8.5rem;
}
.col-time[b-hv56438shy] {
width: 4.75rem;
}
.col-defect[b-hv56438shy] {
width: 22rem;
}
.col-cat[b-hv56438shy] {
width: 4.25rem;
}
.col-mel[b-hv56438shy] {
width: 9rem;
}
.col-exp[b-hv56438shy] {
width: 9rem;
}
.col-ops[b-hv56438shy] {
width: 22rem;
}
.col-cal[b-hv56438shy] {
width: 9rem;
}
.col-fh[b-hv56438shy] {
width: 6rem;
}
.col-fc[b-hv56438shy] {
width: 6rem;
}
.cat-pill[b-hv56438shy] {
background: var(--bs-body-tertiary-bg);
border: 1px solid var(--bs-border-color);
font-weight: 700;
}
.comment-box[b-hv56438shy] {
min-height: 2.25rem;
}
/* Collapse / expand animations */
.clickable[b-hv56438shy] {
cursor: pointer;
user-select: none;
}
.clickable:hover[b-hv56438shy] {
filter: brightness(.98);
}
.chev[b-hv56438shy] {
width: .75rem;
height: .75rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
margin-left: .25rem;
transition: transform .25s ease;
opacity: .6;
}
.chev.open[b-hv56438shy] {
transform: rotate(135deg);
}
/* big enough for content */
/* replace your existing collapse rules with these */
.collapse-wrap[b-hv56438shy] {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.collapse-wrap.open[b-hv56438shy] {
max-height: none;
overflow: visible;
}
/* no clipping; page can scroll */
.flight-progress-container[b-hv56438shy] {
position: relative;
}
.flight-header[b-hv56438shy] {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
/* Small round icon button in the header’s top-right */
.map-toggle-btn[b-hv56438shy] {
appearance: none;
border: 0;
border-radius: 50%;
width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
cursor: pointer;
background: #0ea5e9;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
transition: transform .12s ease, filter .12s ease, background .2s ease;
}
.map-toggle-btn:hover[b-hv56438shy] {
filter: brightness(1.05);
transform: translateY(-1px);
}
.map-toggle-btn:active[b-hv56438shy] {
transform: translateY(0);
}
.map-toggle-btn svg[b-hv56438shy] {
display: block;
}
/* Optional: give the map a soft border when shown */
.live-map-wrapper[b-hv56438shy] {
margin-top: .5rem;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
/* /Components/Pages/EmployeeAvailabilityPAge.razor.rz.scp.css */
.card-container[b-4cgeg9ucju] {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 8px;
}
.radio-container[b-4cgeg9ucju] {
display: flex;
gap: 20px;
}
.m-month-calendar[b-4cgeg9ucju] {
display: flex;
flex-direction: column;
align-items: center;
margin: 12px;
}
.navigation[b-4cgeg9ucju] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.m-days-grid[b-4cgeg9ucju] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.day[b-4cgeg9ucju] {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
width: 6vh;
}
.highlight-green[b-4cgeg9ucju] {
background-color: green;
color: white;
font-weight: bold;
}
.highlight-red[b-4cgeg9ucju] {
background-color: red;
color: white;
font-weight: bold;
}
.highlight-blue[b-4cgeg9ucju] {
background-color: cornflowerblue;
color: white;
font-weight: bold;
}
.highlight-orange[b-4cgeg9ucju] {
background-color: orange;
color: white;
font-weight: bold;
}
.empty[b-4cgeg9ucju] {
visibility: hidden;
}
/* /Components/Pages/Engineering.razor.rz.scp.css */
.tab-pane.hidden[b-vdhrjltnfr] {
display: none;
width:0px;
height:0px;
}
.tab-pane.active[b-vdhrjltnfr] {
display: block;
width: auto;
height: auto;
}
[b-vdhrjltnfr] .dxbl-tabs .dxbl-tabs-content-panel{
height:90vh;
}
/* /Components/Pages/EngineHealth.razor.rz.scp.css */
[b-im0oc7c6tp] .dxbl-tabs {
position: relative;
}
[b-im0oc7c6tp] .dxbl-tabs-tablist {
padding: 8px 10px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid #dbe4ee;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
/* Keep tabs aligned nicely */
[b-im0oc7c6tp] .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul {
display: flex;
gap: 8px;
align-items: center;
padding: 0;
margin: 0;
}
[b-im0oc7c6tp] .dxbl-tabs .dxbl-tabs-content-panel {
color: var(--dxbl-tabs-content-color);
font-size: var(--dxbl-tabs-content-font-size);
line-height: var(--dxbl-tabs-content-line-height);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
min-width: 0;
}
[b-im0oc7c6tp] .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li {
margin: 0 !important;
}
/* Each tab button */
[b-im0oc7c6tp] .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item {
position: relative;
border-radius: 12px;
padding: 10px 18px;
background: transparent;
color: #475569;
font-weight: 600;
transition: all 0.25s ease;
border: 1px solid transparent;
}
/* Hover */
[b-im0oc7c6tp] .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:hover {
background: #eef4ff;
color: #1d4ed8;
border-color: #dbeafe;
}
/* Active tab */
[b-im0oc7c6tp] .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item.dxbl-active {
background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
color: #0f172a;
border: 1px solid #bfdbfe;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}
/* Active underline accent */
[b-im0oc7c6tp] .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item.dxbl-active::after {
content: '';
position: absolute;
left: 0px;
right: 12px;
bottom: 0px;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, #2563eb, #60a5fa);
}
[b-im0oc7c6tp] .engine-popup .dxbl-popup-content {
padding: 12px 16px;
}
[b-im0oc7c6tp] .engine-popup .dxbl-popup {
max-width: 92vw;
}
[b-im0oc7c6tp] .engine-popup .dxbl-popup-content,
[b-im0oc7c6tp] .engine-popup .dxbl-popup-body {
overflow: hidden;
}
/* Optional: nicer general tab text */
[b-im0oc7c6tp].dx-tab,
[b-im0oc7c6tp].dx-tab-selected {
font-weight: 600;
}
/* Tooltip fix */
[b-im0oc7c6tp] .dxbl-chart-tooltip {
pointer-events: none !important;
}
.engine-chart-grid[b-im0oc7c6tp] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 12px;
overflow: auto;
max-height: 69vh;
}
.engine-chart-card[b-im0oc7c6tp] {
border: 1px solid #dbe4ee;
border-radius: 14px;
background: white;
padding: 10px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
min-width: 0;
}
.icon-button[b-im0oc7c6tp] {
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.engine-popup .dxbl-popup[b-im0oc7c6tp] {
backdrop-filter: blur(4px);
}
/* /Components/Pages/FuelPage.razor.rz.scp.css */
.fuel-card[b-h4a4em5mj2] {
background-color: black;
color: white;
padding: 20px;
border-radius: 10px;
font-family: 'Consolas', monospace;
font-size:large;
max-width: 450px;
margin: auto;
text-align: center;
margin-top:10px;
}
.dxbl-text-edit .dxbl-text-edit-input[b-h4a4em5mj2] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size:19px!important;
}
/* /Components/Pages/FullYear.razor.rz.scp.css */
.fy-shell[b-4w3uhnjmem] {
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
}
.fy-toolbar[b-4w3uhnjmem] {
padding: 16px 18px;
border-radius: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}
.fy-toolbar__title[b-4w3uhnjmem] {
font-size: 1.1rem;
font-weight: 800;
color: #0f172a;
}
.fy-toolbar__subtitle[b-4w3uhnjmem] {
margin-top: 4px;
font-size: 0.88rem;
color: #64748b;
}
.fy-scroll[b-4w3uhnjmem] {
height: 90dvh;
overflow-y: auto;
padding-right: 4px;
}
.fy-month-section[b-4w3uhnjmem] {
margin-bottom: 22px;
}
.fy-month-header[b-4w3uhnjmem] {
position: sticky;
top: 0;
z-index: 2;
padding: 10px 14px;
margin-bottom: 12px;
border-radius: 14px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
font-size: 1rem;
font-weight: 800;
color: #0f172a;
border: 1px solid rgba(15, 23, 42, 0.06);
}
.fy-grid[b-4w3uhnjmem] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 14px;
}
.fy-card[b-4w3uhnjmem] {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(15, 23, 42, 0.06);
min-height: 220px;
}
.fy-card.yellow[b-4w3uhnjmem] {
background: linear-gradient(180deg, #fffde7 0%, #fff8c5 100%);
}
.fy-card.blue[b-4w3uhnjmem] {
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}
.fy-card.green[b-4w3uhnjmem] {
background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
}
.fy-card.default[b-4w3uhnjmem] {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.fy-card__header[b-4w3uhnjmem] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 16px 16px 12px 16px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.fy-card__day[b-4w3uhnjmem] {
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
color: #475569;
}
.fy-card__date[b-4w3uhnjmem] {
margin-top: 2px;
font-size: 1rem;
font-weight: 700;
color: #0f172a;
}
.fy-card__badge[b-4w3uhnjmem] {
white-space: nowrap;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.75);
font-size: 0.82rem;
font-weight: 700;
color: #334155;
border: 1px solid rgba(15, 23, 42, 0.08);
}
.fy-card__body[b-4w3uhnjmem] {
padding: 14px 16px 16px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.fy-section[b-4w3uhnjmem] {
display: flex;
flex-direction: column;
gap: 8px;
}
.fy-section__title[b-4w3uhnjmem] {
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
color: #64748b;
}
.fy-list[b-4w3uhnjmem] {
display: flex;
flex-direction: column;
gap: 6px;
}
.fy-list__item[b-4w3uhnjmem] {
padding: 8px 10px;
border-radius: 12px;
background: rgba(255,255,255,0.75);
color: #0f172a;
font-size: 0.9rem;
line-height: 1.35;
border: 1px solid rgba(15, 23, 42, 0.05);
}
.fy-list__time[b-4w3uhnjmem] {
font-weight: 700;
margin-right: 6px;
color: #334155;
}
.fy-list__more[b-4w3uhnjmem] {
font-size: 0.82rem;
color: #64748b;
padding-left: 2px;
}
.fy-empty[b-4w3uhnjmem] {
padding: 12px;
border-radius: 12px;
background: rgba(255,255,255,0.55);
color: #64748b;
font-size: 0.88rem;
}
.fy-loading[b-4w3uhnjmem],
.fy-end[b-4w3uhnjmem] {
text-align: center;
padding: 18px;
color: #64748b;
font-weight: 600;
}
.fy-toolbar__actions[b-4w3uhnjmem] {
margin-top: 10px;
display: flex;
gap: 10px;
align-items: center;
}
.fy-date-input[b-4w3uhnjmem] {
width: 160px;
}
.fy-card--highlight[b-4w3uhnjmem] {
outline: 2px solid #3b82f6;
transform: scale(1.02);
transition: all 0.2s ease;
}
/* /Components/Pages/GanttStandalone.razor.rz.scp.css */
.gantt-body[b-8co12n01cg] {
max-height: 60dvh;
padding: 8px 10px 12px 10px
}
.g-wrap[b-8co12n01cg] {
position: relative
}
.lane[b-8co12n01cg] {
position: relative;
height: 32px
}
/* Old (dark) */
.plane-gantt[b-8co12n01cg] {
background: rgba(15,23,42,.94);
color: #fff;
}
/* New (light) */
.plane-gantt[b-8co12n01cg] {
background: #fff;
color: #111;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -6px 24px rgba(0,0,0,.08);
}
.day-band[b-8co12n01cg] {
background: rgba(0,0,0,.03)
}
.day-band.alt[b-8co12n01cg] {
background: rgba(0,0,0,.06)
}
.day-band.today[b-8co12n01cg] {
outline: 1px dashed #06b6d4;
}
.hours .tick[b-8co12n01cg] {
background: rgba(0,0,0,.10)
}
.hours .tick.major[b-8co12n01cg] {
background: rgba(0,0,0,.30)
}
.label[b-8co12n01cg] {
color: #334155
}
.bar .bar-label[b-8co12n01cg] {
background: rgba(255,255,255,.95);
color: #111;
box-shadow: 0 0 0 1px rgba(0,0,0,.06)
}
/* /Components/Pages/GseFaultReportPage.razor.rz.scp.css */
.gse-page[b-2ebmxissiq] {
min-height: 100dvh;
padding: 1rem;
background: linear-gradient(45deg, #88bdbc, #5a7d7c);
}
.gse-shell[b-2ebmxissiq] {
max-width: 1400px;
margin: 0 auto;
overflow-y: auto;
max-height:72vh;
}
.gse-card[b-2ebmxissiq] {
border: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.12);
}
.gse-card .card-header[b-2ebmxissiq] {
background-color: cornflowerblue;
color: white;
font-weight: 600;
border-bottom: none;
}
.gse-card .card-body[b-2ebmxissiq] {
background-color: lightsteelblue;
}
.gse-hero[b-2ebmxissiq] {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.12);
}
.gse-hero-top[b-2ebmxissiq] {
background: linear-gradient(135deg, #2d5f8b, #4f7aa3);
color: white;
padding: 1.25rem;
}
.gse-hero-bottom[b-2ebmxissiq] {
background: white;
padding: 1rem;
}
.gse-code[b-2ebmxissiq] {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
}
.gse-subtitle[b-2ebmxissiq] {
opacity: .9;
font-size: .95rem;
}
.gse-stat[b-2ebmxissiq] {
background: #f8f9fa;
border-radius: 12px;
padding: .75rem .9rem;
height: 100%;
border: 1px solid #e8e8e8;
}
.gse-stat-label[b-2ebmxissiq] {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
color: #6c757d;
margin-bottom: .25rem;
}
.gse-stat-value[b-2ebmxissiq] {
font-size: .98rem;
font-weight: 600;
color: #212529;
word-break: break-word;
}
.gse-expiry[b-2ebmxissiq] {
display: inline-block;
min-width: 110px;
text-align: center;
border-radius: 10px;
padding: .35rem .5rem;
font-weight: 700;
}
.gse-expiry.normal[b-2ebmxissiq] {
background: #f1f3f5;
color: #212529;
}
.gse-expiry.warn[b-2ebmxissiq] {
background: #ffb84d;
color: #212529;
}
.gse-expiry.danger[b-2ebmxissiq] {
background: #ff4d4d;
color: white;
}
.gse-expiry.expired[b-2ebmxissiq] {
background: #cc0000;
color: white;
}
.gse-fault-card[b-2ebmxissiq] {
border: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0.35rem 0.9rem rgba(0,0,0,.08);
}
.gse-fault-card .card-body[b-2ebmxissiq] {
background: white;
}
.gse-fault-open[b-2ebmxissiq] {
border-left: 6px solid #dc3545;
}
.gse-fault-progress[b-2ebmxissiq] {
border-left: 6px solid #fd7e14;
}
.gse-fault-closed[b-2ebmxissiq] {
border-left: 6px solid #198754;
opacity: .92;
}
.gse-form-section[b-2ebmxissiq] {
background: rgba(255,255,255,.45);
border-radius: 14px;
padding: 1rem;
margin-bottom: 1rem;
}
.gse-sticky-actions[b-2ebmxissiq] {
position: sticky;
top: 0;
z-index: 10;
}
@@media (max-width: 767.98px) {
.gse-page[b-2ebmxissiq] {
padding: .75rem;
}
.gse-code[b-2ebmxissiq] {
font-size: 1.35rem;
}
.gse-hero-top[b-2ebmxissiq],
.gse-hero-bottom[b-2ebmxissiq] {
padding: .9rem;
}
.gse-sticky-actions[b-2ebmxissiq] {
position: static;
}
.gse-shell[b-2ebmxissiq] {
max-width: 1400px;
margin: 0 auto;
overflow-y: auto;
height: 69vh;
}
}
/* Mobile adjustments */
@media (max-width: 768px) {
/* page spacing */
.sheet-body .gse-page[b-2ebmxissiq] {
padding-top: 5px;
}
.gse-page[b-2ebmxissiq] {
padding-top: 45px;
}
.sheet-body .gse-page[b-2ebmxissiq] {
padding-top: 5px;
}
/* stack buttons vertically */
.gse-sticky-actions[b-2ebmxissiq] {
width: 100%;
flex-direction: column;
gap: 10px;
}
/* full width buttons */
.gse-sticky-actions button[b-2ebmxissiq] {
width: 100%;
font-size: 16px;
padding: 10px;
}
/* make info button full width too */
.gse-hero-top .btn-primary[b-2ebmxissiq] {
width: 100%;
margin-top: 8px;
}
/* improve header layout */
.gse-hero-top .d-flex[b-2ebmxissiq] {
flex-direction: column;
align-items: stretch !important;
}
}
[b-2ebmxissiq] .dxbl-dropdown,
[b-2ebmxissiq] .dxbs-listbox,
[b-2ebmxissiq] .dx-overlay-wrapper,
[b-2ebmxissiq] .dx-popup,
[b-2ebmxissiq] .dx-dropdowneditor-overlay {
z-index: 20000 !important;
}
.gse-fault-card[b-2ebmxissiq] {
border-radius: 16px;
box-shadow: 0 0.35rem 0.9rem rgba(0,0,0,.08);
display: flex;
flex-direction: column;
max-height: 400px; /* 👈 REQUIRED */
}
.gse-fault-card .card-body[b-2ebmxissiq] {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
}
.gse-page[b-2ebmxissiq] {
min-height: 100dvh;
padding: 1rem;
background: linear-gradient(45deg, cornflowerblue, #0d6efd00);
}
.gse-selector-desktop[b-2ebmxissiq] {
display: block;
}
.gse-round-picker-btn[b-2ebmxissiq] {
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.28);
color: white;
font-size: 1.1rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.gse-round-picker-btn--large[b-2ebmxissiq] {
width: 68px;
height: 68px;
font-size: 1.7rem;
}
.gse-round-picker-btn--pulse[b-2ebmxissiq] {
animation: gsePulse-b-2ebmxissiq 1.5s infinite;
}
@keyframes gsePulse-b-2ebmxissiq {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.08);
opacity: 0.88;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.gse-mobile-picker[b-2ebmxissiq] {
padding: 0.85rem 1rem 1rem;
background: white;
border-top: 1px solid rgba(0,0,0,.06);
}
.gse-mobile-picker-card[b-2ebmxissiq] {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 14px;
padding: 0.9rem;
box-shadow: 0 0.35rem 0.9rem rgba(0,0,0,.06);
}
.gse-mobile-picker-title[b-2ebmxissiq] {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
color: #6c757d;
margin-bottom: 0.5rem;
}
.gse-empty-mobile-select[b-2ebmxissiq] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 30vh;
padding: 2rem 1rem;
}
@media (max-width: 768px) {
.gse-selector-desktop[b-2ebmxissiq] {
display: none !important;
}
.gse-hero-top .gse-sticky-actions[b-2ebmxissiq] {
width: 100%;
justify-content: flex-end;
}
}
@media (min-width: 769px) {
.gse-round-picker-btn[b-2ebmxissiq],
.gse-mobile-picker[b-2ebmxissiq],
.gse-empty-mobile-select[b-2ebmxissiq] {
display: none !important;
}
}
/* MOBILE ACTION BAR */
.gse-mobile-actions[b-2ebmxissiq] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
/* BUTTON BASE */
.gse-action-btn[b-2ebmxissiq] {
height: 48px;
border-radius: 12px;
border: none;
background: rgba(255,255,255,0.15);
color: white;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: all 0.15s ease;
}
/* RED "NEW FAULT" */
.gse-action-btn.danger[b-2ebmxissiq] {
background: #dc3545;
color: white;
}
/* CLICK EFFECT */
.gse-action-btn:active[b-2ebmxissiq] {
transform: scale(0.95);
}
/* DESKTOP FALLBACK (optional) */
@media (min-width: 768px) {
.gse-mobile-actions[b-2ebmxissiq] {
display: flex;
width: auto;
}
.gse-action-btn[b-2ebmxissiq] {
padding: 0 8px;
height: 38px;
border-radius: 8px;
}
}
.gse-hero-top[b-2ebmxissiq] {
position: relative;
}
.gse-hero-actions-wrap[b-2ebmxissiq] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.gse-top-icons[b-2ebmxissiq] {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.gse-icon-btn[b-2ebmxissiq] {
width: 34px;
height: 34px;
border: 1px solid #d9d9d9;
background: transparent;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
color:white;
}
.gse-icon-btn:hover[b-2ebmxissiq] {
background: #f5f5f5;
}
.gse-new-fault-btn[b-2ebmxissiq] {
border: none;
background: #dc3545;
color: #fff;
border-radius: 10px;
padding: 10px 16px;
font-weight: 600;
min-height: 40px;
cursor: pointer;
transition: all 0.2s ease;
}
.gse-new-fault-btn:hover[b-2ebmxissiq] {
opacity: 0.92;
}
/* Desktop */
@media (min-width: 768px) {
.gse-hero-actions-wrap[b-2ebmxissiq] {
align-items: flex-end;
}
.gse-new-fault-btn[b-2ebmxissiq] {
width: auto;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.gse-hero-top .d-flex.justify-content-between[b-2ebmxissiq] {
flex-direction: column;
align-items: stretch !important;
}
.gse-hero-actions-wrap[b-2ebmxissiq] {
width: 100%;
align-items: stretch;
}
.gse-top-icons[b-2ebmxissiq] {
width: 100%;
justify-content: flex-end;
}
.gse-new-fault-btn[b-2ebmxissiq] {
width: 100%;
display: block;
text-align: center;
}
}
.gse-top-icons[b-2ebmxissiq] {
display: flex;
align-items: center;
justify-content: space-between; /* KEY LINE */
width: 100%;
}
.gse-icon-group[b-2ebmxissiq] {
display: flex;
gap: 8px;
}
/* /Components/Pages/HandoverPage.razor.rz.scp.css */
.handover-page[b-lmtrzfugni] {
padding: 16px;
color: #e8eefc;
}
.handover-header[b-lmtrzfugni] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
gap: 12px;
flex-wrap: wrap;
}
.handover-title[b-lmtrzfugni] {
margin: 0;
font-size: 1.45rem;
font-weight: 700;
}
.handover-subtitle[b-lmtrzfugni] {
color: #9fb0d0;
font-size: .95rem;
margin-top: 4px;
}
.handover-summary-grid[b-lmtrzfugni] {
display: grid;
grid-template-columns: repeat(4, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.handover-stat-card[b-lmtrzfugni],
.handover-filter-panel[b-lmtrzfugni],
.handover-grid-shell[b-lmtrzfugni],
.handover-popup[b-lmtrzfugni] {
background: rgba(16, 24, 40, 0.82);
border: 1px solid rgba(120, 149, 203, 0.18);
border-radius: 18px;
box-shadow: 0 10px 35px rgba(0,0,0,0.25);
backdrop-filter: blur(12px);
}
.handover-stat-card[b-lmtrzfugni] {
padding: 16px;
}
.handover-stat-card__label[b-lmtrzfugni] {
color: #95a8cd;
font-size: .85rem;
margin-bottom: 8px;
}
.handover-stat-card__value[b-lmtrzfugni] {
font-size: 1.7rem;
font-weight: 700;
}
.handover-filter-panel[b-lmtrzfugni] {
display: flex;
gap: 12px;
padding: 14px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.handover-filter[b-lmtrzfugni] {
min-width: 180px;
}
.handover-search[b-lmtrzfugni] {
flex: 1 1 280px;
}
.handover-grid-shell[b-lmtrzfugni] {
padding: 10px;
}
.handover-row-actions[b-lmtrzfugni] {
display: flex;
gap: 8px;
}
.handover-badge[b-lmtrzfugni],
.handover-priority[b-lmtrzfugni] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 110px;
padding: 6px 12px;
border-radius: 999px;
font-size: .8rem;
font-weight: 700;
border: 1px solid transparent;
}
.handover-badge--open[b-lmtrzfugni] {
background: rgba(239, 68, 68, 0.18);
color: #ff8c8c;
border-color: rgba(239, 68, 68, 0.35);
}
.handover-badge--progress[b-lmtrzfugni] {
background: rgba(59, 130, 246, 0.18);
color: #7dc1ff;
border-color: rgba(59, 130, 246, 0.35);
}
.handover-badge--monitor[b-lmtrzfugni] {
background: rgba(245, 158, 11, 0.18);
color: #f5c26b;
border-color: rgba(245, 158, 11, 0.35);
}
.handover-badge--awaiting[b-lmtrzfugni] {
background: rgba(168, 85, 247, 0.18);
color: #c69cff;
border-color: rgba(168, 85, 247, 0.35);
}
.handover-badge--deferred[b-lmtrzfugni] {
background: rgba(148, 163, 184, 0.18);
color: #c4d0e3;
border-color: rgba(148, 163, 184, 0.35);
}
.handover-badge--completed[b-lmtrzfugni] {
background: rgba(34, 197, 94, 0.18);
color: #86efac;
border-color: rgba(34, 197, 94, 0.35);
}
.handover-badge--cancelled[b-lmtrzfugni] {
background: rgba(107, 114, 128, 0.18);
color: #c7ccd6;
border-color: rgba(107, 114, 128, 0.35);
}
.handover-priority--low[b-lmtrzfugni] {
background: rgba(34, 197, 94, 0.16);
color: #86efac;
}
.handover-priority--medium[b-lmtrzfugni] {
background: rgba(245, 158, 11, 0.16);
color: #f8cc7d;
}
.handover-priority--high[b-lmtrzfugni] {
background: rgba(239, 68, 68, 0.16);
color: #ff9c9c;
}
.handover-priority--aog[b-lmtrzfugni] {
background: rgba(220, 38, 38, 0.22);
color: #fff;
}
.handover-popup[b-lmtrzfugni] {
padding: 18px;
}
.handover-popup__header[b-lmtrzfugni],
.handover-popup__footer[b-lmtrzfugni] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.handover-popup__title[b-lmtrzfugni] {
font-size: 1.15rem;
font-weight: 700;
}
.handover-popup__subtitle[b-lmtrzfugni] {
color: #8fa3c7;
margin-top: 4px;
}
.handover-popup__content[b-lmtrzfugni] {
margin-top: 16px;
margin-bottom: 16px;
}
.handover-popup__grid[b-lmtrzfugni] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.handover-detail-box[b-lmtrzfugni] {
display: flex;
flex-direction: column;
gap: 8px;
}
.handover-detail-box--full[b-lmtrzfugni] {
grid-column: span 2;
}
.handover-detail-box__label[b-lmtrzfugni] {
color: #9eb0d2;
font-size: .86rem;
}
.handover-popup__close[b-lmtrzfugni] {
border: none;
background: transparent;
color: #dce7ff;
font-size: 1.1rem;
cursor: pointer;
}
.handover-btn-primary[b-lmtrzfugni],
.handover-btn-secondary[b-lmtrzfugni],
.handover-btn-success[b-lmtrzfugni] {
border-radius: 12px !important;
}
@media (max-width: 900px) {
.handover-summary-grid[b-lmtrzfugni] {
grid-template-columns: repeat(2, 1fr);
}
.handover-popup__grid[b-lmtrzfugni] {
grid-template-columns: 1fr;
}
.handover-detail-box--full[b-lmtrzfugni] {
grid-column: span 1;
}
}
@media (max-width: 640px) {
.handover-summary-grid[b-lmtrzfugni] {
grid-template-columns: 1fr;
}
}
.handover-live-text[b-lmtrzfugni] {
font-size: 0.82rem;
color: #a9bbdb;
}
.handover-empty-note[b-lmtrzfugni] {
color: #8fa3c7;
font-size: 0.9rem;
padding: 8px 0;
}
.handover-readonly[b-lmtrzfugni] {
min-height: 38px;
display: flex;
align-items: center;
padding: 0 10px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(120, 149, 203, 0.16);
color: #dfe8fb;
}
.handover-detail-demands[b-lmtrzfugni] {
height: 300px;
}
[b-lmtrzfugni] .handover-demands-grid{
height:280px;
}
/* /Components/Pages/LiveMapNew.razor.rz.scp.css */
[b-9llo1ln05p] .leaf-theme-light .plane-gantt-toggle {
background: #f59e0b;
color: #0b1b10;
}
[b-9llo1ln05p] .leaf-theme-dark .plane-gantt-toggle {
background: #f59e0b;
color: #0b1b10;
}
html[b-9llo1ln05p], body[b-9llo1ln05p] {
height: 100%;
}
body[b-9llo1ln05p] {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-fleet-shell[b-9llo1ln05p] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* ===== Mini Stat Tiles ===== */
:root[b-9llo1ln05p] {
--tile-bg: #ffffff;
--tile-border: rgba(0,0,0,.08);
--tile-text: #0f172a;
--tile-muted: #6b7280;
--tile-shadow: 0 6px 18px rgba(0,0,0,.08);
--tile-radius: 14px;
}
@media (prefers-color-scheme: dark) {
:root[b-9llo1ln05p] {
--tile-bg: #ffffff;
--tile-border: rgba(0,0,0,.08);
--tile-text: #0f172a;
--tile-muted: #6b7280;
--tile-shadow: 0 6px 18px rgba(0,0,0,.08);
--tile-radius: 14px;
}
}
/* container rows */
.tiles-row[b-9llo1ln05p] {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
/* section header (Today / Yesterday) */
.tiles-header[b-9llo1ln05p] {
font-weight: 700;
font-size: .95rem;
color: var(--tile-text);
opacity: .9;
margin: 6px 0 8px 2px;
}
/* tile */
.tile[b-9llo1ln05p] {
flex: 1 1 100px; /* small, responsive */
max-width: 160px;
min-width: 100px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--tile-bg);
border: 1px solid var(--tile-border);
border-radius: var(--tile-radius);
box-shadow: var(--tile-shadow);
padding: 10px 12px;
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover[b-9llo1ln05p] {
transform: translateY(-1px);
}
/* label + value */
.tile-label[b-9llo1ln05p] {
font-size: .8rem;
color: var(--tile-muted);
font-weight: 600;
letter-spacing: .2px;
}
.tile-value[b-9llo1ln05p] {
font-size: 1.05rem;
font-weight: 800;
color: var(--tile-text);
}
/* accents (thin left bar + subtle bg tint) */
.tile[b-9llo1ln05p] {
position: relative;
overflow: hidden;
}
.tile[b-9llo1ln05p]::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: var(--tile-radius) 0 0 var(--tile-radius);
opacity: .9;
}
/* accent themes */
.tile.blue[b-9llo1ln05p]::before {
background: #2563eb;
}
.tile.green[b-9llo1ln05p]::before {
background: #059669;
}
.tile.amber[b-9llo1ln05p]::before {
background: #d97706;
}
.tile.purple[b-9llo1ln05p]::before {
background: #7c3aed;
}
.tile.blue[b-9llo1ln05p] {
background: linear-gradient(180deg, rgba(37,99,235,.08), transparent 70%);
}
.tile.green[b-9llo1ln05p] {
background: linear-gradient(180deg, rgba(5,150,105,.10), transparent 70%);
}
.tile.amber[b-9llo1ln05p] {
background: linear-gradient(180deg, rgba(217,119,6,.10), transparent 70%);
}
.tile.purple[b-9llo1ln05p] {
background: linear-gradient(180deg, rgba(124,58,237,.10), transparent 70%);
}
/* small helper to align units like % */
.tile-suffix[b-9llo1ln05p] {
font-size: .8rem;
margin-left: 2px;
opacity: .9;
}
/* ===== Single-line Notes (Zebra) ===== */
.mini-notes[b-9llo1ln05p] {
width: 100%;
background: var(--tile-bg);
border: 1px solid var(--tile-border);
border-radius: 12px;
box-shadow: var(--tile-shadow);
overflow: hidden;
}
.mini-notes__head[b-9llo1ln05p] {
font-weight: 700;
font-size: .9rem;
padding: 10px 12px;
background: linear-gradient(180deg, rgba(0,0,0,.05), transparent 80%);
border-bottom: 1px solid var(--tile-border);
}
/* Single-column rows with zebra + spacing */
.mini-notes__row[b-9llo1ln05p] {
display: block;
padding: 10px 12px;
line-height: 1.25rem;
color: var(--tile-text);
}
.mini-notes__row + .mini-notes__row[b-9llo1ln05p] {
border-top: 1px dashed var(--tile-border);
}
/* zebra striping */
.mini-notes__row:nth-child(odd)[b-9llo1ln05p] {
background: rgba(0,0,0,.03);
}
.mini-notes__row:nth-child(even)[b-9llo1ln05p] {
background: transparent;
}
/* tighter on very small screens */
/* default: all screens = block */
.leaf-theme-light .plane-gantt[b-9llo1ln05p] {
display: block;
}
/* override on small screens: hide */
@media (max-width: 800px), (max-height: 600px) {
.mini-notes__row[b-9llo1ln05p] {
padding: 9px 10px;
}
.leaf-theme-light .plane-gantt[b-9llo1ln05p] {
display: none !important;
}
.gantt-body[b-9llo1ln05p] {
position: relative;
overflow: auto;
max-height: 450px;
padding: 12px;
}
.bar[b-9llo1ln05p] {
position: absolute;
top: 3px;
height: 28px;
border-radius: 4px;
overflow: visible;
}
}
/* Optional tags (chips) you can place at the start or inline) */
.note-tag[b-9llo1ln05p] {
display: inline-block;
font-size: .72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
margin-right: 6px;
vertical-align: middle;
opacity: .95;
}
.note-tag.delay[b-9llo1ln05p] {
background: rgba(225,29,72,.12);
color: #e11d48;
}
/* rose */
.note-tag.urc[b-9llo1ln05p] {
background: rgba(37,99,235,.12);
color: #2563eb;
}
/* blue */
.note-tag.atc[b-9llo1ln05p] {
background: rgba(5,150,105,.12);
color: #059669;
}
/* green */
.note-tag.push[b-9llo1ln05p] {
background: rgba(217,119,6,.12);
color: #d97706;
}
/* amber */
.note-tag.ground[b-9llo1ln05p] {
background: rgba(124,58,237,.12);
color: #7c3aed;
}
/* purple */
/* Summary panel container */
.plane-summary[b-9llo1ln05p] {
position: relative;
width: 340px;
max-height: 80vh;
overflow: auto;
border-radius: 10px;
padding: 8px;
}
.sum-header[b-9llo1ln05p] {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
margin: 4px 0 8px;
}
.sum-list[b-9llo1ln05p] {
}
/* Summary rows (same as your map summary) */
.det-row.head[b-9llo1ln05p] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px;
border-radius: 8px;
border-left: 4px solid var(--accent);
margin-bottom: 8px;
box-shadow: 4px -4px 0px 2px rgb(232 238 243);
}
.det-reg[b-9llo1ln05p] {
font: 500 16px/1 system-ui;
letter-spacing: .4px;
}
/* Status pills */
.det-status[b-9llo1ln05p] {
font: 800 14px/1 system-ui;
padding: 4px 6px;
border-radius: 6px;
}
.det-status.live[b-9llo1ln05p] {
background: #fde047;
color: #3f2d00;
}
.det-status.landed[b-9llo1ln05p] {
background: aliceblue;
color: dodgerblue;
}
.det-status.maint[b-9llo1ln05p] {
background: #fee2e2;
color: #7f1d1d;
}
/* Right-side meta when LIVE */
.sum-meta[b-9llo1ln05p] {
background: #fde047;
color: blue;
font-weight: 600;
padding: 2px 6px;
border-radius: 6px;
letter-spacing: .4px;
}
/* SR pill */
.det-sr-pill[b-9llo1ln05p] {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font: 800 11px/1 system-ui;
padding: 2px 6px;
border-radius: 6px;
margin-left: 8px;
background: #93c5fd;
color: #0b1b10;
border: 1px solid rgba(0,0,0,.15);
}
.gantt-host + .plane-gantt-toggle[b-9llo1ln05p] {
position: static;
margin-top: 8px;
}
/* Make the row a positioning context */
.tiles-row[b-9llo1ln05p] {
position: relative;
}
.tiles-header[b-9llo1ln05p] {
text-align: center;
}
/* Gray overlay you can reuse anywhere */
.overlay-gray[b-9llo1ln05p]::after {
content: "";
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: rgba(128,128,128,0.25); /* soft gray veil */
border-radius: 16px; /* match your tile/card rounding if needed */
pointer-events: none; /* clicks still pass through */
z-index: 2;
}
/* Optional: subtly dim content under the veil */
.overlay-gray[b-9llo1ln05p] {
filter: grayscale(0.2) brightness(0.95);
}
/* Ensure tiles render above row background but under overlay */
.tile[b-9llo1ln05p] {
position: relative;
z-index: 1;
}
.collapsible[b-9llo1ln05p] {
position: relative;
}
.collapsible:not([open]) .collapsible-body[b-9llo1ln05p] {
display: none !important;
}
.collapsible[open] .collapsible-body[b-9llo1ln05p] {
display: block;
}
.overlay-host[b-9llo1ln05p] {
position: relative;
}
/* when ShowProgress is true, this pseudo-element draws the grey overlay */
.overlay-host.dimmed[b-9llo1ln05p]::after {
content: "";
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: rgba(0, 0, 0, 0.4); /* grey @ 40% */
z-index: 10;
pointer-events: none; /* set to 'auto' if you want to block clicks */
border-radius: inherit; /* keeps rounded corners if any */
border-radius: 8px;
}
/* The wrapper that lives inside the Fleet Map collapsible */
.fleet-map-panel[b-9llo1ln05p] {
height: 55vh; /* pick whatever you like: 50–60vh works well */
max-height: 60vh;
min-height: 40vh;
width: 100%;
}
/* Remove extra padding only for this collapsible so the map touches edges */
#fleet-map-collapsible .collapsible-body[b-9llo1ln05p] {
padding: 0;
}
/* Make FleetView's root fill the panel */
[b-9llo1ln05p] .fleet-map-root {
width: 100%;
height: 100% !important;
}
/* And make Leaflet use all of that height */
[b-9llo1ln05p] .fleet-map-root .leaflet-container {
width: 100%;
height: 100% !important;
pointer-events: auto !important;
touch-action: auto !important;
}
/* ===== FR24-style mobile shell ===== */
.mobile-fleet-shell[b-9llo1ln05p] {
position: fixed;
width: 100%;
padding-top: env(safe-area-inset-top);
background: #020617;
}
/* Map layer always full-screen */
.mobile-map-layer[b-9llo1ln05p] {
position: absolute;
inset: 0;
pointer-events: auto !important; /* <--- THIS FIXES THE MAP */
}
/* Dock buttons */
.bottom-tab[b-9llo1ln05p] {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 0;
border: none;
background: transparent;
color: black;
font-size: 1.2rem;
font-weight: 500;
border-radius: 9px;
}
.bottom-tab .tab-icon[b-9llo1ln05p] {
font-size: 1rem;
line-height: 1;
}
.bottom-tab.active[b-9llo1ln05p] {
color: blue;
background: rgba(59, 130, 246, .24);
}
/* Bottom sheet */
.mobile-sheet[b-9llo1ln05p] {
overflow-y: hidden !important;
pointer-events: auto;
position: relative;
background: #ffffff;
border-radius: 18px 18px 12px 12px;
box-shadow: 0 -10px 30px rgba(0, 0, 0, .7);
border: 1px solid rgba(148, 163, 184, .4);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(110%);
opacity: 0;
transition: transform .22s ease-out, opacity .18s ease-out, height .22s ease-out;
z-index: 20;
margin: 2px;
}
/* states */
.mobile-sheet.sheet-hidden[b-9llo1ln05p] {
transform: translateY(110%);
opacity: 0;
height: 0;
}
.mobile-sheet[b-9llo1ln05p] {
transform: translateY(0);
opacity: 1;
height: 80dvh;
margin: 2px;
}
.sheet-grabber[b-9llo1ln05p] {
width: 72px;
height: 6px;
border-radius: 999px;
background: rgba(148, 163, 184, .85);
margin: 8px auto 6px;
pointer-events: none; /* important: parent handles drag */
}
/* Header */
.sheet-drag-handle[b-9llo1ln05p] {
position: relative;
min-height: 56px; /* bigger drag zone */
padding-top: 6px;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.sheet-header[b-9llo1ln05p] {
position: relative;
display: flex;
align-items: center;
justify-content: center; /* center the title */
padding: 4px 12px 10px;
pointer-events: auto;
}
.sheet-title[b-9llo1ln05p][b-9llo1ln05p] {
font-size: 0.8rem;
font-weight: 600;
color: black;
text-transform: uppercase;
letter-spacing: .03em;
text-align: center;
position: absolute;
top: -25px;
left: 5px;
}
.sheet-close[b-9llo1ln05p] {
position: absolute;
top: -25px;
right: 10px;
width: 32px;
height: 32px;
border: none;
border-radius: 999px;
background: rgba(148,163,184,.2);
color: #0f172a;
font-size: 1rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
[b-9llo1ln05p] .gantt-body {
overflow-x: visible !important;
overflow-y: auto !important;
}
.sheet-empty-hint[b-9llo1ln05p] {
font-size: .8rem;
color: #9ca3af;
text-align: center;
padding: 18px 8px 12px;
}
/* header shouldn’t start scroll/drag gestures */
.mobile-sheet .sheet-header[b-9llo1ln05p] {
touch-action: none;
}
/* Backdrop that covers the whole viewport/map when sheet is open */
.sheet-backdrop[b-9llo1ln05p] {
position: fixed;
inset: 0;
background: transparent;
z-index: 15;
pointer-events: auto;
}
.sheet-open .mobile-map-layer[b-9llo1ln05p] {
pointer-events: none;
}
[b-9llo1ln05p] .dxbs-modal,
[b-9llo1ln05p] .dxbs-modal-backdrop {
z-index: 20000;
}
[b-9llo1ln05p] .dxbl-popup-cell {
z-index: 20000;
}
.clickable-row[b-9llo1ln05p] {
cursor: pointer;
}
.summary-details[b-9llo1ln05p] {
height: auto;
max-height: none !important;
overflow: visible !important;
background: white;
border-radius: 0 0 8px 8px;
border-left: 4px solid var(--accent);
border-top: 1px solid rgba(148,163,184,.4);
}
/* wrapper for each plane summary block */
.summary-plane-block[b-9llo1ln05p] {
position: relative;
margin-bottom: 10px;
}
/* container for expanded SR inside summary */
.summary-details[b-9llo1ln05p] {
padding: 8px 4px 4px;
}
/* when a row is expanded, pin it to the top of the sheet scroll area */
.plane-row-sticky[b-9llo1ln05p] {
position: sticky;
top: 0; /* row sticks just under the sheet header */
z-index: 5;
background: #f9fafb;
box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
/* Shell covers viewport but doesn't capture clicks except panel itself */
.sr-panel-shell[b-9llo1ln05p] {
top: 2rem !important;
position: fixed;
inset: 0;
z-index: 150000;
pointer-events: none; /* transparent except for panel */
}
/* Left panel */
.sr-panel[b-9llo1ln05p] {
position: absolute;
top: 2rem; /* margin from top */
bottom: 2rem; /* margin from bottom */
left: 0.75rem; /* small gap from left edge */
width: 520px; /* your requested width */
display: flex;
flex-direction: column;
overflow: hidden;
pointer-events: auto; /* panel is interactive */
/* Light theme look */
background: #ffffff;
color: #111827;
border-radius: 10px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(148, 163, 184, 0.35);
/* Slide-in animation */
transform: translate3d(-120%, 0, 0);
opacity: 0;
transition: transform 220ms cubic-bezier(.2, .8, .25, 1), opacity 200ms ease-out;
}
/* Shell state → slide panel in/out */
.sr-panel-shell--open .sr-panel[b-9llo1ln05p] {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.sr-panel-shell--closed .sr-panel[b-9llo1ln05p] {
transform: translate3d(-120%, 0, 0);
opacity: 0;
}
/* Header bar */
.sr-panel-bar[b-9llo1ln05p] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
/* Light gradient header */
background: linear-gradient(180deg, #f9fafb, #e5e7eb);
border-bottom: 1px solid rgba(148, 163, 184, 0.5);
}
/* Make the full SR page render smaller inside the side panel */
.sr-panel-content-compact[b-9llo1ln05p] {
transform-origin: top left;
width: 100%; /* compensate for scale so it fills nicely */
}
/* Avoid horizontal scrollbars from the scaling */
.sr-panel-body[b-9llo1ln05p] {
overflow-y: auto;
overflow-x: hidden;
}
.sr-panel-title-main[b-9llo1ln05p] {
font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
letter-spacing: .04em;
text-transform: uppercase;
color: #111827;
}
.sr-panel-title-sub[b-9llo1ln05p] {
display: inline-block;
margin-left: 0.4rem;
font-weight: 500;
font-size: 12px;
color: #4b5563;
}
/* Actions */
.sr-panel-actions[b-9llo1ln05p] {
display: flex;
align-items: center;
gap: 8px;
}
.sr-panel-external[b-9llo1ln05p] {
font: 600 11px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
color: #2563eb;
text-decoration: none;
}
.sr-panel-external:hover[b-9llo1ln05p] {
text-decoration: underline;
}
.sr-panel-close[b-9llo1ln05p] {
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
background: #f9fafb;
color: #111827;
cursor: pointer;
line-height: 1;
font-size: 14px;
padding: 0;
}
.sr-panel-close:hover[b-9llo1ln05p] {
background: #e5e7eb;
}
/* Body (scroll area with SRPopup content) */
.sr-panel-body[b-9llo1ln05p] {
background: white;
}
.sr-panel-body .circle-gauge-container[b-9llo1ln05p] {
width: 150px !important; /* compact width */
max-width: 100%;
margin: 0.5rem auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* The circular SVG/canvas itself */
.sr-panel-body .circular-progress[b-9llo1ln05p] {
width: 130px !important;
height: 130px !important;
}
/* Optional: slightly smaller label text under each gauge */
.sr-panel-body .circle-gauge-container .text[b-9llo1ln05p] {
font-size: 0.8rem !important;
text-align: center;
}
.summary-details[b-9llo1ln05p] {
border-radius: 0 0 8px 8px;
border-left: 4px solid var(--accent);
border-top: 1px solid rgba(148,163,184,.4);
background: white;
}
.summary-details-scroll[b-9llo1ln05p] {
height: auto;
max-height: none !important;
overflow: visible !important;
-webkit-overflow-scrolling: touch;
padding: 8px 6px 10px;
touch-action: pan-y;
}
.sheet-body[b-9llo1ln05p] {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
.plane-row-sticky[b-9llo1ln05p] {
position: sticky;
top: 0;
z-index: 20;
background: #fff;
}
.layout-hidden[b-9llo1ln05p] {
display: none !important;
}
.layout-show[b-9llo1ln05p] {
display: block;
}
.layout-desktop[b-9llo1ln05p], .layout-mobile[b-9llo1ln05p] {
width: 100%;
}
.sheet-drag-handle[b-9llo1ln05p] {
position: relative;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.sheet-grabber[b-9llo1ln05p] {
height: 18px;
width: 72px;
margin: 8px auto 2px;
}
.sheet-body[b-9llo1ln05p] {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
overflow-y: auto;
}
.dem-panel-shell[b-9llo1ln05p] {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
}
.dem-panel-shell[b-9llo1ln05p] {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
}
.dem-panel-shell--closed[b-9llo1ln05p] {
pointer-events: none;
}
.dem-panel[b-9llo1ln05p] {
position: absolute;
top: 76px;
right: 20px;
width: 320px !important;
height: min(75vh, 700px);
background: var(--bs-body-bg, #fff);
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
box-shadow: 0 18px 60px rgba(0,0,0,.35);
overflow: hidden;
display: none;
pointer-events: auto;
}
.dem-panel-shell--open .dem-panel[b-9llo1ln05p] {
display: block;
}
.dem-panel-bar[b-9llo1ln05p] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.dem-panel-body[b-9llo1ln05p] {
height: calc(100% - 52px);
overflow: hidden;
padding: 12px;
}
.dem-panel-close[b-9llo1ln05p] {
appearance: none;
border: 0;
background: transparent;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.dem-panel[b-9llo1ln05p] {
position: absolute;
top: 76px;
width: 360px;
height: 560px;
min-width: 360px;
max-width: 360px;
min-height: 260px;
max-width: min(92vw, 520px);
max-height: 85vh;
background: var(--bs-body-bg, #fff);
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
box-shadow: 0 18px 60px rgba(0,0,0,.35);
overflow: hidden;
display: none;
}
.dem-panel-shell--open .dem-panel[b-9llo1ln05p] {
display: block;
}
.dem-panel-bar[b-9llo1ln05p] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(0,0,0,.08);
cursor: move;
user-select: none;
}
.dem-panel-body[b-9llo1ln05p] {
height: calc(100% - 62px);
overflow: hidden;
padding: 12px;
}
.dem-panel-resize[b-9llo1ln05p] {
position: absolute;
right: 6px;
bottom: 6px;
width: 18px;
height: 18px;
cursor: nwse-resize;
border-radius: 6px;
}
.dem-panel-resize[b-9llo1ln05p]::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient( 135deg, transparent 0 40%, rgba(0,0,0,.25) 40% 55%, transparent 55% 70%, rgba(0,0,0,.25) 70% 85%, transparent 85% 100% );
border-radius: 6px;
}
/* =========================
iOS Dock Style Bottom Bar
========================= */
.ios-tab[b-9llo1ln05p] {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 2px;
border: none;
border-radius: 16px;
background: transparent;
color: #111827;
transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.ios-tab:active[b-9llo1ln05p] {
transform: scale(.96);
}
.ios-tab .tab-label[b-9llo1ln05p] {
font-size: .63rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.ios-tab.active[b-9llo1ln05p] {
background: rgba(37,99,235,.16);
color: #2563eb;
border-radius: 10px;
}
.ios-bottom-ui[b-9llo1ln05p] {
position: fixed;
left: 0;
right: 0;
bottom: calc(5px + env(safe-area-inset-bottom));
z-index: 9999;
pointer-events: none;
}
.ios-dock[b-9llo1ln05p] {
pointer-events: auto;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
border-radius: 26px;
background: rgba(255,255,255,0.9);
-webkit-backdrop-filter: blur(22px) saturate(1.35);
box-shadow: 0 10px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.45);
border: 1px solid rgba(255,255,255,.35);
}
.mobile-sheet[b-9llo1ln05p] {
position: fixed;
left: 0;
right: 0;
bottom: 86px;
z-index: 10000;
}
.ios-more-panel[b-9llo1ln05p] {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(100% + 8px);
display: grid;
bottom: calc(77px + env(safe-area-inset-bottom));
gap: 10px;
padding: 12px;
border-radius: 22px;
background: rgba(255,255,255,.84);
backdrop-filter: blur(22px) saturate(1.35);
-webkit-backdrop-filter: blur(22px) saturate(1.35);
box-shadow: 0 14px 34px rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.35);
animation: iosMoreIn-b-9llo1ln05p .18s ease-out;
pointer-events: auto;
}
@keyframes iosMoreIn-b-9llo1ln05p {
from {
opacity: 0;
transform: translateY(8px) scale(.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ios-more-item[b-9llo1ln05p] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: none;
border-radius: 18px;
background: rgba(255,255,255,.68);
color: #111827;
text-align: left;
font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.ios-more-item.active[b-9llo1ln05p] {
background: rgba(37,99,235,.14);
color: #2563eb;
border-radius: 0px;
}
.ios-more-text[b-9llo1ln05p] {
font-size: .9rem;
line-height: 1.1;
}
/* =========================
Pure CSS icons
========================= */
.ios-icon[b-9llo1ln05p] {
width: 22px;
height: 22px;
position: relative;
display: inline-block;
flex: 0 0 22px;
}
.ios-icon[b-9llo1ln05p]::before,
.ios-icon[b-9llo1ln05p]::after {
content: "";
position: absolute;
box-sizing: border-box;
}
/* Summary */
.icon-summary[b-9llo1ln05p]::before {
left: 3px;
top: 3px;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-radius: 5px;
}
.icon-summary[b-9llo1ln05p]::after {
left: 6px;
top: 7px;
width: 10px;
height: 2px;
background: currentColor;
border-radius: 2px;
box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}
/* Schedule */
.icon-schedule[b-9llo1ln05p]::before {
left: 3px;
top: 4px;
width: 16px;
height: 15px;
border: 2px solid currentColor;
border-radius: 5px;
}
.icon-schedule[b-9llo1ln05p]::after {
left: 6px;
top: 2px;
width: 10px;
height: 4px;
border-top: 2px solid currentColor;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
/* PDC */
.icon-pdc[b-9llo1ln05p]::before {
left: 4px;
top: 3px;
width: 14px;
height: 16px;
border: 2px solid currentColor;
border-radius: 4px;
}
.icon-pdc[b-9llo1ln05p]::after {
left: 7px;
top: 7px;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-left: 2px solid currentColor;
box-shadow: 4px 0 0 0 currentColor, 0 4px 0 0 currentColor, 4px 4px 0 0 currentColor;
}
/* Techlog */
.icon-techlog[b-9llo1ln05p]::before {
left: 4px;
top: 3px;
width: 14px;
height: 16px;
border: 2px solid currentColor;
border-radius: 4px 4px 3px 3px;
}
.icon-techlog[b-9llo1ln05p]::after {
left: 7px;
top: 7px;
width: 8px;
height: 2px;
background: currentColor;
border-radius: 2px;
box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}
/* Fuel */
.icon-fuel[b-9llo1ln05p]::before {
left: 5px;
top: 4px;
width: 10px;
height: 14px;
border: 2px solid currentColor;
border-radius: 3px;
}
.icon-fuel[b-9llo1ln05p]::after {
right: 3px;
top: 7px;
width: 5px;
height: 7px;
border: 2px solid currentColor;
border-left: none;
border-radius: 0 4px 4px 0;
}
/* Demands */
.icon-demands[b-9llo1ln05p]::before {
left: 4px;
top: 5px;
width: 14px;
height: 12px;
border: 2px solid currentColor;
border-radius: 3px;
}
.icon-demands[b-9llo1ln05p]::after {
left: 6px;
top: 3px;
width: 10px;
height: 4px;
border: 2px solid currentColor;
border-bottom: none;
border-radius: 3px 3px 0 0;
}
/* GroundOps */
.icon-groundops[b-9llo1ln05p]::before {
left: 4px;
bottom: 4px;
width: 3px;
height: 10px;
background: currentColor;
border-radius: 2px;
box-shadow: 5px -3px 0 currentColor, 10px -6px 0 currentColor;
}
.icon-groundops[b-9llo1ln05p]::after {
left: 3px;
bottom: 3px;
width: 14px;
height: 2px;
background: currentColor;
border-radius: 2px;
}
/* GSE */
.icon-gse[b-9llo1ln05p]::before {
left: 4px;
top: 9px;
width: 10px;
height: 6px;
border: 2px solid currentColor;
border-right: none;
border-radius: 2px 0 0 2px;
}
.icon-gse[b-9llo1ln05p]::after {
right: 2px;
top: 5px;
width: 6px;
height: 6px;
border: 2px solid currentColor;
border-radius: 50%;
box-shadow: -10px 8px 0 -2px currentColor;
}
/* More */
.icon-more[b-9llo1ln05p]::before {
left: 3px;
top: 9px;
width: 4px;
height: 4px;
background: currentColor;
border-radius: 50%;
box-shadow: 6px 0 0 currentColor, 12px 0 0 currentColor;
}
/* Small screens */
@media (max-width: 430px) {
.ios-dock[b-9llo1ln05p] {
gap: 4px;
padding: 10px 8px;
}
.plane-info-toggle[b-9llo1ln05p], .plane-notam-toggle[b-9llo1ln05p], .plane-schedule-toggle[b-9llo1ln05p], .leaf-theme-toggle[b-9llo1ln05p], .plane-settings-toggle[b-9llo1ln05p], .plane-gantt-toggle[b-9llo1ln05p], .plane-defers-toggle[b-9llo1ln05p], .plane-demands-toggle[b-9llo1ln05p] {
display:none;
}
.ios-dock-wrap[b-9llo1ln05p] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding-bottom: calc(8px + env(safe-area-inset-bottom));
padding-left: 10px;
padding-right: 10px;
z-index: 10001;
pointer-events: none;
}
.ios-tab .tab-label[b-9llo1ln05p] {
font-size: .58rem;
}
.ios-icon[b-9llo1ln05p] {
width: 20px;
height: 20px;
flex-basis: 20px;
}
}
.mobile-sheet[b-9llo1ln05p] {
position: fixed;
left: 0;
right: 0;
bottom: calc(74px + env(safe-area-inset-bottom));
z-index: 10000;
margin: 2px;
}
.mobile-sheet.sheet-hidden[b-9llo1ln05p] {
transform: translateY(calc(100% + 90px));
}
.sheet-body.no-scroll[b-9llo1ln05p] {
overflow: hidden !important;
height: 100%;
}
.mobile-pin-card[b-9llo1ln05p] {
background: #fff;
border-radius: 16px;
padding: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
margin: 8px;
}
.mobile-pin-card-empty[b-9llo1ln05p] {
padding: 16px;
margin: 8px;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.mobile-pin-toggle[b-9llo1ln05p] {
position: absolute;
top: 12px;
right: 60px;
z-index: 1200;
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.95);
box-shadow: 0 4px 14px rgba(0,0,0,.2);
display: flex;
align-items: center;
justify-content: center;
}
.ios-dock-wrap[b-9llo1ln05p] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 0 10px calc(8px + env(safe-area-inset-bottom)) 10px;
z-index: 10001;
pointer-events: none;
}
.ios-dock[b-9llo1ln05p] {
pointer-events: auto;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
padding: 8px;
border-radius: 26px;
background: transparent;
backdrop-filter: blur(22px) saturate(1.35);
-webkit-backdrop-filter: blur(22px) saturate(1.35);
box-shadow: 0 10px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.45);
border: 1px solid rgba(255,255,255,.35);
transition: all .2s ease;
align-items: stretch;
}
/* expanded = 2 rows */
.ios-dock-expanded[b-9llo1ln05p] {
grid-auto-rows: minmax(58px, auto);
}
/* tab button */
.ios-tab[b-9llo1ln05p] {
min-width: 0;
min-height: 58px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 2px;
border: none;
border-radius: 16px;
background: transparent;
color: #111827;
transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.ios-tab:active[b-9llo1ln05p] {
transform: scale(.96);
}
.ios-tab .tab-label[b-9llo1ln05p] {
font-size: .63rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.ios-tab.active[b-9llo1ln05p] {
background: rgba(37,99,235,.16);
color: #2563eb;
}
/* invisible fillers so last row keeps same layout */
.ios-tab-placeholder[b-9llo1ln05p] {
visibility: hidden;
pointer-events: none;
}
/* optional: slightly taller when expanded */
.ios-dock-expanded .ios-tab[b-9llo1ln05p] {
min-height: 62px;
}
/* small screens */
@media (max-width: 430px) {
.ios-dock[b-9llo1ln05p] {
gap: 4px;
padding: 7px 8px;
}
.ios-tab[b-9llo1ln05p] {
min-height: 54px;
padding: 7px 2px;
}
.ios-tab .tab-label[b-9llo1ln05p] {
font-size: .58rem;
}
}
.mobile-pin-sync-note[b-9llo1ln05p] {
margin-top: 12px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 193, 7, 0.35);
background: rgba(255, 193, 7, 0.10);
}
.mobile-pin-sync-note-title[b-9llo1ln05p] {
font-weight: 600;
margin-bottom: 4px;
}
.mobile-pin-sync-note-text[b-9llo1ln05p] {
font-size: 0.92rem;
line-height: 1.4;
opacity: 0.9;
}
.mobile-sheet[b-9llo1ln05p] {
will-change: transform;
}
.sheet-panel-host[b-9llo1ln05p] {
display: none;
height: 100%;
min-height: 0;
overflow: hidden;
}
.sheet-panel-host--active[b-9llo1ln05p] {
display: block;
}
.sheet-body[b-9llo1ln05p] {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-sheet.sheet-full[b-9llo1ln05p] {
height: 80dvh;
}
.mobile-sheet.sheet-peek[b-9llo1ln05p] {
height: 48dvh;
}
/* /Components/Pages/MobileEngineParameters.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
MobileEngineParams.razor.css
Two themes: .mep-dark (default) and .mep-light
All colours flow from CSS custom properties set on the root div.
═══════════════════════════════════════════════════════════════════ */
/* ── Dark theme tokens (system dark mode) ── */
@media (prefers-color-scheme: dark) {
.mep-root[b-7f8z84611t] {
--mep-bg: #0f172a;
--mep-bg2: #1e293b;
--mep-bg3: #334155;
--mep-bg-hover: #263347;
--mep-border: #334155;
--mep-border2: #1e293b;
--mep-text: #f1f5f9;
--mep-text-sub: #94a3b8;
--mep-text-muted: #64748b;
--mep-text-label: #475569;
--mep-accent: #4cc9f0;
--mep-accent2: #7c3aed;
--mep-sheet-bg: #1e293b;
--mep-tile-bg: #0f172a;
--mep-chart-bg: #1e293b;
--mep-shadow: rgba(0,0,0,0.5);
--mep-tab-border: #4cc9f0;
}
}
/* ── Light theme tokens (system light mode) ── */
@media (prefers-color-scheme: light) {
.mep-root[b-7f8z84611t] {
--mep-bg: #f1f5f9;
--mep-bg2: #ffffff;
--mep-bg3: #e2e8f0;
--mep-bg-hover: #dbeafe;
--mep-border: #cbd5e1;
--mep-border2: #e2e8f0;
--mep-text: #0f172a;
--mep-text-sub: #475569;
--mep-text-muted: #64748b;
--mep-text-label: #94a3b8;
--mep-accent: #0284c7;
--mep-accent2: #7c3aed;
--mep-sheet-bg: #ffffff;
--mep-tile-bg: #f8fafc;
--mep-chart-bg: #ffffff;
--mep-shadow: rgba(0,0,0,0.15);
--mep-tab-border: #0284c7;
}
}
/* ── Root ── */
.mep-root[b-7f8z84611t] {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background: var(--mep-bg);
color: var(--mep-text);
font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
-webkit-overflow-scrolling: touch;
transition: background 0.2s, color 0.2s;
}
/* ── Toolbar ── */
.mep-toolbar[b-7f8z84611t] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
background: var(--mep-bg);
border-bottom: 0.5px solid var(--mep-border2);
position: sticky;
top: 0;
z-index: 20;
min-height: 52px;
}
.mep-toolbar-meta[b-7f8z84611t] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.mep-toolbar-reg[b-7f8z84611t] {
font-size: 16px;
font-weight: 500;
color: var(--mep-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.3px;
}
.mep-toolbar-range[b-7f8z84611t] {
font-size: 11px;
color: var(--mep-text-muted);
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.mep-toolbar-range i[b-7f8z84611t] {
font-size: 11px;
}
.mep-toolbar-actions[b-7f8z84611t] {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.mep-filter-btn[b-7f8z84611t] {
display: flex;
align-items: center;
gap: 6px;
background: var(--mep-bg2);
border: 0.5px solid var(--mep-border);
border-radius: 10px;
padding: 7px 12px;
color: var(--mep-text-sub);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mep-filter-btn i[b-7f8z84611t] {
font-size: 16px;
}
.mep-filter-btn:active[b-7f8z84611t] {
background: var(--mep-bg3);
border-color: var(--mep-accent);
color: var(--mep-accent);
}
/* ── Phase tabs ── */
.mep-phase-tabs[b-7f8z84611t] {
display: flex;
background: var(--mep-bg);
border-bottom: 0.5px solid var(--mep-border2);
flex-shrink: 0;
}
.mep-phase-tab[b-7f8z84611t] {
flex: 1;
text-align: center;
padding: 10px 4px;
font-size: 12px;
color: var(--mep-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
}
.mep-phase-tab.active[b-7f8z84611t] {
color: var(--mep-accent);
border-bottom-color: var(--mep-tab-border);
font-weight: 500;
}
/* ── Stat row ── */
.mep-stat-row[b-7f8z84611t] {
display: flex;
gap: 8px;
padding: 10px 12px 4px;
flex-shrink: 0;
}
.mep-stat-box[b-7f8z84611t] {
flex: 1;
background: var(--mep-bg2);
border-radius: 12px;
padding: 10px 10px 8px;
border: 0.5px solid var(--mep-border);
min-width: 0;
transition: border-color 0.2s;
}
.mep-stat-box.danger[b-7f8z84611t] {
border-color: #ef4444;
}
.mep-stat-box.warning[b-7f8z84611t] {
border-color: #f8961e;
}
.mep-stat-box.info[b-7f8z84611t] {
border-color: #4361ee;
}
.mep-stat-label[b-7f8z84611t] {
color: var(--mep-text-muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.7px;
margin-bottom: 4px;
white-space: nowrap;
}
.mep-stat-val[b-7f8z84611t] {
color: var(--mep-text);
font-size: 17px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mep-stat-unit[b-7f8z84611t] {
color: var(--mep-text-muted);
font-size: 10px;
margin-left: 2px;
font-weight: 400;
}
.mep-stat-badge[b-7f8z84611t] {
font-size: 10px;
margin-top: 3px;
}
.mep-stat-box.danger .mep-stat-badge[b-7f8z84611t] {
color: #ef4444;
}
.mep-stat-box.warning .mep-stat-badge[b-7f8z84611t] {
color: #f8961e;
}
.mep-stat-box.info .mep-stat-badge[b-7f8z84611t] {
color: #4cc9f0;
}
.mep-stat-peak-engine[b-7f8z84611t] {
font-size: 10px;
color: var(--mep-text-muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.3px;
}
.mep-stat-box.danger .mep-stat-peak-engine[b-7f8z84611t],
.mep-stat-box.warning .mep-stat-peak-engine[b-7f8z84611t],
.mep-stat-box.info .mep-stat-peak-engine[b-7f8z84611t] {
opacity: 0.75;
}
/* ── Section label ── */
.mep-section-label[b-7f8z84611t] {
color: var(--mep-text-label);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 8px 12px 4px;
flex-shrink: 0;
}
/* ── Chart card ── */
.mep-chart-card[b-7f8z84611t] {
background: var(--mep-chart-bg);
margin: 8px 12px 12px;
border-radius: 14px;
overflow: hidden;
border: 0.5px solid var(--mep-border);
flex-shrink: 0;
}
.mep-chart-header[b-7f8z84611t] {
padding: 12px 14px 6px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.mep-chart-title[b-7f8z84611t] {
color: var(--mep-text);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
}
.mep-chart-sub[b-7f8z84611t] {
color: var(--mep-text-muted);
font-size: 11px;
margin-top: 2px;
}
.mep-chart-actions[b-7f8z84611t] {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.mep-action-btn[b-7f8z84611t] {
background: var(--mep-bg3);
border: none;
border-radius: 8px;
padding: 5px 10px;
color: var(--mep-text-sub);
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.mep-action-btn i[b-7f8z84611t] {
font-size: 13px;
}
.mep-action-btn:active[b-7f8z84611t] {
background: var(--mep-accent);
color: #0f172a;
}
.mep-chart-wrap[b-7f8z84611t] {
padding: 0 6px 10px;
}
.mep-no-data[b-7f8z84611t] {
padding: 24px 16px;
color: var(--mep-text-muted);
font-size: 13px;
line-height: 1.5;
}
/* ── Phase breakdown strip ── */
.mep-phase-strip[b-7f8z84611t] {
display: flex;
gap: 8px;
padding: 0 12px 14px;
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
}
.mep-phase-strip[b-7f8z84611t]::-webkit-scrollbar {
display: none;
}
.mep-phase-card[b-7f8z84611t] {
background: var(--mep-bg2);
border-radius: 12px;
padding: 10px 16px;
min-width: 80px;
text-align: center;
border: 0.5px solid var(--mep-border);
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
user-select: none;
-webkit-user-select: none;
}
.mep-phase-card.selected[b-7f8z84611t] {
border-color: var(--mep-text-sub);
background: var(--mep-bg-hover);
}
.mep-phase-name[b-7f8z84611t] {
color: var(--mep-text-muted);
font-size: 10px;
margin-bottom: 4px;
white-space: nowrap;
}
.mep-phase-val[b-7f8z84611t] {
color: var(--mep-text);
font-size: 16px;
font-weight: 500;
}
.mep-phase-unit[b-7f8z84611t] {
color: var(--mep-text-muted);
font-size: 9px;
margin-top: 2px;
}
/* ── Per-engine grid ── */
.mep-engine-grid[b-7f8z84611t] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 0 12px 20px;
}
.mep-engine-card[b-7f8z84611t] {
background: var(--mep-bg2);
border-radius: 12px;
padding: 10px 12px;
border: 0.5px solid var(--mep-border);
transition: border-color 0.2s;
}
.mep-engine-card.danger[b-7f8z84611t] {
border-color: #ef4444;
}
.mep-engine-card.warning[b-7f8z84611t] {
border-color: #f8961e;
}
.mep-engine-card.ecl[b-7f8z84611t] {
border-color: #4361ee;
}
.mep-engine-card.ok[b-7f8z84611t] {
border-color: var(--mep-border);
}
.mep-engine-header[b-7f8z84611t] {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 8px;
}
.mep-engine-dot[b-7f8z84611t] {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.mep-engine-label[b-7f8z84611t] {
color: var(--mep-text-sub);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mep-engine-stats[b-7f8z84611t] {
display: flex;
gap: 10px;
justify-content: space-between;
}
.mep-engine-val[b-7f8z84611t] {
color: var(--mep-text);
font-size: 13px;
font-weight: 500;
}
.mep-engine-val.danger[b-7f8z84611t] {
color: #ef4444;
}
.mep-engine-val.warning[b-7f8z84611t] {
color: #f8961e;
}
.mep-engine-val.ecl[b-7f8z84611t] {
color: #4cc9f0;
}
/* ── Loading / error ── */
.mep-loading[b-7f8z84611t] {
padding: 40px;
text-align: center;
color: var(--mep-text-muted);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.mep-error[b-7f8z84611t] {
padding: 16px 12px;
color: #ef4444;
font-size: 13px;
background: rgba(239,68,68,0.08);
margin: 12px;
border-radius: 10px;
border: 0.5px solid rgba(239,68,68,0.3);
}
@keyframes mep-spin-b-7f8z84611t {
to {
transform: rotate(360deg);
}
}
.mep-spin[b-7f8z84611t] {
display: inline-block;
animation: mep-spin-b-7f8z84611t 1s linear infinite;
}
/* ── Filter sheet ── */
.mep-sheet-backdrop[b-7f8z84611t] {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 100;
backdrop-filter: blur(2px);
}
.mep-sheet[b-7f8z84611t] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 101;
background: var(--mep-sheet-bg);
border-radius: 20px 20px 0 0;
padding: 12px 16px 40px;
border-top: 0.5px solid var(--mep-border);
box-shadow: 0 -8px 32px var(--mep-shadow);
max-height: 80vh;
overflow-y: auto;
}
.mep-sheet-handle[b-7f8z84611t] {
width: 36px;
height: 4px;
background: var(--mep-bg3);
border-radius: 2px;
margin: 0 auto 14px;
}
.mep-sheet-section-label[b-7f8z84611t] {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--mep-text-label);
padding: 14px 0 8px;
}
/* Reg grid */
.mep-reg-grid[b-7f8z84611t] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 4px;
}
.mep-reg-tile[b-7f8z84611t] {
background: var(--mep-tile-bg);
border: 0.5px solid var(--mep-border);
border-radius: 10px;
padding: 12px 6px;
text-align: center;
font-size: 13px;
font-weight: 500;
color: var(--mep-text-sub);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
letter-spacing: 0.5px;
user-select: none;
-webkit-user-select: none;
}
.mep-reg-tile.active[b-7f8z84611t] {
background: var(--mep-accent);
border-color: var(--mep-accent);
color: #0f172a;
font-weight: 700;
}
.mep-reg-tile:active[b-7f8z84611t] {
opacity: 0.75;
}
/* Date presets */
.mep-preset-row[b-7f8z84611t] {
display: flex;
gap: 8px;
margin-bottom: 4px;
}
.mep-preset-btn[b-7f8z84611t] {
flex: 1;
background: var(--mep-tile-bg);
border: 0.5px solid var(--mep-border);
border-radius: 10px;
padding: 11px 4px;
text-align: center;
font-size: 13px;
font-weight: 500;
color: var(--mep-text-sub);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
user-select: none;
-webkit-user-select: none;
}
.mep-preset-btn.active[b-7f8z84611t] {
background: var(--mep-accent2);
border-color: var(--mep-accent2);
color: white;
}
.mep-preset-btn:active[b-7f8z84611t] {
opacity: 0.75;
}
/* Custom date pickers */
.mep-custom-dates[b-7f8z84611t] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
margin-bottom: 4px;
}
.mep-custom-date-field[b-7f8z84611t] {
display: flex;
flex-direction: column;
}
/* Engine segmented */
.mep-engine-seg[b-7f8z84611t] {
display: flex;
background: var(--mep-tile-bg);
border: 0.5px solid var(--mep-border);
border-radius: 10px;
overflow: hidden;
margin-bottom: 4px;
}
.mep-engine-seg-btn[b-7f8z84611t] {
flex: 1;
padding: 11px 4px;
text-align: center;
font-size: 12px;
font-weight: 500;
color: var(--mep-text-muted);
cursor: pointer;
border-right: 0.5px solid var(--mep-border);
transition: background 0.15s, color 0.15s;
user-select: none;
-webkit-user-select: none;
}
.mep-engine-seg-btn:last-child[b-7f8z84611t] {
border-right: none;
}
.mep-engine-seg-btn.active[b-7f8z84611t] {
background: var(--mep-accent2);
color: white;
}
/* Toggle row */
.mep-toggle-row[b-7f8z84611t] {
display: flex;
align-items: center;
gap: 10px;
color: var(--mep-text-sub);
font-size: 13px;
cursor: pointer;
padding: 10px 12px;
background: var(--mep-tile-bg);
border-radius: 10px;
border: 0.5px solid var(--mep-border);
}
.mep-toggle-row input[type="checkbox"][b-7f8z84611t] {
width: 18px;
height: 18px;
accent-color: var(--mep-accent2);
cursor: pointer;
flex-shrink: 0;
}
/* Apply button */
.mep-apply-btn[b-7f8z84611t] {
width: 100%;
background: var(--mep-accent2);
color: white;
border: none;
border-radius: 14px;
padding: 15px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
margin-top: 10px;
transition: opacity 0.15s;
letter-spacing: 0.2px;
}
.mep-apply-btn:active[b-7f8z84611t] {
opacity: 0.8;
}
/* Generic icon button */
.mep-icon-btn[b-7f8z84611t] {
background: none;
border: none;
color: var(--mep-text-sub);
font-size: 20px;
cursor: pointer;
padding: 4px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-height: 36px;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
}
.mep-icon-btn:active[b-7f8z84611t] {
background: var(--mep-bg3);
color: var(--mep-text);
}
/* ── Parameter pills ── */
.mep-param-row[b-7f8z84611t] {
display: flex;
gap: 8px;
padding: 10px 12px 8px;
overflow-x: auto;
scrollbar-width: none;
background: var(--mep-bg);
flex-shrink: 0;
}
.mep-param-row[b-7f8z84611t]::-webkit-scrollbar {
display: none;
}
.mep-param-pill[b-7f8z84611t] {
background: var(--mep-bg2);
color: var(--mep-text-sub);
font-size: 11px;
padding: 7px 14px;
border-radius: 20px;
white-space: nowrap;
cursor: pointer;
border: 0.5px solid var(--mep-border);
transition: background 0.15s, color 0.15s, border-color 0.15s;
user-select: none;
-webkit-user-select: none;
flex-shrink: 0;
}
.mep-param-pill.active[b-7f8z84611t] {
background: var(--mep-accent2);
color: #ede9fe;
border-color: var(--mep-accent2);
font-weight: 500;
}
/* ── Phase card alert colours ── */
.mep-phase-card.danger[b-7f8z84611t] {
border-color: #ef4444;
}
.mep-phase-card.warning[b-7f8z84611t] {
border-color: #f8961e;
}
.mep-phase-card.ecl[b-7f8z84611t] {
border-color: #4361ee;
}
.mep-phase-val.danger[b-7f8z84611t] {
color: #ef4444;
}
.mep-phase-val.warning[b-7f8z84611t] {
color: #f8961e;
}
.mep-phase-val.ecl[b-7f8z84611t] {
color: #4cc9f0;
}
/* ── Alert dots on param pills and reg tiles ── */
.mep-param-pill[b-7f8z84611t] {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
}
.mep-pill-dot[b-7f8z84611t] {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
/* Reg tile needs relative positioning for the dot */
.mep-reg-tile[b-7f8z84611t] {
position: relative;
}
.mep-reg-dot[b-7f8z84611t] {
width: 7px;
height: 7px;
border-radius: 50%;
position: absolute;
top: 6px;
right: 6px;
}
/* ═══════════════════════════════════════════════════════════
Alerts panel
═══════════════════════════════════════════════════════════ */
.mep-alerts-panel[b-7f8z84611t] {
margin: 6px 12px 2px;
border-radius: 14px;
overflow: hidden;
border: 0.5px solid var(--mep-border);
flex-shrink: 0;
}
.mep-alerts-header[b-7f8z84611t] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--mep-bg2);
border: none;
cursor: pointer;
gap: 8px;
transition: background 0.15s;
}
.mep-alerts-header:active[b-7f8z84611t] {
background: var(--mep-bg3);
}
.mep-alerts-header-left[b-7f8z84611t] {
display: flex;
align-items: center;
gap: 8px;
}
.mep-alerts-icon[b-7f8z84611t] {
font-size: 14px;
line-height: 1;
}
.mep-alerts-title[b-7f8z84611t] {
font-size: 13px;
font-weight: 600;
color: var(--mep-text);
letter-spacing: 0.2px;
}
.mep-alerts-count[b-7f8z84611t] {
background: #ef4444;
color: white;
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}
.mep-alerts-chevron[b-7f8z84611t] {
color: var(--mep-text-muted);
font-size: 16px;
transition: transform 0.2s;
display: flex;
align-items: center;
}
.mep-alerts-chevron.open[b-7f8z84611t] {
transform: rotate(180deg);
}
.mep-alerts-list[b-7f8z84611t] {
background: var(--mep-bg);
border-top: 0.5px solid var(--mep-border);
max-height: 260px;
overflow-y: auto;
overscroll-behavior: contain;
}
.mep-alert-row[b-7f8z84611t] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 0.5px solid var(--mep-border2);
cursor: pointer;
transition: background 0.1s;
}
.mep-alert-row:last-child[b-7f8z84611t] {
border-bottom: none;
}
.mep-alert-row:active[b-7f8z84611t] {
background: var(--mep-bg2);
}
.mep-alert-dot[b-7f8z84611t] {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.mep-alert-body[b-7f8z84611t] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mep-alert-line1[b-7f8z84611t] {
display: flex;
align-items: center;
gap: 8px;
}
.mep-alert-reg[b-7f8z84611t] {
font-size: 12px;
font-weight: 700;
color: var(--mep-text);
letter-spacing: 0.4px;
}
.mep-alert-param[b-7f8z84611t] {
font-size: 11px;
color: var(--mep-text-sub);
background: var(--mep-bg3);
padding: 1px 6px;
border-radius: 6px;
}
.mep-alert-line2[b-7f8z84611t] {
display: flex;
align-items: center;
gap: 8px;
}
.mep-alert-phase[b-7f8z84611t] {
font-size: 11px;
color: var(--mep-text-muted);
}
.mep-alert-val[b-7f8z84611t] {
font-size: 12px;
font-weight: 600;
}
.mep-alert-arrow[b-7f8z84611t] {
color: var(--mep-text-muted);
font-size: 14px;
flex-shrink: 0;
}
/* /Components/Pages/OpsPage.razor.rz.scp.css */
[b-6ig5bbyrmq] .welcome-gridlayout {
margin: auto;
width: auto;
height: auto;
}
[b-6ig5bbyrmq] .welcome-gridlayout .dxbl-gridlayout-root {
align-content: center;
justify-content: center;
}
[b-6ig5bbyrmq] .title {
text-align: center;
}
[b-6ig5bbyrmq] .last-updated-label {
font-size: 20px;
font-weight: 500;
color: green;
}
[b-6ig5bbyrmq] .water-card-text {
font-size: 25px !important;
font-weight: bold;
color: black;
}
[b-6ig5bbyrmq] .water-cards {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
justify-content: center; /* horizontal center */
align-items: center;
}
[b-6ig5bbyrmq] .water-card {
width: 29rem;
height: 31rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 4px 4px 6px 4px rgba(0, 0, 0, 0.1), 4px 2px 4px 4px rgba(0, 0, 250, 0.1);
transition: box-shadow 0.2s;
border-radius: 1rem;
color: var(--bs-link-color-rgb);
gap: 0.5rem;
text-decoration: none;
position: relative;
}
[b-6ig5bbyrmq] .water-card:hover {
box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
}
[b-6ig5bbyrmq] .water-card .water-card-img {
width: 6.5rem;
height: 6.5rem;
}
[b-6ig5bbyrmq] .water-card .water-card-text {
font-size: 20px;
font-weight: 600;
letter-spacing: 0em;
text-align: center;
text-decoration: unset;
}
[b-6ig5bbyrmq] .icon-fill {
fill: var(--bs-primary);
}
[b-6ig5bbyrmq] .water-card .water-card-back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bs-body-color);
opacity: 0.05;
border-radius: 1rem;
z-index: -2;
}
[b-6ig5bbyrmq] .flying-status .circle-gauge-container {
background: #e0e0e0 !important; /* gray for flying */
opacity: 0.2;
}
[b-6ig5bbyrmq] .maintenance-status .circle-gauge-container {
background: orange !important; /* orange for maintenance */
opacity: 0.2;
}
[b-6ig5bbyrmq] .live-status .circle-gauge-container {
background: honeydew !important; /* greenish for live */
}
[b-6ig5bbyrmq] .flying-status {
background: #e0e0e0 !important; /* gray for flying */
}
[b-6ig5bbyrmq] .maintenance-status {
background: orange !important; /* orange for maintenance */
}
[b-6ig5bbyrmq] .live-status {
background: honeydew !important; /* greenish for live */
}
[b-6ig5bbyrmq] .std1-status {
border: 2px solid #4caf50;
}
[b-6ig5bbyrmq] .std2-status {
border: 2px solid #2196f3;
}
[b-6ig5bbyrmq] .std3-status {
border: 2px solid #ffc107;
}
[b-6ig5bbyrmq] .std4-status {
border: 2px solid #f44336;
}
[b-6ig5bbyrmq] .status-label {
font-size: 20px;
font-weight: 600;
color: blue;
text-align: center;
}
/* /Components/Pages/PhoneCatalog.razor.rz.scp.css */
.ops-page[b-i3n34ufmmw] {
padding: 12px;
}
.ops-shell[b-i3n34ufmmw] {
max-width: 1400px;
margin: 0 auto;
}
.ops-card[b-i3n34ufmmw] {
border: 0;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
overflow: hidden;
}
.ops-card-header[b-i3n34ufmmw] {
background: linear-gradient(135deg, #1f2937, #111827);
color: #fff;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 1rem 1.25rem;
border-bottom: 0;
}
.ops-form-section[b-i3n34ufmmw] {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 16px;
padding: 1rem;
margin-bottom: 1rem;
}
.ops-section-toggle[b-i3n34ufmmw] {
width: 100%;
border: 0;
background: linear-gradient(135deg, #334155, #1e293b);
color: #fff;
border-radius: 14px;
padding: .95rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
}
.ops-section-toggle-title[b-i3n34ufmmw] {
text-align: left;
}
.ops-section-toggle-icon[b-i3n34ufmmw] {
font-size: 1.35rem;
line-height: 1;
}
.ops-section-content[b-i3n34ufmmw] {
padding-top: 1rem;
}
.ops-field[b-i3n34ufmmw] {
display: flex;
flex-direction: column;
gap: .35rem;
}
.ops-label[b-i3n34ufmmw] {
font-size: .9rem;
font-weight: 600;
color: #475569;
}
.phone-catalog-summary[b-i3n34ufmmw] {
height: 100%;
min-height: 58px;
border: 1px solid #e5e7eb;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: space-around;
background: #f8fafc;
font-weight: 600;
}
.phone-section-toggle[b-i3n34ufmmw] {
width: 100%;
border: 0;
background: transparent;
color: #fff;
display: flex;
align-items: center;
gap: .75rem;
text-align: left;
padding: 0;
}
.phone-section-title[b-i3n34ufmmw] {
font-size: 1rem;
font-weight: 700;
}
.phone-section-badge[b-i3n34ufmmw] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 .65rem;
border-radius: 999px;
background: rgba(255,255,255,.15);
font-size: .85rem;
}
.phone-section-icon[b-i3n34ufmmw] {
margin-left: auto;
font-size: 1.4rem;
line-height: 1;
}
.phone-section-description[b-i3n34ufmmw] {
background: #f8fafc;
border-left: 4px solid #cbd5e1;
padding: .85rem 1rem;
border-radius: 12px;
color: #475569;
}
.phone-department-count[b-i3n34ufmmw] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 .55rem;
border-radius: 999px;
background: rgba(255,255,255,.16);
color: #fff;
font-size: .8rem;
font-weight: 700;
}
.phone-card[b-i3n34ufmmw] {
height: 100%;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 1rem;
box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.phone-card-top[b-i3n34ufmmw] {
display: flex;
justify-content: space-between;
align-items: start;
gap: .75rem;
margin-bottom: .85rem;
}
.phone-card-name[b-i3n34ufmmw] {
font-size: 1.2rem;
font-weight: 700;
color: #0f172a;
}
.phone-card-ext[b-i3n34ufmmw] {
white-space: nowrap;
background: #eef2ff;
color: #334155;
padding: .25rem .6rem;
border-radius: 999px;
font-size: 1.4rem;
font-weight: 700;
}
.phone-card-body[b-i3n34ufmmw] {
display: flex;
flex-direction: column;
gap: .45rem;
}
.phone-line[b-i3n34ufmmw] {
display: flex;
flex-direction: column;
gap: .15rem;
}
.phone-line-label[b-i3n34ufmmw] {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
color: #64748b;
font-weight: 700;
}
.phone-line-value[b-i3n34ufmmw] {
color: #0f172a;
word-break: break-word;
}
.phone-link[b-i3n34ufmmw] {
color: #0d6efd;
text-decoration: none;
font-weight: 600;
}
.phone-link:hover[b-i3n34ufmmw] {
text-decoration: underline;
}
.phone-notes[b-i3n34ufmmw] {
background: #f8fafc;
border-radius: 10px;
padding: .65rem .8rem;
color: #475569;
font-size: .92rem;
}
@media (max-width: 768px) {
.ops-page[b-i3n34ufmmw] {
padding: 8px;
}
.ops-card-header[b-i3n34ufmmw] {
padding: .9rem 1rem;
}
.ops-form-section[b-i3n34ufmmw] {
padding: .85rem;
}
.phone-card[b-i3n34ufmmw] {
padding: .85rem;
}
}
/* /Components/Pages/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-3kf3rkc24g],
.components-reconnect-repeated-attempt-visible[b-3kf3rkc24g],
.components-reconnect-failed-visible[b-3kf3rkc24g],
.components-pause-visible[b-3kf3rkc24g],
.components-resume-failed-visible[b-3kf3rkc24g],
.components-rejoining-animation[b-3kf3rkc24g] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-3kf3rkc24g],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-3kf3rkc24g],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-3kf3rkc24g],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-3kf3rkc24g],
#components-reconnect-modal.components-reconnect-retrying[b-3kf3rkc24g],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-3kf3rkc24g],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-3kf3rkc24g],
#components-reconnect-modal.components-reconnect-failed[b-3kf3rkc24g],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-3kf3rkc24g] {
display: block;
}
#components-reconnect-modal[b-3kf3rkc24g] {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity-b-3kf3rkc24g 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-3kf3rkc24g 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-3kf3rkc24g 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-3kf3rkc24g]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-3kf3rkc24g 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-3kf3rkc24g {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-3kf3rkc24g {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-3kf3rkc24g {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-3kf3rkc24g] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-3kf3rkc24g] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-3kf3rkc24g] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-3kf3rkc24g] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-3kf3rkc24g] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-3kf3rkc24g] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-3kf3rkc24g] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-3kf3rkc24g 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-3kf3rkc24g] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-3kf3rkc24g {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}
/* /Components/Pages/Roster.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
ROSTER SHELL
═══════════════════════════════════════════════════ */
.roster-shell[b-uh032odtzr] {
height: 90dvh;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
padding: 12px;
background: linear-gradient(160deg, #f0f4ff 0%, #f8fafc 50%, #fafbfc 100%);
}
/* ── toolbar ── */
.roster-toolbar[b-uh032odtzr] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 16px;
border-radius: 20px;
background: rgba(255,255,255,.94);
border: 1px solid rgba(15,23,42,.07);
box-shadow: 0 4px 16px rgba(15,23,42,.06);
backdrop-filter: blur(8px);
}
.roster-toolbar__left[b-uh032odtzr],
.roster-toolbar__right[b-uh032odtzr] {
display: flex;
align-items: center;
gap: 8px;
}
.roster-nav-btn[b-uh032odtzr] {
width: 30px;
height: 30px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
font-size: 1.1rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 8px rgba(37,99,235,.28);
transition: filter .13s ease;
flex-shrink: 0;
}
.roster-nav-btn:hover[b-uh032odtzr] {
filter: brightness(1.1);
}
.roster-month-label[b-uh032odtzr] {
font-size: .88rem;
font-weight: 800;
color: #0f172a;
white-space: nowrap;
min-width: 80px;
text-align: center;
}
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
border-radius: 999px;
padding: 9px 18px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
font-weight: 700;
font-size: .88rem;
box-shadow: 0 6px 16px rgba(37,99,235,.28);
cursor: pointer;
transition: filter .15s ease[b-uh032odtzr], box-shadow .15s ease;[b-uh032odtzr]
}
.weekview-action-btn:hover[b-uh032odtzr] {
filter: brightness(1.07);
box-shadow: 0 8px 22px rgba(37,99,235,.34);
}
.weekview-action-btn__icon[b-uh032odtzr] {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,.2);
font-size: 1rem;
font-weight: 900;
}
/* ── main scroll area ── */
.roster-main[b-uh032odtzr] {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
border-radius: 20px;
}
/* ── PDC gantt panel ── */
.roster-gantt-panel[b-uh032odtzr] {
flex: 0 0 auto;
border-radius: 20px;
overflow: hidden;
background: rgba(255,255,255,.97);
border: 1px solid rgba(15,23,42,.07);
box-shadow: 0 6px 22px rgba(15,23,42,.08);
}
.roster-gantt-panel__header[b-uh032odtzr] {
padding: 10px 16px;
font-size: .82rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
color: #0f172a;
border-bottom: 1px solid rgba(15,23,42,.06);
background: rgba(248,250,252,.92);
}
.roster-gantt-panel__body[b-uh032odtzr] {
padding: 8px;
height: 440px;
}
/* ═══════════════════════════════════════════════════
WEEK VIEW TOP BAR
═══════════════════════════════════════════════════ */
.weekview-topbar[b-uh032odtzr] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 12px;
padding: 14px 18px;
border-radius: 20px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(148,163,184,.16);
box-shadow: 0 8px 24px rgba(15,23,42,.07);
}
.weekview-title[b-uh032odtzr] {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
}
.weekview-subtitle[b-uh032odtzr] {
font-size: .82rem;
color: #64748b;
margin-top: 2px;
}
/* ═══════════════════════════════════════════════════
AVAILABILITY / POPUP
═══════════════════════════════════════════════════ */
.weekview-popup-shell .dxbl-popup-content[b-uh032odtzr] {
border-radius: 24px !important;
overflow: hidden;
box-shadow: 0 24px 60px rgba(15,23,42,.22) !important;
}
.weekview-popup[b-uh032odtzr] {
background: linear-gradient(180deg, #fff, #f8fafc);
color: #0f172a;
}
.weekview-popup__header[b-uh032odtzr] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid rgba(148,163,184,.16);
}
.weekview-popup__title[b-uh032odtzr] {
font-size: 1.05rem;
font-weight: 800;
}
.weekview-popup__subtitle[b-uh032odtzr] {
margin-top: 4px;
font-size: .83rem;
color: #64748b;
}
.weekview-popup__close[b-uh032odtzr] {
width: 34px;
height: 34px;
border: none;
border-radius: 999px;
background: rgba(148,163,184,.14);
color: #334155;
font-weight: 800;
cursor: pointer;
transition: background .12s ease;
}
.weekview-popup__close:hover[b-uh032odtzr] {
background: rgba(148,163,184,.26);
}
.weekview-popup__body[b-uh032odtzr] {
padding: 18px 22px;
}
.weekview-popup__grid[b-uh032odtzr] {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 14px;
}
.weekview-field--full[b-uh032odtzr] {
grid-column: 1 / -1;
}
.weekview-field__label[b-uh032odtzr] {
display: block;
margin-bottom: 6px;
font-size: .78rem;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: .03em;
}
.weekview-popup__footer[b-uh032odtzr] {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 14px 22px 18px;
border-top: 1px solid rgba(148,163,184,.16);
}
.weekview-popup__btn[b-uh032odtzr] {
border: none;
border-radius: 14px;
padding: 10px 18px;
font-weight: 700;
cursor: pointer;
transition: filter .12s ease;
}
.weekview-popup__btn:hover[b-uh032odtzr] {
filter: brightness(.96);
}
.weekview-popup__btn--secondary[b-uh032odtzr] {
background: #e2e8f0;
color: #0f172a;
}
.weekview-popup__btn--primary[b-uh032odtzr] {
background: linear-gradient(135deg,#2563eb,#1d4ed8);
color: #fff;
box-shadow: 0 4px 12px rgba(37,99,235,.28);
}
/* ═══════════════════════════════════════════════════
AVAILABILITY BOTTOM SHEET
═══════════════════════════════════════════════════ */
.availability-sheet-backdrop[b-uh032odtzr] {
position: fixed;
inset: 0;
background: rgba(15,23,42,.35);
backdrop-filter: blur(3px);
z-index: 99998;
}
.availability-sheet[b-uh032odtzr] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: #fff;
border-radius: 22px 22px 0 0;
box-shadow: 0 -12px 36px rgba(0,0,0,.2);
max-height: 88vh;
display: flex;
flex-direction: column;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
animation: avail-sheet-in-b-uh032odtzr .22s ease;
}
@keyframes avail-sheet-in-b-uh032odtzr {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.availability-sheet__handle[b-uh032odtzr] {
width: 42px;
height: 5px;
border-radius: 999px;
background: #cbd5e1;
margin: 10px auto 8px;
}
.availability-sheet__header[b-uh032odtzr] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 0 18px 12px;
border-bottom: 1px solid rgba(148,163,184,.16);
}
.availability-sheet__title[b-uh032odtzr] {
font-size: 1rem;
font-weight: 800;
color: #0f172a;
}
.availability-sheet__subtitle[b-uh032odtzr] {
margin-top: 4px;
font-size: .83rem;
color: #64748b;
}
.availability-sheet__close[b-uh032odtzr] {
width: 34px;
height: 34px;
border: 0;
border-radius: 999px;
background: rgba(148,163,184,.14);
color: #334155;
font-weight: 800;
cursor: pointer;
}
.availability-sheet__body[b-uh032odtzr] {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 16px 18px;
}
.availability-sheet__footer[b-uh032odtzr] {
display: flex;
gap: 10px;
padding: 12px 18px 0;
border-top: 1px solid rgba(148,163,184,.16);
background: #fff;
}
.availability-sheet__cancel[b-uh032odtzr],
.availability-sheet__save[b-uh032odtzr] {
flex: 1 1 0;
min-height: 48px;
border: 0;
border-radius: 14px;
font-weight: 700;
cursor: pointer;
}
.availability-sheet__cancel[b-uh032odtzr] {
background: #e2e8f0;
color: #0f172a;
}
.availability-sheet__save[b-uh032odtzr] {
background: linear-gradient(135deg,#2563eb,#1d4ed8);
color: #fff;
box-shadow: 0 4px 14px rgba(37,99,235,.28);
}
.daycard-menu__divider[b-uh032odtzr] {
height: 1px;
margin: 5px 0;
background: rgba(148,163,184,.2);
}
/* ═══════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
.roster-shell[b-uh032odtzr] {
padding: 8px;
height: 96dvh;
}
.roster-toolbar[b-uh032odtzr] {
padding: 8px 12px;
}
.weekview-topbar[b-uh032odtzr] {
flex-direction: column;
align-items: stretch;
}
.weekview-popup__grid[b-uh032odtzr] {
grid-template-columns: 1fr;
}
.weekview-popup-shell .dx-overlay-content[b-uh032odtzr] {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
margin: 0 !important;
border-radius: 18px 18px 0 0 !important;
max-height: 85vh !important;
overflow: hidden !important;
}
.weekview-popup-shell .weekview-popup[b-uh032odtzr] {
max-height: 85vh;
display: flex;
flex-direction: column;
border-radius: 18px 18px 0 0;
}
.weekview-popup-shell .weekview-popup__body[b-uh032odtzr] {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
/* /Components/Pages/ScorecardPage.razor.rz.scp.css */
body[b-1lpb5pmdf5] {
background-color: white !important;
}
:host[b-1lpb5pmdf5] {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: visible !important;
}
.scorecard-container[b-1lpb5pmdf5] {
font-family: 'Segoe UI', sans-serif;
margin: 1rem;
overflow-y: visible !important;
}
.dxbl-chart-legend-text[b-1lpb5pmdf5] {
font-size: 20px !important;
color: white !important;
}
.header[b-1lpb5pmdf5] {
background-color: #f4f4f4;
font-weight: bold;
color: blue;
}
.expandable-container[b-1lpb5pmdf5] {
transform: scaleY(0);
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, opacity 1.3s ease;
opacity: 0.3;
}
.dxc-val-elements text[b-1lpb5pmdf5] {
fill: black !important; /* your desired color */
font-weight: bold !important;
}
.expandable-container.expanded[b-1lpb5pmdf5] {
transform: scaleY(1);
max-height: 1000dvh;
opacity: 1;
background-color: #333;
}
.status-item.cancelled[b-1lpb5pmdf5] {
background-color: #444; /* red */
}
.stat-card[b-1lpb5pmdf5] {
width: 200px;
height: 45%;
border-radius: 1rem;
background-color: #555;
color: #fff;
border-block: groove;
margin-bottom: 0.9rem;
margin-top: 0.3rem;
}
.stat-cardd[b-1lpb5pmdf5] {
width: 200px;
;
height: 45%;
border-radius: 1rem;
background-color: #555;
color: #fff;
border-block: groove;
margin-bottom: 0.9rem;
margin-top: 0.3rem;
border-color: orange;
}
.page-title[b-1lpb5pmdf5] {
text-align: center;
font-size: 2rem; /* 32px approx */
color: navy ;
margin: 1rem 0;
font-weight: bold;
}
.status-item.controlled[b-1lpb5pmdf5] {
background-color: #333; /* red */
}
.dxc-grids-group path[b-1lpb5pmdf5] {
opacity: 1 !important;
stroke: blue !important;
}
.status-item.uncontrolled[b-1lpb5pmdf5] {
}
.status-item[b-1lpb5pmdf5] {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
font-weight: bold;
padding: 5px;
margin-bottom: 2px;
border-radius: 4px;
}
.status-item.online[b-1lpb5pmdf5] {
background-color: #444; /* green */
}
.status-item.delayed[b-1lpb5pmdf5] {
background-color: rgba(77, 92, 117, 1); /* yellow */
}
.expanded-content[b-1lpb5pmdf5] {
padding: 1.5rem 2rem;
background-color: #333;
border-left: 2px solid #007bff;
font-size: 0.9rem;
color: white !important;
}
.scorecard-row[b-1lpb5pmdf5] {
display: grid;
grid-template-columns: minmax(250px, 1fr) /* Measure */
minmax(120px, 0.5fr) /* Period */
minmax(100px, 0.5fr) /* Short */
minmax(100px, 0.5fr) /* Target */
minmax(100px, 0.5fr) /* Stretch */
minmax(80px, 0.5fr) /* Actual */
minmax(80px, 0.5fr) /* Achieved */
minmax(200px, 1fr) /* Target Step */
minmax(300px, 1fr) /* Last 3 Months */
minmax(80px, 0.5fr); /* YTD */
border-bottom: 1px solid #ddd;
padding: 0.4rem 0;
}
.cell.measure[b-1lpb5pmdf5] {
width: 50ch !important;
overflow: hidden;
}
.cell.period[b-1lpb5pmdf5] {
width: 10ch !important;
overflow: hidden;
}
.cell.fixed-width[b-1lpb5pmdf5] {
width: 10ch !important;
overflow: hidden;
white-space: nowrap;
}
.cell[b-1lpb5pmdf5] {
font-weight: 600;
padding: 0.4rem;
text-align: center;
border-right: 2px solid #eee;
font-size: 1rem;
}
.cellspark[b-1lpb5pmdf5] {
padding: 0.1px;
border-right: 2px solid #eee;
font-size: 0.1rem;
}
.cell3[b-1lpb5pmdf5] {
padding: 0.2rem;
font-weight: 600;
width: 20ch !important;
text-align: center;
border-right: 1px solid #eee;
font-size: 1rem;
transform: scaleY(1.2);
}
.cell.two-rows[b-1lpb5pmdf5] {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 60px; /* adjust for your row height */
}
.cell.two-rows .top-text[b-1lpb5pmdf5] {
text-align: center;
font-weight: bold;
}
/* Bottom months row with space distribution */
.cell.two-rows .bottom-text[b-1lpb5pmdf5] {
display: flex;
justify-content: space-between;
font-size: 20px;
text-transform: uppercase;
color:brown;
}
/* Optional styling for alignment clarity */
.cell.two-rows .month.left[b-1lpb5pmdf5] {
text-align: left;
flex: 1;
}
.cell.two-rows .month.center[b-1lpb5pmdf5] {
text-align: center;
flex: 1;
}
.cell.two-rows .month.right[b-1lpb5pmdf5] {
text-align: right;
flex: 1;
}
.perspective-group[b-1lpb5pmdf5] {
border: groove 2px #aaa;
margin: 0.5rem 0;
border-radius: 6px;
padding: 0.5rem;
background: white;
}
.magenta-text[b-1lpb5pmdf5] {
color: magenta;
font-weight: bold; /* optional */
}
.perspective-header[b-1lpb5pmdf5] {
font-weight: bold;
font-size: 1.2rem;
padding: 0.3rem 0.6rem;
background-color: #efefef;
margin-bottom: 0.4rem;
border-bottom: 1px solid #ccc;
color: brown;
text-align: center;
}
.achieved[b-1lpb5pmdf5] {
font-weight: bold;
color: black;
border-radius: 4px;
}
.color-scale-boxes[b-1lpb5pmdf5] {
display: flex;
gap: 0px;
margin-top: 0;
align-items: stretch; /* Ensures child divs fill container height */
height: 100%; /* Or set a specific height like 30px */
align-items: center
}
.box[b-1lpb5pmdf5] {
flex: 1 1 auto; /* Optional: makes boxes grow/shrink */
height: 100%; /* Fill parent height */
width: 18px; /* Fixed width */
border: 0px solid #ccc;
box-sizing: border-box;
}
/* Color Shades */
.red[b-1lpb5pmdf5] {
background-color: #d9534f;
}
.yellow[b-1lpb5pmdf5] {
background-color: #f0ad4e;
}
.yellow-light1[b-1lpb5pmdf5] {
background-color: #FFFF8F;
}
.yellow-light2[b-1lpb5pmdf5] {
background-color: #FFFDD0;
}
.yellow-light3[b-1lpb5pmdf5] {
background-color: #fff4cc;
}
.white[b-1lpb5pmdf5] {
background-color: #ffffff;
}
.green-light3[b-1lpb5pmdf5] {
background-color: #d4edda;
}
.green-light2[b-1lpb5pmdf5] {
background-color: #a8e6a3;
}
.green-light1[b-1lpb5pmdf5] {
background-color: #81d180;
}
.green[b-1lpb5pmdf5] {
background-color: #5cb85c;
}
.color-box[b-1lpb5pmdf5] {
width: 28px;
height: 100%;
border-radius: 3px;
margin: auto;
}
.color-scale-boxes[b-1lpb5pmdf5] {
display: flex;
gap: 0.1px;
}
.box[b-1lpb5pmdf5] {
width: 18px;
height: 100%;
border: 1px solid #ccc;
position: relative;
}
.box-header[b-1lpb5pmdf5] {
width: 26px;
height: 100%;
border: 1px solid #ccc;
position: relative;
}
/* X Marker */
.box.marked[b-1lpb5pmdf5]::after {
content: "✖";
color: black;
font-size: 16px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
font-weight: bolder;
}
.scorecard-row:hover[b-1lpb5pmdf5] {
background-color: #eef;
}
@media print {
.no-print[b-1lpb5pmdf5] {
display: none !important;
}
@page {
size: A3 landscape; /* or portrait */
margin: 0.5cm;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
body[b-1lpb5pmdf5] {
overflow-y: hidden !important;
overflow-x: hidden !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact; /* Ensure colors are preserved */
background-color: white !important;
}
/* Add high-contrast border for boxes */
.scorecard-container[b-1lpb5pmdf5] {
width: 98%;
zoom:74%; /* Optional: scale content to fit better */
}
.scorecard-row[b-1lpb5pmdf5] {
display: grid;
grid-template-columns: 380px /* Measure */
170px /* Period */
150px /* Short */
150px /* Target */
150px /* Stretch */
120px /* Actual */
100px /* Achieved */
280px /* Target Step */
420px /* Last 3 Months */
80px; /* YTD */
}
}
/* /Components/Pages/ServiceReportPage.Razor.rz.scp.css */
.custom-switch .form-check-input[b-1yfa6s153w] {
width: 2.6rem;
height: 1.2rem;
border-color: #28a745;
}
.flight-progress-container[b-1yfa6s153w] {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0.2rem;
margin-right: 0.8rem;
width: 100%;
padding: 0.5rem;
font-family: Arial, sans-serif;
border: solid 1px green;
background-color: #e6f0ff;
border-radius: 8px;
}
.custom-switch .form-check-input:checked[b-1yfa6s153w] {
border-color: #28a745;
border-block-width: 2px;
}
.custom-switch .form-check-label[b-1yfa6s153w] {
font-weight: 125;
padding-left: 15px;
}
.empty-line[b-1yfa6s153w] {
text-align: center;
color: blue;
font-size: small;
}
.mel-tree[b-1yfa6s153w] {
list-style: none;
padding-left: 1rem;
margin: 0;
}
.mel-tree li[b-1yfa6s153w] {
margin-bottom: 0.3rem;
}
tr:hover[b-1yfa6s153w] {
background-color: #f8f9fa;
}
.fade-slide[b-1yfa6s153w] {
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
}
.fade-slide-hidden[b-1yfa6s153w] {
max-height: 0;
opacity: 0;
}
.fade-slide-show[b-1yfa6s153w] {
max-height: 1000px; /* Arbitrary large value for full height */
opacity: 1;
}
.mel-entry[b-1yfa6s153w] {
border: 1px solid #ccc;
margin-bottom: 2rem;
font-family: Arial, sans-serif;
background-color: white;
border-radius: 4px;
overflow: hidden;
}
/* ECAM Alert Header Bar */
.ecam-alert-bar[b-1yfa6s153w] {
background-color: white;
border: 1px solid #000;
text-align: center;
font-weight: bold;
padding: 6px;
font-size: 1rem;
}
.ecam-alert-text[b-1yfa6s153w] {
color: #f44336;
text-transform: uppercase;
}
/* Ident & Applicable To Section */
.mel-meta[b-1yfa6s153w] {
background-color: #f0f0f0;
padding: 8px 12px;
font-size: 0.9rem;
color: #333;
border-bottom: 1px solid #ccc;
}
.mel-meta div[b-1yfa6s153w] {
margin-bottom: 4px;
}
/* MEL Table */
.mel-table[b-1yfa6s153w] {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.mel-table th[b-1yfa6s153w],
.mel-table td[b-1yfa6s153w] {
border: 1px solid #999;
padding: 8px;
text-align: left;
}
.mel-table th[b-1yfa6s153w] {
background-color: #eee;
font-weight: bold;
}
/* /Components/Pages/SRPopup.Razor.rz.scp.css */
.custom-switch .form-check-input[b-tex7ig59sp] {
width: 2.6rem;
height: 1.2rem;
border-color: #28a745;
}
.flight-progress-container[b-tex7ig59sp] {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0.2rem;
margin-right: 0.8rem;
width: 100%;
padding: 0.5rem;
font-family: Arial, sans-serif;
border: solid 1px green;
background-color: #e6f0ff;
border-radius: 8px;
}
.custom-switch .form-check-input:checked[b-tex7ig59sp] {
border-color: #28a745;
border-block-width: 2px;
}
.custom-switch .form-check-label[b-tex7ig59sp] {
font-weight: 125;
padding-left: 15px;
}
.empty-line[b-tex7ig59sp] {
text-align: center;
color: blue;
font-size: small;
}
.mel-tree[b-tex7ig59sp] {
list-style: none;
padding-left: 1rem;
margin: 0;
}
.mel-tree li[b-tex7ig59sp] {
margin-bottom: 0.3rem;
}
tr:hover[b-tex7ig59sp] {
background-color: #f8f9fa;
}
.fade-slide[b-tex7ig59sp] {
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
}
.fade-slide-hidden[b-tex7ig59sp] {
max-height: 0;
opacity: 0;
}
.fade-slide-show[b-tex7ig59sp] {
max-height: 1000px; /* Arbitrary large value for full height */
opacity: 1;
}
.mel-entry[b-tex7ig59sp] {
border: 1px solid #ccc;
margin-bottom: 2rem;
font-family: Arial, sans-serif;
background-color: white;
border-radius: 4px;
overflow: hidden;
}
/* ECAM Alert Header Bar */
.ecam-alert-bar[b-tex7ig59sp] {
background-color: white;
border: 1px solid #000;
text-align: center;
font-weight: bold;
padding: 6px;
font-size: 1rem;
}
.ecam-alert-text[b-tex7ig59sp] {
color: #f44336;
text-transform: uppercase;
}
/* Ident & Applicable To Section */
.mel-meta[b-tex7ig59sp] {
background-color: #f0f0f0;
padding: 8px 12px;
font-size: 0.9rem;
color: #333;
border-bottom: 1px solid #ccc;
}
.mel-meta div[b-tex7ig59sp] {
margin-bottom: 4px;
}
/* MEL Table */
.mel-table[b-tex7ig59sp] {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.mel-table th[b-tex7ig59sp],
.mel-table td[b-tex7ig59sp] {
border: 1px solid #999;
padding: 8px;
text-align: left;
}
.mel-table th[b-tex7ig59sp] {
background-color: #eee;
font-weight: bold;
}
.overlay-host[b-tex7ig59sp] {
position: relative;
}
/* when ShowProgress is true, this pseudo-element draws the grey overlay */
.overlay-host.dimmed[b-tex7ig59sp]::after {
content: "";
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: rgba(0, 0, 0, 0.4); /* grey @ 40% */
z-index: 10;
pointer-events: none; /* set to 'auto' if you want to block clicks */
border-radius: inherit; /* keeps rounded corners if any */
border-radius: 8px;
}
[b-tex7ig59sp] .dxbl-popup-cell {
z-index: 20000 !important;
}
[b-tex7ig59sp] .dxbs-modal,
[b-tex7ig59sp] .dxbs-modal-backdrop {
z-index: 20000;
}
[b-tex7ig59sp] .dxbl-popup-cell {
z-index: 20000;
}
.table table-striped .faults[b-tex7ig59sp] {
width: 300px !important;
}
.table table-striped-faults[b-tex7ig59sp] {
width: 300px !important;
}
tbody[b-tex7ig59sp], td[b-tex7ig59sp], tfoot[b-tex7ig59sp], th[b-tex7ig59sp], thead[b-tex7ig59sp], tr[b-tex7ig59sp] {
border-color: inherit;
border-style: solid;
border-width: 0;
white-space: normal;
word-break: break-word;
}
/* make each SR slide an overlay host */
.sr-carousel-item.overlay-host[b-tex7ig59sp] {
position: relative;
}
/* grey veil for non-current SRs */
.sr-carousel-item.overlay-host.dimmed[b-tex7ig59sp]::after {
content: "";
position: absolute;
inset: 0;
background: rgba(128, 128, 128, 0.35);
pointer-events: none; /* carousel nav still works */
z-index: 1;
}
.sr-carousel-item[b-tex7ig59sp] {
position: relative;
height: 100%;
}
.sr-carousel-item[b-tex7ig59sp] {
height: 100%;
position: relative;
overflow: hidden;
}
/* Scroll area inside item */
.sr-carousel-scroll[b-tex7ig59sp] {
height: 100%;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
}
.sr-carousel-scroll[b-tex7ig59sp]::-webkit-scrollbar {
width: 6px;
}
.sr-carousel-scroll[b-tex7ig59sp]::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 3px;
}
.sr-overlay-badge[b-tex7ig59sp] {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
padding: 3px 10px;
border-radius: 999px;
font-size: 1rem;
background: rgba(0, 0, 0, 0.8);
color: #fff;
z-index: 2;
}
.sr-overlay-badge-current[b-tex7ig59sp] {
background-color: #d4edda;
color: #155724;
}
.sr-overlay-badge-pending[b-tex7ig59sp] {
background-color: #ffe8a1;
color: blue !important;
border: 1px solid #f5c16c;
animation: sr-amber-pulse-b-tex7ig59sp 1.2s ease-in-out infinite;
}
@keyframes sr-amber-pulse-b-tex7ig59sp {
0% {
transform: translateX(-50%) scale(1);
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
}
50% {
transform: translateX(-50%) scale(1.04);
box-shadow: 0 0 12px 4px rgba(255, 193, 7, 0.8);
}
100% {
transform: translateX(-50%) scale(1);
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.0);
}
}
/* Carousel item should NOT grow with content */
.sr-carousel-item-faults[b-tex7ig59sp] {
height: 450px; /* pick your preferred height */
position: relative;
overflow: hidden; /* prevent expansion */
padding: 5px 0;
}
/* Inner scroll container */
.sr-carousel-scroll[b-tex7ig59sp] {
overflow-y: auto;
height: 100%;
padding-right: 6px;
scrollbar-width: thin;
}
/* Optional – nicer scrollbar on Chrome */
.sr-carousel-scroll[b-tex7ig59sp]::-webkit-scrollbar {
width: 6px;
}
.sr-carousel-scroll[b-tex7ig59sp]::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 3px;
}
.section-divider-with-title[b-tex7ig59sp] {
margin: 0.75rem 0;
}
/* Base pill button look */
.section-divider-with-title .section-header[b-tex7ig59sp] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.35rem 0.75rem;
border-radius: 9px;
border-width: 1px;
border-style: solid;
width:100%;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
user-select: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
}
/* Expanded = blue */
.section-divider-with-title .section-header.expanded[b-tex7ig59sp] {
background: gray;
rgba(105, 105, 105, 0.90), /* dimgray */
rgba(50, 50, 50, 1) /* darker edge */
);
border-color: #0b5ed7;
color: #ffffff;
box-shadow: 0 0.15rem 0.35rem rgba(13, 110, 253, 0.35);
}
/* Collapsed = amber */
.section-divider-with-title .section-header.collapsed[b-tex7ig59sp] {
background-color: #ffc107; /* amber */
border-color: #e0a800;
color: #212529;
box-shadow: 0 0.1rem 0.25rem rgba(224, 168, 0, 0.35);
}
/* Hover & active */
.section-divider-with-title .section-header:hover[b-tex7ig59sp] {
transform: translateY(-1px);
box-shadow: 0 0.22rem 0.45rem rgba(0, 0, 0, 0.25);
}
.section-divider-with-title .section-header:active[b-tex7ig59sp] {
transform: translateY(0);
box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.25);
}
/* Chevron */
.section-divider-with-title .chevron[b-tex7ig59sp] {
font-size: 1.2rem;
margin-left: 0.5rem;
opacity: 0.9;
}
/* /Components/Pages/URO.razor.rz.scp.css */
/* =========================
URO PAGE LAYOUT
========================= */
.uro-shell[b-fpy0gbysae] {
display: flex;
flex-direction: column;
min-height: 100svh;
background: #fff;
}
.uro-topbar[b-fpy0gbysae] {
position: sticky;
top: 0;
z-index: 20;
background: #fff;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.uro-mobile-list[b-fpy0gbysae] {
padding: 10px;
height: 60vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* =========================
WARM PROGRESS
========================= */
.warm-progress[b-fpy0gbysae] {
position: relative;
height: 4px;
background: transparent;
z-index: 21;
overflow: hidden;
}
.warm-progress__bar[b-fpy0gbysae] {
height: 100%;
transition: width 0.2s ease;
background: linear-gradient(90deg, #4c6ef5, #22b8cf);
}
.warm-progress--indeterminate .warm-progress__bar[b-fpy0gbysae] {
width: 30%;
animation: warmBar-b-fpy0gbysae 1s linear infinite;
}
@keyframes warmBar-b-fpy0gbysae {
0% {
margin-left: -30%;
}
100% {
margin-left: 100%;
}
}
/* =========================
TOOLBAR
========================= */
.uro-toolbar[b-fpy0gbysae] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.uro-toolbar[b-fpy0gbysae]::-webkit-scrollbar {
display: none;
}
.uro-toolbar > *[b-fpy0gbysae] {
flex: 0 0 auto;
}
.uro-toolbar .dx-texteditor[b-fpy0gbysae] {
min-width: 180px;
flex: 1 1 auto;
}
/* =========================
SEARCH HIGHLIGHT
========================= */
mark.search-hit[b-fpy0gbysae] {
background: #ffeb3b;
color: inherit;
padding: 0 0.15em;
border-radius: 0.2em;
}
/* =========================
MOBILE CARD FLIP WRAPPER
========================= */
.uro-card-wrap[b-fpy0gbysae] {
margin-bottom: 12px;
perspective: 1400px;
-webkit-perspective: 1400px;
}
.uro-card-switch[b-fpy0gbysae] {
position: relative;
width: 100%;
min-height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 0.65s cubic-bezier(.2, .8, .2, 1);
will-change: transform;
}
.uro-card-switch.is-flipped[b-fpy0gbysae] {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
/* =========================
CARD FACE BASE
========================= */
.uro-card[b-fpy0gbysae] {
width: 100%;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,248,251,.94) 100%);
color: #111827;
border: 1px solid rgba(255,255,255,.78);
box-shadow: 0 18px 45px rgba(15,23,42,.10), 0 8px 20px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.uro-card-inner[b-fpy0gbysae] {
display: flex;
flex-direction: column;
min-height: 100%;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* front face */
.uro-card-front[b-fpy0gbysae] {
position: relative;
z-index: 2;
transform: rotateY(0deg) translateZ(1px);
-webkit-transform: rotateY(0deg) translateZ(1px);
}
/* back face */
.uro-card-back[b-fpy0gbysae] {
position: absolute;
inset: 0;
z-index: 1;
transform: rotateY(180deg) translateZ(1px);
-webkit-transform: rotateY(180deg) translateZ(1px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* interaction safety */
.uro-card-switch:not(.is-flipped) .uro-card-back[b-fpy0gbysae] {
pointer-events: none;
}
.uro-card-switch.is-flipped .uro-card-front[b-fpy0gbysae] {
pointer-events: none;
}
.uro-card-switch.is-flipped .uro-card-back[b-fpy0gbysae] {
pointer-events: auto;
}
/* =========================
THEMES
========================= */
.wallet-theme-open[b-fpy0gbysae] {
--wallet-accent: #e6528f;
--wallet-accent-soft: rgba(230,82,143,.14);
--wallet-accent-border: rgba(230,82,143,.22);
}
.wallet-theme-deferred[b-fpy0gbysae] {
--wallet-accent: #3b82f6;
--wallet-accent-soft: rgba(59,130,246,.14);
--wallet-accent-border: rgba(59,130,246,.22);
}
.wallet-theme-closed[b-fpy0gbysae] {
--wallet-accent: #16a34a;
--wallet-accent-soft: rgba(22,163,74,.14);
--wallet-accent-border: rgba(22,163,74,.22);
}
/* =========================
CARD TOPBAR
========================= */
.uro-card-topbar[b-fpy0gbysae] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 16px 18px 12px;
background: linear-gradient(135deg, var(--wallet-accent-soft) 0%, rgba(255,255,255,.28) 100%);
border-bottom: 1px solid var(--wallet-accent-border);
}
.uro-card-topbar-main[b-fpy0gbysae] {
display: flex;
align-items: center;
min-width: 0;
flex: 1 1 auto;
cursor: pointer;
}
.uro-card-topbar-actions[b-fpy0gbysae] {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.uro-card-brand[b-fpy0gbysae] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.uro-card-brand-dot[b-fpy0gbysae] {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--wallet-accent);
box-shadow: 0 0 0 4px var(--wallet-accent-soft);
flex: 0 0 auto;
}
.uro-card-brand-text[b-fpy0gbysae] {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #475569;
overflow-wrap: anywhere;
word-break: break-word;
}
/* =========================
BADGES / ACTION BUTTONS
========================= */
.uro-card-badge[b-fpy0gbysae],
.uro-card-parts[b-fpy0gbysae] {
padding: 7px 12px;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.02em;
flex: 0 0 auto;
border: 1px solid var(--wallet-accent-border);
}
.uro-card-tag[b-fpy0gbysae] {
padding: 7px 12px;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.02em;
background: #e6528f;
flex: 0 0 auto;
border: 1px solid var(--wallet-accent-border);
}
.uro-card-badge[b-fpy0gbysae] {
background: var(--wallet-accent-soft);
color: var(--wallet-accent);
}
.uro-card-parts[b-fpy0gbysae] {
background: cornflowerblue;
color: white;
cursor: pointer;
}
.uro-card-icon-btn[b-fpy0gbysae] {
appearance: none;
border: 1px solid var(--wallet-accent-border);
background: rgba(255,255,255,.72);
color: var(--wallet-accent);
width: 36px;
height: 36px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1rem;
font-weight: 800;
}
.uro-card-parts:hover[b-fpy0gbysae],
.uro-card-icon-btn:hover[b-fpy0gbysae] {
filter: brightness(0.98);
}
.uro-card-parts:active[b-fpy0gbysae],
.uro-card-icon-btn:active[b-fpy0gbysae] {
transform: scale(0.98);
}
/* =========================
DEFERRED BADGE ANIMATION
========================= */
.uro-card-badge-deferred-flash[b-fpy0gbysae] {
animation: deferredBadgeFlash-b-fpy0gbysae 1.4s ease-in-out infinite;
}
@keyframes deferredBadgeFlash-b-fpy0gbysae {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(59,130,246,.35);
background: rgba(59,130,246,.14);
color: #3b82f6;
border-color: rgba(59,130,246,.22);
}
50% {
transform: scale(1.06);
box-shadow: 0 0 0 8px rgba(59,130,246,0);
background: rgba(59,130,246,.24);
color: #2563eb;
border-color: rgba(59,130,246,.38);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(59,130,246,0);
background: rgba(59,130,246,.14);
color: #3b82f6;
border-color: rgba(59,130,246,.22);
}
}
/* =========================
CARD CONTENT
========================= */
.uro-card-main[b-fpy0gbysae] {
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.uro-card-pills[b-fpy0gbysae] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.uro-card-pill[b-fpy0gbysae],
.uro-card-block[b-fpy0gbysae] {
background: rgba(255,255,255,.72);
border: 1px solid rgba(15,23,42,.08);
border-radius: 22px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(15,23,42,.04);
padding: 14px 15px;
}
.uro-card-block-title[b-fpy0gbysae],
.uro-card-block-strip[b-fpy0gbysae] {
background: linear-gradient(135deg, var(--wallet-accent-soft) 0%, rgba(255,255,255,.84) 100%);
border: 1px solid var(--wallet-accent-border);
}
.uro-card-label[b-fpy0gbysae] {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
margin-bottom: 8px;
line-height: 1.35;
}
.uro-card-title[b-fpy0gbysae] {
font-size: 1.02rem;
font-weight: 800;
line-height: 1.45;
color: #111827;
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
}
.uro-card-value[b-fpy0gbysae] {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.55;
color: #111827;
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
}
.uro-card-footer[b-fpy0gbysae] {
display: flex;
justify-content: flex-end;
padding: 0 18px 18px;
}
.uro-card-btn[b-fpy0gbysae] {
appearance: none;
border: 0;
border-radius: 999px;
padding: 10px 16px;
background: var(--wallet-accent);
color: #fff;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.01em;
box-shadow: 0 8px 18px rgba(0,0,0,.12);
cursor: pointer;
}
/* =========================
PART BLOCKS
========================= */
.wallet-block[b-fpy0gbysae] {
background: #f1f1f1;
border-radius: 18px;
padding: 14px;
margin-bottom: 14px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.wallet-block-header[b-fpy0gbysae] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.wallet-block-title[b-fpy0gbysae] {
font-weight: 700;
font-size: 0.95rem;
color: #222;
}
.wallet-block-subtitle[b-fpy0gbysae] {
margin-bottom: 8px;
}
.wallet-section[b-fpy0gbysae] {
border-radius: 12px;
padding: 10px;
margin-top: 8px;
}
.wallet-section.removed[b-fpy0gbysae] {
background: #ffffff;
border: 1px solid #e0e0e0;
}
.wallet-section.fitted[b-fpy0gbysae] {
background: #e9f6ef;
border: 1px solid #b7e0c7;
border-top: 2px dashed #b7e0c7;
}
.wallet-label-alt[b-fpy0gbysae] {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #666;
margin-bottom: 4px;
}
.wallet-value[b-fpy0gbysae] {
font-size: 0.95rem;
font-weight: 700;
color: #111;
}
.wallet-sub[b-fpy0gbysae] {
font-size: 0.8rem;
color: #333;
}
/* =========================
DESKTOP DETAILS
========================= */
.desktop-detail-wrap[b-fpy0gbysae] {
padding: 16px;
background: #f8fafc;
}
.desktop-parts-grid[b-fpy0gbysae] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.desktop-detail-loading[b-fpy0gbysae],
.desktop-detail-empty[b-fpy0gbysae] {
font-weight: 600;
color: #334155;
}
.desktop-detail-actions[b-fpy0gbysae] {
padding: 6px 0;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 640px) {
.uro-mobile-list[b-fpy0gbysae] {
padding: 8px;
height: 62vh;
}
.uro-card[b-fpy0gbysae] {
border-radius: 22px;
}
.uro-card-topbar[b-fpy0gbysae] {
padding: 14px 14px 10px;
}
.uro-card-main[b-fpy0gbysae] {
padding: 14px;
gap: 12px;
}
.uro-card-pills[b-fpy0gbysae] {
grid-template-columns: 1fr;
gap: 10px;
}
.uro-card-pill[b-fpy0gbysae],
.uro-card-block[b-fpy0gbysae] {
padding: 12px 13px;
border-radius: 18px;
}
.uro-card-brand-text[b-fpy0gbysae] {
font-size: 0.76rem;
}
.uro-card-title[b-fpy0gbysae] {
font-size: 0.96rem;
}
.uro-card-value[b-fpy0gbysae] {
font-size: 0.9rem;
}
.uro-card-badge[b-fpy0gbysae],
.uro-card-parts[b-fpy0gbysae] {
padding: 6px 10px;
font-size: 0.72rem;
}
.uro-card-icon-btn[b-fpy0gbysae] {
width: 32px;
height: 32px;
font-size: 0.92rem;
}
}
/* =========================
ACCESSIBILITY / MOTION
========================= */
@media (prefers-reduced-motion: reduce) {
.uro-card-switch[b-fpy0gbysae],
.warm-progress__bar[b-fpy0gbysae],
.uro-card-badge-deferred-flash[b-fpy0gbysae] {
transition: none !important;
animation: none !important;
}
}
.uro-card-back[b-fpy0gbysae] {
overflow-y: auto;
}
/* =========================
URO MOBILE CARD - SAFARI SAFE 3D FLIP
========================= */
.uro-card-wrap[b-fpy0gbysae] {
margin-bottom: 12px;
perspective: 1600px;
-webkit-perspective: 1600px;
position: relative;
}
.uro-card-switch[b-fpy0gbysae] {
position: relative;
width: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform .65s cubic-bezier(.2,.8,.2,1);
-webkit-transition: -webkit-transform .65s cubic-bezier(.2,.8,.2,1);
}
.uro-card-switch.is-flipped[b-fpy0gbysae] {
transform: rotateY(180deg) translateZ(0);
-webkit-transform: rotateY(180deg) translateZ(0);
}
.uro-card[b-fpy0gbysae] {
width: 100%;
border-radius: 28px;
background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,248,251,.94) 100%);
color: #111827;
border: 1px solid rgba(255,255,255,.78);
box-shadow: 0 18px 45px rgba(15,23,42,.10), 0 8px 20px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
/* front face stays in normal document flow */
.uro-card-front[b-fpy0gbysae] {
position: relative;
z-index: 2;
}
/* back face overlays front */
.uro-card-back[b-fpy0gbysae] {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
z-index: 1;
transform: rotateY(180deg) translateZ(1px);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
/* Safari can glitch with overflow:hidden on 3D faces */
.uro-card-front[b-fpy0gbysae],
.uro-card-back[b-fpy0gbysae] {
overflow: visible;
}
/* Put clipping on an inner layer instead */
.uro-card-inner[b-fpy0gbysae] {
border-radius: 28px;
overflow: hidden;
position: relative;
}
/* interaction safety */
.uro-card-switch:not(.is-flipped) .uro-card-back[b-fpy0gbysae] {
pointer-events: none;
}
.uro-card-switch.is-flipped .uro-card-front[b-fpy0gbysae] {
pointer-events: none;
}
.uro-card-switch.is-flipped .uro-card-back[b-fpy0gbysae] {
pointer-events: auto;
}
/* Optional smoother buttons */
.uro-card-icon-btn[b-fpy0gbysae],
.uro-card-parts[b-fpy0gbysae],
.uro-card-topbar-main[b-fpy0gbysae] {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* If back content is long */
.uro-card-back .uro-card-main[b-fpy0gbysae] {
max-height: 65vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.uro-mobile-grid .uro-card-static[b-fpy0gbysae] {
pointer-events: none;
}
.uro-mobile-grid .uro-card-action[b-fpy0gbysae] {
pointer-events: auto;
}
/* /Components/Pages/UROFuel.razor.rz.scp.css */
*[b-buhmnurfdh] {
font-size: 16px !important;
}
.custom-loading-panel[b-buhmnurfdh] {
position: fixed !important;
top: 0;
left: 0;
display: contents;
justify-content: center;
align-items: center;
z-index: 2000;
}
.hideCol col:nth-last-child(2)[b-buhmnurfdh],
.hideCol col:nth-last-child(3)[b-buhmnurfdh] {
width: 0px !important;
}
.nowrap[b-buhmnurfdh] {
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: normal;
white-space: nowrap;
width: 1px;
}
body[b-buhmnurfdh] {
/*background: linear-gradient(45deg, #88bdbc, #5a7d7c);*/
background: linear-gradient(45deg, #88bdbc, #5a7d7c);
}
.dxbl-grid-group-row[b-buhmnurfdh] {
--dxbl-grid-group-row-font-size: 22px;
}
.dxbl-grid[b-buhmnurfdh] {
--dxbl-grid-font-size: 24px;
}
.comboclass[b-buhmnurfdh] {
width:100px;
}
.centered-container[b-buhmnurfdh] {
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5; /* optional background color */
}
.dxbl-grid-search-box-container[b-buhmnurfdh] {
right: 30px;
min-width: 300px;
}
/* TreeView styling (optional) */
.demo-treeview-template[b-buhmnurfdh] {
max-width: 850px; /* or adjust to taste */
margin: 1rem;
}
.treeview-expand-btn[b-buhmnurfdh] {
display: inline-block;
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
}
.treeview-expand-btnexpanded[b-buhmnurfdh] {
display: inline-block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
background-image: url("/images/collapse.svg");
}
.treeview-expand-btncollapsed[b-buhmnurfdh] {
background-image: url("/images/expand.svg");
display: inline-block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}
.floating-search-container .custom-searchbox .dxbl-text-edit:target[Search][b-buhmnurfdh] {
font-size: 17px !important;
font-family: 'Segoe UI', sans-serif;
color: red !important;
}
.treeview-template-icon[b-buhmnurfdh] {
width: 32px;
height: 32px;
border-radius: 16px;
}
.dxbl-grid .dxbl-text-edit[b-buhmnurfdh] {
font-size: 17px !important;
color:blue;
}
.dxbl-text-edit[b-buhmnurfdh] {
font-size: 17px !important;
color: blue;
}
..dxbl-text-edit > .dxbl-btn.dxbl-btn-icon + input[type=search][b-buhmnurfdh] {
font-size: 17px !important;
color:black!important;
}
.floating-toggle-btn[b-buhmnurfdh] {
position: fixed;
top: 5px;
right: 12px;
z-index: 9999;
background-color: transparent;
color: black;
border: none;
padding: 0.6rem 0.9rem;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
font-size: 1.25rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.floating-toggle-btn:hover[b-buhmnurfdh] {
background: #003f99;
}
.floating-toggle-btn i[b-buhmnurfdh] {
pointer-events: none;
}
.floating-search-container[b-buhmnurfdh] {
position: fixed;
top: 0.1rem;
left: 3.5rem;
z-index: 9999;
background-color: white;
padding: 0.5rem;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transition: opacity 0.5s ease-in-out;
width:75%;
}
.floating-search-box[b-buhmnurfdh] {
min-width: 250px;
max-width: 90vw;
font-size:17px !important;
}
/* Target the internal input */
.custom-searchbox input[type="text"][b-buhmnurfdh] {
font-size: 16px !important; /* Prevent iOS zoom */
font-family: 'Segoe UI', sans-serif; /* Or your preferred font */
color: #333;
}
.custom-searchbox.dxbl-text-edit[b-buhmnurfdh] {
font-size: 32px !important; /* Prevent iOS zoom */
font-family: 'Segoe UI', sans-serif; /* Or your preferred font */
color: #333;
}
.floating-search-toggle[b-buhmnurfdh] {
color: blue;
border: none;
padding: 0.5rem;
border-radius: 8px;
}
.floating-search-toggle:hover[b-buhmnurfdh] {
color: black;
border: none;
padding: 0.5rem;
border-radius: 8px;
}
.fade-in[b-buhmnurfdh] {
animation: fadeIn-b-buhmnurfdh 0.5s ease-in-out;
}
@keyframes fadeIn-b-buhmnurfdh {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
*[b-buhmnurfdh] {
font-size: 16px !important;
}
/*.custom-searchbox .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn.dxbl-btn-icon + input[type=search], .dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn.dxbl-btn-icon + input[type=text], .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn.dxbl-btn-icon + input[type=search], .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn.dxbl-btn-icon + input[type=text], .dxbl-text-edit > .dxbl-btn.dxbl-btn-icon + input[type=search], .dxbl-text-edit > .dxbl-btn.dxbl-btn-icon + input[type=text] {
font-size: 17px !important;
color: rebeccapurple !important;
}*/
.alt-item > td[b-buhmnurfdh] {
font-size: 18px !important;
background-color: aliceblue;
}
td[b-buhmnurfdh] {
font-size: 18px !important;
}
.header-bold span[b-buhmnurfdh] {
font-weight: 700 !important
}
/* /Components/UtcDateTimeInput.razor.rz.scp.css */
.field-filled[b-9nma8hthbv] {
background-color: #e9f7ef !important;
border-color: #28a745 !important;
}
|