/* Horizontal tab bar for client/person profile pages, replacing the old
   vertical "Profile"/"Work" sidebar + breadcrumb (see layouts/app_nav.blade.php
   and app/Helpers/Menus/sidebar_menu.php). Tab look/feel (colors, active
   underline, overflow scrolling) comes from Materialize's own .tabs component
   (public/css/materialize/components/_tabs.scss) - only layout glue lives here. */

.subnav-tabs-bar {
    display: flex;
    align-items: stretch;
    padding-left: 20px;
}

/* Sized to its tabs, so the edit menu icon (.subnav-tabs-edit) follows the last tab */
.subnav-tabs-bar ul.tabs {
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    min-width: 0;
    background-color: transparent;
}

/* The "Profile"/"Work" group-label rows still exist in the underlying menu
   (their position matters for the persisted per-company drag-order and for
   customfields/sub_page.blade.php's lookup into it) but are no longer shown
   as their own groups, so hide them from the flattened tab row. */
.subnav-tabs-bar ul.tabs li.header {
    display: none;
}

.subnav-tabs-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0 25px;
}

.subnav-tabs-actions.subnav-tabs-edit {
    margin-left: 0;
}

/* Edit button above the client card (layouts/parts/client-card.blade.php), as high as the
   tab row, so it lines up with the close button the edit pages show at the end of the row */
.subnav-tabs-actions.client-card-actions {
    justify-content: flex-end;
    height: 42px;
    padding-right: 0;
}

/* Edit button in the client card's top right corner; the content is moved down so the
   button stays clear of the first row's copy icon */
.client-card .client-card-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    color: rgba(0, 0, 0, 0.6);
}

.client-card .client-card-edit:hover {
    color: rgba(0, 0, 0, 0.87);
}

.client-card .client-card-edit i {
    font-size: 20px;
}

.client-card .card-content {
    padding-top: 32px;
}

/* Minimized client card (rightcard-layout in layouts/app_nav.blade.php): the card is hidden and
   the page gets the full width, while its buttons stay at the top right, on the tab bar's row */
.rightcard-layout {
    position: relative;
}

.row.rightcard-layout > .col.rightcard-side {
    padding-left: 0;
    padding-right: 40px;
}

/* Keeps the last tabs clear of the card's buttons */
.rightcard-minimized .subnav-tabs-bar {
    padding-right: 120px;
}

/* Side by side: the card's column shrinks to nothing, so the card slides out to the right
   (clipped by the column) while the page widens, and back in when shown again.
   The card keeps its full width meanwhile (cqw = % of the layout), so its text doesn't reflow. */
@media only screen and (min-width: 993px) {
    .row.rightcard-layout {
        display: flex;
        align-items: flex-start;
        container-type: inline-size;
    }

    .row.rightcard-layout > .col.rightcard-main {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        margin-left: 0;
    }

    .row.rightcard-layout > .col.rightcard-side {
        flex: 0 0 auto;
        width: 25%;
        margin-left: 0;
        padding-top: 42px;
        overflow: hidden;
        transition: width .3s ease, padding-right .3s ease;
    }

    .row.rightcard-layout.rightcard-minimized > .col.rightcard-side {
        width: 0;
        padding-right: 0;
    }

    .rightcard-side .client-card {
        width: calc(25cqw - 40px);
        transition: visibility 0s;
    }

    .rightcard-minimized > .rightcard-side .client-card {
        visibility: hidden;
        transition: visibility 0s .3s;
    }

    /* Positioned by the layout, not the clipped column, so the buttons stay in place */
    .rightcard-layout .subnav-tabs-actions.client-card-actions {
        position: absolute;
        top: 0;
        right: 40px;
        z-index: 1;
    }
}

/* Below large there is no room beside the page, so the card is always hidden (minimized or not)
   and the show/hide toggle with it. */
@media only screen and (max-width: 992px) {
    .row.rightcard-layout > .col.rightcard-side {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        z-index: 1;
    }

    .rightcard-side .client-card,
    .rightcard-side .client-card-toggle {
        display: none;
    }

    .rightcard-layout .subnav-tabs-bar {
        padding-right: 80px;
    }
}

.subnav-tabs-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.subnav-tabs-actions a .iconbutton {
    font-size: 22px;
}

/* Settings and edit menu icons, sized alike: the edit menu's svg by width/height, the settings glyph by font-size */
.subnav-tabs-actions.subnav-tabs-edit a .iconbutton {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
}

.tabs .tab a {
    color: rgba(0, 0, 0, 0.65);
    text-transform: none;
}

.tabs .tab a i {
    margin-right: 7px;
    position: relative;
    top: 1px;
}

.tabs .tab a i.material-icons-outlined, .tabs .tab a i.material-icons {
    top: 5px;
    font-size: 22px;
}

/* Tabs of the client menu that belong to the other mode (view vs. editing the client,
   see client_menu_editing() in sidebar_menu.php). Like li.header, they are kept in the
   row so the drag-order still covers the whole menu. */
.subnav-tabs-bar ul.tabs li.subnav-tab-hidden {
    display: none;
}