/* /public/css/mobile.css
   Phone & tablet fixes + dark-mode extras shared by every page. Load it AFTER css/app.css:
     <link href="css/mobile.css" rel="stylesheet" />
   Desktop (992px and wider) is not affected except where noted. */

/* ---------- Side menu: slide over the page instead of pushing it sideways ---------- */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
  }
  .sidebar.collapsed { box-shadow: 0 0 40px rgba(0, 0, 0, .35); }

  /* dim the page behind the open menu; tapping it closes the menu (see js/sidebar.js) */
  body.fp-sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1040;
  }
  body.fp-sidebar-open { overflow: hidden; }

  /* the page itself always uses the full width */
  .main { width: 100%; min-width: 0; }
  .navbar, .content { width: 100%; max-width: 100%; }
}

/* ---------- Top bar on phones: [☰ Title ........ 🔔 💬 👤] then a full-width search ---------- */
@media (max-width: 767.98px) {
  .navbar { padding: .5rem .75rem; }
  .navbar > .container-fluid {
    flex-wrap: wrap !important;
    padding: 0;
    row-gap: .5rem;
  }
  .navbar .js-sidebar-toggle {
    order: 0;
    margin-right: .5rem !important;
    flex: none;
  }
  /* page title */
  .navbar > .container-fluid > .d-flex.align-items-center.me-3 {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    margin-right: .25rem !important;
  }
  .navbar > .container-fluid > .d-flex.align-items-center.me-3 h3 {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  /* bell / messages / account */
  .navbar > .container-fluid > .order-2 {
    order: 2;
    margin-left: auto;
    flex: none;
  }
  .navbar .navbar-nav .nav-icon { padding: .1rem .45rem; }
  .navbar .navbar-nav .nav-link { padding-left: .35rem; padding-right: 0; }
  .navbar .navbar-nav .nav-link::after { display: none; }
  /* search box on its own line */
  .navbar > .container-fluid > .order-3 {
    order: 3;
    flex: 0 0 100% !important;
    margin: 0 !important;
    position: relative;
  }
  .fp-search-input {
    height: 40px !important;
    font-size: 16px !important;   /* 16px stops iPhones from zooming in when you tap the box */
    padding-left: 40px !important;
    padding-right: 12px !important;
  }
  .fp-search-watermark {
    left: 40px !important;
    right: 12px;
    transform: translateY(-50%) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9rem;
    text-align: left;
  }
  .fp-search-input:focus + .fp-search-watermark,
  .fp-search-input:not(:placeholder-shown) + .fp-search-watermark {
    transform: translateY(-50%) !important;
  }
  .user-search-results { left: 0; right: 0; }

  /* header pop-down menus: fit the screen instead of running off the edge */
  .navbar .dropdown-menu {
    position: fixed !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
}

/* ---------- Top bar on tablets and phones turned sideways (768–1199px) ----------
   One line was too tight for the menu button, page title, search, text size, bell, messages and
   account, so it uses the same two rows as phones: [☰ Title ........ Aa 🔔 💬 👤] then the search. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .navbar { padding: .55rem 1rem; }
  .navbar > .container-fluid { flex-wrap: wrap !important; padding: 0; row-gap: .45rem; }
  .navbar .js-sidebar-toggle { order: 0; margin-right: .6rem !important; flex: none; }
  .navbar > .container-fluid > .d-flex.align-items-center.me-3 { order: 1; flex: 1 1 0; min-width: 0; margin-right: .5rem !important; }
  .navbar > .container-fluid > .d-flex.align-items-center.me-3 h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .navbar > .container-fluid > .order-2 { order: 2 !important; margin-left: auto; flex: none; }
  .navbar > .container-fluid > .order-3 { order: 3 !important; flex: 0 0 100% !important; margin: 0 !important; max-width: 100% !important; position: relative; }
  .fp-search-input { height: 42px !important; }
  .user-search-results { left: 0; right: 0; }
}
/* phones turned sideways are short: keep the bar slim so there's room for the page */
@media (max-height: 500px) and (orientation: landscape) {
  .navbar { padding-top: .35rem !important; padding-bottom: .35rem !important; }
  .navbar > .container-fluid { row-gap: .3rem !important; }
  .fp-search-input { height: 36px !important; }
  .navbar > .container-fluid > .d-flex.align-items-center.me-3 h3 { font-size: 1.05rem; }
  .navbar .dropdown-menu { max-height: calc(100vh - 60px); overflow-y: auto; }
}

/* ---------- Page content on phones ---------- */
@media (max-width: 767.98px) {
  .content { padding: 1rem .75rem .75rem; }
  .card-body { padding: 1rem; }
  .card-header { padding: .75rem 1rem; }
  h1, .h1 { font-size: 1.6rem; }
  h2, .h2 { font-size: 1.4rem; }

  /* nothing should make the page wider than the screen */
  img, video, iframe { max-width: 100%; }
  .table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* modals use (almost) the full screen */
  .modal-dialog { margin: .5rem; }

  /* footer links stack neatly */
  .footer .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; text-align: center !important; }
  .footer .list-inline { margin-bottom: 0; }
}

/* ---------- Dark mode extras (html.theme-dark is set by js/theme.js) ---------- */
html.theme-dark .list-group-item {
  background: #262826;
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, .10);
}
html.theme-dark .list-group-item-action:hover,
html.theme-dark .list-group-item-action:focus { background: #323532; color: #fff; }
html.theme-dark .list-group-item.active { background: #6f42c1; border-color: #6f42c1; color: #fff; }
html.theme-dark .list-group-item.active .text-muted,
html.theme-dark .list-group-item.active span { color: #fff !important; }

/* header pop-down menus (bell + messages) */
html.theme-dark .dropdown-menu-header,
html.theme-dark .dropdown-menu-footer { border-color: rgba(255, 255, 255, .10) !important; color: #e5e7eb; }
html.theme-dark .dropdown-menu .text-dark { color: #f3f4f6 !important; }

/* "New message from …" pop-up in the corner */
html.theme-dark .fp-toast {
  background: #262826 !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, .14) !important;
  border-left-color: #a98bf0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
}