/*
 * MTDP customisations layered on top of the Adminto theme.
 * Loaded AFTER app.min.css so these win the cascade.
 */

/* Self-hosted Inter (variable, all weights) — CSP-clean, offline-friendly. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter/InterVariable.woff2") format("woff2");
}

/*
 * System-wide font. The template resolves its base font through the
 * --ct-font-sans-serif variable (and --ct-body-font-family derives from it),
 * so overriding that one token switches body text, cards, buttons, tables,
 * ApexCharts, etc. The body rule is belt-and-braces.
 */
:root,
[data-bs-theme] {
    --ct-font-sans-serif: "Inter", sans-serif;
}

body {
    font-family: "Inter", sans-serif;
}

/*
 * Horizontal (topnav) layout: a centered, responsive container at 90% width.
 * Applied to every .page-container (top bar, nav, content, footer) so they all
 * align to the same column.
 */
html[data-layout="topnav"] .page-container {
    width: 90%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Header + horizontal menu restyle to match the approved mockup.
 * Scoped to the topnav layout so it never affects other layouts.
 * ------------------------------------------------------------------ */

/* Top bar: soft light-blue band with a faint blue hairline under it. */
html[data-layout="topnav"] .app-topbar {
    background: linear-gradient(180deg, #eaf2fd 0%, #f4f9ff 100%);
    border-bottom: 1px solid #d6e3f5;
}

/* Centered page-scope title, absolutely centred in the bar regardless of the
 * left/right cluster widths. pointer-events:none so it never blocks a click. */
html[data-layout="topnav"] .app-topbar .topbar-menu {
    position: relative;
}
html[data-layout="topnav"] .app-page-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #17294d;
    white-space: nowrap;
    pointer-events: none;
}

/* Menu bar: clean white; inactive links a calm slate that lifts to blue on
 * hover; the active top-level item gets blue text + a full-width blue underline
 * (inset box-shadow so it doesn't nudge the row height). */
html[data-layout="topnav"] .topnav {
    background-color: #fff;
    border-bottom: 1px solid #e6ebf2;
}
html[data-layout="topnav"] .topnav .navbar-nav > .nav-item > .nav-link {
    color: #334155;
    font-weight: 500;
}
html[data-layout="topnav"] .topnav .navbar-nav > .nav-item > .nav-link:hover {
    color: #2563eb;
}
html[data-layout="topnav"] .topnav .navbar-nav > .nav-item > .nav-link.active {
    color: #2563eb;
    box-shadow: inset 0 -3px 0 0 #2563eb;
}

/*
 * Horizontal dropdown items: Adminto uses justify-content:space-between (meant to
 * push a submenu arrow to the right), which strands the label on the right when
 * an item has only an icon + text. Our items have no submenu → left-align them.
 */
html[data-layout="topnav"] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item {
    justify-content: flex-start;
}

/*
 * Headings. The theme sets these to "Outfit", serif — another Google-Fonts
 * import that the CSP blocks, so they were falling back to a serif face
 * (Times New Roman). Force Inter here too. Matches the theme's own selector
 * list and loads later, so it wins.
 */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: "Inter", sans-serif;
}

/*
 * Promotion-monitoring colour bands (Promotion Criteria Configuration → Green /
 * Yellow / Red). Solid, filled cells matching promotion_bands.php. Reused by every
 * seafarer promotion list (With / Without Higher License, Elburg / Augustea).
 * !important so the fill wins over table-striped / table-hover cell states.
 */
.table td.crit-cell {
    font-weight: 600;
}
/* Soft "pill" colour coding — a subtle tinted badge with coloured text, instead of
   a full saturated cell fill, so the table reads calmer. */
.crit-pill {
    display: inline-block;
    min-width: 2.1rem;
    padding: .18rem .45rem;
    border-radius: .5rem;
    font-weight: 600;
    line-height: 1.2;
}
.crit-green  { background-color: #d9f2e3 !important; color: #1c8a4e !important; }
.crit-yellow { background-color: #fbe6a0 !important; color: #7a5c12 !important; }
.crit-red    { background-color: #fbdedb !important; color: #ca3a2d !important; }

/* Legend swatches in the list header. */
.crit-swatch {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: .2rem;
}

/* Promotion-status colour dot (Promotion Work Configuration tag) — robust for any
 * configured hex colour regardless of light/dark contrast. */
.promo-dot {
    flex: 0 0 auto;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, .2);
}

/*
 * Promotion list density. 17 columns must fit one screen without a horizontal
 * scrollbar: small type, tight padding, single-line cells by default. Only the
 * free-text columns (name / vessel / certificate) are allowed to wrap so they
 * don't force the table wider than the viewport.
 */
.promotion-table {
    font-size: .82rem;
}
.promotion-table th,
.promotion-table td {
    padding: .3rem .35rem !important;
    vertical-align: middle;
    white-space: nowrap;
}
.promotion-table thead th {
    font-size: .72rem;
    letter-spacing: 0;
    background-color: #cfe2ff !important;   /* light blue header, more visible */
    color: #084298;
    border-bottom-color: #9ec5fe;
    white-space: normal;                    /* allow multi-word headers to wrap to 2 lines */
    text-align: center;                     /* centre every header, horizontally + vertically */
    vertical-align: middle;
}
/*
 * Zebra striping: odd rows white, even rows light grey. Targets > td (not the
 * <tr>) so the Green/Yellow/Red criteria cells — which set their background with
 * !important — keep their colour on every row.
 */
.promotion-table tbody tr:nth-child(even) > td {
    background-color: #f5f6f8;
}
.promotion-table .badge {
    font-size: .72rem;
    padding: .22em .45em;
}
.promotion-table td.wrap-cell,
.promotion-table th.wrap-cell {
    white-space: normal;
    min-width: 11rem;   /* wider name / vessel / certificate columns (table scrolls horizontally) */
    max-width: 16rem;
}
/* Current / Last Vessel — narrower than the other wrap columns. */
.promotion-table td.col-vessel,
.promotion-table th.col-vessel {
    min-width: 7rem;
    max-width: 9rem;
}
/* Clamp long cell content (name, vessel, certificate) to a maximum of 2 lines. */
.promotion-table .clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
/* Keep the colour-coded criteria cells as tight as their number. */
.promotion-table td.crit-cell {
    padding-left: .2rem !important;
    padding-right: .2rem !important;
}
/* Thin grid lines — horizontal between rows, vertical between columns
 * (shown over the coloured criteria cells too). */
.promotion-table tbody td {
    border-bottom: 1px solid #e3e6ea !important;
    border-right: 1px solid #e3e6ea !important;
}
.promotion-table thead th {
    border-right: 1px solid #b9d3f5 !important;
}
.promotion-table tbody td:last-child,
.promotion-table thead th:last-child {
    border-right: 0 !important;
}

/* Filter-card headings — bold navy (Rank Selection + each filter group title). */
.filter-heading {
    font-weight: 700;
    color: #1f2d54;
}

/* Modals use their standard Bootstrap sizes (modal-dialog / modal-lg / modal-xl).
 * Only the seafarer "View Profile" pop-up is widened to 90%, since it mirrors the
 * full-page profile. Everything else (Add Note, Add Document, admin forms, …) is
 * the standard width. */
#profileModal .modal-dialog {
    max-width: 90% !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.modal-backdrop {
    --bs-backdrop-opacity: .75;
}

/* Task Monitoring — completed tasks stay visible, dimmed + struck-through. */
tr.task-done { opacity: .55; }
tr.task-done .task-note { text-decoration: line-through; }
.fc-task-done { opacity: .5 !important; }
.fc-task-done .fc-event-title { text-decoration: line-through; }

/* Filter-card Select2: shrink the single-select to match form-select-sm, and
 * keep a comfortable long width (fleet / vessel names are long). */
.select-filter + .select2-container {
    min-width: 170px !important;
}
.select-filter + .select2-container .select2-selection--single {
    height: calc(1.5em + .5rem + 2px);
    border-color: var(--bs-border-color);
}
.select-filter + .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .5rem);
    font-size: .8125rem;
    padding-left: .5rem;
}
.select-filter + .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .5rem);
}

/* Only the promotion TABLE scrolls horizontally (this wraps just the table), so the
   footer/controls stay at card width. DataTables 2.x classes: .dt-paging / .dt-info. */
#promotionTable_wrapper .tbl-hscroll {
    overflow-x: auto;
    width: 100%;
}
/* Footer: "Showing … entries" left, pagination right-aligned (now at card width). */
#promotionTable_wrapper .dt-paging {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
}
#promotionTable_wrapper .dt-paging ul.pagination { margin: 0; }
#promotionTable_wrapper .dt-info { padding-top: .65rem; }

/* ---------------------------------------------------------------------------
 * Rounded card corners app-wide (matches the seafarer profile cards' curve).
 * Round the card plus its header / footer / top image so corners stay clean.
 * ------------------------------------------------------------------------- */
.card { border-radius: 1rem !important; }
.card > .card-header:first-child { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; }
.card > .card-footer:last-child  { border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important; }
.card > .card-img-top:first-child,
.card > img:first-child { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; }