/* Tawings Fleet – layout v8: side menu on computers and tablets, sticky top menu on phones,
   clear active colour, cleaner panels. Loaded after the app's own styles, so it only overrides looks. */
:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --line:#E1E6EE; --sunk:#EEF2F7; --ink:#14203A; --muted:#5E6B7E;
  --accent:#16264A; --accent-ink:#FFFFFF; --gold:#C8901E; --gold-soft:#FBF1DC; --nav-active:#16264A; --nav-active-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 18px rgba(16,24,40,.06);
  --rail:236px; --topbar:58px; --strip:50px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1520; --surface:#15202D; --line:#243244; --sunk:#1B2838; --ink:#E5ECF3; --muted:#93A3B5;
  --accent:#E3AC3C; --accent-ink:#141C2B; --gold:#E3AC3C; --gold-soft:#3A2C12; --nav-active:#E3AC3C; --nav-active-ink:#141C2B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.25)}}
:root[data-theme="dark"]{
  --bg:#0D1520; --surface:#15202D; --line:#243244; --sunk:#1B2838; --ink:#E5ECF3; --muted:#93A3B5;
  --accent:#E3AC3C; --accent-ink:#141C2B; --gold:#E3AC3C; --gold-soft:#3A2C12; --nav-active:#E3AC3C; --nav-active-ink:#141C2B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.25)}

body{background:var(--bg); -webkit-font-smoothing:antialiased}

/* ---------- menu (shared) ---------- */
nav.tabs{background:var(--surface)!important; border:0!important; z-index:12!important}
nav.tabs button{font-family:var(--body)!important; font-weight:600!important; text-transform:none!important; letter-spacing:0!important; line-height:1.2!important;
  color:var(--muted)!important; background:transparent!important; box-shadow:none!important; border:0!important; border-radius:9px!important;
  display:flex!important; align-items:center; gap:11px; white-space:nowrap; transition:background .15s,color .15s,transform .08s; -webkit-tap-highlight-color:transparent}
nav.tabs button[hidden]{display:none!important}
nav.tabs button:hover{background:var(--sunk)!important; color:var(--ink)!important}
nav.tabs button:active{transform:scale(.97); background:var(--gold-soft)!important; color:var(--ink)!important}
/* the open page: filled navy, gold marker, white text */
nav.tabs button[aria-selected="true"]{background:var(--nav-active)!important; color:var(--nav-active-ink)!important; box-shadow:0 6px 14px -8px rgba(22,38,74,.7)!important}
nav.tabs button[aria-selected="true"]::before{background-color:var(--gold)!important}
nav.tabs button:focus-visible{outline:2px solid var(--gold)!important; outline-offset:2px}
/* back office entry and exit: gold */
nav.tabs button.bo{color:#9A6A0E!important; background:var(--gold-soft)!important}
nav.tabs button.bo:hover{background:#F6E3B9!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.tabs button.bo{color:var(--gold)!important}}

/* menu icons */
nav.tabs button::before{content:""; flex:0 0 19px; width:19px; height:19px; background-color:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat}
nav.tabs button[data-v="new"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='2.5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
nav.tabs button[data-v="appr"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3C/svg%3E")}
nav.tabs button[data-v="att"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.3-5.5 6.5-5.5s5.7 2 6.5 5.5'/%3E%3Cpath d='M16 7.5a3 3 0 0 1 0 5.5M18.5 15c1.6.8 2.6 2.5 3 5'/%3E%3C/svg%3E")}
nav.tabs button[data-v="day"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
nav.tabs button[data-v="done"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
nav.tabs button[data-v="exp"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E")}
nav.tabs button[data-v="rep"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
nav.tabs button[data-v="inv"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 9v.01M18 15v.01'/%3E%3C/svg%3E")}
nav.tabs button[data-v="rates"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E")}
nav.tabs button#boBtn{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E")}
nav.tabs button#exitBtn{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E")}

/* ---------- panels and content: sharper ---------- */
.panel{border-color:transparent!important; box-shadow:var(--shadow); border-radius:12px!important; padding:18px!important}
.paper{box-shadow:var(--shadow); border-color:transparent!important}
h2{letter-spacing:.04em}
input,select,textarea{background:var(--surface)!important; border-color:var(--line)!important; border-radius:9px!important}
input:focus,select:focus,textarea:focus{outline:none!important; border-color:var(--gold)!important; box-shadow:0 0 0 3px rgba(200,144,30,.18)}
button{border-radius:9px}
button.primary{box-shadow:0 6px 14px -8px rgba(22,38,74,.6)}
.tile{border-color:var(--line)!important; border-radius:10px!important; background:var(--surface)}
th{background:var(--sunk)}
.toast{bottom:calc(22px + env(safe-area-inset-bottom,0px))!important; border-radius:10px!important; box-shadow:var(--shadow)}
header .brand .badge{background:#fff!important; border-color:var(--line)!important}
#userBtn{border-radius:99px!important; padding:6px 12px!important}
#conn{font-size:12.5px}

/* ---------- computers and tablets: side menu ---------- */
@media (min-width:861px){
  nav.tabs{position:fixed!important; top:0!important; bottom:0!important; left:0!important; right:auto!important; width:var(--rail);
    display:flex!important; flex-direction:column; gap:3px; overflow-y:auto;
    padding:96px 14px max(18px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))!important;
    border-right:1px solid var(--line)!important; box-shadow:none}
  nav.tabs::before{content:""; position:absolute; left:18px; right:18px; top:22px; height:46px; background:url("icons/logo.png") left center/contain no-repeat}
  nav.tabs::after{content:""; position:absolute; left:14px; right:14px; top:82px; border-top:1px solid var(--line)}
  nav.tabs button{width:100%!important; padding:11px 12px!important; font-size:14.5px!important; justify-content:flex-start}
  nav.tabs #boBtn, nav.tabs #exitBtn{margin-top:auto}
  .wrap{max-width:1120px!important; margin-left:var(--rail)!important; margin-right:auto!important; padding:22px 36px 48px!important}
  @supports (width:max(1px,2px)){ .wrap{margin-left:max(var(--rail), calc(var(--rail) + (100vw - var(--rail) - 1120px)/2))!important} }
  header{background:transparent; margin-bottom:18px!important}
  header .brand .badge{display:none}
  #userPanel{top:60px!important}
}

/* ---------- phones: top bar + sticky menu strip ---------- */
@media (max-width:860px){
  .wrap{padding-top:calc(var(--topbar) + var(--strip) + 14px + env(safe-area-inset-top,0px))!important; padding-bottom:28px!important}
  header{position:fixed; left:0; right:0; top:0; z-index:13; margin:0!important; height:calc(var(--topbar) + env(safe-area-inset-top,0px)); box-sizing:border-box;
    padding:env(safe-area-inset-top,0px) max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));
    background:var(--surface); flex-wrap:nowrap!important; border-bottom:1px solid var(--line)}
  header .brand img{height:28px!important}
  header .brand h1{font-size:20px!important}
  header .flex{flex-wrap:nowrap}
  #conn{max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  nav.tabs{position:fixed!important; top:calc(var(--topbar) + env(safe-area-inset-top,0px))!important; bottom:auto!important; left:0!important; right:0!important;
    display:flex!important; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; height:var(--strip); align-items:center;
    padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))!important;
    border-bottom:1px solid var(--line)!important; box-shadow:0 6px 14px -12px rgba(16,24,40,.35)}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{flex:0 0 auto; padding:8px 13px!important; font-size:14px!important; border-radius:99px!important; gap:7px}
  nav.tabs button::before{flex-basis:16px; width:16px; height:16px}
  #userPanel{position:fixed!important; top:calc(var(--topbar) + env(safe-area-inset-top,0px) + 6px)!important; z-index:14!important}
}
@media (prefers-reduced-motion:reduce){nav.tabs button{transition:none}}