/* Asan Property brand palette.
   Loaded by layouts/app.blade.php and layouts/auth.blade.php after Tabler,
   so these rules win. resources/css/app.css is NOT loaded by the CRM — only
   welcome.blade.php uses it, and the root route never renders that page.

   Navy is the primary. Orange is an accent only: active markers, focus rings,
   badges. White on orange measures 3.0:1, so orange never carries normal text.
   Navy on white and white on navy are both 16.4:1. */

:root {
    --asan-navy: #101A3C;
    --asan-navy-soft: #1B2A55;
    --asan-orange: #F06C29;
    --asan-orange-light: #F78E56;
    --asan-orange-text: #C2470E; /* orange as TEXT on white: 5.0:1 */
    --asan-white: #F9F8FB;
    --asan-mist: #E8ECF3;
    --asan-paper: #FFFFFF;

    --tblr-primary: var(--asan-navy);
    --tblr-primary-rgb: 16, 26, 60;
    --tblr-link-color: var(--asan-orange-text);
    --tblr-link-hover-color: var(--asan-navy);
    --tblr-focus-ring-color: rgba(240, 108, 41, 0.35);
}

.btn-primary {
    background-color: var(--asan-navy);
    border-color: var(--asan-navy);
    color: var(--asan-paper);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--asan-navy-soft);
    border-color: var(--asan-navy-soft);
    color: var(--asan-paper);
}

.navbar-vertical {
    background-color: var(--asan-navy);
}

.navbar-vertical .nav-link {
    border-left: 3px solid transparent;
}

.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link.active {
    background-color: var(--asan-navy-soft);
    border-left-color: var(--asan-orange);
    color: var(--asan-white);
}

.navbar-vertical .nav-item.active > .nav-link .nav-link-icon {
    color: var(--asan-orange);
}

:focus-visible {
    outline: 2px solid var(--asan-orange);
    outline-offset: 1px;
}

/* Tabler beta20 compiles its link colour, so the --tblr-link-color variable
   above does not reach plain links. Set them directly, but never touch links
   that are really buttons, nav items or dropdown rows. */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand),
.btn-link {
    color: var(--asan-orange-text);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover,
.btn-link:hover {
    color: var(--asan-navy);
}

/* Workspace list screens: the filter bar stays put while a long table scrolls.
   Sticky rather than fixed, so it never covers content on a short page. */
.workspace-filter-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--tblr-bg-surface, var(--asan-paper));
}

.workspace-tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.workspace-tabs .workspace-tab {
    white-space: nowrap;
}

/* Header user menu.
 *
 * The button carried the full name and the full role name at their natural
 * width, so on a phone it pushed the header past the screen and the whole app
 * scrolled sideways. The new role names made it certain rather than likely:
 * "Property Transaction Manager" next to a name does not fit in 375px.
 *
 * The role is dropped below the sm breakpoint — it is already on the profile
 * page and is not what someone reaches for on a phone — and the name is capped
 * and truncated so no name can do this again. */
.user-menu-name {
    display: inline-block;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 575.98px) {
    .user-menu-role {
        display: none;
    }

    .user-menu-name {
        max-width: 6.5rem;
    }
}