/* ============================================================
   admin-preview — additions ONLY.
   The panel's own stylesheets are loaded untouched:
     /admin-main.css
     /admin/style.css
     /admin/custom.css
     /assets/css/index.css
   Nothing in this file overrides panel colours or layout; it only
   adds the few helpers a static mock needs (screens that React used
   to mount, plus a preview ribbon). Delete this file's rules one by
   one when you promote the mock into the real app.
   ============================================================ */

/* ---- page heading (same recipe as DESIGN_SYSTEM.md 4.2) ---- */
.pv-page-head {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 500;
}
.pv-page-head i { margin-right: 6px; }

/* ---- modals ----
   The panel renders BS3 modals inline with display:block. For a static
   mock we wrap backdrop + dialog in .pv-modal and toggle .is-open. */
.pv-modal { display: none; }
.pv-modal.is-open { display: block; }
.pv-modal .modal { z-index: 1050; }
.pv-modal .modal-backdrop { z-index: 1040; }
body.pv-locked { overflow: hidden; }

/* dropdowns that are plain JS-toggled in the mock */
.pv-menu-open > .dropdown-menu { display: block; }

/* ---- menus the panel's own CSS force open ----
   index.css ships `.dd-container { display: block !important }` because the
   React pages only ever MOUNT those menus while they are open. A static page
   has to hide them, so filter menus carry .pv-menu and get toggled here with
   higher specificity + !important. */
.dropdown-menu.pv-menu { display: none !important; }
.dropdown-menu.pv-menu.is-open { display: block !important; }

/* help / notifications popovers: React mounted these conditionally too */
.navbar-popover__guides { display: none; }
.navbar-popover__guides.is-open { display: block; }

/* Users page: the copied Users.jsx inline style forces these open because the
   React page only mounted them while open. Higher specificity beats it. */
.dropdown > .dropdown-menu-fixed { display: none; }
.dropdown.pv-menu-open > .dropdown-menu-fixed { display: block; }

/* ---- stat card sparkline (recharts stand-in) ---- */
.pv-spark { display: block; width: 100%; height: 55px; }

/* ---- preview ribbon ---- */
.pv-ribbon {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1100;
    background: #333;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pv-ribbon button {
    background: none;
    border: none;
    color: #bbb;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.pv-ribbon button:hover { color: #fff; }

/* ---- scrollable table bodies ----
   The real app virtualises long lists; a static mock just caps the
   height and keeps the header visible. */
.pv-scroll-y { max-height: 560px; overflow-y: auto; }
.pv-scroll-y thead th { position: sticky; top: 0; z-index: 2; background: #fff; }
body.dark-mode .pv-scroll-y thead th { background: #222327; }

/* ---- misc bits the React pages got from inline styles ---- */
.pv-muted { color: #888; }
.pv-center { text-align: center; }
.pv-nowrap { white-space: nowrap; }
.pv-modal .modal-content { border-radius: 8px; overflow: hidden; border: none; box-shadow: 0 5px 15px rgba(0, 0, 0, .2); }
.pv-modal .modal-header { background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 20px; }
.pv-modal .modal-header .modal-title { margin: 0; font-weight: 600; color: #333; }
.pv-modal .modal-footer { background: #f8f9fa; border-top: 1px solid #e9ecef; padding: 15px 25px; }
.pv-modal .modal-body { padding: 25px; }

body.dark-mode .pv-modal .modal-header,
body.dark-mode .pv-modal .modal-footer { background: #33353d; border-color: #3f4149; }
body.dark-mode .pv-modal .modal-header .modal-title { color: #e0e0e0; }
body.dark-mode .pv-ribbon { background: #141418; }

/* small phones: keep wide tables usable */
@media (max-width: 767px) {
    .pv-ribbon { left: 8px; bottom: 8px; font-size: 10px; }
    .pv-page-head { font-size: 15px; }
}