:root{--primary: #0056b3;--primary-light: #e6f0fa;--text: #333;--text-muted: #6c757d;--border: #dee2e6;--surface: #fff}html,body{margin:0;padding:0;background:#f0f2f5;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--text);overflow:hidden;height:100%;width:100%}*{box-sizing:border-box}.login-screen{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0f2f5,#d9e2ec)}.login-box{background:#fff;padding:2.5rem;border-radius:12px;box-shadow:0 10px 30px #0000001a;width:100%;max-width:400px;text-align:center}.login-box h2{margin:1rem 0 .5rem;color:var(--text)}.subtitle{color:var(--text-muted);margin-bottom:2rem;font-size:.9rem}.form-group{margin-bottom:1.5rem;text-align:left}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;font-size:.9rem;color:#555}.form-group input{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:6px;font-size:1rem;box-sizing:border-box}.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #0056b31a}.btn-primary{background:var(--primary);color:#fff;border:none;padding:.85rem;width:100%;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-primary:hover:not(:disabled){background:#004494}.btn-primary:disabled{opacity:.7;cursor:not-allowed}.btn-block{display:block}.error-msg{background:#fee2e2;color:#dc2626;padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem}.app-layout{display:flex;flex-direction:column;height:100vh;overflow:hidden}.global-header{background:var(--primary);color:#fff;padding:0 1.5rem;height:60px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:0 2px 4px #0000001a;z-index:10}.brand{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:700;letter-spacing:.5px}.header-nav{display:flex;align-items:center;gap:1rem;height:100%}.nav-tab{background:transparent;border:none;color:#ffffffb3;font-size:1rem;font-weight:600;padding:0 1rem;height:100%;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;display:flex;align-items:center;text-decoration:none}.nav-tab:hover{color:#fff;background:#ffffff1a}.nav-tab.active{color:#fff;border-bottom-color:#fff;background:#ffffff26}.user-profile{display:flex;align-items:center;gap:.75rem;margin-left:1.5rem;padding-left:1.5rem;border-left:1px solid rgba(255,255,255,.2)}.avatar{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700}.user-email{font-size:.9rem;font-weight:500;display:none}.btn-logout{background:#fff3;border:none;color:#fff;padding:.4rem .75rem;border-radius:4px;font-size:.8rem;cursor:pointer}.btn-logout:hover{background:#ffffff4d}app-root{display:block;height:100%;width:100%;min-height:0;min-width:0;overflow:hidden}app-main-layout{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;min-width:0;overflow:hidden}.feature-view-container{display:flex;flex-direction:column;flex:1 1 0%;min-height:0;min-width:0;height:calc(100vh - 60px);max-height:calc(100vh - 60px);overflow:hidden;position:relative}app-booking,app-shipment,.feature-component-host{display:flex;flex-direction:column;flex:1 1 0%;min-height:0;min-width:0;height:100%;max-height:100%;width:100%;overflow:hidden}.toolbar{background:var(--surface);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0;gap:1rem}.search-box{position:relative;flex:1;max-width:400px;display:flex;align-items:center}.search-box svg{position:absolute;left:10px}.search-box input{width:100%;padding:.6rem 1rem .6rem 2.2rem;border:1px solid var(--border);border-radius:20px;font-size:.95rem;background:#f8f9fa}.search-box input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-light)}.filters{display:flex;gap:.75rem;flex-wrap:wrap}.filter-input{padding:.6rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem;background:#fff;outline:none}.filter-input:focus{border-color:var(--primary)}.workarea{display:flex;flex-direction:row;flex:1 1 0%;min-height:0;min-width:0;height:100%;max-height:100%;width:100%;overflow:hidden;position:relative}.pane-cards{display:none;width:380px;min-width:380px;max-width:380px;flex-shrink:0;background:#f8f9fa;border-right:1px solid var(--border);flex-direction:column;height:100%;max-height:100%;min-height:0;min-width:0;overflow:hidden;z-index:5}.pane-cards.active{display:flex}.cards-header{padding:1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem;background:var(--surface);flex-shrink:0}.cards-header h3{margin:0;font-size:1.1rem;color:var(--text)}.btn-icon{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:.5rem;display:flex;align-items:center;font-size:.9rem;border-radius:4px}.btn-icon:hover{background:#e9ecef;color:var(--text)}.cards-list{flex:1 1 0%;min-height:0;height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;padding:.75rem;display:flex;flex-direction:column;gap:.75rem;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f8f9fa;-webkit-overflow-scrolling:touch}.cards-list::-webkit-scrollbar{width:6px}.cards-list::-webkit-scrollbar-track{background:#f8f9fa}.cards-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.cards-list::-webkit-scrollbar-thumb:hover{background:#94a3b8}.master-card{flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s;box-shadow:0 1px 3px #0000000d}.master-card:hover{border-color:#a5c8ff;transform:translateY(-1px);box-shadow:0 4px 6px #00000014}.master-card.selected{border:2px solid var(--primary);background:var(--primary-light);box-shadow:0 4px 12px #0056b326}.mc-row{margin-bottom:.4rem;font-size:.9rem;color:var(--text)}.mc-row:last-child{margin-bottom:0}.mc-row.space-between{display:flex;justify-content:space-between;align-items:center}.mc-left,.mc-right{display:flex;align-items:center;gap:.5rem}.mc-index{background:#e9ecef;color:#495057;font-size:.75rem;padding:.1rem .4rem;border-radius:12px;font-weight:700}.mc-week{color:var(--text-muted);font-size:.85rem;font-weight:500}.mc-highlight{color:var(--primary);font-size:1.05rem}.mc-shipper{color:#495057;font-weight:500;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-route{font-weight:600;color:#212529}.mc-ports{color:#6c757d;font-size:.85rem}.mc-volume-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}.vol-badge{background:#e3f2fd;color:#0d47a1;font-size:.75rem;padding:.2rem .5rem;border-radius:4px;font-weight:500}.mc-bill{font-size:1.1rem}.mc-code{font-size:.8rem}.mc-grey-box{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:.75rem;margin:.5rem 0}.mc-leg{display:flex;justify-content:space-between;align-items:center;font-size:.85rem}.mc-port{font-weight:600;color:#343a40}.mc-time{color:#6c757d}.mc-divider{height:1px;border-bottom:1px dashed #ced4da;margin:.5rem 0}.mc-cont-list{margin-top:.75rem}.cont-badge{display:inline-block;background:#fff;border:1px solid #ced4da;font-size:.8rem;padding:.2rem .4rem;border-radius:4px;margin-right:.4rem;margin-bottom:.4rem}.pane-table{display:none;flex-direction:column;flex:1 1 0%;min-height:0;min-width:0;width:100%;height:100%;max-height:100%;background:var(--surface);overflow:hidden;position:relative}.pane-table.active{display:flex}.table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:#f8f9fa;flex-shrink:0}.table-actions{display:flex;gap:.5rem}.btn-expand{background:#fff;border:1px solid var(--border);padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;gap:.4rem;color:var(--text-muted)}.btn-expand:hover{background:#e9ecef;color:var(--text)}.table-container{flex:1 1 0%;min-height:0;min-width:0;width:100%;height:100%;max-height:100%;overflow-x:auto;overflow-y:auto;padding:0 1rem .75rem;background:#f0f2f5;scrollbar-width:thin;scrollbar-color:#94a3b8 #f1f5f9;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.table-container::-webkit-scrollbar{width:8px;height:8px}.table-container::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.table-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.table-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem;min-width:1250px;table-layout:auto}.data-table th{position:sticky;top:0;background:#f8f9fa;border-bottom:2px solid var(--border);padding:.75rem .85rem;text-align:left;font-weight:600;color:var(--text-muted);white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;z-index:10;box-shadow:0 2px 4px #0000000a}.data-table th:active{cursor:grabbing}.data-table td{padding:.8rem .85rem;vertical-align:middle;white-space:nowrap}.draggable-th.over{background:#e9ecef}.sort-icon{display:inline-block;margin-left:4px;font-size:.7rem;color:var(--primary)}.spacer-body tr td{height:12px;padding:0!important;border:none!important;background:transparent!important}.data-row{transition:transform .2s}.data-row.is-clickable{cursor:pointer}.data-row:hover td{background:#f4f9ff!important}.click-link{cursor:pointer;display:inline-block;transition:all .2s}.click-link:hover{text-decoration:underline;color:#004494}.tag-vessel.clickable{cursor:pointer;transition:background .2s,color .2s}.tag-vessel.clickable:hover{background:var(--primary);color:#fff}.pagination-controls{display:flex;align-items:center;gap:.75rem;font-size:.85rem;font-weight:500}.btn-page{background:#fff;border:1px solid var(--border);padding:.25rem .6rem;border-radius:4px;cursor:pointer;font-weight:700;color:var(--text-muted);transition:all .2s}.btn-page:hover:not(:disabled){background:#e9ecef;color:var(--text)}.btn-page:disabled{opacity:.4;cursor:not-allowed}.group-card-body.is-grouped-card{filter:drop-shadow(0 4px 8px rgba(0,86,179,.15))}.group-card-body.is-grouped-card tr td{background:#fff}.group-card-body.is-grouped-card tr:first-child td{border-top:2px solid var(--primary)}.group-card-body.is-grouped-card tr:last-child td{border-bottom:2px solid var(--primary)}.group-card-body.is-grouped-card tr td:first-child{border-left:2px solid var(--primary)}.group-card-body.is-grouped-card tr td:last-child{border-right:2px solid var(--primary)}.group-card-body.is-grouped-card tr:first-child td:first-child{border-top-left-radius:8px}.group-card-body.is-grouped-card tr:first-child td:last-child{border-top-right-radius:8px}.group-card-body.is-grouped-card tr:last-child td:first-child{border-bottom-left-radius:8px}.group-card-body.is-grouped-card tr:last-child td:last-child{border-bottom-right-radius:8px}.group-card-body.is-grouped-card tr:not(:last-child) td{border-bottom:1px dashed #b8daff}.cont-td{padding:0!important}.cont-line{padding:.5rem .75rem;border-bottom:1px dashed #ced4da;display:flex;align-items:center;gap:.5rem}.cont-line.no-border{border-bottom:none}.cont-arrow{color:#adb5bd;font-size:.9rem}.table-summary-bar{background:#f8f9fa;border-top:2px solid var(--border);padding:.75rem 1.5rem;display:flex;justify-content:space-between;font-size:.9rem;color:#495057;z-index:10;box-shadow:0 -2px 5px #00000005;flex-shrink:0}.text-primary{color:var(--primary)}.text-muted{color:var(--text-muted)}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.tag-vessel{background:#e9ecef;padding:.2rem .5rem;border-radius:4px;font-weight:500;font-size:.8rem}.status-badge{padding:.25rem .6rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.status-badge.pending{background:#fff3cd;color:#856404}.status-badge.processed{background:#d4edda;color:#155724}.pane-detail{display:none;flex:1 1 0%;flex-direction:column;min-height:0;min-width:0;width:100%;height:100%;max-height:100%;background:var(--surface);overflow:hidden;position:relative}.pane-detail.active{display:flex}.detail-toolbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:#fff;box-shadow:0 1px 3px #0000000d;z-index:5;flex-shrink:0}.detail-title{margin:0;font-size:1.25rem;color:var(--text)}.dt-actions{display:flex;gap:.5rem}.btn-outline{background:#fff;border:1px solid var(--border);padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:.85rem}.btn-outline:hover{background:#f8f9fa}.detail-content{flex:1 1 0%;min-height:0;min-width:0;width:100%;height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;padding:1.5rem;background:#f4f6f8;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f4f6f8;-webkit-overflow-scrolling:touch}.detail-content::-webkit-scrollbar{width:6px}.detail-content::-webkit-scrollbar-track{background:#f4f6f8}.detail-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.detail-content::-webkit-scrollbar-thumb:hover{background:#94a3b8}.section-grid.single-col{display:grid;grid-template-columns:1fr;gap:1rem}.section-grid.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mb-3{margin-bottom:1.5rem}.s-card{background:#fff;padding:1.25rem;border-radius:8px;border:1px solid var(--border);box-shadow:0 1px 2px #00000005}.s-card.full-width{width:100%;box-sizing:border-box}.s-card h4{margin:0 0 1rem;color:var(--primary);font-size:1rem;border-bottom:1px solid #f0f0f0;padding-bottom:.5rem}.s-row{display:flex;margin-bottom:.5rem;font-size:.9rem;line-height:1.4}.s-row span{width:140px;color:var(--text-muted);flex-shrink:0}.s-row strong{color:var(--text);flex:1}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.timeline-split-view{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem;grid-auto-flow:dense;align-items:start;margin-top:1rem}.tl-item{position:relative;box-sizing:border-box;padding-bottom:1.5rem;transition:all .3s ease}.tl-item.doc-item{grid-column:1}.tl-item.ops-item{grid-column:2}.tl-item.expanded{grid-column:1 / -1}h4.tl-col-title{margin:0 0 1.5rem;padding-bottom:.5rem;border-bottom:2px solid var(--border);font-size:1.1rem;text-align:left}h4.tl-col-title.doc-item{grid-column:1}h4.tl-col-title.ops-item{grid-column:2}.tl-line{position:absolute;left:7px;top:0;bottom:0;width:2px;background:#e9ecef;z-index:1}.tl-marker{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#e9ecef;border:3px solid #fff;box-shadow:0 0 0 2px #e9ecef;z-index:2}.tl-marker.done{background:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}.tl-content{padding-left:2rem}.tl-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:1rem;box-shadow:0 1px 3px #0000000d;width:100%;box-sizing:border-box;display:block}.tl-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.8rem}.tl-time-group{display:flex;align-items:center;gap:.5rem}.btn-toggle{background:#f8f9fa;border:1px solid var(--border);padding:.2rem .5rem;border-radius:4px;font-size:.75rem;cursor:pointer;color:var(--text-muted);transition:all .2s}.btn-toggle:hover{background:#e9ecef;color:var(--text)}.tl-type{padding:.1rem .5rem;border-radius:4px;font-weight:700}.tl-type.ops{background:#e3f2fd;color:#0d47a1}.tl-type.doc{background:#fdf6e3;color:#b58900}.tl-time{color:var(--text-muted)}.tl-title{margin:0 0 .5rem;font-size:1rem;color:var(--text)}.tl-desc{font-size:.9rem;color:#555;line-height:1.5}@media(max-width:1023px){.toolbar{flex-wrap:wrap}.search-box{max-width:100%}.filters{width:100%}.filter-input{flex:1}.user-email{display:none!important}.summary-grid{grid-template-columns:1fr;gap:.5rem}.section-grid.two-cols{grid-template-columns:1fr}.timeline-split-view{display:flex;flex-direction:column;gap:0}.tl-item.doc-item,.tl-item.ops-item,.tl-item.expanded,h4.tl-col-title.doc-item,h4.tl-col-title.ops-item{grid-column:auto}}@media(max-width:767px){.global-header{flex-direction:column;height:auto;padding:1rem;gap:1rem}.header-nav{width:100%;justify-content:space-between}.user-profile{margin-left:0;padding-left:0;border-left:none}.workarea{flex-direction:column}.pane-cards{width:100%;border-right:none}.workarea[data-view=split-table] .pane-table,.workarea[data-view=split-table] .pane-detail,.workarea[data-view=full-table] .pane-cards,.workarea[data-view=full-table] .pane-detail,.workarea[data-view=detail] .pane-cards,.workarea[data-view=detail] .pane-table{display:none!important}}@media(min-width:768px){.user-email{display:inline-block}}