/* ============================================================================ Vessels Info board — SHARED by the public login landing (auth/Login.jsp) and the authenticated Vessel Schedule menu (vessel_schedule/Entry.jsp). This file used to be duplicated: once here (as part of auth-shell.css) and once inline in vessel_schedule/Script.jsp. The two copies drifted, which is why the menu board looked nothing like the login board. Keep it in ONE place. Everything is scoped under .wa-board for two reasons: - Bootstrap/Metronic also define .col / .cols; unscoped rules would collide on the authenticated page. - It keeps the board from leaking into other Metronic content. PALETTE CONTRACT — the host page must supply these custom properties: --ink --ink-2 --ink-3 text (strong / muted / faint) --surface --surface-sub --surface-3 --hair --hair-2 borders --input-bg --input-border --blue --blue-deep --cyan --amber-deep --amber-soft --cyan-soft Login declares them on :root (+ body.dark-mode). The authenticated shell maps them from its --wa-* theme tokens onto .wa-board (see Script.jsp) so the board follows Metronic light/dark. Each column sets its accent via inline --cc. ========================================================================== */ .wa-board{padding:8px 0 42px;} /* ---- board header: title + global on-screen filter ---- */ .wa-board .board-h{display:flex; align-items:center; gap:12px; margin:6px 0 16px; flex-wrap:wrap;} .wa-board .board-h .bi{width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; color:var(--blue-deep); box-shadow:0 1px 4px rgba(9,24,40,.06);} body.dark-mode .wa-board .board-h .bi{background:rgba(93,180,240,.14); border-color:rgba(93,180,240,.28); color:#5db4f0; box-shadow:none;} .wa-board .board-h h2{font-family:var(--ff-display); font-weight:800; font-size:var(--fs-xl); margin:0; color:var(--ink); letter-spacing:-.01em;} .wa-board .board-h .upd{margin-left:auto; font:500 var(--fs-xs)/1 var(--ff-mono); color:var(--ink-3); letter-spacing:.06em;} /* Board-wide on-screen filter, sits next to the "Vessels Info" title. */ .wa-board .board-find{position:relative; display:flex; align-items:center; flex:0 1 340px; margin-left:6px;} .wa-board .board-find .bf-ic{position:absolute; left:11px; font-size:var(--fs-xs); color:var(--ink-3); pointer-events:none;} .wa-board .board-find input{width:100%; height:34px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--ink); border-radius:9px; font:500 var(--fs-sm)/1 var(--ff-body); padding:0 32px 0 30px; outline:none;} .wa-board .board-find input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,121,193,.14);} .wa-board .board-find .bf-clear{position:absolute; right:5px; width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:var(--ink-3); cursor:pointer; font-size:var(--fs-xs); display:flex; align-items:center; justify-content:center;} .wa-board .board-find .bf-clear:hover{background:var(--hair-2); color:var(--ink);} @media (max-width:900px){ .wa-board .board-find{flex-basis:auto; width:100%; order:3; margin:8px 0 0;} } /* ---- columns ---- 5 sections: Alongside | Confirmed | Open Stack | Schedule | History. Below ~1500px five columns get too narrow for the time pairs, so wrap to 3 then 2. */ .wa-board .cols{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;} @media (max-width:1500px){ .wa-board .cols{grid-template-columns:repeat(3,1fr);} } @media (max-width:1040px){ .wa-board .cols{grid-template-columns:repeat(2,1fr);} } @media (max-width:720px){ .wa-board .cols{grid-template-columns:1fr;} } .wa-board .col{border-radius:16px; overflow:hidden; display:flex; flex-direction:column; max-height:clamp(520px,74vh,880px); background:var(--surface); border:1px solid var(--hair); box-shadow:0 1px 4px rgba(0,0,0,.05);} /* Column title bar filled with the section accent colour, white text. */ /* Header text colour follows --cc-fg (defaults to white). A pale accent such as Vessel History's white-gold needs dark text to stay legible, and its count pill needs a dark scrim instead of a white one — hence .is-light. */ .wa-board .col-h{padding:13px 15px 12px; background:var(--cc); display:flex; align-items:center; gap:9px;} .wa-board .col-h .ci{color:var(--cc-fg,#fff); font-size:var(--fs-sm); width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.24); flex:0 0 auto;} .wa-board .col-h h3{margin:0; font-size:var(--fs-sm); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cc-fg,#fff); flex:1;} .wa-board .col-h .cnt{font:700 var(--fs-xs)/1 var(--ff-mono); color:var(--cc-fg,#fff); background:rgba(255,255,255,.24); padding:3px 8px; border-radius:99px;} .wa-board .col.is-light .col-h{border-bottom:1px solid rgba(0,0,0,.10);} .wa-board .col.is-light .col-h .cnt{background:rgba(0,0,0,.10);} .wa-board .col.is-light .col-h .ci{background:rgba(0,0,0,.12);} .wa-board .col-find{padding:8px 11px; border-bottom:1px solid var(--hair-2);} .wa-board .col-find input{width:100%; height:32px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--ink); border-radius:8px; font:500 var(--fs-sm)/1 var(--ff-body); padding:0 11px; outline:none;} .wa-board .col-find input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,121,193,.14);} /* Vessel Schedule server search: two stacked rows (period + reset, name + go). */ .wa-board .col-find.sched-find{display:flex; flex-direction:column; gap:6px;} .wa-board .col-find.sched-find .sf-row{display:flex; gap:6px; align-items:center;} .wa-board .col-find.sched-find input{flex:1 1 auto; min-width:0;} .wa-board .col-find.sched-find input[readonly]{cursor:pointer;} .wa-board .col-find.sched-find .sf-row button{flex:0 0 auto; width:32px; height:32px; border-radius:8px; cursor:pointer; border:1px solid var(--input-border); background:var(--input-bg); color:var(--ink-3); display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); transition:background .15s,color .15s;} .wa-board .col-find.sched-find .sf-row button:hover{background:var(--blue); border-color:var(--blue); color:#fff;} .wa-board .col-b{padding:11px; min-height:120px; overflow-y:auto; flex:1 1 auto;} .wa-board .col-b::-webkit-scrollbar{width:4px;} .wa-board .col-b::-webkit-scrollbar-track{background:transparent;} .wa-board .col-b::-webkit-scrollbar-thumb{background:var(--hair); border-radius:2px;} /* Sub-section title (Anchorage under Alongside). */ .wa-board .col-sub{display:flex; align-items:center; gap:7px; padding:8px 12px; background:#c0921c;} .wa-board .col-sub .ico{color:#fff; font-size:var(--fs-sm);} .wa-board .col-sub h4{margin:0; font:800 var(--fs-2xs)/1 var(--ff-mono); letter-spacing:.08em; text-transform:uppercase; color:#fff; flex:1;} .wa-board .col-sub .cnt{font:700 var(--fs-2xs)/1 var(--ff-mono); color:#fff; background:rgba(255,255,255,.24); padding:3px 7px; border-radius:99px;} .wa-board .col-sub.sub-anchor{background:#A42A04;} /* Sub-list sits under the main list: never grows, scrolls on its own. */ .wa-board .col-b.col-b-sub{min-height:0; max-height:250px; flex:0 0 auto; border-top:1px solid var(--hair-2);} /* ---- Compact vessel card: name+tag header, one meta line, inline time pairs ---- */ .wa-board .vcard{background:var(--surface-sub); border:1px solid var(--hair-2); border-radius:12px; padding:11px 13px; margin-bottom:9px; cursor:pointer; transition:border-color .12s, transform .1s, box-shadow .12s;} .wa-board .vcard:last-child{margin-bottom:0;} .wa-board .vcard:hover{border-color:var(--cc); transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(9,24,40,.28);} /* Header stacks vertically: full-width name on top, then a small "(code) [origin badge]" line under it. Long names wrap (max 2 lines) instead of being clipped to an ellipsis, so no vessel name is lost. */ .wa-board .vcard .vhead{display:block;} .wa-board .vcard .vname{font-family:var(--ff-display); font-weight:700; font-size:var(--fs-md); color:var(--ink); display:block; min-width:0;} .wa-board .vcard .vname .nm-txt{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; overflow-wrap:anywhere; line-height:1.25;} .wa-board .vcard .vsub{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:3px;} .wa-board .vcard .vsub .vid{font:600 var(--fs-xs)/1 var(--ff-body); font-variant-numeric:tabular-nums; color:var(--ink-3);} .wa-board .vcard .vtag{flex-shrink:0; font:600 var(--fs-micro)/1 var(--ff-mono); letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:5px;} .wa-board .vcard .vtag.dom{background:var(--amber-soft); color:var(--amber-deep);} .wa-board .vcard .vtag.intl{background:var(--cyan-soft); color:var(--blue-deep);} .wa-board .vcard .vmeta{font-size:var(--fs-xs); color:var(--ink-2); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .wa-board .vcard .vmeta .svc{color:var(--blue); font-weight:600;} /* Agent name line — shown on every card, one line below the voyage. The name is wrapped in a span because ellipsis needs a block-ish box, not the flex row. */ .wa-board .vcard .vmeta-agent{display:flex; align-items:center; gap:5px; font-weight:600;} .wa-board .vcard .vmeta-agent i{flex-shrink:0; font-size:var(--fs-micro); opacity:.6;} .wa-board .vcard .vmeta-agent span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* Time pairs as [right-aligned label] : [value] on a grid, so the colons line up down each column. Tracks are content-sized so a value can never bleed into the next label. Default is one pair per row (always fits, keeps the text readable). */ .wa-board .vcard .vtimes{display:grid; grid-template-columns:auto 1fr; column-gap:5px; row-gap:4px; margin-top:8px; align-items:baseline;} .wa-board .vcard .vt-lab{font-weight:700; font-size:var(--fs-2xs); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); text-align:right; white-space:nowrap;} .wa-board .vcard .vt-lab::after{content:' :';} .wa-board .vcard .vt-val{font:600 var(--fs-sm)/1.3 var(--ff-body); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;} .wa-board .vcard .vt-val.blink{color:#ff4d4f; animation:vbBlink 1.4s infinite;} @keyframes vbBlink{10%{opacity:1}} /* Booking / Open / Actual: full-width labelled row under the grid, same type scale as the time pairs above it. */ .wa-board .vcard .vprog{display:flex; align-items:baseline; gap:6px; margin-top:8px;} .wa-board .vcard .vprog .plbl{flex-shrink:0; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);} .wa-board .vcard .vprog .plbl::after{content:' :';} .wa-board .vcard .vprog .pnum{color:var(--ink); font-family:var(--ff-body); font-variant-numeric:tabular-nums; font-weight:600; font-size:var(--fs-sm);} /* Two pairs per row only where the card is genuinely wide enough (~360px inner). The board is 5-up above 1500px, so each column is only ~295px there -> one pair per row. At/below 1500px it drops to 3-up (then 2-up, 1-up) and the cards get wide enough for two. Slightly tighter type in this mode to keep both on a line. Declared last so it wins over the base sizes above at equal specificity. */ @media (max-width:1500px){ .wa-board .vcard .vtimes{grid-template-columns:auto auto auto auto; column-gap:8px;} .wa-board .vcard .vt-lab, .wa-board .vcard .vprog .plbl{font-size:var(--fs-micro);} .wa-board .vcard .vt-val, .wa-board .vcard .vprog .pnum{font-size:var(--fs-2xs);} } .wa-board .vcard .vacts{display:flex; gap:16px; margin-top:9px;} .wa-board .vcard .vacts a{font:700 var(--fs-2xs)/1 var(--ff-body); color:var(--cc); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;} .wa-board .vcard .vacts a:hover{text-decoration:underline;} .wa-board .vb-empty2{text-align:center; padding:30px 14px; color:var(--ink-3);} .wa-board .vb-empty2 i{display:block; font-size:var(--fs-xl); opacity:.45; margin-bottom:8px;} .wa-board .vb-empty2 span{font-size:var(--fs-sm);} /* ---- Vessel Schedule period picker: a range picker showing ONE calendar. ---- daterangepicker draws .left + .right for any range; drop the right one and let the left calendar do both clicks. The popup is appended to (outside .wa-board), so this is scoped by the wa-single-cal class the page adds to that instance's container rather than by .wa-board. */ .daterangepicker.wa-single-cal{width:auto;} .daterangepicker.wa-single-cal .drp-calendar.right{display:none;} .daterangepicker.wa-single-cal .drp-calendar.left{float:none; clear:none; margin:0; max-width:none;} .daterangepicker.wa-single-cal .drp-buttons{clear:both;} /* Warna picker: HIJAU default -> BIRU tema aplikasi (#0b62b8), samakan dgn sim publik */ .daterangepicker.wa-single-cal td.active, .daterangepicker.wa-single-cal td.active:hover, .daterangepicker.wa-single-cal td.active.start-date, .daterangepicker.wa-single-cal td.active.end-date{background:#0b62b8 !important; border-color:#0b62b8 !important; color:#fff !important;} .daterangepicker.wa-single-cal td.today.active{background:#0b62b8 !important; color:#fff !important;} .daterangepicker.wa-single-cal td.in-range:not(.active){background:#e3eefb !important; color:#0b62b8 !important;} .daterangepicker.wa-single-cal td.available:not(.active):hover{background:#e3eefb !important; color:#0b62b8 !important;} .daterangepicker.wa-single-cal .ranges li.active{background:#0b62b8 !important;} .daterangepicker.wa-single-cal .drp-buttons .btn-primary, .daterangepicker.wa-single-cal .applyBtn{background:#0b62b8 !important; border-color:#0b62b8 !important; color:#fff !important;}