/*
 * MINPES — Modern Maritime Theme
 * Digital-government design system for the Guinea-Bissau fisheries authority
 * (Ministério das Pescas). Token-driven; built to extend Perfex, not fight it.
 *
 * Loaded after Perfex/Bootstrap, so component rules win by source order —
 * !important is used only where Perfex ships inline or high-specificity styles.
 */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --mp-ocean:       #0B2D48;   /* sidebar, top bar */
    --mp-ocean-700:   #0A2540;   /* sidebar logo / deepest */
    --mp-primary:     #0A6CB8;   /* primary actions, links, active */
    --mp-primary-700: #085A99;   /* hover / pressed */
    --mp-primary-100: #E1EEF8;   /* tints, selected rows */
    --mp-accent:      #00897B;   /* teal — secondary accent */
    --mp-accent-700:  #00695C;

    /* Semantic */
    --mp-success: #2E7D32;  --mp-success-100: #E6F4EA;
    --mp-warning: #B26A00;  --mp-warning-100: #FDF3E2;
    --mp-danger:  #C62828;  --mp-danger-100:  #FCE8E8;
    --mp-info:    #0277BD;  --mp-info-100:    #E3F2FD;

    /* Neutrals */
    --mp-ink:    #102A43;   /* headings */
    --mp-body:   #334E68;   /* body text */
    --mp-muted:  #627D98;   /* secondary text */
    --mp-line:   #D9E2EC;   /* borders */
    --mp-surface:#FFFFFF;
    --mp-canvas: #F0F4F8;   /* page background */

    /* System */
    --mp-font:    "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mp-radius:  8px;
    --mp-radius-sm: 6px;
    --mp-shadow-sm: 0 1px 2px rgba(16,42,67,.08);
    --mp-shadow-md: 0 4px 12px rgba(16,42,67,.10);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
    font-family: var(--mp-font);
    color: var(--mp-body);
    background-color: var(--mp-canvas);
}
#wrapper { background-color: var(--mp-canvas); }
.content { color: var(--mp-body); }

h1, h2, h3, h4, h5,
.page-title, .panel-title {
    color: var(--mp-ink);
    font-family: var(--mp-font);
}
h4.page-title {
    font-size: 22px;
    font-weight: 600;
    border-bottom: 2px solid var(--mp-line);
    padding-bottom: 10px;
}
.text-muted, .text-info-muted { color: var(--mp-muted) !important; }

/* ── Links ─────────────────────────────────────────────────────────────── */
a { color: var(--mp-primary); }
a:hover, a:focus { color: var(--mp-primary-700); }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
#sidebar {
    background: var(--mp-ocean) !important;
}
.sidebar-logo, #sidebar .sidebar-logo {
    background: var(--mp-ocean-700) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#sidebar .sidebar-menu li a { color: rgba(255,255,255,.82) !important; }
#sidebar .sidebar-menu > li:hover > a,
.sidebar-menu li a:hover { background: rgba(255,255,255,.08) !important; }
#sidebar .sidebar-menu > li.active > a {
    background: rgba(255,255,255,.10) !important;
    border-left: 3px solid var(--mp-accent) !important;
    color: #fff !important;
}
#sidebar .sidebar-menu .children { background: rgba(0,0,0,.16) !important; }
#sidebar .sidebar-menu .children li a { color: rgba(255,255,255,.72) !important; }
#sidebar .sidebar-menu .children li.active a { color: #fff !important; }

/* ── Top header ────────────────────────────────────────────────────────── */
.top-header,
.top-header .navbar-header,
#top-search { background: var(--mp-surface) !important; }
.top-header { border-bottom: 1px solid var(--mp-line) !important; box-shadow: var(--mp-shadow-sm); }
.navbar-header .navbar-toggle { color: var(--mp-ink) !important; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--mp-radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary {
    background-color: var(--mp-primary);
    border-color: var(--mp-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background-color: var(--mp-primary-700);
    border-color: var(--mp-primary-700);
    color: #fff;
}
.btn-info {
    background-color: var(--mp-accent);
    border-color: var(--mp-accent);
    color: #fff;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: var(--mp-accent-700);
    border-color: var(--mp-accent-700);
    color: #fff;
}
.btn-success {
    background-color: var(--mp-success);
    border-color: var(--mp-success);
}
.btn-success:hover, .btn-success:focus { background-color: #1f5b25; border-color: #1f5b25; }
.btn-danger  { background-color: var(--mp-danger);  border-color: var(--mp-danger); }
.btn-default {
    background-color: #fff;
    border-color: var(--mp-line);
    color: var(--mp-body);
}
.btn-default:hover, .btn-default:focus {
    background-color: var(--mp-canvas);
    border-color: #b9c7d6;
    color: var(--mp-ink);
}
/* Accessible focus ring */
.btn:focus-visible,
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(10,108,184,.30);
}

/* ── Panels / cards ────────────────────────────────────────────────────── */
.panel_s, .panel-default {
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow-sm);
    background: var(--mp-surface);
}
.panel_s .panel-heading, .panel-default > .panel-heading {
    background: var(--mp-surface);
    border-bottom: 1px solid var(--mp-line);
    color: var(--mp-ink);
    font-weight: 600;
}
.panel-primary, .panel-info { border-color: var(--mp-line); }
.panel-primary > .panel-heading {
    background: var(--mp-primary);
    border-color: var(--mp-primary);
    color: #fff;
}
.panel-info > .panel-heading {
    background: var(--mp-info);
    border-color: var(--mp-info);
    color: #fff;
}

/* ── Tables (density + clarity for vessel / landing / license lists) ─────── */
.table > thead > tr > th,
.dt-table > thead > tr > th {
    background: var(--mp-canvas);
    color: var(--mp-ink);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 2px solid var(--mp-line) !important;
    padding: 10px 12px;
}
.table > tbody > tr > td,
.dt-table > tbody > tr > td {
    padding: 8px 12px;
    border-top: 1px solid var(--mp-line);
    vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fbfcfe; }
.table-hover > tbody > tr:hover > td,
.table > tbody > tr:hover > td { background-color: var(--mp-primary-100) !important; }
/* Right-align numeric/amount columns when marked */
.table td.text-right, .table th.text-right { text-align: right; }

/* ── Badges / labels / status ──────────────────────────────────────────── */
.label, .badge {
    font-weight: 600;
    border-radius: 4px;
    padding: 3px 8px;
    letter-spacing: .01em;
}
.label-primary { background-color: var(--mp-primary); }
.label-info    { background-color: var(--mp-accent); }
.label-success { background-color: var(--mp-success); }
.label-warning { background-color: var(--mp-warning); }
.label-danger  { background-color: var(--mp-danger); }

/* Soft status pills (approval / vessel / license states) */
.status-approved, .label-approved {
    background: var(--mp-success-100) !important; color: #1b5e20 !important;
    border-radius: 4px; padding: 3px 9px; font-weight: 600;
}
.status-pending, .label-pending {
    background: var(--mp-warning-100) !important; color: #8a4b00 !important;
    border-radius: 4px; padding: 3px 9px; font-weight: 600;
}
.status-rejected, .label-rejected {
    background: var(--mp-danger-100) !important; color: #b71c1c !important;
    border-radius: 4px; padding: 3px 9px; font-weight: 600;
}

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--mp-radius-sm); border-width: 1px; }
.alert-info    { background: var(--mp-info-100);    border-color: #b6dcf3; color: #0b4a72; }
.alert-success { background: var(--mp-success-100); border-color: #b7dfc0; color: #1b5e20; }
.alert-warning { background: var(--mp-warning-100); border-color: #f0d9a8; color: #8a4b00; }
.alert-danger  { background: var(--mp-danger-100);  border-color: #f1bcbc; color: #8e1c1c; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-control {
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius-sm);
    color: var(--mp-ink);
    box-shadow: none;
}
.form-control:focus {
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(10,108,184,.15);
}
.control-label, label { color: var(--mp-ink); font-weight: 500; }

/* Checkboxes / radios */
.checkbox-primary input[type=checkbox]:checked + label::before,
.checkbox-info input[type=checkbox]:checked + label::before,
.radio-info input[type=radio]:checked + label::before {
    background-color: var(--mp-primary);
    border-color: var(--mp-primary);
}

/* ── Nav tabs ──────────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--mp-line); }
.nav-tabs-horizontal .nav-tabs li.active a,
.nav-tabs li.active a,
.customer-profile-tabs li.active a {
    color: var(--mp-primary);
    border-bottom: 3px solid var(--mp-primary);
    font-weight: 600;
    background: transparent;
}
.nav-tabs li a:hover { color: var(--mp-primary); border-color: transparent; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination > li > a { color: var(--mp-primary); }
.pagination > li > a:hover,
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--mp-primary);
    border-color: var(--mp-primary);
    color: #fff;
}

/* ── Progress bars ─────────────────────────────────────────────────────── */
.progress { border-radius: 999px; background: var(--mp-line); height: 8px; }
.progress-bar { background-color: var(--mp-primary); }

/* ── Selectpicker ──────────────────────────────────────────────────────── */
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.active a {
    background: var(--mp-primary-100);
    color: var(--mp-primary-700);
}

/* ── Dashboard widgets ─────────────────────────────────────────────────── */
.widget-stats .widget-stats-icon { background: var(--mp-primary); }
.dash-card-sm { border-left: 4px solid var(--mp-primary); }
.minpes-widget-header { background: linear-gradient(135deg, var(--mp-ocean), var(--mp-primary)); color: #fff; }
.minpes-stat-card { border-left: 4px solid var(--mp-primary); background: var(--mp-surface); box-shadow: var(--mp-shadow-sm); }
.overall-approved { background: linear-gradient(135deg, var(--mp-primary-700), var(--mp-primary)) !important; }

/* ── Tailwind utility bridges (preflight is off; align tw-* to tokens) ───── */
.tw-bg-neutral-50  { background-color: var(--mp-surface) !important; }
.tw-bg-neutral-100 { background-color: var(--mp-canvas) !important; }

/* ── Section headings ──────────────────────────────────────────────────── */
.border-bottom { border-bottom-color: var(--mp-line) !important; }
.section-hdr   { border-left-color: var(--mp-primary) !important; }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mp-canvas); }
::-webkit-scrollbar-thumb { background: #aebfd0; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--mp-muted); }

/* ── Admin top header (#header) & its dropdown menus ───────────────────── */
#header {
    background: var(--mp-surface);
    border-bottom: 1px solid var(--mp-line);
    box-shadow: var(--mp-shadow-sm);
}
#header .dropdown-menu {
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow-md);
}
#header .dropdown-menu > li > a:hover,
#header .dropdown-menu > li > a:focus {
    background: var(--mp-primary-100);
    color: var(--mp-primary-700);
}
#header .dropdown-menu .active > a,
#header .dropdown-menu .active > a:hover { background: var(--mp-primary); color: #fff; }
/* Notification / timer count badges in the header */
#header .notification-count,
#header .label-danger,
.start_timer .label { background: var(--mp-danger); }

/* Setup / settings submenu text */
.sub-menu-text { color: var(--mp-ink); }
.sub-menu-item-active > a, .sub-menu-item.active > a { color: var(--mp-primary) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   CLIENT PORTAL (customers area) — scoped chrome to match the landing page.
   Shared components (buttons, panels, tables, forms, badges) inherit the
   rules above; only the client-specific navbar / footer / login need scoping.
   ══════════════════════════════════════════════════════════════════════════ */
body.customers { background: var(--mp-canvas); }

/* Top navigation — ocean bar like the landing header */
.customers .navbar-default.header {
    background: linear-gradient(160deg, var(--mp-ocean) 0%, var(--mp-ocean-700) 70%, #073049 100%);
    border: none;
    border-radius: 0;
    box-shadow: var(--mp-shadow-md);
    margin-bottom: 0;
}
.customers .navbar-default.header .navbar-nav > li > a {
    color: rgba(255,255,255,.82);
    font-weight: 500;
}
.customers .navbar-default.header .navbar-nav > li > a:hover,
.customers .navbar-default.header .navbar-nav > li > a:focus {
    color: #fff;
    background: rgba(255,255,255,.08);
}
.customers .navbar-default.header .navbar-nav > li.active > a,
.customers .navbar-default.header .navbar-nav > .open > a {
    color: #fff;
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 -3px 0 var(--mp-accent);
}
.customers .navbar-default.header .navbar-brand.logo { padding-top: 12px; padding-bottom: 12px; }
.customers .navbar-default.header .navbar-toggle { border-color: rgba(255,255,255,.3); }
.customers .navbar-default.header .navbar-toggle .icon-bar { background: #fff; }
.customers .navbar-default.header .navbar-toggle:hover,
.customers .navbar-default.header .navbar-toggle:focus { background: rgba(255,255,255,.12); }
.customers .client-profile-image-small { border: 2px solid rgba(255,255,255,.5); }

/* Dropdown menu under the avatar */
.customers .navbar-default.header .dropdown-menu { border: 1px solid var(--mp-line); box-shadow: var(--mp-shadow-md); border-radius: var(--mp-radius-sm); }
.customers .navbar-default.header .dropdown-menu > li > a { color: var(--mp-body); }
.customers .navbar-default.header .dropdown-menu > li > a:hover { background: var(--mp-primary-100); color: var(--mp-primary-700); }

/* Page content + panels */
.customers .login-heading,
.customers h1, .customers h2, .customers h3 { color: var(--mp-ink); }
.customers .panel_s { border: 1px solid var(--mp-line); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow-sm); }

/* Footer */
.customers .footer {
    background: var(--mp-surface);
    border-top: 1px solid var(--mp-line);
    color: var(--mp-muted);
    padding: 20px 0;
    margin-top: 40px;
}
.customers .footer a { color: var(--mp-primary); }

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN PAGES — shared split layout used by BOTH the admin login and the
   client-portal login so the two pages are visually identical.
   ══════════════════════════════════════════════════════════════════════════ */
.mp-login { min-height: 100vh; display: flex; background: var(--mp-canvas); }
.mp-login__brand, .mp-login__form { display: flex; flex-direction: column; }
.mp-login__brand {
    flex: 1 1 45%; position: relative; overflow: hidden; justify-content: center;
    padding: 56px 48px; color: #fff;
    background: linear-gradient(160deg, var(--mp-ocean) 0%, var(--mp-ocean-700) 55%, #073049 100%);
}
.mp-login__brand-inner { position: relative; z-index: 2; max-width: 460px; }
.mp-login__crest { margin-bottom: 28px; }
.mp-login__crest img { max-height: 76px; width: auto; display: block; }
.mp-login__crest .mp-crest-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 14px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); font-size: 30px;
}
.mp-login__ministry { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #7FB2DA; margin: 0 0 8px; font-weight: 600; }
.mp-login__title { font-size: 34px; line-height: 1.15; font-weight: 700; margin: 0 0 16px; color: #fff; }
.mp-login__tagline { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; max-width: 420px; }
.mp-login__republic { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.65); }
.mp-login__waves { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; opacity: .5; }
.mp-login__form { flex: 1 1 55%; justify-content: center; align-items: center; padding: 40px 20px; }
.mp-login__card { width: 100%; max-width: 420px; }
.mp-login__lang { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 18px; }
.mp-login__lang label { font-size: 12px; color: var(--mp-muted); margin: 0; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.mp-login__lang select { width: auto; min-width: 140px; height: 34px; padding: 4px 10px; font-size: 13px; }
.mp-login__heading { text-align: center; margin-bottom: 28px; }
.mp-login__heading h1 { font-size: 24px; font-weight: 700; color: var(--mp-ink); margin: 0 0 6px; }
.mp-login__heading p { color: var(--mp-muted); margin: 0; }
.mp-login__alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--mp-muted); }
.mp-login .company-logo { display: none; }

/* When the client login renders inside the themed layout, strip the chrome
   so the split layout fills the viewport (navbar/footer disabled server-side). */
body.customers_login { background: var(--mp-canvas); }
body.customers_login #wrapper,
body.customers_login #content { padding: 0 !important; margin: 0 !important; }
body.customers_login #content > .container { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
body.customers_login #content > .container > .row { margin: 0 !important; }
body.customers_login .footer, body.customers_login .header { display: none !important; }

@media (max-width: 991px) {
    .mp-login { flex-direction: column; }
    .mp-login__brand { flex: none; padding: 40px 28px 80px; text-align: center; }
    .mp-login__brand-inner { margin: 0 auto; }
    .mp-login__crest img, .mp-login__crest .mp-crest-fallback { margin: 0 auto; }
    .mp-login__title { font-size: 26px; }
    .mp-login__republic { display: none; }
}

/* ── Inactivity lock screen (admin) ────────────────────────────────────── */
#minpes-idle-overlay {
    position: fixed; inset: 0; z-index: 99999; display: none;
    align-items: center; justify-content: center;
    background: rgba(6,20,32,.78);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#minpes-idle-overlay .minpes-lock-box {
    background: var(--mp-surface); border-radius: 14px; width: 92%; max-width: 400px;
    padding: 32px 30px; text-align: center;
    box-shadow: 0 30px 70px -20px rgba(2,12,22,.6);
    border-top: 4px solid var(--mp-primary);
}
#minpes-idle-overlay .minpes-lock-icon { font-size: 40px; line-height: 1; margin-bottom: 12px; }
#minpes-idle-overlay h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--mp-ink); }
#minpes-idle-overlay p  { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--mp-body); }
#minpes-idle-overlay .form-control { text-align: center; margin-bottom: 6px; }
#minpes-idle-overlay .minpes-lock-err { display: none; color: var(--mp-danger); font-size: 13px; margin: 4px 0 12px; min-height: 16px; font-weight: 500; }
#minpes-idle-overlay .btn { margin-top: 8px; }
#minpes-idle-overlay .minpes-lock-logout { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--mp-muted); }
#minpes-idle-overlay .minpes-lock-logout:hover { color: var(--mp-danger); }

/* Blur & freeze the page behind the lock */
body.minpes-locked { overflow: hidden; }
body.minpes-locked #wrapper { filter: blur(6px); pointer-events: none; user-select: none; }

/* ── Print: institutional branding on official documents ───────────────── */
@media print {
    .ltr-institution .doc-title { color: var(--mp-ocean) !important; }
    .ltr-header { border-bottom-color: var(--mp-ocean) !important; }
    .highlight { border-left-color: var(--mp-primary) !important; background: var(--mp-primary-100) !important; }
    .reject    { border-left-color: var(--mp-danger) !important; background: var(--mp-danger-100) !important; }
    thead th   { background: var(--mp-ocean) !important; color: #fff !important; }
}