/* =========================================================
   Robotic Node — Mobile-specific text/visibility fixes only
   Only applies below 768px. Desktop styles are untouched.
   ========================================================= */

@media (max-width: 991.98px) {
    section#main-body {
        padding-top: 2rem;
    }

    section#main-body > .container:first-child {
        margin-top: 0 !important;
    }
}

@media (max-width: 768px) {

    /* ─── Card header text: never truncate ─── */
    .panel-title,
    .panel-heading h3,
    .panel-heading .panel-title,
    .block-header h3,
    .block-header h2,
    .card-title,
    .card-header h5,
    .card-header h3,
    .xn-panel-title,
    .welcome-header h3,
    .panel .xn-panel-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        max-width: 100%;
    }

    /* ─── Button / dropdown text: never truncate ─── */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-sm,
    .btn-block,
    button,
    .form-select,
    .dropdown-toggle,
    .input-group-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        min-width: auto !important;
    }

    /* Native selects must still show full placeholder/selected text */
    select.form-select,
    select.form-control {
        text-overflow: clip !important;
        overflow: visible !important;
    }

    /* ─── Guest / Authenticated navbar mobile fixes ─── */
    .custom-navbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .custom-navbar .container-fluid,
    .navbar-custom {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .custom-navbar .first-layer {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0.5rem !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto 42px;
        align-items: center !important;
        gap: 0.5rem;
        width: 100%;
    }

    /* Compact status row: hide divider and Knowledgebase link */
    .custom-navbar .first-layer .nav-link[href*="knowledgebase"],
    .custom-navbar .first-layer .nav-link[href="/knowledgebase"],
    .first-layer .nav-link[href*="knowledgebase"],
    .first-layer .nav-link[href="/knowledgebase"] {
        display: none !important;
    }

    .custom-navbar .first-layer > div > span,
    .first-layer > div > span {
        display: none !important;
    }

    /* Hamburger button visible on dark background */
    .navbar-toggler {
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px;
        width: 42px;
        min-width: 42px !important;
        height: 38px;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.05);
        justify-self: end;
    }

    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(75, 107, 197, 0.35) !important;
    }

    .navbar-toggler i {
        color: #fff !important;
        font-size: 1.25rem;
    }

    /* Collapsed nav menu */
    .navbar-collapse {
        background: #0d0e18;
        padding: 0.75rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 0.5rem;
    }

    .custom-navbar .second-layer {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .custom-navbar .navbar-brand {
        margin-left: 0 !important;
        margin-bottom: 0.75rem;
    }

    .custom-navbar .navbar-nav {
        flex-direction: column !important;
        width: 100%;
        margin: 0 !important;
    }

    .custom-navbar .navbar-nav .nav-item {
        width: 100%;
    }

    .custom-navbar .second-layer .navbar-nav .nav-link,
    .custom-navbar .navbar-nav .nav-link {
        padding: 0.75rem 0.5rem !important;
        width: 100%;
        border-radius: 0;
        margin: 0;
    }

    .custom-navbar .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 0.75rem !important;
    }

    .custom-navbar .dropdown-item {
        padding: 0.65rem 0.75rem;
    }

    /* Mobile-only links inside collapse */
    .navbar-collapse > .d-lg-none {
        padding-left: 0.5rem;
    }

    .navbar-collapse > .d-lg-none .nav-link,
    .navbar-collapse > .d-lg-none button.nav-link {
        padding: 0.75rem 0.5rem;
        width: 100%;
        text-align: left;
        background: transparent;
    }

    /* Mobile logo in first layer */
    .first-layer .navbar-brand {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px;
        height: 38px;
        margin: 0 !important;
        padding: 4px !important;
        border: 1px solid rgba(75, 107, 197, 0.35);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(75, 107, 197, 0.16), rgba(50, 213, 198, 0.06));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(2, 8, 23, 0.22);
        min-width: 0;
        justify-self: center;
    }

    .first-layer .navbar-brand img {
        width: 30px !important;
        height: 30px !important;
        margin-right: 0 !important;
        object-fit: contain;
        filter: drop-shadow(0 4px 8px rgba(0, 174, 239, 0.24));
    }

    .first-layer .navbar-brand span {
        display: none !important;
    }

    .custom-navbar .first-layer > .d-flex.align-items-center {
        min-width: 0;
    }

    .custom-navbar .first-layer > .d-flex.align-items-center:first-child {
        justify-content: flex-start;
    }

    /* ─── Status bar text: normal wrapping, never character-by-character ─── */
    .status-text,
    .first-layer .nav-link,
    .first-layer .nav-link span {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        word-wrap: normal !important;
        hyphens: none !important;
    }

    .status-text {
        display: inline-block;
        max-width: none;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0 !important;
        vertical-align: middle;
    }

    .status-text::after {
        content: attr(data-status-short);
        font-size: 0.82rem;
        line-height: 1;
    }

    .first-layer .nav-link {
        min-width: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ─── Navigation links: normal word wrapping only ─── */
    .nav-link,
    .navbar-nav .nav-link,
    .list-group-item,
    .dropdown-item {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        word-wrap: normal !important;
        hyphens: none !important;
    }

    /* ─── Table column headers: fully visible ─── */
    .table th,
    .table thead th,
    .table-dark thead th,
    .dataTable thead th,
    table.dataTable thead th {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    /* Ensure table containers scroll instead of truncating headers */
    .table-responsive,
    .table-container,
    .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ─── Footer copyright: show full text ─── */
    footer .last-footer {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 0.75rem;
    }

    footer .last-footer > * {
        max-width: 100%;
        text-overflow: clip !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    footer .last-footer p,
    footer .last-footer .text-nowrap {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        width: 100%;
        text-align: center;
    }

}