:root{
 --bg:#071425;--bg2:#0b1d34;--panel:#102541;--panel2:#132d4d;--line:#294767;
 --text:#f7fbff;--muted:#a8bbce;--blue:#0a8cf5;--blue2:#1673df;
 --green:#27c676;--yellow:#ffb12b;--red:#ff5f68;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:
radial-gradient(circle at 40% 0,#0a3170 0,#0a1f3c 30%,#071425 72%);
color:var(--text)}
button,input,select{font:inherit}
button{cursor:pointer}
.login{min-height:100vh;display:grid;grid-template-columns:1.35fr .65fr}
.login-left{padding:8vw 6vw;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line)}
.login-brand{display:flex;align-items:center;gap:24px;margin-bottom:35px}
.login-brand img{width:220px;height:220px;object-fit:cover;border-radius:28px;box-shadow:0 18px 50px #0007}
.login-brand h2{font-size:34px;margin:0}.login-brand p{font-size:18px;color:#d3dfed;margin-top:7px}
.login-left h1{font-size:58px;line-height:1.06;max-width:780px;margin:18px 0 16px}
.login-left>p{font-size:22px;color:#d7e4f0;max-width:850px;line-height:1.55}
.login-right{display:grid;place-items:center;padding:40px;background:#081525d9}
.login-card{width:min(470px,94%);background:linear-gradient(145deg,#132d4d,#0d2038);border:1px solid #47719a;border-radius:18px;padding:28px;box-shadow:0 20px 50px #0005}
.login-card h2{font-size:33px;margin:0 0 18px}
.field{margin:13px 0}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}.field input{width:100%;padding:13px;border-radius:9px;border:1px solid #46719a;background:#0a1e35;color:#fff}
.btn{border:0;border-radius:9px;padding:11px 14px;font-weight:800}.primary{background:linear-gradient(90deg,#0b8cf4,#179df6);color:#fff}.secondary{background:#173755;color:#fff;border:1px solid #365c80}
.full{width:100%}.hint{margin-top:14px;padding:12px;border:1px solid #456d91;border-radius:10px;color:#d9e6f1;font-size:12px}
.shell{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#081729,#06111f);border-right:1px solid var(--line);padding:16px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.side-brand{padding:6px 8px 24px}.side-brand img{width:230px;max-height:105px;object-fit:cover;object-position:center}
.navlabel{font-size:11px;color:#96a9bc;font-weight:900;margin:17px 11px 7px;letter-spacing:.4px}
.nav{width:100%;display:flex;align-items:center;gap:11px;text-align:left;padding:12px 13px;border-radius:9px;border:0;background:transparent;color:#eef5fb;font-weight:750;margin:3px 0}
.nav:hover,.nav.active{background:linear-gradient(90deg,#0585ed,#1473df);box-shadow:0 8px 22px #0a7fee35}
.nav .ico{width:22px;text-align:center}
.side-bottom{margin-top:35px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#0b1d34}
.side-bottom b{display:block}.side-bottom span{font-size:12px;color:#70d39c}
.main{min-width:0}
.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#0a1a2dcc;position:sticky;top:0;z-index:5}
.topbar select,.userchip{background:#0d2139;color:#fff;border:1px solid #365a7b;border-radius:9px;padding:9px 12px}
.content{padding:24px}.content h1{font-size:28px;margin:0 0 5px}.muted{color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:14px;margin:18px 0}
.card{background:linear-gradient(145deg,#102947,#0b1d34);border:1px solid #2c4d6e;border-radius:14px;padding:16px;box-shadow:0 12px 32px #0002}
.metric{cursor:pointer}.metric .num{font-size:28px;font-weight:1000}.metric .label{font-size:13px;font-weight:850;margin-top:2px}.metric .more{margin-top:13px;padding-top:10px;border-top:1px solid #294867;color:#249dff;font-size:12px}
.twocol{display:grid;grid-template-columns:1.45fr .85fr;gap:14px;margin-top:14px}
.tablewrap{background:linear-gradient(145deg,#102947,#0b1d34);border:1px solid #2c4d6e;border-radius:14px;padding:15px;overflow:auto}
table{width:100%;border-collapse:collapse}th,td{padding:11px;border-bottom:1px solid #254462;text-align:left;font-size:12px}th{color:#b9cbda;font-size:11px}
.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900}.green{background:#17653f}.red{background:#742935}.yellow{background:#785b1d}.blue{background:#165798}
.quickgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}.quick{min-height:110px;text-align:left;cursor:pointer}.quick b{display:block;margin-bottom:7px}.quick small{color:var(--muted)}
.filters,.flow{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.filters button,.flow span{background:#113658;border:1px solid #31577a;color:#fff;padding:8px 10px;border-radius:8px;font-size:12px}.filters button.active{background:#0a8cf5}
.modalbg{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:15px;z-index:20}.modal{width:min(760px,96vw);background:#0c2139;border:1px solid #3a6389;border-radius:14px;padding:20px}.modalhead{display:flex;justify-content:space-between;align-items:center}
.footer{text-align:center;color:#718ba3;font-size:11px;padding:22px}
@media(max-width:1050px){.metrics,.quickgrid{grid-template-columns:repeat(2,1fr)}.twocol{grid-template-columns:1fr}}
@media(max-width:760px){.login{grid-template-columns:1fr}.login-left{display:none}.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.metrics,.quickgrid{grid-template-columns:1fr}.content{padding:14px}}

/* Final logo + scroll corrections */
.sidebar{
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
  height:100vh;
  padding:14px 10px 10px;
}
.side-brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px 14px;
  border-bottom:1px solid #183653;
  margin-bottom:4px;
}
.side-brand img{
  width:58px !important;
  height:58px !important;
  object-fit:cover !important;
  border-radius:12px;
  box-shadow:0 8px 20px #0005;
}
.side-brand-text{min-width:0;line-height:1.05}
.side-brand-text b{display:block;font-size:15px;letter-spacing:.5px;white-space:nowrap}
.side-brand-text span{display:block;color:#2ea0ff;font-size:11px;letter-spacing:3px;margin-top:4px;font-weight:900}
.side-brand-text small{display:block;color:#8098b1;font-size:8px;margin-top:5px;white-space:nowrap}
.side-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#7790aa #0a1a2c;
}
.side-scroll::-webkit-scrollbar{width:8px}
.side-scroll::-webkit-scrollbar-track{background:#0a1a2c;border-radius:10px}
.side-scroll::-webkit-scrollbar-thumb{background:#6f879f;border-radius:10px;border:2px solid #0a1a2c}
.side-bottom{
  flex:0 0 auto;
  margin-top:9px !important;
  background:#0a1b2f;
}
.login-brand img{
  width:175px !important;
  height:175px !important;
  object-fit:cover !important;
  border-radius:26px;
}
.login-brand-text h2{font-size:32px;margin:0}
.login-brand-text p{margin:7px 0 0;color:#d2dfed;font-size:17px}
@media(max-width:760px){
  .sidebar{height:auto;overflow:visible !important}
  .side-scroll{overflow:visible;max-height:none}
  .side-bottom{display:none}
}

/* Concept 1 exact logo integration */
.concept-brand{
  display:block !important;
  padding:4px 8px 12px !important;
  border-bottom:1px solid #183653;
}
.concept-brand img{
  width:100% !important;
  height:118px !important;
  object-fit:cover !important;
  object-position:center 48% !important;
  border-radius:10px;
  box-shadow:none !important;
}
.concept-login-brand{
  display:block !important;
  margin-bottom:25px;
}
.concept-login-brand img{
  width:330px !important;
  height:375px !important;
  max-width:72vw;
  object-fit:cover !important;
  object-position:center 47% !important;
  border-radius:18px;
  box-shadow:none !important;
}
.side-brand-text,.login-brand-text{display:none !important}

/* Sidebar must scroll independently all the way to lower modules */
.sidebar{
  height:100vh !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
.side-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  padding-bottom:16px;
}
.side-scroll::-webkit-scrollbar{width:9px}
.side-scroll::-webkit-scrollbar-track{background:#071729}
.side-scroll::-webkit-scrollbar-thumb{background:#607b96;border-radius:10px;border:2px solid #071729}
.side-bottom{flex:0 0 auto !important}
@media(max-width:760px){
  .concept-login-brand img{width:250px !important;height:285px !important}
  .sidebar{height:auto !important;overflow:visible !important}
  .side-scroll{overflow:visible !important}
}

/* V2: exact Concept 1 retained; only unreadable subtitle is visually replaced */
.exact-logo-wrap{
  position:relative;
  width:100%;
  height:118px;
  overflow:hidden;
  border-radius:10px;
}
.exact-logo-wrap>img{
  width:100% !important;
  height:118px !important;
  object-fit:cover !important;
  object-position:center 48% !important;
  border-radius:10px;
}

.exact-login-logo-wrap{
  position:relative;
  width:330px;
  height:375px;
  overflow:hidden;
  border-radius:18px;
}
.exact-login-logo-wrap>img{
  width:330px !important;
  height:375px !important;
  object-fit:cover !important;
  object-position:center 47% !important;
  border-radius:18px;
}

@media(max-width:760px){
 .exact-login-logo-wrap{width:250px;height:285px}
 .exact-login-logo-wrap>img{width:250px !important;height:285px !important}
 
}

/* =========================================================
   FIXED-SCREEN LAYOUT
   - Login page fits one screen: no page scrollbar
   - After login: browser/right-side page scrollbar disabled
   - Only left navigation scrolls globally
   - Large tables/content scroll inside their own module when needed
   ========================================================= */

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden !important;
}
#app{
  width:100%;
  height:100vh;
  overflow:hidden;
}

/* LOGIN: force everything into one viewport */
.login{
  width:100%;
  height:100vh !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.login-left,.login-right{
  height:100vh;
  min-height:0;
  overflow:hidden;
}
.login-left{
  padding:clamp(28px,5vh,60px) clamp(35px,5vw,80px) !important;
}
.login-left h1{
  font-size:clamp(38px,4.3vw,58px) !important;
  margin:10px 0 12px !important;
}
.login-left>p{
  font-size:clamp(15px,1.5vw,21px) !important;
  line-height:1.4 !important;
}
.concept-login-brand{
  margin-bottom:12px !important;
}
.exact-login-logo-wrap{
  width:clamp(220px,25vw,300px) !important;
  height:clamp(250px,38vh,335px) !important;
}
.exact-login-logo-wrap>img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.login-card{
  max-height:calc(100vh - 50px);
  overflow:hidden;
}

/* APP SHELL: one viewport only */
.shell{
  width:100%;
  height:100vh !important;
  min-height:0 !important;
  overflow:hidden !important;
  grid-template-rows:100vh;
}
.sidebar{
  height:100vh !important;
  max-height:100vh !important;
  overflow:hidden !important;
}
.side-scroll{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:0 !important;
  overscroll-behavior:contain;
}
.main{
  height:100vh !important;
  min-height:0 !important;
  overflow:hidden !important;
  display:grid;
  grid-template-rows:66px minmax(0,1fr);
}
.topbar{
  position:relative !important;
  top:auto !important;
  height:66px;
  min-height:66px;
}
.content{
  min-height:0 !important;
  height:100%;
  overflow:hidden !important;
  padding:18px 22px !important;
  display:block;
}

/* Footer removed from viewport flow to avoid right-side page scrolling */
.footer{display:none !important}

/* Make dashboard fit vertically */
.content h1{
  font-size:clamp(22px,2vw,28px) !important;
  margin:0 0 3px !important;
}
.content>.muted{
  margin:3px 0 8px !important;
}
.metrics{
  margin:10px 0 !important;
  gap:10px !important;
}
.card{
  padding:12px !important;
}
.metric .num{
  font-size:24px !important;
}
.metric .more{
  margin-top:8px !important;
  padding-top:7px !important;
}
.twocol{
  margin-top:10px !important;
  gap:10px !important;
}
.quickgrid{
  margin-top:8px !important;
  gap:8px !important;
}
.quick{
  min-height:72px !important;
  padding:10px !important;
}
.content>h3{
  margin:10px 0 5px !important;
}

/* MODULE CONTENT:
   The overall page never scrolls.
   Tables/lists get their own scrollbar only when the selected module needs it. */
.tablewrap{
  max-height:calc(100vh - 155px);
  overflow:auto !important;
  overscroll-behavior:contain;
}
.twocol .tablewrap{
  max-height:285px;
}
.card{
  overflow:auto;
}
.filters,.flow{
  margin:9px 0 !important;
}

/* Dashboard cards should not create their own bars unless genuinely necessary */
.metrics .card,.quickgrid .card{
  overflow:hidden;
}

/* Visible but subtle internal scrollbars */
.tablewrap::-webkit-scrollbar,.card::-webkit-scrollbar,.side-scroll::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.tablewrap::-webkit-scrollbar-track,.card::-webkit-scrollbar-track,.side-scroll::-webkit-scrollbar-track{
  background:#071729;
}
.tablewrap::-webkit-scrollbar-thumb,.card::-webkit-scrollbar-thumb,.side-scroll::-webkit-scrollbar-thumb{
  background:#5f7892;
  border-radius:10px;
  border:2px solid #071729;
}

/* Mobile may naturally need page flow */
@media(max-width:760px){
  html,body,#app{height:auto;min-height:100%;overflow:auto !important}
  .login{height:auto !important;min-height:100vh !important}
  .login-right{height:100vh}
  .shell{height:auto !important;min-height:100vh !important;overflow:visible !important}
  .main{height:auto !important;overflow:visible !important;display:block}
  .content{height:auto;overflow:visible !important}
  .sidebar{height:auto !important;max-height:none !important}
}

/* POST-LOGIN SIDEBAR LOGO FIT — show complete approved logo */
.concept-brand{
  height:150px !important;
  min-height:150px !important;
  padding:6px 8px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border-bottom:1px solid #183653 !important;
}
.exact-logo-wrap{
  width:100% !important;
  height:132px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border-radius:8px !important;
  background:#07182b !important;
}
.exact-logo-wrap>img{
  width:100% !important;
  height:100% !important;
  max-width:235px !important;
  max-height:132px !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  border-radius:8px !important;
  box-shadow:none !important;
}

/* =========================================================
   SB Marine Systems - functional review additions
   ========================================================= */
.top-title{display:flex;flex-direction:column;gap:3px}.top-title>span{font-size:11px;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:8px}.switch-btn{background:#0f3457;color:#fff;border:1px solid #315a7c;border-radius:9px;padding:9px 11px;font-weight:800;cursor:pointer}.switch-btn:hover{background:#155083}
.select-screen{height:100vh;background:radial-gradient(circle at 15% 15%,#12385e 0,#08182a 42%,#050f1c 100%);overflow:hidden}.select-top{height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #27445f;background:#071525dd}.select-top img{width:210px;height:55px;object-fit:contain}.select-top>div{display:flex;align-items:center;gap:9px}.select-top select{background:#0d2139;color:#fff;border:1px solid #365a7b;border-radius:9px;padding:9px 12px}.select-body{max-width:1180px;margin:0 auto;padding:clamp(35px,8vh,90px) 28px}.select-body h1{font-size:38px;margin:0 0 8px}.vessel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.vessel-card{appearance:none;text-align:left;color:#fff;background:linear-gradient(145deg,#102947,#0b1d34);border:1px solid #315878;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px;cursor:pointer;box-shadow:0 18px 45px #0003;transition:.18s}.vessel-card:hover{transform:translateY(-3px);border-color:#188eed}.vessel-card .ship-icon{font-size:30px}.vessel-card b{font-size:22px}.vessel-card small{color:#a9bfd2}.vessel-card em{margin-top:10px;color:#2ca6ff;font-style:normal;font-weight:900}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.page-head h1{margin:0}.page-head .muted{margin:5px 0 0}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}.mini,.file-link{border:1px solid #356187;background:#103a60;color:#eaf5ff;border-radius:7px;padding:6px 8px;font-size:11px;font-weight:800;cursor:pointer}.mini:hover,.file-link:hover{background:#16558a}.mini.danger{border-color:#74424a;background:#4a2630}.file-link{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.check-card{color:#fff;text-align:left;background:linear-gradient(145deg,#102947,#0b1d34);border:1px solid #2c4d6e;border-radius:14px;padding:16px;cursor:pointer}.check-card.selected,.check-card:hover{border-color:#138ef2;box-shadow:0 0 0 1px #138ef244}.check-card h3{margin:0 0 12px}.check-card .badge{margin-right:5px}.check-detail{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check-detail ul{padding-left:20px;line-height:1.8}
.maintenance-metrics{grid-template-columns:repeat(2,minmax(180px,260px))!important}
.ship-summary{display:flex;flex-direction:column;gap:8px}.ship-summary b{font-size:22px}.ship-summary .badge{width:max-content}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:12px}.formgrid label,.upload-label{font-size:12px;font-weight:800;color:#c8d8e6}.formgrid input,.formgrid select,.upload-label input{width:100%;margin-top:6px;padding:11px;border-radius:8px;border:1px solid #3b6387;background:#081b30;color:#fff}.formgrid .wide{grid-column:1/-1}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.xbtn{background:transparent;border:0;color:#fff;font-size:28px;cursor:pointer}.modal h2{margin:0}.empty{text-align:center!important;color:var(--muted);padding:22px!important}
@media(max-width:1000px){.vessel-grid,.check-grid{grid-template-columns:1fr 1fr}.top-title>span{display:none}}
@media(max-width:760px){.select-screen{overflow:auto}.select-top{padding:0 12px}.select-top img{width:150px}.select-top .userchip{display:none}.vessel-grid,.check-grid,.check-detail,.formgrid{grid-template-columns:1fr}.formgrid .wide{grid-column:auto}.topbar{padding:0 10px}.switch-btn{font-size:0}.switch-btn::after{content:'⇄';font-size:18px}.top-actions .userchip{display:none}}