/* remitza v4 theme: topbar, footer, page frame and small screens (spec 7.3 to 7.5 and 7.7). */

/* ---------- Topbar ---------- */
body.rz-theme .header-navbar {
    height: var(--rz-topbar-h);
    min-height: var(--rz-topbar-h);
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    box-shadow: none;
    color: var(--foreground);
    font-family: var(--font-sans);
}

body.rz-theme .header-navbar .navbar-wrapper,
body.rz-theme .header-navbar .navbar-container {
    height: 100%;
}

body.rz-theme .header-navbar .navbar-container {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
}

body.rz-theme .header-navbar .navbar-collapse {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

body.rz-theme .header-navbar .navbar-left {
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
}

body.rz-theme .header-navbar .navbar-right {
    gap: 8px;
}

/* Icon buttons: sidebar toggle and dark-mode switch. The selectors are long enough to beat Dcat's
   `.header-navbar .navbar-container … a.nav-link` rules, light and dark, without !important. */
body.rz-theme .header-navbar .navbar-container .bookmark-wrapper .nav-link.menu-toggle,
body.rz-theme .header-navbar .navbar-container .nav.navbar-nav.float-right .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--card);
    color: var(--text-2);
    transition: background-color 150ms var(--ease-spay), color 150ms var(--ease-spay);
}

body.rz-theme .header-navbar .navbar-container .bookmark-wrapper .nav-link.menu-toggle:hover,
body.rz-theme .header-navbar .navbar-container .nav.navbar-nav.float-right .nav-link:hover {
    background-color: var(--hover);
    color: var(--foreground);
}

body.rz-theme .header-navbar .navbar-container .nav .nav-item .nav-link i,
body.rz-theme .header-navbar .navbar-container .nav .nav-item .nav-link i:hover {
    margin: 0;
    color: inherit; /* Dcat colours these icons itself (dark mode, and #f7aa44 on the toggle's i:hover at 0,6,4) */
    font-size: 18px;
    line-height: 1;
}

/* Dcat binds the dark-mode click to this span (initSwitcher('.dark-mode-switcher')), not to the link: fill the button */
body.rz-theme .header-navbar .dark-mode-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0; /* Dcat's margin-right: 5px would leave a dead strip and push the icon off-centre */
}

/* The customer site hides Dcat's dark-mode switch in its global CSS; the theme shows it (spec 5.5) */
body.rz-theme .header-navbar .nav.navbar-nav.float-right {
    display: flex;
    margin: 0;
}

/* Breadcrumb moved up from the page header by theme-topbar.js */
body.rz-theme .header-navbar .rz-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-2);
    font-size: 13px;
    text-transform: capitalize; /* as Dcat's .text-capitalize on the breadcrumb and title copied here */
    white-space: nowrap;
}

body.rz-theme .header-navbar .rz-crumbs a {
    color: var(--text-2);
}

body.rz-theme .header-navbar .rz-crumbs a:hover {
    color: var(--foreground);
    text-decoration: none;
}

body.rz-theme .header-navbar .rz-crumb-sep {
    opacity: .5;
}

body.rz-theme .header-navbar .rz-crumb-current {
    overflow: hidden;
    color: var(--foreground);
    font-weight: 600;
    text-overflow: ellipsis;
}

body.rz-theme.rz-has-crumbs #pjax-container > .content-header {
    display: none;
}

/* Avatar with initials and its menu */
body.rz-theme .header-navbar .navbar-container .nav .dropdown-user-link {
    display: inline-flex;
    align-items: center;
    padding: 0;
}

body.rz-theme .header-navbar .dropdown-user-link .user-nav,
body.rz-theme .header-navbar .dropdown-user-link img.round {
    display: none !important; /* .user-nav carries Bootstrap's d-sm-flex !important */
}

body.rz-theme .header-navbar .rz-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background-color: var(--brand);
    color: var(--brand-ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    transition: box-shadow 150ms var(--ease-spay);
}

body.rz-theme .header-navbar .dropdown-user-link:hover .rz-avatar {
    box-shadow: 0 0 0 3px var(--brand-soft);
}

body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu {
    position: absolute; /* Bootstrap's .navbar-nav .dropdown-menu is static below 992px, which drops it into the bar */
    top: 100%;
    right: 0;
    left: auto;
    min-width: 208px;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--popover);
    box-shadow: 0 12px 30px -8px var(--brand-soft-2);
}

body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu.show {
    animation: rz-menu-in .16s var(--ease-spay-out) both;
}

@keyframes rz-menu-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

body.rz-theme .header-navbar .rz-menu-user {
    padding: 8px 12px 6px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
}

/* The item rules repeat the menu's chain to beat Dcat's `.header-navbar .navbar-container ul.nav li.dropdown-user
   .dropdown-menu-right .dropdown-item` (padding 0,6,2; orange :hover and :active 0,7,2). */
body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    color: var(--foreground);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

body.rz-theme .header-navbar .dropdown-user .dropdown-item i {
    color: var(--text-2);
    font-size: 18px;
}

body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu .dropdown-item:hover,
body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu .dropdown-item:active {
    background-color: var(--hover);
    color: var(--foreground) !important; /* beats Dcat's color: #fff !important on these items */
}

body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu .dropdown-item[href$="logout"],
body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu .dropdown-item[href$="logout"] i {
    color: var(--err);
}

body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu .dropdown-item[href$="logout"]:hover,
body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu .dropdown-item[href$="logout"]:active {
    background-color: var(--err-bg);
    color: var(--err) !important; /* beats Dcat's color: #fff !important, and the hover rule above */
}

body.rz-theme .header-navbar .dropdown-user .dropdown-divider {
    margin: 4px 0;
    border-top-color: var(--line);
}

/* ---------- Footer (spec 7.4): shown on the customer site, hidden on the portal ---------- */
body.rz-theme .main-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--line);
    background: transparent;
    box-shadow: none;
    color: var(--text-2);
    font-size: 12px;
}

/* The customer-site credit is a <p>: dark.css's `body.rz-theme.dark-mode p` matches it directly (same specificity; shell.css loads later) */
body.rz-theme .main-footer p {
    color: inherit;
}

body.rz-theme .main-footer a,
body.rz-theme .main-footer .reload-terms {
    color: var(--brand-text);
}

/* Collapsed, not display: none, which would also hide the fixed back-to-top button inside it (spec 7.4 keeps it) */
body.rz-theme.rz-app-admin .main-footer {
    height: 0;
    padding-top: 0 !important; /* beats the footer's .pt-1 (padding-top: 1rem !important) */
    padding-bottom: 0;
    border: 0;
    overflow: hidden;
}

/* ---------- Page frame ---------- */
body.rz-theme .content .content-wrapper,
body.rz-theme.navbar-fixed-top .content-wrapper {
    padding: calc(var(--rz-topbar-h) + 16px) 32px 28px !important; /* the UA-based mobile patch (tablets too) is !important */
}

/*
 * A list wider than the page scrolls sideways inside its own card, in both apps and on theme phones (Part 2 spec 5.3 H4),
 * so the page never widens (Part 2 spec 6.16). Dcat's .table-responsive { overflow-x: inherit } turns this off for every
 * grid; cells still wrap first. Only the grid's own wrapper .table-wrapper.complex-container (Grid.php:997): the toolbar
 * is a bare .table-responsive whose export and column dropdowns it would clip, and the theme-off phone card list's
 * wrapper (custom-grid.blade.php:61) has no .complex-container.
 * overflow-y: hidden because overflow-x: auto alone computes overflow-y to auto, and sub-pixel rounding or .rz-copy's
 * -1px margin would then show a vertical scrollbar.
 */
body.rz-theme .table-responsive.table-wrapper.complex-container {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--text-3) transparent;
}

/* Its scrollbar as v4 draws them: Dcat paints .table-responsive scrollbars #eee and #cacaca in both modes, a white band
   under a dark list. Browsers that take scrollbar-color above ignore these; Safari reads only these. */
body.rz-theme .table-responsive.table-wrapper.complex-container::-webkit-scrollbar-track {
    background-color: transparent;
}

body.rz-theme .table-responsive.table-wrapper.complex-container::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 9999px;
    background-color: var(--text-3);
    background-clip: padding-box;
}

body.rz-theme .table-responsive.table-wrapper.complex-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-2);
}

@media (min-width: 992px) {
    body.rz-theme .header-navbar.fixed-top {
        left: var(--rz-sidebar-w);
        transition: all .3s ease, left 300ms var(--ease-spay); /* Dcat's all .3s ease, but left follows the sidebar (spec 7.1) */
    }

    body.rz-theme.sidebar-collapse .header-navbar.fixed-top {
        left: var(--rz-sidebar-w-collapsed);
    }
}

/* ---------- Small screens ---------- */
@media (max-width: 991.98px) {
    body.rz-theme .header-navbar.fixed-top {
        left: 0;
    }

    body.rz-theme .header-navbar .navbar-container {
        gap: 10px;
        padding: 0 16px;
    }

    body.rz-theme .content .content-wrapper,
    body.rz-theme.navbar-fixed-top .content-wrapper {
        padding: calc(var(--rz-topbar-h) + 16px) 16px 7rem !important; /* beats remitza's is_mobile() patch (!important) */
    }
}

@media (max-width: 767.98px) {
    body.rz-theme .header-navbar .navbar-container .nav .dropdown-user .dropdown-menu {
        right: 0 !important;
        left: auto !important; /* Dcat pins open navbar menus with left: 0 !important on phones */
    }
}

@media (max-width: 575.98px) {
    body.rz-theme .header-navbar .rz-crumbs > :not(.rz-crumb-current) {
        display: none;
    }

    body.rz-theme .header-navbar .navbar-container {
        padding-right: 16px !important;
        padding-left: 16px !important; /* Dcat's phone rule sets padding-left: 1rem !important; padding-right: 0 !important */
    }
}