:root {
    --navy-950: #081d2c;
    --navy-900: #102a43;
    --navy-700: #1e4662;
    --teal-700: #0e7490;
    --teal-100: #d8f0ef;
    --orange-500: #f97316;
    --orange-100: #ffedd5;
    --paper: #f5f4ef;
    --surface: #fffdf7;
    --rule: #d6dcd8;
    --muted: #61717d;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--navy-900);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    background-color: var(--paper);
}

.font-mono,
.data-figure {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 3px;
}

.signal-line {
    position: relative;
}

.signal-line::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 3px;
    margin-top: 0.7rem;
    background: var(--orange-500);
}

/* Login: a quiet equipment label with one high-visibility signal edge. */
.login-shell {
    background:
        radial-gradient(circle at 12% 18%, rgba(14, 116, 144, 0.10), transparent 27rem),
        linear-gradient(135deg, #f8f7f2 0%, var(--paper) 55%, #e8efec 100%) !important;
}

.login-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: 4px !important;
    box-shadow: 0 1.5rem 3rem rgba(16, 42, 67, 0.12), 0 0 0 8px rgba(255, 253, 247, 0.75);
    background: var(--surface) !important;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--orange-500);
}

.login-kicker {
    color: var(--teal-700);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.login-card label {
    color: var(--navy-900) !important;
    letter-spacing: -0.02em;
}

.login-card input {
    border-color: var(--rule) !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    color: var(--navy-950);
}

.login-card input::placeholder {
    color: #82909a;
}

.login-card input:focus {
    border-color: var(--teal-700) !important;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.16) !important;
}

.login-submit {
    border-radius: 3px !important;
    background: var(--navy-900) !important;
    box-shadow: 0 8px 0 rgba(8, 29, 44, 0.12) !important;
    letter-spacing: 0.01em;
}

.login-submit:hover {
    background: var(--teal-700) !important;
    transform: translateY(-2px) !important;
}

/* Reports: paper canvas, instrument-panel header and data-first surfaces. */
.reports-shell {
    background:
        linear-gradient(rgba(16, 42, 67, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 67, 0.035) 1px, transparent 1px),
        var(--paper) !important;
    background-size: 28px 28px;
}

.reports-header {
    position: relative;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.reports-kicker {
    color: var(--teal-700);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.reports-header::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: min(22rem, 42vw);
    height: 3px;
    background: var(--orange-500);
}

.reports-shell .bg-white {
    background-color: rgba(255, 253, 247, 0.94) !important;
    border-color: var(--rule) !important;
    border-radius: 4px !important;
    box-shadow: 0 0.75rem 1.5rem rgba(16, 42, 67, 0.06) !important;
}

.reports-shell .bg-gray-100 {
    background-color: #edf1ef !important;
}

.reports-shell .bg-gray-50 {
    background-color: #f1f3ef !important;
}

.reports-shell .bg-gradient-to-br.from-blue-600 {
    background: linear-gradient(135deg, var(--navy-900), var(--teal-700)) !important;
    border-color: var(--navy-900) !important;
}

.reports-shell .bg-gradient-to-br.from-green-600 {
    background: linear-gradient(135deg, #166534, var(--teal-700)) !important;
    border-color: #166534 !important;
}

.reports-shell h1,
.reports-shell h2,
.reports-shell h3 {
    letter-spacing: -0.035em;
}

.reports-shell table {
    font-variant-numeric: tabular-nums;
}

.reports-shell thead th {
    color: var(--navy-700) !important;
    letter-spacing: 0.11em;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.65rem;
}

.reports-shell tbody tr {
    border-color: #e0e5e2 !important;
}

.reports-shell tbody tr:hover {
    background-color: #f2f7f5 !important;
}

.reports-shell .text-green-600,
.reports-shell .text-green-700 {
    color: #16704b !important;
}

.reports-shell .text-blue-600 {
    color: var(--teal-700) !important;
}

.reports-shell .text-purple-600 {
    color: #66529b !important;
}

.reports-shell button,
.reports-shell a {
    border-radius: 3px;
}

.reports-shell .modal-surface {
    background: var(--surface) !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (min-width: 768px) {
    .container-tablet {
        max-width: 1024px;
    }
}

.uppercase-input {
    text-transform: uppercase;
}

/* Maré de Aço shell: a compact instrument rail, not a generic admin sidebar. */
body.app-shell {
    --rail-width: 17rem;
    --app-nav-top-inset: 1rem;
    --app-brand-content-height: 2.5rem;
    --app-brand-content-center: 1.25rem;
    --app-brand-block-height: calc(.2rem + var(--app-brand-content-height) + 1.35rem + 1px);
    --app-header-height: calc(var(--app-nav-top-inset) + var(--app-brand-block-height));
    background: var(--paper);
    overflow-x: hidden;
}
.app-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: var(--rail-width);
    display: flex;
    flex-direction: column;
    padding: var(--app-nav-top-inset) 0.85rem 1.1rem;
    color: #dbe9e7;
    background: var(--navy-950);
    border-right: 1px solid rgba(216, 240, 239, .14);
    box-shadow: 0.8rem 0 2rem rgba(8, 29, 44, .13);
    transition: width .2s ease, transform .2s ease;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.app-nav::-webkit-scrollbar { display:none; width:0; height:0; }
.app-nav__brand { display:flex; align-items:center; gap:.7rem; height:var(--app-brand-content-height); box-sizing:content-box; flex:none; padding:.2rem .45rem 1.35rem; border-bottom:1px solid rgba(216,240,239,.14); }
.app-nav__brand img { width: 2.5rem; height:2.5rem; object-fit:contain; }
.app-nav__brand strong { font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; }
.app-nav__brand span { display:block; color:#7eb6b5; font: .62rem "IBM Plex Mono", monospace; letter-spacing:.08em; margin-top:.15rem; }
.app-nav__section { color:#7eb6b5; font:600 .62rem "IBM Plex Mono", monospace; letter-spacing:.13em; text-transform:uppercase; padding:1.3rem .65rem .45rem; }
.app-nav__link { display:flex; align-items:center; gap:.75rem; min-height:2.55rem; padding:.55rem .65rem; margin:.12rem 0; color:#c7d8d6; border-left:3px solid transparent; border-radius:2px; font-size:.86rem; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.app-nav__link:hover, .app-nav__link[aria-current="page"] { color:#fff; background:rgba(14,116,144,.28); border-left-color:var(--orange-500); }
.app-nav__link svg { width:1.08rem; height:1.08rem; flex:none; opacity:.88; }
.app-nav-tooltip { position:fixed; z-index:80; max-width:15rem; padding:.42rem .62rem; border:1px solid rgba(216,240,239,.28); border-radius:3px; color:#f4fbfa; background:var(--navy-900); box-shadow:0 .45rem 1rem rgba(8,29,44,.24); font:600 .72rem "IBM Plex Mono", monospace; letter-spacing:.025em; pointer-events:none; white-space:nowrap; }
.app-nav__context { margin-top:.85rem; padding:.85rem .65rem 1.1rem; border-top:1px solid rgba(216,240,239,.14); border-bottom:1px solid rgba(216,240,239,.14); }
.app-nav__context label { display:block; margin-bottom:.35rem; color:#7eb6b5; font:600 .62rem "IBM Plex Mono", monospace; letter-spacing:.08em; text-transform:uppercase; }
.app-nav__context select { width:100%; border:1px solid #52788a; border-radius:2px; padding:.55rem; background:#102a43; color:#fff; font-size:.78rem; }
.app-nav__footer { border-top:1px solid rgba(216,240,239,.14); padding-top:.85rem; }
.app-nav__footer-row { display:flex; align-items:center; justify-content:space-between; gap:.45rem; min-width:0; }
.app-nav__operator { min-width:0; flex:1 1 auto; padding:.5rem .65rem .8rem; color:#e9f3f1; font-size:.78rem; overflow:hidden; }
.app-nav__operator small { display:block; color:#7eb6b5; font: .62rem "IBM Plex Mono", monospace; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.2rem; }
.app-nav__operator-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-nav__logout { display:inline-flex; align-items:center; justify-content:center; flex:none; width:2.35rem; min-height:2.35rem; margin:.35rem 0 .8rem; padding:.55rem 0; color:#f6b39a; }
.app-nav__logout svg { width:1.08rem; height:1.08rem; }
.app-nav__logout:focus-visible { outline:2px solid #d8f0ef; outline-offset:3px; }
.app-nav-scroll-cues { position:fixed; inset:0 auto 0 0; z-index:65; display:flex; flex-direction:column; justify-content:space-between; width:var(--rail-width); padding:.25rem 0; pointer-events:none; transition:width .2s ease; }
.app-nav-scroll-cue { display:flex; align-items:center; justify-content:center; width:100%; height:1.35rem; color:#d8f0ef; opacity:0; transition:opacity .18s ease; }
.app-nav-scroll-cue svg { width:1rem; height:1rem; filter:drop-shadow(0 1px 2px rgba(8,29,44,.75)); }
.app-nav-scroll-cue--top { background:linear-gradient(to bottom, rgba(8,29,44,.92), transparent); }
.app-nav-scroll-cue--bottom { background:linear-gradient(to top, rgba(8,29,44,.92), transparent); }
.app-nav-scroll-cue.is-visible { opacity:1; }
.app-nav-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; position:fixed; top:calc(var(--app-nav-top-inset) + .2rem + var(--app-brand-content-center)); left:var(--rail-width); z-index:70; width:1.8rem; height:2.2rem; margin:0; padding:0; border:1px solid #8eb7b2; border-radius:.45rem; color:#dbe9e7; background:#081d2c; box-shadow:0 .28rem .8rem rgba(8,29,44,.3); cursor:pointer; transition:left .2s ease, transform .2s ease, background-color .15s ease, border-color .15s ease; }
.app-nav-toggle--rail { transform:translate(-50%,-50%); }
.app-nav-toggle--header { display:none; }
.app-nav-toggle:hover { border-color:#d8f0ef; background:#0e7490; color:#fff; }
.app-nav-toggle:focus-visible { outline:3px solid #d8f0ef; outline-offset:3px; box-shadow:0 0 0 1px #102a43, 0 .28rem .8rem rgba(8,29,44,.3); }
.app-screen-header { position:sticky; top:0; z-index:40; display:flex; align-items:center; box-sizing:border-box; width:100%; height:var(--app-header-height); min-height:var(--app-header-height); overflow:hidden; padding-top:0 !important; padding-bottom:0 !important; }
.app-screen-header--surface { background:var(--surface); }
.app-screen-header--dark { background:#1f2937; }
.app-screen-header > .container,
.app-screen-header > .app-screen-header__inner,
.app-screen-header__inner { display:flex; align-items:center; box-sizing:border-box; width:100%; height:100%; min-width:0; }
.app-screen-header.flex-col,
.app-screen-header__inner.flex-col { flex-direction:row; justify-content:space-between; flex-wrap:nowrap; }
.app-screen-header > .container { padding-top:0 !important; padding-bottom:0 !important; }
.app-screen-header img { max-height:2.5rem; width:auto; }
.app-screen-header h1,
.app-screen-header h2 { min-width:0; line-height:1.2; }
.app-screen-header h1 { overflow:hidden; font-size:clamp(1rem,2vw,1.5rem); text-overflow:ellipsis; white-space:nowrap; }
.app-screen-header h2 { font-size:clamp(1rem,1.8vw,1.35rem); }
.app-screen-header p { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-screen-header .flex.mb-2 { margin-bottom:0; }
.app-screen-header .text-lg { font-size:.875rem; line-height:1.2; }
.app-screen-shell { padding-top:0 !important; }
.embarcacoes-header .app-screen-header__inner > .flex { align-items:center; }
.embarcacoes-page { background:var(--paper); }
.embarcacoes-header { background:linear-gradient(135deg, var(--navy-950), var(--navy-900) 58%, var(--teal-700)); }
.embarcacoes-header__kicker { color:#a7d7d0; }
.embarcacoes-header__subtitle { color:#d4e7e4; }
.embarcacoes-modal { z-index:70; }
.system-confirmation { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(8,29,44,.58); }
.system-confirmation[hidden] { display:none; }
.system-confirmation__panel { width:min(100%, 32rem); border:1px solid var(--rule); border-radius:5px; background:var(--surface); box-shadow:0 1.5rem 3rem rgba(8,29,44,.28); }
.system-confirmation__header { display:flex; gap:.8rem; align-items:flex-start; padding:1.25rem 1.35rem 1rem; border-bottom:1px solid var(--rule); }
.system-confirmation__icon { display:inline-flex; align-items:center; justify-content:center; flex:none; width:2rem; height:2rem; border-radius:50%; color:#fff; background:var(--orange-500); font-weight:700; }
.system-confirmation__title { margin:0; color:var(--navy-950); font-size:1.05rem; font-weight:700; line-height:1.45; white-space:pre-line; }
.system-confirmation__body { display:flex; justify-content:flex-end; gap:.65rem; padding:1rem 1.35rem 1.25rem; }
.system-confirmation__button { min-width:6rem; border:1px solid var(--rule); border-radius:3px; padding:.6rem .9rem; font-weight:600; cursor:pointer; }
.system-confirmation__button--cancel { color:var(--navy-700); background:#edf1ef; }
.system-confirmation__button--confirm { color:#fff; border-color:var(--navy-900); background:var(--navy-900); }
.system-confirmation__button--confirm:hover { background:var(--teal-700); }
.app-main { min-height:100vh; margin-left:var(--rail-width); }
body.nav-collapsed { --rail-width: 4.6rem; }
body.nav-collapsed .app-nav__brand strong, body.nav-collapsed .app-nav__brand span, body.nav-collapsed .app-nav__section, body.nav-collapsed .app-nav__operator, body.nav-collapsed .app-nav__context { display:none; }
body.nav-collapsed .app-nav__link span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }
body.nav-collapsed .app-nav__link { justify-content:center; padding-left:0; padding-right:0; }
body.nav-collapsed .app-nav__footer-row { justify-content:center; }
body.nav-collapsed .app-nav-toggle--rail { transform:translate(-50%,-50%) rotate(180deg); }
@media (max-width: 1023px) {
    body.app-shell { --rail-width: 0px; }
    .app-nav { width:min(18rem, 86vw); transform:translateX(-105%); padding-top:1rem; }
    body.nav-open .app-nav { transform:translateX(0); }
    .app-nav-scroll-cues { display:none; width:min(18rem, 86vw); }
    body.nav-open .app-nav-scroll-cues { display:flex; }
    .app-nav-toggle--rail { display:none; }
    .app-nav-toggle--header { display:inline-flex; position:static; top:auto; left:auto; transform:rotate(180deg); }
     .app-screen-header--surface .app-nav-toggle--header:focus-visible { outline-color:#102a43; }
    .app-main { margin-left:0; padding-top:0; }
    .app-nav-tooltip { display:none !important; }
    body.app-shell .app-nav__brand strong,
    body.app-shell .app-nav__brand span,
    body.app-shell .app-nav__section,
    body.app-shell .app-nav__operator,
    body.app-shell .app-nav__context { display:block; }
    body.app-shell .app-nav__link { justify-content:flex-start; padding:.55rem .65rem; }
    body.app-shell .app-nav__link span { display:inline; position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto; white-space:normal; border:0; }
    body.nav-open .app-nav-toggle--header { transform:none; }
    .app-nav-backdrop { position:fixed; inset:0; z-index:50; background:rgba(8,29,44,.48); }
}
@media (max-width: 639px) {
    .embarcacoes-header__subtitle { display:none; }
    .app-screen-header h1,
    .app-screen-header h2 { font-size:1.1rem; }
}
@media (min-width:1024px) {
    body.app-shell .container { max-width: 1380px; }
    body.app-shell .shadow-lg { box-shadow:0 5px 14px rgba(16,42,67,.10); }
}
@media print {
    .app-screen-header { position:static; box-shadow:none !important; }
    body.app-shell .app-nav,
    body.app-shell .app-nav-scroll-cues,
    body.app-shell .app-nav-toggle,
    body.app-shell .app-nav-backdrop { display:none !important; }
    body.app-shell .app-main { margin-left:0 !important; padding-top:0 !important; }
}

/* Reports header hierarchy: screen, vessel context, then operator metadata. */
.reports-header {
    height:auto !important;
    min-height:var(--app-header-height);
    overflow:visible !important;
    align-items:stretch;
    padding: .7rem 0 1rem !important;
}

.reports-header__inner {
    height:auto !important;
    min-height:var(--app-header-height);
    align-items:center;
    gap:clamp(.6rem, 1.5vw, 1.4rem);
}

.reports-header__brand {
    align-self:center;
    gap:clamp(.45rem, 1vw, .9rem);
}

.reports-header__logo {
    width:auto;
    height:clamp(2.75rem, 5vw, 4rem);
    max-height:none !important;
}

.reports-header__content {
    flex:1 1 auto;
    padding:.1rem 0;
}

.reports-header .reports-kicker {
    margin:0 0 .28rem;
    font-size:clamp(.58rem, .7vw, .68rem);
    line-height:1.2;
}

.reports-header__title {
    margin:0;
    color:var(--navy-950) !important;
    font-size:clamp(1.3rem, 2.5vw, 2.15rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.045em !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.reports-header__context {
    display:flex;
    align-items:baseline;
    gap:.55rem;
    min-width:0;
    margin-top:.38rem;
    line-height:1.2;
}

.reports-header__context-label {
    flex:none;
    color:var(--muted);
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.reports-header__vessel {
    min-width:0;
    overflow:hidden;
    color:var(--teal-700);
    font-size:clamp(.9rem, 1.35vw, 1.15rem);
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.reports-header__status {
    flex:none;
    display:inline-flex;
    align-items:center;
    padding:.22rem .48rem;
    border:1px solid #cfc4e8;
    border-radius:999px;
    color:#66529b;
    background:#f1edfa;
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.06em;
    line-height:1;
    text-transform:uppercase;
}

.reports-header__meta {
    margin:.4rem 0 0;
    color:var(--muted);
    font-size:clamp(.66rem, .85vw, .78rem);
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media (max-width: 639px) {
    .reports-header {
        padding: .55rem 0 .85rem !important;
    }

    .reports-header__inner {
        gap:.55rem;
    }

    .reports-header__brand {
        gap:.4rem;
    }

    .reports-header__logo {
        height:2.65rem;
    }

    .reports-header .reports-kicker {
        margin-bottom:.2rem;
        font-size:.55rem;
        letter-spacing:.1em;
    }

    .reports-header__title {
        font-size:1.2rem !important;
    }

    .reports-header__context {
        gap:.38rem;
        margin-top:.3rem;
    }

    .reports-header__context-label {
        font-size:.53rem;
        letter-spacing:.06em;
    }

    .reports-header__vessel {
        font-size:.86rem;
    }

    .reports-header__status {
        padding:.2rem .38rem;
        font-size:.52rem;
    }

    .reports-header__meta {
        margin-top:.3rem;
        font-size:.62rem;
    }
}