/* Mobile and tablet layer, loaded after site.css. Desktop (>= 992px) is unchanged except where noted. */
html, body { max-width: 100%; }
:root { --cbr-logo: 44px; }

@media (max-width: 991px) {
    /* Nothing may widen the page: a wider element made mobile browsers zoom out and left a blank strip. */
    html, body { overflow-x: hidden; overflow-x: clip; }
    img, video, canvas, iframe, svg { max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
    /* Below 992px the side menu is only its logo: a 44px button fixed at the top right. Tapping it opens the full menu
       (with labels) as a drawer from the right over a backdrop; the backdrop, Esc or a menu link close it (mobile.js).
       Pages keep their full width (no icon rail over the book text); only the top of the page leaves room for the button.
       site.css shrinks the collapsed menu to 0px and menu.js nudges the logo out of it with inline styles: overridden here. */
    #sidebar-container.sidebar-collapsed { top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); width: var(--cbr-logo);
        height: var(--cbr-logo); min-height: 0; padding: 0 !important; overflow: hidden; z-index: 1035; transition: none;
        border-bottom-left-radius: 8px; box-shadow: -1px 2px 8px rgba(20, 10, 20, .22); }
    #sidebar-container.sidebar-collapsed li.menu-collapsed:not(:first-child), #sidebar-container.sidebar-collapsed footer { display: none !important; }
    #sidebar-container.sidebar-collapsed .sidebar-separator-title { width: var(--cbr-logo); height: var(--cbr-logo); min-height: 0; padding: 0;
        border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; }
    #sidebar-container.sidebar-collapsed .navbar-brand { margin: 0 !important; padding: 0; display: flex; }
    #sidebar-container .logo { transform: none !important; width: 30px !important; border-radius: 0 !important; }
    main > .container { max-width: 100%; padding: calc(var(--cbr-logo) + .5rem) .75rem .75rem !important; }
    /* The expanded side menu is a full-height drawer over the page (above the Reader's fixed buttons, z-index 2000). */
    #sidebar-container.sidebar-expanded { top: 0; right: 0; height: 100vh; height: 100dvh; min-height: 0; z-index: 2100; overflow-y: auto;
        padding-top: calc(1rem + env(safe-area-inset-top)) !important; padding-bottom: env(safe-area-inset-bottom);
        box-shadow: -10px 0 32px rgba(20, 10, 20, .28); }
    /* site.css pins the footer to the menu's bottom edge: in the scrolling drawer it would cover the last links on short screens. */
    #sidebar-container.sidebar-expanded .footer { position: static; width: auto; line-height: 1.8; white-space: normal; padding: .75rem 0; }
    .cbr-menu-backdrop { position: fixed; inset: 0; z-index: 2090; background: rgba(20, 10, 20, .38); }
}

@media (max-width: 767px) {
    /* Tables marked .cbr-cards become one card per row (labels come from the header, see mobile.js). */
    table.cbr-cards thead { display: none; }
    table.cbr-cards, table.cbr-cards tbody, table.cbr-cards tr, table.cbr-cards td { display: block; width: 100%; }
    table.cbr-cards tr { border: 1px solid #e7e0ea; border-radius: 12px; margin: 0 0 10px; padding: 8px 12px; background: #fff; box-shadow: 0 1px 2px rgba(60, 25, 60, .05); }
    table.cbr-cards td { border: 0 !important; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
        padding: 5px 0 !important; text-align: right !important; max-width: none !important; overflow-wrap: anywhere; }
    table.cbr-cards td::before { content: attr(data-label); color: #857a8c; font-size: .8rem; flex-shrink: 0; padding-top: .1rem; }
    table.cbr-cards td[data-label=""]::before { content: none; }
    table.cbr-cards td.cbr-card-title { display: block; font-weight: 600; padding-bottom: 7px !important; margin-bottom: 3px; border-bottom: 1px solid #f0eaf2 !important; }
    table.cbr-cards td.cbr-card-title::before { content: none; }
    table.cbr-cards td:empty { display: none; }
    table.cbr-cards tr:hover td { background: none; }
    /* Comfortable tap targets on the teacher pages and the roles page. */
    .cbr-touch .btn, .cbr-touch .nav-tabs .nav-link, .cbr-touch select.form-control, .cbr-touch input.form-control { min-height: 44px; }
    .cbr-touch .btn { display: inline-flex; align-items: center; justify-content: center; }
    .cbr-touch .btn-link.p-0 { min-height: 44px; padding: 0 .25rem !important; }
    .cbr-touch .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .cbr-touch .nav-tabs .nav-link { white-space: nowrap; display: flex; align-items: center; }
}