/* Custom styles - loaded on every page (after all other stylesheets) */

/* Printing a page of layouts.admin (window.print()): only <main id="printableCard"> prints (app.css). There the
   filter card (a GET form), buttons and form fields are left out and wide tables print whole. */
@media print {
    #printableCard { padding: 0 !important; }
    #printableCard .surface-card:has(> form[method="GET"]),
    #printableCard .btn,
    #printableCard dialog { display: none !important; }
    #printableCard .surface-card { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
    #printableCard .overflow-x-auto { overflow: visible !important; margin: 0 !important; }
    #printableCard table { min-width: 0 !important; width: 100% !important; font-size: 11px; }
}

/* @section('sidebar_hidden') (layouts.admin): the sidebar is fully off screen on every width and the page gets the
   whole width; the header's menu button (#mobileSidebarBtn) opens it as a drawer, the backdrop closes it. */
.app-shell.is-sidebar-hidden .app-sidebar { transform: translateX(-100%); }
.app-shell.is-sidebar-hidden .app-sidebar.is-mobile-open { transform: translateX(0); }
.app-shell.is-sidebar-hidden .app-main { margin-inline-start: 0 !important; }
.app-shell.is-sidebar-hidden #mobileSidebarBtn { display: inline-flex !important; }
/* @section('bare_page'): the topbar is kept for its scripts but not shown. */
.app-shell.is-bare-page .app-header { display: none !important; }
/* data-sidebar-toggle (layouts.admin, every page but a sidebar_hidden one): the header's menu button is shown on every width and on wide screens hides / shows the
   sidebar fully (script.js toggles .is-sidebar-hidden above). */
.app-shell[data-sidebar-toggle] #mobileSidebarBtn { display: inline-flex !important; }
.app-shell[data-sidebar-toggle] .app-sidebar { transition: width .25s cubic-bezier(.4,0,.2,1), transform .25s ease; }
.app-shell[data-sidebar-toggle] .app-main { transition: margin-inline-start .25s ease; }

/* Sidebar top-level menus: a filled Phosphor icon in the menu's own colour (App\Support\MenuIcon::top, set inline);
   on an open group's green bar it turns white like the label. Sub-menu icons are unchanged. */
#sidebarMenu .sidebar-link > i.menu-icon { font-size: 19px; width: 20px; text-align: center; opacity: 1; }
#sidebarMenu li.has-submenu.is-open > .sidebar-link > i.menu-icon { color: #ffffff !important; }