/* =========================================================================
 * NSH Enhance  —  responsive hardening + motion layer
 * Visual/behavioural only. Targets plugin-scoped classes so it never
 * touches the surrounding theme. Added in v1.6.0.
 * ====================================================================== */

/* ----------------------------------------------------------------------
 * 1. RESPONSIVE HARDENING  (prevents page-level horizontal scroll and
 *    lets flex/grid children shrink on every dashboard + key page)
 * -------------------------------------------------------------------- */
.nfd-shell, .ncd-shell, .nadm-shell,
.ngd-page, .npf-page, .nsh-services-layout {
    max-width: 100%;
    overflow-x: hidden;
}
/* Lazy-load sentinel for message threads (no gap when empty) */
.nsh-msg-older:empty { display: none; }
/* Allow grid/flex descendants to shrink instead of forcing overflow */
.nfd-shell *, .ncd-shell *, .nadm-shell * { min-width: 0; }

.nfd-right-area, .ncd-right-area, .nadm-main,
.nfd-content, .ncd-content, .nadm-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* Media/children never exceed their container */
.nfd-content img, .ncd-content img, .nadm-content img,
.ngd-page img, .npf-page img { max-width: 100%; height: auto; }

/* Long words / titles wrap instead of stretching the layout */
.nfd-order-title, .ncd-order-title, .nfd-gig-title,
.ngd-section, .npf-hero-info, .nadm-perf-name {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Wide admin data tables: scroll INSIDE their own card on small screens
   instead of pushing the whole page sideways. */
@media (max-width: 760px) {
    .nadm-orders-table, .nadm-table-wrap, .nadm-order-flow {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Dashboard stat grids: graceful auto-fit fallback so they never overflow
   on odd widths even outside the explicit breakpoints. */
@media (max-width: 1100px) {
    .nfd-stats-grid, .ncd-stats-grid, .nadm-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .nfd-stats-grid, .ncd-stats-grid, .nadm-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Main two-column dashboard layouts collapse cleanly */
@media (max-width: 900px) {
    .nfd-main-grid, .ncd-main-grid, .nadm-main-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .nfd-right-col, .ncd-right-col { width: 100%; }
}

/* Topbars never clip their content: let items wrap/shrink */
.nfd-topbar, .ncd-topbar, .nadm-topbar { flex-wrap: nowrap; }
@media (max-width: 480px) {
    .nfd-tb-search, .ncd-tb-search, .nadm-search { width: 100%; min-width: 0; }
    .nfd-topbar, .ncd-topbar, .nadm-topbar { gap: .5rem; padding-left: .85rem; padding-right: .85rem; }
}

/* Gig detail: single column on tablet/mobile */
@media (max-width: 900px) {
    .ngd-inner { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Profile stat row wraps on small screens */
@media (max-width: 640px) {
    .npf-stat-row { flex-wrap: wrap; gap: .75rem; }
    .npf-stat { flex: 1 1 40%; }
}

/* ----------------------------------------------------------------------
 * 2. MOTION LAYER
 *    Hover micro-interactions are always-on CSS transitions (safe).
 *    Entrance reveals are only applied when JS adds body.nsh-anim, and
 *    JS always reveals (plus a timeout fallback), so content is never
 *    left hidden if scripting fails. Disabled under reduced-motion.
 * -------------------------------------------------------------------- */

/* Hover lift on interactive cards across the whole system */
@media (prefers-reduced-motion: no-preference) {
    .nfd-stat-card, .nfd-order-card, .nfd-gig-card,
    .ncd-stat-card, .ncd-order-card,
    .nadm-stat-card, .nadm-performer-card,
    .nsh-gig-card, .npf-gig-card {
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .nfd-stat-card:hover, .nfd-order-card:hover, .nfd-gig-card:hover,
    .ncd-stat-card:hover, .ncd-order-card:hover,
    .nadm-stat-card:hover, .nadm-performer-card:hover,
    .nsh-gig-card:hover, .npf-gig-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px -22px rgba(0,0,0,.85);
    }

    /* Buttons: subtle press/hover feedback */
    .nfd-btn-gold, .nsh-btn-primary, .nfd-cta-btn, .ncd-cta-btn,
    .ngd-order-btn, .nsh-contact-btn, .nadm-cta-btn {
        transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
    }
    .nfd-btn-gold:hover, .nsh-btn-primary:hover, .nfd-cta-btn:hover,
    .ncd-cta-btn:hover, .ngd-order-btn:hover, .nsh-contact-btn:hover,
    .nadm-cta-btn:hover { transform: translateY(-1px); }
    .nfd-btn-gold:active, .nsh-btn-primary:active, .nfd-cta-btn:active,
    .ncd-cta-btn:active, .ngd-order-btn:active { transform: translateY(0); }

    /* Nav items slide slightly on hover */
    .nfd-nav-item, .ncd-nav-item, .nadm-nav-item { transition: background .15s ease, color .15s ease, padding-left .15s ease; }
    .nfd-nav-item:hover, .ncd-nav-item:hover, .nadm-nav-item:hover { padding-left: 1.05rem; }

    /* Entrance reveal — gated on body.nsh-anim (set by JS) */
    body.nsh-anim .nsh-reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
        will-change: opacity, transform;
    }
    body.nsh-anim .nsh-reveal.nsh-in {
        opacity: 1;
        transform: none;
    }

    /* Gentle fade for thread messages as they load in */
    .nsh-msg-row.nsh-msg-new {
        animation: nshFadeUp .4s ease both;
    }
    @keyframes nshFadeUp {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
    }

    /* Spinner used by message lazy-loading */
    .nsh-msg-older-spinner {
        display: block; width: 22px; height: 22px; margin: .6rem auto;
        border: 2px solid #2A2A2A; border-top-color: #B7996F; border-radius: 50%;
        animation: nshSpin .7s linear infinite;
    }
    @keyframes nshSpin { to { transform: rotate(360deg); } }
}

/* Reduced-motion: no spinner animation either, but keep it visible */
@media (prefers-reduced-motion: reduce) {
    .nsh-msg-older-spinner { display: block; width: 22px; height: 22px; margin: .6rem auto;
        border: 2px solid #2A2A2A; border-top-color: #B7996F; border-radius: 50%; }
}