/* ============================================================
   brafa Systems — Cascade pages — Notes Kanban + Port Map
   Part of the brafa shell. Loaded after brafa-shell.css (which holds
   the layout shell + .brafa-screen primitives). Split out of the former
   monolithic brafa-shell.css so per-area page work stops colliding.
   ============================================================ */

/* ============================================================
   CASCADE PAGES — Notes Kanban + Port Map
   These keep their legacy markup/JS (jkanban board, Leaflet map);
   we restyle the surrounding chrome via .brafa-screen overrides.
   ============================================================ */

/* Generic Bootstrap form controls inside any brafa screen → brafa fields.
   (Migrated screens use .input/.select, so this only touches cascade pages.) */
.brafa-screen .form-control,
.brafa-screen .form-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg);
    box-shadow: none;
    font-size: 13.5px;
}
.brafa-screen .form-control:focus,
.brafa-screen .form-select:focus { border-color: var(--brafa-black); box-shadow: none; }
.brafa-screen .form-control::placeholder { color: var(--fg-subtle); }

/* Generic card header → brafa */
.brafa-screen .card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 18px 24px;
}
.brafa-screen .card > .card-header h5,
.brafa-screen .card > .card-header h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    color: var(--fg);
    margin: 0;
}

/* Toggle switches in the Notes toolbar */
.brafa-screen .form-check-input { cursor: pointer; }
.brafa-screen .form-check-input:checked { background-color: var(--brafa-black); border-color: var(--brafa-black); }
.brafa-screen .form-check-label { color: var(--fg-muted); font-size: 12.5px; }

/* ---- Notes Kanban ---- */
.brafa-notes .card-header .btn,
.brafa-notes #add-new-board-btn {
    background: var(--brafa-black) !important;
    background-image: none !important;
    border: 1px solid var(--brafa-black) !important;
    color: var(--brafa-white) !important;
    box-shadow: none !important;
}
.brafa-notes #kanban-search { min-width: 200px; }
/* Keep the jkanban board area on a sunken surface so columns read cleanly */
.brafa-notes .kanban-container { background: var(--bg); padding: 16px; }

/* ---- Port Map ---- */
/* The map must keep a real height even though .bg-gradient-dark is neutralised. */
.brafa-portmap .map-card { padding: 0; overflow: hidden; }
.brafa-portmap #map { border-radius: var(--radius-sm); }
.brafa-portmap .leaflet-container { font-family: var(--font-body); }

/* ============================================================
   SYSTEM-WIDE MOBILE SAFETY NETS
   Cross-cutting fixes that aren't tied to one screen.
   ============================================================ */
@media (max-width: 575.98px) {
    /* Info popups (legacy absolutely-positioned tooltips) must never spill
       past the viewport edges on a phone. Clamp their width and keep them
       scrollable if tall. */
    .info-popup,
    .info-popup-alocks {
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        max-height: 70vh;
        overflow-y: auto;
        box-sizing: border-box;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Info-icon triggers get a proper 44px tap target on touch screens. */
    .brafa-screen .info-icon,
    .brafa-screen .info-icon-alocks,
    .brafa-screen .info-icon-alocks > .material-icons {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Legacy fixed-height cards must not clip their content on small screens. */
@media (max-width: 767.98px) {
    .brafa-screen .card-fixed-height,
    .brafa-screen .card-fixed-height-automation,
    .brafa-screen .height-800,
    .brafa-screen .card-bg-img-full-height {
        height: auto !important;
    }
}