/*
 * App-wide rules, loaded on every page after Bootstrap (views/partials/head.ejs).
 */

/* No double-tap zoom: rows open on a tap, and a quick second tap used to zoom the
   page to one row or to the navbar. */
html {
  touch-action: manipulation;
}

/* iOS Safari zooms in when it focuses a control whose text is under 16px, and stays
   zoomed. Bootstrap's -sm controls are 14px, so on touch screens every control is 16px. */
@media (pointer: coarse) {
  input,
  select,
  textarea,
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  .input-group-sm > .form-control,
  .input-group-sm > .form-select,
  .input-group-sm > .input-group-text {
    font-size: 16px;
  }
}

/* A filter at the top of a long dropdown stays visible while the list scrolls
   (the menu has the p-2 padding: the strip covers it, so items pass underneath). */
.dropdown-menu .dropdown-filter {
    position: sticky;
    top: -0.5rem;
    z-index: 2;
    margin: -0.5rem -0.5rem 0.5rem;
    padding: 0.5rem;
    background: var(--bs-dropdown-bg);
}

/* The navbar's groups (views/partials/navbar.ejs). "＋ Add": two rows of currency buttons. */
.navbar-grouped .nav-add-menu {
    min-width: 15rem;
}
.navbar-grouped .nav-add-label {
    width: 4.5rem;
}

/* Below md (where ☰ appears) every menu shows open under its heading, so one tap after ☰
   reaches any page. The headings aren't buttons there. The links stay black on the page
   colour, like the other navbar links, in both themes. */
@media (max-width: 767.98px) {
    .navbar-grouped .nav-group > .dropdown-toggle {
        pointer-events: none;
        padding-bottom: 0;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        opacity: 0.75;
    }
    .navbar-grouped .nav-group > .dropdown-toggle::after {
        display: none;
    }
    .navbar-grouped .nav-group > .dropdown-menu {
        display: block;
        position: static;
        min-width: 0;
        margin: 0;
        padding: 0 0 0.25rem 0.75rem;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .navbar-grouped .nav-group .dropdown-item,
    .navbar-grouped .nav-group .nav-add-label {
        color: #000;
    }
    .navbar-grouped .nav-group .dropdown-item {
        padding: 0.375rem 0.5rem;
        border-radius: 0.375rem;
    }
    .navbar-grouped .nav-group .dropdown-item.active,
    .navbar-grouped .nav-group .dropdown-item:hover {
        color: #000;
        background: rgba(0, 0, 0, 0.12);
    }
    .navbar-grouped .nav-group .dropdown-divider {
        display: none;
    }
}

/* "Your session has ended" (core/session.js): under the fixed navbar, above the page,
   as wide as the screen allows */
.session-ended {
    position: fixed;
    top: 4.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    width: min(40rem, calc(100% - 2rem));
    margin: 0;
}