/* Business switcher — header workspace picker (BUSINESS_ENTITY_PLAN.md Phase 1).
   Styled as an avatar chip so it reads as a distinct business/workspace
   control, not a second account menu. Uses Keepr design tokens throughout. */

/* ---- Trigger (on the dark header) ----
   Metronic gives the navbar toggle a tall 25px top/bottom padding for a
   full-height click area. Keep that (so height matches the account menu) but
   TRIM it a touch and centre a compact chip inside — the background lives on
   the inner .biz-chip, never on the tall toggle (which would paint a giant
   pill). */
.dropdown-business-switcher > .dropdown-toggle {
    display: flex !important;
    align-items: center;
    padding: 19px 12px !important;
}
/* Kill Metronic's full-height toggle hover/open background — only the inner
   chip should highlight, not the whole tall click area. */
.dropdown-business-switcher > .dropdown-toggle,
.dropdown-business-switcher > .dropdown-toggle:hover,
.dropdown-business-switcher > .dropdown-toggle:focus,
.dropdown-business-switcher.open > .dropdown-toggle {
    background: transparent !important;
}
.dropdown-business-switcher > .dropdown-toggle,
.dropdown-business-switcher > .dropdown-toggle .username {
    color: #fff !important;
}
.dropdown-business-switcher > .dropdown-toggle .fa-angle-down {
    color: #fff !important;
    font-size: 12px;
    opacity: 0.8;
}

/* The visible chip. */
.dropdown-business-switcher .biz-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: var(--radius);
    padding: 5px 11px 5px 5px;
}
.dropdown-business-switcher > .dropdown-toggle:hover .biz-chip,
.dropdown-business-switcher.open .biz-chip {
    background: rgba(255, 255, 255, 0.13);
}

/* On mobile the chip collapses to just the avatar tile + caret (the business
   name would risk overflowing a narrow bar). Metronic's .username-hide-on-mobile
   is scoped to .dropdown-user, so scope our own. */
@media (max-width: 767px) {
    .dropdown-business-switcher .biz-chip .username { display: none !important; }
    .dropdown-business-switcher .biz-chip { padding: 5px 9px 5px 5px; gap: 5px; }
}

/* ---- Avatar tile (initial, colour-coded by nature) ---- */
.biz-avatar {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
}
.biz-avatar--lg { width: 28px; height: 28px; border-radius: 8px; }
.biz-avatar--trade { background: var(--color-primary); }
.biz-avatar--prop  { background: var(--color-warning); }
/* Tooltip-bearing tiles (Today list, logged time, tasks) show only an
   initial — pointer cursor signals the hover affordance for the full-name
   tooltip. */
.biz-avatar.tooltips { cursor: pointer; }

/* ---- Open dropdown ---- */
.dropdown-business-switcher .dropdown-menu {
    min-width: 250px;
    padding: 6px 0;
}
.dropdown-business-switcher .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding: 8px 14px;
}
.dropdown-business-switcher .dropdown-menu > li.active > a {
    background: #f2f7fb;
}
.dropdown-business-switcher .biz-name {
    flex: 1 1 auto;
    font-weight: 500;
}
.dropdown-business-switcher .biz-tick {
    color: var(--color-success);
}
.dropdown-business-switcher .biz-foot-icon {
    width: 28px;
    text-align: center;
    color: var(--color-text-muted);
}

/* Nature tag — small muted inline pill (NOT the large floating .badge). */
.dropdown-business-switcher .dropdown-menu .biz-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #8a6d3b;
    background: #faf1dd;
    border-radius: var(--radius-pill);
    vertical-align: middle;
}

/* "Pro" pill on gated Add-business actions (businesses page + switcher footer). */
.biz-pro-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    margin-left: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-warning);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
/* Gated Add-business button on the businesses page reads as muted, not primary. */
.biz-add-pro { opacity: 0.9; }
.biz-add-pro .fa-lock { margin-right: 4px; opacity: 0.75; }

/* Locked business (Free, non-live) — greyed and INERT: not switchable, no
   navigation, just a tooltip. Reads as disabled (not-allowed cursor, no
   clickable hover highlight). */
.dropdown-business-switcher .biz-locked > .biz-locked-item {
    opacity: .55;
    cursor: not-allowed;
}
.dropdown-business-switcher .biz-locked > .biz-locked-item:hover,
.dropdown-business-switcher .biz-locked > .biz-locked-item:focus {
    opacity: .6;
    background: transparent;
}
.dropdown-business-switcher .biz-lock {
    margin-left: auto;
    color: var(--color-warning, #b8860b);
    font-size: 12px;
}

/* Small tile for inline use in lists (Today logged time, to-do list). */
.biz-avatar--sm { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }

/* ── Shared access ───────────────────────────────────────────────────────────
   A person who works on other people's books (an accountant, a bookkeeper) sees
   their own businesses first, then a "Shared with you" group. Each shared row
   names its OWNER underneath, because "Harbour Studio" alone does not say whose
   books you are about to open — and opening the wrong client's is the mistake
   this whole surface has to make hard. */
.dropdown-business-switcher .biz-group-header {
    padding: 6px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a93a5;
}
.dropdown-business-switcher .biz-owner {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    color: #8a93a5;
}
/* The name cell holds two lines now, so let it stack rather than clip. */
.dropdown-business-switcher .biz-name { line-height: 1.25; }