/* ================================================
   BandTour.live — Mobile & Tablet Responsive Rules
   ================================================ */

/* ── Phone (≤767px) ── */
@media (max-width: 767px) {

    /* Touch-friendly controls: Apple 44px minimum */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 1rem;
    }

    .btn {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* Tighter card spacing */
    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.5rem 0.75rem;
        padding-left: 1.5rem;
        font-size: 0.8rem;
    }

    .card-header h5,
    .card-header h6 {
        font-size: 0.85rem;
    }

    /* Tables: catch any not wrapped in .table-responsive */
    .card-body > table,
    .content > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Compact table cells */
    .table td,
    .table th {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }

    /* Metric cards: 2x2 grid instead of 4x1 stack */
    .dashboard-metric-card .card-body {
        padding: 0.6rem;
    }

    .dashboard-metric-card h3,
    .dashboard-metric-card .display-6 {
        font-size: 1.25rem;
    }

    /* AI Search: chat container uses viewport height */
    .chat-container {
        max-height: 55vh;
    }

    /* Hide "Try:" suggestion chips below input — welcome message has the same links */
    .suggestion-chips-row {
        display: none !important;
    }

    /* Welcome suggestions: compact */
    .welcome-suggestions > div {
        font-size: 0.82rem;
        margin-bottom: 0.25rem !important;
    }

    .welcome-suggestions .suggestion-link {
        font-size: 0.82rem;
    }

    /* Chat tabs: scrollable on overflow */
    .chat-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs-chat {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .nav-tabs-chat .nav-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }

    /* Chat input: full-width send button text hidden, icon only */
    .chat-input-container .btn i {
        margin-right: 0 !important;
    }

    /* Modal dialogs: near full-width */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    /* ── Page header: ultra-compact on phone ── */
    .main-header {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        margin-bottom: 0.75rem !important;
    }

    .page-title-header {
        font-size: 1.1rem;
        margin-bottom: 0 !important;
    }

    /* Hide the secondary logo row in header — sidebar already has the logo */
    .header-logo-main {
        display: none;
    }

    /* Compact user profile in header */
    .main-header .d-flex.flex-column small {
        display: none; /* hide role text */
    }

    .main-header .fw-semibold {
        font-size: 0.8rem;
    }

    .main-header img.rounded-circle {
        width: 26px !important;
        height: 26px !important;
    }

    /* ── Card footers: compact pagination ── */
    .card-footer {
        padding: 0.4rem 0.75rem;
        font-size: 0.78rem;
    }

    .card-footer .btn {
        min-height: 32px;
        padding: 0.2rem 0.6rem;
        font-size: 0.78rem;
    }

    .card-footer .text-muted {
        font-size: 0.72rem;
    }

    /* ── Reduce content area padding ── */
    article.content {
        padding: 0.5rem 0.5rem 1rem 0.5rem !important;
    }

    /* ── Smaller headings inside content ── */
    .content h1:first-child,
    .content h3:first-child {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
        padding-bottom: 0.25rem;
    }

    /* ── Tighter margins on cards ── */
    .card {
        margin-bottom: 0.5rem !important;
    }

    .mb-3 { margin-bottom: 0.5rem !important; }
    .mb-4 { margin-bottom: 0.75rem !important; }

    /* ── Tighter row gutters ── */
    .row.g-3 {
        --bs-gutter-y: 0.5rem;
        --bs-gutter-x: 0.5rem;
    }

    /* ── Modal footers: compact ── */
    .modal-footer {
        padding: 0.5rem 0.75rem;
    }

    .modal-footer .btn {
        min-height: 36px;
        font-size: 0.85rem;
    }

    /* Pipeline / Kanban: horizontal scroll */
    .pipeline-board,
    .kanban-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    .pipeline-board > .col,
    .pipeline-board > [class*="col-"],
    .kanban-board > .col,
    .kanban-board > [class*="col-"] {
        min-width: 280px;
        flex: 0 0 280px;
    }

    /* Badge readability */
    .badge {
        font-size: 0.7rem;
        padding: 0.3em 0.5em;
    }

    /* Alert compact */
    .alert {
        padding: 0.5rem 0.75rem;
        font-size: 0.88rem;
    }

    /* Hide "by Roadie+ Studio" branding on small phones */
    .company-brand {
        display: none;
    }

    /* ── Card header text: truncate long titles ── */
    .card-header .fw-semibold {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 60vw;
    }

    /* ── Form labels: smaller on mobile ── */
    .form-label,
    label {
        font-size: 0.82rem;
    }

    /* ── Nav tabs (Equipment, etc.): compact ── */
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }

    /* ── Filter "Filter by" prefix — hide verbose labels ── */
    .form-label .filter-prefix {
        display: none;
    }

    /* ── Pagination buttons: shorter text ── */
    .pagination .page-link {
        font-size: 0.78rem;
        padding: 0.25rem 0.5rem;
    }

    /* Filter dropdowns: 2-per-row on mobile */
    .filter-row-mobile > [class*="col-md-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ── Tablet (≤991px) ── */
@media (max-width: 991px) {

    /* Form controls still need decent size */
    .form-control,
    .form-select {
        min-height: 40px;
    }

    /* Slightly tighter cards */
    .card-body {
        padding: 0.85rem;
    }

    /* Metric card grid: 2x2 on tablet too */
    .metric-grid-mobile > [class*="col-md-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ── Safe area for notched phones (iPhone X+) ── */
@supports (padding: env(safe-area-inset-bottom)) {
    .chat-input-container {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}