/* Copyright © 2026 Jason Gorman. All rights reserved.
 * VergeFlow is a product/trading name.
 */

.chainage-page { --chainage-blue:#168fe8; --chainage-blue-soft:#58b7ff; --chainage-navy:#061325; --chainage-panel:#0d1b2a; --chainage-panel-alt:#12243a; --chainage-stroke:#294a68; }
.chainage-shell-content { padding:14px; min-height:0; overflow:visible; display:flex; flex-direction:column; gap:12px; }
.chainage-topbar-actions { display:flex; align-items:center; gap:14px; }
.chainage-sync-state { color:#9fd6ff; font-size:13px; }
.chainage-filter-bar { display:flex; align-items:end; gap:9px; padding:10px; border:1px solid var(--chainage-stroke); border-radius:10px; background:linear-gradient(180deg,#0d1b2a,#081625); box-shadow:0 10px 28px rgba(0,0,0,.22); }
.chainage-filter-field { display:flex; flex-direction:column; gap:5px; min-width:126px; color:#9fb5ca; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.chainage-filter-field input,.chainage-filter-field select,.chainage-panel-heading select { height:38px; border-radius:7px; border:1px solid #294a68; background:#07111f; color:#f0f6fc; padding:0 10px; outline:none; }
.chainage-filter-field input:focus,.chainage-filter-field select:focus { border-color:var(--chainage-blue); box-shadow:0 0 0 2px rgba(22,143,232,.18); }
.chainage-search-field { flex:1; min-width:170px; }
.chainage-filter-button { height:38px; min-width:76px; }
.chainage-workspace { flex:none; min-height:0; display:grid; grid-template-columns:minmax(285px,25%) minmax(420px,1fr) minmax(300px,27%); border:1px solid var(--chainage-stroke); border-radius:11px; overflow:hidden; background:#07111f; box-shadow:0 14px 36px rgba(0,0,0,.3); }
.chainage-photo-panel,.chainage-detail-panel { min-width:0; background:linear-gradient(180deg,#0d1b2a,#081625); display:flex; flex-direction:column; }
.chainage-photo-panel { border-right:1px solid var(--chainage-stroke); }
.chainage-detail-panel { border-left:1px solid var(--chainage-stroke); overflow:auto; }
.chainage-panel-heading { padding:13px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--chainage-stroke); gap:8px; }
.chainage-panel-heading h2 { color:#f0f6fc; font-size:17px; margin:0; }
.chainage-panel-heading p { color:#9fb5ca; margin:4px 0 0; font-size:11px; }
.chainage-panel-heading select { height:32px; font-size:11px; }
.chainage-photo-list { flex:1; overflow:auto; }
.chainage-photo-row { width:100%; display:grid; grid-template-columns:70px minmax(0,1fr); gap:10px; padding:10px; border:0; border-bottom:1px solid rgba(41,74,104,.72); background:transparent; text-align:left; cursor:pointer; color:#f0f6fc; }
.chainage-photo-row:hover { background:rgba(22,143,232,.09); }
.chainage-photo-row.selected { background:linear-gradient(90deg,rgba(22,143,232,.34),rgba(22,143,232,.11)); box-shadow:inset 3px 0 0 var(--chainage-blue-soft); }
.chainage-photo-thumb { width:70px; height:58px; object-fit:cover; border-radius:7px; border:1px solid rgba(255,255,255,.22); background:#12243a; }
.chainage-photo-row-title { font-weight:800; font-size:12px; line-height:1.3; }
.chainage-photo-row-road { font-size:11px; margin-top:3px; color:#d8e8f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chainage-photo-row-chainage { font-size:11px; color:#58b7ff; margin-top:2px; font-weight:700; }
.chainage-photo-row-note { font-size:11px; color:#9fb5ca; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chainage-photo-row-user { font-size:10px; color:#7f9ab2; margin-top:4px; }
.chainage-list-footer { padding:10px 12px; color:#9fb5ca; font-size:11px; border-top:1px solid var(--chainage-stroke); }
.chainage-map-panel { position:relative; min-width:0; width:100%; aspect-ratio:1 / 1; background:#07111f; }
.chainage-map { position:absolute; inset:0; }
.chainage-map-state { position:absolute; left:14px; bottom:14px; background:rgba(6,19,37,.9); color:#dceeff; border:1px solid var(--chainage-stroke); padding:7px 10px; border-radius:7px; font-size:11px; pointer-events:none; }
.chainage-map-control { position:absolute; top:14px; left:14px; width:38px; height:38px; border-radius:7px; border:1px solid var(--chainage-stroke); background:rgba(6,19,37,.94); color:#f0f6fc; font-size:22px; cursor:pointer; }
.chainage-map-control:hover { border-color:var(--chainage-blue-soft); color:var(--chainage-blue-soft); }
.chainage-detail-empty { margin:auto; padding:28px; text-align:center; color:#9fb5ca; }
.chainage-detail-empty-icon { font-size:44px; opacity:.8; }
.chainage-detail-empty h2 { color:#f0f6fc; font-size:18px; margin:12px 0 6px; }
.chainage-detail-empty p { font-size:12px; line-height:1.5; }
.chainage-detail-header { padding:12px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--chainage-stroke); color:#f0f6fc; }
.chainage-detail-index { font-size:12px; font-weight:800; }
.chainage-detail-close { background:none; border:0; color:#9fb5ca; font-size:22px; cursor:pointer; }
.chainage-detail-photo-wrap { padding:12px; }
.chainage-detail-photo { width:100%; max-height:290px; object-fit:contain; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:#02070d; }
.chainage-detail-table { padding:0 14px 12px; }
.chainage-detail-row { display:grid; grid-template-columns:95px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid rgba(41,74,104,.58); font-size:12px; }
.chainage-detail-label { color:#9fb5ca; }
.chainage-detail-value { color:#f0f6fc; word-break:break-word; }
.chainage-detail-value.accent { color:#58b7ff; font-weight:800; }
.chainage-detail-actions { display:flex; gap:10px; padding:4px 14px 16px; }
.chainage-detail-actions .button { flex:1; }
.chainage-note-editor { width:100%; min-height:110px; resize:vertical; border:1px solid var(--chainage-stroke); border-radius:7px; background:#07111f; color:#f0f6fc; padding:10px; }
.chainage-empty { color:#9fb5ca; padding:24px; text-align:center; font-size:12px; }
.chainage-camera-marker { width:34px; height:42px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
@media (max-width:1200px){ .chainage-workspace{grid-template-columns:280px minmax(380px,1fr) 300px}.chainage-filter-bar{overflow-x:auto}.chainage-filter-field{flex:0 0 126px}.chainage-search-field{flex:0 0 190px} }
@media (max-width:900px){ .chainage-shell-content{overflow:auto}.chainage-workspace{display:flex; flex-direction:column; min-height:1100px}.chainage-photo-panel{height:330px;border-right:0;border-bottom:1px solid var(--chainage-stroke)}.chainage-map-panel{height:500px}.chainage-detail-panel{min-height:420px;border-left:0;border-top:1px solid var(--chainage-stroke)} }

/* Chainage task grouping */
.chainage-task-manager { position:relative; align-self:flex-end; }
.chainage-task-menu { position:absolute; top:44px; right:0; z-index:1200; width:330px; max-height:420px; overflow:auto; border:1px solid var(--chainage-stroke); border-radius:9px; background:#081625; box-shadow:0 18px 42px rgba(0,0,0,.5); padding:7px; }
.chainage-task-menu-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:7px 8px; border-radius:7px; color:#f0f6fc; }
.chainage-task-menu-row:hover { background:rgba(22,143,232,.1); }
.chainage-task-menu-name { min-width:0; }
.chainage-task-menu-name strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.chainage-task-menu-name span { color:#9fb5ca; font-size:10px; }
.chainage-task-menu-actions { display:flex; gap:4px; }
.chainage-task-icon-button { width:30px; height:30px; border:1px solid var(--chainage-stroke); border-radius:6px; background:#07111f; color:#cfe5f7; cursor:pointer; }
.chainage-task-icon-button:hover { color:#58b7ff; border-color:#58b7ff; }
.chainage-task-icon-button.danger:hover { color:#ff7d88; border-color:#ff7d88; }
.chainage-task-create { width:100%; margin-top:5px; }
.chainage-photo-row-task { display:block; margin-top:3px; color:#9fd6ff; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.035em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chainage-detail-task-select { width:100%; height:38px; border-radius:7px; border:1px solid var(--chainage-stroke); background:#07111f; color:#f0f6fc; padding:0 9px; }
.chainage-modal-backdrop { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,7,14,.76); backdrop-filter:blur(3px); }
.chainage-modal { width:min(480px,100%); border:1px solid var(--chainage-stroke); border-radius:12px; background:linear-gradient(180deg,#0d1b2a,#081625); box-shadow:0 24px 64px rgba(0,0,0,.58); padding:20px; color:#f0f6fc; }
.chainage-modal h2 { margin:0 0 10px; font-size:19px; }
.chainage-modal p { margin:0 0 15px; color:#b8cad9; line-height:1.5; font-size:13px; }
.chainage-modal input { width:100%; height:42px; border:1px solid var(--chainage-stroke); border-radius:7px; background:#07111f; color:#f0f6fc; padding:0 11px; }
.chainage-modal-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; margin-top:16px; }
.chainage-modal-actions .button-danger { background:#9e2330; color:#fff; border:1px solid #c64a59; }
.chainage-modal-actions .button-danger:hover { background:#b42b3a; }
@media (max-width:1200px){ .chainage-task-manager{flex:0 0 auto}.chainage-task-menu{left:0;right:auto} }