/* The enterprise shell — loaded by base.html.twig on every page, AFTER the inline
 * design system in _page_chrome.html.twig, so it wins on source order alone.
 *
 * Direction (2026-11-04): the sober look the operators chose for the workspace
 * pages (cx_workspace.css — white surfaces, 1px hairlines, no gradients, one
 * accent) extended to the whole shell: top bar, sidebar, canvas, cards, modals.
 *
 * CSS only, on purpose. AdminLTE finds the shell by its classes
 * (`data-widget="pushmenu"`, `.main-sidebar`, `.nav-sidebar`, `.nav-treeview`), and
 * the CDN JavaScript binds every id inside the pages and modals; no markup moves.
 * Scoped by the shell's own classes or by `.modal-content`, never by page.
 *
 * Specificity notes:
 *  - the CDN's main.css has `.navbar-my-blue a { color:#fff !important }`, so every
 *    link in the bar needs an !important rule more specific than (0,1,1);
 *  - `modal-general-header` / `-footer` are CDN classes painted navy; they are
 *    re-skinned here, which only affects this app (the legacy admin does not load
 *    this file).
 */

:root {
    --sh-bar-h: calc(2.93725rem + 1px);   /* what AdminLTE reserves; do not change */
    --sh-ink: #17212b;
    --sh-ink-2: #3b4855;
    --sh-muted: #6b7a88;
    --sh-line: #e2e7ec;
    --sh-line-2: #d3dae1;
    --sh-canvas: #f4f6f8;
    --sh-surface: #ffffff;
    --sh-subtle: #f8fafb;
    --sh-accent: #134a6d;
    --sh-accent-2: #1d6a99;
    --sh-accent-soft: #e9f1f7;
    --sh-rail: #101d29;
    --sh-rail-2: #16283a;
    --sh-rail-ink: #9fb0bf;
    --sh-radius: 6px;
    --sh-focus: 0 0 0 3px rgba(29, 106, 153, .18);
}

body {
    background: var(--sh-canvas);
    color: var(--sh-ink);
    -webkit-font-smoothing: antialiased;
}

.content-wrapper {
    background: var(--sh-canvas) !important;
}

/* ============================================================ top bar ===== */

.main-header.navbar.cx-navbar {
    background: var(--sh-surface) !important;
    border-bottom: 1px solid var(--sh-line) !important;
    box-shadow: none;
}

.main-header.navbar.cx-navbar :focus-visible {
    outline: 2px solid var(--sh-accent-2);
    outline-offset: 2px;
}

/* `.navbar-my-blue a { color:#fff !important }` from the CDN — beaten here. */
.main-header.cx-navbar a.cx-navbar-icon,
.main-header.cx-navbar a.cx-navbar-tool,
.main-header.cx-navbar .cx-navbar-tool {
    color: var(--sh-ink-2) !important;
}

.main-header.cx-navbar .cx-navbar-icon {
    border-radius: var(--sh-radius);
}

.main-header.cx-navbar .cx-navbar-icon:hover {
    color: var(--sh-ink) !important;
    background: var(--sh-subtle);
    border-color: var(--sh-line);
}

/* The one primary action: solid accent, the only coloured fill on the bar. */
.main-header.cx-navbar .cx-navbar-action {
    height: 32px;
    color: #fff;
    background: var(--sh-accent);
    border: 1px solid var(--sh-accent);
    border-radius: var(--sh-radius);
}

.main-header.cx-navbar .cx-navbar-action:hover {
    color: #fff;
    background: #0d3550;
    border-color: #0d3550;
    box-shadow: none;
}

.main-header.cx-navbar .cx-navbar-group,
.main-header.cx-navbar .cx-navbar-user {
    height: 32px;
    background: var(--sh-surface);
    border: 1px solid var(--sh-line-2);
    border-radius: var(--sh-radius);
}

.main-header.cx-navbar .cx-navbar-group > * + *,
.main-header.cx-navbar .cx-navbar-group > .dropdown + * {
    border-left: 1px solid var(--sh-line);
}

.main-header.cx-navbar .cx-navbar-group > :first-child .cx-navbar-tool,
.main-header.cx-navbar .cx-navbar-group > .cx-navbar-tool:first-child {
    border-radius: 5px 0 0 5px;
}

.main-header.cx-navbar .cx-navbar-group > :last-child .cx-navbar-tool,
.main-header.cx-navbar .cx-navbar-group > .cx-navbar-tool:last-child {
    border-radius: 0 5px 5px 0;
}

.main-header.cx-navbar .cx-navbar-tool:hover,
.main-header.cx-navbar .cx-navbar-tool[aria-expanded="true"] {
    color: var(--sh-ink) !important;
    background: var(--sh-subtle);
}

.main-header.cx-navbar .cx-navbar-tool > i,
.main-header.cx-navbar .cx-navbar-tool-label {
    color: var(--sh-muted);
}

.main-header.cx-navbar .cx-navbar-tool:hover > i,
.main-header.cx-navbar .cx-navbar-tool[aria-expanded="true"] > i {
    color: var(--sh-accent);
}

.main-header.cx-navbar .cx-user-avatar {
    width: 24px;
    height: 24px;
    color: var(--sh-accent);
    background: var(--sh-accent-soft);
    border-radius: 5px;
    box-shadow: none;
}

.main-header.cx-navbar .cx-user-name {
    color: var(--sh-ink);
}

.main-header.cx-navbar .cx-user-role {
    color: var(--sh-muted);
}

.main-header.cx-navbar a.cx-user-logout {
    color: var(--sh-muted) !important;
    border-radius: 5px;
}

.main-header.cx-navbar a.cx-user-logout:hover {
    color: #fff !important;
    background: #b23b37;
}

/* Dropdowns opened from the bar. */
.main-header.cx-navbar .dropdown-menu {
    margin-top: 6px !important;
    padding: 4px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius);
    box-shadow: 0 8px 24px rgba(16, 29, 41, .12);
}

.main-header.cx-navbar .dropdown-item {
    border-radius: 4px;
    font-size: 13px;
}

.main-header.cx-navbar .dropdown-item.active,
.main-header.cx-navbar .dropdown-item:active {
    color: var(--sh-accent);
    background: var(--sh-accent-soft);
}

/* ============================================================ sidebar ===== */

.main-sidebar {
    background: var(--sh-rail) !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(255, 255, 255, .04);
}

.main-sidebar .brand-link {
    height: var(--sh-bar-h);
    padding: 0 16px !important;
    background: var(--sh-rail);
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

.main-sidebar .brand-link .brand-image {
    max-height: 26px;
    margin: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.main-sidebar .brand-text {
    font-size: 14px;
    letter-spacing: .02em;
}

/* The identity already sits in the top bar's user card; the sidebar copy repeated
   it with an avatar that is a CDN placeholder for most users. Hidden, not removed:
   AdminLTE's collapsed-sidebar rules still expect the markup. */
.main-sidebar .user-panel {
    display: none !important;
}

.main-sidebar .sidebar {
    padding: 10px 10px 24px;
}

.main-sidebar .sidebar nav.mt-2 {
    margin-top: 0 !important;
}

.main-sidebar .nav-sidebar .nav-link {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sh-rail-ink) !important;
    border-radius: 5px;
}

.main-sidebar .nav-sidebar .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .05) !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    color: #fff !important;
    background: var(--sh-rail-2) !important;
    box-shadow: inset 2px 0 0 #5aa9d6;
}

.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
    color: #fff !important;
}

.main-sidebar .nav-sidebar .nav-icon {
    font-size: 13px;
    opacity: .85;
}

.main-sidebar .nav-treeview {
    margin: 2px 0 6px 18px;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.main-sidebar .nav-treeview .nav-link {
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 400;
}

.main-sidebar .nav-treeview .nav-link.active {
    color: #fff !important;
    background: transparent !important;
    box-shadow: inset 2px 0 0 #5aa9d6;
    font-weight: 600;
}

/* ============================================================ canvas ====== */

.content-wrapper > .content > .container-fluid {
    max-width: 1680px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 32px;
}

/* Page header: title on the left, actions on the right, a hairline below. */
.cx-head {
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sh-line);
}

.cx-title {
    font-size: 21px;
    letter-spacing: -.005em;
}

.cx-sub {
    font-size: 13px;
}

/* Cards and figure tiles: flat, like the workspace pages. */
.cx-card,
.cx-stat {
    border-color: var(--sh-line);
    border-radius: var(--sh-radius);
    box-shadow: none;
}

.cx-card-head {
    padding: 12px 16px;
    background: var(--sh-subtle);
    border-radius: var(--sh-radius) var(--sh-radius) 0 0;
}

.cx-card-title {
    font-size: 14px;
}

.cx-card-body {
    padding: 16px;
}

.cx-stat dd {
    font-size: 22px;
}

/* Buttons: one height, one radius, no glow. */
.cx-btn {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: var(--sh-radius);
}

.cx-btn:hover {
    box-shadow: none;
}

.cx-btn:focus-visible,
.cx-btn-ghost:focus-visible {
    outline: none;
    box-shadow: var(--sh-focus);
}

.cx .form-control:focus,
.cx .form-select:focus {
    border-color: var(--sh-accent-2);
    box-shadow: var(--sh-focus);
}

/* Bootstrap's own buttons, where pages still use them, in the same palette. */
.btn-primary {
    background-color: var(--sh-accent);
    border-color: var(--sh-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0d3550;
    border-color: #0d3550;
}

.btn {
    border-radius: var(--sh-radius);
}

/* Flash messages. */
.cx-flash {
    border-radius: var(--sh-radius);
    box-shadow: none;
}

/* ============================================================ modals ====== */

.modal-backdrop.show {
    opacity: .45;
    background: #0b1620;
}

.modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(11, 22, 32, .28);
    overflow: hidden;
}

.modal-header,
.modal-header.modal-general-header {
    align-items: center;
    padding: 14px 20px;
    color: var(--sh-ink) !important;
    background: var(--sh-surface) !important;
    border-bottom: 1px solid var(--sh-line);
}

.modal-header .modal-title,
.modal-general-header .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sh-ink) !important;
}

/* The navy header painted its close button white (`filter: invert` on some
   pages); on white it must be the default dark cross again. */
.modal-header .btn-close,
.modal-general-header .btn-close {
    filter: none !important;
    opacity: .55;
}

.modal-header .btn-close:hover {
    opacity: .9;
}

.modal-body {
    padding: 20px;
}

.modal-footer,
.modal-footer.modal-general-footer {
    gap: 8px;
    padding: 12px 20px;
    color: var(--sh-ink) !important;
    background: var(--sh-subtle) !important;
    border-top: 1px solid var(--sh-line);
}

.modal-footer > * {
    margin: 0;
}

/* ============================================================ footer ====== */

.main-footer {
    padding: 10px 24px;
    font-size: 12px;
    background: var(--sh-surface);
    border-top: 1px solid var(--sh-line);
}

/* ============================================================ print ======= */

@media print {
    .main-header,
    .main-sidebar,
    .main-footer,
    .preloader {
        display: none !important;
    }

    .content-wrapper {
        margin: 0 !important;
        background: #fff !important;
    }
}

/* ------------------------------------------------ filters in a card head (2026-11-04)
   /ferryboat/routes, /ferryboat/booking and the exchange-rate table put
   `.cx-filters` straight into `.cx-card-head`, beside the title. The head is a
   flex row, so the filters shrank into a ~220px column of stacked fields and
   made the head three times its height. The title keeps its line; the filters
   take a full row under it, side by side, ending at the right. */
.cx-card-head:has(> .cx-filters) {
    flex-wrap: wrap;
    row-gap: 12px;
}

/* `_page_chrome`'s SECOND `.cx-filters` (the activity log's: a column with its
   own ground and bottom border) wins over the first everywhere, so the row
   is restated here. */
.cx-card-head > .cx-filters {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 0 0;
    margin: 0;
    background: none;
    border-top: 1px solid var(--sh-line, #e3e9ee);
    border-bottom: 0;
}

.cx-card-head > .cx-filters > div {
    min-width: 220px;
}

/* A page-head action never breaks over two lines ("Ruta / noua"). */
.cx-head .cx-btn {
    white-space: nowrap;
}

/* /ferryboat/booking: the CDN paints the reference and price COLUMNS yellow and
   green, headers included. The header row goes back to the table's own; the
   cells keep a quieter tint so the two columns still stand out. */
#list_all_booking thead .booking_ref_number,
#list_all_booking thead .booking_price {
    background-color: transparent;
}

#list_all_booking tbody .booking_ref_number {
    background-color: #fdf7e4;
}

#list_all_booking tbody .booking_price {
    background-color: #eef6f0;
}

/* `.cx-btn-danger` (_page_chrome) only recolours the text and border of a WHITE
   button; this file's `.cx-btn` gives every button a navy fill, so the six
   danger buttons (stop declarations, cancel / pause push, block a customer…)
   came out dark red on navy. Restated after `.cx-btn`, with its hover. */
.cx-btn.cx-btn-danger {
    color: #9c3a3a;
    background: #fff;
    border-color: #e6cccc;
}

.cx-btn.cx-btn-danger:hover,
.cx-btn.cx-btn-danger:focus-visible {
    color: #fff;
    background: #a94442;
    border-color: #a94442;
}