/**
 * Oojeema Consolidator — responsive layout & horizontal scroll for wide reports
 */

/* Typography — Trebuchet MS (overrides AdminLTE Source Sans) */
html,
body,
h1, h2, h3, h4, h5, h6,
.wrapper,
.main-header,
.main-sidebar,
.sidebar,
.nav-sidebar,
.content-wrapper,
.card,
.btn,
.form-control,
input,
button,
select,
textarea {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Arial, sans-serif !important;
}

/* Wordmark PNG (e.g. 840×240) — override Bootstrap img { max-width:100% } so it doesn’t scale to full card width */
.consolidator-brand-logo {
    display: block;
    margin: 0 auto 0.35rem;
    box-sizing: border-box;
    width: auto !important;
    height: auto !important;
    max-width: min(168px, 100%) !important;
    max-height: 48px !important;
    object-fit: contain;
    object-position: center center;
}
/* Step 2 wide header: align wordmark left on md+ */
@media (min-width: 768px) {
    .register-step2-wide-header .consolidator-brand-logo--step2-header {
        margin-left: 0;
        margin-right: auto;
    }
}
.register-step2-wide-header {
    overflow-x: visible;
    overflow-y: visible;
}
.consolidator-auth-brand-product {
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: #212529;
}
.consolidator-auth-brand-context {
    font-size: 0.95rem;
    margin-top: 0.15rem;
}
.consolidator-auth-brand-extra .badge {
    font-size: 0.8rem;
}
/* Auth / register card headers: global .card-header { overflow-x:auto } clips or scrolls wide logos */
body.login-page .card .card-header {
    overflow-x: visible;
    overflow-y: visible;
}

/* Phase 2 — onboarding checklist */
.onboarding-checklist-card .onboarding-step-done {
    opacity: 0.92;
}
.onboarding-checklist-card .onboarding-step-done a {
    color: #28a745;
}

/* Top nav: user menu (profile, help, sign out) */
.main-header .user-menu .dropdown-menu {
    min-width: 11rem;
}
.main-header .user-menu .dropdown-item.active {
    background-color: #f8f9fa;
    color: #212529;
}

/* Right control sidebar (settings gear) */
.control-sidebar {
    width: 300px;
}
.control-sidebar .nav-link.active {
    font-weight: 600;
}

/* --- Prevent horizontal page scroll; scroll inside main content --- */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
}
.wrapper {
    overflow-x: hidden;
    max-width: 100vw;
}
.content-wrapper {
    max-width: 100%;
    min-width: 0;
}
.content-wrapper > .content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.content .container-fluid {
    max-width: 100%;
}

/* --- Cards: filter bars & wide tables --- */
.card-header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.card-header .form-inline {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}
.card .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
/* When Bootstrap already wraps the table, avoid double scrollbars */
.card .card-body > .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
}
.card .card-body > .table-responsive:last-child {
    margin-bottom: 0;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* --- Content header: title + action buttons on small screens --- */
@media (max-width: 767.98px) {
    .content-header .row {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .content-header .row > [class*="col-"] {
        max-width: 100%;
        flex: 0 0 100%;
    }
    .content-header .text-right,
    .content-header .text-sm-right {
        text-align: left !important;
        margin-top: 0.5rem;
    }
    .content-header h1 {
        font-size: 1.2rem;
        line-height: 1.3;
        word-break: break-word;
    }
    .content-header .btn,
    .content-header .btn-group {
        margin-bottom: 0.25rem;
    }
}

/* --- Top navbar --- */
.main-header .navbar-nav .nav-link.text-truncate-user,
.main-header .navbar-nav span.nav-link.text-truncate-user {
    max-width: min(200px, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 576px) {
    .main-header .navbar-nav .nav-link.text-truncate-user,
    .main-header .navbar-nav span.nav-link.text-truncate-user {
        max-width: min(280px, 35vw);
    }
}
.main-header.navbar-dark .text-truncate-user {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* --- Sidebar brand & user (narrow overlay) --- */
.main-sidebar .brand-text {
    max-width: calc(100vw - 5.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.sidebar .user-panel .info {
    min-width: 0;
    flex: 1;
}
.sidebar .user-panel .info a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Dashboard / general stacks --- */
@media (max-width: 575.98px) {
    .content .btn.ml-2,
    .content .btn.ml-1 {
        margin-left: 0 !important;
        margin-top: 0.35rem;
        margin-right: 0.35rem;
    }
    .content .d-flex.flex-wrap {
        gap: 0.35rem;
    }
}

/* --- Auth pages (login / register) — full-width box on small screens --- */
body.login-page {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.login-page .login-box {
    width: 100%;
    max-width: 28rem;
}
@media (max-width: 400px) {
    .login-page .card-body {
        padding: 1rem;
    }
}

/* --- Preset selector (reports) --- */
.consolidator-preset-select {
    width: 100%;
    max-width: 100%;
}
@media (min-width: 768px) {
    .consolidator-preset-select {
        max-width: 280px;
    }
}

/* --- Touch targets --- */
@media (max-width: 767.98px) {
    .nav-sidebar .nav-link {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
}

/* --- Register step 2 — full width, two columns, no vertical center clip --- */
body.register-page.register-step2.login-page {
    display: block;
    min-height: 100vh;
    height: auto;
    align-items: unset;
    justify-content: unset;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.register-step2-wrap {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.register-step2-inner {
    width: 100%;
}
.register-step2-body {
    font-size: 1rem;
    line-height: 1.5;
}
.register-step2-lead {
    font-size: 0.95rem;
    line-height: 1.45;
}
@media (min-width: 992px) {
    .register-step2-left {
        border-right: 1px solid #dee2e6;
        padding-right: 1.75rem;
    }
}
.register-page.register-step2 .register-section-label {
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}
.register-page.register-step2 .register-oojeema-panel {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.35rem;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.register-page.register-step2 .register-oojeema-dl {
    font-size: 0.95rem;
}
.register-page.register-step2 .register-oojeema-dl dt {
    color: #5a6268;
    font-weight: 600;
}
.register-page.register-step2 .register-oojeema-dl dd {
    color: #212529;
    font-weight: 500;
}
.register-page.register-step2 .register-password-explainer {
    background: #f0f7ff;
    border: 1px solid #b8daff;
    border-left: 4px solid #007bff;
    border-radius: 0.35rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
}
.register-page.register-step2 .register-step2-explainer-list li {
    margin-bottom: 0.5rem;
}
.register-page.register-step2 .register-step2-form .form-control {
    background-color: #fff;
}
.register-page.register-step2 .register-step2-form-compact .form-group {
    margin-bottom: 0.5rem;
}
.register-readonly-email {
    word-break: break-word;
}

/* Organization — searchable company picker (Select2 v4 + select2-bootstrap4-theme) */
.org-card-company-picker {
    overflow: visible;
}
.org-card-company-picker .card-body {
    overflow: visible;
}
.org-company-field {
    min-width: min(100%, 24rem);
    max-width: 100%;
}
.org-company-input-group .org-company-select-wrap {
    min-width: 0;
    flex: 1 1 auto;
}
.org-company-input-group .select2-container--bootstrap4 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}
.org-company-input-group .select2-container--bootstrap4.select2-container--focus .select2-selection,
.org-company-input-group .select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}
.org-company-select-wrap {
    min-width: min(100%, 22rem);
    max-width: 100%;
}
.org-company-select-wrap .select2-container {
    width: 100% !important;
}
.org-select2-dropdown {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
    border-color: #ced4da;
}
/* Dropdown attaches to body — stay above AdminLTE sidebar / cards */
.select2-container--open .select2-dropdown {
    z-index: 10050;
}
.select2-container {
    z-index: auto;
}
/* Select2: company name — primary; company code — smaller, gray (field + dropdown list) */
.org-picker-line .org-picker-name {
    font-weight: 500;
    color: #212529;
}
.org-picker-line .org-picker-code {
    font-size: 0.8rem;
    font-weight: 400;
    color: #868e96 !important;
    margin-left: 0.35rem;
}
/* Closed field — selected value */
.org-company-select-wrap .select2-selection__rendered .org-picker-line .org-picker-code {
    font-size: 0.78rem;
    color: #868e96 !important;
}

/* Dropdown results — same hierarchy as field: name dark, code smaller + gray */
.org-select2-dropdown .select2-results__option .org-picker-line .org-picker-name {
    font-weight: 500;
    color: #212529;
}
.org-select2-dropdown .select2-results__option .org-picker-line .org-picker-code {
    font-size: 0.75rem;
    font-weight: 400;
    color: #adb5bd !important;
    margin-left: 0.35rem;
}
/* Keyboard/hover highlight (bootstrap4 theme: primary background, light text) */
.org-select2-dropdown .select2-results__option--highlighted .org-picker-line .org-picker-name {
    color: #fff !important;
}
.org-select2-dropdown .select2-results__option--highlighted .org-picker-line .org-picker-code {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Linked companies + Consolidation groups — name primary, code lighter/smaller */
.org-linked-companies-table .org-linked-company-name,
.groups-companies-table .org-linked-company-name {
    font-weight: 500;
    color: #212529;
}
.org-linked-companies-table .org-linked-company-code,
.groups-companies-table .org-linked-company-code {
    font-size: 0.75rem;
    font-weight: 400;
    color: #adb5bd;
    font-family: inherit;
}

/* Saved presets card — company list (names, HO first) */
.preset-saved-companies-list li:last-child {
    margin-bottom: 0 !important;
}

/* Map Accounts — “What to do next” (card layout; avoids AdminLTE .alert flex quirks) */
.coa-next-steps .card-body {
    padding: 1rem 1.25rem;
}
.coa-next-steps__title {
    font-size: 1.1rem;
    line-height: 1.35;
}
.coa-next-steps__lead {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 100%;
}
.coa-next-steps__list {
    padding-left: 1.35rem;
    margin-left: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    list-style-position: outside;
}
.coa-next-steps__list li {
    margin-bottom: 0.65rem;
    padding-left: 0.25rem;
}
.coa-next-steps__list li:last-child {
    margin-bottom: 0;
}

/* Map Accounts — scroll long COA lists without losing column headers */
.card.coa-map-card .card-body {
    overflow: visible !important;
}
.coa-table-scroll {
    max-height: min(70vh, 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.coa-table-scroll table {
    margin-bottom: 0;
}
.coa-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #e9ecef;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/*
 * Map Accounts — single scroll surface: only the chart table scrolls.
 * Avoids a second scrollbar on .content (overflow-x) + inner table (confusing).
 */
body.map-accounts-page .wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.map-accounts-page .content-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.map-accounts-page .content-wrapper > .subscription-global-banner {
    flex-shrink: 0;
}
body.map-accounts-page .content-wrapper > .content-header {
    flex-shrink: 0;
}
body.map-accounts-page .content-wrapper > .content.map-accounts-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}
body.map-accounts-page .map-accounts-content__inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
}
body.map-accounts-page .map-accounts-content__inner > .alert {
    flex-shrink: 0;
    margin-bottom: 0 !important;
}
body.map-accounts-page .coa-next-steps {
    flex-shrink: 0;
    margin-bottom: 0 !important;
}
body.map-accounts-page .coa-map-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}
body.map-accounts-page .coa-map-card .card-header {
    flex-shrink: 0;
}
body.map-accounts-page .coa-map-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}
body.map-accounts-page .coa-map-card .card-body > p.text-muted.small {
    flex-shrink: 0;
}
body.map-accounts-page .coa-table-scroll {
    flex: 1 1 auto;
    min-height: 8rem;
    max-height: none !important;
}