/* ===== Read-Only: visuals unchanged. Functional gating only. ===== */
/*
* hangarplanner-ui.css
* Ausgelagerte UI- und Layout-Styles aus index.html
*/
:root {
--scale-factor: 1;
--inv-scale: 1;
--grid-gap: 16px;
--card-base-width: 110px;
--card-min-width: 110px;
--section-spacing: 12px;
--fixed-section-spacing: 12px;
--bg-color-light: #f9fafb;
--bg-color-medium: #f3f4f6;
--text-dark: #1f2937;
--text-medium: #4b5563;
--border-light: #e5e7eb;
--highlight-light: #f0f9ff;
/* New navigation palette per design spec */
--menu-bg: #f9f9f9;
--menu-border: #e6e6e6;
--menu-accent: #f49e0c; /* yellow */
--menu-text: #6b6b6b; /* font & icon color */
--control-muted: #b1b5b1; /* sliders inactive */
/* Unified paddings */
--tile-grid-padding: 16px;
--tile-inner-padding: 24px;
/* Fixed board tile size (square). Adjust as needed. */
--board-tile-size: 270px;
/* Sync chip palette (adjust here to tune colors/weights) */
--sync-chip-fw: 600;
--sync-chip-border-w: 1.5px;
--sync-chip-radius: 9999px;
--sync-standalone-bg: #F2F4F7;
--sync-standalone-fg: #344054;
--sync-standalone-border: #D0D5DD;
--sync-read-bg: #FFF4EA;
--sync-read-fg: #B93815;
--sync-read-border: #F8DFC6;
--sync-write-bg: #FFEAD5;
--sync-write-fg: #C2410C;
--sync-write-border: #F2C69A;
--sync-master-bg: #FFE8CC;
--sync-master-fg: #9A3412;
--sync-master-border: #FDBA74;
}
body {
margin: 0;
overflow: hidden;
height: 100vh;
background-color: var(--bg-color-light);
color: var(--text-dark);
}
/* Global Inter font fallback for core elements */
html, body, button, input, select, textarea {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.form-control:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(255, 112, 67, 0.4);
border-color: #ff7043;
}
.hangar-cell {
transition: all 0.3s ease;
width: 250px; /* Fixed width */
height: 280px; /* Fixed height - increased for better spacing */
min-width: 250px !important;
max-width: 250px !important;
flex-basis: auto !important;
margin: 0;
box-sizing: border-box;
transform-origin: center center;
justify-self: center; /* center within grid area */
box-shadow: none !important;
border: 1px solid var(--border-light);
border-radius: 12px;
background-color: #ffffff !important; /* Zurück auf weiß */
overflow: hidden; /* clip inner content as requested */
}
/* MAXIMALE PRIORITÄT: Überschreibe alle möglichen Status-basierten Hintergründe */
/* === TIMETABLE STYLES === */
.timetable-container {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.timetable-header {
margin-bottom: 1rem;
}
.timetable-header h2 {
color: white;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.timetable-header p {
color: #d1d5db;
font-size: 0.875rem;
}
.timetable-toolbar {
background-color: #f9fafb;
padding: 0.75rem 1rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.timetable-toolbar select {
font-size: 0.875rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.25rem 0.5rem;
background: white;
}
.timetable-toolbar button {
background-color: #3b82f6;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.875rem;
border: none;
cursor: pointer;
display: flex;
align-items: center;
transition: background-color 0.2s;
}
.timetable-toolbar button:hover {
background-color: #2563eb;
}
.timetable-scroll-container {
max-height: 400px;
overflow-y: auto;
}
#timetableTable {
width: 100%;
border-collapse: collapse;
}
#timetableTable thead {
background-color: #f3f4f6;
position: sticky;
top: 0;
z-index: 10;
}
#timetableTable th {
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.75rem;
font-weight: 500;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #e5e7eb;
}
#timetableTable tbody {
background-color: white;
}
#timetableTable tbody tr {
border-bottom: 1px solid #f3f4f6;
transition: background-color 0.2s;
}
#timetableTable td {
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: #374151;
vertical-align: middle;
}
/* Timetable Status Badges */
.timetable-status {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
}
.timetable-status.overnight {
background-color: #fef3c7;
color: #d97706;
border: 1px solid #f59e0b;
}
.timetable-status.overnight::before {
content: "🏨";
margin-right: 0.25rem;
}
.timetable-status.active {
background-color: #d1fae5;
color: #059669;
border: 1px solid #10b981;
}
.timetable-status.inactive {
background-color: #f3f4f6;
color: #6b7280;
border: 1px solid #d1d5db;
}
.timetable-status.error {
background-color: #fee2e2;
color: #dc2626;
border: 1px solid #ef4444;
}
/* Timetable Aircraft ID */
.timetable-aircraft {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 600;
color: #1f2937;
}
/* Timetable Time */
.timetable-time {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #4b5563;
white-space: nowrap;
}
/* Timetable Airport Codes */
.timetable-airport {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
color: #1f2937;
background-color: #f3f4f6;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
white-space: nowrap;
}
/* Timetable Route */
.timetable-route {
display: flex;
align-items: center;
color: #4b5563;
}
.timetable-route svg {
margin: 0 0.5rem;
color: #9ca3af;
}
/* Timetable Position */
.timetable-position {
font-weight: 600;
color: #1f2937;
text-align: center;
min-width: 4rem;
}
/* Timetable Notes */
.timetable-notes {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #6b7280;
font-style: italic;
}
/* Timetable Empty State */
#timetableEmpty {
padding: 2rem;
text-align: center;
color: #6b7280;
}
#timetableEmpty svg {
margin: 0 auto 1rem;
height: 3rem;
width: 3rem;
color: #d1d5db;
}
/* Responsive Timetable */
@media (max-width: 1024px) {
.timetable-scroll-container {
max-height: 300px;
}
#timetableTable th,
#timetableTable td {
padding: 0.5rem;
font-size: 0.75rem;
}
.timetable-toolbar {
flex-direction: column;
gap: 0.5rem;
align-items: stretch;
}
.timetable-route {
flex-direction: column;
gap: 0.25rem;
}
}
/* === END TIMETABLE STYLES === */
/* Reduce gap between header and tab bar when tabs are present */
.with-tabs .hangar-container { padding-top: 0px !important; }
/* Remove any spacing between tabs and planner content */
#topTabs { margin-bottom: 0 !important; }
#panel-planner .section-container { margin-top: 0 !important; }
#panel-planner .planner-main { padding-top: 0 !important; margin-top: 0 !important; }
#hangarGrid { margin-top: 0 !important; }
.hangar-cell[style*="background"],
.hangar-cell[class*="orange"],
.hangar-cell[class*="status"],
.hangar-cell[class*="tow"] {
background-color: #ffffff !important; /* FORCIERE weißen Hintergrund */
}
/* Verhindere, dass Status-Klassen die gesamte Kachel beeinflussen */
.hangar-cell.tow-initiated,
.hangar-cell.tow-ongoing,
.hangar-cell.tow-on-position,
.hangar-cell.status-aog,
.hangar-cell.status-ready,
.hangar-cell.status-maintenance,
.hangar-cell.aog,
.hangar-cell.ready,
.hangar-cell.maintenance {
background-color: #ffffff !important; /* Überschreibe ALLE Status-Hintergründe auf weiß */
}
.hangar-cell:hover {
border-color: rgba(150, 150, 180, 0.35);
transform: translateY(-1px);
}
.hangar-container {
background-color: #f0f4f8;
padding: 2rem;
min-width: 1200px; /* Prevent tile collapse when sidebar expands */
}
.hangar-cell .card-header {
border-radius: 12px 12px 0 0;
background-color: white;
border-bottom: none;
display: flex;
justify-content: space-between;
align-items: center;
/* Halve the vertical and horizontal padding for a tighter header */
padding: calc(var(--tile-inner-padding) / 2) calc(var(--tile-inner-padding) / 2) 6px calc(var(--tile-inner-padding) / 2);
min-height: 32px;
}
#hangarGrid,
#secondaryHangarGrid {
display: grid;
gap: 24px; /* Fixed gap */
width: 100%;
transition: all 0.3s ease;
transform-origin: top left;
justify-content: center; /* Center tiles within grid */
justify-items: center; /* Center tiles in their grid cells */
}
/* WICHTIG: Grid Layout Fix - Direkte CSS Grid Styles */
#hangarGrid {
display: grid !important;
gap: 24px !important; /* Fixed gap */
width: 100% !important;
grid-template-columns: repeat(6, 250px) !important; /* Force exactly 6 columns */
grid-auto-flow: dense; /* Allow tiles to fill gaps */
}
/* Staggered brick layout: offset columns 2 and 5 down by 1/4 tile height (70px = 280px / 4) */
#hangarGrid .hangar-cell:nth-child(6n+2),
#hangarGrid .hangar-cell:nth-child(6n+5) {
margin-top: 70px;
}
/* Reduce gap for second row (tiles 7-12) to be slightly larger than standard grid gap */
#hangarGrid .hangar-cell:nth-child(n+7):nth-child(-n+12) {
margin-top: calc(-70px);
}
/* Reset margin for offsetted columns in second row to maintain their offset */
#hangarGrid .hangar-cell:nth-child(8),
#hangarGrid .hangar-cell:nth-child(11) {
margin-top: 70px;
}
/* Hide second row tiles in columns 2 and 5 (tiles 8 and 11) but keep space as placeholder */
#hangarGrid .hangar-cell:nth-child(8),
#hangarGrid .hangar-cell:nth-child(11) {
visibility: hidden !important;
pointer-events: none !important;
}
#secondaryHangarGrid {
display: grid !important;
gap: 24px !important; /* Fixed gap */
width: 100% !important;
grid-template-columns: repeat(6, 250px) !important; /* Force exactly 6 columns */
}
.status-indicator {
display: flex;
align-items: center;
gap: 6px;
}
.status-light {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
opacity: 1;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: none;
/* Standard: Neutral/Weiß */
background-color: #ffffff;
border-color: #d1d5db;
}
/* CSS-basierte Status-Lichter über data-status Attribut - entfernt !important für dynamische Updates */
.status-light[data-status="ready"] {
background-color: #10b981; /* Grün */
border-color: #10b981;
}
.status-light[data-status="maintenance"] {
background-color: #f59e0b; /* Gelb */
border-color: #f59e0b;
}
.status-light[data-status="aog"] {
background-color: #dc2626; /* Rot */
border-color: #dc2626;
}
.status-light[data-status="neutral"] {
background-color: #ffffff; /* Weiß */
border-color: #d1d5db;
}
/* Legacy CSS-Klassen für Kompatibilität */
.status-ready {
background-color: #22c55e;
}
.status-maintenance {
background-color: #f59e0b;
}
.status-aog {
background-color: #ef4444;
}
.status-dropdown-container {
display: flex;
align-items: center;
gap: 6px;
}
.status-selector,
select.status-selector {
/* Match tow-status-selector design - pill style with neutral transparent */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 12px;
width: auto;
min-width: 90px;
height: 26px;
padding: 2px 10px;
border-radius: 2px;
font-weight: 600;
text-align: center;
background: transparent;
color: inherit;
border: 1px solid transparent;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Hide dropdown arrow more effectively */
.status-selector::-ms-expand { display: none; }
/* Light mode status styling */
html:not(.dark-mode) .status-selector {
border-left: 3px solid #cbd5e1 !important; /* base */
border-radius: 2px !important;
border-color: #e5e7eb !important;
}
/* Light mode: neutral should be invisible (match tow design) */
html:not(.dark-mode) .status-selector[value="neutral"],
html:not(.dark-mode) .status-selector.status-neutral {
background: #ffffff !important; /* match tile background */
color: #6b7280 !important; /* main grey */
border-color: #e5e7eb !important; /* subtle border */
border-left: 0 !important; /* no accent for neutral */
box-shadow: none !important;
}
html:not(.dark-mode) .status-selector[value="ready"],
html:not(.dark-mode) .status-selector.status-ready {
background: #ffffff !important; /* white chip */
color: #6b7280 !important; /* main grey text */
border-color: #e5e7eb !important; /* subtle border */
border-left-color: #10b981 !important; /* emerald accent only */
}
html:not(.dark-mode) .status-selector[value="maintenance"],
html:not(.dark-mode) .status-selector.status-maintenance {
background: #ffffff !important; /* white chip */
color: #6b7280 !important; /* main grey text */
border-color: #e5e7eb !important; /* subtle border */
border-left-color: #f59e0b !important; /* orange accent only */
}
html:not(.dark-mode) .status-selector[value="aog"],
html:not(.dark-mode) .status-selector.status-aog {
background: #ffffff !important; /* white chip */
color: #6b7280 !important; /* main grey text */
border-color: #e5e7eb !important; /* subtle border */
border-left-color: #dc2626 !important; /* red accent only */
}
/* Light mode hover/focus */
html:not(.dark-mode) .status-selector:hover { border-color: #cbd5e1 !important; }
html:not(.dark-mode) .status-selector:focus { outline: none; border-color: #94a3b8 !important; box-shadow: 0 0 0 2px rgba(148,163,184,.25); }
/* Dark mode status styling */
.dark-mode .status-selector {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-left-width: 0 !important;
border: none !important;
border-radius: 2px;
background: var(--card-header-bg) !important; /* match tile header */
color: var(--text-secondary) !important;
}
/* Dark mode: neutral and any unspecified value -> same as tile background, no borders */
.dark-mode .status-selector[value="neutral"],
.dark-mode .status-selector.status-neutral,
.dark-mode .status-selector:not(.status-ready):not(.status-maintenance):not(.status-aog) {
background: var(--card-header-bg) !important;
color: var(--text-secondary) !important;
border: none !important;
border-left: 0 !important;
}
/* Dark mode: explicit states use the same background and no borders (no accent) */
.dark-mode .status-selector[value="ready"],
.dark-mode .status-selector.status-ready {
background: var(--card-header-bg) !important;
border: none !important;
color: var(--text-secondary) !important;
border-left: 0 !important;
}
.dark-mode .status-selector[value="maintenance"],
.dark-mode .status-selector.status-maintenance {
background: var(--card-header-bg) !important;
border: none !important;
color: var(--text-secondary) !important;
border-left: 0 !important;
}
.dark-mode .status-selector[value="aog"],
.dark-mode .status-selector.status-aog {
background: var(--card-header-bg) !important;
border: none !important;
color: var(--text-secondary) !important;
border-left: 0 !important;
}
.tow-status {
display: inline-block;
padding: 1px 4px;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
text-align: center;
min-width: 80px;
width: fit-content;
margin: 0 auto;
white-space: nowrap;
box-shadow: none;
background-color: #f3f4f6;
color: #4b5563;
}
/* Towing-Status spezifische Styles - nur für .tow-status Elemente */
.tow-status.tow-initiated {
background-color: #fff1e6;
color: #b45309;
}
.tow-status.tow-ongoing {
background-color: #e0f2fe;
color: #0369a1;
}
.tow-status.tow-on-position {
background-color: #dcfce7;
color: #166534;
}
/* Towing-Status-Selektoren - nur für .tow-status-selector Elemente */
.info-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem;
align-items: center;
min-width: 0;
margin-bottom: 0.25rem;
}
.info-label {
text-align: right;
font-weight: 500;
color: #64748b; /* lighter grey to de-emphasize labels */
white-space: nowrap;
padding-right: 5px;
width: fit-content;
min-width: min-content;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.8rem;
}
.info-value {
color: #2d3142; /* Angepasst für bessere Konsistenz */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
font-size: 0.8rem;
}
.info-input {
color: #2d3142;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
font-size: 0.8rem;
background: transparent;
border: none;
padding: 2px 4px;
border-radius: 3px;
transition: background-color 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.info-input:focus {
outline: none;
background-color: rgba(255, 112, 67, 0.1);
border: 1px solid #ff7043;
}
.info-input:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.info-input::placeholder {
color: #9ca3af;
font-style: italic;
}
/* Arr/Dep placeholders: hidden by default; show on input hover or focus (light + dark) */
#hangarGrid .hangar-cell input[id^="arrival-time-"]::placeholder,
#hangarGrid .hangar-cell input[id^="departure-time-"]::placeholder,
#secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]::placeholder,
#secondaryHangarGrid .hangar-cell input[id^="departure-time-"]::placeholder {
color: transparent !important;
transition: color .15s ease;
}
#hangarGrid .hangar-cell input[id^="arrival-time-"]:hover::placeholder,
#hangarGrid .hangar-cell input[id^="arrival-time-"]:focus::placeholder,
#hangarGrid .hangar-cell input[id^="departure-time-"]:hover::placeholder,
#hangarGrid .hangar-cell input[id^="departure-time-"]:focus::placeholder,
#secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:hover::placeholder,
#secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:focus::placeholder,
#secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:hover::placeholder,
#secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:focus::placeholder {
color: #9ca3af !important;
}
/* Dark mode placeholder color on hover/focus */
.dark-mode #hangarGrid .hangar-cell input[id^="arrival-time-"]:hover::placeholder,
.dark-mode #hangarGrid .hangar-cell input[id^="arrival-time-"]:focus::placeholder,
.dark-mode #hangarGrid .hangar-cell input[id^="departure-time-"]:hover::placeholder,
.dark-mode #hangarGrid .hangar-cell input[id^="departure-time-"]:focus::placeholder,
.dark-mode #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:hover::placeholder,
.dark-mode #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:focus::placeholder,
.dark-mode #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:hover::placeholder,
.dark-mode #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:focus::placeholder {
color: var(--text-muted) !important;
}
/* Enhanced datetime-local styling with modern design */
#hangarGrid .hangar-cell input[type="datetime-local"],
#secondaryHangarGrid .hangar-cell input[type="datetime-local"] {
position: relative;
background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 6px 8px; /* back to comfortable size */
font-size: 0.8rem;
color: #2d3748;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
cursor: pointer;
width: 100%;
box-sizing: border-box;
line-height: 1.3;
}
/* Enhanced hover state */
#hangarGrid .hangar-cell input[type="datetime-local"]:hover,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:hover {
background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: #cbd5e1 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
transform: translateY(-1px) !important;
}
/* Enhanced focus state */
#hangarGrid .hangar-cell input[type="datetime-local"]:focus,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus {
outline: none !important;
background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%) !important;
border-color: #ff7043 !important;
box-shadow: 0 0 0 2px rgba(255, 112, 67, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
transform: translateY(-1px) !important;
}
/* Simplified calendar picker styling */
#hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator {
width: 14px !important;
height: 14px !important;
opacity: 0.7 !important;
margin-left: 2px !important;
cursor: pointer !important;
}
#hangarGrid .hangar-cell input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
#hangarGrid .hangar-cell input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
opacity: 1 !important;
}
/* Enhanced datetime editor styling */
#hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit {
color: #2d3748 !important;
font-size: 0.75rem !important;
line-height: 1.2 !important;
}
#hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
padding: 0 !important;
margin: 0 !important;
}
#hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit-text,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit-text {
color: #64748b !important;
font-size: 0.75rem !important;
}
/* Hide spin buttons - we'll rely on the calendar picker */
#hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-inner-spin-button,
#hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-clear-button,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-inner-spin-button,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-clear-button {
display: none;
}
/* Simplified interactive states */
#hangarGrid .hangar-cell input[type="datetime-local"]:active,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
/* Enhanced accessibility - high contrast support */
@media (prefers-contrast: high) {
#hangarGrid .hangar-cell input[type="datetime-local"],
#secondaryHangarGrid .hangar-cell input[type="datetime-local"] {
border: 2px solid #000000;
background: #ffffff;
color: #000000;
}
#hangarGrid .hangar-cell input[type="datetime-local"]:focus,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus {
border-color: #ff0000;
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
#hangarGrid .hangar-cell input[type="datetime-local"],
#secondaryHangarGrid .hangar-cell input[type="datetime-local"],
#hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator {
transition: none;
animation: none;
transform: none;
}
#hangarGrid .hangar-cell input[type="datetime-local"]:hover,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:hover,
#hangarGrid .hangar-cell input[type="datetime-local"]:focus,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus {
transform: none;
}
}
/* Time picker tooltip enhancement */
#hangarGrid .hangar-cell input[type="datetime-local"]:hover::after,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:hover::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 4px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.8);
color: white;
font-size: 11px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
animation: fadeInTooltip 0.3s ease-in-out forwards;
z-index: 1000;
}
@keyframes fadeInTooltip {
from { opacity: 0; transform: translateX(-50%) translateY(4px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Enhanced keyboard navigation support */
#hangarGrid .hangar-cell input[type="datetime-local"]:focus-visible,
#secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus-visible {
outline: 2px solid #ff7043;
outline-offset: 2px;
}
/* Keep compact date-time input and its button in a single grid cell using absolute button */
.compact-dt-wrap { position: relative; display: block; width: 100%; min-width: 0; }
.compact-dt-wrap .compact-dt-btn {
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #cbd5e1;
border-radius: 4px;
background: #f8fafc;
color: #475569; /* slate-600 for icon */
cursor: pointer;
/* hidden by default for cleaner look; revealed on hover/focus */
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
}
/* reveal calendar button when wrapper is hovered/focused */
.compact-dt-wrap:hover .compact-dt-btn,
.compact-dt-wrap:focus-within .compact-dt-btn {
opacity: 1;
pointer-events: auto;
}
/* Custom date-time picker styles */
.dtp-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 6px; background: #ffffff; }
.dtp-header.range-mode { grid-template-columns: 1fr auto auto; }
.dtp-header-date { font-weight: 600; color: #111827; font-size: 14px; padding-left: 30px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* SVG calendar icon with fixed width to ensure spacing */
.dtp-header-date::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0.85; background: url('data:image/svg+xml;utf8,') no-repeat center / 16px 16px; }
.dtp-time-input { padding-left: 24px !important; background: #ffffff url('data:image/svg+xml;utf8,') no-repeat 6px center; background-size: 16px; }
.dtp-cal { border: 1px solid #e5e7eb; border-radius: 6px; margin: 8px 0; overflow: hidden; min-height: 280px; }
/* Ensure picker has proper dimensions */
.picker-container {
min-width: 320px;
min-height: 350px;
}
.picker-container.range-mode {
min-width: 640px;
min-height: 400px;
}
.dtp-nav { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 4px; padding: 4px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.dtp-month-label { text-align: center; font-weight: 600; color: #111827; font-size: 14px; }
.dtp-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 4px 6px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.dtp-dow { text-align: center; font-size: 12px; color: #6b7280; padding: 2px 0; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 6px; }
.dtp-day { height: 28px; border: 1px solid transparent; border-radius: 4px; background: #ffffff; color: #111827; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.dtp-day:hover { background: #e5e7eb; }
.dtp-day.muted { color: #9ca3af; }
.dtp-day.today { border-color: #0ea5e9; }
.dtp-day.selected { background: #e0f2fe; border-color: #0ea5e9; color: #0c4a6e; }
/* Range styles */
.dtp-day.in-range { background: #eef2ff; border-color: #c7d2fe; }
.dtp-day.range-start, .dtp-day.range-end { background: #dbeafe; border-color: #60a5fa; color: #1e3a8a; }
/* Controls (range toggle) */
.dtp-controls {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 6px 8px;
gap: 12px;
border-top: 1px solid #e5e7eb;
}
.dtp-range-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #374151;
font-weight: 500;
cursor: pointer;
padding: 6px 10px;
border-radius: 6px;
transition: all 0.2s ease;
user-select: none;
}
.dtp-range-label:hover {
background: #f3f4f6;
color: #111827;
}
.dtp-range-checkbox {
width: 16px;
height: 16px;
border: 2px solid #d1d5db;
border-radius: 4px;
background: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
appearance: none;
-webkit-appearance: none;
margin: 0;
}
.dtp-range-checkbox:checked {
background: #3b82f6;
border-color: #3b82f6;
}
.dtp-range-checkbox:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 11px;
font-weight: bold;
line-height: 1;
}
.dtp-range-checkbox:hover {
border-color: #9ca3af;
}
.dtp-range-checkbox:checked:hover {
border-color: #2563eb;
background: #2563eb;
}
/* Add icon to range label */
.dtp-range-label::before {
content: '';
width: 16px;
height: 16px;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: 16px;
transition: opacity 0.2s ease;
}
.dtp-range-label:hover::before {
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: 16px;
}
/* Dual-month range mode layout - hidden by default; JS toggles to flex in range mode */
.dtp-dual-months {
display: none; /* default hidden to avoid bleed in single mode */
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
gap: 16px;
margin: 8px 0;
width: 100%;
max-width: 600px;
}
.dtp-dual-months .dtp-month {
flex: 1 1 45% !important;
min-width: 280px;
max-width: 300px;
border: 1px solid #e5e7eb;
border-radius: 6px;
overflow: hidden;
background: #ffffff;
display: block;
}
.dtp-dual-months .dtp-nav {
display: grid;
grid-template-columns: 24px 1fr 24px;
align-items: center;
gap: 4px;
padding: 4px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
}
.dtp-dual-months .dtp-month-label {
text-align: center;
font-weight: 600;
color: #111827;
font-size: 14px;
}
.dtp-dual-months .dtp-dow-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
padding: 4px 6px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.dtp-dual-months .dtp-dow {
text-align: center;
font-size: 12px;
color: #6b7280;
padding: 2px 0;
}
.dtp-dual-months .dtp-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
padding: 6px;
}
.dtp-dual-months .dtp-day {
height: 28px;
border: 1px solid transparent;
border-radius: 4px;
background: #ffffff;
color: #111827;
cursor: pointer;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dtp-dual-months .dtp-day:hover {
background: #e5e7eb;
}
.dtp-dual-months .dtp-day.muted {
color: #9ca3af;
}
.dtp-dual-months .dtp-day.today {
border-color: #0ea5e9;
}
.dtp-dual-months .dtp-day.selected {
background: #e0f2fe;
border-color: #0ea5e9;
color: #0c4a6e;
}
.dtp-dual-months .dtp-day.in-range {
background: #eef2ff;
border-color: #c7d2fe;
}
.dtp-dual-months .dtp-day.range-start,
.dtp-dual-months .dtp-day.range-end {
background: #dbeafe;
border-color: #60a5fa;
color: #1e3a8a;
}
/* Dark mode */
.dark-mode .dtp-header { border-color: var(--border-color); background: var(--bg-secondary); }
.dark-mode .dtp-header-date { color: var(--text-secondary); }
.dark-mode .dtp-dual-months .dtp-month { border-color: var(--border-color); background: var(--bg-secondary); }
.dark-mode .dtp-dual-months .dtp-nav { background: var(--bg-primary); border-color: var(--border-color); }
.dark-mode .dtp-dual-months .dtp-month-label { color: var(--text-primary); }
.dark-mode .dtp-dual-months .dtp-dow-row { background: var(--bg-secondary); border-color: var(--border-color); }
.dark-mode .dtp-dual-months .dtp-dow { color: var(--text-muted); }
.dark-mode .dtp-dual-months .dtp-day { background: var(--bg-secondary); color: var(--text-primary); }
.dark-mode .dtp-dual-months .dtp-day:hover { background: var(--bg-primary); }
.dark-mode .dtp-dual-months .dtp-day.muted { color: var(--text-muted); }
.dark-mode .dtp-dual-months .dtp-day.today { border-color: #0ea5e9; }
.dark-mode .dtp-dual-months .dtp-day.selected { background: #1e3a8a; border-color: #3b82f6; color: #bfdbfe; }
.dark-mode .dtp-dual-months .dtp-day.in-range { background: #1e1b4b; border-color: #4338ca; }
.dark-mode .dtp-dual-months .dtp-day.range-start,
.dark-mode .dtp-dual-months .dtp-day.range-end { background: #1e40af; border-color: #3b82f6; color: #bfdbfe; }
/* Dark mode for controls */
.dark-mode .dtp-controls {
border-color: var(--border-color);
}
.dark-mode .dtp-range-label {
color: var(--text-secondary);
}
.dark-mode .dtp-range-label:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.dark-mode .dtp-range-checkbox {
background: var(--bg-secondary);
border-color: var(--border-color);
}
.dark-mode .dtp-range-checkbox:checked {
background: #3b82f6;
border-color: #3b82f6;
}
.dark-mode .dtp-range-checkbox:hover {
border-color: var(--text-muted);
}
.dark-mode .dtp-range-label::before {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.dark-mode .dtp-range-label:hover::before {
background: url('data:image/svg+xml;utf8,') no-repeat center;
}
.dark-mode .dtp-header-date::before { background-image: url('data:image/svg+xml;utf8,'); }
.dark-mode .dtp-time-input { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); }
.dark-mode .dtp-cal { border-color: var(--border-color); }
.dark-mode .dtp-nav { background: var(--bg-secondary); border-bottom-color: var(--border-color); }
.dark-mode .dtp-month-label { color: var(--text-secondary); }
.dark-mode .dtp-dow-row { background: var(--bg-secondary); border-bottom-color: var(--border-color); }
.dark-mode .dtp-dow { color: var(--text-tertiary); }
.dark-mode .dtp-grid { }
.dark-mode .dtp-day { background: var(--bg-primary); color: var(--text-primary); border-color: transparent; }
.dark-mode .dtp-day:hover { background: rgba(255,255,255,0.08); }
.dark-mode .dtp-day.muted { color: var(--text-tertiary); opacity: 0.7; }
.dark-mode .dtp-day.today { border-color: var(--menu-accent); }
.dark-mode .dtp-day.selected { background: rgba(14,165,233,0.18); border-color: var(--menu-accent); color: var(--text-secondary); }
/* Dark-mode range styles */
.dark-mode .dtp-day.in-range { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.5); }
.dark-mode .dtp-day.range-start, .dark-mode .dtp-day.range-end { background: rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.8); color: var(--text-primary); }
.dark-mode .dtp-controls { color: var(--text-tertiary); }
.dark-mode .dtp-range-label { color: var(--text-tertiary); }
/* ===========================
MODERN FAQ DESIGN SYSTEM
=========================== */
/* FAQ Container */
.faq-container {
max-width: 1200px;
margin: 0 auto;
padding: 0;
background: #ffffff;
min-height: 100vh;
}
.dark-mode .faq-container {
background: var(--bg-primary);
}
/* Hero Section - Slim and Clean */
.faq-hero {
background: linear-gradient(135deg, #f49e0c 0%, #e88c00 100%);
padding: 24px 24px 28px;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.faq-hero-content {
max-width: 800px;
margin: 0 auto;
}
.faq-hero-title {
font-size: 1.75rem;
font-weight: 600;
color: #ffffff;
margin: 0 0 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
line-height: 1.2;
}
.faq-hero-icon {
width: 28px;
height: 28px;
color: #ffffff;
opacity: 0.95;
}
.faq-hero-subtitle {
font-size: 0.95rem;
color: rgba(255,255,255,0.85);
margin: 0;
font-weight: 400;
max-width: 500px;
margin: 0 auto;
}
/* Dark mode hero */
.dark-mode .faq-hero {
background: linear-gradient(135deg, var(--menu-accent) 0%, #d67e00 100%);
}
/* Search Section */
.faq-search-section {
padding: 32px 24px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.faq-search-container {
position: relative;
max-width: 600px;
margin: 0 auto;
}
.faq-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: #6b7280;
pointer-events: none;
}
.faq-search-input {
width: 100%;
padding: 16px 24px 16px 52px;
font-size: 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
color: #1f2937;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.faq-search-input:focus {
outline: none;
border-color: var(--menu-accent);
box-shadow: 0 0 0 3px rgba(244,158,12,0.1), 0 4px 12px rgba(0,0,0,0.15);
}
.faq-search-input::placeholder {
color: #9ca3af;
}
.faq-search-shortcut {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
padding: 4px 8px;
font-size: 12px;
font-weight: 600;
color: #6b7280;
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 6px;
font-family: ui-monospace, 'SF Mono', monospace;
}
/* Dark mode search */
.dark-mode .faq-search-section {
background: var(--bg-secondary);
border-bottom-color: var(--border-color);
}
.dark-mode .faq-search-input {
background: var(--bg-primary);
border-color: var(--border-color);
color: var(--text-primary);
}
.dark-mode .faq-search-input:focus {
border-color: var(--menu-accent);
}
.dark-mode .faq-search-icon {
color: var(--text-tertiary);
}
.dark-mode .faq-search-shortcut {
background: var(--bg-primary);
border-color: var(--border-color);
color: var(--text-tertiary);
}
/* Section Titles */
.faq-section-title {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin: 0 0 24px;
padding-bottom: 8px;
border-bottom: 2px solid var(--menu-accent);
display: inline-block;
}
.dark-mode .faq-section-title {
color: var(--text-primary);
}
/* Quick Actions */
.faq-quick-actions {
padding: 48px 24px;
background: #ffffff;
}
.faq-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.faq-quick-card {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 24px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.faq-quick-card:hover {
border-color: var(--menu-accent);
box-shadow: 0 8px 25px rgba(244,158,12,0.15);
transform: translateY(-2px);
}
.faq-quick-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--menu-accent) 0%, #e88c00 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.faq-quick-card:hover::before {
transform: scaleX(1);
}
.faq-quick-card-icon {
width: 48px;
height: 48px;
margin-bottom: 16px;
color: var(--menu-accent);
background: rgba(244,158,12,0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.faq-quick-card-icon svg {
width: 24px;
height: 24px;
}
.faq-quick-card-content h3 {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
margin: 0 0 8px;
}
.faq-quick-card-content p {
font-size: 0.875rem;
color: #6b7280;
margin: 0 0 16px;
line-height: 1.5;
}
.faq-quick-card-answer {
font-size: 0.875rem;
color: #374151;
background: #f9fafb;
padding: 12px;
border-radius: 8px;
border-left: 3px solid var(--menu-accent);
line-height: 1.5;
display: none;
}
.faq-quick-card.expanded .faq-quick-card-answer {
display: block;
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Dark mode quick actions */
.dark-mode .faq-quick-actions {
background: var(--bg-primary);
}
.dark-mode .faq-quick-card {
background: var(--bg-secondary);
border-color: var(--border-color);
}
.dark-mode .faq-quick-card-content h3 {
color: var(--text-primary);
}
.dark-mode .faq-quick-card-content p {
color: var(--text-secondary);
}
.dark-mode .faq-quick-card-answer {
background: var(--bg-primary);
color: var(--text-primary);
}
.dark-mode .faq-quick-card-icon {
background: rgba(244,158,12,0.15);
}
/* TOC Section */
.faq-toc-section {
padding: 48px 24px;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.faq-toc {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.faq-toc .toc-title {
font-size: 1.125rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.faq-toc ul {
list-style: none;
padding: 0;
margin: 0;
}
.faq-toc ul ul {
margin-left: 24px;
margin-top: 8px;
}
.faq-toc li {
margin: 8px 0;
}
.faq-toc a {
color: #4b5563;
text-decoration: none;
font-weight: 500;
padding: 8px 12px;
border-radius: 8px;
display: block;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.faq-toc a:hover {
background: rgba(244,158,12,0.1);
border-left-color: var(--menu-accent);
color: #1f2937;
}
/* Dark mode TOC */
.dark-mode .faq-toc-section {
background: var(--bg-secondary);
border-color: var(--border-color);
}
.dark-mode .faq-toc {
background: var(--bg-primary);
border-color: var(--border-color);
}
.dark-mode .faq-toc .toc-title {
color: var(--text-primary);
border-bottom-color: var(--border-color);
}
.dark-mode .faq-toc a {
color: var(--text-secondary);
}
.dark-mode .faq-toc a:hover {
color: var(--text-primary);
background: rgba(244,158,12,0.15);
}
/* Documentation Section */
.faq-docs-section {
padding: 48px 24px;
background: #ffffff;
}
.faq-docs {
max-width: 800px;
margin: 0 auto;
line-height: 1.7;
font-size: 16px;
color: #1f2937;
}
.faq-docs h1, .faq-docs h2, .faq-docs h3, .faq-docs h4, .faq-docs h5, .faq-docs h6 {
color: #1f2937;
font-weight: 700;
margin: 32px 0 16px;
line-height: 1.25;
}
.faq-docs h1 {
font-size: 2.25rem;
border-bottom: 2px solid var(--menu-accent);
padding-bottom: 16px;
}
.faq-docs h2 {
font-size: 1.875rem;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 8px;
}
.faq-docs h3 {
font-size: 1.5rem;
}
.faq-docs p {
margin: 16px 0;
color: #374151;
}
.faq-docs ul, .faq-docs ol {
margin: 16px 0;
padding-left: 24px;
}
.faq-docs li {
margin: 8px 0;
color: #374151;
}
.faq-docs code {
background: #f3f4f6;
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 0.875em;
color: #d97706;
border: 1px solid #e5e7eb;
}
.faq-docs pre {
background: #1f2937;
color: #f9fafb;
padding: 16px;
border-radius: 8px;
overflow-x: auto;
margin: 24px 0;
border: 1px solid #374151;
}
.faq-docs pre code {
background: none;
border: none;
padding: 0;
color: inherit;
}
.faq-docs blockquote {
border-left: 4px solid var(--menu-accent);
padding: 16px 24px;
margin: 24px 0;
background: rgba(244,158,12,0.05);
border-radius: 0 8px 8px 0;
}
.faq-docs hr {
border: none;
height: 2px;
background: linear-gradient(90deg, var(--menu-accent) 0%, transparent 100%);
margin: 32px 0;
}
/* Dark mode docs */
.dark-mode .faq-docs-section {
background: var(--bg-primary);
}
.dark-mode .faq-docs {
color: var(--text-primary);
}
.dark-mode .faq-docs h1,
.dark-mode .faq-docs h2,
.dark-mode .faq-docs h3,
.dark-mode .faq-docs h4,
.dark-mode .faq-docs h5,
.dark-mode .faq-docs h6 {
color: var(--text-primary);
}
.dark-mode .faq-docs h2 {
border-bottom-color: var(--border-color);
}
.dark-mode .faq-docs p,
.dark-mode .faq-docs li {
color: var(--text-secondary);
}
.dark-mode .faq-docs code {
background: rgba(255,255,255,0.1);
color: #fbbf24;
border-color: var(--border-color);
}
.dark-mode .faq-docs pre {
background: var(--bg-secondary);
border-color: var(--border-color);
}
.dark-mode .faq-docs blockquote {
background: rgba(244,158,12,0.1);
border-left-color: var(--menu-accent);
}
/* Responsive Design */
@media (max-width: 768px) {
.faq-hero {
padding: 20px 16px 24px;
}
.faq-hero-title {
font-size: 1.5rem;
flex-direction: column;
gap: 8px;
}
.faq-hero-icon {
width: 24px;
height: 24px;
}
.faq-hero-subtitle {
font-size: 0.875rem;
}
.faq-search-section,
.faq-quick-actions,
.faq-toc-section,
.faq-docs-section {
padding-left: 16px;
padding-right: 16px;
}
.faq-cards-grid {
grid-template-columns: 1fr;
}
.faq-quick-card {
padding: 20px;
}
.faq-docs h1 {
font-size: 1.875rem;
}
.faq-docs h2 {
font-size: 1.5rem;
}
}
/* Search highlighting */
.faq-highlight {
background: rgba(244,158,12,0.3);
padding: 1px 2px;
border-radius: 2px;
}
.dark-mode .faq-highlight {
background: rgba(244,158,12,0.4);
}
/* Hide old FAQ styles - keeping for backward compatibility but unused */
.faq-list, .faq-item, .markdown-body, .markdown-toc { display: none; }
.notes-container {
display: flex;
flex-direction: column;
margin-top: 0.25rem;
margin-bottom: 0.75rem; /* Increased bottom margin */
margin-left: 0 !important;
padding-left: 0 !important;
padding-bottom: 0.75rem; /* Increased bottom padding */
}
.notes-textarea,
textarea.notes-textarea {
resize: none !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
border: 1px solid transparent;
border-radius: 3px;
padding: 2px 0 !important; /* remove left/right padding so text aligns flush-left */
margin-left: 0 !important;
font-size: 0.8rem;
color: var(--text-dark);
overflow-y: auto !important;
white-space: normal !important;
text-overflow: clip !important;
line-height: 18px !important;
display: block !important;
align-items: flex-start !important;
text-indent: 0;
}
.aircraft-id {
text-align: center;
font-weight: 700; /* Extra bold für maximale Präsenz */
font-size: 1.35rem; /* Deutlich vergrößert von 0.95rem */
letter-spacing: 0.02em; /* Leichte Buchstabenweitung für bessere Lesbarkeit */
padding: 0.5rem 0.25rem; /* Mehr vertikaler Padding */
margin-bottom: 0.4rem; /* Mehr Abstand nach unten */
border-bottom: none;
background-color: transparent;
width: 100%;
color: #1a202c; /* Dunklerer, kontrastreicherer Text */
line-height: 1.2; /* Optimierte Zeilenhöhe */
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.aircraft-id::placeholder {
color: #9ca3af;
font-weight: 400; /* Normale Gewichtung für Placeholder */
font-size: 1.1rem; /* Etwas kleiner für Placeholder */
}
.aircraft-id:focus {
outline: none;
border-bottom: 2px solid #ff7043; /* Sichtbarerer Fokus-Indikator */
background-color: rgba(
255,
112,
67,
0.05
); /* Subtiler Hintergrund beim Fokus */
}
.edit-mode .view-only {
display: none;
}
.view-mode .edit-only {
display: none;
}
.view-mode #hangarGrid input,
.view-mode #hangarGrid select,
.view-mode #hangarGrid textarea,
.view-mode #secondaryHangarGrid input,
.view-mode #secondaryHangarGrid select,
.view-mode #secondaryHangarGrid textarea {
pointer-events: none;
border-color: transparent;
background-color: transparent;
}
.view-mode #hangarGrid .notes-textarea,
.view-mode #secondaryHangarGrid .notes-textarea {
background-color: var(--bg-color-medium);
}
.mode-toggle {
display: flex;
align-items: center;
margin-right: 15px;
}
.mode-toggle-label {
margin-right: 8px;
font-size: 12px;
color: var(--menu-text);
}
.toggle-switch {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #d1d5db;
transition: 0.3s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--menu-accent);
}
input:checked + .toggle-slider:before {
transform: translateX(24px);
}
.position-container {
display: flex;
align-items: center;
gap: 4px;
}
.position-label {
font-size: 12px;
font-weight: 500;
color: #4b5563;
}
.position-input {
width: 40px;
text-align: center;
font-size: 12px;
border: 1px solid #e5e7eb;
border-radius: 3px;
padding: 2px 4px;
background-color: white;
color: #1f2937;
}
.header-elements {
display: grid;
grid-template-columns: auto 1fr auto; /* left (status), center (badge), right (position) */
align-items: center;
width: 100%;
column-gap: 8px;
}
/* Explicit column placement so right block stays put even if no badge exists */
.header-elements .status-dropdown-container { grid-column: 1; }
.header-elements .last-update-badge { grid-column: 2; }
.header-elements .position-container { grid-column: 3; justify-self: end; }
.section-divider {
width: 100%;
height: 1px;
background-color: #cbd5e1;
margin: var(--section-spacing, 12px) 0;
position: relative;
transform: none;
text-align: center;
}
.section-divider::after {
content: "APRON";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background-color: #ffffff;
padding: 0 12px;
font-size: 12px;
font-weight: 500;
color: #64748b;
letter-spacing: 0.05em;
}
.section-label {
font-size: 15px;
font-weight: 600;
color: #334155;
margin-bottom: var(--section-spacing, 12px);
margin-top: var(--section-spacing, 12px);
padding-left: 5px;
transform: none;
letter-spacing: 0.02em;
border-left: 3px solid #ff7043;
padding-left: 8px;
}
.section-label-first {
margin-top: 0 !important;
}
/* Left main menu & submenu (new) */
.left-menu {
width: 72px;
min-width: 72px;
height: 100vh;
position: sticky;
top: 0;
background: var(--menu-bg);
border-right: 1px solid var(--menu-border);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 0;
z-index: 30;
}
.left-menu .menu-item {
width: 56px;
height: 56px;
border-radius: 12px;
color: var(--menu-text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
user-select: none;
text-decoration: none;
text-align: center;
}
.left-menu .menu-item:hover {
border-color: var(--menu-border);
background: #fff;
}
.left-menu .menu-item.active {
border-color: var(--menu-border);
background: #fff;
}
.left-menu .menu-icon {
width: 18px;
height: 18px;
display: block;
color: var(--menu-text);
}
.left-menu .menu-label {
font-size: 10px;
line-height: 1;
color: var(--menu-text);
white-space: nowrap;
}
/* Submenu panels open beside the left rail */
.submenu-panel {
position: fixed;
top: 0;
bottom: 0;
left: 72px; /* width of left-menu */
width: 360px;
max-width: 420px;
background: #ffffff;
border-right: 1px solid var(--menu-border);
padding: 16px 20px;
overflow-y: auto;
z-index: 40;
box-shadow: none; /* design says no shadows */
}
.submenu-panel.hidden { display: none; }
transform: translateX(-100%);
opacity: 0;
pointer-events: none;
/* Keep in DOM for smooth animation instead of display: none */
}
/* Global utility hidden class used throughout the app */
.hidden { display: none !important; }
/* Scrim overlay for temporary submenu drawer */
.submenu-scrim {
position: fixed;
top: 0;
bottom: 0;
left: 72px; /* start after the left rail so icons remain clickable */
right: 0;
background: rgba(0, 0, 0, 0.25);
z-index: 35; /* between left-menu (30) and submenu-panel (40) */
}
.submenu-scrim.hidden { display: none; }
opacity: 0;
pointer-events: none;
/* Keep in DOM for smooth fade instead of display: none */
}
.submenu-title {
color: #1f2937 !important; /* Dark gray for excellent contrast in light mode */
font-weight: 700;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--menu-border);
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 12px;
}
/* Additional specific rules to ensure all submenu titles are visible */
#submenu-update .submenu-title,
#submenu-sync .submenu-title,
#submenu-display .submenu-title,
#submenu-export .submenu-title,
#submenu-project .submenu-title {
color: #1f2937 !important; /* Force dark text in light mode for all submenus */
}
/* Dark mode variants for left rail and submenu */
.dark-mode .left-menu {
background: var(--bg-tertiary);
border-right-color: var(--border-color);
}
.dark-mode .left-menu .menu-item { color: var(--text-primary); }
.dark-mode .left-menu .menu-item:hover,
.dark-mode .left-menu .menu-item.active { background: var(--bg-secondary); border-color: var(--border-color); }
.dark-mode .left-menu .menu-icon,
.dark-mode .left-menu .menu-label { color: var(--text-primary); }
.dark-mode .submenu-panel {
background: var(--bg-primary); /* submenu uses main colour */
border-right-color: var(--border-color); /* borders secondary */
}
/* Submenu inputs/selects should use secondary colour per menu exception */
.dark-mode .submenu-panel .sidebar-form-control,
.dark-mode .submenu-panel .sidebar-form-select {
background-color: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
.dark-mode .submenu-title { color: var(--text-primary); border-bottom-color: var(--border-color); }
.dark-mode #submenu-update .submenu-title,
.dark-mode #submenu-sync .submenu-title,
.dark-mode #submenu-display .submenu-title,
.dark-mode #submenu-export .submenu-title,
.dark-mode #submenu-project .submenu-title { color: var(--text-primary) !important; }
.dark-mode .submenu-panel label { color: var(--text-secondary); }
/* Buttons in submenu to match palette */
.submenu-panel .sidebar-btn-primary { background-color: var(--menu-accent) !important; border-color: var(--menu-accent) !important; }
.submenu-panel .sidebar-btn-primary:hover { filter: brightness(0.9); }
/* Slider inactive track */
.submenu-panel input[type="range"] { accent-color: var(--menu-accent); }
/* Submenu - new design alignment and controls */
.submenu-panel .section-label {
font-weight: 600;
font-size: 10px;
color: var(--menu-text);
border-left: 3px solid var(--menu-accent);
padding-left: 8px;
margin: 10px 0 8px;
}
.submenu-panel .sidebar-form-group { margin-bottom: 16px; }
.submenu-panel .sidebar-input-group {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.submenu-panel .sidebar-form-row {
display: grid;
grid-template-columns: 160px auto; /* fixed title width, controls aligned right */
gap: 8px;
align-items: center;
}
.submenu-panel .sidebar-form-row .input-container { display: flex; justify-content: flex-end; width: 100%; }
.submenu-panel .sidebar-form-row > label { margin-bottom: 0; }
.submenu-panel label { color: var(--menu-text); font-size: 10px; font-weight: 700; display: block; margin-bottom: 6px; }
.submenu-panel .sidebar-form-control,
.submenu-panel .sidebar-form-select {
border: 1px solid var(--menu-border);
color: var(--menu-text);
background: #f7f7f7;
border-radius: 8px;
height: 38px;
padding: 8px 12px;
line-height: 22px;
}
/* fixed width for inputs in right column (reduced by half) */
.submenu-panel .input-container .sidebar-form-control,
.submenu-panel .input-container .sidebar-form-select { width: 120px; }
.submenu-panel .sidebar-form-control:focus,
.submenu-panel .sidebar-form-select:focus {
background: #fff;
border-color: #d0d0d0;
outline: none;
}
.submenu-panel .sidebar-btn-secondary {
background: #fff !important;
border: 1px solid var(--menu-border) !important;
color: var(--menu-text) !important;
}
.submenu-panel .sidebar-btn-secondary:hover { background: #fdfdfd !important; }
/* Formularelemente auf Weiß für besseren Kontrast */
.sidebar-form-control {
display: block;
width: 100%;
padding: 0.5rem;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
color: #333;
font-size: 14px;
transition: all 0.2s ease;
}
.sidebar-form-control:focus {
border-color: #ff7043;
outline: none;
box-shadow: 0 0 0 2px rgba(255, 112, 67, 0.3);
}
/* Optimierte Button-Margins und Layout */
.sidebar-btn {
padding: 8px 16px;
/*min-height: 38px;*/
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Primäre Buttons in Orange beibehalten */
.sidebar-btn-primary {
background-color: var(--menu-accent) !important;
color: white !important;
}
.sidebar-btn-primary:hover {
background-color: #d48400 !important; /* Slightly darker accent on hover */
}
/* Sekundäre Buttons mit besserem Kontrast zum dunklen Hintergrund */
.sidebar-btn-secondary {
background-color: #d1d5db !important; /* Hellgrau für guten Kontrast */
color: #1f2937 !important; /* Dunkelgrau für Text */
}
.sidebar-btn-secondary:hover {
background-color: #f3f4f6 !important; /* Helleres Grau beim Hover */
}
/* Accent Button für Quick Export mit grünem Farbschema */
/* Verbesserte Button-Gruppen mit optimierten Abständen */
.sidebar-input-group {
display: flex;
margin-bottom: 10px;
width: 100%;
gap: 8px;
align-items: center;
}
/* Optimiertes 2-Spalten Layout für Formularelemente */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
/* Optimierte Dropdown-Selects für Display Options */
.sidebar-form-select {
display: block;
width: 100%;
padding: 0.5rem;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
color: #333;
font-size: 14px;
transition: all 0.2s ease;
max-width: 100%; /* Verhindert zu breite Dropdowns */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 32px; /* Platz für das Dropdown-Pfeil-Icon */
}
/* Layouts für Display Options spezifische Einträge */
/* Verbessertes Layout für die Sidebar-Form-Groups - weniger Abstand nach unten */
.sidebar-form-group {
margin-bottom: 12px; /* Reduzierter Abstand */
width: 100%;
}
/* Verbessertes horizontales Layout für kleine Eingabefelder + Button */
.sidebar-form-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
width: 100%;
}
/* Button innerhalb einer Zeile */
.sidebar-form-row .sidebar-btn {
flex-shrink: 0;
}
/* Konsistentere Abstände für Formularelemente */
.sidebar-form-control,
.sidebar-form-select {
margin-bottom: 0;
}
/* Volle Breite für Buttons innerhalb von Accordion-Inhalten */
/* Verbesserte visuelle Hierarchie für info-blocks */
/* Flugkarten Design */
#airport-flights-container .card-header {
background-color: var(--color-industrial-medium, #5d6b89);
padding: 8px 12px;
color: white;
}
#airport-flights-container .header-elements {
display: flex;
justify-content: space-between;
align-items: center;
}
#airport-flights-container .flight-header-info {
display: flex;
flex-direction: column;
}
#airport-flights-container .flight-number {
font-weight: bold;
font-size: 1.1rem;
}
#airport-flights-container .flight-reg {
font-size: 0.8rem;
opacity: 0.8;
}
#airport-flights-container .flight-time-display {
font-size: 1.25rem;
font-weight: 500;
}
#airport-flights-container .info-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 1rem;
align-items: center;
}
#airport-flights-container .flights-section h3 {
border-bottom: 1px solid rgba(93, 107, 137, 0.2);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
/* Unified table design for airport-flights, plannerTable, and fleetTable */
#airport-flights-container .flight-table,
#plannerTable,
#fleetTable {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
font-size: 0.9rem;
/* Unified font styling for table elements */
text-size-adjust: 100%;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-feature-settings: normal;
font-variation-settings: normal;
}
#airport-flights-container .flight-table th,
#airport-flights-container .flight-table td,
#plannerTable th,
#plannerTable td,
#fleetTable th,
#fleetTable td {
padding: 0.75rem;
text-align: left;
border: none !important; /* Remove all borders */
/* Unified font styling */
font-size: 14px;
font-weight: 400;
}
#airport-flights-container .flight-table th,
#plannerTable th,
#fleetTable th {
background-color: #f9fafb;
font-weight: 600;
color: #374151;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
#airport-flights-container .flight-table tbody tr:nth-child(even),
#plannerTable tbody tr:nth-child(even),
#fleetTable tbody tr:nth-child(even) {
background-color: #f9fafb;
}
/* Remove hover styles as requested - OVERRIDE COMPLETELY including zebra stripes */
#airport-flights-container .flight-table tr:hover,
#airport-flights-container .flight-table tbody tr:hover,
#airport-flights-container .flight-table tbody tr:nth-child(odd):hover,
#airport-flights-container .flight-table tbody tr:nth-child(even):hover,
#airport-flights-container .flight-table tr:hover td,
#plannerTable tbody tr:hover,
#plannerTable tbody tr:nth-child(odd):hover,
#plannerTable tbody tr:nth-child(even):hover,
#plannerTable tbody tr.zebra-odd:hover,
#plannerTable tbody tr.zebra-even:hover,
#plannerTable tbody tr:hover td,
#fleetTable tbody tr:hover,
#fleetTable tbody tr:nth-child(odd):hover,
#fleetTable tbody tr:nth-child(even):hover,
#fleetTable tbody tr:hover td {
background-color: inherit !important;
transition: none !important;
pointer-events: auto !important;
}
#airport-flights-container .flight-number {
font-weight: 600;
color: #111827;
}
#airport-flights-container .flight-reg {
color: #6b7280;
font-size: 0.875rem;
}
#airport-flights-container .flight-time {
font-weight: 600;
color: #111827;
font-size: 1rem;
}
#airport-flights-container .flight-status {
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
display: inline-block;
}
#airport-flights-container .status-scheduled {
background-color: #e5e7eb;
color: #4b5563;
}
#airport-flights-container .status-airborne {
background-color: #dbeafe;
color: #2563eb;
}
#airport-flights-container .status-landed {
background-color: #d1fae5;
color: #059669;
}
#airport-flights-container .status-delayed {
background-color: #fef3c7;
color: #d97706;
}
/* Towing status select styling — SOURCE OF TRUTH
- Applies to both light and dark themes
- Light mode: Neutral state is borderless and transparent (no chip)
- Dark mode: Chip palette with subtle backgrounds; :disabled keeps dark bg and colors
- Read-only mode sets :disabled via SharingManager.applyReadOnlyUIState(); these rules
explicitly override UA disabled styling to prevent white backgrounds in dark mode
- Avoid adding Tow styles in other CSS files; keep adjustments here
*/
/* Überarbeitet: pill design, bessere Sichtbarkeit im Light Mode (wie Header Chips) */
.tow-status-container {
width: 100%;
}
.tow-status-selector {
/* Neutral base; themed rules below handle colors */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: auto;
min-width: 0;
height: 26px; /* same as status selector */
padding: 2px 6px;
border-radius: 2px;
font-size: 12px;
font-weight: 600;
text-align: center;
background: transparent;
color: inherit;
border: 1px solid transparent;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Dropdown-Symbol unauffälliger machen */
.tow-status-selector::-ms-expand { display: none; }
/* Dropdown options: ensure good contrast in light menus */
.tow-status-selector option { font-size: 0.9rem; padding: 2px; color: #111827; }
/* Light mode base: left accent border and small radius */
html:not(.dark-mode) .tow-status-selector {
border-left: 3px solid #cbd5e1 !important; /* base */
border-radius: 2px !important;
border-color: #e5e7eb !important;
}
/* Light mode chip colors (match header indicators) */
/* Light mode: match header Sync mode chip palette */
html:not(.dark-mode) .tow-status-selector.tow-neutral {
/* Neutral in light mode should look invisible (no chip) */
background: transparent !important;
color: #475569 !important; /* keep text legible if any */
border-color: transparent !important;
border-left: 0 !important;
box-shadow: none !important;
}
html:not(.dark-mode) .tow-status-selector.tow-initiated {
background: #fff7ed !important; /* orange-50 */
color: #9a3412 !important; /* orange-800 */
border-color: #fed7aa !important; /* orange-200 */
border-left-color: #f59e0b !important; /* orange-500 */
}
html:not(.dark-mode) .tow-status-selector.tow-ongoing {
background: #eff6ff !important; /* blue-50 */
color: #1d4ed8 !important; /* blue-700 */
border-color: #bfdbfe !important; /* blue-200 */
border-left-color: #3b82f6 !important; /* blue-500 */
}
html:not(.dark-mode) .tow-status-selector.tow-on-position {
background: #ecfdf5 !important; /* emerald-50 */
color: #065f46 !important; /* emerald-800 */
border-color: #a7f3d0 !important; /* emerald-200 */
border-left-color: #10b981 !important; /* emerald-500 */
}
/* Hover/focus cues */
html:not(.dark-mode) .tow-status-selector:hover { border-color: #cbd5e1 !important; }
html:not(.dark-mode) .tow-status-selector:focus { outline: none; border-color: #94a3b8 !important; box-shadow: 0 0 0 2px rgba(148,163,184,.25); }
/* Light mode: neutral disabled must remain invisible */
html:not(.dark-mode) .tow-status-selector.tow-neutral:disabled {
background: transparent !important;
border-color: transparent !important;
border-left: 0 !important;
opacity: 0.9;
}
/* Default to neutral if no state class present */
html:not(.dark-mode) .tow-status-selector:not(.tow-initiated):not(.tow-ongoing):not(.tow-on-position) {
/* Fallback neutral: also borderless and transparent */
background: transparent !important;
color: #475569 !important;
border-color: transparent !important;
border-left: 0 !important;
box-shadow: none !important;
}
/* Dark mode: match header chip palette */
.dark-mode .tow-status-selector {
/* Force custom painting in dark mode (avoid UA white backgrounds) */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-left-width: 3px;
border-radius: 2px;
}
.dark-mode .tow-status-selector.tow-neutral {
background: var(--bg-secondary) !important;
border-color: var(--border-color) !important;
color: var(--text-secondary) !important;
border-left-color: #64748b !important; /* slate-500 */
}
/* Dark mode: default to neutral look if no explicit tow-* class is present */
.dark-mode .tow-status-selector:not(.tow-initiated):not(.tow-ongoing):not(.tow-on-position) {
background: var(--input-bg) !important;
color: var(--text-secondary) !important;
border: 1px solid transparent !important;
border-left-color: #64748b !important;
}
.dark-mode .tow-status-selector.tow-initiated {
background: rgba(245, 158, 11, 0.15) !important; /* orange */
border-color: #b45309 !important;
color: #fdba74 !important; /* orange-300 */
border-left-color: #f59e0b !important;
}
.dark-mode .tow-status-selector.tow-ongoing {
background: rgba(59, 130, 246, 0.15) !important; /* blue */
border-color: #1d4ed8 !important;
color: #93c5fd !important; /* blue-300 */
border-left-color: #3b82f6 !important;
}
.dark-mode .tow-status-selector.tow-on-position {
background: rgba(16, 185, 129, 0.15) !important; /* emerald */
border-color: #065f46 !important;
color: #a7f3d0 !important; /* emerald-200 */
border-left-color: #10b981 !important;
}
/* Global tile spacing variables */
:root { --tile-gap: 24px; }
/* Fixed, user-friendly padding between tiles (overrides Tailwind gap-4) */
#hangarGrid, #secondaryHangarGrid { gap: var(--tile-gap, 24px) !important; grid-gap: var(--tile-gap, 24px) !important; padding: var(--tile-grid-padding, 16px) !important; }
/* Make tile inner content padding equal to grid padding */
.hangar-cell .p-4 { padding: var(--tile-inner-padding, var(--tile-grid-padding, 12px)) !important; }
/* Ensure timetable/fleet containers use same padding baseline */
.fleet-table-container {
padding: var(--tile-grid-padding, 12px) !important;
border: 1px solid #e5e7eb;
border-radius: 4px;
}
.dark-mode .fleet-table-container {
border-color: var(--border-color, #374151);
}
/* Optimierte Grid-Layouts für verschiedene Kachelanzahlen */
#secondaryHangarGrid.secondary-count-1 {
grid-template-columns: 1fr;
justify-items: center;
}
#secondaryHangarGrid.secondary-count-2 {
grid-template-columns: 1fr 1fr;
justify-items: center;
column-gap: 2rem; /* Größerer Abstand zwischen den beiden Kacheln */
}
#secondaryHangarGrid.secondary-count-3 {
grid-template-columns: 1fr 1fr 1fr;
}
/* Standardwert für 4+ Kacheln bleibt unverändert */
/* Subtle tile delete button (hover-only in header) */
.card-header { position: relative; }
.tile-delete-btn {
position: absolute;
top: 6px;
right: 8px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #9ca3af; /* slate-400 */
opacity: 0;
transform: scale(0.98);
transition: opacity 120ms ease, transform 120ms ease, color 120ms ease;
cursor: pointer;
padding: 0;
}
.hangar-cell:hover .tile-delete-btn { opacity: 1; transform: scale(1); }
.tile-delete-btn:hover { color: #ef4444; }
.tile-delete-btn[aria-disabled="true"] { opacity: 0 !important; pointer-events: none; }
/* Inline placement style for last-update badge when inside header */
.header-elements .last-update-badge {
position: static !important;
transform: none !important;
justify-self: center;
margin: 0 auto;
}
/* Subtle author pill for multi-master updates */
.update-author-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 6px;
border-radius: 9999px;
font-size: 10px;
line-height: 1;
background: #f8fafc; /* slate-50 */
color: #475569; /* slate-600 */
border: 1px solid #e2e8f0; /* slate-200 */
box-shadow: none;
}
.update-author-pill-btn {
background: transparent;
border: 1px solid #94a3b8; /* slate-400 */
color: #334155; /* slate-700 */
border-radius: 9999px;
padding: 0 6px;
font-size: 10px;
line-height: 14px;
height: 14px;
cursor: pointer;
}
.update-author-pill-btn:hover {
background: #e2e8f0; /* slate-200 */
}
.dark-mode .update-author-pill {
background: rgba(148, 163, 184, 0.12); /* slate-400 alpha */
color: #cbd5e1; /* slate-300 */
border-color: rgba(148,163,184,0.35);
}
.dark-mode .update-author-pill-btn {
border-color: rgba(148,163,184,0.6);
color: #e2e8f0;
}
.dark-mode .update-author-pill-btn:hover {
background: rgba(148,163,184,0.25);
}
.dark-mode .tile-delete-btn { color: #6b7280; }
.dark-mode .tile-delete-btn:hover { color: #f87171; }
/* Dark Mode Styles */
.dark-mode {
color-scheme: dark;
/* Einheitliche Hintergrund-Hierarchie */
--bg-primary: #202224; /* Main */
--bg-secondary: #303437; /* Secondary */
--bg-tertiary: #303437; /* Small menu uses secondary */
--bg-input: #303437; /* Inputs use secondary for uniform tile look */
/* Klare Textfarben-Hierarchie */
--text-primary: #f7fafc; /* Primärer Text (Aircraft ID) */
--text-secondary: #e2e8f0; /* Sekundärer Text (Labels) */
--text-tertiary: #a0aec0; /* Tertiärer Text (Values) */
--text-muted: #718096; /* Placeholder Text */
/* Einheitliche UI-Elemente */
--card-bg: #303437; /* Tiles match header background */
--card-header-bg: #303437; /* Tile header = secondary */
--input-bg: #303437; /* Inputs align with tiles */
--input-text: #e2e8f0; /* Input-Text */
--border-color: #303437; /* Borders use secondary */
/* Verbesserte Status-Farben für Dark Mode */
--status-ready: #48bb78; /* Sichtbares Grün */
--status-maintenance: #ed8936; /* Sichtbares Orange */
--status-aog: #f56565; /* Sichtbares Rot */
--status-neutral: #a0aec0; /* Neutrales Grau */
}
/* Planner-only: darker grey for tile labels in dark mode */
.dark-mode #hangarGrid .info-label,
.dark-mode #secondaryHangarGrid .info-label {
color: var(--text-tertiary) !important;
}
/* Background und Text Colors */
body.dark-mode {
background-color: var(--bg-primary);
color: var(--text-primary);
}
.dark-mode .hangar-container {
background-color: var(--bg-primary);
}
/* Verbesserte Sidebar-Styling im Dark Mode */
/* Form-Elemente im Dark Mode */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
background-color: var(--input-bg);
color: var(--input-text);
border-color: var(--border-color);
}
/* Enhanced dark mode styling for datetime-local inputs */
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"],
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"] {
color-scheme: dark;
background: linear-gradient(145deg, var(--input-bg) 0%, #2a2e32 100%);
border: 1px solid var(--border-color);
color: var(--input-text);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Dark mode hover state */
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:hover,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:hover {
background: linear-gradient(145deg, #353940 0%, #3a3f45 100%) !important;
border-color: rgba(148, 163, 184, 0.6) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* Dark mode focus state */
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:focus,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus {
background: linear-gradient(145deg, var(--input-bg) 0%, #2d3136 100%) !important;
border-color: #ff7043 !important;
box-shadow: 0 0 0 2px rgba(255, 112, 67, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
/* Dark mode datetime editor styling */
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit {
color: var(--input-text);
font-weight: 500;
}
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
background: transparent;
border-radius: 4px;
padding: 2px 4px;
}
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:hover::-webkit-datetime-edit-fields-wrapper,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:hover::-webkit-datetime-edit-fields-wrapper {
background: rgba(255, 112, 67, 0.1);
}
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit-text,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-datetime-edit-text {
color: var(--text-tertiary);
font-weight: 400;
}
/* Dark mode calendar picker indicator with custom SVG */
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]::-webkit-calendar-picker-indicator {
background: url('data:image/svg+xml,') center/contain no-repeat;
opacity: 0.7;
filter: none;
}
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
background: url('data:image/svg+xml,') center/contain no-repeat;
opacity: 1;
transform: scale(1.1);
}
/* Legacy dark mode support for other date/time inputs */
.dark-mode input[type="date"],
.dark-mode input[type="time"] {
color-scheme: dark;
background-color: var(--input-bg);
color: var(--input-text);
border: 1px solid var(--border-color);
}
.dark-mode input[type="date"]::-webkit-datetime-edit,
.dark-mode input[type="time"]::-webkit-datetime-edit {
color: var(--input-text);
}
.dark-mode input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dark-mode input[type="time"]::-webkit-datetime-edit-fields-wrapper {
background-color: transparent;
}
.dark-mode input[type="date"]::-webkit-datetime-edit-text,
.dark-mode input[type="time"]::-webkit-datetime-edit-text {
color: var(--text-secondary);
}
.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
.dark-mode input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(90%);
opacity: 0.95;
background: transparent;
}
.dark-mode input[type="date"]::-webkit-inner-spin-button,
.dark-mode input[type="time"]::-webkit-inner-spin-button,
.dark-mode input[type="date"]::-webkit-clear-button,
.dark-mode input[type="time"]::-webkit-clear-button {
filter: invert(100%);
}
/* Dark mode interactive enhancements */
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:active,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:focus::before,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus::before {
background: linear-gradient(45deg, transparent, rgba(255, 112, 67, 0.2), transparent);
}
/* Dark mode tooltip */
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:hover::after,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:hover::after {
background: rgba(20, 20, 25, 0.95);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
/* Dark mode high contrast support */
@media (prefers-contrast: high) {
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"],
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"] {
border: 2px solid #ffffff;
background: #000000;
color: #ffffff;
}
.dark-mode #hangarGrid .hangar-cell input[type="datetime-local"]:focus,
.dark-mode #secondaryHangarGrid .hangar-cell input[type="datetime-local"]:focus {
border-color: #ffff00;
box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.5);
}
}
/* Inline compact date/time button inside inputs */
.dark-mode .compact-dt-wrap .compact-dt-btn {
background: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-secondary);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.dark-mode .compact-dt-wrap .compact-dt-btn svg { color: var(--text-secondary); }
.dark-mode .compact-dt-wrap .compact-dt-btn:hover { background: rgba(255,255,255,0.06); }
/* Date picker navigation buttons */
.date-nav-btn {
width: 24px;
height: 24px;
border: 1px solid #cbd5e1;
border-radius: 4px;
background: #f8fafc;
color: #475569;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
user-select: none;
}
.date-nav-btn:hover {
background: #e2e8f0;
border-color: #94a3b8;
transform: translateY(-1px);
}
.date-nav-btn:active {
background: #cbd5e1;
transform: translateY(0);
}
/* Dark mode for navigation buttons */
.dark-mode .date-nav-btn {
background: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-secondary);
}
.dark-mode .date-nav-btn:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(148,163,184,0.6);
}
.dark-mode .date-nav-btn:active {
background: rgba(255,255,255,0.12);
}
.dark-mode .sidebar-form-control,
.dark-mode .sidebar-form-select {
background-color: var(--input-bg);
color: var(--input-text);
border-color: var(--border-color);
}
.dark-mode .sidebar-btn {
background-color: var(--bg-tertiary);
color: var(--text-primary);
}
.dark-mode .sidebar-btn-primary {
background-color: var(--menu-accent) !important; /* System orange */
border-color: var(--menu-accent) !important;
color: white !important;
}
/* Hangar-Kacheln im Dark Mode - Einheitliches Design */
.dark-mode .hangar-cell {
background-color: var(
--card-bg
) !important; /* Forciere einheitlichen Hintergrund */
color: var(--text-primary);
border: 1px solid transparent;
box-shadow: none; /* unify tiles, remove glow differences */
}
.dark-mode .hangar-cell:hover {
border-color: var(--border-color);
}
/* MAXIMALE PRIORITÄT: Überschreibe alle möglichen Status-basierten Hintergründe im Dark Mode */
.dark-mode .hangar-cell[style*="background"],
.dark-mode .hangar-cell[class*="orange"],
.dark-mode .hangar-cell[class*="status"],
.dark-mode .hangar-cell[class*="tow"] {
background-color: var(
--card-bg
) !important; /* FORCIERE Dark Mode Hintergrund */
}
/* WICHTIG: Verhindere Status-basierte Kachel-Hintergründe im Dark Mode */
.dark-mode .hangar-cell.tow-initiated,
.dark-mode .hangar-cell.tow-ongoing,
.dark-mode .hangar-cell.tow-on-position,
.dark-mode .hangar-cell.status-aog,
.dark-mode .hangar-cell.status-ready,
.dark-mode .hangar-cell.status-maintenance,
.dark-mode .hangar-cell.aog,
.dark-mode .hangar-cell.ready,
.dark-mode .hangar-cell.maintenance {
background-color: var(
--card-bg
) !important; /* Überschreibe ALLE Status-Hintergründe */
}
/* Ensure inner content wrapper matches tile bg (primary and secondary) */
.dark-mode #hangarGrid .hangar-cell > .p-4,
.dark-mode #secondaryHangarGrid .hangar-cell > .p-4,
.dark-mode #hangarGrid .hangar-cell > .p-3,
.dark-mode #secondaryHangarGrid .hangar-cell > .p-3 {
background-color: var(--card-bg) !important;
}
.dark-mode .card-header {
background-color: var(--card-header-bg);
color: var(--text-primary);
border-color: var(--border-color);
}
.dark-mode .aircraft-id {
background-color: var(--input-bg) !important;
color: var(--text-primary);
border: none !important;
font-weight: 700;
font-size: 1.35rem;
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.dark-mode .aircraft-id:focus {
background-color: rgba(255, 112, 67, 0.15);
border-bottom: 2px solid #ff7043;
}
/* Alle Input-Elemente einheitlich */
.dark-mode .info-input,
.dark-mode .position-input,
.dark-mode .notes-textarea,
.dark-mode .tow-status-selector {
/* Inputs/selects default to main colour in dark mode */
background-color: var(--input-bg) !important;
color: var(--text-primary);
border: 1px solid transparent !important; /* remove default borders inside tiles */
}
/* Board view Status selector: borderless in dark mode (even when disabled) */
.dark-mode #hangarGrid .hangar-cell .status-selector,
.dark-mode #secondaryHangarGrid .hangar-cell .status-selector {
background-color: var(--card-header-bg) !important; /* match tile header */
color: var(--text-secondary) !important;
border: none !important;
box-shadow: none !important;
}
.dark-mode #hangarGrid .hangar-cell .status-selector:disabled,
.dark-mode #secondaryHangarGrid .hangar-cell .status-selector:disabled {
background-color: var(--input-bg) !important; /* keep dark bg in RO mode */
border: none !important;
box-shadow: none !important;
}
/* Subtle hover like other inputs */
.dark-mode #hangarGrid .hangar-cell .status-selector:hover,
.dark-mode #secondaryHangarGrid .hangar-cell .status-selector:hover {
background-color: rgba(255, 255, 255, 0.03) !important;
border: none !important;
}
/* Subtle hover/focus to keep usability without strong borders */
.dark-mode .aircraft-id:hover,
.dark-mode .info-input:hover,
.dark-mode .position-input:hover,
.dark-mode .notes-textarea:hover,
.dark-mode .status-selector:hover,
.dark-mode select.status-selector:hover,
.dark-mode .tow-status-selector:hover {
background-color: rgba(255, 255, 255, 0.03) !important; /* subtle hover background only */
border-color: transparent !important;
}
.dark-mode .info-input:focus,
.dark-mode .position-input:focus,
.dark-mode .notes-textarea:focus,
.dark-mode .status-selector:focus,
.dark-mode select.status-selector:focus,
.dark-mode .tow-status-selector:focus {
background-color: rgba(255, 112, 67, 0.08) !important; /* soft accent */
border-color: rgba(255, 112, 67, 0.5) !important;
outline: none !important;
}
.dark-mode .info-input:focus,
.dark-mode .notes-textarea:focus {
background-color: rgba(255, 112, 67, 0.15) !important;
border-color: #ff7043 !important;
}
/* Konsistente Textfarben */
.dark-mode .info-label {
color: var(--text-secondary);
}
.dark-mode .info-value {
color: var(--text-tertiary);
}
/* Dark mode: ensure disabled inputs/selects keep dark background (read-only mode) */
.dark-mode input:disabled,
.dark-mode textarea:disabled,
.dark-mode select:disabled,
.dark-mode .status-selector:disabled,
.dark-mode .tow-status-selector:disabled {
background-color: var(--input-bg) !important;
color: var(--text-secondary) !important;
border-color: var(--border-color) !important;
-webkit-text-fill-color: var(--text-secondary) !important; /* Safari */
opacity: 0.9; /* visual cue but keep readable */
appearance: none;
}
/* Dark mode: keep disabled placeholders dim in Sync-only mode */
.dark-mode input:disabled::placeholder,
.dark-mode textarea:disabled::placeholder {
color: var(--text-muted) !important;
/* WebKit/Blink: ensure placeholder inherits dim color despite -webkit-text-fill-color on disabled */
-webkit-text-fill-color: var(--text-muted) !important;
}
/* Read-only (Sync) mode: hide placeholders completely in Planner tiles */
.read-only #hangarGrid .hangar-cell input::placeholder,
.read-only #hangarGrid .hangar-cell textarea::placeholder,
.read-only #secondaryHangarGrid .hangar-cell input::placeholder,
.read-only #secondaryHangarGrid .hangar-cell textarea::placeholder {
color: transparent !important;
/* WebKit/Blink: ensure placeholder is hidden regardless of input text fill rules */
-webkit-text-fill-color: transparent !important;
}
/* Preserve tow chip colors when disabled */
.dark-mode .tow-status-selector.tow-neutral:disabled {
background: var(--bg-secondary) !important;
border-color: var(--border-color) !important;
color: var(--text-secondary) !important;
border-left-color: #64748b !important;
}
.dark-mode .tow-status-selector.tow-initiated:disabled {
background: rgba(245, 158, 11, 0.15) !important;
border-color: #b45309 !important;
color: #fdba74 !important;
border-left-color: #f59e0b !important;
}
.dark-mode .tow-status-selector.tow-ongoing:disabled {
background: rgba(59, 130, 246, 0.15) !important;
border-color: #1d4ed8 !important;
color: #93c5fd !important;
border-left-color: #3b82f6 !important;
}
.dark-mode .tow-status-selector.tow-on-position:disabled {
background: rgba(16, 185, 129, 0.15) !important;
border-color: #065f46 !important;
color: #a7f3d0 !important;
border-left-color: #10b981 !important;
}
/* Status-Lichter im Dark Mode - deutlich sichtbar */
.dark-mode .status-light[data-status="ready"] {
background-color: var(--status-ready);
border-color: var(--status-ready);
box-shadow: 0 0 4px rgba(72, 187, 120, 0.4);
}
.dark-mode .status-light[data-status="maintenance"] {
background-color: var(--status-maintenance);
border-color: var(--status-maintenance);
box-shadow: 0 0 4px rgba(237, 137, 54, 0.4);
}
.dark-mode .status-light[data-status="aog"] {
background-color: var(--status-aog);
border-color: var(--status-aog);
box-shadow: 0 0 4px rgba(245, 101, 101, 0.4);
}
.dark-mode .status-light[data-status="neutral"] {
background-color: var(--status-neutral);
border-color: var(--status-neutral);
}
/* Legacy Status-Klassen für Dark Mode */
.dark-mode .status-ready {
background-color: var(--status-ready) !important;
box-shadow: 0 0 4px rgba(72, 187, 120, 0.4);
}
.dark-mode .status-maintenance {
background-color: var(--status-maintenance) !important;
box-shadow: 0 0 4px rgba(237, 137, 54, 0.4);
}
.dark-mode .status-aog {
background-color: var(--status-aog) !important;
box-shadow: 0 0 4px rgba(245, 101, 101, 0.4);
}
/* Verbesserte Towing-Status im Dark Mode */
.dark-mode .tow-status-selector.tow-initiated {
background-color: rgba(237, 137, 54, 0.2) !important;
border-color: var(--status-maintenance);
/* In Dark Mode ist die Standardschriftfarbe weiß */
color: var(--text-primary) !important;
}
.dark-mode .tow-status-selector.tow-ongoing {
background-color: rgba(59, 130, 246, 0.2) !important;
border-color: #3b82f6;
/* In Dark Mode ist die Standardschriftfarbe weiß */
color: var(--text-primary) !important;
}
.dark-mode .tow-status-selector.tow-on-position {
background-color: rgba(72, 187, 120, 0.2) !important;
border-color: var(--status-ready);
/* In Dark Mode ist die Standardschriftfarbe weiß */
color: var(--text-primary) !important;
}
/* Inline badge for towing reminder next to Aircraft ID */
.tow-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
font-size: 11px;
line-height: 1;
border: 1px solid #10b981;
color: #065f46;
background: #d1fae5;
border-radius: 10px;
vertical-align: middle;
user-select: none;
}
.dark-mode .tow-badge {
border-color: #34d399;
color: #a7f3d0;
background: rgba(16, 185, 129, 0.15);
}
/* Placeholder-Text im Dark Mode */
.dark-mode .aircraft-id::placeholder,
.dark-mode .info-input::placeholder,
.dark-mode .notes-textarea::placeholder {
color: var(--text-muted) !important;
font-style: italic;
}
/* Light mode: borderless inputs and dropdowns with subtle hover */
/* IMPORTANT: Exclude remote-locked-field from transparent border rule */
body:not(.dark-mode) #hangarGrid .hangar-cell .aircraft-id:not(.remote-locked-field),
body:not(.dark-mode) #hangarGrid .hangar-cell .info-input:not(.remote-locked-field),
body:not(.dark-mode) #hangarGrid .hangar-cell .position-input:not(.remote-locked-field),
body:not(.dark-mode) #hangarGrid .hangar-cell .notes-textarea:not(.remote-locked-field),
body:not(.dark-mode) #hangarGrid .hangar-cell .status-selector:not(.remote-locked-field),
body:not(.dark-mode) #hangarGrid .hangar-cell select.status-selector:not(.remote-locked-field),
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .aircraft-id:not(.remote-locked-field),
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .info-input:not(.remote-locked-field),
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .position-input:not(.remote-locked-field),
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .notes-textarea:not(.remote-locked-field),
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .status-selector:not(.remote-locked-field),
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell select.status-selector:not(.remote-locked-field) {
border: 1px solid transparent !important;
box-shadow: none !important;
}
/* Remove auxiliary left status border for tow select in light mode to meet borderless look */
/* Left border accent enabled for Tow select in light mode (see newer styles above) */
/* Subtle hover background to indicate interactivity */
body:not(.dark-mode) #hangarGrid .hangar-cell .aircraft-id:hover,
body:not(.dark-mode) #hangarGrid .hangar-cell .info-input:hover,
body:not(.dark-mode) #hangarGrid .hangar-cell .position-input:hover,
body:not(.dark-mode) #hangarGrid .hangar-cell .notes-textarea:hover,
body:not(.dark-mode) #hangarGrid .hangar-cell .status-selector:hover,
body:not(.dark-mode) #hangarGrid .hangar-cell select.status-selector:hover,
body:not(.dark-mode) #hangarGrid .hangar-cell .tow-status-selector:hover,
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .aircraft-id:hover,
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .info-input:hover,
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .position-input:hover,
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .notes-textarea:hover,
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .status-selector:hover,
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell select.status-selector:hover,
body:not(.dark-mode) #secondaryHangarGrid .hangar-cell .tow-status-selector:hover {
background-color: rgba(0, 0, 0, 0.04) !important;
}
/* Header und andere UI-Elemente */
.dark-mode header {
background-color: var(--bg-tertiary);
}
.dark-mode .section-divider {
border-color: var(--border-color);
background-color: var(--border-color);
}
.dark-mode .section-divider::after {
background-color: var(--bg-primary);
color: var(--text-secondary);
}
/* Zoom-Slider Styling */
#displayZoom {
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 4px;
background: #d1d5db;
outline: none;
margin: 10px 0;
}
#displayZoom::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ff7043;
cursor: pointer;
}
#displayZoom::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #ff7043;
cursor: pointer;
}
.dark-mode #displayZoom {
background: #4b5563;
}
.dark-mode #displayZoom::-webkit-slider-thumb {
background: #ff7043;
}
.dark-mode #displayZoom::-moz-range-thumb {
background: #ff7043;
}
/* Weather Widget Styles */
#weather-widget {
display: flex;
align-items: center;
font-size: 0.9rem;
background: rgba(255, 255, 255, 0.8);
padding: 0.25rem 0.75rem;
border-radius: 1rem;
box-shadow: none;
filter: none;
text-shadow: none;
border: none;
transition: all 0.2s ease;
}
#weather-widget:hover {
background: rgba(255, 255, 255, 1);
box-shadow: none;
border: none;
}
.weather-airport {
font-weight: 500;
color: #5d6b89;
}
#weather-temp {
font-weight: 500;
}
#weather-icon {
color: #5d6b89;
}
#weather-description {
color: #5d6b89;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
/* Für Dark Mode */
.dark-mode #weather-widget {
background: rgba(58, 67, 84, 0.9);
color: #d1d5db;
}
.dark-mode .weather-airport,
.dark-mode #weather-icon,
.dark-mode #weather-description {
color: #d1d5db;
}
/* Styles für die Tabellenansicht - komplett neue Klassen, beeinflussen nicht die bestehende Ansicht */
.table-view .hangar-cell {
display: flex;
flex-direction: row !important;
align-items: center;
min-height: 60px;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 100% !important;
border-radius: 8px;
}
.table-view .hangar-cell .card-header {
width: 120px;
min-width: 120px;
height: 100%;
border-radius: 8px 0 0 8px !important;
display: flex;
align-items: center;
padding: 0 32px 0 0.5rem; /* leave space on right for the icon */
margin-right: 0.5rem;
}
.table-view .hangar-cell .card-header .header-elements {
display: flex; /* restore flex layout for table view */
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.table-view .hangar-cell .p-4 {
padding: 0.5rem !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100%;
}
.table-view .hangar-cell .p-3 {
padding: 0.5rem !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100%;
}
.table-view .aircraft-id {
width: 140px; /* Etwas breiter für die größere Schrift */
min-width: 140px;
text-align: left;
margin: 0 1rem 0 0;
padding: 0.25rem 0.5rem;
font-size: 1.1rem; /* Größer auch in der Tabellenansicht */
font-weight: 700; /* Konsistente Gewichtung */
height: 32px; /* Etwas höher für die größere Schrift */
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.table-view .info-grid {
display: flex;
flex-direction: row;
gap: 1rem;
margin: 0;
align-items: center;
flex-wrap: nowrap;
flex-grow: 1;
}
.table-view .info-label,
.table-view .info-value {
display: inline;
white-space: nowrap;
}
.table-view .info-grid > div {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.table-view .notes-container {
margin: 0 0 0 1rem;
width: 180px;
min-width: 180px;
}
.table-view .notes-textarea {
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
}
.table-view .tow-status-container {
width: 120px;
min-width: 120px;
}
/* Optimierte Grid-Layout für Tabellenansicht */
.table-view #hangarGrid,
.table-view #secondaryHangarGrid {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
/* Anpassungen für Dark Mode in Tabellenansicht */
.dark-mode.table-view .hangar-cell {
background-color: var(--card-bg);
}
.dark-mode.table-view .card-header {
background-color: var(--card-header-bg);
}
.dark-mode .info-input {
background-color: var(--input-bg);
color: var(--text-primary);
border: 1px solid transparent; /* remove default border inside tiles */
}
.dark-mode .info-input:focus {
background-color: rgba(255, 112, 67, 0.2);
border-color: #ff7043;
}
.dark-mode .info-input:hover {
background-color: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.12);
}
.dark-mode .info-input::placeholder {
color: var(--text-secondary);
}
/* Planner Table Mode visibility switches (updated for inline panel) */
.table-view #hangarGrid,
.table-view #secondaryHangarGrid {
display: none !important;
}
/* Inline table panel visibility is handled via hidden class from JS */
/* Ensure base planner panel hides when table-view is active (safety) */
.table-view #panel-planner { display: none !important; }
.tile-view #panel-planner-table { display: none !important; }
/* ==========================================================================
SHARING & SYNCHRONIZATION STYLES
========================================================================== */
/* Share URL Container */
#shareUrlContainer {
border: 1px dashed #cbd5e1;
border-radius: 8px;
padding: 12px;
background-color: #f8fafc;
margin-top: 8px;
}
#shareUrlContainer input#shareUrl {
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 11px !important;
background-color: #ffffff;
border: 1px solid #e2e8f0;
color: #475569;
padding: 8px 12px;
}
#shareUrlContainer input#shareUrl:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
outline: none;
}
/* Copy Share URL Button */
#copyShareUrlBtn {
min-width: 40px;
font-size: 14px;
background-color: #f1f5f9;
border: 1px solid #cbd5e1;
transition: all 0.2s ease;
}
#copyShareUrlBtn:hover {
background-color: #e2e8f0;
border-color: #94a3b8;
}
#copyShareUrlBtn:active {
background-color: #cbd5e1;
transform: scale(0.95);
}
/* Live Sync Toggle Styles */
#liveSyncToggle {
accent-color: #10b981;
}
/* Sync Status Button States */
.sidebar-btn.status-success {
background-color: #dcfce7;
border-color: #16a34a;
color: #15803d;
}
.sidebar-btn.status-warning {
background-color: #fef3c7;
border-color: #d97706;
color: #92400e;
}
.sidebar-btn.status-error {
background-color: #fee2e2;
border-color: #dc2626;
color: #991b1b;
}
/* Manual Sync Button Loading State */
.sidebar-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: #f1f5f9;
}
/* Section Label for Data Sharing */
.section-label-header {
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e2e8f0;
}
.section-label {
font-weight: 600;
font-size: 13px;
color: #475569;
display: flex;
align-items: center;
gap: 6px;
}
/* Responsive Adjustments for Sharing Section */
@media (max-width: 768px) {
#shareUrlContainer {
padding: 8px;
}
#shareUrlContainer input#shareUrl {
font-size: 10px !important;
}
.sidebar-input-group {
flex-direction: column;
gap: 8px;
}
.sidebar-input-group .sidebar-btn {
width: 100%;
}
}
/* Animation for Share URL reveal */
#shareUrlContainer {
animation-duration: 0.3s;
animation-fill-mode: both;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
max-height: 200px;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 1;
max-height: 200px;
transform: translateY(0);
}
to {
opacity: 0;
max-height: 0;
transform: translateY(-10px);
}
}
#shareUrlContainer.show {
animation-name: slideDown;
}
#shareUrlContainer.hide {
animation-name: slideUp;
}
/* ==========================================================================
END SHARING & SYNCHRONIZATION STYLES
========================================================================== */
/* ==========================================================================
MODERN SYNC INTERFACE STYLES
========================================================================== */
/* ==========================================================================
MODAL: Read-only prompt (light + dark)
========================================================================== */
.hp-modal-overlay {
position: fixed;
inset: 0;
display: none; /* toggled to flex when shown */
align-items: center;
justify-content: center;
padding: 12px;
background: rgba(0,0,0,0.45);
z-index: 10000;
}
.hp-modal {
width: 100%;
max-width: 420px;
background: #ffffff;
color: #1f2937; /* gray-800 */
border-radius: 12px;
border: 1px solid #e5e7eb; /* gray-200 */
box-shadow: 0 10px 24px rgba(0,0,0,0.15);
padding: 16px 18px;
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.hp-modal-title {
font-weight: 700;
font-size: 15px;
letter-spacing: .01em;
margin-bottom: 6px;
}
.hp-modal-body {
font-size: 13px;
color: #4b5563; /* gray-600 */
line-height: 1.45;
}
.hp-modal-actions {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
}
/* Dark mode variants */
.dark-mode .hp-modal {
background: var(--bg-primary);
color: var(--text-primary);
border-color: var(--border-color);
box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.dark-mode .hp-modal-body { color: var(--text-secondary); }
/* Buttons adopt existing sidebar styles; ensure primary uses system orange */
/* Primary button is already .sidebar-btn .sidebar-btn-primary which maps to var(--menu-accent) */
/* Sync Mode Header */
.sync-mode-header {
margin-bottom: 20px;
padding: 12px;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: 8px;
border: 1px solid #cbd5e1;
}
.sync-mode-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 16px;
color: #1e293b;
margin-bottom: 4px;
}
.sync-icon {
font-size: 18px;
}
.sync-mode-description {
font-size: 13px;
color: #64748b;
line-height: 1.4;
}
/* Sync Toggle Rows */
.sync-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 12px;
margin-bottom: 8px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s ease;
}
.sync-toggle-row:hover {
border-color: #cbd5e1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sync-toggle-info {
flex: 1;
min-width: 0;
}
.sync-toggle-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.sync-toggle-icon {
font-size: 16px;
}
.sync-toggle-title {
font-weight: 600;
font-size: 14px;
color: #1e293b;
}
.sync-toggle-desc {
font-size: 12px;
color: #64748b;
line-height: 1.3;
}
.sync-toggle-control {
margin-left: 12px;
flex-shrink: 0;
}
/* Modern Toggle Switch */
.modern-toggle-switch {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
cursor: pointer;
}
.modern-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.modern-toggle-slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
border-radius: 24px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.modern-toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 2px;
background-color: white;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.modern-toggle-switch input:checked + .modern-toggle-slider {
background-color: var(--menu-accent);
border-color: #d48400;
}
.modern-toggle-switch input:checked + .modern-toggle-slider:before {
transform: translateX(24px);
}
.modern-toggle-switch input:focus + .modern-toggle-slider {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
/* Current Mode Display */
.current-sync-mode {
margin: 16px 0;
padding: 12px;
background: #f1f5f9;
border-radius: 6px;
border-left: 4px solid #64748b;
}
.sync-mode-indicator {
display: flex;
align-items: center;
gap: 8px;
}
.sync-mode-label {
font-size: 14px;
color: #374151;
font-weight: 600;
}
.sync-mode-badge {
padding: 6px 14px;
border-radius: var(--sync-chip-radius);
font-size: 13px;
font-weight: var(--sync-chip-fw);
text-transform: none;
letter-spacing: 0.2px;
transition: all 0.2s ease;
text-shadow: none;
border: var(--sync-chip-border-w) solid transparent;
}
.sync-mode-badge.standalone {
background: var(--sync-standalone-bg);
color: var(--sync-standalone-fg);
border-color: var(--sync-standalone-border);
}
.sync-mode-badge.mode-sync {
background: var(--sync-read-bg);
color: var(--sync-read-fg);
border-color: var(--sync-read-border);
}
.sync-mode-badge.mode-write {
background: var(--sync-write-bg);
color: var(--sync-write-fg);
border-color: var(--sync-write-border);
}
.sync-mode-badge.mode-master {
background: var(--sync-master-bg);
color: var(--sync-master-fg);
border-color: var(--sync-master-border);
}
/* Compact status area */
.sync-status-compact {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 4px 2px 4px;
margin-top: 8px;
}
.sync-status-compact .sync-status-label { font-size: 12px; color: #475569; font-weight: 600; }
/* Compact chip variant for current mode */
.sync-mode-badge.compact {
padding: 4px 10px;
border-radius: var(--sync-chip-radius);
font-size: 12px;
font-weight: var(--sync-chip-fw);
border: var(--sync-chip-border-w) solid transparent;
background: var(--sync-standalone-bg);
color: var(--sync-standalone-fg);
text-shadow: none;
}
.sync-mode-badge.compact.standalone { background: var(--sync-standalone-bg); color: var(--sync-standalone-fg); border-color: var(--sync-standalone-border); }
.sync-mode-badge.compact.mode-sync { background: var(--sync-read-bg); color: var(--sync-read-fg); border-color: var(--sync-read-border); }
.sync-mode-badge.compact.mode-write { background: var(--sync-write-bg); color: var(--sync-write-fg); border-color: var(--sync-write-border); }
.sync-mode-badge.compact.mode-master { background: var(--sync-master-bg); color: var(--sync-master-fg); border-color: var(--sync-master-border); }
/* Action Buttons */
.sync-actions {
display: flex;
gap: 8px;
margin-top: 16px;
}
.sync-action-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.sync-action-btn.primary {
background: #3b82f6;
color: white;
border: 1px solid #2563eb;
}
.sync-action-btn.primary:hover {
background: #2563eb;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
.sync-action-btn.secondary {
background: #f8fafc;
color: #64748b;
border: 1px solid #cbd5e1;
}
.sync-action-btn.secondary:hover {
background: #f1f5f9;
color: #475569;
border-color: #94a3b8;
}
/* Full-width Button für einzelnen Status Button */
.sync-action-btn.full-width {
flex: 1;
width: 100%;
min-width: 100%;
}
.sync-action-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.btn-icon {
font-size: 14px;
}
/* Status Button States */
.sync-action-btn.status-success {
background-color: #dcfce7;
border-color: #16a34a;
color: #15803d;
}
.sync-action-btn.status-warning {
background-color: #fef3c7;
border-color: #d97706;
color: #92400e;
}
.sync-action-btn.status-error {
background-color: #fee2e2;
border-color: #dc2626;
color: #991b1b;
}
/* Responsive Design */
@media (max-width: 640px) {
.sync-toggle-row {
padding: 12px 8px;
}
.sync-toggle-title {
font-size: 13px;
}
.sync-toggle-desc {
font-size: 11px;
}
.sync-actions {
flex-direction: column;
}
.sync-action-btn {
padding: 12px 16px;
}
}
/* Project Change Log list borders (light/dark) */
#submenu-project #projectChangeLog #changeLogList { border: 1px solid var(--menu-border); }
#submenu-project #projectChangeLog #changeLogList .border-b { border-color: var(--menu-border); }
.dark-mode #submenu-project #projectChangeLog #changeLogList { border-color: var(--border-color); }
.dark-mode #submenu-project #projectChangeLog #changeLogList .border-b { border-color: var(--border-color); }
/* Planner panel: reserve space for right-side infobox using a CSS variable */
#panel-planner {
position: relative;
--infobox-width: 340px;
padding-right: var(--infobox-width);
min-height: calc(100vh - var(--planner-sticky-offset, 0px));
transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Collapsed state sets narrow width variable */
#panel-planner.changelog-collapsed { --infobox-width: 18px; }
/* Table panel: no padding, table stays full width */
#panel-planner-table {
position: relative;
--infobox-width: 340px;
min-height: calc(100vh - var(--planner-sticky-offset, 0px));
}
#panel-planner-table.changelog-collapsed { --infobox-width: 18px; }
/* Animation for changelog content visibility */
.changelog-header .changelog-title,
.changelog-header .sidebar-btn,
.changelog-list {
transition: opacity 0.2s ease, transform 0.2s ease;
}
#panel-planner.changelog-collapsed .changelog-header .changelog-title,
#panel-planner.changelog-collapsed .changelog-header .sidebar-btn,
#panel-planner.changelog-collapsed .changelog-list {
opacity: 0;
transform: translateX(-10px);
}
/* Table panel collapse mirrors */
#panel-planner-table.changelog-collapsed .changelog-header .changelog-title,
#panel-planner-table.changelog-collapsed .changelog-header .sidebar-btn,
#panel-planner-table.changelog-collapsed .changelog-list {
opacity: 0;
transform: translateX(-10px);
}
/* Right-side info box container - overlay, absolute at panel right */
.planner-infobox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--infobox-width);
min-width: 18px;
max-width: 800px;
display: flex;
flex-direction: column;
gap: 16px;
padding: var(--tile-grid-padding, 16px) 12px var(--tile-grid-padding, 16px) 12px;
border-left: 1px solid var(--menu-border);
background: #fff;
z-index: 12;
overflow: visible; /* allow toggle button to overhang the border */
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Resize handle on hover */
.planner-infobox::before {
content: '';
position: absolute;
left: -3px;
top: 0;
bottom: 0;
width: 6px;
background: transparent;
cursor: col-resize;
z-index: 10;
transition: background-color 0.2s ease;
}
.planner-infobox:hover::before {
background: rgba(99, 102, 241, 0.3);
}
/* Visual grab handle on hover */
.planner-infobox::after {
content: '';
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 30px;
background: rgba(99, 102, 241, 0);
border-radius: 2px;
transition: background-color 0.2s ease;
pointer-events: none;
}
.planner-infobox:hover::after {
background: rgba(99, 102, 241, 0.6);
}
.dark-mode .planner-infobox {
background: var(--bg-primary);
border-left-color: var(--border-color);
}
/* Change Log column inside infobox - fills and scrolls */
.planner-changelog {
flex: 1 1 auto;
overflow: visible; /* allow header toggle to overhang */
width: 100%;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
display: flex;
flex-direction: column;
min-height: 0;
margin-top: 0;
}
.dark-mode .planner-changelog { background: var(--bg-primary); border-left-color: var(--border-color); border-top-color: var(--border-color); border-bottom-color: var(--border-color); }
/* Remove padding-right reservation from old overlay approach */
/* .hangar-container { padding-right: 360px; } — no longer needed */
/* Responsive stacking: infobox below tiles on narrow screens */
@media (max-width: 1200px){
#panel-planner { padding-right: 0; }
.planner-infobox {
position: static;
width: auto;
height: auto;
border-left: 0;
border-top: 1px solid var(--menu-border);
overflow: visible;
}
.planner-changelog {
position: static;
max-height: none;
overflow-y: visible;
}
/* Dark mode border color for mobile */
.dark-mode .planner-infobox { border-top-color: var(--border-color); }
}
/* Header with subtle toggle handle */
.changelog-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px 0; position: static; overflow: visible; }
/* Table header with top border */
#plannerTable thead .planner-table-header {
border-top: 1px solid var(--menu-border, #e5e7eb);
}
.dark-mode #plannerTable thead .planner-table-header {
border-top-color: var(--border-color);
}
/* Small numeric badges for multi-sort rank */
#plannerTable thead .planner-table-header th.sortable .sort-rank {
display: none;
margin-left: 6px;
font-size: 10px;
font-weight: 700;
color: #475569;
background: #e5e7eb;
border-radius: 8px;
padding: 0 5px;
}
.dark-mode #plannerTable thead .planner-table-header th.sortable .sort-rank {
color: var(--text-secondary);
background: var(--bg-secondary);
}
/* Table View Tow select: prefer class-based chip palette (match Board) over data-value rules in dark mode */
.dark-mode #plannerTable .tow-status-selector[data-value] {
background-color: transparent !important;
border: none !important;
color: var(--text-primary) !important;
}
.dark-mode #plannerTable .tow-status-selector.tow-neutral {
background: transparent !important;
border: none !important;
color: var(--text-secondary) !important;
}
.dark-mode #plannerTable .tow-status-selector.tow-initiated {
background: rgba(245, 158, 11, 0.15) !important; /* opacity 0.15 */
border: 1px solid #10b98100; /* keep border subtle via palette override if needed */
border-color: #b45309 !important; /* explicit */
color: #fbbf24 !important;
}
.dark-mode #plannerTable .tow-status-selector.tow-ongoing {
background: rgba(59, 130, 246, 0.15) !important; /* opacity 0.15 */
border: 1px solid #1d4ed8 !important;
color: #60a5fa !important;
}
.dark-mode #plannerTable .tow-status-selector.tow-on-position {
background: rgba(16, 185, 129, 0.15) !important; /* opacity 0.15 */
border: 1px solid #10b981 !important;
color: #34d399 !important;
}
.changelog-title { font-weight: 600; color: #334155; }
.dark-mode .changelog-title { color: var(--text-primary); }
/* Toggle button: right edge handle */
.planner-infobox { position: absolute; }
/* Always visible in table view for better discoverability */
body.table-view #panel-planner-table .changelog-toggle { opacity: 1; pointer-events: auto; }
/* Larger, more visible toggle button */
.changelog-toggle {
position: absolute;
right: -16px; /* visible even when collapsed */
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--menu-border);
border-left: none;
border-radius: 0 10px 10px 0;
background: #fff;
color: #64748b;
cursor: pointer;
z-index: 500; /* ensure always on top */
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
opacity: 1;
pointer-events: auto;
transition: opacity 120ms ease, transform 120ms ease;
}
.dark-mode .changelog-toggle { background: var(--bg-primary); border-color: var(--border-color); color: var(--text-secondary); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
/* Rotate chevron direction based on collapsed state */
.changelog-toggle svg { transition: transform 120ms ease; }
#panel-planner-table.changelog-collapsed .changelog-toggle svg,
#panel-planner.changelog-collapsed .changelog-toggle svg {
transform: rotate(180deg);
}
/* Ensure infobox establishes a positioning context for centering */
#infobox { position: absolute; }
/* Always visible in collapsed state so user can expand */
#panel-planner.changelog-collapsed .changelog-toggle { opacity: 1; pointer-events: auto; right: -18px; }
.dark-mode .changelog-toggle {
background: var(--bg-primary);
border-color: var(--border-color);
color: var(--text-secondary);
}
/* Rotate chevron when collapsed with smooth animation */
.changelog-toggle svg {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#panel-planner.changelog-collapsed .changelog-toggle svg {
transform: rotate(180deg);
}
/* On mobile, place toggle inside header to avoid overflow */
@media (max-width: 1200px){
.changelog-toggle {
position: static;
transform: none;
width: 24px;
height: 24px;
border-radius: 6px;
border: 1px solid var(--menu-border);
margin-right: 8px;
}
}
/* Internal scroll for list */
.changelog-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid var(--menu-border); border-radius: 8px; padding: 8px; background: transparent; }
.dark-mode .changelog-list { border-color: var(--border-color); }
/* ==========================================================================
TOAST NOTIFICATIONS
========================================================================== */
.toast-container {
position: fixed;
bottom: 16px;
right: 16px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 1000;
pointer-events: none; /* clicks pass through */
}
.toast {
background: #ffffff;
border: 1px solid #e2e8f0;
color: #334155;
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
opacity: 0;
transform: translateY(6px);
transition: opacity 180ms ease, transform 180ms ease;
pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.hide { opacity: 0; transform: translateY(6px); }
.toast-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.toast-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.toast-error { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
/* Dark mode adjustments */
.dark-mode .toast { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }
.dark-mode .toast-success { background: #064e3b; border-color: #065f46; color: #d1fae5; }
.dark-mode .toast-info { background: #1e293b; border-color: #334155; color: #93c5fd; }
.dark-mode .toast-error { background: #3f1d1d; border-color: #7f1d1d; color: #fecaca; }
/* Penpot-style overrides for Sync submenu */
#submenu-sync {
background: #f9f9f9;
border-right: 1px solid #e6e6e6;
}
#submenu-sync .sync-mode-description {
color: #6b6b6b;
font-size: 10px;
line-height: 1.2;
margin: 4px 16px 8px 16px;
}
#submenu-sync .sync-toggle-row {
background: transparent;
border: 0;
padding: 8px 16px;
margin-bottom: 12px;
}
#submenu-sync .sync-toggle-title {
color: #6b6b6b;
font-weight: 700;
font-size: 10px;
}
#submenu-sync .sync-toggle-desc {
color: #6b6b6b;
font-weight: 400;
font-size: 10px;
}
/* Compact orange toggle (35x20) per design */
#submenu-sync .modern-toggle-switch { width: 35px; height: 20px; }
#submenu-sync .modern-toggle-slider { background-color: #b1b5b1; border-radius: 50px; }
#submenu-sync .modern-toggle-switch input:checked + .modern-toggle-slider { background-color: var(--menu-accent); border-color: var(--menu-accent); }
#submenu-sync .modern-toggle-slider:before { width: 18px; height: 18px; left: -1px; top: 50%; transform: translateY(-50%); }
#submenu-sync .modern-toggle-switch input:checked + .modern-toggle-slider:before { transform: translateX(15px) translateY(-50%); }
/* Dark mode overrides for Sync submenu */
.dark-mode #submenu-sync {
background: var(--bg-primary);
border-right-color: var(--border-color);
}
.dark-mode #submenu-sync .sync-mode-description {
color: var(--text-secondary);
}
.dark-mode #submenu-sync .sync-toggle-row {
background: transparent;
border-color: var(--border-color);
}
.dark-mode #submenu-sync .sync-toggle-title,
.dark-mode #submenu-sync .sync-toggle-desc {
color: var(--text-secondary);
}
.dark-mode #submenu-sync .modern-toggle-slider {
background-color: var(--border-color);
border-color: var(--border-color);
}
.dark-mode #submenu-sync .modern-toggle-switch input:checked + .modern-toggle-slider {
background-color: var(--menu-accent);
border-color: var(--menu-accent);
}
/* Penpot-style overrides for Update submenu */
#submenu-update { background: #f9f9f9; border-right: 1px solid #e6e6e6; }
#submenu-update .update-description { color: #6b6b6b; font-size: 10px; line-height: 1.2; margin: 4px 16px 8px 16px; }
/* Keep header as-is: do not override #submenu-update .submenu-title */
/* Compact orange toggle (35x20) per design for Update submenu */
#submenu-update .modern-toggle-switch { width: 35px; height: 20px; }
#submenu-update .modern-toggle-slider { background-color: #b1b5b1; border-radius: 50px; }
#submenu-update .modern-toggle-switch input:checked + .modern-toggle-slider { background-color: var(--menu-accent); border-color: var(--menu-accent); }
#submenu-update .modern-toggle-slider:before { width: 18px; height: 18px; left: -1px; top: 50%; transform: translateY(-50%); }
#submenu-update .modern-toggle-switch input:checked + .modern-toggle-slider:before { transform: translateX(15px) translateY(-50%); }
/* Match standard background for other submenus in light mode */
#submenu-project, #submenu-display, #submenu-export { background: #f9f9f9; border-right: 1px solid #e6e6e6; }
/* Dark mode overrides */
.dark-mode #submenu-project, .dark-mode #submenu-display, .dark-mode #submenu-export { background: var(--bg-primary); border-right-color: var(--border-color); }
/* Export submenu specific styles */
#submenu-export .submenu-title {
padding-left: 16px;
padding-right: 16px;
}
#submenu-export .panel-divider {
height: 1px;
background: #e6e6e6;
margin: 20px 16px;
}
.dark-mode #submenu-export .panel-divider {
background: var(--border-color);
}
/* Ensure consistent width for all form controls in export submenu */
#submenu-export .sidebar-form-control,
#submenu-export .sidebar-form-select,
#submenu-export textarea.sidebar-form-control {
width: calc(100% - 32px);
max-width: calc(100% - 32px);
box-sizing: border-box;
margin-left: 16px;
margin-right: 16px;
}
/* Labels also need left margin for alignment */
#submenu-export .sidebar-form-group > label {
margin-left: 16px;
}
/* Ensure buttons span full width consistently */
#submenu-export .sidebar-btn.w-full {
width: calc(100% - 32px);
margin-left: 16px;
margin-right: 16px;
margin-bottom: 8px;
}
/* Project submenu specific styles */
#submenu-project .submenu-title {
padding-left: 16px;
padding-right: 16px;
}
#submenu-project .sync-mode-description {
color: #6b6b6b;
font-size: 10px;
line-height: 1.2;
margin: 4px 16px 8px 16px;
}
#submenu-project .panel-divider {
height: 1px;
background: #e6e6e6;
margin: 20px 16px;
}
/* Add proper width constraints to form groups */
#submenu-project .sidebar-form-group {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
/* Constrain form rows to prevent overflow */
#submenu-project .sidebar-form-row {
max-width: calc(100% - 32px);
margin-left: 16px;
margin-right: 16px;
}
/* Ensure consistent width for form controls in project submenu */
#submenu-project .sidebar-form-control,
#submenu-project .sidebar-form-select {
width: calc(100% - 32px);
max-width: calc(100% - 32px);
box-sizing: border-box;
margin-left: 16px;
margin-right: 16px;
}
/* Labels need left margin for alignment */
#submenu-project .sidebar-form-group > label {
margin-left: 16px;
}
/* Labels in form rows also need left margin */
#submenu-project .sidebar-form-row > label {
margin-left: 16px;
}
/* Buttons in project submenu */
#submenu-project .sidebar-btn {
margin-left: 16px;
margin-right: 16px;
}
/* Override input-container alignment for Project submenu */
#submenu-project .sidebar-form-row .input-container {
margin-right: 16px;
justify-content: flex-end; /* Keep right alignment for controls */
}
.dark-mode #submenu-project .sync-mode-description { color: var(--text-secondary); }
.dark-mode #submenu-project .panel-divider { background: var(--border-color); }
/* Dark mode overrides for Update submenu */
.dark-mode #submenu-update { background: var(--bg-primary); border-right-color: var(--border-color); }
.dark-mode #submenu-update .update-description { color: var(--text-secondary); }
.dark-mode #submenu-update .sidebar-form-row > label { color: var(--text-secondary); }
.dark-mode #submenu-update .modern-toggle-slider { background-color: var(--border-color); border-color: var(--border-color); }
.dark-mode #submenu-update .modern-toggle-switch input:checked + .modern-toggle-slider { background-color: var(--menu-accent); border-color: var(--menu-accent); }
/* Table view enhancements */
/* Inline Planner Table View (panel-planner-table > #plannerTableView > #plannerTable) */
/* Base visuals limited in scope so other tables remain unaffected */
#panel-planner-table #plannerTableView #plannerTable.fleet-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
#panel-planner-table #plannerTableView #plannerTable.fleet-table thead th {
position: sticky;
top: 0;
background: #f9fafb; /* Match unified table header */
font-size: 0.875rem; /* Match unified table header */
text-transform: uppercase;
color: #374151; /* Match unified table header */
padding: 0.75rem; /* Match unified table padding */
border: none !important; /* Remove all borders */
z-index: 1;
letter-spacing: 0.05em;
font-weight: 600; /* Match unified table header */
}
#panel-planner-table #plannerTableView #plannerTable.fleet-table tbody td {
padding: 0.75rem; /* Match unified table padding */
border: none !important; /* Remove all borders */
}
#panel-planner-table #plannerTableView #plannerTable.fleet-table tbody tr:nth-child(even) {
background-color: #f9fafb; /* Zebra striping */
}
#panel-planner-table #plannerTableView #plannerTable.fleet-table tbody tr:hover {
background-color: inherit !important;
transition: none !important;
}
/* Dark mode adjustments */
.dark-mode #panel-planner-table #plannerTableView #plannerTable.fleet-table thead th {
background: var(--dark-secondary); /* Match unified table header */
color: var(--dark-text); /* Match unified table header */
border: none !important; /* Remove all borders */
}
.dark-mode #panel-planner-table #plannerTableView #plannerTable.fleet-table tbody td {
border: none !important; /* Remove all borders */
}
.dark-mode #panel-planner-table #plannerTableView #plannerTable.fleet-table tbody tr:nth-child(odd) {
background-color: var(--dark-card); /* Zebra striping */
}
.dark-mode #panel-planner-table #plannerTableView #plannerTable.fleet-table tbody tr:nth-child(even) {
background-color: var(--dark-secondary); /* Zebra striping */
}
.dark-mode #panel-planner-table #plannerTableView #plannerTable.fleet-table tbody tr:hover {
background-color: inherit !important;
transition: none !important;
}
/* Inputs and selects within planner table */
#panel-planner-table #plannerTableView #plannerTable .planner-input,
#panel-planner-table #plannerTableView #plannerTable .planner-select {
width: 100%;
border: 1px solid transparent;
border-radius: 6px;
padding: 6px 8px; /* legacy sizing */
font-size: 12px;
background: transparent; /* Match row background */
color: #0f172a;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
/* Ensure table cells provide positioning context for compact-dt-btn */
#panel-planner-table #plannerTableView #plannerTable td.planner-td {
position: relative;
}
/* Position compact date-time wrapper properly in table cells */
#panel-planner-table #plannerTableView #plannerTable td .compact-dt-wrap {
position: relative;
display: block;
width: 100%;
}
/* Even rows - match zebra background */
#panel-planner-table #plannerTableView #plannerTable tbody tr:nth-child(even) .planner-input,
#panel-planner-table #plannerTableView #plannerTable tbody tr:nth-child(even) .planner-select:not(.tow-status-selector):not(.status-selector) {
background: transparent; /* Inherit row color */
}
#panel-planner-table #plannerTableView #plannerTable .planner-input:hover,
#panel-planner-table #plannerTableView #plannerTable .planner-select:hover {
background: transparent !important;
border-color: transparent !important;
}
#panel-planner-table #plannerTableView #plannerTable .planner-input:focus,
#panel-planner-table #plannerTableView #plannerTable .planner-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
/* Dark mode inputs baseline (do not affect selects styling differently here) */
.dark-mode #panel-planner-table #plannerTableView #plannerTable .planner-input,
.dark-mode #panel-planner-table #plannerTableView #plannerTable .planner-select {
background: transparent; /* Match row background */
color: var(--text-primary);
border-color: transparent;
}
/* Even rows in dark mode - inherit zebra background */
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:nth-child(even) .planner-input,
.dark-mode #panel-planner-table #plannerTableView #plannerTable tbody tr:nth-child(even) .planner-select:not(.tow-status-selector):not(.status-selector) {
background: transparent; /* Inherit row color */
}
/* Ensure tow chip palette parity with Board: rely on tow- classes */
.dark-mode #plannerTable .tow-status-selector {
background-color: transparent !important;
border: none !important;
}
.dark-mode #panel-planner-table #plannerTableView #plannerTable .planner-input:hover,
.dark-mode #panel-planner-table #plannerTableView #plannerTable .planner-select:hover {
background: transparent !important;
border-color: transparent !important;
}
/* ===== Guard: exclude target-ID cells from any UI-level td hover coloring ===== */
/* Baseline transparent so only row-level paints when row is hovered */
#plannerTable td.planner-td:has([id^="arrival-time-table-"]),
#plannerTable td.planner-td:has([id^="departure-time-table-"]),
#plannerTable td.planner-td:has([id^="tow-"]),
#plannerTable td.planner-td:has([id^="stat-"]) {
background-color: transparent;
}
/* Dark mode: same baseline */
.dark-mode #plannerTable td.planner-td:has([id^="arrival-time-table-"]),
.dark-mode #plannerTable td.planner-td:has([id^="departure-time-table-"]),
.dark-mode #plannerTable td.planner-td:has([id^="tow-"]),
.dark-mode #plannerTable td.planner-td:has([id^="stat-"]) {
background-color: transparent;
}
/* Remove column-specific backgrounds - inputs inherit row color */
/* Arr/Dep placeholders: invisible by default, visible on hover/focus */
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]::placeholder,
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]::placeholder {
color: transparent;
}
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:hover::placeholder,
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:focus::placeholder,
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:hover::placeholder,
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:focus::placeholder {
color: #94a3b8; /* subtle gray in light mode */
}
.dark-mode #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:hover::placeholder,
.dark-mode #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:focus::placeholder,
.dark-mode #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:hover::placeholder,
.dark-mode #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:focus::placeholder {
color: var(--text-muted, #718096);
}
/* Make Arr/Dep inputs compact and robust for format switching */
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"],
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"] {
padding: 4px 6px;
}
/* AC-ID emphasis for easier scanning */
#panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="aircraftId"] {
font-size: 14px;
font-weight: 600;
}
/* Read-only (Sync) mode styling to match main view */
/* Keep placeholders hidden in Arr/Dep at all times in read-only */
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]::placeholder,
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]::placeholder,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]::placeholder,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]::placeholder {
color: transparent !important;
}
/* Vendor-prefixed placeholder hiding */
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]::-webkit-input-placeholder,
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]::-webkit-input-placeholder,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]::-webkit-input-placeholder,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]::-webkit-input-placeholder,
/* Broad fallback: when read-only is on and selectors change */
.read-only .planner-input[data-col="arrivalTime"]::-webkit-input-placeholder,
.read-only .planner-input[data-col="departureTime"]::-webkit-input-placeholder {
color: transparent !important;
opacity: 0 !important;
}
/* Also hide when hovering/focusing (some engines repaint placeholder) */
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:hover::placeholder,
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:focus::placeholder,
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:hover::placeholder,
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:focus::placeholder,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:hover::placeholder,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:focus::placeholder,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:hover::placeholder,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:focus::placeholder,
.read-only .planner-input[data-col="arrivalTime"]:hover::placeholder,
.read-only .planner-input[data-col="arrivalTime"]:focus::placeholder,
.read-only .planner-input[data-col="departureTime"]:hover::placeholder,
.read-only .planner-input[data-col="departureTime"]:focus::placeholder {
color: transparent !important;
opacity: 0 !important;
}
/* Fallback for engines honoring placeholder-shown on disabled fields */
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:placeholder-shown,
.read-only #panel-planner-table #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:placeholder-shown,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="arrivalTime"]:placeholder-shown,
#panel-planner-table.read-only #plannerTableView #plannerTable td .planner-input[data-col="departureTime"]:placeholder-shown,
.read-only .planner-input[data-col="arrivalTime"]:placeholder-shown,
.read-only .planner-input[data-col="departureTime"]:placeholder-shown {
color: transparent !important;
opacity: 0 !important;
-webkit-text-fill-color: transparent !important; /* Safari */
}
/* Disabled inputs/selects appearance in Sync-only mode */
.read-only #panel-planner-table #plannerTableView #plannerTable .planner-input[disabled],
#panel-planner-table.read-only #plannerTableView #plannerTable .planner-input[disabled] {
cursor: not-allowed;
border-color: transparent !important;
background: transparent !important;
}
.read-only #panel-planner-table #plannerTableView #plannerTable .planner-select[disabled]:not(.tow-status-selector),
#panel-planner-table.read-only #plannerTableView #plannerTable .planner-select[disabled]:not(.tow-status-selector) {
cursor: not-allowed;
border-color: transparent !important;
background: transparent !important;
background-color: transparent !important;
}
/* Keep tow status chips visible even when disabled */
.read-only #panel-planner-table #plannerTableView #plannerTable .planner-select.tow-status-selector[disabled],
#panel-planner-table.read-only #plannerTableView #plannerTable .planner-select.tow-status-selector[disabled] {
cursor: default;
/* no background override here so data-value based colors remain visible */
}
/* Light mode read-only colors - keep transparent to inherit zebra striping */
html:not(.dark-mode).read-only #panel-planner-table #plannerTableView #plannerTable .planner-input[disabled],
html:not(.dark-mode) #panel-planner-table.read-only #plannerTableView #plannerTable .planner-input[disabled] {
background: transparent !important;
color: #64748b !important;
}
/* Dark mode read-only colors - keep transparent to inherit zebra striping */
.dark-mode.read-only #panel-planner-table #plannerTableView #plannerTable .planner-input[disabled],
.dark-mode #panel-planner-table.read-only #plannerTableView #plannerTable .planner-input[disabled] {
background: transparent !important;
color: var(--text-secondary) !important;
}
.status-cell {
display: flex;
align-items: center;
gap: 8px;
}
/* Prevent phantom extra column in planner table */
#panel-planner-table #plannerTableView #plannerTable.fleet-table {
table-layout: auto !important;
}
#panel-planner-table #plannerTableView #plannerTable.fleet-table colgroup col:last-child {
width: auto;
}
/* -------- Planner table view: section divider -------- */
tr.section-divider {
background: transparent !important;
}
tr.section-divider td {
padding: 12px 0;
background: transparent !important;
}
tr.section-divider .divider-line {
position: relative;
text-align: center;
height: 20px;
background: transparent !important;
}
tr.section-divider .divider-line::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 1px solid #d1d5db;
transform: translateY(-50%);
z-index: 0;
}
tr.section-divider .divider-badge {
position: relative;
display: inline-block;
padding: 2px 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
border-radius: 999px;
background: #ffffff;
color: #374151;
border: 1px solid #d1d5db;
z-index: 1;
}
/* Table view: hide ::after on section-divider; board view unaffected */
#plannerTable tr.section-divider::after,
#plannerTable tr.section-divider > td::after {
content: none !important;
display: none !important;
}
/* Dark mode section divider */
.dark-mode tr.section-divider .divider-line::before {
border-top-color: #334155;
}
.dark-mode tr.section-divider .divider-badge {
background: #0b1220;
color: #cbd5e1;
border-color: #334155;
}
/* Status light in table view */
.planner-td .status-light {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
opacity: 1;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: none;
flex-shrink: 0;
/* Inherit status colors from main status-light styles */
}
/* Table view: neutral status dots are completely invisible */
#plannerTable td .status-light[data-status="neutral"],
.dark-mode #plannerTable td .status-light[data-status="neutral"] {
opacity: 0 !important;
visibility: hidden !important;
}
/* Tow status selector styling in table view - improved consistency */
.planner-select.tow-status-selector {
min-width: 0; /* shrink to fit content */
font-size: 12px; /* legacy */
padding: 2px 6px; /* tighter horizontal padding */
border-radius: 4px;
background-color: transparent !important;
border: none !important;
color: #4b5563 !important;
font-weight: 500; /* legacy */
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: auto !important; /* avoid full-width chip */
display: inline-block;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Center the Tow select horizontally within the cell */
/* Tow cell: center dot + select as a group */
#plannerTable td .tow-cell { display: flex; align-items: center; justify-content: center; gap: 8px; }
#plannerTable td .tow-cell .tow-dot { margin-right: 6px; margin-left: 0; }
/* Table view tow reminder dot: always visible to keep inline alignment */
#plannerTable td .tow-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
#plannerTable td .tow-dot.alert {
background: #ef4444; /* red */
animation: tow-pulse-2s 2s ease-in-out infinite;
}
#plannerTable td .tow-dot.neutral,
.dark-mode #plannerTable td .tow-dot.neutral {
opacity: 0 !important;
visibility: hidden !important;
}
#plannerTable td .tow-status-selector {
position: static; /* no absolute centering */
left: auto;
transform: none;
height: 26px; /* unify chip height */
line-height: 26px; /* center text vertically within height */
padding-top: 0 !important; /* remove vertical padding to avoid optical offset */
padding-bottom: 0 !important;
text-align: center;
text-align-last: center; /* center selected text in Chrome */
-moz-text-align-last: center; /* center selected text in Firefox */
}
/* Add border back for non-neutral values */
.planner-select.tow-status-selector[data-value="initiated"],
.planner-select.tow-status-selector[data-value="ongoing"],
.planner-select.tow-status-selector[data-value="on-position"] {
border: 1px solid !important;
}
/* Dynamic styling based on selected value - Multiple selector approaches */
table .planner-select.tow-status-selector[data-value="initiated"],
#plannerTable .planner-select.tow-status-selector[data-value="initiated"],
.planner-td select.tow-status-selector[data-value="initiated"] {
background-color: rgba(245, 158, 11, 0.15) !important; /* 0.15 opacity */
color: #b45309 !important;
border-color: #f59e0b !important;
}
table .planner-select.tow-status-selector[data-value="ongoing"],
#plannerTable .planner-select.tow-status-selector[data-value="ongoing"],
.planner-td select.tow-status-selector[data-value="ongoing"] {
background-color: rgba(59, 130, 246, 0.15) !important; /* 0.15 opacity */
color: #0369a1 !important;
border-color: #0ea5e9 !important;
}
table .planner-select.tow-status-selector[data-value="on-position"],
#plannerTable .planner-select.tow-status-selector[data-value="on-position"],
.planner-td select.tow-status-selector[data-value="on-position"] {
background-color: rgba(16, 185, 129, 0.15) !important; /* 0.15 opacity */
color: #166534 !important;
border-color: #10b981 !important;
}
table .planner-select.tow-status-selector[data-value="neutral"],
#plannerTable .planner-select.tow-status-selector[data-value="neutral"],
.planner-td select.tow-status-selector[data-value="neutral"] {
background-color: transparent !important;
color: #4b5563 !important;
border: none !important;
}
/* Option styling - fallback for browsers that support it */
.planner-select.tow-status-selector option[value="initiated"] {
background-color: #fff1e6;
color: #b45309;
}
.planner-select.tow-status-selector option[value="ongoing"] {
background-color: #e0f2fe;
color: #0369a1;
}
.planner-select.tow-status-selector option[value="on-position"] {
background-color: #dcfce7;
color: #166534;
}
/* Table view: plain status dropdown (no chip design) */
#plannerTable .status-plain,
.planner-td select.status-plain {
min-width: 90px;
font-size: 12px; /* legacy */
/*height: 26px; legacy */
padding: 2px 8px; /* legacy */
border-radius: 2px; /* legacy */
font-weight: 600;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent !important; /* match underlying theme background */
border: 1px solid transparent !important;
color: inherit;
}
/* Dark mode: ensure no UA white background; still match theme */
.dark-mode #plannerTable .status-plain,
.dark-mode .planner-td select.status-plain {
background-color: transparent !important; /* let table cell/background show through */
color: var(--text-primary) !important;
border-color: transparent !important;
}
/* Ensure neutral shows no text (handled via empty option text) */
/* No additional styling required here */
/* Additional table-specific status selector rules to ensure exact match with board view */
table .status-selector[value="neutral"],
#plannerTable .status-selector[value="neutral"],
.planner-td select.status-selector[value="neutral"] {
background: transparent !important;
color: #475569 !important;
border-color: transparent !important;
border-left: 0 !important;
box-shadow: none !important;
}
table .status-selector[value="ready"],
#plannerTable .status-selector[value="ready"],
.planner-td select.status-selector[value="ready"] {
background: #ecfdf5 !important;
color: #065f46 !important;
border-color: #a7f3d0 !important;
border-left-color: #10b981 !important;
border-left-width: 3px !important;
}
table .status-selector[value="maintenance"],
#plannerTable .status-selector[value="maintenance"],
.planner-td select.status-selector[value="maintenance"] {
background: #fff7ed !important;
color: #9a3412 !important;
border-color: #fed7aa !important;
border-left-color: #f59e0b !important;
border-left-width: 3px !important;
}
table .status-selector[value="aog"],
#plannerTable .status-selector[value="aog"],
.planner-td select.status-selector[value="aog"] {
background: #fef2f2 !important;
color: #991b1b !important;
border-color: #fecaca !important;
border-left-color: #dc2626 !important;
border-left-width: 3px !important;
}
/* Dark mode table-specific status selector rules */
.dark-mode table .status-selector[value="neutral"],
.dark-mode #plannerTable .status-selector[value="neutral"],
.dark-mode .planner-td select.status-selector[value="neutral"] {
background: var(--input-bg) !important;
color: var(--text-secondary) !important;
border: 1px solid transparent !important;
border-left-color: #64748b !important;
border-left-width: 3px !important;
}
.dark-mode table .status-selector[value="ready"],
.dark-mode #plannerTable .status-selector[value="ready"],
.dark-mode .planner-td select.status-selector[value="ready"] {
background: rgba(16, 185, 129, 0.15) !important;
border-color: #065f46 !important;
color: #a7f3d0 !important;
border-left-color: #10b981 !important;
border-left-width: 3px !important;
}
.dark-mode table .status-selector[value="maintenance"],
.dark-mode #plannerTable .status-selector[value="maintenance"],
.dark-mode .planner-td select.status-selector[value="maintenance"] {
background: rgba(245, 158, 11, 0.15) !important;
border-color: #b45309 !important;
color: #fdba74 !important;
border-left-color: #f59e0b !important;
border-left-width: 3px !important;
}
.dark-mode table .status-selector[value="aog"],
.dark-mode #plannerTable .status-selector[value="aog"],
.dark-mode .planner-td select.status-selector[value="aog"] {
background: rgba(220, 38, 38, 0.15) !important;
border-color: #991b1b !important;
color: #fca5a5 !important;
border-left-color: #dc2626 !important;
border-left-width: 3px !important;
}
/* Table view layout - ensure changelog is visible */
body.table-view .planner-infobox {
display: block;
}
body.table-view #panel-planner-table {
position: relative;
}
/* Adjust table panel layout to accommodate changelog */
#panel-planner-table {
--infobox-width: 340px;
height: calc(100vh - 120px); /* Account for header and tabs */
overflow: hidden;
}
/* Table view: constrain width to prevent overlap with infobox + gap */
#panel-planner-table #plannerTableView {
width: 100%;
max-width: calc(100% - var(--infobox-width) - 40px);
box-sizing: border-box;
}
/* Table view infobox positioning with left margin for gap */
#panel-planner-table #infobox-table {
position: absolute;
top: 0;
right: 0;
width: var(--infobox-width);
height: 100%;
z-index: 10;
margin-left: 30px;
background: var(--bg-primary, #ffffff);
border-left: 1px solid var(--menu-border, #e6e6e6);
}
/* Ensure changelog fills the full height */
#panel-planner-table .planner-changelog {
height: 100%;
display: flex;
flex-direction: column;
}
#panel-planner-table .changelog-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Make notes input/textarea use full column width and single line */
.planner-td input[data-col="notes"],
.planner-td textarea[data-col="notes"],
.planner-input[data-col="notes"] {
width: 100% !important;
min-width: 0;
box-sizing: border-box;
resize: none;
overflow: hidden;
line-height: 1.5;
min-height: auto !important;
max-height: 2.5em !important;
}
/* Ensure table cells don't constrain notes input */
#plannerTable tbody td:last-child {
min-width: 200px;
width: auto;
}
/* Notes cell specific styling */
.planner-td:has(input[data-col="notes"]) {
padding: 0 2px;
}
.planner-td:has(input[data-col="notes"]) input {
padding: 8px;
margin: 0;
}
/* Resize handle for table view */
#infobox-table::before {
content: '';
position: absolute;
left: -3px;
top: 0;
bottom: 0;
width: 6px;
background: transparent;
cursor: col-resize;
z-index: 10;
transition: background-color 0.2s ease;
}
#infobox-table:hover::before {
background: rgba(99, 102, 241, 0.3);
}
/* Visual grab handle on hover */
#infobox-table::after {
content: '';
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 30px;
background: rgba(99, 102, 241, 0);
border-radius: 2px;
transition: background-color 0.2s ease;
pointer-events: none;
}
#infobox-table:hover::after {
background: rgba(99, 102, 241, 0.6);
}
/* Dark mode support for table view */
.dark-mode .planner-td .status-light {
border-color: rgba(255, 255, 255, 0.2);
}
.dark-mode .planner-select.tow-status-selector {
background-color: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-primary);
}
.dark-mode .planner-select.tow-status-selector option[value="initiated"] {
background-color: rgba(181, 67, 9, 0.2);
color: #fbbf24;
}
.dark-mode .planner-select.tow-status-selector option[value="ongoing"] {
background-color: rgba(3, 105, 161, 0.2);
color: #60a5fa;
}
.dark-mode .planner-select.tow-status-selector option[value="on-position"] {
background-color: rgba(22, 101, 52, 0.2);
color: #4ade80;
}
/* Dark mode styling for tow status selectors with data attributes */
.dark-mode .planner-select.tow-status-selector {
background-color: transparent !important;
border: none !important;
color: var(--text-primary) !important;
}
.dark-mode .planner-select.tow-status-selector[data-value="initiated"] {
background-color: rgba(245, 158, 11, 0.15) !important; /* match board */
color: #f59e0b !important; /* darker for readability */
-webkit-text-fill-color: #f59e0b !important; /* Safari disabled select text */
border-color: #b45309 !important;
}
.dark-mode .planner-select.tow-status-selector[data-value="ongoing"] {
background-color: rgba(59, 130, 246, 0.15) !important; /* match board */
color: #3b82f6 !important; /* darker for readability */
-webkit-text-fill-color: #3b82f6 !important;
border-color: #1d4ed8 !important;
}
.dark-mode .planner-select.tow-status-selector[data-value="on-position"] {
background-color: rgba(16, 185, 129, 0.15) !important; /* match board */
color: #10b981 !important; /* darker for readability */
-webkit-text-fill-color: #10b981 !important;
border-color: #065f46 !important;
}
.dark-mode .planner-select.tow-status-selector[data-value="neutral"] {
background-color: transparent !important;
color: var(--text-primary) !important;
border: none !important;
}
/* Hide unused hangar positions 8 and 11 in table view */
#hangar-pos-8,
#hangar-pos-11,
#table-row-8,
#table-row-11,
tr[data-hangar-pos="8"],
tr[data-hangar-pos="11"] {
display: none !important;
}
}
/* Add borders back for non-neutral dark mode values */
.dark-mode .planner-select.tow-status-selector[data-value="initiated"],
.dark-mode .planner-select.tow-status-selector[data-value="ongoing"],
.dark-mode .planner-select.tow-status-selector[data-value="on-position"] {
border: 1px solid !important;
}
/* Dark mode for table view infobox */
.dark-mode #panel-planner-table #infobox-table {
background: var(--bg-primary);
border-left-color: var(--border-color);
}
/* Prevent dropdown flickering and ensure stable dropdown behavior */
.tow-status-selector:focus {
outline: 2px solid #3b82f6 !important;
outline-offset: 1px !important;
z-index: 1000 !important;
}
.tow-status-selector option {
background-color: #ffffff !important;
color: #000000 !important;
padding: 4px 8px !important;
}
.dark-mode .tow-status-selector option {
background-color: var(--bg-primary) !important;
color: var(--text-primary) !important;
}
/* Ensure dropdown doesn't interfere with styling updates */
.tow-status-selector[aria-expanded="true"],
.tow-status-selector:focus {
position: relative;
z-index: 100;
}
/* Responsive layout for table view */
@media (max-width: 1200px) {
#panel-planner-table {
padding-right: 0;
}
body.table-view .planner-infobox {
position: static;
width: auto;
height: auto;
border-left: 0;
border-top: 1px solid var(--menu-border);
}
.dark-mode body.table-view .planner-infobox {
border-top-color: var(--border-color);
}
}
/* Consistent widths for Update submenu inputs */
#submenu-update { --update-input-width: 280px; }
/* Allow the right input column to shrink so content never touches the panel border */
#submenu-update .sidebar-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#submenu-update .sidebar-form-row > label { flex: 1 1 auto; min-width: 140px; color: #6b6b6b; font-weight: 700; font-size: 10px; }
/* Make input container shrinkable and cap it to the available width */
#submenu-update .sidebar-form-row .input-container { flex: 0 1 var(--update-input-width); max-width: 100%; }
#submenu-update .sidebar-form-row .sidebar-form-control { width: 100%; }
/* Apply Update label style to other submenus for consistency */
#submenu-display .sidebar-form-row > label,
#submenu-project .sidebar-form-row > label,
#submenu-export label {
color: #6b6b6b;
font-weight: 700;
font-size: 10px;
}
/* Tweak the small labels beside the toggle in Project */
#submenu-project .mode-toggle { gap: 6px; margin-right: 0; }
#submenu-project .mode-toggle-label {
font-size: 10px;
font-weight: 700;
color: #6b6b6b;
margin: 0; /* override global margin-right */
padding: 0 4px; /* slight breathing room around text */
line-height: 1; /* tighter vertical alignment */
}
/* Hide number input spin buttons for the interval field */
#submenu-update input[type=number]::-webkit-outer-spin-button,
#submenu-update input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#submenu-update input[type=number] { -moz-appearance: textfield; }
/* Presence inline input (matches header widget font style) */
.presence-name-input {
font: inherit;
color: #64748b; /* secondary text in light mode */
background: transparent;
border: 1px solid transparent;
padding: 0 4px;
min-width: 120px;
border-radius: 4px;
}
.presence-name-input::placeholder { color: #64748b; opacity: 0.7; }
.dark-mode .presence-name-input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.dark-mode .presence-name-input { color: var(--text-secondary); border: none !important; }
.presence-name-input:focus { outline: none; border-bottom: 1px solid #cbd5e1; }
.dark-mode .presence-name-input:focus { border: none !important; outline: none !important; }
/* Explicit id selector as requested */
.dark-mode #presenceNameInput { border: none !important; }
.dark-mode #presenceNameInput:focus { border: none !important; outline: none !important; }
/* Mail log readability (light theme) */
body:not(.dark-mode) #mailLogList,
body:not(.dark-mode) #mailLogList li {
color: #374151 !important; /* slate-700 for good contrast */
}
/* Mail log two-row layout */
#mailLogList {
list-style: none;
padding-left: 0;
}
#mailLogList .mail-log-item {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
line-height: 1.2;
padding: 6px 8px;
border-bottom: 1px solid #eee;
}
#mailLogList .mail-row1 {
font-weight: 600;
}
#mailLogList .mail-row2 {
color: #555;
margin-top: 2px;
}
.dark-mode #mailLogList .mail-log-item {
border-bottom-color: var(--border-color);
}
.dark-mode #mailLogList .mail-row2 {
color: var(--text-secondary);
}
/* Users list truncation and layout */
#presenceNames { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Presence chips: match Sync Mode chip style */
.presence-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px !important;
border-radius: 4px !important;
border: 1px solid transparent !important;
min-width: 0 !important;
text-align: right;
font-weight: 400;
font-size: 0.875rem;
margin-right: 6px;
}
/* Editing pill (speech bubble) for multi-master locks */
.editing-pill {
position: absolute;
right: 6px;
top: -12px;
display: inline-block;
padding: 2px 8px;
border-radius: 14px 14px 14px 0; /* all rounded except bottom-left */
font-size: 11px;
line-height: 14px;
white-space: nowrap;
pointer-events: none;
z-index: 2;
/* Fallback colors (light mode) */
background: rgba(245, 158, 11, 0.35); /* orange-500 @ 35% */
border: 1px solid rgba(245, 158, 11, 0.7);
color: #92400e;
/* Preferred using existing accent variable with glassy effect */
background: color-mix(in srgb, var(--menu-accent) 35%, transparent);
border-color: color-mix(in srgb, var(--menu-accent) 60%, transparent);
color: color-mix(in srgb, var(--menu-accent) 65%, #2c1600);
backdrop-filter: saturate(120%) blur(1px);
}
.editing-pill .editing-pill-tail {
/* Tail removed as requested */
display: none !important;
}
.dark-mode .editing-pill {
/* Slightly lower opacity in dark mode for glassy look */
background: rgba(245, 158, 11, 0.28);
border-color: rgba(245, 158, 11, 0.55);
color: #f8fafc;
background: color-mix(in srgb, var(--menu-accent) 28%, transparent);
border-color: color-mix(in srgb, var(--menu-accent) 55%, transparent);
}
.dark-mode .editing-pill .editing-pill-tail { display: none !important; }
/* Remote user field lock indicator (Multi-Master Mode) - Using background color for better visibility */
.remote-locked-field,
input.remote-locked-field,
textarea.remote-locked-field,
select.remote-locked-field,
.aircraft-id.remote-locked-field,
.info-input.remote-locked-field {
background: rgba(244, 158, 12, 0.15) !important; /* Orange accent with 15% opacity */
border: 2px solid rgba(244, 158, 12, 0.6) !important; /* Orange border */
box-shadow: 0 0 8px rgba(244, 158, 12, 0.3) !important; /* Subtle glow */
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dark-mode .remote-locked-field,
.dark-mode input.remote-locked-field,
.dark-mode textarea.remote-locked-field,
.dark-mode select.remote-locked-field,
.dark-mode .aircraft-id.remote-locked-field,
.dark-mode .info-input.remote-locked-field {
background: rgba(244, 158, 12, 0.25) !important; /* Brighter in dark mode */
border: 2px solid rgba(244, 158, 12, 0.7) !important;
box-shadow: 0 0 12px rgba(244, 158, 12, 0.4) !important;
}
/* Light theme variants (legacy mapping) */
.presence-chip.master { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #065f46 !important; }
.presence-chip.sync { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; }
.presence-chip.standalone { background: #f3f4f6 !important; border-color: #e5e7eb !important; color: #475569 !important; }
/* Dark theme variants (legacy mapping) */
.dark-mode .presence-chip.master { background: rgba(16,185,129,0.15) !important; border-color: #065f46 !important; color: #a7f3d0 !important; }
.dark-mode .presence-chip.sync { background: rgba(59,130,246,0.15) !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
.dark-mode .presence-chip.standalone { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
/* New mapping to match Sync Status colour codes (mode-master/mode-sync/standalone) */
.presence-chip.mode-master { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #065f46 !important; }
.presence-chip.mode-sync { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; }
.presence-chip.standalone { background: #f3f4f6 !important; border-color: #e5e7eb !important; color: #475569 !important; }
.dark-mode .presence-chip.mode-master { background: rgba(16,185,129,0.15) !important; border-color: #065f46 !important; color: #a7f3d0 !important; }
.dark-mode .presence-chip.mode-sync { background: rgba(59,130,246,0.15) !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
.dark-mode .presence-chip.standalone { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
/* === Top Tabs styling (lightweight, Postman-like) === */
#topTabs { border-bottom: 1px solid var(--menu-border); padding: 0 4px; background: #ffffff; }
#topTabs .tab-btn {
background: transparent;
color: #6b7280; /* slate-500 */
border: none;
border-bottom: 2px solid transparent;
padding: 4px 8px;
font-weight: 600;
font-size: 12px;
line-height: 1.2;
height: 24px;
}
#topTabs .tab-btn + .tab-btn { margin-left: 6px; }
#topTabs .tab-btn:hover { color: #111827; background: transparent; }
#topTabs .tab-btn[aria-selected="true"] {
border-bottom-color: var(--menu-accent);
color: #111827;
}
.dark-mode #topTabs { border-bottom-color: var(--border-color); background: var(--bg-primary); }
.dark-mode #topTabs .tab-btn { color: var(--text-secondary); }
.dark-mode #topTabs .tab-btn:hover { color: #ffffff; background: transparent; }
.dark-mode #topTabs .tab-btn[aria-selected="true"] { border-bottom-color: var(--menu-accent); color: #ffffff; }
/* Restore light-mode native hover for Tow select (softer, no flash) */
html:not(.dark-mode) .tow-status-selector:hover {
background-color: transparent !important;
border-color: #e5e7eb !important;
}
/* Ensure Tow select remains interactive across browsers */
.tow-status-selector::-ms-expand { display: initial; }
/* Dark mode: keep Tow select hover subtle */
.dark-mode .tow-status-selector:hover {
background-color: var(--input-bg) !important;
border-color: var(--border-color) !important;
}
/* Read-only (Sync) mode: force Arr/Dep time placeholders hidden at all times */
.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]::placeholder,
.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]::placeholder,
.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]::placeholder,
.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]::placeholder,
.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]:hover::placeholder,
.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]:hover::placeholder,
.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:hover::placeholder,
.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:hover::placeholder,
.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]:focus::placeholder,
.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]:focus::placeholder,
.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:focus::placeholder,
.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:focus::placeholder {
color: transparent !important;
}
/* Dark-mode explicit override (beats .dark-mode .info-input::placeholder) */
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]::placeholder,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]::placeholder,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]::placeholder,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]::placeholder,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]:hover::placeholder,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]:hover::placeholder,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:hover::placeholder,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:hover::placeholder,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]:focus::placeholder,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]:focus::placeholder,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:focus::placeholder,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:focus::placeholder {
color: transparent !important;
}
/* Vendor-prefixed placeholder selectors to cover WebKit/legacy */
.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]::-webkit-input-placeholder,
.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]::-webkit-input-placeholder,
.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]::-webkit-input-placeholder,
.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]::-webkit-input-placeholder,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]::-webkit-input-placeholder,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]::-webkit-input-placeholder,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]::-webkit-input-placeholder,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]::-webkit-input-placeholder {
color: transparent !important;
}
/* Fallback for engines that ignore ::placeholder on disabled inputs: hide text when placeholder-shown */
.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]:placeholder-shown,
.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]:placeholder-shown,
.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:placeholder-shown,
.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:placeholder-shown,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="arrival-time-"]:placeholder-shown,
.dark-mode.read-only #hangarGrid .hangar-cell input[id^="departure-time-"]:placeholder-shown,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="arrival-time-"]:placeholder-shown,
.dark-mode.read-only #secondaryHangarGrid .hangar-cell input[id^="departure-time-"]:placeholder-shown {
color: transparent !important;
-webkit-text-fill-color: transparent !important; /* Safari */
}
/* ==========================================================================
GLOBAL TABLE BORDER REMOVAL AND ZEBRA STRIPING FIX
Final overrides to ensure no borders and correct alternating rows
========================================================================== */
/* Remove ALL borders from table elements globally */
#plannerTable tr,
#plannerTable th,
#plannerTable td,
#fleetTable tr,
#fleetTable th,
#fleetTable td,
#airport-flights-container table tr,
#airport-flights-container table th,
#airport-flights-container table td {
border: none !important;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
}
/* Zebra striping: Use explicit classes for planner table, nth-child for fleet table */
/* Light mode */
#plannerTable tbody tr.zebra-even,
#fleetTable tbody tr:nth-child(even) {
background-color: #ffffff !important;
}
#plannerTable tbody tr.zebra-odd,
#fleetTable tbody tr:nth-child(odd) {
background-color: #f9fafb !important;
}
/* Dark mode zebra striping */
.dark-mode #plannerTable tbody tr.zebra-even,
.dark-mode #fleetTable tbody tr:nth-child(even) {
background-color: var(--dark-card) !important;
}
.dark-mode #plannerTable tbody tr.zebra-odd,
.dark-mode #fleetTable tbody tr:nth-child(odd) {
background-color: var(--dark-secondary) !important;
}
/* Ensure inputs inherit row backgrounds properly */
#plannerTable tbody tr .planner-input,
#fleetTable tbody tr input {
background: transparent !important;
}
/* COMPLETELY DISABLE hover effects with pointer-events and transition */
#plannerTable tbody tr,
#fleetTable tbody tr,
#airport-flights-container table tbody tr {
transition: none !important;
}
#plannerTable tbody tr:hover,
#plannerTable tbody tr:hover *,
#fleetTable tbody tr:hover,
#fleetTable tbody tr:hover *,
#airport-flights-container table tbody tr:hover,
#airport-flights-container table tbody tr:hover * {
background-color: inherit !important;
transition: none !important;
}
/* Force override any hover styles from other CSS */
.dark-mode #plannerTable tbody tr:hover,
.dark-mode #fleetTable tbody tr:hover {
background-color: inherit !important;
}
/* Ensure section dividers don't get borders either */
#plannerTable tr.section-divider,
#plannerTable tr.section-divider td {
border: none !important;
background: transparent !important;
}