/* ══════════════════════════════════════════════════════════════════════
   FRONTIER NAVBAR (Phase 2)
   Refined operator top bar — white surface, hairline rule, branded
   primary-action slot on the right.
   ══════════════════════════════════════════════════════════════════════ */

.fr-navbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 16px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    border-radius: var(--fr-r-md);
    margin: 4px 0 24px;
    box-shadow: 0 1px 0 rgba(20, 24, 29, 0.02);
    font-family: var(--fr-font-sans);
}

.fr-navbar-spacer { flex: 1; }

/* Menu icon button (top-left) */
.fr-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--fr-r-md);
    border: 1px solid var(--fr-hairline-strong);
    background: var(--fr-surface);
    color: var(--fr-ink);
    font-family: var(--fr-font-sans);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}
.fr-icon-btn:hover {
    background: var(--fr-bg);
    border-color: #C9C5B8;
}

/* Frontier wordmark */
.fr-brand {
    font-family: var(--fr-font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--fr-ink);
    margin-left: 4px;
    user-select: none;
    line-height: 1;
}

/* Property selector wrapper — sized for navbar.
   Fixed width sized to the longest property name
   ("The Colony at Bear Creek (Combined)") so the selected value never
   truncates and menu options don't wrap; min-width lets it shrink
   gracefully if the navbar gets crowded on narrow screens. */
.fr-property-select {
    width: 330px;
    min-width: 240px;
}

/* Override react-select internals (used by dcc.Dropdown) so the
   selector matches the navbar aesthetic. The .Select-* classes are
   from older react-select; modern Dash still emits them. */
.fr-property-select-inner .Select-control {
    border: 1px solid var(--fr-hairline-strong) !important;
    border-radius: var(--fr-r-md) !important;
    background: var(--fr-surface) !important;
    height: 38px !important;
    font-family: var(--fr-font-sans) !important;
    font-size: 13.5px !important;
    transition: border-color 120ms ease;
    box-shadow: none !important;
}
.fr-property-select-inner .Select-control:hover {
    border-color: #C9C5B8 !important;
}
.fr-property-select-inner .Select-value-label,
.fr-property-select-inner .Select-placeholder,
.fr-property-select-inner .Select-input {
    line-height: 36px !important;
    font-weight: 500 !important;
    color: var(--fr-ink) !important;
}
.fr-property-select-inner .Select-arrow {
    border-color: var(--fr-ink-3) transparent transparent !important;
}
.fr-property-select-inner .is-focused:not(.is-open) > .Select-control {
    border-color: var(--fr-accent) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.10) !important;
}

/* Primary action button (orange) — Publish Rates / Submit for Review.
   These !important rules override Bootstrap's .btn / .btn-primary /
   .btn-success defaults that ship with dbc.Button. */
.fr-action-btn,
.fr-action-btn.btn,
.fr-action-btn.btn-primary,
.fr-action-btn.btn-success {
    background-color: var(--fr-accent) !important;
    border-color: var(--fr-accent) !important;
    color: #FFFFFF !important;
    font-family: var(--fr-font-sans) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    height: 38px;
    padding: 0 16px !important;
    border-radius: var(--fr-r-md) !important;
    box-shadow: 0 1px 0 rgba(20, 24, 29, 0.04),
                0 1px 3px rgba(180, 83, 9, 0.22) !important;
    transition: transform 120ms ease, box-shadow 200ms ease,
                background-color 120ms ease, border-color 120ms ease;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.fr-action-btn:hover,
.fr-action-btn.btn:hover {
    background-color: var(--fr-accent-strong) !important;
    border-color: var(--fr-accent-strong) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(20, 24, 29, 0.04),
                0 4px 10px rgba(180, 83, 9, 0.28) !important;
}
.fr-action-btn:focus,
.fr-action-btn.btn:focus {
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.20) !important;
    outline: none;
}
.fr-action-btn .fr-btn-icon {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
}