/* ==========================================================================================
   Module tab row — every sidebar group's children as tabs above the page (module-tabs.js).
   Laid out as GetFly lays out a module header, on the owner's instruction of 2026-09-29: the
   module's icon on a blue tile, its name, and the tabs with an underline on the active one.
   ========================================================================================== */
.crm-module-tabs {
    display: flex; align-items: flex-end; gap: 14px;
    background: #fff;
    border: 1px solid #e3e8ef; border-radius: 12px;
    padding: 12px 18px 0;
    margin-bottom: 14px;
}
.crm-module-tabs .crm-mt-icon {
    flex: none; width: 44px; height: 44px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #17508a; color: #fff; font-size: 22px;
    margin-bottom: 12px;
}
.crm-module-tabs .crm-mt-text { min-width: 0; flex: 1 1 auto; }
.crm-module-tabs .crm-mt-title { font-size: 18px; font-weight: 700; color: #1c2b3d; line-height: 1.2; }
.crm-module-tabs .crm-mt-nav {
    display: flex; gap: 26px; margin-top: 4px;
    overflow-x: auto; scrollbar-width: none;
}
.crm-module-tabs .crm-mt-nav::-webkit-scrollbar { display: none; }
.crm-module-tabs .crm-mt-tab {
    flex: none; white-space: nowrap;
    padding: 6px 2px 9px;
    color: #1c2b3d; font-size: 14px; text-decoration: none;
    border-bottom: 2px solid transparent;
}
.crm-module-tabs .crm-mt-tab:hover { color: #17508a; }
.crm-module-tabs .crm-mt-tab.is-active { color: #17508a; border-bottom-color: #17508a; font-weight: 600; }

@media (max-width: 575.98px) {
    .crm-module-tabs { padding: 10px 12px 0; gap: 10px; border-radius: 10px; }
    .crm-module-tabs .crm-mt-icon { width: 36px; height: 36px; font-size: 18px; margin-bottom: 10px; }
    .crm-module-tabs .crm-mt-title { font-size: 16px; }
    .crm-module-tabs .crm-mt-nav { gap: 18px; }
}

/* In the header bar (owner, 2026-10-03): the row takes the left of the header, where the announcement
   line was, so the page starts with its content. One line on a desktop: the module's tile, its name,
   then the tabs, underlined at the header's bottom edge. The header is in the page flow (not fixed),
   so being a few pixels taller than before moves nothing out from under anything. */
.nk-header .crm-module-tabs {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; margin: 0 16px 0 0;
    align-items: center; gap: 10px;
    flex: 1 1 auto; min-width: 0; align-self: stretch;
}
.nk-header .crm-module-tabs .crm-mt-icon {
    width: 34px; height: 34px; border-radius: 9px; font-size: 18px; margin: 0;
}
.nk-header .crm-module-tabs .crm-mt-text {
    display: flex; align-items: stretch; gap: 24px; align-self: stretch;
}
.nk-header .crm-module-tabs .crm-mt-title {
    display: flex; align-items: center; white-space: nowrap; font-size: 16px;
}
.nk-header .crm-module-tabs .crm-mt-nav { margin-top: 0; gap: 22px; align-items: stretch; min-width: 0; }
.nk-header .crm-module-tabs .crm-mt-tab {
    display: flex; align-items: center; padding: 0 2px;
    border-top: 2px solid transparent; /* balances the underline, so the label sits centred */
}

/* "Thêm ▾": the tabs that do not fit the row (module-tabs-more.js). Once the script runs, the nav
   clips rather than scrolls: whatever would have scrolled out of sight is in the menu instead. */
.crm-module-tabs.crm-mt-has-more .crm-mt-nav { overflow: hidden; }
.crm-mt-more { position: relative; flex: none; display: flex; align-items: stretch; }
.crm-mt-more[hidden] { display: none; }
.crm-mt-more-btn {
    display: flex; align-items: center; gap: 4px;
    background: none; border: 0; padding: 0 2px; cursor: pointer;
    color: #1c2b3d; font-size: 14px; white-space: nowrap;
    border-top: 2px solid transparent; border-bottom: 2px solid transparent;
}
.crm-mt-more-btn .icon { font-size: 14px; transition: transform .15s; }
.crm-mt-more-btn:hover, .crm-mt-more.is-open .crm-mt-more-btn { color: #17508a; }
.crm-mt-more.is-open .crm-mt-more-btn .icon { transform: rotate(180deg); }
.crm-mt-more.is-active .crm-mt-more-btn { color: #17508a; border-bottom-color: #17508a; font-weight: 600; }
.crm-mt-menu {
    display: none; position: absolute; top: 100%; right: 0; z-index: 1040;
    min-width: 220px; max-height: 70vh; overflow-y: auto;
    margin-top: 2px; padding: 6px 0;
    background: #fff; border: 1px solid #e3e8ef; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(28, 43, 61, .14);
}
.crm-mt-more.is-open .crm-mt-menu { display: block; }
.crm-module-tabs .crm-mt-menu .crm-mt-tab {
    display: block; padding: 8px 16px; border: 0; border-left: 3px solid transparent;
    color: #1c2b3d; font-size: 14px; white-space: nowrap;
}
.crm-module-tabs .crm-mt-menu .crm-mt-tab:hover { background: #f3f6fa; color: #17508a; }
.crm-module-tabs .crm-mt-menu .crm-mt-tab.is-active { color: #17508a; font-weight: 600; border-left-color: #17508a; background: #f3f6fa; }

/* Narrower than xl the header already holds the menu button, back button and logo, so the row drops
   to a line of its own at the bottom of the header rather than squeezing between them. */
@media (max-width: 1199.98px) {
    .nk-header .nk-header-wrap { flex-wrap: wrap; }
    .nk-header .crm-module-tabs {
        order: 10; flex: 1 0 100%; margin: 0; padding: 2px 0 0;
        border-top: 1px solid #eef1f6;
    }
    .nk-header .crm-module-tabs .crm-mt-tab { padding: 8px 2px; }
    .nk-header .crm-module-tabs .crm-mt-menu .crm-mt-tab { padding: 8px 16px; }
    .crm-mt-more-btn { padding: 8px 2px; }
}
/* On a phone the header is the slim logo bar (crm-mobile.css), which names nothing, so the tabs alone
   carry the line; the module's tile and name would only repeat the sidebar group the user just tapped. */
@media (max-width: 767.98px) {
    .nk-header .crm-module-tabs .crm-mt-icon,
    .nk-header .crm-module-tabs .crm-mt-title { display: none; }
    .nk-header .crm-module-tabs .crm-mt-nav { gap: 18px; padding: 0 4px; }
    /* crm-mobile.css centres the back arrow on the header (top: 50%); with the tabs on a second line
       that is between the two lines. Pin it to the middle of the 52px logo line instead, which is
       where it was before whenever there is no tab row. */
    .nk-header .crm-back { top: 26px; }
    .nk-header .nk-header-wrap .nk-header-brand { min-height: 52px; display: flex !important; align-items: center; }
}

/* The frame a tab loads into. It fills the window below the row and scrolls inside itself, so the
   page around it does not scroll and its footer is not shown. */
.crm-tab-frame-wrap { position: relative; }
.crm-tab-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.crm-tab-loading {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: flex-start; justify-content: center; padding-top: 80px;
    background: rgba(245, 246, 250, .55);
}
.crm-tab-loading[hidden] { display: none; }
body.crm-tabs-framed .nk-footer { display: none; }
body.crm-tabs-framed .nk-content { padding-bottom: 0; }

/* Inside the frame: content only, flush to the frame's edges. */
body.crm-in-tab-frame .nk-content { padding-top: 0; }
body.crm-in-tab-frame .nk-wrap { padding-top: 0 !important; }

/* A sidebar group's arrow is its own button (wwwroot/js/sidebar-group-link.js): its title opens the
   group's first page. The arrow gets a pill while the pointer is on it so the two read apart. */
.nk-sidebar .nk-menu-toggle.crm-caret-hot { cursor: pointer; }
.nk-sidebar .nk-menu-toggle:after { border-radius: 6px; padding: 4px; margin-right: -4px; }
.nk-sidebar .nk-menu-toggle.crm-caret-hot:after { background: rgba(255, 255, 255, .14); color: #fff; }