/* ==========================================================================
   Pavana — responsive layer
   --------------------------------------------------------------------------
   Every viewport-dependent rule for the application shell and the shared
   components lives here, so a layout bug on a phone or tablet has one file
   to look in. Page-specific tweaks stay in the page's own <style> block
   (search that page for "@media").

   Load order:  bootstrap → pavana.css → horizon.css → responsive.css
   This file must be last so its overrides win on equal specificity.

   Breakpoints (max-width):
     1024px  tablet landscape / small laptop — the sidebar becomes a drawer
      768px  tablet portrait
      640px  phone
      480px  narrow phone
      399px  very small phone

   Sections:
     1. Application shell — sidebar drawer, hamburger, topbar
     2. Floating chat button and panel
     3. Grid helpers — Bootstrap rows, shared KPI tiles
     4. Forms, filter bars, action bars
     5. Tables and pagination
     6. Dialogs and slide-overs
     7. Shared page components (tabs, lifecycle bar, vendor profile, …)
     8. Footer
     9. Print
   ========================================================================== */


/* ==========================================================================
   1. Application shell
   ========================================================================== */

/* Hamburger button — only shown when the sidebar is a drawer */
.topbar-hamburger {
    display: none;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.topbar-hamburger:hover { background: var(--muted); color: var(--text); }

/* Close button inside the drawer header */
.sidebar-close-btn {
    display: none;
    width: 28px;
    height: 28px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: var(--muted);
    color: var(--text-muted);
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s;
}
.sidebar-close-btn:hover { background: var(--border); color: var(--text); }

/* Dimmed backdrop behind the open drawer */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, .45);
    animation: overlay-in .2s ease;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
body.sidebar-open .sidebar-overlay { display: block; }

/* Page title should never push the actions off-screen */
.topbar-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.topbar-title small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- Tablet and below: sidebar becomes an off-canvas drawer ------------- */
@media (max-width: 1024px) {
    .pavana-sidebar { transform: translateX(-100%); }
    body.sidebar-open .pavana-sidebar { transform: translateX(0); }
    body.sidebar-open { overflow: hidden; }          /* no page scroll behind the drawer */

    .topbar-hamburger,
    .sidebar-close-btn { display: flex; }

    .pavana-main { margin-left: 0; }
    .pavana-content { padding: 20px 18px; }
    .pavana-topbar { padding: 0 16px; }

    /* Logout keeps its icon, drops the word */
    .topbar-logout span { display: none; }
    .topbar-logout { padding: 7px 9px; }
}

/* ---- Phone ------------------------------------------------------------- */
@media (max-width: 640px) {
    html { font-size: 13px; }

    .pavana-content { padding: 14px 10px; }

    .pavana-topbar { padding: 0 10px; gap: 6px; }
    .topbar-title { font-size: .88rem; }
    .topbar-title small { display: none; }

    /* User chip collapses to the avatar */
    .user-chip { padding: 4px; gap: 0; background: transparent; }
    .user-chip .user-info-name,
    .user-chip .user-info-role,
    .user-chip i.fa-pen { display: none; }
    .topbar-divider { display: none; }

    .topbar-btn { width: 32px; height: 32px; }

    /* Notification dropdown spans the screen instead of hanging off the bell.
       The element carries inline positioning, hence the !important flags. */
    #notif-dropdown {
        position: fixed !important;
        top: var(--topbar-height) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
    }

    #pavana-alert-container { padding: 6px 10px 0 10px !important; }
}

@media (max-width: 480px) {
    .topbar-actions { gap: 2px; }
    .topbar-btn { width: 30px; height: 30px; font-size: .8rem; }
    .topbar-logout { padding: 5px 6px; }
}

@media (max-width: 399px) {
    .pavana-content { padding: 10px 6px; }
}


/* ==========================================================================
   2. Floating chat button and panel
   --------------------------------------------------------------------------
   On desktop the chat pill sits in the middle of the topbar. Below 1024px
   the topbar has no room for it, so it becomes a round button in the
   bottom-right corner and the panel opens above it.
   ========================================================================== */
@media (max-width: 1024px) {
    #fw-chat-fab {
        top: auto;
        bottom: 18px;
        left: auto;
        right: 18px;
        transform: none;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 50%;
        font-size: 1.1rem;
    }
    #fw-chat-fab:hover { transform: scale(1.06); }
    #fw-chat-fab .chat-btn-label { display: none; }
    /* Sit below dialogs and the sidebar drawer so it never covers a Save / Next button */
    #fw-chat-fab { z-index: 150; }

    #fw-chat-panel {
        top: auto;
        bottom: 76px;
        left: auto;
        right: 12px;
        transform: none;
        width: min(380px, calc(100vw - 24px));
        max-height: min(520px, calc(100vh - 100px));
    }
}


/* ==========================================================================
   3. Grid helpers
   ========================================================================== */

/* Bootstrap rows use negative margins; inside our padded cards they can poke
   out past the card edge on narrow screens, so neutralise them there. */
@media (max-width: 1024px) {
    .pavana-content .row { margin-left: 0; margin-right: 0; }
    .pavana-content .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 640px) {
    .pavana-content .row.g-3 { --bs-gutter-x: .75rem; }
    .pavana-content .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

/* Generic KPI tile (dashboard, finance) */
@media (max-width: 640px) {
    .kpi-card { padding: 12px; }
    .kpi-value { font-size: 1.22rem; }
    .kpi-label { font-size: .65rem; }
}
@media (max-width: 399px) {
    .kpi-card { margin-bottom: 4px; }
}

/* Charts never exceed their card */
@media (max-width: 640px) {
    .chart-wrap,
    .pavana-card-body canvas { max-width: 100%; }
}


/* ==========================================================================
   4. Forms, filter bars, action bars
   ========================================================================== */

/* Multi-column form groups: 4/3 → 2 columns on tablet, 1 column on phone */
@media (max-width: 1024px) {
    .pavana-input-group.g3,
    .pavana-input-group.g4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .pavana-input-group.g2,
    .pavana-input-group.g3,
    .pavana-input-group.g4 { grid-template-columns: 1fr; }

    /* Read-only field grids in view panels */
    .detail-grid { grid-template-columns: 1fr !important; gap: 10px; }
    .detail-field span { font-size: .8rem; word-break: break-word; }
    .field-grid { grid-template-columns: 1fr; }

    /* SAP-mapped column inside a form */
    .sapcol { padding: 8px; }
    .sapcol .pavana-input-group.g2 { grid-template-columns: 1fr !important; }
}

/* Action bar (search + filters + primary button above a list) */
@media (max-width: 640px) {
    .pavana-action-bar { flex-direction: column; align-items: stretch; gap: 6px; }
    .pavana-action-bar .pavana-search { flex: 1 1 0; min-width: 0; }
    .pavana-action-bar .pavana-search input { width: 100%; min-width: 0; }
    .pavana-action-bar .pavana-select { width: 100%; font-size: .78rem; padding: 6px 8px; }
    .pavana-action-bar .btn-pavana { width: 100%; justify-content: center; }
    .pavana-action-bar .btn-icon-pavana { width: auto; }
    .pavana-action-bar > .ms-auto { margin-left: 0 !important; text-align: right; }

    .btn-pavana { padding: 7px 11px; font-size: .78rem; }
    .btn-sm-pavana { padding: 4px 8px; font-size: .72rem; }

    /* Dashboard-style filter bar (dashboard, payment status) */
    .db-filter-bar { flex-direction: column; align-items: stretch; }
    .db-filter-bar .pavana-select { width: 100%; }
    .db-refresh-badge { margin-left: 0; margin-top: 4px; justify-content: center; }

    /* Material picker dropdown */
    .mat-pick-dd { min-width: 280px; max-width: calc(100vw - 40px); }
}

@media (max-width: 399px) {
    .pavana-action-bar .btn-pavana:not(.btn-icon-pavana) { flex: 1; justify-content: center; }

    /* Permission toggles stack label over switch */
    .perm-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .perm-row .toggle-switch { align-self: flex-end; }
}


/* ==========================================================================
   5. Tables and pagination
   ========================================================================== */

/* Any table inside a card can scroll sideways instead of breaking the page */
.pavana-card-body { overflow-x: auto; }

@media (max-width: 640px) {
    .pavana-table td,
    .pavana-table th { padding: 6px 8px; }

    .pavana-table td .btn-icon-pavana { width: 28px; height: 28px; }

    /* Line-item tables (PR / RFQ / PO / auction) scroll as a block */
    .li-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .li-table thead, .li-table tbody, .li-table tr, .li-table td, .li-table th { white-space: nowrap; }
    .li-total-bar { flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* Pagination bar (APP.Pagination) stacks its three groups */
@media (max-width: 768px) {
    .vp-pagination { flex-direction: column; align-items: stretch; gap: 6px; }
    .vp-left, .vp-center, .vp-right { justify-content: center; }
}


/* ==========================================================================
   6. Dialogs and slide-overs
   ========================================================================== */
@media (max-width: 1024px) {
    .pavana-modal { max-width: min(95vw, 680px); }
    .pavana-modal.modal-lg { max-width: min(96vw, 900px); }
    .pavana-modal.modal-xl { max-width: 98vw; }
}

@media (max-width: 640px) {
    /* Dialogs become a bottom sheet */
    .pavana-modal-backdrop { padding: 0; align-items: flex-end; }
    .pavana-modal,
    .pavana-modal.modal-lg,
    .pavana-modal.modal-xl {
        max-width: 100%;
        max-height: 94vh;
        border-radius: var(--radius) var(--radius) 0 0;
        animation: modal-slide-up .22s ease;
    }
    @keyframes modal-slide-up {
        from { transform: translateY(30px); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
    .pavana-modal-header h3 { font-size: .75rem; }
    .pavana-modal-body { padding: 12px; }
    .pavana-modal-footer { padding: 8px 12px; flex-wrap: wrap; gap: 6px; }
    .pavana-modal-footer .btn-pavana { flex: 1 1 auto; min-width: 0; justify-content: center; }
}


/* ==========================================================================
   7. Shared page components
   ========================================================================== */

/* Tab strips scroll sideways rather than wrapping into several rows */
@media (max-width: 1024px) {
    .vp-tab-bar,
    .vps-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .vp-tab-bar::-webkit-scrollbar,
    .vps-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
    .pavana-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .pavana-tab { flex-shrink: 0; padding: 8px 12px; font-size: .75rem; }
    .vp-tab, .vps-tab { padding: 7px 10px; font-size: .72rem; }
}
@media (max-width: 399px) {
    .vp-tab { padding: 5px 7px; font-size: .66rem; }
}

/* Document lifecycle bar (PO / invoice detail) */
@media (max-width: 640px) {
    .lifecycle-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .lifecycle-step { flex-shrink: 0; font-size: .65rem; padding: 4px 8px; }
}

/* Vendor profile (internal + portal) */
@media (max-width: 1024px) {
    .vp-sub-row > div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
    .vp-pane { padding: 14px 10px; }
    .vp-sub-row > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    #vpp-inventory > div:first-of-type[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    #mfg-analysis-result > div:first-child { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 399px) {
    .vp-sub-row > div { grid-template-columns: 1fr !important; }
    #mfg-analysis-result > div:first-child { grid-template-columns: 1fr !important; }
}

/* Vendor portal payment status */
@media (max-width: 640px) {
    .vps-kpi-strip { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .vps-table td, .vps-table th { padding: 4px 6px; font-size: .7rem; }
}
@media (max-width: 399px) {
    .vps-kpi-strip { grid-template-columns: 1fr !important; }
}

/* Vendor onboarding wizard cards */
@media (max-width: 640px) {
    .ob-card-header h5 { font-size: .9rem; }
    .ob-card-body { padding: 14px; }
}
@media (max-width: 399px) {
    .ob-card-header { flex-direction: column; gap: 8px; }
}


/* ==========================================================================
   8. Footer
   ========================================================================== */
#app-copyright-footer,
#page-copyright { display: block !important; }

@media (max-width: 1024px) {
    #app-copyright-footer { font-size: .68rem; padding: 8px 12px; }
}
@media (max-width: 640px) {
    #app-copyright-footer { font-size: .62rem !important; padding: 8px 10px !important; line-height: 1.5; }
    #app-copyright-footer a { display: inline; }
    #page-copyright { font-size: .6rem !important; padding: 8px !important; line-height: 1.5; }
}


/* ==========================================================================
   9. Print
   ========================================================================== */
@media print {
    .pavana-sidebar,
    .pavana-topbar,
    .sidebar-overlay,
    .topbar-hamburger,
    #fw-chat-fab,
    #fw-chat-panel { display: none !important; }
    .pavana-main { margin-left: 0 !important; }
    #app-copyright-footer { border-top: none; font-size: .65rem; }
}