/* ==========================================================================
   FiberPlanner - Slate Glass & Sky Accent Theme (Unified)
   File: assets/css/layout.css
   ========================================================================== */

/* --- Reset & Core Variables --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Professional steel-blue accents: clear without a neon appearance. */
    --cyan-primary: #66b3d1;
    --cyan-hover: #3b8ead;
    
    /* Mid-dark slate workspace: softer and more legible than near-black. */
    --gray-base: #202b36;
    --gray-bg: rgba(37, 50, 63, 0.96);
    
    /* Restrained translucent panels with a desktop GIS feel. */
    --gray-panel: rgba(42, 56, 70, 0.96);
    --gray-header: rgba(49, 66, 83, 0.98);
    --gray-hover: rgba(102, 179, 209, 0.17);
    --gray-active: linear-gradient(135deg, rgba(55, 119, 148, 0.94) 0%, rgba(45, 63, 80, 0.98) 100%);
    
    /* Slate Borders & Highlights */
    --gray-border: #566b7d;
    --gray-border-bright: rgba(121, 184, 209, 0.50);
    
    /* Diffused Specular Gloss Reflection Effect */
    --gloss-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 26px rgba(10, 18, 26, 0.36);
    --gloss-blur: blur(12px) saturate(125%);
    
    /* Typography for Glass Panels */
    --text-main: #f1f6f9;
    --text-muted: #bdc9d3;

    --menu-height: 34px;
    --status-height: 26px;
    --btn-size: 28px;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    background: var(--gray-base);
    color: var(--text-main);
}

#app-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

/* ==========================================================================
   1. TOP BANNER & DROPDOWN NAVIGATION WITH SUBMENUS
   ========================================================================== */
.top-menu-bar {
    height: var(--menu-height);
    background: var(--gray-header);
    border-bottom: 1px solid var(--gray-border);
    box-shadow: var(--gloss-shadow);
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 10000; /* High z-index to overlay map and docks */
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-logo {
    font-weight: bold;
    font-size: 13px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.nav-dropdowns {
    display: flex;
    align-items: center;
    gap: 2px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background: transparent;
    color: var(--text-main);
    padding: 6px 12px;
    font-size: 11px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropbtn:hover,
.dropdown:hover > .dropbtn {
    background: var(--gray-hover);
    border-color: var(--gray-border-bright);
    color: #ffffff;
}

/* --- Level 1 Dropdown Menu --- */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--gray-panel);
    min-width: 200px;
    box-shadow: var(--gloss-shadow);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    z-index: 10001;
    padding: 4px 0;
    margin-top: 2px;
}

.dropdown:hover > .dropdown-content {
    display: block;
}

.dropdown-content.dropdown-right {
    left: auto !important;
    right: 0 !important;
}

.dropdown-content a {
    color: var(--text-main);
    padding: 8px 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background: var(--gray-hover);
    color: var(--cyan-primary);
    font-weight: 600;
}

.dropdown-content hr {
    border: 0;
    border-top: 1px solid var(--gray-border);
    margin: 4px 0;
}

/* --- Level 2 Submenus (Nested Dropdowns) --- */
.dropdown-submenu {
    position: relative;
    width: 100%;
}

.dropdown-submenu .submenu-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.dropdown-submenu .submenu-arrow {
    font-size: 10px;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Highlight trigger when submenu is open/hovered */
.dropdown-submenu:hover > .submenu-trigger {
    background: var(--gray-hover);
    color: var(--cyan-primary);
    font-weight: 600;
}

.dropdown-submenu:hover > .submenu-trigger .submenu-arrow {
    color: var(--cyan-primary);
    transform: translateX(2px);
}

/* Level 2 Submenu Panel Position & Behavior */
.dropdown-content-sub {
    display: none;
    position: absolute;
    top: -4px; /* Smooth overlap */
    left: 100%; /* Fly out to the right */
    background: var(--gray-panel);
    min-width: 210px;
    box-shadow: var(--gloss-shadow);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    z-index: 10002;
    padding: 4px 0;
}

.dropdown-submenu:hover > .dropdown-content-sub {
    display: block;
}

/* Submenu position for rightmost items */
.dropdown-submenu.open-left > .dropdown-content-sub {
    left: auto !important;
    right: 100% !important;
}

.username-display {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
}

/* ==========================================================================
   2. MAIN WORKSPACE & TOOLBARS
   ========================================================================== */
.workspace {
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--menu-height) - var(--status-height));
    background: var(--gray-base);
}

/* --- Left Dock --- */
.left-dock {
    display: flex;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    flex: 0 0 280px;
    background: var(--gray-panel);
    border-right: 1px solid var(--gray-border);
    z-index: 500;
    transition: width 0.25s ease;
    box-shadow: var(--gloss-shadow);
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    position: relative;
}

.left-dock.collapsed {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    flex-basis: 38px;
}

.left-dock.collapsed .layers-panel {
    display: none;
}

.dock-toggle {
    width: 18px;
    height: 36px;
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-header);
    border: 1px solid var(--gray-border);
    color: white;
    cursor: pointer;
    z-index: 2000;
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.dock-toggle:hover {
    background: var(--cyan-primary);
    color: #0f172a;
}

/* Vertical Toolbar Dock */
.arc-toolbar {
    width: 38px;
    background: var(--gray-header);
    border-right: 1px solid var(--gray-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    gap: 6px;
    box-sizing: border-box;
}

.arc-toolbar .tool-btn, 
.arc-toolbar #tool-basemap {
    width: var(--btn-size) !important;
    height: var(--btn-size) !important;
    min-width: var(--btn-size) !important;
    min-height: var(--btn-size) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text-main) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
}

.arc-toolbar .tool-btn i, 
.arc-toolbar #tool-basemap i {
    font-size: 13px !important;
    color: var(--text-main);
}

.arc-toolbar .tool-btn:hover, 
.arc-toolbar #tool-basemap:hover {
    background: var(--gray-hover) !important;
    border-color: var(--gray-border-bright) !important;
}

.arc-toolbar .tool-btn.active, 
.arc-toolbar #tool-basemap.active {
    background: var(--gray-active) !important;
    border-color: var(--cyan-primary) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.arc-toolbar .tool-btn.active i, 
.arc-toolbar #tool-basemap.active i {
    color: #ffffff !important;
}

.toolbar-dropdown-container {
    position: relative;
    padding: 2px 0;
}

.toolbar-flyout-menu {
    display: none;
    position: absolute;
    top: -4px;
    left: 38px;
    background: var(--gray-panel);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    min-width: 200px;
    box-shadow: var(--gloss-shadow);
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    z-index: 1200;
    padding: 4px 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.toolbar-dropdown-container:hover .toolbar-flyout-menu {
    display: none;
}

body.auth-disabled #menu-file-login,
body.auth-disabled #btn-user-login,
body.auth-disabled #modal-login,
body.auth-disabled #modal-register,
body.auth-disabled #modal-forgot-password,
body.auth-disabled #modal-verify-2fa,
body.auth-disabled #modal-user-profile,
body.auth-disabled #modal-team-admin,
body.auth-disabled #modal-site-admin { display: none !important; }

/* FiberTrace loading language: the same illuminated strand appears at start-up and during work. */
#fp-app-loader { position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(8, 145, 178, .22), transparent 33%), #070b14; opacity: 1; visibility: visible; transition: opacity .35s ease, visibility .35s ease; }
#fp-app-loader.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.fp-loader-card { display: grid; justify-items: center; gap: 10px; min-width: min(300px, calc(100vw - 40px)); padding: 26px 30px; border: 1px solid rgba(34, 211, 238, .42); border-radius: 16px; background: rgba(15, 23, 42, .88); box-shadow: 0 0 0 1px rgba(14, 165, 233, .08), 0 20px 65px rgba(2, 132, 199, .27); color: #e0f2fe; text-align: center; }
.fp-loader-card strong { letter-spacing: .12em; font-size: 15px; text-transform: uppercase; }
.fp-loader-card small { color: #94a3b8; font-size: 10px; }
.fp-loader-fiber { position: relative; width: 142px; height: 38px; overflow: hidden; }
.fp-loader-fiber::before { position: absolute; top: 18px; left: 0; width: 100%; height: 2px; content: ''; background: linear-gradient(90deg, transparent, #22d3ee 18%, #e0f2fe 50%, #22d3ee 82%, transparent); box-shadow: 0 0 12px #22d3ee; }
.fp-loader-fiber span { position: absolute; top: 12px; width: 12px; height: 12px; border: 2px solid #67e8f9; border-radius: 50%; background: #0f172a; box-shadow: 0 0 12px #22d3ee; animation: fiberPulse 1.3s ease-in-out infinite; }
.fp-loader-fiber span:nth-child(1) { left: 14px; }.fp-loader-fiber span:nth-child(2) { left: 65px; animation-delay: .2s; }.fp-loader-fiber span:nth-child(3) { right: 14px; animation-delay: .4s; }
.fp-loader-fiber i { position: absolute; top: 15px; left: -22px; width: 22px; height: 7px; border-radius: 99px; background: #fff; box-shadow: 0 0 14px 5px #67e8f9; animation: fiberTravel 1.55s linear infinite; }
@keyframes fiberTravel { to { transform: translateX(188px); } }
@keyframes fiberPulse { 50% { transform: scale(1.32); background: #cffafe; } }

.fiber-logo-mark { position: relative; display: grid; width: 30px; height: 25px; place-items: center; overflow: visible; }
.fiber-logo-mark::before { position: absolute; inset: 2px 0; content: ''; border: 3px solid #0ea5e9; border-left-color: transparent; border-radius: 50% 45% 50% 42%; transform: rotate(-14deg); box-shadow: 0 0 9px rgba(14,165,233,.85); }
.fiber-logo-mark i { position: relative; z-index: 2; color: #05080c; font-size: 15px; filter: drop-shadow(0 0 1px rgba(255,255,255,.75)); }
.fiber-logo-mark .fiber-cable-core { position: absolute; z-index: 3; right: -2px; width: 11px; height: 4px; border: 1px solid #bae6fd; border-radius: 5px; background: #0284c7; transform: rotate(-14deg); box-shadow: 0 0 6px #38bdf8; }
.fiber-logo-mark b,.fiber-logo-mark em { position: absolute; z-index: 4; width: 3px; height: 3px; border-radius: 50%; background: #f8fafc; box-shadow: 0 -6px 0 -1px #f8fafc, 0 6px 0 -1px #f8fafc, 6px 0 0 -1px #f8fafc, -6px 0 0 -1px #f8fafc, 0 0 8px 2px #38bdf8; }.fiber-logo-mark b { top: 1px; right: -2px; }.fiber-logo-mark em { bottom: 2px; left: 1px; transform: scale(.65); }
.brand-lockup { display: flex; flex-direction: column; gap: 0; line-height: 1; }.brand-lockup > span { letter-spacing: .02em; }.brand-lockup small { margin-top: 2px; color: var(--cyan-primary); font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.fp-work-fiber { display: inline-flex; align-items: center; gap: 3px; width: 28px; }.fp-work-fiber::before { width: 100%; height: 2px; content: ''; background: linear-gradient(90deg, #0e7490, #67e8f9, #0e7490); background-size: 200% 100%; box-shadow: 0 0 7px #22d3ee; animation: fiberSweep 1.1s linear infinite; }.fp-work-fiber i,.fp-work-fiber b { display: none; }
@keyframes fiberSweep { to { background-position: -200% 0; } }

.flyout-header {
    padding: 6px 12px;
    font-weight: bold;
    color: var(--text-muted);
    border-bottom: 1px solid var(--gray-border);
    font-size: 11px;
    text-transform: uppercase;
}

.toolbar-flyout-menu a {
    color: var(--text-main);
    padding: 8px 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.toolbar-flyout-menu a:hover {
    background: var(--gray-hover);
    color: var(--cyan-primary);
}

/* ==========================================================================
   3. LAYER PANEL / TABLE OF CONTENTS
   ========================================================================== */
.layers-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    background: var(--gray-panel);
}

.layers-panel > .panel-header {
    flex: 0 0 auto;
    height: 34px;
    min-height: 34px;
    background: var(--gray-header);
    border-bottom: 1px solid var(--gray-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    font-weight: bold;
    color: var(--text-main);
    box-sizing: border-box;
    overflow: visible;
}

.layers-panel > .panel-header span {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.btn-collapse, 
#btn-add-layer-toc {
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    font-size: 11px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.btn-collapse:hover, 
#btn-add-layer-toc:hover {
    background: var(--gray-hover);
    color: var(--cyan-primary);
}

.layers-panel > .panel-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

#uploaded-layers-list {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-layer-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px 6px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.toc-layer-item:hover {
    background: var(--gray-hover);
}

.toc-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
}

.layer-check {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    accent-color: var(--cyan-primary);
    cursor: pointer;
}

.geometry-symbol {
    flex: none;
    display: inline-block;
}

.geometry-symbol.point-symbol {
    width: 8px;
    height: 8px;
    background: #38bdf8;
    border-radius: 50%;
}

.geometry-symbol.line-symbol {
    width: 14px;
    height: 3px;
    background: #f43f5e;
}

.geometry-symbol.polygon-symbol {
    width: 10px;
    height: 9px;
    background: #10b981;
    border: 1px solid #34d399;
}

.layer-name {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-main);
}

/* ==========================================================================
   4. MAP VIEWPORT CANVAS
   ========================================================================== */
.map-viewport {
    flex: 1;
    position: relative;
    height: 100%;
    width: 100%;
    background: var(--gray-base);
    isolation: isolate;
}

#map {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.leaflet-container {
    background-color: var(--gray-base) !important;
}

.leaflet-control-attribution {
    background: rgba(15, 23, 42, 0.85) !important;
    color: var(--text-muted) !important;
    font-size: 9px !important;
}

.leaflet-control-attribution a {
    color: var(--cyan-primary) !important;
}

/* ==========================================================================
   5. RIGHT DOCK - ATTRIBUTE INSPECTOR
   ========================================================================== */
.right-dock {
    position: relative;
    width: 320px;
    background: var(--gray-panel);
    border-left: 1px solid var(--gray-border);
    z-index: 500;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: visible !important;
    box-shadow: var(--gloss-shadow);
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    transition: transform 0.25s ease, width 0.25s ease;
}

.right-dock.collapsed {
    width: 0px !important;
    min-width: 0px !important;
    border-left: none !important;
}

.right-dock.collapsed .panel-header,
.right-dock.collapsed .panel-content {
    display: none !important;
}

.dock-toggle-right {
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 36px;
    background: var(--gray-header);
    border: 1px solid var(--gray-border);
    border-right: none;
    border-radius: 5px 0 0 5px;
    color: white;
    cursor: pointer;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: background 0.2s ease, color 0.2s ease;
}

.dock-toggle-right:hover {
    background: var(--cyan-primary);
    color: #0f172a;
}

.right-dock .panel-header {
    flex: 0 0 auto;
    height: 34px;
    min-height: 34px;
    background: var(--gray-header);
    border-bottom: 1px solid var(--gray-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-weight: bold;
    color: var(--text-main);
    box-sizing: border-box;
    overflow: hidden;
}

.right-dock .panel-header span {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.right-dock .panel-content {
    flex: 1 1 auto;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.attribute-info-box {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
}

.section-title {
    font-weight: bold;
    font-size: 11px;
    color: var(--cyan-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.attribute-table {
    width: 100%;
    border-collapse: collapse;
}

.attribute-table th, 
.attribute-table td {
    padding: 6px;
    text-align: left;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.attribute-table th {
    color: var(--text-muted);
    width: 40%;
    font-weight: normal;
}

.attribute-table td {
    color: #ffffff;
    font-weight: 500;
}

/* ==========================================================================
   6. FLOATING PANELS & MODAL POPUPS
   ========================================================================== */
.floating-panel, 
#panel-measurement, 
#panel-shortest-path, 
#panel-search, 
#panel-add-xy, 
#panel-print-layout {
    position: absolute !important;
    background: var(--gray-panel) !important;
    border: 1px solid var(--gray-border) !important;
    border-radius: 8px;
    box-shadow: var(--gloss-shadow) !important;
    backdrop-filter: var(--gloss-blur) !important;
    -webkit-backdrop-filter: var(--gloss-blur) !important;
    z-index: 1000;
    overflow: hidden;
}

.floating-panel .panel-header,
#panel-measurement .panel-header,
#panel-shortest-path .panel-header,
.style-popup-header {
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gray-header) !important;
    border-bottom: 1px solid var(--gray-border);
    user-select: none;
    min-height: 36px;
    box-sizing: border-box;
    color: #ffffff;
}

.floating-panel .panel-header > span,
.style-popup-header > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--cyan-primary);
    padding-right: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-panel .panel-actions,
#panel-measurement .panel-actions,
#panel-shortest-path .panel-actions {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.panel-body {
    padding: 14px;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 11px;
    margin-bottom: 4px;
    color: var(--text-muted);
}

.form-group input[type="text"],
.panel-select,
.layer-style-popup input {
    width: 100%;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    outline: none;
}

.form-group input[type="text"]:focus,
.panel-select:focus,
.layer-style-popup input:focus {
    border-color: var(--cyan-primary);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.btn-primary {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    background: var(--cyan-hover);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    background: var(--cyan-primary);
}

/* Close & Collapse Buttons */
.close-btn, 
.btn-close, 
.style-close-btn, 
.btn-collapse, 
.panel-collapse {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding: 3px 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.close-btn:hover, 
.btn-close:hover, 
.style-close-btn:hover {
    color: #ffffff;
    background: #ef4444;
}

.btn-collapse:hover, 
.panel-collapse:hover {
    color: #ffffff;
    background: var(--gray-border);
}

/* Add Layer Popup Modal */
.add-layer-popup {
    display: none;
    position: absolute;
    right: 8px;
    top: 40px;
    width: calc(100% - 16px);
    max-width: 238px;
    background: var(--gray-panel);
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: var(--gloss-shadow);
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    z-index: 5000;
}

.add-layer-popup.show {
    display: block;
}

.toc-layer-item .layer-options { flex: 0 0 auto; min-width: 20px; }
.toc-layer-item .drag-handle,.toc-layer-item .geometry-symbol,.toc-layer-item .layer-check { flex-shrink: 0; }

.add-layer-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 2px 9px;
    color: var(--cyan-primary);
    font-size: 11px;
    font-weight: 700;
    border-bottom: 1px solid var(--gray-border);
    margin-bottom: 8px;
}

.add-layer-option {
    width: 100%;
    padding: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    background: rgba(15, 23, 42, 0.5);
    color: var(--text-main);
    font-size: 11px;
}

.add-layer-option:hover {
    background: var(--gray-hover);
    border-color: var(--cyan-primary);
    color: var(--cyan-primary);
}

/* Layer Style Popup Dialog */
#layer-style-popup,
.layer-style-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-width: 90vw;
    background: var(--gray-panel) !important;
    border-radius: 8px;
    border: 1px solid var(--gray-border) !important;
    box-shadow: var(--gloss-shadow) !important;
    backdrop-filter: var(--gloss-blur) !important;
    -webkit-backdrop-filter: var(--gloss-blur) !important;
    z-index: 100000;
    font-family: inherit;
    color: #ffffff;
    overflow: hidden;
}

.style-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--gray-header) !important;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-border);
    font-weight: 600;
    color: var(--cyan-primary);
}

.style-popup-body {
    padding: 14px;
    max-height: 380px;
    overflow-y: auto;
    background: transparent;
}

.style-group {
    margin-bottom: 12px;
}

.style-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.style-group input[type="color"],
.style-group input[type="number"],
.style-group select {
    width: 100%;
    height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.6);
    color: #ffffff;
}

.style-popup-footer {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    background: var(--gray-header) !important;
    border-top: 1px solid var(--gray-border);
}

.style-popup-btn {
    flex: 1;
    height: 34px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--gray-border);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #334155;
    color: #ffffff;
    transition: background 0.2s ease;
}

.style-popup-btn:hover {
    background: #475569;
}

#apply-layer-style {
    background: var(--cyan-hover);
    color: #ffffff;
    border: none;
}

#apply-layer-style:hover {
    background: var(--cyan-primary);
}

/* TOC Context Options Menu */
.layer-options {
    position: relative;
    margin-left: auto;
}

.layer-three-dot {
    display: none;
    width: 22px;
    height: 22px;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.toc-layer-item:hover .layer-three-dot {
    display: block;
}

.layer-three-dot:hover {
    color: var(--cyan-primary);
}

.layer-options-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 25px;
    width: 170px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    box-shadow: var(--gloss-shadow);
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    z-index: 99999;
}

.layer-options-menu.show {
    display: block;
}

.layer-option {
    padding: 8px 12px;
    color: #ffffff;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    gap: 8px;
}

.layer-option:hover {
    background: var(--gray-hover);
    color: var(--cyan-primary);
}

/* ==========================================================================
   7. BOTTOM STATUS BAR
   ========================================================================== */
.app-status-bar {
    height: var(--status-height);
    background: var(--gray-header);
    border-top: 1px solid var(--gray-border);
    box-shadow: var(--gloss-shadow);
    backdrop-filter: var(--gloss-blur);
    -webkit-backdrop-filter: var(--gloss-blur);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 11px;
    color: var(--text-muted);
    z-index: 1000;
}

.status-scale-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-main);
    font-size: 11px;
}

.status-scale-select {
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-main);
    border: 1px solid var(--gray-border);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
    outline: none;
    cursor: pointer;
}

.status-scale-select option {
    background: #0f172a;
    color: var(--text-main);
}

.status-scale-input {
    width: 70px;
    background: rgba(15, 23, 42, 0.7);
    color: #ffffff;
    border: 1px solid var(--cyan-primary);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
    outline: none;
}

/* ==========================================================================
   8. UTILITY CLASSES & FIBER MARKERS
   ========================================================================== */
.fiber-point {
    width: 20px;
    height: 20px;
    border: 2px solid white;
    box-shadow: 0 0 3px #000;
}

.fp-jb { background: #ffcc00; border-radius: 50%; }
.fp-fdh { background: #0066ff; border-radius: 3px; }
.fp-olt { background: #ff0000; transform: rotate(45deg); }
.fp-splitter { background: #00aa00; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fp-mst { background: #9900ff; border-radius: 50% 50% 0 0; }
.fp-manhole { background: #444; border-radius: 50%; }
.fp-customer { background: #00ffff; border-radius: 0; }
.fp-default { background: #999; border-radius: 50%; }

/* Fixed FTTX drafting symbols.  The data model remains flexible, but these
   symbols make the engineering layers immediately readable at map scale. */
.fiber-point.fp-home { background:#5b3218 !important; border-color:#2b160b !important; border-radius:0 !important; clip-path:polygon(50% 0%,100% 42%,86% 42%,86% 100%,14% 100%,14% 42%,0% 42%) !important; box-shadow:0 0 2px rgba(15,23,42,.65); }
.fiber-point.fp-jrc-box { background:#f8fafc !important; border-color:#334155 !important; border-radius:1px !important; box-shadow:0 0 2px rgba(15,23,42,.7); }
.fiber-point.fp-fdh-cabinet { position:relative; box-sizing:border-box; background:#fff !important; border-color:#0f3e65 !important; border-radius:1px !important; box-shadow:0 0 3px rgba(15,23,42,.65); overflow:visible; }
.fiber-point.fp-fdh-cabinet::before,.fiber-point.fp-fdh-cabinet::after { content:''; position:absolute; top:50%; width:28%; height:42%; transform:translateY(-50%); border:1px solid rgba(15,23,42,.75); box-sizing:border-box; }
.fiber-point.fp-fdh-cabinet::before { left:17%; background:#2563eb; }
.fiber-point.fp-fdh-cabinet::after { right:17%; background:#f59e0b; }

.panel-hidden, .group-hidden, .hidden { display: none !important; }
.panel-xy-fixed { width: 320px; }

.search-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    max-height: 160px;
    overflow-y: auto;
    z-index: 1005;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    margin-top: 2px;
}

.search-suggestions-dropdown .suggestion-item {
    padding: 6px 10px;
    font-size: 11px;
    color: #cbd5e1;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestions-dropdown .suggestion-item:hover {
    background: #1e293b;
    color: var(--cyan-primary);
}


/* Fix Vertical Toolbar Clickability & Z-Index */
.left-dock {
    z-index: 1000 !important;
    position: relative;
}

.arc-toolbar {
    z-index: 1005 !important;
    position: relative;
    pointer-events: auto !important;
}

.arc-toolbar .tool-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure Basemap Flyout appears above the map */
.toolbar-flyout-menu {
    z-index: 2000 !important;
}

.toolbar-flyout-menu.show {
    display: block !important;
    position: fixed !important;
}

.add-layer-option:last-child { margin-bottom: 0; }

/* Floating Panels Absolute Override */
.floating-panel {
    position: fixed !important;
    z-index: 20000 !important;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    color: #f8fafc !important;
    pointer-events: auto !important;
}

#map .leaflet-interactive,
#map .leaflet-marker-icon,
#map .fiber-point {
    cursor: pointer !important;
}

/* Force Hidden state when panel-hidden class is present */
.floating-panel.panel-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Force Show state when active */
.floating-panel.active, 
.floating-panel:not(.panel-hidden) {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* A document-level overlay keeps interactive panels above Leaflet panes. */
#map-tool-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147480000;
    pointer-events: none;
}

#map-tool-overlay .floating-panel,
#map-tool-overlay #fp-attribute-panel {
    pointer-events: auto;
}

/* Bottom-right overview of the current map area. */
.map-indicator {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 230px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid var(--gray-border-bright);
    border-radius: 7px;
    box-shadow: var(--gloss-shadow);
    overflow: hidden;
    z-index: 22000;
    pointer-events: auto;
}

.map-indicator.is-hidden { display: none; }

.map-indicator-header {
    height: 30px;
    padding: 0 8px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-main);
    background: var(--gray-header);
    border-bottom: 1px solid var(--gray-border);
    font-weight: 600;
}

.map-indicator-header span { display: flex; align-items: center; gap: 6px; }
.map-indicator-header span i { color: var(--cyan-primary); }
.map-indicator-header button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
}
.map-indicator-header button:hover { color: var(--text-main); }

#map-indicator-preview { height: 145px; background: #dce9ef; }
#map-indicator-preview .leaflet-container { background: #dce9ef !important; }

.header-right { display: flex; align-items: center; gap: 8px; }
.theme-toggle {
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    background: transparent;
    color: var(--text-main);
    padding: 5px 8px;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.theme-toggle:hover { background: var(--gray-hover); border-color: var(--gray-border-bright); }

/* Light interface palette.  Components using the shared variables change together. */
body.light-theme {
    --cyan-primary: #0284c7;
    --cyan-hover: #0369a1;
    --gray-base: #e7eef6;
    --gray-bg: rgba(241, 245, 249, 0.9);
    --gray-panel: rgba(255, 255, 255, 0.94);
    --gray-header: rgba(248, 250, 252, 0.96);
    --gray-hover: rgba(2, 132, 199, 0.12);
    --gray-active: linear-gradient(135deg, #0284c7 0%, #0f4c75 100%);
    --gray-border: #cbd5e1;
    --gray-border-bright: rgba(2, 132, 199, 0.45);
    --gloss-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 8px 20px rgba(15, 23, 42, 0.16);
    --text-main: #0f172a;
    --text-muted: #475569;
}

body.light-theme .top-menu-bar { background: var(--gray-header) !important; }
body.light-theme .app-logo { color: #0f172a; text-shadow: none; }
body.light-theme .dropbtn:hover,
body.light-theme .dropdown:hover > .dropbtn { color: #0f172a; }
body.light-theme .floating-panel,
body.light-theme .map-indicator { background: rgba(255, 255, 255, 0.97) !important; color: #0f172a !important; }
body.light-theme .floating-panel .panel-header { color: #0f172a !important; }
body.light-theme .form-group input[type="text"],
body.light-theme .panel-select,
body.light-theme .layer-style-popup input,
body.light-theme .status-scale-input { background: #ffffff; color: #0f172a; }
body.light-theme .search-suggestions-dropdown { background: #ffffff; }
body.light-theme .search-suggestions-dropdown .suggestion-item { color: #334155; border-bottom-color: #e2e8f0; }
body.light-theme .search-suggestions-dropdown .suggestion-item:hover { background: #e0f2fe; }
body.light-theme .leaflet-control-attribution { background: rgba(255, 255, 255, 0.85) !important; }

/* Popup and modal surfaces inherit the selected application theme. */
.fp-attribute-layer-select {
    min-width: 150px;
    max-width: 260px;
    padding: 3px 22px 3px 7px;
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    background: var(--gray-panel);
    color: var(--text-main);
    font: inherit;
    outline: none;
}

.fp-attribute-record-count {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    color: var(--text-main);
    background: var(--gray-hover);
    border: 1px solid var(--gray-border);
}

#fp-attribute-panel .fp-attr-row {
    background: var(--gray-panel);
    border-bottom: 1px solid var(--gray-border);
    cursor: pointer;
}

#fp-attribute-panel .fp-attr-row:nth-child(even) { background: var(--gray-header); }
#fp-attribute-panel .fp-attr-row:hover { background: var(--gray-hover); }
#fp-attribute-panel .fp-attr-row.selected { background: rgba(2, 132, 199, 0.32); }

body.light-theme #layer-style-popup,
body.light-theme .layer-style-popup,
body.light-theme .fp-modal-content,
body.light-theme #fp-attribute-panel,
body.light-theme #fp-layer-select-modal > div,
body.light-theme #fp-upload-toast,
body.light-theme #fp-loading-popup {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Notifications must remain above every module dialog and blur backdrop. */
#fp-upload-toast {
    position: fixed !important;
    inset: auto auto 18px 50% !important;
    z-index: 2147483646 !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(560px, calc(100vw - 28px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(120px, calc(100dvh - 36px)) !important;
}

body.light-theme .fp-modal-header,
body.light-theme .fp-modal-footer,
body.light-theme #fp-layer-select-modal > div > div:first-child,
body.light-theme #fp-attribute-panel .fp-attribute-table-header,
body.light-theme #fp-attribute-panel .fp-attribute-table-head {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

body.light-theme .fp-modal-content *,
body.light-theme #layer-style-popup *,
body.light-theme #fp-attribute-panel *,
body.light-theme #fp-layer-select-modal *,
body.light-theme #fp-upload-toast *,
body.light-theme #fp-loading-popup * { color: inherit; }

body.light-theme .fp-input,
body.light-theme .fp-select,
body.light-theme .fp-textarea,
body.light-theme .fp-attribute-layer-select,
body.light-theme #layer-style-popup input,
body.light-theme #layer-style-popup select {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

body.light-theme .fp-btn-primary,
body.light-theme .btn-primary,
body.light-theme #apply-layer-style { color: #ffffff !important; }

body.light-theme .attribute-info-box,
body.light-theme .core-matrix-preview,
body.light-theme .layer-options-menu,
body.light-theme .toc-layer-item {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

body.light-theme .attribute-table tr,
body.light-theme .attribute-table th,
body.light-theme .attribute-table td,
body.light-theme .layer-option,
body.light-theme .toc-layer-item .layer-name {
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .attribute-table tr { background: #ffffff !important; }
body.light-theme .attribute-table tr:nth-child(even) { background: #f8fafc !important; }

/* Dynamic panels in the existing code use inline dark shades. */
body.light-theme [style*="background: #0f172a"],
body.light-theme [style*="background: #1e293b"],
body.light-theme [style*="background:#0f172a"],
body.light-theme [style*="background:#1e293b"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Geometry-aware layer styling workspace. */
#layer-style-popup.layer-style-popup {
    width: min(440px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 24px);
    padding: 0 !important;
    border-radius: 12px;
    border: 1px solid var(--gray-border-bright) !important;
    background: var(--gray-panel) !important;
    color: var(--text-main) !important;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.42) !important;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#layer-style-popup .style-popup-header {
    padding: 14px 16px;
    color: var(--text-main) !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.18), var(--gray-header)) !important;
}

#layer-style-popup .style-title-wrap { display: grid; gap: 3px; min-width: 0; }
#layer-style-popup #style-popup-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
#layer-style-popup #style-popup-title i { color: var(--cyan-primary); margin-right: 7px; }
#layer-style-popup #style-layer-meta { font-size: 11px; font-weight: 400; color: var(--text-muted); }
#layer-style-popup .style-close-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray-border);
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}
#layer-style-popup .style-close-btn:hover { color: #ffffff; background: #dc2626; border-color: #dc2626; }

#layer-style-popup .style-popup-body {
    padding: 15px 16px 12px;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--gray-panel);
}
#layer-style-popup .style-layer-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    margin-bottom: 14px;
    border: 1px solid var(--gray-border);
    border-radius: 9px;
    background: var(--gray-header);
}
#layer-style-popup .style-geometry-icon {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: var(--cyan-primary);
}
#layer-style-popup .style-layer-summary div { display: grid; min-width: 0; gap: 2px; }
#layer-style-popup .style-layer-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#layer-style-popup .style-layer-summary span:not(.style-geometry-icon) { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
#layer-style-popup .style-layer-summary small { display: block; overflow: hidden; color: var(--text-muted); font-size: 9px; font-weight: 400; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
#layer-style-popup .style-section-heading {
    margin: 13px 0 8px;
    color: var(--cyan-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#layer-style-popup .style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#layer-style-popup #style-outline-section { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#layer-style-popup .style-group { margin: 0; min-width: 0; }
#layer-style-popup .style-group label { color: var(--text-muted); font-size: 10px; margin-bottom: 5px; }
#layer-style-popup .style-group input[type="color"] { padding: 3px; cursor: pointer; }
#layer-style-popup .style-group input[type="number"],
#layer-style-popup .style-group select {
    height: 34px;
    color: var(--text-main);
    background: var(--gray-header);
    border-color: var(--gray-border);
}
#layer-style-popup .style-range-control { display: flex; align-items: center; gap: 6px; height: 34px; }
#layer-style-popup .style-range-control input { min-width: 0; flex: 1; accent-color: var(--cyan-primary); }
#layer-style-popup .style-range-control output {
    min-width: 34px;
    color: var(--text-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
#layer-style-popup .style-popup-footer {
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 12px 16px;
    background: var(--gray-header) !important;
}
#layer-style-popup .style-popup-footer button { flex: initial; min-width: 105px; }
#layer-style-popup #cancel-layer-style { background: transparent; color: var(--text-main); border: 1px solid var(--gray-border); }

.fp-layer-style-selector {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(2, 6, 23, 0.58);
    backdrop-filter: blur(3px);
}
.fp-layer-style-selector-card {
    width: min(410px, 100%);
    overflow: hidden;
    border: 1px solid var(--gray-border-bright);
    border-radius: 12px;
    background: var(--gray-panel);
    color: var(--text-main);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
}
.fp-layer-style-selector-header,
.fp-layer-style-selector-footer { display: flex; align-items: center; padding: 13px 15px; background: var(--gray-header); }
.fp-layer-style-selector-header { justify-content: space-between; border-bottom: 1px solid var(--gray-border); font-size: 13px; font-weight: 700; }
.fp-layer-style-selector-header i { color: var(--cyan-primary); margin-right: 7px; }
.fp-style-selector-close { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 21px; }
.fp-layer-style-selector-body { padding: 16px; }
.fp-layer-style-selector-body p { margin: 0 0 14px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.fp-layer-style-selector-body label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.fp-style-layer-select { width: 100%; height: 37px; padding: 0 9px; color: var(--text-main); background: var(--gray-panel); border: 1px solid var(--gray-border); border-radius: 6px; }
.fp-layer-style-selector-footer { justify-content: flex-end; gap: 8px; border-top: 1px solid var(--gray-border); }
.fp-layer-style-selector-footer button { height: 34px; padding: 0 12px; border-radius: 6px; cursor: pointer; font: inherit; }
.fp-style-selector-cancel { color: var(--text-main); background: transparent; border: 1px solid var(--gray-border); }
.fp-style-selector-open { color: #ffffff; background: var(--cyan-hover); border: 1px solid var(--cyan-hover); }
.fp-style-selector-open:hover { background: var(--cyan-primary); }

body.light-theme #layer-style-popup .style-popup-header,
body.light-theme #layer-style-popup .style-popup-body,
body.light-theme #layer-style-popup .style-popup-footer,
body.light-theme .fp-layer-style-selector-card,
body.light-theme .fp-layer-style-selector-header,
body.light-theme .fp-layer-style-selector-footer { color: #0f172a !important; background: #ffffff !important; }
body.light-theme #layer-style-popup .style-layer-summary,
body.light-theme #layer-style-popup .style-group input[type="number"],
body.light-theme #layer-style-popup .style-group select,
body.light-theme .fp-style-layer-select { color: #0f172a !important; background: #f8fafc !important; border-color: #cbd5e1 !important; }

@media (max-width: 520px) {
    #layer-style-popup #style-outline-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Unified panel-title language: gray in light mode, muted cyan-blue in dark mode. */
:root { --panel-title-bg: #327f9f; --panel-title-border: #66b3d1; --panel-title-text: #f6fbfd; }
body.light-theme { --panel-title-bg: #cbd0d5; --panel-title-border: #a5adb5; --panel-title-text: #27313a; }
.layers-panel > .panel-header,
.right-dock > .panel-header,
.floating-panel > .panel-header,
.fp-editor-dragbar,
.fp-editor-dialog-header,
.fp-modal-header,
.fp-layer-library-card > header,
.fp-layer-group-header,
.fp-layer-style-selector-header,
#layer-style-popup .style-popup-header,
.map-indicator-header,
#fp-attribute-panel .fp-attribute-table-header {
    background: var(--panel-title-bg) !important;
    border-color: var(--panel-title-border) !important;
    color: var(--panel-title-text) !important;
}
.layers-panel > .panel-header i,
.right-dock > .panel-header i,
.floating-panel > .panel-header i,
.fp-editor-dragbar i,
.fp-editor-dialog-header i,
.fp-modal-header i,
.fp-layer-library-card > header i,
.fp-layer-group-header i,
.fp-layer-style-selector-header i,
#layer-style-popup .style-popup-header i,
.map-indicator-header i,
#fp-attribute-panel .fp-attribute-table-header i { color: var(--panel-title-text) !important; }
body.light-theme .fp-editor-dialog-header,
body.light-theme .fp-editor-dialog-footer { color: var(--text-main); border-color: var(--gray-border); }

/* Target layer remains visible on the main Editor ribbon; Pencil follows its geometry. */
.fp-editor-target-wrap { display: grid; grid-template-columns: auto minmax(145px, 210px); align-items: center; gap: 5px; min-width: 210px; margin: 0 3px; color: var(--text-muted); font: 700 8px/1 Arial,sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.fp-editor-target-wrap .fp-input { width: 100%; min-width: 145px; height: 29px; }

/* Attribute table editing actions and directional slide control. */
.fp-attribute-header-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.fp-attribute-header-actions .fp-btn { min-width: 86px; height: 25px; min-height: 25px; padding: 0 7px; font-size: 9px; }
.fp-attribute-header-actions .fp-btn:disabled { opacity: .48; cursor: not-allowed; }
.fp-attribute-close { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--panel-title-text); cursor: pointer; }
.fp-attribute-close:hover { background: #c93636; color: #fff; }
#toggle-attr-slide i { transition: transform .18s ease; }
.fp-attr-field-calculator { display: grid; grid-template-columns: minmax(105px,1.15fr) minmax(120px,1.25fr) minmax(90px,.8fr) minmax(125px,1.1fr) auto; gap: 7px; align-items: end; padding: 7px 9px; border-bottom: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-attr-field-calculator[hidden] { display: none !important; }
.fp-attr-field-calculator label { display: grid; gap: 3px; min-width: 0; color: var(--text-muted); font-size: 8px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.fp-attr-calculator-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-main); font-size: 9px; font-weight: 700; }
.fp-attr-calculator-title i { color: var(--cyan-primary); }.fp-attr-calculator-title small { overflow: hidden; color: var(--text-muted); font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fp-attr-field-calculator .fp-btn { min-height: 29px; height: 29px; white-space: nowrap; }
.fp-attr-delete-progress { display: flex; align-items: center; gap: 7px; min-height: 29px; padding: 5px 10px; border-bottom: 1px solid var(--gray-border); background: rgba(14,157,204,.14); color: var(--text-main); font-size: 10px; font-weight: 700; }
.fp-attr-delete-progress[hidden] { display: none !important; }
.fp-attr-delete-progress i { color: var(--cyan-primary); }
#fp-attribute-panel.fp-attr-delete-busy .fp-resizable-attribute-table tbody { opacity: .55; pointer-events: none; }
.fiber-point.fp-duct-oriented-box { transform-origin: 50% 50%; }
@media (max-width: 760px) { .fp-attr-field-calculator { grid-template-columns: 1fr 1fr; }.fp-attr-field-calculator .fp-btn { grid-column: 1 / -1; } }

/* Print-layout options stay compact while supporting professional map furniture. */
#panel-print-layout { width: 350px; max-height: calc(100vh - 96px); }
#panel-print-layout .panel-body { overflow-y: auto; }
.fp-print-designer { display: grid; gap: 7px; }
.fp-print-elements { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 8px; border: 1px solid var(--gray-border); background: color-mix(in srgb, var(--gray-panel) 82%, transparent); }
.fp-print-elements legend { padding: 0 5px; color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.fp-print-elements label { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--text-main); font-size: 10px; }
.fp-print-elements input { accent-color: var(--cyan-primary); }
.fp-print-logo-controls input[type="file"] { width: 100%; height: auto !important; min-height: 30px; padding: 4px; }
.fp-print-logo-row { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
#print-logo-preview { display: grid; width: 72px; height: 46px; place-items: center; overflow: hidden; border: 1px solid var(--gray-border); background: var(--gray-header); color: var(--text-muted); }
#print-logo-preview img { width: min(var(--print-logo-preview-width, 72px), 100%); max-height: 42px; object-fit: contain; }
.fp-print-logo-row > label { flex: 1; margin: 0; }
.fp-print-logo-row input[type="range"] { width: 100%; height: 18px; accent-color: var(--cyan-primary); }
#print-logo-size-output { color: var(--text-muted); font-size: 9px; }
#btn-generate-map-export { width: 100%; }

/* Complete layer-export dialog. */
.fp-export-card { width: min(520px, 100%); }
.fp-export-card .fp-editor-dialog-body { display: grid; gap: 7px; }
.fp-export-card .fp-editor-dialog-body > label:not(.fp-export-option) { margin: 3px 0 0; }
.fp-export-format-help { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 7px 9px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-export-format-help strong { color: var(--text-main); font-size: 10px; }.fp-export-format-help span { color: var(--text-muted); font-size: 9px; text-align: right; }
.fp-export-option { display: flex !important; align-items: center; gap: 7px; margin: 0 !important; color: var(--text-main) !important; text-transform: none !important; }
.fp-export-option input { accent-color: var(--cyan-primary); }
.fp-export-summary { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-left: 3px solid var(--cyan-primary); background: var(--gray-hover); color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.fp-export-summary i { margin-top: 2px; color: var(--cyan-primary); }.fp-export-progress { color: var(--cyan-primary); font-size: 10px; }

@media (max-width: 900px) {
    .fp-editor-target-wrap { grid-template-columns: 1fr; min-width: 150px; }
    .fp-editor-target-wrap > span { display: none; }
}

/* Explicit state classes keep menus open for click/touch as well as hover. */
.top-menu-bar .dropdown.is-open > .dropdown-content {
    display: block !important;
}
.top-menu-bar .dropdown.is-open > .dropbtn {
    background: var(--gray-hover);
    border-color: var(--gray-border-bright);
    color: var(--text-main);
}

.toc-group-row { min-width: 0; max-width: 100%; overflow: hidden; }
.toc-layer-group .toc-group-children { min-width: 0; max-width: 100%; overflow: hidden; }
.top-menu-bar .dropdown-submenu.is-open > .dropdown-content-sub {
    display: block !important;
}
.top-menu-bar .dropdown-submenu.is-open > .submenu-trigger {
    background: var(--gray-hover);
    color: var(--cyan-primary);
    font-weight: 600;
}

/* Compact two-column base-map picker, anchored beside the toolbar button. */
.toolbar-flyout-menu {
    width: min(420px, calc(100vw - 24px));
    min-width: 0;
}
.toolbar-flyout-menu.show {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2px;
    padding: 7px !important;
    border-radius: 9px;
}
.toolbar-flyout-menu .flyout-header,
.toolbar-flyout-menu hr {
    grid-column: 1 / -1;
}
.toolbar-flyout-menu .flyout-header {
    padding: 6px 7px 4px;
    border-bottom: 0;
}
.toolbar-flyout-menu hr { margin: 4px 0; }
.toolbar-flyout-menu a {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.toolbar-flyout-menu a i { width: 14px; flex: 0 0 14px; }

body.light-theme .add-layer-popup,
body.light-theme .toolbar-flyout-menu { background: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
body.light-theme .add-layer-option { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }

/* Category renderer: an ArcGIS-style unique-values workspace. */
.style-renderer-control {
    padding: 10px 11px;
    border: 1px solid var(--gray-border);
    border-radius: 9px;
    background: var(--gray-header);
}
.style-renderer-control .style-group { margin: 0; }
.style-renderer-control select { width: 100%; height: 34px; }
.style-renderer-help,
.style-category-help {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
}
.style-category-section {
    margin-top: 11px;
    padding: 11px;
    border: 1px solid var(--gray-border-bright);
    border-radius: 10px;
    background: color-mix(in srgb, var(--gray-header) 82%, var(--cyan-primary) 18%);
}
.style-category-section[hidden] { display: none !important; }
.style-category-toolbar { display: flex; align-items: end; gap: 7px; }
.style-category-toolbar .style-group { flex: 1; margin: 0; }
.style-category-toolbar select { width: 100%; height: 34px; }
.style-refresh-categories {
    width: 34px;
    height: 34px;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    background: var(--gray-panel);
    color: var(--cyan-primary);
    cursor: pointer;
}
.style-refresh-categories:hover { background: var(--gray-hover); border-color: var(--gray-border-bright); }
.style-category-empty {
    margin-top: 9px;
    padding: 9px;
    border: 1px dashed var(--gray-border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 10px;
    text-align: center;
}
.style-category-list { display: grid; gap: 6px; margin-top: 9px; max-height: 246px; overflow: auto; padding-right: 2px; }
.style-category-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(210px, 1.7fr);
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    border: 1px solid var(--gray-border);
    border-radius: 7px;
    background: var(--gray-panel);
}
.style-category-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); font-size: 11px; font-weight: 600; }
.style-category-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1px solid var(--gray-border); border-radius: 50%; vertical-align: 1px; }
.style-category-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.style-category-controls label { display: grid; gap: 3px; min-width: 0; color: var(--text-muted); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.style-category-controls input[type="color"],
.style-category-controls input[type="number"],
.style-category-controls select { width: 100%; height: 27px; min-width: 0; border: 1px solid var(--gray-border); border-radius: 4px; background: var(--gray-header); color: var(--text-main); }
.style-category-controls input[type="color"] { padding: 2px; cursor: pointer; }
.style-category-controls input[type="number"] { padding: 3px 6px; }

/* Clean Table of Contents: groups are shown by hierarchy, not background cards. */
.toc-layer-group {
    margin: 3px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    list-style: none;
}
.toc-group-row { display: flex; align-items: center; gap: 7px; min-height: 29px; padding: 0 4px; cursor: pointer; }
.toc-group-row .group-toggle { width: 20px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; }
.toc-group-row .group-toggle:hover { color: var(--cyan-primary); background: var(--gray-hover); }
.toc-group-row .group-toggle i { font-size: 10px; pointer-events: none; }
.toc-layer-group .layer-group-icon { color: #f59e0b; font-size: 12px; }
.toc-layer-group .layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); font-size: 11px; font-weight: 700; outline: none; }
.toc-layer-group .layer-options { position: relative; margin-left: auto; }
.toc-layer-group .layer-three-dot { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.toc-layer-group .layer-three-dot:hover { color: var(--cyan-primary); background: var(--gray-hover); }
.toc-layer-group .layer-options-menu { position: absolute; top: 100%; right: 0; z-index: 10010; min-width: 150px; padding: 4px 0; border: 1px solid var(--gray-border); border-radius: 6px; background: var(--gray-panel); box-shadow: var(--gloss-shadow); }
.toc-layer-group .layer-option { width: 100%; border: 0; background: transparent; color: var(--text-main); padding: 7px 10px; text-align: left; cursor: pointer; font: inherit; font-size: 11px; }
.toc-layer-group .layer-option i { width: 14px; color: var(--cyan-primary); }
.toc-layer-group .layer-option.danger, .toc-layer-group .layer-option.danger i { color: #dc2626; }
.toc-group-empty { padding: 0 8px 5px 27px; color: var(--text-muted); font-size: 9px; }
.toc-group-empty i { margin-right: 3px; color: var(--cyan-primary); }
.toc-layer-group.is-collapsed .toc-group-empty,
.toc-layer-group.is-collapsed .toc-group-children { display: none !important; }

/* Add Layer Group dialog. */
.fp-layer-group-dialog { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 23, 0.58); backdrop-filter: blur(3px); }
.fp-layer-group-card { width: min(390px, 100%); border: 1px solid var(--gray-border-bright); border-radius: 12px; overflow: hidden; background: var(--gray-panel); color: var(--text-main); box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45); }
.fp-layer-group-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--gray-border); background: var(--gray-header); font-size: 13px; font-weight: 700; }
.fp-layer-group-header i { margin-right: 7px; color: #f59e0b; }
.fp-layer-group-body { padding: 16px; }
.fp-layer-group-body label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.fp-layer-group-body input { width: 100%; height: 37px; box-sizing: border-box; }
.fp-layer-group-body p { margin: 9px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.fp-layer-group-footer { display: flex; justify-content: flex-end; gap: 8px; margin: 16px -16px -16px; padding: 12px 16px; border-top: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-layer-group-footer button { height: 34px; padding: 0 12px; border-radius: 6px; cursor: pointer; font: inherit; }

/* Light mode must override legacy hard-coded text on navigation and dock controls. */
body.light-theme .username-display,
body.light-theme .user-btn,
body.light-theme .top-menu-bar .dropbtn,
body.light-theme .dock-toggle,
body.light-theme .dock-toggle-right,
body.light-theme .btn-collapse,
body.light-theme .layer-three-dot { color: #0f172a !important; }
body.light-theme .dock-toggle:hover,
body.light-theme .dock-toggle-right:hover { color: #ffffff !important; }
body.light-theme #active-layers-legend .legend-item,
body.light-theme #active-layers-legend .legend-item span { color: #0f172a !important; }
body.light-theme .toc-layer-group,
body.light-theme .toc-layer-group .layer-options-menu,
body.light-theme .fp-layer-group-card,
body.light-theme .fp-layer-group-header,
body.light-theme .fp-layer-group-footer { background: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
body.light-theme .toc-layer-group .layer-option,
body.light-theme .toc-layer-group .layer-name,
body.light-theme .fp-layer-group-body input { color: #0f172a !important; background: #ffffff !important; border-color: #cbd5e1 !important; }
body.light-theme .style-renderer-control,
body.light-theme .style-category-section,
body.light-theme .style-category-row,
body.light-theme .style-category-controls select,
body.light-theme .style-category-controls input[type="number"] { background: #f8fafc !important; color: #0f172a !important; border-color: #cbd5e1 !important; }

/* Compact, consistent windows: content scrolls inside the card, never below the map. */
.floating-panel {
    width: min(310px, calc(100vw - 36px)) !important;
    max-width: min(310px, calc(100vw - 36px)) !important;
    max-height: min(390px, calc(100vh - 94px)) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}
.floating-panel .panel-header { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; }
.floating-panel .panel-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 11px; }
.floating-panel .form-group { margin-bottom: 9px; }
.floating-panel .panel-body .btn-primary,
.floating-panel .panel-body .btn-secondary { min-height: 32px; }

#layer-style-popup.layer-style-popup {
    width: min(390px, calc(100vw - 28px)) !important;
    max-height: min(550px, calc(100vh - 86px));
}
#layer-style-popup .style-popup-header { padding: 10px 12px; }
#layer-style-popup .style-popup-body { padding: 11px 12px 9px; }
#layer-style-popup .style-popup-footer { padding: 9px 12px; }
#layer-style-popup .style-layer-summary { padding: 8px 9px; margin-bottom: 9px; }
#layer-style-popup .style-section-heading { margin: 9px 0 6px; }
.style-renderer-control { padding: 8px 9px; }
.style-category-section { margin-top: 8px; padding: 8px; }
.style-category-list { max-height: 164px; }
.style-category-row { padding: 6px; gap: 6px; }

/* Keep every system modal compact with fixed headers and footers. */
.fp-modal {
    position: fixed;
    inset: 0;
    z-index: 2147481000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(2, 6, 23, 0.58);
    backdrop-filter: blur(3px);
}
.fp-modal-content {
    width: min(430px, calc(100vw - 28px));
    max-height: min(590px, calc(100vh - 54px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gray-border-bright);
    border-radius: 10px;
    background: var(--gray-panel);
    color: var(--text-main);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
}
.fp-modal-content form { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.fp-modal-content.fp-modal-large { width: min(700px, calc(100vw - 28px)); }
.fp-modal-header,
.fp-modal-footer { flex: 0 0 auto; display: flex; align-items: center; background: var(--gray-header); }
.fp-modal-header { justify-content: space-between; min-height: 42px; padding: 0 13px; border-bottom: 1px solid var(--gray-border); }
.fp-modal-header h3 { margin: 0; color: var(--text-main); font-size: 13px; }
.fp-modal-header h3 i { color: var(--cyan-primary); margin-right: 6px; }
.fp-modal-close { border: 0; background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.fp-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 13px; }
.fp-modal-footer { justify-content: flex-end; gap: 8px; padding: 9px 13px; border-top: 1px solid var(--gray-border); }
.fp-btn { min-height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--gray-border); cursor: pointer; font: inherit; font-size: 11px; }
.fp-btn-primary { color: #fff; background: var(--cyan-hover); border-color: var(--cyan-hover); }
.fp-btn-secondary { color: var(--text-main); background: transparent; }
.fp-form-group { margin-bottom: 10px; }
.fp-label { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.fp-input { width: 100%; min-height: 33px; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--gray-border); border-radius: 5px; background: var(--gray-header); color: var(--text-main); font: inherit; font-size: 11px; }
.fp-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.fp-extra-section { margin: 8px 0 10px; padding: 9px; border: 1px solid var(--gray-border); border-radius: 7px; background: var(--gray-header); }
.section-subtitle { margin-bottom: 8px; color: var(--cyan-primary); font-size: 10px; font-weight: 700; }

/* Small project-type cards keep the new-project form concise and editable. */
.project-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 6px 0 11px; }
.project-type-card { min-height: 74px; padding: 9px; border: 1px solid var(--gray-border); border-radius: 7px; background: var(--gray-header); color: var(--text-main); text-align: left; cursor: pointer; font: inherit; }
.project-type-card:hover { border-color: var(--cyan-primary); background: var(--gray-hover); }
.project-type-card.active { border-color: var(--cyan-primary); background: color-mix(in srgb, var(--cyan-primary) 18%, var(--gray-header)); box-shadow: inset 0 0 0 1px var(--cyan-primary); }
.project-type-card .card-icon { float: right; color: var(--cyan-primary); font-size: 16px; }
.project-type-card .card-title { margin-bottom: 4px; font-size: 11px; font-weight: 700; }
.project-type-card .card-desc { clear: both; color: var(--text-muted); font-size: 9px; line-height: 1.35; }

/* Nested Table-of-Contents layers are visibly owned by their group. */
.toc-group-children { margin: 0 0 3px 13px; padding: 0 0 0 10px; border-left: 1px solid var(--gray-border); list-style: none; }
.toc-group-children .toc-layer-item { width: auto !important; margin: 0 !important; padding-left: 3px; }
.toc-group-empty[hidden] { display: none; }
.toc-layer-item .layer-three-dot { display: inline-flex; align-items: center; justify-content: center; opacity: .68; }
.toc-layer-item .layer-three-dot:hover { opacity: 1; }
.toc-layer-group .layer-three-dot { display: inline-flex; align-items: center; justify-content: center; }

/* Category symbols are nested beneath their parent layer in the legend. */
#active-layers-legend .legend-layer-item { margin-bottom: 3px !important; font-weight: 700; }
#active-layers-legend .legend-category-list { margin: 0 0 7px 21px; padding-left: 8px; border-left: 1px solid var(--gray-border); }
#active-layers-legend .legend-category-item { display: flex; align-items: center; gap: 7px; margin: 4px 0; color: var(--text-muted); font-size: 10px; font-weight: 400; min-width: 0; }
#active-layers-legend .legend-category-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Account, 2FA, and profile controls. */
.fp-text-link { margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--cyan-primary); font: inherit; font-size: 11px; cursor: pointer; }
.fp-text-link:hover { color: var(--cyan-hover); text-decoration: underline; }
.fp-help-text { margin: 5px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.fp-form-error { margin-top: 8px; padding: 7px 9px; border: 1px solid rgba(239, 68, 68, .45); border-radius: 6px; background: rgba(239, 68, 68, .1); color: #ef4444; font-size: 11px; }
.account-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 5px 0 12px; }
.account-type-card { min-height: 76px; padding: 8px; border: 1px solid var(--gray-border); border-radius: 7px; background: var(--gray-header); color: var(--text-main); text-align: left; cursor: pointer; font: inherit; }
.account-type-card i { display: block; margin-bottom: 6px; color: var(--cyan-primary); font-size: 15px; }
.account-type-card strong, .account-type-card small { display: block; }
.account-type-card strong { font-size: 11px; }
.account-type-card small { margin-top: 3px; color: var(--text-muted); font-size: 9px; line-height: 1.25; }
.account-type-card:hover, .account-type-card.active { border-color: var(--cyan-primary); background: var(--gray-hover); }
.account-type-card.active { box-shadow: inset 0 0 0 1px var(--cyan-primary); }
.profile-photo-row { display: flex; gap: 11px; align-items: center; margin-bottom: 12px; }
.profile-photo-preview { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border: 2px solid var(--cyan-primary); border-radius: 50%; background: var(--gray-header); color: var(--cyan-primary); flex: 0 0 auto; }
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.fp-otp-input { letter-spacing: .36em; text-align: center; font-size: 18px !important; font-weight: 700; }
#profile-student-access { margin: 4px 0 12px; padding: 9px; border: 1px solid var(--gray-border); border-radius: 7px; background: var(--gray-header); }
#profile-student-access strong { font-size: 11px; color: var(--cyan-primary); }
#btn-request-student-extension { margin-top: 8px; }
.team-project-select { min-width: 130px; height: 58px !important; font-size: 10px !important; }
body.light-theme .account-type-card, body.light-theme #profile-student-access { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }

@media (max-width: 520px) {
    .account-type-grid { grid-template-columns: 1fr; }
}

/* Edit workspace: a compact target-layer toolbar complements the Leaflet sketch buttons. */
.fp-editor-toolbar { position: absolute; z-index: 10030; top: 64px; left: 52px; width: min(245px, calc(100vw - 80px)); padding: 9px; border: 1px solid var(--gray-border-bright); border-radius: 8px; background: var(--gray-panel); color: var(--text-main); box-shadow: 0 10px 28px rgba(2, 6, 23, .32); pointer-events: auto; }
.fp-map-toolbox { position: fixed; width: min(318px, calc(100vw - 86px)); max-height: calc(100vh - 112px); overflow-y: auto; border-top: 3px solid var(--cyan-primary); box-shadow: 0 16px 40px rgba(2,6,23,.46); }
.fp-editor-toolbar[hidden] { display: none !important; }
.fp-editor-toolbar-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--cyan-primary); font-size: 12px; font-weight: 700; }
.fp-editor-toolbar-title button { width: 22px; height: 22px; margin-left: auto; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; }
.fp-editor-toolbar-title button:hover { background: #dc2626; color: #fff; }
.fp-editor-toolbar label { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.fp-editor-toolbar select { height: 33px; font-size: 11px; }
.fp-editor-hint { min-height: 27px; margin: 7px 0; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.fp-editor-actions { display: flex; gap: 6px; }
.fp-editor-actions .fp-btn { flex: 1; min-height: 31px; padding: 5px 7px; font-size: 10px; }
.fp-sketch-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 8px 0; }
.fp-sketch-tool-grid button { display: grid; place-items: center; gap: 3px; min-height: 45px; padding: 5px 3px; border: 1px solid var(--gray-border); border-radius: 5px; background: var(--gray-header); color: var(--text-muted); cursor: pointer; font-size: 9px; }
.fp-sketch-tool-grid button i { font-size: 14px; }
.fp-sketch-tool-grid button:hover, .fp-sketch-tool-grid button.active { border-color: var(--cyan-primary); background: rgba(20, 171, 217, .16); color: var(--cyan-primary); }
.fp-editor-actions .fp-btn-danger { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.fp-editor-actions .fp-btn-danger:disabled { border-color: var(--gray-border); background: var(--gray-header); color: var(--text-muted); cursor: not-allowed; opacity: .65; }
.fp-sketch-selected-marker { filter: drop-shadow(0 0 4px #f6b703) drop-shadow(0 0 2px #f6b703); outline: 3px solid #f6b703; outline-offset: 2px; border-radius: 50%; }
.fp-editor-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0; }
.fp-editor-tool-grid button { display: grid; place-items: center; gap: 3px; min-height: 48px; padding: 5px 2px; border: 1px solid var(--gray-border); border-radius: 5px; background: var(--gray-header); color: var(--text-muted); cursor: pointer; font-size: 8px; }
.fp-editor-tool-grid button i { font-size: 14px; }
.fp-editor-tool-grid button:hover, .fp-editor-tool-grid button.active { border-color: var(--cyan-primary); background: rgba(20,171,217,.16); color: var(--cyan-primary); }
.fp-trace-controls { display: grid; gap: 6px; margin: 8px 0; padding: 8px; border: 1px solid var(--gray-border); border-radius: 6px; background: rgba(2,6,23,.22); }
.fp-trace-controls > label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; }
.fp-trace-controls select { min-width: 165px; height: 29px; }
.fp-trace-controls input[type="number"] { width: 55px; height: 27px; padding: 2px 5px; }
.fp-trace-toggle-row { display: flex; flex-wrap: wrap; gap: 5px 9px; }
.fp-trace-toggle-row label { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--text-muted); font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.fp-trace-toggle-row input { accent-color: var(--cyan-primary); }

/* Desktop-style editing ribbon: map-wide, directly below the application banner. */
.fp-horizontal-editor { position: fixed; display: flex; align-items: center; gap: 4px; width: auto; max-height: none; padding: 4px 6px; overflow: visible; border: 0; border-bottom: 2px solid var(--cyan-primary); border-radius: 0 0 7px 7px; background: var(--gray-panel); box-shadow: 0 7px 18px rgba(2,6,23,.38); }
.fp-horizontal-editor-brand { display: flex; align-items: center; gap: 6px; min-width: 102px; padding: 0 7px; color: var(--cyan-primary); font-size: 11px; font-weight: 800; white-space: nowrap; }
.fp-horizontal-editor-brand i { font-size: 15px; }
.fp-editor-command-bar,.fp-horizontal-operation-actions { display: flex; align-items: stretch; gap: 2px; }
.fp-editor-command-bar { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.fp-editor-command { display: grid; grid-template-rows: 19px auto; place-items: center; min-width: 46px; height: 43px; padding: 3px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 8px; line-height: 1; white-space: nowrap; }
.fp-editor-command i { font-size: 13px; }
.fp-editor-command:hover,.fp-editor-command.active,.fp-editor-command[aria-expanded="true"] { border-color: var(--cyan-primary); background: rgba(20,171,217,.16); color: var(--cyan-primary); }
.fp-menu-command { grid-template-columns: 18px auto 10px; grid-template-rows: 1fr; min-width: 84px; gap: 3px; font-size: 9px; }
.fp-menu-command i { font-size: 11px; }
.fp-icon-command { min-width: 35px; width: 35px; grid-template-rows: 1fr; }
.fp-editor-separator { width: 1px; min-width: 1px; margin: 4px 2px; background: var(--gray-border); }
.fp-danger-command:hover,.fp-danger-command.active { border-color: #ef4444; background: rgba(239,68,68,.15); color: #f87171; }
.fp-save-command { border-color: rgba(16,185,129,.55); color: #34d399; }
.fp-editor-menu-wrap,.fp-editor-options-wrap { position: relative; flex: 0 0 auto; }
.fp-editor-dropdown { position: absolute; z-index: 10060; top: calc(100% + 7px); left: 0; width: 250px; padding: 8px; border: 1px solid var(--gray-border-bright); border-radius: 6px; background: var(--gray-panel); box-shadow: 0 14px 32px rgba(2,6,23,.52); }
.fp-editor-dropdown[hidden] { display: none !important; }
.fp-editor-dropdown > label { margin: 0 0 5px; }
.fp-editor-dropdown > select { width: 100%; margin-bottom: 7px; }
.fp-editor-dropdown > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 31px; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text-main); cursor: pointer; font-size: 10px; text-align: left; }
.fp-editor-dropdown > button:hover { background: var(--gray-hover); color: var(--cyan-primary); }
.fp-editor-dropdown > button i { width: 14px; color: var(--cyan-primary); text-align: center; }
.fp-editor-options-panel { right: 0; left: auto; width: 278px; }
.fp-editor-options-panel > label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin: 7px 0; text-transform: none; letter-spacing: 0; }
.fp-editor-options-panel select { min-width: 165px; height: 29px; }
.fp-editor-options-panel input[type="number"] { width: 61px; height: 27px; padding: 2px 5px; }
.fp-horizontal-operation-actions[hidden] { display: none !important; }
.fp-horizontal-editor-hint { flex: 1 1 150px; min-width: 110px; max-width: 220px; margin: 0 3px; overflow: hidden; color: var(--text-muted); font-size: 9px; line-height: 1.25; text-overflow: ellipsis; }
.fp-editor-close { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; }
.fp-editor-close:hover { background: #dc2626; color: #fff; }
body.fp-editor-active .leaflet-top { top: 55px; }
body.light-theme .fp-horizontal-editor,body.light-theme .fp-editor-dropdown { background: #fff; color: #0f172a; border-color: #cbd5e1; }
@media (max-width: 1050px) { .fp-horizontal-editor-brand,.fp-horizontal-editor-hint { display: none; } }
@media (max-width: 700px) { .fp-horizontal-editor { gap: 2px; padding-inline: 3px; }.fp-editor-command { min-width: 42px; }.fp-menu-command { min-width: 72px; }.fp-editor-options-panel { right: -32px; } }

/* Compact floating desktop ribbon. Pencil holds the construction menu; modify tools stay visible. */
.fp-horizontal-editor { display: block; width: min(475px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 0; overflow: visible; border: 1px solid #566273; border-bottom: 1px solid #384454; border-radius: 2px; background: var(--gray-panel); box-shadow: 0 5px 16px rgba(2,6,23,.38); }
.fp-editor-dragbar { display: flex; align-items: center; justify-content: space-between; height: 19px; padding: 0 4px 0 6px; border-bottom: 1px solid #334155; background: linear-gradient(180deg,#475569,#273449); color: #f8fafc; cursor: move; font-size: 9px; font-weight: 700; line-height: 1; user-select: none; }
.fp-editor-dragbar > span { display: inline-flex; align-items: center; gap: 5px; }
.fp-editor-dragbar > div { display: inline-flex; align-items: center; gap: 5px; color: #cbd5e1; }
.fp-editor-dragbar .fp-editor-close { width: 17px; height: 17px; border-radius: 1px; font-size: 9px; }
.fp-editor-ribbon-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; min-height: 34px; padding: 2px 3px; overflow: visible; }
.fp-horizontal-editor-brand { display: none; }
.fp-horizontal-editor .fp-editor-command-bar { display: flex; align-items: stretch; flex: 0 1 auto; gap: 1px; min-width: 0; overflow: visible; }
.fp-horizontal-editor .fp-editor-command { display: grid; grid-template-rows: 1fr; min-width: 30px; width: 30px; height: 29px; padding: 2px; border-radius: 2px; }
.fp-horizontal-editor .fp-editor-command i { font-size: 11px; }
.fp-horizontal-editor .fp-editor-command > span { display: none; }
.fp-horizontal-editor .fp-editor-menu-tool { display:grid; grid-template-columns:12px auto; grid-template-rows:1fr; gap:3px; width:auto; min-width:55px; padding:2px 4px; }.fp-horizontal-editor .fp-editor-menu-tool > span { display:inline; font-size:8px; }
.fp-horizontal-editor .fp-menu-command { display: grid; grid-template-columns: 14px auto 8px; width: auto; min-width: 76px; padding: 2px 5px; font-size: 9px; }
.fp-horizontal-editor .fp-menu-command > span { display: inline; }
.fp-horizontal-editor .fp-editor-separator { margin: 3px 1px; }
.fp-horizontal-editor .fp-horizontal-editor-hint { display: none; }
.fp-horizontal-editor .fp-horizontal-operation-actions { gap: 1px; margin-left: auto; }
.fp-horizontal-editor .fp-editor-dropdown { top: calc(100% + 4px); }
.fp-horizontal-editor .fp-editor-target-wrap { display:block; min-width:142px; margin:0 2px; }
.fp-horizontal-editor .fp-editor-target-wrap .fp-input { display:block; width:142px; min-width:142px; height:29px; }
.fp-editor-tools-wrap { position:relative; flex:0 0 auto; }
.fp-horizontal-editor .fp-editor-tools-panel { left:0; width:242px; }
.fp-horizontal-editor .fp-editor-tools-panel > button { min-height:29px; padding:5px 7px; }
.fp-horizontal-editor .fp-editor-edit-panel { width: 218px; }
.fp-editor-menu-divider { display: block; height: 1px; margin: 5px 2px; background: var(--gray-border); }
.fp-editor-dropdown > button.fp-danger-menu-option { color: #f87171; }
.fp-editor-dropdown > button.fp-danger-menu-option i { color: #f87171; }
.fp-editor-dropdown > button.fp-danger-menu-option:hover { background: rgba(239,68,68,.14); color: #f87171; }
.fp-editor-dropdown > button:disabled { cursor: not-allowed; opacity: .45; }
.fp-editor-dropdown > button:disabled:hover { background: transparent; color: var(--text-main); }
.fp-snap-indicator-host { background:transparent !important; border:0 !important; }
.fp-snap-indicator { position:absolute; display:block; width:14px; height:14px; border:1.5px solid #f8fafc; border-radius:1px; box-shadow:0 0 0 1.5px #0891b2,0 0 6px rgba(8,145,178,.9); pointer-events:none; }
.fp-snap-indicator::before,.fp-snap-indicator::after { position:absolute; content:''; background:#06b6d4; box-shadow:0 0 2px #fff; }
.fp-snap-indicator::before { width:2px; height:22px; top:-5px; left:5px; }
.fp-snap-indicator::after { width:22px; height:2px; top:5px; left:-5px; }
.fp-snap-edge .fp-snap-indicator { border-radius:50%; border-style:dashed; }
body.fp-editor-active .leaflet-top { top: 0; }
body.light-theme .fp-editor-dragbar { border-color: #64748b; background: linear-gradient(180deg,#64748b,#475569); color:#fff; }
@media (max-width: 700px) { .fp-horizontal-editor { width: calc(100vw - 24px); max-width: none; }.fp-editor-ribbon-row { overflow: visible; }.fp-editor-options-panel { right: -8px; } }
@media (max-width: 460px) { .fp-civil-model-buttons,.fp-fttx-model-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Do not let Leaflet's pointer cursor cover the precise manual-tracing cross. */
.leaflet-container.fp-precision-draw-cursor,.leaflet-container.fp-precision-draw-cursor .leaflet-interactive,.leaflet-container.fp-precision-draw-cursor .leaflet-marker-icon { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M13 1v24M1 13h24' stroke='%230891b2' stroke-width='1.7'/%3E%3Cpath d='M13 5v16M5 13h16' stroke='white' stroke-width='.8'/%3E%3Ccircle cx='13' cy='13' r='2.4' fill='white' stroke='%230891b2' stroke-width='1.5'/%3E%3C/svg%3E") 13 13,crosshair !important; }
.leaflet-container.fp-editor-arrow-cursor,.leaflet-container.fp-editor-arrow-cursor .leaflet-interactive,.leaflet-container.fp-editor-arrow-cursor .leaflet-marker-icon { cursor:default !important; }

.fp-quick-sketch-ribbon { position: fixed; display: block; width: max-content; max-width: calc(100vw - 86px); max-height: none; padding: 0; overflow: visible; border: 1px solid #566273; border-radius: 2px; background: var(--gray-panel); box-shadow: 0 5px 16px rgba(2,6,23,.38); }
.fp-quick-ribbon-row { display: flex; align-items: center; gap: 2px; min-height: 34px; padding: 2px 3px; }
.fp-quick-sketch-ribbon .fp-sketch-tool-grid { display: flex; gap: 1px; margin: 0; }
.fp-quick-sketch-ribbon .fp-sketch-tool-grid button,.fp-quick-sketch-ribbon .fp-editor-command { display: grid; grid-template-rows: 1fr; width: 30px; min-width: 30px; min-height: 29px; height: 29px; padding: 2px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--text-muted); cursor:pointer; }
.fp-quick-sketch-ribbon .fp-sketch-tool-grid button span,.fp-quick-sketch-ribbon .fp-editor-command span { display:none; }
.fp-quick-sketch-ribbon .fp-sketch-tool-grid button i,.fp-quick-sketch-ribbon .fp-editor-command i { font-size:11px; }
.fp-quick-sketch-ribbon .fp-sketch-tool-grid button:hover,.fp-quick-sketch-ribbon .fp-sketch-tool-grid button.active,.fp-quick-sketch-ribbon .fp-editor-command:hover,.fp-quick-sketch-ribbon .fp-editor-command[aria-expanded="true"] { border-color:var(--cyan-primary); background:rgba(20,171,217,.15); color:var(--cyan-primary); }
.fp-quick-sketch-ribbon .fp-editor-command:disabled { opacity:.45; cursor:not-allowed; }
.fp-quick-sketch-ribbon .fp-editor-options-panel { top: calc(100% + 4px); right:0; left:auto; }
body.light-theme .fp-quick-sketch-ribbon { background:#fff; border-color:#64748b; }

/* ArcGIS-like map labels: permanent text with a clean halo and collision suppression. */
.leaflet-tooltip.fp-map-label { padding: 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #0f3e65; font: 700 10px/1.15 Arial, sans-serif; letter-spacing: .01em; text-align: center; text-shadow: none; pointer-events: none; transition: opacity .12s ease; }
.leaflet-tooltip.fp-map-label::before { display: none; }
.leaflet-tooltip.fp-map-label-line { font-size: 9px; }
.leaflet-tooltip.fp-map-label.fp-label-hidden { opacity: 0 !important; }
.leaflet-tooltip.fp-map-label .fp-map-label-parallel { display:block; width:max-content; max-width:none; white-space:nowrap; transform:rotate(var(--fp-label-angle, 0deg)); transform-origin:center center; }
.leaflet-tooltip.fp-map-label .fp-map-label-horizontal { transform:none !important; writing-mode:horizontal-tb; }

.fp-label-manager-card { width: min(560px, calc(100vw - 30px)); }
.fp-label-manager-status { display:flex; align-items:flex-start; gap:9px; margin-bottom:12px; padding:9px; border:1px solid var(--gray-border); border-radius:3px; background:var(--gray-header); }
.fp-label-manager-status > i { margin-top:2px; color:var(--cyan-primary); font-size:15px; }
.fp-label-manager-status strong,.fp-label-manager-status span { display:block; }
.fp-label-manager-status strong { color:var(--text-main); font-size:10px; }
.fp-label-manager-status span { margin-top:3px; color:var(--text-muted); font-size:9px; line-height:1.35; }
.fp-editor-dialog-body .fp-label-enable { display:flex; align-items:center; gap:7px; margin:0 0 12px; color:var(--text-main); font-size:10px; text-transform:none; letter-spacing:0; }
.fp-label-enable input,.fp-label-field-grid input { accent-color:var(--cyan-primary); }
.fp-label-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; max-height:168px; overflow-y:auto; padding:6px; border:1px solid var(--gray-border); border-radius:3px; background:rgba(2,6,23,.14); }
.fp-label-field-grid label { display:flex; align-items:center; gap:6px; min-width:0; margin:0; padding:5px 6px; border-radius:2px; color:var(--text-main); font-size:9px; font-weight:500; text-transform:none; letter-spacing:0; }
.fp-label-field-grid label:hover { background:var(--gray-hover); }
.fp-label-field-grid label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-label-manager-help { margin:5px 0 10px !important; }
.fp-label-manager-grid { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:7px; }
.fp-label-manager-grid label { margin:0; }
.fp-label-manager-grid .fp-input { width:100%; margin-top:4px; }
.fp-label-preview { display:flex; align-items:center; gap:8px; min-height:34px; margin-top:11px; padding:7px 9px; border:1px dashed var(--gray-border-bright); border-radius:3px; }
.fp-label-preview span { color:var(--text-muted); font-size:9px; font-weight:700; text-transform:uppercase; }
.fp-label-preview strong { overflow:hidden; color:var(--text-main); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.toc-layer-item .layer-options-menu .layer-label-toggle.active { background:rgba(20,171,217,.14) !important; color:var(--cyan-primary) !important; }
.fp-schematic-customer-heading { margin:16px 0 7px; color:var(--text-main); font-size:12px; }
@media (max-width:560px) { .fp-label-manager-grid { grid-template-columns:1fr; }.fp-label-field-grid { grid-template-columns:1fr; } }

.fp-projection-manager-card { width:min(560px,calc(100vw - 30px)); }
.fp-projection-manager-card .fp-editor-dialog-body > label,.fp-projection-manager-card section > label { margin-top:9px; }
.fp-projection-manager-card .fp-input { width:100%; margin-top:4px; }
.fp-projection-manager-card section p { margin:6px 0 0; color:var(--text-muted); font-size:9px; line-height:1.4; }
.fp-projection-manager-card section[hidden] { display:none !important; }
.fp-projection-note { display:flex; align-items:center; gap:7px; min-height:34px; margin-top:10px; padding:7px 9px; border:1px solid var(--gray-border); border-radius:3px; background:var(--gray-header); color:var(--text-muted); font-size:9px; }
.fp-projection-note i { color:var(--cyan-primary); }
.fp-projection-note strong { color:var(--text-main); }
.fp-projection-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fp-editor-dialog-body .fp-projection-check { display:flex; align-items:center; gap:7px; margin-top:10px; color:var(--text-main); font-size:10px; text-transform:none; letter-spacing:0; }
.fp-projection-check input { accent-color:var(--cyan-primary); }
@media (max-width:520px) { .fp-projection-grid { grid-template-columns:1fr; } }

.toc-layer-item .layer-name { min-width: 34px; }

/* Attribute inspector: selected-feature editing without the old label switches. */
#fp-attribute-actions { display: inline-flex; align-items: center; gap: 4px; }
.fp-inspector-action { min-width: auto; min-height: 27px; height: 27px; padding: 0 7px; border-radius: 2px; font-size: 9px; }
.fp-inspector-action.active { border-color: #22c55e; background: #15803d; color: #fff; }
.attribute-table thead tr { background: var(--gray-header); border-bottom: 2px solid var(--gray-border); }
.attribute-table thead th { padding: 5px 7px; color: var(--text-muted); font-weight: 700; }
.attribute-table .fp-inspector-row { background: var(--gray-header); border-bottom: 1px solid var(--gray-border); }
.attribute-table .fp-inspector-row-alt { background: var(--gray-panel); }
.attribute-table .fp-inspector-row th,.attribute-table .fp-inspector-row td { padding: 5px 7px; color: var(--text-main); }
.attribute-table .fp-edit-input { width: 100%; min-width: 0; height: 27px; }

/* Attribute table starts at ten characters per field; drag a header edge wider when needed. */
.fp-resizable-attribute-table { width: max-content; min-width: 0; border-collapse: collapse; table-layout: fixed; text-align: left; }
.fp-resizable-attribute-table th { position: sticky; top: 0; z-index: 2; height: 29px; padding: 6px 10px 6px 7px; overflow: hidden; border-right: 1px solid var(--gray-border); border-bottom: 2px solid var(--gray-border); background: var(--gray-header); color: var(--text-muted); white-space: nowrap; }
.fp-resizable-attribute-table th > span,.fp-resizable-attribute-table td { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-resizable-attribute-table td { display: table-cell; height: 27px; padding: 5px 7px; border-right: 1px solid var(--gray-border); border-bottom: 1px solid var(--gray-border); color: var(--text-main); }
.fp-column-resizer { position: absolute; z-index: 4; top: 0; right: -2px; width: 6px; height: 100%; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none; }
.fp-column-resizer:hover,.fp-column-resizer:active { background: var(--cyan-primary); }

/* One compact desktop control language for panel buttons and form fields. */
.fp-btn,.floating-panel .btn-primary,.floating-panel .btn-secondary,.style-popup-footer button,.fp-editor-dialog-footer button,.fp-modal-footer button,.fp-layer-style-selector-footer button { min-width: 82px; min-height: 30px; height: 30px; padding: 0 10px; border: 1px solid var(--gray-border); border-radius: 2px; box-shadow: none; cursor: pointer; font: 600 10px/1 Arial,sans-serif; }
.fp-btn-primary,.floating-panel .btn-primary,.style-popup-footer #apply-layer-style,.fp-editor-dialog-footer .fp-btn-primary,.fp-modal-footer .fp-btn-primary { border-color: #0788b3; background: #0e9dcc; color: #fff; }
.fp-btn-primary:hover,.floating-panel .btn-primary:hover,.style-popup-footer #apply-layer-style:hover,.fp-editor-dialog-footer .fp-btn-primary:hover,.fp-modal-footer .fp-btn-primary:hover { border-color: #06b6d4; background: #087da5; color: #fff; }
.fp-btn-secondary,.floating-panel .btn-secondary,.style-popup-footer #cancel-layer-style,.fp-editor-dialog-footer .fp-btn-secondary,.fp-modal-footer .fp-btn-secondary { border-color: var(--gray-border); background: var(--gray-header); color: var(--text-main); }
.fp-input,.panel-input,.panel-select,.fp-attribute-layer-select,.floating-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),.floating-panel select,#layer-style-popup input:not([type="range"]):not([type="color"]),#layer-style-popup select { min-height: 29px; height: 29px; padding: 3px 7px; border: 1px solid var(--gray-border); border-radius: 2px; outline: none; background: var(--gray-panel); color: var(--text-main); font: 10px/1.2 Arial,sans-serif; }
.fp-input:focus,.panel-input:focus,.panel-select:focus,.fp-attribute-layer-select:focus,.floating-panel input:focus,.floating-panel select:focus,#layer-style-popup input:focus,#layer-style-popup select:focus { border-color: var(--cyan-primary); box-shadow: 0 0 0 1px rgba(20,171,217,.2); }
.fp-drag-handle { user-select: none; }
.fp-btn.fp-inspector-action { min-width: auto; height: 27px; min-height: 27px; padding: 0 7px; font-size: 9px; }
.fp-custom-modal-card { width: min(400px, 90vw); }
.fp-custom-modal-message { color: var(--text-main); font-size: 11px; line-height: 1.5; white-space: pre-line; }

.fp-layer-title-row { display: flex; align-items: center; justify-content: space-between; }
#btn-available-layers { padding: 3px 6px; border: 1px solid var(--gray-border); border-radius: 4px; background: var(--gray-header); color: var(--cyan-primary); cursor: pointer; font-size: 8px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.fp-layer-library-dialog { position: fixed; inset: 0; z-index: 2147483200; display: grid; place-items: center; padding: 18px; background: rgba(2,6,23,.65); backdrop-filter: blur(3px); }
.fp-layer-library-card { width: min(680px, 100%); max-height: min(720px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gray-border-bright); border-radius: 10px; background: var(--gray-panel); color: var(--text-main); box-shadow: 0 24px 70px rgba(2,6,23,.58); }
.fp-layer-library-card > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-layer-library-card > header > div { display: flex; min-width: 0; align-items: center; gap: 6px; }
.fp-layer-library-card > header i { flex: 0 0 auto; color: var(--cyan-primary); font-size: 12px; }
.fp-layer-library-card > header span { font-size: 13px; font-weight: 800; }
.fp-layer-library-card > header small { flex: 0 0 auto; min-width: 18px; padding: 1px 4px; border: 1px solid currentColor; color: inherit; font-size: 8px; line-height: 1; text-align: center; }
.fp-layer-library-card > header button { width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 20px; }
.fp-layer-library-list { overflow-y: auto; padding: 9px; }
.fp-layer-library-list article { display: grid; grid-template-columns: 18px minmax(0,1fr) auto 96px; align-items: center; gap: 10px; padding: 9px; border-bottom: 1px solid var(--gray-border); }
.fp-layer-library-list article strong,.fp-layer-library-list article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-layer-library-list article strong { font-size: 11px; }.fp-layer-library-list article small { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.fp-layer-library-list article > button { padding: 6px 7px; border: 1px solid var(--cyan-primary); border-radius: 4px; background: rgba(20,171,217,.12); color: var(--cyan-primary); cursor: pointer; font-size: 9px; }
.fp-layer-library-status { padding: 3px 6px; border-radius: 999px; background: var(--gray-header); color: var(--text-muted); font-size: 8px; }.fp-layer-library-status.is-added { background: rgba(16,185,129,.16); color: #34d399; }
.fp-layer-library-card > footer { padding: 9px 14px; border-top: 1px solid var(--gray-border); color: var(--text-muted); font-size: 9px; }
.fp-field-builder-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 13px 0 6px; }
.fp-field-builder-heading strong,.fp-field-builder-heading small { display: block; }.fp-field-builder-heading small { color: var(--text-muted); font-size: 9px; }
.fp-field-builder-heading button { padding: 5px 8px; border: 1px solid var(--cyan-primary); border-radius: 4px; background: rgba(20,171,217,.12); color: var(--cyan-primary); cursor: pointer; font-size: 9px; }
.fp-layer-create-card { width: min(760px, 100%); }.fp-field-builder { display: grid; gap: 5px; max-height: 210px; overflow-y: auto; }
.fp-field-builder-row { display: grid; grid-template-columns: 1fr 1fr 95px 1fr 28px; gap: 5px; align-items: center; }
.fp-field-builder-row .fp-input { min-width: 0; height: 30px; font-size: 10px; }.fp-field-builder-row button { width: 28px; height: 28px; border: 1px solid #7f1d1d; border-radius: 4px; background: rgba(220,38,38,.15); color: #f87171; cursor: pointer; }
@media (max-width: 700px) { .fp-field-builder-row { grid-template-columns: 1fr 1fr 28px; }.fp-field-builder-row [data-field="type"],.fp-field-builder-row [data-field="default"] { grid-row: 2; }.fp-layer-library-list article { grid-template-columns: 18px minmax(0,1fr) 88px; }.fp-layer-library-status { display:none; } }
.leaflet-draw-toolbar a { background-color: var(--gray-panel) !important; border-color: var(--gray-border) !important; }
.fp-editor-dialog { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 23, .56); backdrop-filter: blur(2px); }
.fp-editor-dialog[hidden],.fp-fttx-map-capture-hidden { display: none !important; }
.fp-editor-dialog-card { width: min(360px, 100%); overflow: hidden; border: 1px solid var(--gray-border-bright); border-radius: 10px; background: var(--gray-panel); color: var(--text-main); box-shadow: 0 24px 60px rgba(2, 6, 23, .45); }
.fp-editor-dialog-header { display: flex; align-items: center; gap: 7px; padding: 11px 13px; border-bottom: 1px solid var(--gray-border); background: var(--gray-header); font-size: 12px; }
.fp-editor-dialog-header strong i { color: var(--cyan-primary); margin-right: 5px; }
.fp-editor-dialog-header button { width: 24px; height: 24px; margin-left: auto; border: 0; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 18px; }
.fp-editor-dialog-header button:hover { color: #fff; background: #dc2626; }
.fp-editor-dialog-body { padding: 13px; }
.fp-editor-dialog-body label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.fp-editor-dialog-body p { margin: 8px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.fp-editor-dialog-footer { display: flex; justify-content: flex-end; gap: 7px; padding: 10px 13px; border-top: 1px solid var(--gray-border); background: var(--gray-header); }
body.light-theme .fp-editor-toolbar, body.light-theme .fp-editor-dialog-card, body.light-theme .fp-editor-dialog-header, body.light-theme .fp-editor-dialog-footer { background: #ffffff; color: #0f172a; border-color: #cbd5e1; }

/* The compact theme control lives at the bottom of the map toolbar, leaving Login alone. */
.arc-toolbar .toolbar-theme-toggle {
    width: var(--btn-size);
    height: var(--btn-size);
    min-width: var(--btn-size);
    min-height: var(--btn-size);
    margin-top: auto;
    margin-bottom: 7px;
    padding: 0;
    justify-content: center;
    border-radius: 4px;
}
.toolbar-theme-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.arc-toolbar .toolbar-theme-toggle i { font-size: 13px; color: var(--text-main); }

/* Small map controls sit beside the scale without increasing the status bar height. */
.status-center { display: flex; align-items: center; gap: 8px; }
.status-map-tools { display: inline-flex; align-items: center; gap: 3px; }
.status-tool-btn { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; border: 1px solid var(--gray-border); border-radius: 4px; background: transparent; color: var(--text-main); cursor: pointer; }
.status-tool-btn:hover, .status-tool-btn.active { border-color: var(--cyan-primary); background: var(--gray-hover); color: var(--cyan-primary); }
.status-tool-btn i { font-size: 10px; }

/* Keep the dark TOC as simple rows rather than alternating cards. */
body:not(.light-theme) #uploaded-layers-list .toc-layer-item { background: transparent !important; box-shadow: none !important; }
body:not(.light-theme) #uploaded-layers-list .toc-layer-item:hover { background: var(--gray-hover) !important; }

/* ROW preparation and minor existing-civil extensions. */
.fp-row-builder-card,.fp-civil-extension-card { width:min(760px,calc(100vw - 28px)); }
.fp-row-builder-card > .fp-editor-dialog-header,.fp-civil-extension-card > .fp-editor-dialog-header { cursor:move;user-select:none; }
.fp-workflow-graphic { display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:6px;margin-bottom:12px; }
.fp-workflow-graphic > i { color:var(--cyan-primary);text-align:center;font-size:10px; }
.fp-workflow-graphic article { display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 8px;min-width:0;padding:9px;border:1px solid var(--gray-border);background:var(--gray-header); }
.fp-workflow-graphic article > i { grid-row:1 / 3;display:grid;width:26px;height:26px;place-items:center;border:1px solid color-mix(in srgb,var(--cyan-primary) 55%,var(--gray-border));color:var(--cyan-primary); }
.fp-workflow-graphic article b,.fp-workflow-graphic article span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fp-workflow-graphic article b { color:var(--text-main);font-size:9px; }.fp-workflow-graphic article span { color:var(--text-muted);font-size:7px; }
.fp-row-builder-mode { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:11px 0; }
.fp-row-builder-mode label { display:grid;grid-template-columns:15px 29px minmax(0,1fr);gap:7px;align-items:start;padding:9px;border:1px solid var(--gray-border);background:var(--gray-header);color:var(--text-main);cursor:pointer;text-transform:none;letter-spacing:0; }
.fp-row-builder-mode label:has(input:checked) { border-color:var(--cyan-primary);box-shadow:inset 3px 0 0 var(--cyan-primary);background:rgba(20,171,217,.11); }
.fp-row-builder-mode input { margin-top:7px;accent-color:var(--cyan-primary); }.fp-row-builder-mode label > i { display:grid;width:27px;height:27px;place-items:center;color:var(--cyan-primary); }
.fp-row-builder-mode b,.fp-row-builder-mode small { display:block; }.fp-row-builder-mode b { font-size:9px; }.fp-row-builder-mode small { margin-top:3px;color:var(--text-muted);font-size:7px;line-height:1.35; }
.fp-row-road-settings { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:9px;padding:9px;border:1px solid var(--gray-border);background:var(--gray-header); }
.fp-row-road-settings[hidden] { display:none !important; }
.fp-row-road-settings.inactive { opacity:.72;border-style:dashed; }
.fp-row-settings-title { grid-column:1/-1;display:flex;align-items:center;gap:7px;padding:0 0 7px;border-bottom:1px solid var(--gray-border);color:var(--text-main); }
.fp-row-settings-title>i { display:grid;width:27px;height:27px;place-items:center;background:var(--cyan-primary);color:#fff; }
.fp-row-settings-title b,.fp-row-settings-title small { display:block; }.fp-row-settings-title b { font-size:9px; }.fp-row-settings-title small { margin-top:2px;color:var(--text-muted);font-size:7px;line-height:1.3; }
@media(max-width:640px){.fp-workflow-graphic{grid-template-columns:1fr}.fp-workflow-graphic>i{transform:rotate(90deg)}.fp-row-builder-mode,.fp-row-road-settings{grid-template-columns:1fr}}

/* The dedicated site panel is information-dense while remaining within the compact modal system. */
.site-admin-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.site-admin-summary span { padding: 6px 8px; border: 1px solid var(--gray-border); border-radius: 5px; background: var(--gray-header); color: var(--text-main); font-size: 10px; }
.site-admin-summary i { color: var(--cyan-primary); margin-right: 3px; }
.site-admin-months { display: inline-block; width: 86px !important; min-height: 30px !important; vertical-align: middle; }
#modal-site-admin .fp-table td, #modal-site-admin .fp-table th { font-size: 10px; }

@media (max-width: 520px) {
    .toolbar-flyout-menu.show { grid-template-columns: 1fr; }
    .style-category-row { grid-template-columns: 1fr; }
    .fp-form-row, .project-type-grid { grid-template-columns: 1fr; }
}

/* Final compact title-bar pass: simple tools match the Editor ribbon. */
:root {
    --compact-tool-header: linear-gradient(180deg, #3f7188 0%, #2b5164 100%);
    --compact-tool-header-border: #79aabd;
    --compact-tool-header-text: #f7fbfd;
}
body.light-theme {
    --compact-tool-header: linear-gradient(180deg, #d6dade 0%, #bec5ca 100%);
    --compact-tool-header-border: #9da7ae;
    --compact-tool-header-text: #263139;
}
.layers-panel > .panel-header,
.right-dock > .panel-header,
.floating-panel > .panel-header,
#panel-measurement > .panel-header,
#panel-shortest-path > .panel-header,
.fp-editor-dragbar,
.fp-layer-library-card > header,
.fp-layer-group-header,
.fp-layer-style-selector-header,
#layer-style-popup .style-popup-header,
.map-indicator-header,
#fp-attribute-panel .fp-attribute-table-header {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 4px 0 6px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--compact-tool-header-border) !important;
    background: var(--compact-tool-header) !important;
    color: var(--compact-tool-header-text) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.fp-editor-dialog-header,
.fp-modal-header {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 4px 0 6px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--compact-tool-header-border) !important;
    background: var(--compact-tool-header) !important;
    color: var(--compact-tool-header-text) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* File > Preferences uses the same compact desktop panel language. */
.fp-preferences-modal { width: min(520px, calc(100vw - 28px)); }
.fp-preference-section { margin: 0 0 12px; padding: 10px; border: 1px solid var(--gray-border); background: var(--gray-panel); }
.fp-preference-section:last-child { margin-bottom: 0; }
.fp-preference-section h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: var(--text-main); font-size: 11px; }
.fp-preference-section h4 i { color: var(--cyan-primary); }
.fp-preference-check { display: flex; align-items: center; gap: 7px; color: var(--text-main); font-size: 10px; cursor: pointer; }
.fp-preference-check input { margin: 0; accent-color: var(--cyan-primary); }
.fp-preference-colors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 10px; }
.fp-preference-colors label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 10px; }
.fp-preference-colors input[type="color"] { width: 44px; height: 25px; padding: 1px; border: 1px solid var(--gray-border); border-radius: 2px; background: var(--gray-header); cursor: pointer; }
#preference-extent-summary { margin: 6px 0 0; }
@media (max-width: 560px) { .fp-preference-colors { grid-template-columns: 1fr; } }
#fp-attribute-panel .fp-attribute-table-header {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 4px 0 6px !important;
    gap: 6px;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--compact-tool-header-border) !important;
    background: var(--compact-tool-header) !important;
    color: var(--compact-tool-header-text) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.layers-panel > .panel-header span,
.right-dock > .panel-header span,
.floating-panel > .panel-header span,
.fp-editor-dragbar > span,
.fp-editor-dialog-header strong,
.fp-modal-header h3,
.map-indicator-header span { color: var(--compact-tool-header-text) !important; font-size: 9px !important; }
.layers-panel > .panel-header > span,
.right-dock > .panel-header > span,
.floating-panel > .panel-header > span,
.fp-editor-dragbar > span,
.fp-editor-dialog-header > strong,
.fp-modal-header > h3,
.fp-layer-group-header > span,
.fp-layer-style-selector-header > span,
#layer-style-popup .style-title-wrap,
.map-indicator-header > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-editor-dialog-header > button,
.fp-modal-header > button,
.fp-layer-group-header > button,
.fp-layer-style-selector-header > button,
#layer-style-popup .style-close-btn,
.fp-layer-library-card > header > button { flex: 0 0 auto; }
.layers-panel > .panel-header i,
.right-dock > .panel-header i,
.floating-panel > .panel-header i,
.fp-editor-dragbar i,
.fp-editor-dialog-header i,
.fp-modal-header i,
.map-indicator-header i,
#fp-attribute-panel .fp-attribute-table-header i { color: var(--compact-tool-header-text) !important; }
.floating-panel > .panel-header button,
.fp-editor-dragbar button,
.fp-editor-dialog-header button,
.fp-modal-header button,
.map-indicator-header button,
#fp-attribute-panel .fp-attribute-table-header button:not(.fp-btn) {
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 9px !important;
}
#fp-attribute-panel .fp-attribute-table-header > div:first-child { min-width: 0; overflow: hidden; white-space: nowrap; }
#fp-attribute-panel .fp-attribute-table-header > div:first-child > i { flex: 0 0 auto; }
#fp-attribute-panel .fp-attribute-layer-select { width: clamp(90px, 18vw, 210px); min-width: 70px; min-height: 19px !important; height: 19px !important; padding: 0 4px !important; font-size: 8px !important; }
#fp-attribute-panel .fp-attribute-record-count { font-size: 8px !important; }
#fp-attribute-panel .fp-attribute-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
#fp-attribute-panel .fp-attribute-header-actions .fp-btn { min-width: 70px; min-height: 19px; height: 19px; padding: 0 5px; font-size: 8px; }
#fp-attribute-panel #fp-attr-delete-selected { border-color:#b91c1c; background:#b91c1c; color:#fff; }
#fp-attribute-panel #fp-attr-delete-selected:disabled { border-color:var(--gray-border); background:var(--gray-header); color:var(--text-muted); }
#fp-attribute-panel #toggle-attr-slide { background: transparent; border: 1px solid rgba(255,255,255,.3); color: inherit; cursor: pointer; }
#fp-attribute-panel #toggle-attr-slide:hover { background: rgba(255,255,255,.16); }
#layer-style-popup .style-title-wrap { display: block; }
#layer-style-popup #style-popup-title { display: block; overflow: hidden; color: var(--compact-tool-header-text) !important; font-size: 9px !important; text-overflow: ellipsis; white-space: nowrap; }
#layer-style-popup .style-close-btn,
.fp-layer-library-card > header > button,
.fp-layer-group-header > button,
.fp-layer-style-selector-header > button { width: 17px !important; min-width: 17px !important; height: 17px !important; min-height: 17px !important; padding: 0 !important; border-radius: 0 !important; font-size: 12px !important; line-height: 1 !important; }
.fp-layer-library-card > header span { overflow: hidden; color: inherit !important; font-size: 9px !important; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
    #fp-attribute-panel .fp-attribute-record-count { display: none; }
    #fp-attribute-panel .fp-attribute-layer-select { width: clamp(72px, 24vw, 140px); }
    #fp-attribute-panel .fp-attribute-header-actions .fp-btn { min-width: 21px; width: 21px; padding: 0; overflow: hidden; font-size: 0; }
    #fp-attribute-panel .fp-attribute-header-actions .fp-btn i { margin: 0; font-size: 9px; }
}

/* Open Project uses the same compact project-card language as Create Project. */
#modal-open-project .fp-modal-content { width: min(760px, calc(100vw - 28px)); }
.fp-table-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
.fp-search-box { position: relative; flex: 1 1 280px; min-width: 190px; }
.fp-search-box > i { position: absolute; z-index: 2; top: 50%; left: 9px; color: var(--text-muted); font-size: 10px; transform: translateY(-50%); pointer-events: none; }
.fp-search-box .fp-input { width: 100%; padding-left: 27px; }
.fp-type-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.fp-filter-chip { min-height: 27px; padding: 0 8px; border: 1px solid var(--gray-border); border-radius: 2px; background: var(--gray-header); color: var(--text-muted); cursor: pointer; font: 600 9px/1 Arial,sans-serif; }
.fp-filter-chip:hover,.fp-filter-chip.active { border-color: var(--cyan-primary); background: rgba(20,171,217,.15); color: var(--cyan-primary); }
.open-project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: min(480px,calc(100vh - 190px)); overflow-y: auto; padding: 1px; }
.open-project-card { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto 1fr auto; gap: 8px 10px; min-height: 150px; padding: 10px; border: 1px solid var(--gray-border); border-radius: 2px; background: var(--gray-header); color: var(--text-main); }
.open-project-card:hover { border-color: var(--cyan-primary); background: var(--gray-hover); }
.open-project-card.is-selected { border-color: var(--cyan-primary); box-shadow: inset 0 0 0 1px var(--cyan-primary); }
.fp-project-card-select { position: absolute; top: 7px; right: 7px; z-index: 2; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--gray-border); background: var(--gray-panel); cursor: pointer; }
.fp-project-card-select input { margin: 0; accent-color: var(--cyan-primary); }
.open-project-card-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid color-mix(in srgb,var(--cyan-primary) 55%,var(--gray-border)); border-radius: 2px; background: rgba(20,171,217,.12); color: var(--cyan-primary); font-size: 15px; }
.open-project-card-title { min-width: 0; }
.open-project-card-title strong,.open-project-card-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-project-card-title strong { color: var(--text-main); font-size: 11px; }
.open-project-card-title span { margin-top: 4px; color: var(--cyan-primary); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.open-project-card-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 0; }
.open-project-card-meta div { min-width: 0; padding: 5px 6px; border: 1px solid var(--gray-border); background: var(--gray-panel); }
.open-project-card-meta dt { color: var(--text-muted); font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.open-project-card-meta dd { margin: 3px 0 0; overflow: hidden; color: var(--text-main); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.open-project-card .btn-open-target { grid-column: 1 / -1; width: 100%; }
.fp-project-select-all { display: flex; align-items: center; gap: 6px; margin-right: auto; color: var(--text-main); font-size: 10px; }
.fp-project-select-all input { accent-color: var(--cyan-primary); }
.fp-btn-danger { border-color: #b91c1c !important; background: #b91c1c !important; color: #fff !important; }
.fp-btn-danger:hover:not(:disabled) { border-color: #dc2626 !important; background: #dc2626 !important; }
.fp-btn:disabled { opacity: .48; cursor: not-allowed; }
.fp-check-row { display: flex; align-items: flex-start; gap: 7px; padding: 8px; border: 1px solid var(--gray-border); background: var(--gray-panel); color: var(--text-main); font-size: 10px; line-height: 1.4; }
.fp-check-row input { margin-top: 1px; accent-color: var(--cyan-primary); }
.fp-password-control { position: relative; width: 100%; }
.fp-password-control .fp-input { width: 100%; padding-right: 34px; }
.fp-password-toggle { position: absolute; top: 1px; right: 1px; display: grid; width: 30px; height: calc(100% - 2px); place-items: center; border: 0; border-left: 1px solid var(--gray-border); background: var(--gray-header); color: var(--text-muted); cursor: pointer; }
.fp-password-toggle:hover,.fp-password-toggle:focus-visible { color: var(--cyan-primary); outline: none; }
.fp-parcel-tenancy-card { width: min(760px,calc(100vw - 28px)); max-height: min(680px,calc(100vh - 28px)); }
.fp-parcel-tenancy-card .fp-editor-dialog-body { min-height: 0; overflow-y: auto; }
.fp-parcel-intro { display: flex; gap: 8px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--gray-border); background: color-mix(in srgb,var(--cyan-primary) 9%,var(--gray-panel)); color: var(--text-main); font-size: 10px; line-height: 1.45; }
.fp-parcel-intro > i { margin-top: 2px; color: var(--cyan-primary); }
.fp-parcel-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.fp-parcel-form-grid > label { display: grid; gap: 4px; min-width: 0; color: var(--text-main); font-size: 10px; font-weight: 700; }
.fp-parcel-form-grid .fp-check-row { display: flex; font-weight: 400; }
.fp-parcel-file-field small { font-weight: 400; }
.fp-parcel-file-field a { color: var(--cyan-primary); text-decoration: none; }
.fp-parcel-upload-help { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid var(--gray-border); background: var(--gray-panel); color: var(--text-main); font-size: 10px; }
.fp-parcel-key-status { min-height: 14px; color: var(--text-muted); font-size: 9px; font-weight: 400; line-height: 1.35; }
.fp-parcel-key-status.is-valid { color: #16a34a; }
.fp-parcel-key-status.is-invalid { color: #ef4444; }
.fp-parcel-key-status.is-checking { color: var(--cyan-primary); }
.fp-parcel-key-note { display: flex; align-items: flex-start; gap: 7px; padding: 8px; border: 1px solid var(--gray-border); background: color-mix(in srgb,var(--cyan-primary) 7%,var(--gray-panel)); color: var(--text-main); font-size: 10px; line-height: 1.4; }
.fp-parcel-key-note i { margin-top: 2px; color: var(--cyan-primary); }
.fp-parcel-result { display: grid; gap: 4px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--gray-border); font-size: 10px; }
.fp-parcel-result.is-success { border-color: #15803d; background: rgba(21,128,61,.1); color: var(--text-main); }
.fp-parcel-result.is-error { border-color: #b91c1c; background: rgba(185,28,28,.1); color: #ef4444; }
@media (max-width: 680px) { .fp-parcel-form-grid { grid-template-columns: 1fr; } }
.open-project-state { grid-column: 1 / -1; min-height: 100px; display: grid; place-items: center; padding: 16px; border: 1px dashed var(--gray-border); color: var(--text-muted); font-size: 10px; text-align: center; }
.open-project-state.is-error { color: #f87171; }
body.light-theme .open-project-card,body.light-theme .fp-filter-chip { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
body.light-theme .open-project-card-meta div { background: #fff; border-color: #d7dee5; }

/* Professional attribute and spatial selection dialogs. */
.fp-selection-card { width: min(540px,calc(100vw - 28px)); }
.fp-selection-card .fp-editor-dialog-body { display: grid; gap: 7px; max-height: min(540px,calc(100vh - 115px)); overflow-y: auto; }
.fp-selection-card .fp-editor-dialog-body > label,.fp-selection-expression label { display: grid; gap: 4px; margin: 0; }
.fp-selection-expression { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.8fr); gap: 7px; }
.fp-selection-check { display: flex !important; align-items: center; gap: 6px !important; min-height: 25px; color: var(--text-main) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
.fp-selection-check input { accent-color: var(--cyan-primary); }
.fp-selection-help { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--gray-border); background: var(--gray-header); color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.fp-selection-help i { margin-top: 1px; color: var(--cyan-primary); }
.fp-feature-selected { filter: drop-shadow(0 0 4px #00e5ff) drop-shadow(0 0 2px #ffffff) !important; }
.fp-attr-row.fp-spatial-selected td { background: rgba(0,184,230,.22) !important; color: var(--text-main); }
.fp-tool-cursor-icon { position: relative; display: inline-grid; width: 19px; height: 19px; place-items: center; }
.fp-tool-cursor-icon > i:first-child { font-size: 13px; }
.fp-tool-cursor-icon .fp-tool-pointer-badge { position: absolute; right: -1px; bottom: -1px; color: var(--cyan-primary); font-size: 7px; filter: drop-shadow(0 0 1px var(--gray-panel)); }
@media (max-width: 620px) {
    .open-project-grid { grid-template-columns: 1fr; }
    .open-project-card-meta { grid-template-columns: 1fr 1fr; }
    .fp-selection-expression { grid-template-columns: 1fr; }
}

/* High-specificity theme correction: modal headers must never inherit white panel backgrounds. */
body.light-theme #layer-style-popup .style-popup-header,
body.light-theme .fp-modal-content > .fp-modal-header,
body.light-theme .fp-editor-dialog-card > .fp-editor-dialog-header,
body.light-theme .fp-layer-library-card > header,
body.light-theme .fp-layer-group-card > .fp-layer-group-header,
body.light-theme .fp-layer-style-selector-card > .fp-layer-style-selector-header {
    background: var(--compact-tool-header) !important;
    border-color: var(--compact-tool-header-border) !important;
    color: var(--compact-tool-header-text) !important;
}
body.light-theme .fp-modal-content > .fp-modal-header h3,
body.light-theme .fp-editor-dialog-card > .fp-editor-dialog-header strong,
body.light-theme #layer-style-popup .style-popup-header #style-popup-title,
body.light-theme .fp-modal-content > .fp-modal-header i,
body.light-theme .fp-editor-dialog-card > .fp-editor-dialog-header i,
body.light-theme #layer-style-popup .style-popup-header i {
    color: var(--compact-tool-header-text) !important;
}

/* Geoprocessing dialogs use the same compact desktop control system. */
.fp-geoprocess-card { width: min(540px,calc(100vw - 28px)); }
.fp-geoprocess-card .fp-editor-dialog-body { display: grid; gap: 8px; max-height: min(560px,calc(100vh - 115px)); overflow-y: auto; }
.fp-geoprocess-card .fp-editor-dialog-body > label,.fp-geoprocess-row label { display: grid; gap: 4px; margin: 0; }
.fp-geoprocess-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.fp-geoprocess-note,.fp-geoprocess-progress { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--gray-border); background: var(--gray-header); color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.fp-geoprocess-note i { margin-top: 1px; color: var(--cyan-primary); }
.fp-geoprocess-progress { color: var(--cyan-primary); }
.fp-geoprocess-progress[hidden] { display: none !important; }
@media (max-width: 520px) { .fp-geoprocess-row { grid-template-columns: 1fr; } }

/* trouverspatial.com professional wayleave/network identity. */
.app-logo { min-width: 190px; gap: 7px; text-shadow: none; }
.trouver-logo-mark { position: relative; display: grid; flex: 0 0 31px; width: 31px; height: 27px; place-items: center; overflow: hidden; border: 1px solid #78b8cf; border-radius: 3px; background: linear-gradient(145deg,#16384a 0%,#2c6d87 55%,#102a39 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22),0 0 8px rgba(54,167,207,.28); }
.trouver-logo-mark::before,.trouver-logo-mark::after { position: absolute; left: -5px; width: 42px; content: ''; transform: rotate(-24deg); }
.trouver-logo-mark::before { height: 10px; border-top: 1px solid rgba(255,255,255,.76); border-bottom: 1px solid rgba(255,255,255,.76); background: rgba(7,24,34,.62); }
.trouver-logo-mark::after { height: 1px; background: repeating-linear-gradient(90deg,#7dd3fc 0 4px,transparent 4px 7px); }
.trouver-logo-mark i { position: relative; z-index: 3; color: #f8fdff; font-size: 14px; filter: drop-shadow(0 1px 2px #06151d); }
.trouver-logo-mark b,.trouver-logo-mark em { position: absolute; z-index: 4; width: 5px; height: 5px; border: 1px solid #dff8ff; border-radius: 50%; background: #0ea5c6; box-shadow: 0 0 5px #67e8f9; }
.trouver-logo-mark b { top: 3px; right: 4px; }.trouver-logo-mark em { bottom: 3px; left: 4px; }
.brand-lockup { display: flex; min-width: 0; flex-direction: column; gap: 1px; line-height: 1; }
.brand-name { display: flex; align-items: baseline; white-space: nowrap; letter-spacing: -.01em !important; }
.brand-name b,.brand-name strong,.brand-name em { font-style: normal; font-weight: 750; }
.brand-name b { color: #f8fbfd; }.brand-name strong { color: #74c4df; }.brand-name em { margin-left: 1px; color: #c4d4dc; font-size: 8px; font-weight: 650; }
.brand-lockup small { margin-top: 2px; color: #a9c6d2; font-size: 5.5px; font-weight: 700; letter-spacing: .09em; white-space: nowrap; }
body.light-theme .brand-name b { color: #152733; } body.light-theme .brand-name strong { color: #176b8b; } body.light-theme .brand-name em,body.light-theme .brand-lockup small { color: #506975; }

/* Persistent attribute-table launcher and full spreadsheet editing controls. */
#fp-attribute-table-toggle { position: fixed; z-index: 2147483100; bottom: calc(var(--status-height) + 2px); left: 50%; display: flex; height: 22px; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--compact-tool-header-border); border-bottom: 0; border-radius: 2px 2px 0 0; background: var(--compact-tool-header); color: var(--compact-tool-header-text); box-shadow: 0 -2px 8px rgba(0,0,0,.25); cursor: pointer; font: 700 8px/1 Arial,sans-serif; transform: translateX(-50%); }
#fp-attribute-table-toggle[hidden] { display: none !important; }
#fp-attribute-table-toggle:hover { filter: brightness(1.08); }
#fp-attribute-table-toggle i { font-size: 8px; }
#fp-attribute-panel .fp-attribute-header-actions .is-hidden { display: none !important; }
.fp-attribute-select-column { width: 30px; min-width: 30px; padding: 0 !important; text-align: center; }
.fp-attribute-select-column input { width: 13px; height: 13px; accent-color: var(--cyan-primary); }
.fp-layer-row-id { color: var(--cyan-primary) !important; font-weight: 750; text-align: right; }
.fp-attribute-editable-cell { padding: 2px 3px !important; background: rgba(102,179,209,.05); }
.fp-resizable-attribute-table .fp-table-edit-input { width: 100%; min-width: 0; height: 22px; min-height: 22px; padding: 1px 4px; border-radius: 0; font-size: 9px; }
.fp-resizable-attribute-table .fp-attr-dirty td { background: rgba(245,158,11,.12); }
.fp-resizable-attribute-table .fp-attr-dirty .fp-table-edit-input { border-color: #f59e0b; }

/* Compact professional edit vertices. */
#map .leaflet-editing-icon { width: 8px !important; height: 8px !important; margin-top: -4px !important; margin-left: -4px !important; border: 1px solid #e8fbff !important; border-radius: 50% !important; background: #158fb5 !important; box-shadow: 0 0 0 1px rgba(8,47,64,.65) !important; }
#map .leaflet-editing-icon.leaflet-middle-icon { width: 6px !important; height: 6px !important; margin-top: -3px !important; margin-left: -3px !important; border-color: #b8dbe8 !important; background: #54798a !important; opacity: .82; }

/* Feature-selection toolbar state and network analysis feedback. */
.fp-feature-select-tool { position: relative; }
.fp-selection-count { position: absolute; top: -4px; right: -4px; display: grid; min-width: 14px; height: 14px; place-items: center; padding: 0 3px; border: 1px solid #e7fbff; border-radius: 8px; background: #087fa6; color: #fff; font: 700 7px/1 Arial,sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.fp-selection-count[hidden] { display: none !important; }
#map.fp-map-feature-selecting,#map.fp-map-feature-selecting .leaflet-interactive,#map.fp-map-feature-selecting .leaflet-marker-icon { cursor: cell !important; }
.fp-geoprocess-selection small { margin-left: auto; color: var(--text-muted); font-size: 8px; }
.fp-network-selection-status { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid color-mix(in srgb,var(--cyan-primary) 55%,var(--gray-border)); background: rgba(102,179,209,.1); color: var(--text-main); font-size: 9px; }
.fp-network-selection-status i { color: var(--cyan-primary); }

@media (max-width: 1120px) { .app-logo { min-width: 154px; }.brand-lockup small { display: none; } }
.floating-panel,
.fp-editor-toolbar,
.fp-editor-dialog-card,
.fp-modal-content,
.fp-layer-library-card,
.fp-layer-group-card,
.fp-layer-style-selector-card,
#layer-style-popup,
.map-indicator { border-radius: 0 !important; }

/* Guided FTTX planning workspace. */
.fp-fttx-planner-card { width: min(940px,calc(100vw - 28px)); }
.fp-fttx-planner-card > .fp-editor-dialog-header { cursor: move; user-select: none; }
.fp-fttx-shell { display: grid; grid-template-columns: 160px minmax(0,1fr); min-height: 470px; max-height: min(690px,calc(100vh - 112px)); }
.fp-fttx-steps { display: flex; flex-direction: column; border-right: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-fttx-steps button { display: grid; grid-template-columns: 23px 18px minmax(0,1fr); grid-template-rows: 20px 16px; align-items: center; min-height: 59px; padding: 8px; border: 0; border-bottom: 1px solid var(--gray-border); border-radius: 0; background: transparent; color: var(--text-muted); cursor: pointer; text-align: left; }
.fp-fttx-steps button:hover,.fp-fttx-steps button.active { background: rgba(20,171,217,.14); color: var(--text-main); }
.fp-fttx-steps button.active { box-shadow: inset 3px 0 0 var(--cyan-primary); }
.fp-fttx-steps button > span { grid-row: 1 / 3; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--gray-border); background: var(--gray-panel); color: var(--cyan-primary); font: 700 8px/1 Arial,sans-serif; }
.fp-fttx-steps button > i { color: var(--cyan-primary); font-size: 10px; }
.fp-fttx-steps button > b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fp-fttx-steps button > small { grid-column: 2 / 4; color: var(--text-muted); font-size: 7px; }
.fp-fttx-content { min-width: 0; overflow: auto; padding: 14px; background: var(--gray-panel); }
.fp-fttx-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--gray-border); }
.fp-fttx-section > header span { color: var(--cyan-primary); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.fp-fttx-section > header h3 { margin: 3px 0 0; color: var(--text-main); font-size: 15px; }
.fp-fttx-section > header p { max-width: 330px; margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.45; text-align: right; }
.fp-fttx-source-grid,.fp-fttx-model-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.fp-fttx-source-grid > article,.fp-fttx-model-grid > article { display: grid; gap: 9px; padding: 10px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-fttx-card-title { display: flex; min-width: 0; align-items: flex-start; gap: 8px; }
.fp-fttx-card-title > i { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border: 1px solid color-mix(in srgb,var(--cyan-primary) 50%,var(--gray-border)); background: rgba(20,171,217,.11); color: var(--cyan-primary); }
.fp-fttx-card-title > div { min-width: 0; flex: 1; }
.fp-fttx-card-title b,.fp-fttx-card-title small { display: block; }
.fp-fttx-card-title b { color: var(--text-main); font-size: 10px; }
.fp-fttx-card-title small { margin-top: 3px; color: var(--text-muted); font-size: 8px; }
.fp-fttx-section label { display: grid; gap: 4px; color: var(--text-muted); font-size: 8px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.fp-fttx-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-fttx-actions button,.fp-fttx-summary-grid button { min-height: 26px; padding: 0 8px; border: 1px solid var(--gray-border); border-radius: 0; background: var(--gray-panel); color: var(--text-main); cursor: pointer; font: 650 8px/1 Arial,sans-serif; }
.fp-fttx-actions button:hover,.fp-fttx-summary-grid button:hover { border-color: var(--cyan-primary); color: var(--cyan-primary); }
.fp-fttx-status { display: inline-flex; max-width: 155px; align-items: center; gap: 4px; margin-left: auto; overflow: hidden; color: var(--text-muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.fp-fttx-status.complete { color: #22c55e; }
.fp-fttx-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.fp-fttx-route-status { display: flex; align-items: center; gap: 9px; margin: 10px 0; padding: 8px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-fttx-route-status .fp-fttx-status { margin: 0; }
.fp-fttx-route-status p { margin: 0; color: var(--text-muted); font-size: 8px; }
.fp-fttx-primary-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.fp-fttx-primary-actions .fp-btn { flex: 1 1 145px; }
.fp-fttx-model-grid > article > .fp-btn { width: 100%; }
.fp-fttx-topology-form { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 10px; }
.fp-fttx-topology-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.fp-fttx-topology-notes article { display: grid; grid-template-columns: 20px 1fr; gap: 3px 6px; padding: 8px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-fttx-topology-notes i { grid-row: 1 / 3; color: var(--cyan-primary); }
.fp-fttx-topology-notes b { color: var(--text-main); font-size: 8px; }
.fp-fttx-topology-notes span { color: var(--text-muted); font-size: 7px; line-height: 1.35; }
.fp-fttx-summary-head { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid color-mix(in srgb,var(--cyan-primary) 55%,var(--gray-border)); background: rgba(20,171,217,.1); }
.fp-fttx-summary-head > i { color: var(--cyan-primary); font-size: 20px; }
.fp-fttx-summary-head b,.fp-fttx-summary-head span { display: block; }
.fp-fttx-summary-head b { color: var(--text-main); font-size: 11px; }
.fp-fttx-summary-head span { margin-top: 3px; color: var(--text-muted); font-size: 8px; }
.fp-fttx-summary-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.fp-fttx-summary-grid article { display: grid; min-width: 0; gap: 4px; align-content: start; padding: 8px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-fttx-summary-grid article > i { color: var(--cyan-primary); }
.fp-fttx-summary-grid article > b,.fp-fttx-summary-grid article > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-fttx-summary-grid article > b { color: var(--text-main); font-size: 8px; }
.fp-fttx-summary-grid article > span { color: var(--text-muted); font-size: 7px; }
.fp-fttx-summary-grid button { margin-top: 3px; }
.fp-fttx-footer { align-items: center; }
.fp-fttx-footer > span { min-width: 0; margin-right: auto; overflow: hidden; color: var(--text-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.fp-fttx-footer > span i { margin-right: 4px; color: var(--cyan-primary); }
.fp-fttx-empty { display: grid; min-height: 350px; place-items: center; align-content: center; gap: 9px; color: var(--text-muted); text-align: center; }
.fp-fttx-empty > i { color: var(--cyan-primary); font-size: 30px; }
.fp-fttx-empty h3,.fp-fttx-empty p { margin: 0; }
.fp-fttx-empty h3 { color: var(--text-main); }
.fp-fttx-empty p { max-width: 520px; font-size: 9px; line-height: 1.5; }
#map .fp-single-edit-target { filter: drop-shadow(0 0 3px #00d5ff) !important; }
#map .fp-delete-pending { opacity: .32 !important; pointer-events: none; }
@media (max-width: 760px) {
    .fp-fttx-shell { grid-template-columns: 1fr; max-height: calc(100vh - 112px); }
    .fp-fttx-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-right: 0; border-bottom: 1px solid var(--gray-border); }
    .fp-fttx-steps button { grid-template-columns: 18px minmax(0,1fr); grid-template-rows: 18px; min-height: 39px; border-right: 1px solid var(--gray-border); }
    .fp-fttx-steps button > span { display: none; }.fp-fttx-steps button > small { display: none; }.fp-fttx-steps button > b { font-size: 7px; }
    .fp-fttx-content { padding: 9px; }
    .fp-fttx-source-grid,.fp-fttx-model-grid,.fp-fttx-form-grid,.fp-fttx-topology-form,.fp-fttx-topology-notes { grid-template-columns: 1fr; }
    .fp-fttx-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .fp-fttx-section > header p,.fp-fttx-footer > span { display: none; }
}

/* Civil-network-first FTTX scenario, duct and DSR controls. */
.fp-civil-scenario-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 10px; }
.fp-civil-scenario { display: grid !important; grid-template-columns: 15px 30px minmax(0,1fr); gap: 8px !important; align-items: start; min-height: 92px; padding: 11px; border: 1px solid var(--gray-border); background: var(--gray-header); color: var(--text-main) !important; cursor: pointer; letter-spacing: 0 !important; text-transform: none !important; }
.fp-civil-scenario:hover,.fp-civil-scenario.active,.fp-civil-scenario:has(input:checked) { border-color: var(--cyan-primary); background: rgba(20,171,217,.12); box-shadow: inset 3px 0 0 var(--cyan-primary); }
.fp-civil-scenario input { margin-top: 7px; accent-color: var(--cyan-primary); }
.fp-civil-scenario > i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid color-mix(in srgb,var(--cyan-primary) 50%,var(--gray-border)); background: var(--gray-panel); color: var(--cyan-primary); font-size: 12px; }
.fp-civil-scenario b,.fp-civil-scenario small { display: block; }
.fp-civil-scenario b { color: var(--text-main); font-size: 10px; }
.fp-civil-scenario small { margin-top: 5px; color: var(--text-muted); font-size: 8px; line-height: 1.45; }
.fp-civil-scenario { min-height: 68px; padding: 8px; }
.fp-civil-source-form { align-items: end; }
.fp-civil-source-form label > small { color: var(--text-muted); font-size: 7px; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.fp-civil-selection-count { display: flex; min-height: 30px; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid var(--gray-border); background: var(--gray-header); color: var(--text-muted); font-size: 8px; }
.fp-civil-selection-count i { color: var(--cyan-primary); }
.fp-civil-source-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; margin: 9px 0; padding: 7px 9px; border: 1px solid var(--gray-border); background: var(--gray-header); color: var(--text-muted); font-size: 8px; }
.fp-civil-source-status .fp-fttx-status { max-width: 280px; margin: 0; }
.fp-capture-return-focus { border-color: var(--cyan-primary) !important; box-shadow: inset 0 0 0 1px var(--cyan-primary),0 0 0 3px rgba(20,171,217,.12); }
.fp-row-rules-panel { margin: 9px 0; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-row-rules-panel > summary { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 9px; padding: 7px 9px; color: var(--text-main); cursor: pointer; font-size: 8px; }
.fp-row-rules-panel > summary > span { display: inline-flex; align-items: center; gap: 6px; }.fp-row-rules-panel > summary i { color: var(--cyan-primary); }
.fp-row-rules-panel > summary .complete { color: #22c55e; }.fp-row-rules-panel > summary .warning { color: #f59e0b; }
.fp-row-rules-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-top: 1px solid var(--gray-border); }
.fp-row-rules-tools .fp-btn { display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; text-decoration: none; }
.fp-row-rules-scroll { max-width: 100%; overflow: auto; padding: 0 8px 8px; }
.fp-row-rules-panel table { width: 100%; min-width: 760px; border-collapse: collapse; }
.fp-row-rules-panel th,.fp-row-rules-panel td { padding: 4px; border: 1px solid var(--gray-border); color: var(--text-muted); font-size: 7px; text-align: left; }
.fp-row-rules-panel th { background: var(--gray-panel); color: var(--text-main); white-space: nowrap; }
.fp-row-rules-panel td .fp-input { min-width: 72px; height: 25px; padding: 3px 5px; font-size: 8px; }
.fp-row-rules-panel td button { width: 25px; height: 25px; border: 1px solid var(--gray-border); border-radius: 0; background: var(--gray-panel); color: #ef4444; cursor: pointer; }
.fp-row-rules-panel > p { margin: 0; padding: 0 9px 9px; color: var(--text-muted); font-size: 7px; line-height: 1.45; }
.fp-duct-standard-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 11px; }
.fp-duct-standard-grid article { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 3px 8px; align-items: center; padding: 9px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-duct-standard-grid article > i { grid-row: 1 / 4; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid color-mix(in srgb,var(--cyan-primary) 50%,var(--gray-border)); color: var(--cyan-primary); }
.fp-duct-standard-grid b { color: var(--text-main); font-size: 8px; }
.fp-duct-standard-grid strong { color: var(--cyan-primary); font-size: 9px; }
.fp-duct-standard-grid span { color: var(--text-muted); font-size: 7px; line-height: 1.35; }
.fp-civil-rule-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
.fp-dsr-definition { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 9px; border: 1px solid color-mix(in srgb,var(--cyan-primary) 50%,var(--gray-border)); background: rgba(20,171,217,.09); }
.fp-dsr-definition > i { color: var(--cyan-primary); font-size: 15px; }
.fp-dsr-definition b,.fp-dsr-definition span { display: block; }
.fp-dsr-definition b { color: var(--text-main); font-size: 9px; }
.fp-dsr-definition span { margin-top: 3px; color: var(--text-muted); font-size: 8px; line-height: 1.4; }
.fp-civil-progress { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px; border: 1px solid var(--cyan-primary); background: rgba(20,171,217,.1); color: var(--cyan-primary); font-size: 8px; }
.fp-civil-progress[hidden] { display: none !important; }
.fp-chamfer-training-review { position: fixed; z-index: 2147483645; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,6,23,.56); }
.fp-chamfer-training-card { display: grid; width: min(720px,calc(100vw - 30px)); max-height: min(720px,calc(100vh - 40px)); overflow: hidden; border: 1px solid var(--gray-border); border-radius: 0; background: var(--gray-panel); color: var(--text-main); box-shadow: 0 24px 60px rgba(2,6,23,.55); }
.fp-chamfer-training-card > .fp-editor-dialog-header,.fp-chamfer-training-card > .fp-editor-dialog-footer { min-height: 34px; }
.fp-chamfer-training-body { min-height: 0; overflow: auto; padding: 11px; }
.fp-ml-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; padding: 8px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-ml-summary b { color: var(--text-main); font-size: 9px; }.fp-ml-summary b i { margin-right: 5px; color: var(--cyan-primary); }.fp-ml-summary span { color: var(--text-muted); font-size: 8px; }
.fp-ml-candidate-list { display: grid; border-top: 1px solid var(--gray-border); }
.fp-ml-candidate { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 47px; padding: 7px 8px; border: 1px solid var(--gray-border); border-top: 0; background: var(--gray-header); }
.fp-ml-candidate.pending { box-shadow: inset 3px 0 0 #f59e0b; }.fp-ml-candidate.keep { box-shadow: inset 3px 0 0 #22c55e; }.fp-ml-candidate.reject { box-shadow: inset 3px 0 0 #ef4444; opacity: .88; }
.fp-ml-candidate b,.fp-ml-candidate small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.fp-ml-candidate b { color: var(--text-main); font-size: 9px; }.fp-ml-candidate small { margin-top: 3px; color: var(--text-muted); font-size: 7px; }
.fp-ml-candidate-actions { display: flex; gap: 5px; }.fp-ml-candidate-actions button { min-height: 26px; padding: 0 7px; border: 1px solid var(--gray-border); border-radius: 0; background: var(--gray-panel); color: var(--text-main); cursor: pointer; font: 650 8px/1 Arial,sans-serif; }.fp-ml-candidate-actions button:hover { border-color: var(--cyan-primary); color: var(--cyan-primary); }.fp-ml-candidate-actions button[data-ml-label="1"] { color: #16a34a; }.fp-ml-candidate-actions button[data-ml-label="0"] { color: #dc2626; }
@media (max-width: 600px) { .fp-chamfer-training-review { padding: 8px; }.fp-ml-summary,.fp-ml-candidate { grid-template-columns: 1fr; }.fp-ml-summary { align-items: flex-start; }.fp-ml-candidate-actions { justify-content: flex-end; } }
.fp-civil-review-state { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #d97706; background: rgba(217,119,6,.1); }
.fp-civil-review-state.approved { border-color: #16a34a; background: rgba(22,163,74,.1); }
.fp-civil-review-state > i { color: #f59e0b; font-size: 22px; }.fp-civil-review-state.approved > i { color: #22c55e; }
.fp-civil-review-state b,.fp-civil-review-state span { display: block; }
.fp-civil-review-state b { color: var(--text-main); font-size: 10px; }.fp-civil-review-state span { margin-top: 3px; color: var(--text-muted); font-size: 8px; }
.fp-civil-layer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.fp-civil-layer-grid article { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-civil-layer-grid article > i { color: var(--cyan-primary); font-size: 15px; }.fp-civil-layer-grid article.incomplete > i { color: var(--text-muted); }
.fp-civil-layer-grid b,.fp-civil-layer-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-civil-layer-grid b { color: var(--text-main); font-size: 9px; }.fp-civil-layer-grid span { margin-top: 3px; color: var(--text-muted); font-size: 7px; }
.fp-civil-layer-grid button { min-height: 26px; padding: 0 8px; border: 1px solid var(--gray-border); border-radius: 0; background: var(--gray-panel); color: var(--text-main); cursor: pointer; font: 650 8px/1 Arial,sans-serif; }
.fp-civil-layer-grid button:hover { border-color: var(--cyan-primary); color: var(--cyan-primary); }
.fp-civil-review-checks { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.fp-civil-review-checks article { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 3px 6px; padding: 8px; border: 1px solid var(--gray-border); background: var(--gray-header); }
.fp-civil-review-checks i { grid-row: 1 / 3; color: var(--cyan-primary); }.fp-civil-review-checks b { color: var(--text-main); font-size: 8px; }.fp-civil-review-checks span { color: var(--text-muted); font-size: 7px; line-height: 1.35; }
@media (max-width: 760px) {
    .fp-civil-scenario-grid,.fp-duct-standard-grid,.fp-civil-rule-form,.fp-civil-review-checks { grid-template-columns: 1fr; }
    .fp-civil-layer-grid { grid-template-columns: 1fr; }
}

/* Project lifecycle dialogs use the same compact in-app system as editing modules. */
.fp-project-action-card { width: min(410px,calc(100vw - 24px)); }
.fp-project-action-card .fp-editor-dialog-body { display: grid; gap: 9px; }
.fp-project-dialog-message { margin: 0; color: var(--text-main); font: 500 10px/1.5 Arial,sans-serif; white-space: pre-line; }
.fp-project-action-card label { display: grid; gap: 5px; color: var(--text-muted); font: 700 8px/1.2 Arial,sans-serif; text-transform: uppercase; letter-spacing: .04em; }

/* Ensure long feature schemas remain usable inside the fixed-height inspector. */
.right-dock .panel-content { min-height: 0; overflow-y: scroll; scrollbar-gutter: stable; }

/* Always show a desktop scrollbar so long layer and attribute lists remain
   clearly scrollable instead of being clipped below the map. */
.layers-panel > .panel-content,.right-dock .panel-content { overflow-y:scroll !important; scrollbar-gutter:stable both-edges; scrollbar-width:thin; scrollbar-color:var(--cyan-primary) var(--gray-header); }
.layers-panel > .panel-content::-webkit-scrollbar,.right-dock .panel-content::-webkit-scrollbar { width:11px; }
.layers-panel > .panel-content::-webkit-scrollbar-track,.right-dock .panel-content::-webkit-scrollbar-track { background:var(--gray-header); border-left:1px solid var(--gray-border); }
.layers-panel > .panel-content::-webkit-scrollbar-thumb,.right-dock .panel-content::-webkit-scrollbar-thumb { min-height:34px; border:2px solid var(--gray-header); border-radius:0; background:var(--cyan-primary); }
.layers-panel > .panel-content::-webkit-scrollbar-thumb:hover,.right-dock .panel-content::-webkit-scrollbar-thumb:hover { background:var(--cyan-hover); }

/* Inventory/project lifecycle and dock-style table controls. */
.fp-toc-deletion-pending { display:inline-block; margin-left:5px; padding:1px 4px; border:1px solid currentColor; color:#ef4444; font-size:6px; font-style:normal; font-weight:700; line-height:1.2; vertical-align:middle; }
.fp-project-workflow { display:inline-flex; width:max-content; align-items:center; margin-top:3px; padding:2px 5px; border:1px solid currentColor; border-radius:2px; font-size:7px; font-style:normal; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.fp-project-workflow.draft { color:#f59e0b; }.fp-project-workflow.submitted { color:#38bdf8; }.fp-project-workflow.posted { color:#22c55e; }
.fp-read-only-badge { display:inline-flex; height:19px; align-items:center; gap:4px; padding:0 6px; border:1px solid rgba(148,163,184,.55); color:var(--text-muted); font-size:8px; font-weight:700; }
#fp-attribute-panel .fp-attr-row { cursor:zoom-in; }
#fp-attribute-panel #toggle-attr-slide,#fp-attribute-table-toggle { border-radius:0 !important; }
.fp-attribute-dock-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:18px; min-width:36px; min-height:18px; padding:0; border:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-main); box-shadow:0 -2px 8px rgba(0,0,0,.25); cursor:pointer; font-size:9px; }
.fp-attribute-dock-toggle:hover { background:var(--cyan-primary); color:#0f172a; }
#fp-attribute-panel #toggle-attr-slide.fp-attribute-dock-toggle { position:absolute; z-index:2; top:-19px; left:50%; width:36px !important; height:19px !important; min-width:36px !important; min-height:19px !important; padding:0 !important; border:1px solid var(--gray-border) !important; background:var(--gray-header) !important; color:var(--text-main) !important; transform:translateX(-50%); }
#fp-attribute-panel #toggle-attr-slide.fp-attribute-dock-toggle:hover { background:var(--cyan-primary) !important; color:#0f172a !important; }
#fp-attribute-table-toggle.fp-attribute-dock-toggle { width:36px; min-width:36px; height:19px; padding:0; justify-content:center; border:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-main); }
.fp-inventory-status-cell { font-weight:750; text-transform:capitalize; }
.fp-inventory-status-cell.proposed { color:#f59e0b !important; }
.fp-inventory-status-cell.completed { color:#22c55e !important; }
.fp-parallel-create-card { width:min(430px,calc(100vw - 24px)); }
.fp-parallel-create-card .fp-editor-dialog-body { display:grid; gap:9px; }
.fp-parallel-create-card label { display:grid; gap:4px; color:var(--text-main); font-size:9px; font-weight:700; }
.fp-parallel-create-card .fp-checkbox-label { display:flex; align-items:center; gap:7px; }
.attribute-info-box:first-child { max-width: 100%; overflow-x: auto; }
.attribute-table { table-layout: fixed; }
.attribute-table th,.attribute-table td { overflow-wrap: anywhere; }
.fp-inspector-empty td { padding: 14px 7px !important; color: var(--text-muted) !important; text-align: center !important; font-style: italic; }

/* Manual FTTX civil assets are a separate, persistent desktop-style palette. */
.fp-civil-assets-toolbar { position: fixed; top: 92px; left: 356px; z-index: 12050; pointer-events: none; }
.fp-civil-assets-card { min-width: 254px; border: 1px solid var(--panel-title-border); background: var(--gray-panel); box-shadow: 0 10px 30px rgba(0,0,0,.28); pointer-events: auto; }
.fp-civil-assets-card .fp-editor-dialog-header { height: 25px; min-height: 25px; cursor: move; }
.fp-civil-assets-tools { display: grid; grid-template-columns: repeat(4,minmax(54px,1fr)); gap: 1px; padding: 3px; background: var(--gray-border); }
.fp-civil-assets-tools button { display: grid; min-height: 48px; place-items: center; gap: 3px; padding: 4px 3px; border: 0; border-radius: 0; background: var(--gray-panel); color: var(--text-main); cursor: pointer; font: 700 8px/1 Arial,sans-serif; }
.fp-civil-assets-tools button:hover { background: var(--gray-hover); color: var(--cyan-primary); }
.fp-civil-assets-tools button i { font-size: 15px; }
.fp-civil-assets-tools button:nth-child(2) i { color: #64748b; }
.fp-civil-assets-tools button:nth-child(3) i { color: #f59e0b; }
.fp-civil-assets-tools button:nth-child(4) i { color: #22c55e; }

/* One compact, icon-only toolbar for the complete FTTX/FO workflow. */
.fp-fttx-tools-toolbar {
    position: fixed;
    top: 78px;
    left: 318px;
    z-index: 12070;
    display: flex;
    width: max-content;
    max-width: calc(100vw - 18px);
    height: 32px;
    align-items: stretch;
    border: 1px solid var(--panel-title-border);
    border-radius: 0;
    background: var(--gray-panel);
    box-shadow: 0 5px 18px rgba(0,0,0,.28);
    color: var(--text-main);
}
.fp-fttx-toolbar-drag {
    display: grid;
    width: 18px;
    flex: 0 0 18px;
    place-items: center;
    border-right: 1px solid var(--gray-border);
    background: var(--panel-title-bg);
    color: var(--panel-title-text);
    cursor: move;
    font-size: 9px;
}
.fp-fttx-toolbar-tools {
    display: flex;
    min-width: 0;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fp-fttx-toolbar-tools::-webkit-scrollbar,.fp-fttx-toolbar-tools::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.fp-fttx-toolbar-tool,.fp-fttx-toolbar-close {
    position: relative;
    display: grid;
    width: 29px;
    min-width: 29px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-right: 1px solid var(--gray-border);
    border-radius: 0;
    background: var(--gray-panel);
    color: var(--text-main);
    cursor: pointer;
    font-size: 12px;
}
.fp-fttx-toolbar-tool[data-group="civil"] i { color: #f59e0b; }
.fp-fttx-toolbar-tool[data-group="cable"] i { color: var(--cyan-primary); }
.fp-fttx-toolbar-tool[data-group="network"] i { color: #22c55e; }
.fp-fttx-toolbar-tool:hover,.fp-fttx-toolbar-tool:focus-visible,.fp-fttx-toolbar-tool.active { background: var(--gray-hover); color: var(--cyan-primary); outline: 1px solid var(--cyan-primary); outline-offset: -1px; }
.fp-fttx-toolbar-close { border-right: 0; color: #ef4444; }
.fp-fttx-toolbar-close:hover,.fp-fttx-toolbar-close:focus-visible { background: rgba(239,68,68,.14); outline: 1px solid #ef4444; outline-offset: -1px; }
.fp-fttx-toolbar-separator { width: 1px; min-width: 1px; margin: 4px 2px; background: var(--gray-border); }
.fp-fttx-toolbar-tool::after {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    z-index: 2;
    width: max-content;
    max-width: 190px;
    padding: 4px 6px;
    border: 1px solid var(--gray-border);
    border-radius: 0;
    background: var(--gray-header);
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
    color: var(--text-main);
    content: attr(data-label);
    font: 700 8px/1.2 Arial,sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,-3px);
    transition: opacity .12s ease,transform .12s ease;
    white-space: nowrap;
}
.fp-fttx-toolbar-tool:hover::after,.fp-fttx-toolbar-tool:focus-visible::after { opacity: 1; transform: translate(-50%,0); }
.fp-fttx-tools-toolbar.fp-toolbar-attention { animation: fpFttxToolbarAttention .42s ease; }
@keyframes fpFttxToolbarAttention { 50% { box-shadow: 0 0 0 2px var(--cyan-primary),0 5px 18px rgba(0,0,0,.32); } }
@media (max-width:760px) { .fp-fttx-tools-toolbar { left: 8px; max-width: calc(100vw - 16px); } }

/* Cursor-arrow badges clutter the compact vertical toolbar. */
.arc-toolbar .fp-tool-pointer-badge { display: none !important; }

/* TrouverSpatial.com globe-search identity, based on the supplied reference. */
.app-logo { min-width: 205px; gap: 6px; text-shadow: none; }
.trouver-logo-mark { position: relative; display: block; flex: 0 0 28px; width: 28px; height: 25px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.trouver-logo-mark::before,.trouver-logo-mark::after { content: none; }
.trouver-logo-lens { position: absolute; top: 0; right: 1px; display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #aebcc3; border-radius: 50%; background: radial-gradient(circle at 34% 28%,#d8fbff 0 7%,#54c5e8 24%,#1688c6 63%,#0b4f86 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.72),0 1px 4px rgba(0,0,0,.28); }
.trouver-logo-lens::before { position: absolute; top: 2px; left: 5px; width: 9px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.56); content: ''; transform: rotate(-25deg); }
.trouver-logo-lens::after { content: none; }
.trouver-logo-lens i { position: relative; z-index: 2; color: rgba(235,253,255,.86); font-size: 13px; filter: drop-shadow(0 1px 1px #07598d); }
.brand-name { letter-spacing: -.025em !important; }
.brand-name b,.brand-name strong,.brand-name em { font-style: normal; font-weight: 800; }
.brand-name b { color: #f4f7f8; }.brand-name strong { color: #28aee7; }.brand-name em { margin-left: 1px; color: #c8d5db; font-size: 8px; font-weight: 700; letter-spacing: 0; }
.brand-lockup small { margin-top: 3px; color: #b8cbd4; font-size: 5.7px; font-weight: 700; letter-spacing: .055em; white-space: nowrap; }
body.light-theme .brand-name b { color: #59666c; } body.light-theme .brand-name strong { color: #087fc0; } body.light-theme .brand-name em,body.light-theme .brand-lockup small { color: #5c707a; }
@media (max-width: 1120px) { .app-logo { min-width: 165px; }.brand-lockup small { display: none; } }

/* Keep the complete TrouverSpatial identity anchored to the left of the header. */
.top-menu-bar { padding-left: 8px; }
.top-menu-bar .header-left { min-width: 0; justify-content: flex-start; }
.top-menu-bar .app-logo { margin: 0; justify-content: flex-start; text-align: left; }
.top-menu-bar .brand-lockup { align-items: flex-start; text-align: left; }

/* FTTX cable catalogue and logical fiber-connection matrix. */
.fp-cable-designer-card,.fp-cable-matrix-card { width:min(950px,calc(100vw - 28px)); max-height:calc(100vh - 38px); }
.fp-cable-designer-card .fp-editor-dialog-body,.fp-cable-matrix-card .fp-editor-dialog-body { overflow:auto; }
.fp-cable-workflow { display:grid; grid-template-columns:1fr 22px 1fr 22px 1fr; align-items:stretch; gap:5px; margin-bottom:10px; }
.fp-cable-workflow article { display:grid; grid-template-columns:22px minmax(0,1fr); gap:2px 7px; align-items:center; padding:7px; border:1px solid var(--gray-border); background:var(--gray-header); }
.fp-cable-workflow article i { grid-row:1 / 3; color:var(--cyan-primary); font-size:15px; }.fp-cable-workflow article b { color:var(--text-main); font-size:9px; }.fp-cable-workflow article small { color:var(--text-muted); font-size:7px; }.fp-cable-workflow > i { align-self:center; color:var(--text-muted); font-size:10px; }
.fp-cable-design-section { margin-top:10px; padding-top:10px; border-top:1px solid var(--gray-border); }
.fp-cable-section-title { display:flex; gap:8px; align-items:flex-start; }.fp-cable-section-title > i { width:17px; margin-top:2px; color:var(--cyan-primary); font-size:14px; }.fp-cable-section-title b,.fp-cable-section-title small { display:block; }.fp-cable-section-title b { color:var(--text-main); font-size:10px; }.fp-cable-section-title small { margin-top:2px; color:var(--text-muted); font-size:7px; }
.fp-cable-choice-grid,.fp-cable-model-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:8px; }
.fp-cable-model-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-height:218px; overflow:auto; padding-right:2px; }.fp-equipment-model-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fp-cable-model-card { display:grid; grid-template-columns:17px minmax(0,1fr); gap:5px; align-items:start; min-height:48px; padding:7px; border:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-main); cursor:pointer; }.fp-cable-model-card:has(input:checked),.fp-cable-model-card.selected { border-color:var(--cyan-primary); background:rgba(20,171,217,.11); box-shadow:inset 3px 0 0 var(--cyan-primary); }.fp-cable-model-card input { position:absolute; opacity:0; pointer-events:none; }.fp-cable-model-card > i { padding-top:2px; color:var(--cyan-primary); font-size:13px; }.fp-cable-model-card span { min-width:0; }.fp-cable-model-card b,.fp-cable-model-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.fp-cable-model-card b { font-size:8px; }.fp-cable-model-card small { margin-top:3px; color:var(--text-muted); font-size:7px; }
.fp-cable-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }.fp-cable-form-grid label,.fp-cable-connection-form label { display:grid; gap:4px; color:var(--text-main); font-size:8px; font-weight:700; }.fp-cable-form-grid label small { color:var(--text-muted); font-size:7px; font-weight:400; }
.fp-cable-layer-status { display:flex; gap:8px; align-items:center; margin-top:10px; padding:8px; border:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-muted); font-size:8px; }.fp-cable-layer-status > i { color:var(--cyan-primary); }
.fp-cable-connection-form { display:grid; grid-template-columns:1.5fr .7fr 1.2fr 1.5fr .7fr .85fr .85fr auto; gap:6px; align-items:end; margin-top:10px; padding:8px; border:1px solid var(--gray-border); background:var(--gray-header); }.fp-cable-connection-form button { min-height:28px; white-space:nowrap; }
.fp-cable-trace { margin-top:10px; padding:9px; border:1px solid var(--cyan-primary); background:rgba(20,171,217,.07); }.fp-cable-trace-form { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:6px; margin-top:8px; }.fp-trace-result { display:grid; gap:3px; min-height:18px; margin-top:8px; color:var(--text-muted); font-size:8px; }.fp-trace-result b { color:var(--text-main); }.fp-trace-result span { padding-top:3px; border-top:1px solid var(--gray-border); }.fp-trace-result em { color:var(--cyan-primary); font-style:normal; }
.fp-cable-matrix-table-wrap { max-height:240px; margin-top:10px; overflow:auto; border:1px solid var(--gray-border); }.fp-cable-matrix-table { width:100%; min-width:720px; border-collapse:collapse; table-layout:fixed; font-size:8px; }.fp-cable-matrix-table th,.fp-cable-matrix-table td { padding:6px; border-bottom:1px solid var(--gray-border); color:var(--text-main); text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.fp-cable-matrix-table th { position:sticky; top:0; z-index:1; background:var(--panel-title-bg); color:var(--panel-title-text); font-size:7px; text-transform:uppercase; }.fp-cable-matrix-table td:first-child,.fp-cable-matrix-table th:first-child,.fp-cable-matrix-table td:nth-child(4),.fp-cable-matrix-table th:nth-child(4) { width:23%; }.fp-cable-matrix-table button { border:0; background:transparent; color:#ef4444; cursor:pointer; }
@media (max-width:900px) { .fp-cable-model-grid,.fp-equipment-model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.fp-cable-connection-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.fp-cable-connection-form button { grid-column:span 2; }.fp-cable-workflow { grid-template-columns:1fr; }.fp-cable-workflow > i { display:none; } }
@media (max-width:560px) { .fp-cable-choice-grid,.fp-cable-model-grid,.fp-equipment-model-grid,.fp-cable-form-grid,.fp-cable-trace-form { grid-template-columns:1fr; }.fp-cable-designer-card,.fp-cable-matrix-card { width:calc(100vw - 12px); } }

/* Compact dropdown-driven cable planner. */
.fp-cable-designer-card .fp-editor-dialog-body { display:block; }
.fp-cable-form-grid-wide { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fp-cable-model-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
.fp-cable-model-summary article { display:grid; grid-template-columns:20px minmax(0,1fr); gap:6px; align-items:start; min-height:33px; padding:7px; border:1px solid var(--cyan-primary); background:rgba(20,171,217,.08); }
.fp-cable-model-summary i { padding-top:2px; color:var(--cyan-primary); font-size:13px; }.fp-cable-model-summary b,.fp-cable-model-summary small { display:block; }.fp-cable-model-summary b { color:var(--text-main); font-size:8px; }.fp-cable-model-summary small { margin-top:2px; color:var(--text-muted); font-size:7px; line-height:1.35; }
.fp-cable-tool-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:8px; }.fp-cable-tool-grid .fp-btn { min-height:32px; padding:4px 6px; font-size:8px; white-space:normal; }.fp-cable-tool-grid .fp-btn i { margin-right:3px; }
.fp-cable-small-card { width:min(560px,calc(100vw - 24px)); }.fp-cable-small-card .fp-editor-dialog-body { display:grid; gap:9px; }.fp-cable-small-card label { display:grid; gap:4px; color:var(--text-main); font-size:8px; font-weight:700; }.fp-cable-small-card .fp-checkbox-label { display:flex; align-items:center; gap:7px; }
.fp-fo-route-card{width:min(780px,calc(100vw - 24px));}.fp-fo-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;}.fp-fo-route-grid label{min-width:0}.fp-fo-route-card [data-route-progress]{grid-column:1/-1}@media(max-width:700px){.fp-fo-route-grid{grid-template-columns:1fr}}
.fp-network-import-card { width:min(900px,calc(100vw - 24px)); max-height:min(760px,calc(100vh - 42px)); }
.fp-network-import-card .fp-editor-dialog-body { display:grid; gap:9px; overflow:auto; scrollbar-width:thin; }
.fp-import-intro { display:flex; align-items:flex-start; gap:9px; padding:9px; border:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-muted); font-size:8px; line-height:1.5; }
.fp-import-intro > i { margin-top:2px; color:var(--cyan-primary); font-size:13px; }.fp-import-intro b { color:var(--text-main); }
.fp-import-checklist { display:grid; gap:6px; padding:9px; border:1px solid var(--gray-border); background:var(--gray-panel); }
.fp-import-checklist header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:6px; border-bottom:1px solid var(--gray-border); color:var(--text-main); font-size:9px; }
.fp-import-checklist header small { max-width:62%; color:var(--text-muted); font-size:7px; font-weight:400; text-align:right; line-height:1.4; }
.fp-import-checklist label { display:flex; align-items:flex-start; gap:7px; color:var(--text-muted); font-size:8px; line-height:1.45; cursor:pointer; }.fp-import-checklist label b { color:var(--text-main); }.fp-import-checklist input { margin-top:2px; }
.fp-import-upload-actions { display:flex; flex-wrap:wrap; gap:6px; }.fp-import-upload-actions button { min-height:29px; padding:5px 9px; border:1px solid var(--gray-border); border-radius:0; background:var(--gray-header); color:var(--text-main); font-size:8px; cursor:pointer; }.fp-import-upload-actions button:hover { border-color:var(--cyan-primary); color:var(--cyan-primary); }
.fp-import-map-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:9px; }.fp-import-map-grid label,.fp-import-notes { display:grid; gap:4px; color:var(--text-main); font-size:8px; font-weight:700; }
.fp-import-notes textarea { min-height:62px; resize:vertical; padding:7px; line-height:1.4; }
.fp-import-preview { min-height:42px; }.fp-import-preview-ok { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid #15803d; background:rgba(21,128,61,.08); color:var(--text-main); font-size:8px; }.fp-import-preview-ok i { color:#22c55e; }.fp-import-preview-ok span { margin-left:auto; color:var(--text-muted); }
.fp-import-preview-table { max-width:100%; overflow:auto; border:1px solid var(--gray-border); border-top:0; }.fp-import-preview-table table { width:100%; min-width:720px; border-collapse:collapse; }.fp-import-preview-table th,.fp-import-preview-table td { padding:6px; border:1px solid var(--gray-border); color:var(--text-muted); font-size:7px; text-align:left; vertical-align:top; }.fp-import-preview-table th { color:var(--text-main); background:var(--gray-header); white-space:nowrap; }
.fp-import-mapping-result { display:flex; flex-wrap:wrap; gap:4px 8px; }.fp-import-mapping-result span { white-space:nowrap; }.fp-import-mapping-result b { color:var(--text-main); }.fp-import-mapping-result em { color:#f59e0b; font-style:normal; }
.fp-import-warnings { margin:0; padding:7px 7px 7px 25px; border:1px solid #a16207; background:rgba(161,98,7,.08); color:var(--text-muted); font-size:8px; line-height:1.45; }
@media (max-width:720px) { .fp-import-map-grid { grid-template-columns:1fr; }.fp-import-checklist header { display:grid; }.fp-import-checklist header small { max-width:none; text-align:left; } }
.fp-asset-tray-section { display:grid; gap:6px; padding:8px; border:1px solid var(--gray-border); background:var(--gray-header); }.fp-asset-tray-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; }.fp-asset-tray-grid:has([data-civil-select]) { grid-template-columns:minmax(88px,.6fr) minmax(0,1fr) auto; }.fp-asset-tray-grid .fp-btn { min-height:31px; padding:5px 8px; font-size:8px; white-space:nowrap; }.fp-asset-tray-grid .fp-input { min-width:0; height:31px; font-size:9px; }
.fp-civil-model-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.fp-civil-model-buttons button { display:grid; grid-template-columns:14px minmax(0,1fr); align-items:center; gap:5px; min-height:31px; padding:5px 6px; border:1px solid var(--gray-border); border-radius:2px; background:var(--gray-panel); color:var(--text-main); cursor:pointer; font-size:8px; text-align:left; }.fp-civil-model-buttons button i { color:var(--cyan-primary); text-align:center; }.fp-civil-model-buttons button:hover { border-color:var(--cyan-primary); background:rgba(20,171,217,.14); color:var(--cyan-primary); }
.fp-fttx-model-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.fp-fttx-model-buttons button { display:grid; grid-template-columns:14px minmax(0,1fr); align-items:center; gap:5px; min-height:31px; padding:5px 6px; border:1px solid var(--gray-border); border-radius:2px; background:var(--gray-panel); color:var(--text-main); cursor:pointer; font-size:8px; text-align:left; }.fp-fttx-model-buttons button i { color:var(--cyan-primary); text-align:center; }.fp-fttx-model-buttons button:hover { border-color:var(--cyan-primary); background:rgba(20,171,217,.14); color:var(--cyan-primary); }
.fp-fttx-model-swatch { width:14px; height:14px; display:inline-block; box-sizing:border-box; background:var(--fttx-fill,#64748b); border:2px solid var(--fttx-outline,#1f2937); border-radius:2px; justify-self:center; }.fp-fttx-model-swatch.is-circle { border-radius:50%; }.fp-fttx-model-swatch.is-ring { border-radius:50%; background:transparent; }.fp-fttx-model-swatch.is-diamond { transform:rotate(45deg) scale(.78); }.fp-fttx-model-swatch.is-hexagon { border:0; clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); box-shadow:inset 0 0 0 2px var(--fttx-outline,#1f2937); }.fp-fttx-model-swatch.is-cross { border:0; clip-path:polygon(35% 0%,65% 0%,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0% 65%,0% 35%,35% 35%); }.fp-fttx-model-swatch.is-line { height:4px; border:0; border-radius:1px; background:var(--fttx-color,#0284c7); }.fp-fttx-model-swatch.is-line.is-dash { background:repeating-linear-gradient(to right,var(--fttx-color,#0284c7) 0 7px,transparent 7px 11px); }.fp-fttx-model-swatch.is-line.is-long-dash { background:repeating-linear-gradient(to right,var(--fttx-color,#0284c7) 0 10px,transparent 10px 15px); }
.fp-approved-boxes-only { display:flex; align-items:flex-start; gap:7px; padding:8px 9px; border:1px solid #0e7490; background:rgba(14,116,144,.08); color:var(--text-main); font-size:9px; line-height:1.35; }.fp-approved-boxes-only input { margin-top:2px; accent-color:#0e7490; }.fp-approved-boxes-only span { flex:1; }.fp-approved-boxes-only small { display:block; grid-column:2; color:var(--text-muted); }
.fp-dialog-copy { margin:0; padding:7px; border:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-muted); font-size:8px; line-height:1.45; }
.fp-planning-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:7px; border:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-muted); font-size:7px; line-height:1.35; }.fp-planning-rules b { color:var(--text-main); }
.fp-cable-area-summary { display:grid; gap:3px; padding:8px; border:1px solid #22c55e; background:rgba(34,197,94,.08); color:var(--text-muted); font-size:8px; }.fp-cable-area-summary b { color:#22c55e; }
.dropdown-section-label { display:block; padding:7px 10px 3px; color:var(--cyan-primary); font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.fp-cable-auto-summary { display:grid; gap:4px; padding:8px; border:1px solid #22c55e; background:rgba(34,197,94,.08); color:var(--text-muted); font-size:8px; line-height:1.4; }.fp-cable-auto-summary b { color:#22c55e; }
.fp-cable-auto-progress { display:flex; align-items:center; gap:8px; min-height:34px; padding:8px; border:1px solid var(--cyan-primary); background:rgba(20,171,217,.1); color:var(--cyan-primary); font-size:8px; line-height:1.4; }.fp-cable-auto-progress[hidden] { display:none !important; }
.fp-schematic-card { width:min(1120px,calc(100vw - 28px)); max-height:calc(100vh - 38px); }.fp-schematic-card .fp-editor-dialog-body { display:grid; gap:9px; overflow:auto; }.fp-schematic-controls { display:grid; grid-template-columns:minmax(180px,1fr) minmax(200px,1fr) auto; align-items:end; gap:8px; padding:8px; border:1px solid var(--gray-border); background:var(--gray-header); }.fp-schematic-controls label { display:grid; gap:4px; color:var(--text-main); font-size:8px; font-weight:700; }.fp-schematic-controls label[hidden] { display:none; }.fp-schematic-controls .fp-btn { min-height:31px; white-space:nowrap; }
.fp-schematic-result { display:grid; gap:8px; min-height:54px; }.fp-schematic-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:9px; border:1px solid var(--cyan-primary); background:rgba(20,171,217,.08); }.fp-schematic-heading b,.fp-schematic-heading small { display:block; }.fp-schematic-heading b { color:var(--text-main); font-size:10px; }.fp-schematic-heading small { margin-top:3px; color:var(--text-muted); font-size:8px; }.fp-schematic-heading > span { padding:3px 6px; border:1px solid var(--gray-border); background:var(--gray-panel); color:var(--text-muted); font-size:8px; white-space:nowrap; }
.fp-schematic-canvas { max-height:470px; overflow:auto; padding:8px; border:1px solid var(--gray-border); background:linear-gradient(180deg,rgba(14,116,144,.05),rgba(148,163,184,.04)); }.fp-schematic-svg { display:block; width:100%; min-width:760px; min-height:300px; }.fp-schematic-edge line { stroke-width:2.25; }.fp-schematic-edge text { fill:var(--text-muted); font:700 8px Arial,sans-serif; paint-order:stroke; stroke:var(--gray-panel); stroke-width:3px; stroke-linejoin:round; }.fp-schematic-node text { fill:var(--text-main); font:700 8px Arial,sans-serif; }.fp-schematic-node text + text { fill:var(--text-muted); font-size:6.5px; font-weight:400; }.fp-schematic-schedule { padding-top:7px; border-top:1px solid var(--gray-border); }.fp-schematic-schedule h4 { margin:0 0 5px; color:var(--text-main); font-size:9px; }.fp-schematic-table-wrap { max-height:245px; overflow:auto; border:1px solid var(--gray-border); }.fp-schematic-table { min-width:910px; }.fp-schematic-table td { white-space:normal; line-height:1.35; }.fp-schematic-table td:first-child,.fp-schematic-table th:first-child { width:14%; }.fp-schematic-table td:nth-child(2),.fp-schematic-table th:nth-child(2) { width:21%; }.fp-schematic-table small { color:var(--text-muted); font-size:7px; }
.fp-geographic-canvas { background:repeating-linear-gradient(0deg,rgba(148,163,184,.12) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(148,163,184,.12) 0 1px,transparent 1px 32px),linear-gradient(180deg,#f8fafc,#e2e8f0); }.fp-geographic-svg { min-width:920px; background:transparent; }.fp-geographic-cable path { fill:none; stroke-width:.8; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }.fp-geographic-cable.is-main path { stroke-width:1.2; }.fp-geographic-cable.is-drop path { stroke-width:.5; stroke-dasharray:7 4; }.fp-geographic-cable text,.fp-geographic-equipment text { fill:#102a43; font:700 4.5px Arial,sans-serif; paint-order:normal; stroke:none; writing-mode:horizontal-tb; }.fp-geographic-equipment text { font-size:4.5px; }.fp-geographic-legend { display:flex; flex-wrap:wrap; gap:7px 12px; margin:0 0 7px; color:var(--text-muted); font-size:8px; font-weight:700; }.fp-geographic-legend span { display:inline-flex; align-items:center; gap:4px; }.fp-geographic-legend span::before { width:13px; height:4px; background:currentColor; content:''; }.fp-geographic-legend .main { color:#be123c; }.fp-geographic-legend .distribution { color:#0284c7; }.fp-geographic-legend .drop { color:#d97706; }.fp-geographic-legend .olt { color:#0f766e; }.fp-geographic-legend .fdh { color:#2563eb; }.fp-geographic-legend .joint { color:#7c3aed; }.fp-geographic-note { display:block; margin-top:7px; color:var(--text-muted); font-size:7px; line-height:1.4; }
@media (max-width:720px) { .fp-cable-form-grid-wide,.fp-cable-tool-grid,.fp-planning-rules { grid-template-columns:1fr 1fr; }.fp-cable-model-summary { grid-template-columns:1fr; } }
@media (max-width:720px) { .fp-schematic-card { width:calc(100vw - 12px); }.fp-schematic-controls { grid-template-columns:1fr; }.fp-schematic-heading { display:grid; }.fp-schematic-heading > span { white-space:normal; } }
@media (max-width:460px) { .fp-cable-form-grid-wide,.fp-cable-tool-grid,.fp-planning-rules { grid-template-columns:1fr; } }

/* FTTX-specific selection and compact printable schematic output. */
.fp-fttx-selection-card { width:min(560px,calc(100vw - 28px)); }
.fp-fttx-select-table { width:100%; border-collapse:collapse; border:1px solid var(--gray-border); font-size:9px; }
.fp-fttx-select-table th,.fp-fttx-select-table td { padding:7px; border-bottom:1px solid var(--gray-border); text-align:left; }
.fp-fttx-select-table th { background:var(--gray-header); color:var(--text-muted); font-size:8px; text-transform:uppercase; }
.fp-fttx-select-table td:first-child { width:78px; text-align:center; }.fp-fttx-select-table input { accent-color:var(--cyan-primary); }
.fp-fttx-selection-card .fp-editor-dialog-body { display:grid; gap:9px; }
.fp-matrix-map-selection { margin-top:9px; }.fp-cable-connection-form { grid-template-columns:repeat(4,minmax(0,1fr)); }.fp-cable-connection-form .fp-btn { grid-column:auto; }.fp-cable-trace-form { grid-template-columns:repeat(4,minmax(0,1fr)) auto; }
.fp-schematic-card { max-height:calc(100vh - 24px); }
.fp-schematic-card .fp-editor-dialog-body { max-height:calc(100vh - 126px); }
.fp-schematic-card .fp-dialog-copy,.fp-schematic-heading small,.fp-geographic-note { display:none !important; }
.fp-schematic-heading { min-height:32px; padding:6px 8px; }.fp-schematic-heading > span { font-size:7px; }
.fp-schematic-canvas { max-height:320px; padding:6px; }.fp-schematic-svg { min-height:210px; }
.fp-schematic-result { gap:6px; }.fp-schematic-schedule { padding-top:5px; }.fp-schematic-table-wrap { max-height:150px; }
.fp-schematic-customer-heading { margin:10px 0 4px; font-size:9px; }
@media print { @page { size:landscape; margin:10mm; } .fp-schematic-card .fp-editor-dialog-body,.fp-schematic-canvas,.fp-schematic-table-wrap { max-height:none !important; overflow:visible !important; } .fp-schematic-svg { min-width:0 !important; min-height:0 !important; } .fp-geographic-note,.fp-dialog-copy { display:none !important; } }

/* R31: compact two-column HLD, commercial, distance and join tools. */
.fp-commercial-card { width:min(920px,calc(100vw - 24px)); max-height:calc(100vh - 32px); }
.fp-commercial-card > .fp-editor-dialog-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:9px 12px; overflow:auto; }
.fp-commercial-card > .fp-editor-dialog-body > label { display:grid; gap:4px; min-width:0; margin:0; color:var(--text-main); font-size:9px; font-weight:700; }
.fp-commercial-card .fp-full-row { grid-column:1 / -1; }
.fp-commercial-note { padding:8px 10px; border:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-muted); font-size:9px; line-height:1.45; }
.fp-commercial-template { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px; border:1px solid var(--gray-border); background:var(--gray-header); }
.fp-commercial-template > div { display:grid; gap:2px; color:var(--text-main); font-size:10px; }.fp-commercial-template small { color:var(--text-muted); font-size:8px; }
.fp-boq-card { width:min(1120px,calc(100vw - 24px)); }.fp-boq-result { min-width:0; }.fp-boq-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:7px; }.fp-boq-summary span { padding:7px 10px; background:var(--gray-header); border:1px solid var(--gray-border); color:var(--text-main); font-size:9px; }
.fp-boq-table-wrap { max-height:min(430px,45vh); overflow:auto; border:1px solid var(--gray-border); }.fp-boq-table-wrap table { width:100%; border-collapse:collapse; font-size:8px; color:var(--text-main); }.fp-boq-table-wrap th { position:sticky; top:0; z-index:1; padding:6px; background:var(--panel-header-bg); color:var(--panel-header-text); text-align:left; }.fp-boq-table-wrap td { padding:5px 6px; border-bottom:1px solid var(--gray-border); white-space:nowrap; }.fp-boq-table-wrap td:nth-child(2) { white-space:normal; min-width:190px; }
.fp-parcel-key-method,.fp-parcel-create-key { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 9px; padding:8px; border:1px solid var(--gray-border); background:var(--gray-header); }.fp-parcel-key-method > strong,.fp-parcel-create-key > button { grid-column:1 / -1; }.fp-parcel-create-key label { display:grid; gap:4px; margin:0; color:var(--text-main); font-size:9px; font-weight:700; }.fp-parcel-create-key[hidden] { display:none; }
@media (max-width:680px) { .fp-commercial-card > .fp-editor-dialog-body,.fp-parcel-create-key { grid-template-columns:1fr; }.fp-commercial-card .fp-full-row,.fp-parcel-create-key > button { grid-column:1; }.fp-commercial-template { align-items:stretch; flex-direction:column; } }

/* r17: every module stays inside the viewport, with compact two-column forms. */
.fp-editor-dialog { max-width:100vw; max-height:100dvh; overflow:auto; padding:12px; }
.fp-editor-dialog-card {
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    display:flex;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
}
.fp-editor-dialog-card > .fp-editor-dialog-header,
.fp-editor-dialog-card > .fp-editor-dialog-footer { flex:0 0 auto; }
.fp-editor-dialog-card > .fp-editor-dialog-body { flex:1 1 auto; min-height:0; max-width:100%; overflow:auto; }
.fp-modal-content,.fp-layer-library-card,.fp-layer-group-card,.fp-layer-style-selector-card,#layer-style-popup {
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
}
.floating-panel { max-width:calc(100% - 16px) !important; max-height:calc(100% - 16px) !important; }

.fp-cable-small-card,.fp-selection-card,.fp-projection-manager-card,.fp-parallel-create-card,.fp-geoprocess-card { width:min(760px,calc(100vw - 24px)); }
.fp-cable-small-card > .fp-editor-dialog-body,
.fp-selection-card > .fp-editor-dialog-body,
.fp-projection-manager-card > .fp-editor-dialog-body,
.fp-parallel-create-card > .fp-editor-dialog-body,
.fp-geoprocess-card > .fp-editor-dialog-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:8px 10px; }
.fp-cable-small-card > .fp-editor-dialog-body > label,
.fp-selection-card > .fp-editor-dialog-body > label,
.fp-projection-manager-card > .fp-editor-dialog-body > label,
.fp-parallel-create-card > .fp-editor-dialog-body > label,
.fp-geoprocess-card > .fp-editor-dialog-body > label { min-width:0; margin:0; }
.fp-cable-small-card > .fp-editor-dialog-body > :is(.fp-dialog-copy,.fp-cable-model-summary,.fp-planning-rules,.fp-cable-auto-progress,.fp-cable-auto-summary,.fp-cable-area-summary,.fp-selection-help,[data-extension-info]),
.fp-cable-small-card > .fp-editor-dialog-body > .fp-checkbox-label,
.fp-selection-card > .fp-editor-dialog-body > :is(.fp-selection-help,.fp-selection-expression,.fp-network-selection-status,.fp-fttx-select-table),
.fp-projection-manager-card > .fp-editor-dialog-body > :is(.fp-projection-note,section,datalist),
.fp-parallel-create-card > .fp-editor-dialog-body > :is(p,small,.fp-checkbox-label),
.fp-geoprocess-card > .fp-editor-dialog-body > :is(.fp-geoprocess-row,.fp-geoprocess-note,.fp-geoprocess-progress) { grid-column:1 / -1; }

/* Attribute Inspector and TOC use the same fixed desktop width. */
.left-dock,.right-dock { width:280px; min-width:280px; max-width:280px; flex:0 0 280px; }
.right-dock.collapsed { width:0 !important; min-width:0 !important; max-width:0 !important; flex:0 0 0 !important; }

@media (max-width:680px) {
    .fp-cable-small-card > .fp-editor-dialog-body,
    .fp-selection-card > .fp-editor-dialog-body,
    .fp-projection-manager-card > .fp-editor-dialog-body,
    .fp-parallel-create-card > .fp-editor-dialog-body,
    .fp-geoprocess-card > .fp-editor-dialog-body { grid-template-columns:1fr; }
    .left-dock { width:min(280px,72vw); min-width:min(280px,72vw); max-width:min(280px,72vw); flex-basis:min(280px,72vw); }
    .right-dock { width:min(280px,78vw); min-width:min(280px,78vw); max-width:min(280px,78vw); flex-basis:min(280px,78vw); }
}
/* r19: only panel bodies scroll. Shells stay fixed so their title bars and
   close controls cannot drift over the next section or clip toolbar flyouts. */
.floating-panel { overflow: hidden !important; }
.left-dock,.right-dock { overflow: visible !important; }
#uploaded-layers-list { overflow: visible !important; }

.fp-hidden-scroll,
.panel-body,.fp-modal-body,.fp-editor-dialog-body,.fp-schematic-result,
.fp-cable-matrix-table-wrap,.fp-schematic-table-wrap,.toc-content,
.layers-panel > .panel-content,.right-dock > .panel-content {
    overflow-x: hidden;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
    scrollbar-gutter: auto !important;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}
.fp-hidden-scroll::-webkit-scrollbar,
.panel-body::-webkit-scrollbar,.fp-modal-body::-webkit-scrollbar,
.fp-editor-dialog-body::-webkit-scrollbar,.fp-schematic-result::-webkit-scrollbar,
.fp-cable-matrix-table-wrap::-webkit-scrollbar,.fp-schematic-table-wrap::-webkit-scrollbar,
.toc-content::-webkit-scrollbar,.layers-panel > .panel-content::-webkit-scrollbar,
.right-dock > .panel-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}
.fp-hidden-scroll::-webkit-scrollbar-button,
.panel-body::-webkit-scrollbar-button,.fp-modal-body::-webkit-scrollbar-button,
.fp-editor-dialog-body::-webkit-scrollbar-button,.fp-schematic-result::-webkit-scrollbar-button,
.fp-cable-matrix-table-wrap::-webkit-scrollbar-button,.fp-schematic-table-wrap::-webkit-scrollbar-button,
.toc-content::-webkit-scrollbar-button,.layers-panel > .panel-content::-webkit-scrollbar-button,
.right-dock > .panel-content::-webkit-scrollbar-button {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* r34: fixed inspector/table viewport, invisible scrolling, readable scale. */
.workspace,.left-dock,.right-dock,.layers-panel,.right-dock > .panel-content { min-height:0; }
.left-dock,.right-dock { height:100%; max-height:100%; }
.layers-panel,.right-dock { display:flex; flex-direction:column; }
.layers-panel > .panel-content,.right-dock > .panel-content { flex:1 1 auto; min-height:0; max-height:calc(100dvh - var(--header-height) - var(--status-height) - 24px); overscroll-behavior:contain; }
#fp-attribute-panel { max-height:min(46dvh,430px); }
#fp-attribute-panel > div:last-child { min-height:0; overflow:auto !important; overscroll-behavior:contain; }
body.light-theme .status-scale-select,body.light-theme .status-scale-select option { background:#fff !important; color:#0f172a !important; }

.fp-selected-feature-summary { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0 0 6px; padding:6px; border:1px solid var(--gray-border); background:var(--gray-header); }
.fp-selected-feature-summary > span { min-width:0; }
.fp-selected-feature-summary b,.fp-selected-feature-summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* r35: independent legend, wheel-only inspector scrolling, scalable schematics. */
.legend-dock {
    position:relative; display:flex; flex:0 0 220px; width:220px; min-width:220px; max-width:220px;
    height:100%; max-height:100%; min-height:0; flex-direction:column; overflow:visible;
    border-left:1px solid var(--gray-border); background:var(--gray-panel); box-shadow:var(--gloss-shadow); z-index:499;
    transition:width .25s ease,min-width .25s ease,flex-basis .25s ease;
}
.legend-dock.collapsed { width:0!important; min-width:0!important; max-width:0!important; flex-basis:0!important; border-left:0!important; }
.legend-dock.collapsed > .panel-header,.legend-dock.collapsed > .panel-content { display:none!important; }
.legend-dock > .panel-header { display:flex; flex:0 0 34px; min-height:34px; align-items:center; justify-content:space-between; padding:0 10px; overflow:hidden; border-bottom:1px solid var(--gray-border); background:var(--gray-header); color:var(--text-main); font-size:11px; font-weight:700; }
.legend-dock > .panel-header > span { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.legend-dock > .panel-content,.right-dock > .panel-content { flex:1 1 auto; height:0; min-height:0; max-height:none!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; scrollbar-width:none!important; -ms-overflow-style:none; }
.legend-dock > .panel-content { padding:8px; }
.legend-dock > .panel-content::-webkit-scrollbar,.legend-dock > .panel-content::-webkit-scrollbar-button { display:none!important; width:0!important; height:0!important; }
.right-dock .attribute-info-box { min-height:0; margin-bottom:0; }
.right-dock .attribute-table { width:100%; table-layout:fixed; }
.right-dock .attribute-table th,.right-dock .attribute-table td { overflow-wrap:anywhere; word-break:break-word; }
@media(max-width:900px){.legend-dock{position:absolute;right:0;top:0;bottom:0;width:min(220px,66vw);min-width:min(220px,66vw);max-width:min(220px,66vw);}}

.fp-schematic-symbol { transform-box:view-box; transform-origin:center; }
.fp-geographic-toolbar [data-schematic-print-view] { display:inline-flex; align-items:center; gap:4px; margin-left:4px; min-height:24px; padding:2px 7px; border:1px solid #94a3b8; background:#fff; color:#263746; cursor:pointer; font-size:8px; font-weight:700; }

/* Classic ArcGIS-style editor: one compact command row and drop-down palettes. */
.fp-horizontal-editor { width:max-content; min-width:0; max-width:calc(100vw - 24px); border-radius:0; border-color:#526171; background:#e8edf1; color:#172230; }
.fp-editor-dragbar { height:18px; border-radius:0; background:linear-gradient(#74818b,#46535e); }
.fp-editor-ribbon-row { width:max-content; max-width:calc(100vw - 26px); min-height:31px; flex-wrap:nowrap; gap:1px; padding:1px 2px; background:linear-gradient(#f7f9fa,#d9e0e5); }
.fp-horizontal-editor .fp-editor-command { height:27px; border-radius:0; border-color:transparent; background:transparent; color:#172230; }
.fp-horizontal-editor .fp-editor-command:hover,.fp-horizontal-editor .fp-editor-command.active { border-color:#7ba4bf; background:#cbe7f5; color:#102b3a; }
.fp-horizontal-editor .fp-editor-target-wrap { min-width:160px; margin:0 1px; }
.fp-horizontal-editor .fp-editor-target-wrap .fp-input { width:160px; min-width:160px; height:27px; border-radius:0; background:#fff; color:#172230; }
.fp-horizontal-editor .fp-editor-menu-tool { min-width:29px; width:29px; grid-template-columns:1fr; padding:1px; }
.fp-horizontal-editor .fp-editor-menu-tool > span { display:none; }
.fp-horizontal-editor .fp-editor-menu-tool::after { position:absolute; right:1px; bottom:0; content:'\25BE'; font-size:7px; color:#334155; }
.fp-horizontal-editor .fp-editor-tools-wrap { position:relative; }
.fp-horizontal-editor .fp-menu-command { height:27px; border-right:1px solid #9aa6af; }
body.light-theme .fp-horizontal-editor { background:#e8edf1; color:#172230; }
body.light-theme .fp-horizontal-editor .fp-editor-ribbon-row { background:linear-gradient(#f7f9fa,#d9e0e5); }
.fp-selected-feature-summary b { color:var(--text-main); font-size:9px; }.fp-selected-feature-summary small { margin-top:2px; color:var(--text-muted); font-size:7px; }
.fp-feature-rule-link { flex:0 0 auto; min-height:23px; padding:0 6px; border:1px solid var(--gray-border); border-radius:0; background:var(--gray-panel); color:var(--cyan-primary); cursor:pointer; font:700 8px/1 Arial,sans-serif; }
.fp-inspector-editable { cursor:text; }.fp-inspector-editable:hover { box-shadow:inset 0 0 0 1px var(--cyan-primary); background:rgba(20,171,217,.08); }

.fp-feature-rules-card,.fp-asset-search-card { width:min(720px,calc(100vw - 24px)); }
.fp-feature-rule-group { margin:0 0 8px; border:1px solid var(--gray-border); background:var(--gray-panel); }
.fp-feature-rule-group > header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border-bottom:1px solid var(--gray-border); background:var(--gray-header); }
.fp-feature-rule-group header b { color:var(--text-main); font-size:9px; }.fp-feature-rule-group header small { color:var(--text-muted); font-size:7px; }
.fp-feature-rule-group article { display:grid; grid-template-columns:minmax(130px,.35fr) minmax(0,1fr); gap:8px; padding:7px 8px; border-bottom:1px solid var(--gray-border); }.fp-feature-rule-group article:last-child { border-bottom:0; }
.fp-feature-rule-group article span { color:var(--cyan-primary); font-size:8px; font-weight:700; }.fp-feature-rule-group article p { margin:0; color:var(--text-main); font-size:9px; line-height:1.45; }
.fp-rules-loading,.fp-rules-empty { display:flex; align-items:flex-start; gap:8px; padding:12px; border:1px solid var(--gray-border); color:var(--text-muted); font-size:9px; }
.fp-label-color-input { min-height:28px; padding:2px !important; }

.fp-asset-search-controls { display:grid; grid-template-columns:minmax(0,1fr) 170px auto; align-items:end; gap:7px; }.fp-asset-search-controls label { display:grid; gap:4px; margin:0; }
.fp-asset-search-results { display:grid; gap:4px; max-height:min(52dvh,420px); margin-top:9px; overflow-y:auto; scrollbar-width:none; }.fp-asset-search-results::-webkit-scrollbar { display:none; }
.fp-asset-search-result { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; gap:7px; width:100%; padding:7px; border:1px solid var(--gray-border); border-radius:0; background:var(--gray-header); color:var(--text-main); text-align:left; cursor:pointer; }.fp-asset-search-result:hover { border-color:var(--cyan-primary); background:var(--gray-hover); }
.fp-asset-search-result > i { color:var(--cyan-primary); }.fp-asset-search-result b,.fp-asset-search-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.fp-asset-search-result b { font-size:9px; }.fp-asset-search-result small { margin-top:2px; color:var(--text-muted); font-size:7px; }
@media(max-width:620px){.fp-asset-search-controls{grid-template-columns:1fr}.fp-feature-rule-group article{grid-template-columns:1fr}}

/* Keep the basemap picker outside the toolbar/dock clipping context. */
.toolbar-flyout-menu.show {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Keep the editor/drawing close button inside its own title bar. */
.fp-editor-dragbar { position: relative; z-index: 2; overflow: hidden; }
.fp-editor-dragbar > div { flex: 0 0 auto; margin-left: auto; }
.fp-editor-dragbar .fp-editor-close {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
}

.fp-editor-dialog-card,.fp-modal-content { max-height: calc(100dvh - 66px)!important; max-width: calc(100vw - 24px)!important; }
.fp-editor-dialog-body,.fp-modal-body { min-height: 0; }
.fp-cable-small-card .fp-editor-dialog-body,
.fp-cable-designer-card .fp-editor-dialog-body,
.fp-cable-matrix-card .fp-editor-dialog-body,
.fp-schematic-card .fp-editor-dialog-body,
.fp-network-import-card .fp-editor-dialog-body,
.fp-projection-manager-card .fp-editor-dialog-body { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-content:start; }
.fp-cable-small-card .fp-dialog-copy,.fp-cable-small-card .fp-selection-help,.fp-cable-small-card [data-auto-progress],.fp-cable-small-card [data-auto-summary],
.fp-cable-designer-card .fp-dialog-copy,.fp-cable-designer-card section,.fp-cable-matrix-card .fp-selection-help,.fp-cable-matrix-card section,.fp-cable-matrix-card .fp-cable-matrix-table-wrap,
.fp-schematic-card .fp-dialog-copy,.fp-schematic-card .fp-schematic-controls,.fp-schematic-card .fp-schematic-result,
.fp-network-import-card .fp-dialog-copy,.fp-network-import-card section,.fp-projection-manager-card .fp-projection-note,.fp-projection-manager-card section { grid-column:1/-1; }

#panel-measurement .panel-body button,#panel-search .panel-body button,#panel-shortest-path .panel-body button,
.floating-panel .btn-primary,.floating-panel .btn-danger,.floating-panel .btn-secondary {
    min-height:28px!important;border-radius:0!important;border:1px solid #71818d!important;
    background:#d8dde1!important;color:#17212b!important;font-weight:650!important;
}
body:not(.light-theme) #panel-measurement .panel-body button,body:not(.light-theme) #panel-search .panel-body button,
body:not(.light-theme) #panel-shortest-path .panel-body button,body:not(.light-theme) .floating-panel .btn-primary,
body:not(.light-theme) .floating-panel .btn-danger,body:not(.light-theme) .floating-panel .btn-secondary {
    background:#236b82!important;border-color:#58b6d2!important;color:#fff!important;
}
.fp-geographic-toolbar{display:flex;justify-content:flex-end;gap:4px;margin-bottom:5px;position:sticky;top:0;z-index:4}
.fp-geographic-toolbar button{height:25px;min-width:30px;border:1px solid #71818d;border-radius:0;background:#e8edf0;color:#17212b;cursor:pointer;font-weight:700}
.fp-geographic-canvas{overflow:auto}.fp-geographic-svg{min-width:560px;transition:width .15s ease}

@media (max-width:760px){
    .fp-cable-small-card .fp-editor-dialog-body,.fp-cable-designer-card .fp-editor-dialog-body,
    .fp-cable-matrix-card .fp-editor-dialog-body,.fp-schematic-card .fp-editor-dialog-body,
    .fp-network-import-card .fp-editor-dialog-body,.fp-projection-manager-card .fp-editor-dialog-body{grid-template-columns:1fr}
}

/* r21: account menu, themed search, TOC group visibility and planning menus. */
#user-account-menu { position: relative; flex: 0 0 auto; }
#user-account-menu > .user-btn { min-height: 30px; padding: 3px 8px; }
.fp-user-avatar {
    display: inline-grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--gray-border-bright);
    border-radius: 50%;
    background: var(--gray-header);
    color: var(--cyan-primary);
}
.fp-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
#user-account-dropdown {
    top: calc(100% + 2px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 205px;
    z-index: 2147483200 !important;
}
#user-account-dropdown [hidden] { display: none !important; }
#user-account-menu.is-open > #user-account-dropdown { display: block !important; }

#panel-search .search-input-wrapper {
    display: grid;
    grid-template-columns: minmax(0,1fr) 32px;
    gap: 0;
    width: 100%;
}
#panel-search #search-input {
    width: 100%;
    height: 30px !important;
    min-height: 30px !important;
    border: 1px solid var(--gray-border-bright) !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: var(--gray-panel) !important;
    color: var(--text-main) !important;
}
#panel-search #btn-execute-search {
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 1px solid var(--gray-border-bright) !important;
    border-radius: 0 !important;
    background: var(--gray-header) !important;
    color: var(--cyan-primary) !important;
}
#panel-search #btn-execute-search:hover { background: var(--cyan-primary) !important; color: #fff !important; }
#panel-search .panel-select { width: 100%; border-radius: 0 !important; background: var(--gray-panel) !important; color: var(--text-main) !important; }
body.light-theme #panel-search #search-input,body.light-theme #panel-search .panel-select { background: #fff !important; color: #17212b !important; }
body.light-theme #panel-search #btn-execute-search { background: #d8dde1 !important; color: #17212b !important; }

.fp-fttx-planning-menu { min-width: 205px; }
.fp-fttx-submenu,.fp-fttx-project-submenu,.fp-fo-workflow-submenu {
    width: min(285px,calc(100vw - 24px));
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fp-fttx-submenu::-webkit-scrollbar,.fp-fttx-submenu::-webkit-scrollbar-button,.fp-fttx-project-submenu::-webkit-scrollbar,.fp-fttx-project-submenu::-webkit-scrollbar-button,.fp-fo-workflow-submenu::-webkit-scrollbar,.fp-fo-workflow-submenu::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

.toc-group-check { width: 12px; height: 12px; flex: 0 0 12px; margin: 0; accent-color: var(--cyan-primary); cursor: pointer; }
.toc-group-check:disabled { cursor: default; opacity: .45; }
.toc-layer-item .geometry-symbol { cursor: pointer; outline: none; }
.toc-layer-item .geometry-symbol:hover,
.toc-layer-item .geometry-symbol:focus-visible { filter: drop-shadow(0 0 3px var(--cyan-primary)); }

/* r41: keep the TOC edge control visible and make its direction unambiguous. */
#left-dock > #btn-collapse-left.dock-toggle {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    right:-18px !important;
    top:50% !important;
    width:18px !important;
    min-width:18px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    border-radius:0 3px 3px 0 !important;
    z-index:2147481000 !important;
}
#left-dock > #btn-collapse-left.dock-toggle i { display:block !important; font-size:10px !important; line-height:1 !important; }

/* Measurement actions stay inside their buttons at either desktop theme. */
#panel-measurement .btn-toggle-group {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px !important;
    width:100% !important;
}
#panel-measurement .panel-body button {
    box-sizing:border-box !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    min-width:0 !important;
    max-width:100% !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 8px !important;
    overflow:hidden !important;
    color:var(--text-main) !important;
    font:600 10px/1 Arial,sans-serif !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
}
#panel-measurement #btn-finish-measure,
#panel-measurement #btn-clear-measure { width:100% !important; margin-top:5px !important; }
body:not(.light-theme) #panel-measurement .panel-body button { color:#fff !important; }

/* Compact system toast follows the current TrouverSpatial light/dark theme. */
body #fp-upload-toast.fp-system-toast {
    position:fixed!important;
    inset:auto auto 18px 50%!important;
    display:inline-flex!important;
    box-sizing:border-box!important;
    align-items:center!important;
    width:fit-content!important;
    min-width:0!important;
    max-width:min(560px,calc(100vw - 28px))!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(120px,calc(100dvh - 36px))!important;
    margin:0!important;
    padding:7px 11px!important;
    overflow:hidden!important;
    border:1px solid var(--gray-border-bright)!important;
    border-left:3px solid var(--cyan-primary)!important;
    border-radius:2px!important;
    background:var(--gray-panel)!important;
    color:var(--text-main)!important;
    font-family:inherit!important;
    font-size:11px!important;
    font-weight:600!important;
    line-height:1.35!important;
    white-space:normal!important;
    transform:translateX(-50%)!important;
}
body #fp-upload-toast.fp-system-toast > span { display:block; min-width:0; max-height:90px; overflow:hidden; overflow-wrap:anywhere; }
body #fp-upload-toast.fp-system-toast > i { flex:0 0 auto; color:var(--cyan-primary)!important; }
body #fp-upload-toast.fp-system-toast.is-success { border-left-color:#22a06b!important; }
body #fp-upload-toast.fp-system-toast.is-success > i { color:#22a06b!important; }
body #fp-upload-toast.fp-system-toast.is-error { border-left-color:#d64545!important; }
body #fp-upload-toast.fp-system-toast.is-error > i { color:#d64545!important; }
body #fp-upload-toast.fp-system-toast.is-loading { border-left-color:var(--cyan-primary)!important; }
body.light-theme #fp-upload-toast.fp-system-toast { background:#f5f6f7!important; color:#17212b!important; border-color:#aeb7bf!important; }
body.light-theme #fp-upload-toast.fp-system-toast.is-success { border-left-color:#148456!important; }
body.light-theme #fp-upload-toast.fp-system-toast.is-error { border-left-color:#c93636!important; }
body.light-theme #fp-upload-toast.fp-system-toast.is-loading,
body.light-theme #fp-upload-toast.fp-system-toast.is-info,
body.light-theme #fp-upload-toast.fp-system-toast.is-warning { border-left-color:#327f9f!important; }

/* r22: drawing-first schematic, drag-to-pan trace viewer and compact trace distances. */
.fp-schematic-card {
    width: calc(100vw - 24px) !important;
    height: calc(100dvh - 66px) !important;
    max-width: none !important;
    max-height: none !important;
}
.fp-schematic-card > .fp-editor-dialog-body {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    max-height: none !important;
    overflow: hidden !important;
    gap: 6px;
}
.fp-schematic-card .fp-schematic-controls {
    flex: 0 0 auto;
    grid-template-columns: minmax(190px,260px) minmax(210px,330px) auto;
    padding: 5px 7px;
}
.fp-schematic-card .fp-schematic-result { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; overflow:hidden; }
.fp-schematic-card .fp-schematic-heading { flex:0 0 auto; min-height:28px; padding:4px 7px; }
.fp-schematic-card .fp-schematic-canvas { display:flex; flex:1 1 auto; min-height:0; max-height:none; overflow:hidden; flex-direction:column; padding:5px; }
.fp-geographic-toolbar { flex:0 0 auto; align-items:center; justify-content:flex-start; }
.fp-geographic-toolbar > span { margin-left:5px; color:#475569; font-size:8px; font-weight:600; }
.fp-geographic-legend { flex:0 0 auto; }
.fp-geographic-viewport { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; border:1px solid #9aa8b4; background:#f8fafc; cursor:grab; touch-action:none; user-select:none; }
.fp-geographic-viewport.is-panning { cursor:grabbing; }
.fp-geographic-sheet { position:absolute; inset:0; width:100%; height:100%; transform-origin:0 0; will-change:transform; }
.fp-geographic-sheet .fp-geographic-svg { width:100%; height:100%; min-width:0; min-height:0; }
.fp-schematic-details-card { width:min(1180px,calc(100vw - 28px)); height:min(760px,calc(100dvh - 70px)); }
.fp-schematic-details-card > .fp-editor-dialog-body { display:block !important; overflow:auto !important; }
.fp-trace-result-heading,.fp-trace-path-detail > span { display:flex; align-items:center; gap:7px; }
.fp-trace-result-heading { justify-content:space-between; }
.fp-trace-result-heading .fp-btn { min-height:24px; height:24px; padding:0 7px; font-size:8px; }
.fp-trace-path-detail { display:grid; gap:2px; padding:5px; border:1px solid var(--gray-border); background:var(--gray-panel); }
.fp-trace-path-detail > span > b:last-child { margin-left:auto; white-space:nowrap; color:var(--cyan-primary); }
@media (max-width:720px) {
    .fp-schematic-card { width:calc(100vw - 8px)!important; height:calc(100dvh - 54px)!important; }
    .fp-schematic-card .fp-schematic-controls { grid-template-columns:1fr; }
}
.fp-multi-layer-delete-card { width: min(560px, calc(100vw - 30px)); }
.fp-multi-layer-delete-card .fp-editor-dialog-body { max-height: min(64dvh, 560px); overflow: auto; }
.fp-multi-layer-select-all,.fp-multi-layer-delete-list > label { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--text-main); font-size: 10px; text-transform: none; letter-spacing: 0; }
.fp-multi-layer-delete-list { display: grid; gap: 3px; margin-top: 6px; }
.fp-multi-layer-delete-list > label { min-height: 40px; padding: 6px 9px; border: 1px solid var(--gray-border); background: rgba(15,23,42,.13); cursor: pointer; }
.fp-multi-layer-delete-list > label:hover { border-color: var(--cyan-primary); background: var(--gray-hover); }
.fp-multi-layer-delete-list input,.fp-multi-layer-select-all input { flex: 0 0 auto; accent-color: var(--cyan-primary); }
.fp-multi-layer-delete-list span { min-width: 0; }
.fp-multi-layer-delete-list b,.fp-multi-layer-delete-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-multi-layer-delete-list small { margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.fp-multi-layer-delete-card .fp-editor-dialog-footer > span { margin-right: auto; color: var(--text-muted); font-size: 9px; }
.fp-permanent-delete-choice { display:flex; align-items:center; gap:8px; margin-top:8px; padding:7px 9px; border:1px solid #b45353; color:var(--text-main); font-size:9px; font-weight:650; text-transform:none; letter-spacing:0; }
.fp-cable-matrix-card { width:min(860px,calc(100vw - 24px))!important; max-height:calc(100dvh - 54px)!important; }
.fp-cable-matrix-card > .fp-editor-dialog-body { display:block!important; overflow:auto!important; }
.fp-cable-matrix-card .fp-cable-connection-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fp-cable-matrix-card .fp-cable-connection-form > .fp-btn { min-width:0; }
.fp-cable-matrix-card .fp-trace-result-heading > span { display:flex; gap:4px; }
@media (max-width:700px){.fp-cable-matrix-card .fp-cable-connection-form{grid-template-columns:repeat(2,minmax(0,1fr));}}

.fp-extension-selection-status { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
.fp-extension-selection-status > span { display:flex; align-items:center; gap:6px; min-width:0; padding:7px 9px; border:1px solid var(--gray-border); background:var(--gray-hover); color:var(--text-main); font-size:10px; }
.fp-extension-selection-status i { color:var(--cyan-primary); }
.fp-extension-map-selection { position:fixed; left:50%; bottom:22px; z-index:10050; display:flex; align-items:center; gap:9px; max-width:calc(100vw - 30px); padding:8px 10px; border:1px solid var(--cyan-primary); background:var(--gray-panel); color:var(--text-main); box-shadow:0 8px 26px rgba(0,0,0,.32); transform:translateX(-50%); }
.fp-extension-map-selection span,.fp-extension-map-selection small { white-space:nowrap; font-size:10px; }
.fp-extension-map-selection small { color:var(--text-muted); }
@media (max-width:760px) { .fp-extension-selection-status { grid-template-columns:1fr; } .fp-extension-map-selection { flex-wrap:wrap; width:calc(100vw - 24px); } }

/* r38: one right-side accordion. Legend opens down by default and the
   Attribute Inspector opens upward from its permanently visible lower bar. */
.right-tools-dock {
    --fp-right-accordion-header-height:20px;
    position:relative;
    z-index:500;
    display:flex;
    flex:0 0 280px;
    width:280px;
    min-width:280px;
    max-width:280px;
    height:100%;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
    border-left:1px solid var(--gray-border);
    background:var(--gray-panel);
    box-shadow:var(--gloss-shadow);
}
.right-tools-dock > .fp-right-accordion {
    position:relative;
    display:flex!important;
    flex:0 0 var(--fp-right-accordion-header-height);
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:var(--fp-right-accordion-header-height)!important;
    max-height:none!important;
    overflow:hidden!important;
    border:0!important;
    background:var(--gray-panel);
    box-shadow:none;
    transition:flex-basis .28s ease,flex-grow .28s ease,background-color .2s ease;
}
.right-tools-dock > .legend-dock { flex-direction:column-reverse; }
.right-tools-dock > .right-dock { flex-direction:column-reverse; }
.right-tools-dock > .fp-right-accordion.is-open { flex:1 1 auto; }
.right-tools-dock .fp-right-accordion > .panel-header {
    position:relative;
    z-index:2;
    display:flex!important;
    flex:0 0 var(--fp-right-accordion-header-height)!important;
    width:100%;
    height:var(--fp-right-accordion-header-height)!important;
    min-height:var(--fp-right-accordion-header-height)!important;
    max-height:var(--fp-right-accordion-header-height)!important;
    align-items:center;
    justify-content:space-between;
    padding:0 4px 0 6px!important;
    overflow:hidden;
    border:0;
    border-bottom:1px solid var(--gray-border);
    border-radius:0;
    background:var(--gray-header);
    color:var(--text-main);
    cursor:pointer;
    user-select:none;
}
.right-tools-dock > .right-dock > .panel-header { border-top:1px solid var(--gray-border); border-bottom:0; }
.right-tools-dock .fp-right-accordion > .panel-header:hover,
.right-tools-dock .fp-right-accordion > .panel-header:focus-visible,
.right-tools-dock .fp-right-accordion.is-open > .panel-header { background:var(--compact-tool-header); color:var(--compact-tool-header-text); outline:0; }
.right-tools-dock .fp-right-accordion > .panel-header > span { display:flex; min-width:0; align-items:center; gap:6px; overflow:hidden; font-size:10px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.right-tools-dock .fp-right-accordion > .panel-header > span i { color:var(--cyan-primary); }
.right-tools-dock .fp-accordion-toggle {
    display:grid;
    flex:0 0 16px;
    width:16px;
    height:16px;
    padding:0;
    place-items:center;
    border:0;
    background:transparent;
    color:inherit;
    pointer-events:none;
    font-size:9px;
}
.right-tools-dock .fp-right-accordion > .panel-content {
    display:block!important;
    flex:1 1 auto;
    width:100%;
    height:auto!important;
    min-height:0;
    max-height:none!important;
    padding:8px;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .2s ease,transform .28s ease,padding .28s ease,visibility 0s;
    scrollbar-width:none!important;
}
.right-tools-dock > .right-dock:not(.is-open) > .panel-content { transform:translateY(8px); }
.right-tools-dock > .legend-dock:not(.is-open) > .panel-content { transform:translateY(-8px); }
.right-tools-dock > .fp-right-accordion:not(.is-open) > .panel-content {
    flex:0 0 0;
    height:0!important;
    min-height:0!important;
    padding-top:0;
    padding-bottom:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease,transform .28s ease,padding .28s ease,visibility 0s linear .28s;
}
.right-tools-dock .fp-right-accordion > .panel-content::-webkit-scrollbar,
.right-tools-dock .fp-right-accordion > .panel-content::-webkit-scrollbar-button { display:none!important; width:0!important; height:0!important; }
.fp-horizontal-editor .fp-merge-command {
    display:grid;
    grid-template-columns:13px auto;
    width:auto;
    min-width:54px;
    padding:2px 5px;
    gap:4px;
    border-left:1px solid #9aa6af;
}
.fp-horizontal-editor .fp-merge-command > span { display:inline; font-size:8px; }
.fp-horizontal-editor .fp-merge-command:disabled { opacity:.38; cursor:not-allowed; }
.fp-horizontal-editor .fp-merge-command.is-ready { border-color:#3692b8; background:#cbe7f5; color:#102b3a; }
@media(max-width:900px){
    .right-tools-dock { position:absolute; top:0; right:0; bottom:0; width:min(280px,78vw); min-width:min(280px,78vw); max-width:min(280px,78vw); }
    .right-tools-dock > .legend-dock { position:relative; inset:auto; }
}

/* r44 direct map/coordinate endpoint capture */
.fp-fo-map-endpoint {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(105px, .65fr) minmax(105px, .65fr) auto;
    align-items: end;
    gap: 7px;
    padding: 8px;
    border: 1px solid var(--gray-border-bright);
    background: var(--gray-panel);
}
.fp-fo-map-endpoint > div { align-self: center; min-width: 0; }
.fp-fo-map-endpoint > div b,
.fp-fo-map-endpoint > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-fo-map-endpoint > div small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.fp-fo-map-endpoint label { min-width: 0; }
.fp-fo-map-endpoint .fp-btn { min-height: 30px; white-space: nowrap; }
.fp-picking-route-endpoint,
.fp-picking-route-endpoint * { cursor: crosshair !important; }
@media (max-width: 760px) {
    .fp-fo-map-endpoint { grid-template-columns: 1fr 1fr; }
    .fp-fo-map-endpoint > div { grid-column: 1 / -1; }
}

/* r45 layer-filtered drag selection, overlap chooser and inspector picker. */
.fp-drag-selection-card { width:min(580px,calc(100vw - 24px)); }
.fp-drag-selection-card .fp-editor-dialog-body { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fp-drag-selection-card .fp-selection-help,
.fp-drag-selection-card .fp-drag-select-all,
.fp-drag-selection-card .fp-drag-layer-list { grid-column:1 / -1; }
.fp-drag-layer-list {
    display:grid; grid-template-columns:1fr 1fr; max-height:min(36vh,310px); overflow:auto;
    border:1px solid var(--gray-border); background:var(--gray-panel); scrollbar-width:none;
}
.fp-drag-layer-list::-webkit-scrollbar { width:0; height:0; }
.fp-drag-layer-list > label { display:flex; min-width:0; align-items:center; gap:8px; padding:7px 8px; border-bottom:1px solid var(--gray-border); cursor:pointer; }
.fp-drag-layer-list > label:nth-child(odd) { border-right:1px solid var(--gray-border); }
.fp-drag-layer-list input { flex:0 0 auto; accent-color:var(--cyan-primary); }
.fp-drag-layer-list span { min-width:0; }
.fp-drag-layer-list b,.fp-drag-layer-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-drag-layer-list b { color:var(--text-main); font-size:9px; }.fp-drag-layer-list small { margin-top:2px; color:var(--text-muted); font-size:7px; }

.fp-overlap-picker-popup { z-index:1200 !important; }
.fp-overlap-picker-popup .leaflet-popup-content-wrapper { padding:0; border:1px solid var(--gray-border-bright); border-radius:0; background:var(--gray-panel); color:var(--text-main); box-shadow:0 8px 24px rgba(0,0,0,.38); }
.fp-overlap-picker-popup .leaflet-popup-content { width:auto !important; margin:0; }
.fp-overlap-picker-popup .leaflet-popup-tip { background:var(--gray-panel); }
.fp-overlap-picker-popup .leaflet-popup-close-button { top:3px; right:3px; z-index:2; color:var(--text-main) !important; }
.fp-overlap-picker-title { display:flex; align-items:center; gap:7px; min-height:34px; padding:5px 28px 5px 8px; border-bottom:1px solid var(--gray-border); background:var(--gray-header); }
.fp-overlap-picker-title > i { color:var(--cyan-primary); }.fp-overlap-picker-title span,.fp-overlap-picker-title b,.fp-overlap-picker-title small { display:block; min-width:0; }
.fp-overlap-picker-title b { font-size:9px; }.fp-overlap-picker-title small { margin-top:2px; color:var(--text-muted); font-size:7px; }
.fp-overlap-picker-list { max-height:220px; overflow:auto; scrollbar-width:none; }.fp-overlap-picker-list::-webkit-scrollbar { width:0; height:0; }
.fp-overlap-picker-list button { display:flex; width:100%; min-width:240px; align-items:center; gap:7px; padding:7px 8px; border:0; border-bottom:1px solid var(--gray-border); background:var(--gray-panel); color:var(--text-main); text-align:left; cursor:pointer; }
.fp-overlap-picker-list button:last-child { border-bottom:0; }.fp-overlap-picker-list button:hover,.fp-overlap-picker-list button:focus { outline:0; background:var(--gray-hover); }
.fp-overlap-picker-list button > i { flex:0 0 14px; color:var(--cyan-primary); text-align:center; }.fp-overlap-picker-list button span { min-width:0; }
.fp-overlap-picker-list button b,.fp-overlap-picker-list button small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-overlap-picker-list button b { font-size:9px; }.fp-overlap-picker-list button small { margin-top:2px; color:var(--text-muted); font-size:7px; }

.fp-inspector-selection-picker { margin:0 0 6px; padding:6px; border:1px solid var(--gray-border); background:var(--gray-panel); }
.fp-inspector-selection-picker[hidden] { display:none !important; }
.fp-inspector-selection-picker label { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0 0 4px; color:var(--text-muted); font-size:8px; font-weight:700; }
.fp-inspector-selection-picker label small { color:var(--cyan-primary); font-size:7px; }
.fp-inspector-selection-picker select { width:100%; min-width:0; height:27px; padding:3px 22px 3px 6px; border-radius:0; font-size:8px; text-overflow:ellipsis; }
@media (max-width:560px) { .fp-drag-selection-card .fp-editor-dialog-body,.fp-drag-layer-list { grid-template-columns:1fr; }.fp-drag-layer-list > label:nth-child(odd) { border-right:0; } }

/* r46 combined point/drag selection, dark editor and fixed accordion headers. */
.fp-selection-mode-row { display:grid; grid-column:1 / -1; grid-template-columns:1fr 1fr; gap:6px; }
.fp-selection-mode-row > label { display:flex; min-width:0; align-items:center; gap:7px; min-height:44px; margin:0; padding:6px 8px; border:1px solid var(--gray-border); background:var(--gray-panel); cursor:pointer; text-transform:none; }
.fp-selection-mode-row > label:has(input:checked) { border-color:var(--cyan-primary); background:rgba(20,171,217,.12); }
.fp-selection-mode-row input { flex:0 0 auto; accent-color:var(--cyan-primary); }
.fp-selection-mode-row span,.fp-selection-mode-row b,.fp-selection-mode-row small { display:block; min-width:0; }
.fp-selection-mode-row span { display:grid; grid-template-columns:16px 1fr; align-items:center; column-gap:5px; }
.fp-selection-mode-row span i { grid-row:1 / 3; color:var(--cyan-primary); text-align:center; }
.fp-selection-mode-row b { color:var(--text-main); font-size:9px; }.fp-selection-mode-row small { color:var(--text-muted); font-size:7px; }

.right-tools-dock > .legend-dock,
.right-tools-dock > .right-dock { flex-direction:column!important; }
.right-tools-dock .fp-right-accordion > .panel-header { position:sticky!important; top:0; z-index:4; }

.fp-horizontal-editor .fp-editor-ribbon-row { align-items:center; }
.fp-horizontal-editor .fp-editor-ribbon-row > *,
.fp-horizontal-editor .fp-editor-command-bar,
.fp-horizontal-editor .fp-editor-tools-wrap,
.fp-horizontal-editor .fp-editor-options-wrap,
.fp-horizontal-editor .fp-horizontal-operation-actions { align-self:center; margin-top:0; margin-bottom:0; }
.fp-horizontal-editor .fp-editor-command,
.fp-horizontal-editor .fp-editor-target-wrap .fp-input { box-sizing:border-box; vertical-align:middle; }
body:not(.light-theme) .fp-horizontal-editor { border-color:#526171; background:#17212b; color:#e5edf4; }
body:not(.light-theme) .fp-horizontal-editor .fp-editor-ribbon-row { background:linear-gradient(#263440,#18232d); }
body:not(.light-theme) .fp-horizontal-editor .fp-editor-command { border-color:transparent; background:transparent; color:#d6e0e8; }
body:not(.light-theme) .fp-horizontal-editor .fp-editor-command:hover,
body:not(.light-theme) .fp-horizontal-editor .fp-editor-command.active,
body:not(.light-theme) .fp-horizontal-editor .fp-editor-command[aria-expanded="true"] { border-color:#4aa8c9; background:#24495a; color:#8be2ff; }
body:not(.light-theme) .fp-horizontal-editor .fp-editor-target-wrap .fp-input { border-color:#4b5b68; background:#101820; color:#e5edf4; }
body:not(.light-theme) .fp-horizontal-editor .fp-editor-menu-tool::after { color:#b9c7d2; }
body:not(.light-theme) .fp-horizontal-editor .fp-merge-command.is-ready { border-color:#4aa8c9; background:#24495a; color:#8be2ff; }
@media(max-width:560px){.fp-selection-mode-row{grid-template-columns:1fr;}}

/* r54 long-distance basemap road routing for point-to-point planning. */
.fp-route-control-panel { display:grid; grid-column:1 / -1; grid-template-columns:1fr 1fr auto; gap:7px 9px; align-items:end; padding:9px; border:1px solid var(--gray-border); background:var(--gray-panel); }
.fp-route-control-panel[hidden] { display:none !important; }
.fp-fo-route-grid .fp-field-disabled { opacity:.45; }
.fp-route-control-panel > strong,.fp-route-control-actions,.fp-route-control-list,.fp-route-control-panel > small { grid-column:1 / -1; }
.fp-route-control-panel > strong { display:flex; align-items:center; gap:6px; color:var(--text-main); font-size:9px; }
.fp-route-control-panel > strong i { color:var(--cyan-primary); }
.fp-route-control-actions { display:flex; flex-wrap:wrap; gap:5px; }
.fp-route-control-actions .fp-btn,.fp-route-control-panel > .fp-btn { min-height:29px; padding:4px 8px; font-size:8px; }
.fp-route-control-list { display:flex; min-height:29px; flex-wrap:wrap; gap:5px; align-items:center; padding:5px; border:1px solid var(--gray-border); background:var(--gray-background); }
.fp-route-control-list > small,.fp-route-control-panel > small { color:var(--text-muted); font-size:7px; }
.fp-route-control-chip { display:inline-flex; max-width:100%; align-items:center; gap:4px; padding:3px 5px; border:1px solid var(--gray-border); background:var(--gray-hover); color:var(--text-main); font-size:8px; }
.fp-route-control-chip i { color:#2563eb; }.fp-route-control-chip.fp-route-hazard i { color:#dc2626; }
.fp-route-control-chip small { overflow:hidden; color:var(--text-muted); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.fp-route-control-chip button { width:17px; height:17px; padding:0; border:0; background:transparent; color:var(--text-main); line-height:15px; cursor:pointer; }
@media(max-width:700px){.fp-route-control-panel{grid-template-columns:1fr;}.fp-route-control-panel > *{grid-column:1!important;}}

/* r55 TrouverNet subscription plan cards. */
.account-type-card .fp-plan-price { display:block; margin:2px 0; color:var(--cyan-primary); font-size:10px; font-weight:800; line-height:1.2; }
.account-type-card.active .fp-plan-price { color:var(--text-main); }
#profile-subscription { border-left:3px solid var(--cyan-primary); }