/*
   Indeliver Blue + Orange Brand Theme — V29
   ------------------------------------------------------------
   Palette sampled from the supplied Indeliver logo:
   Primary blue   #275498
   Deep blue      #163977
   Action orange  #E76B05
   Bright orange  #FA8F14

   Design rule:
   - Blue = navigation, structure, focus, links, active state
   - Orange = primary calls-to-action and important highlights
*/

:root {
    --ind-blue: var(--brand-primary, #275498);
    --ind-blue-600: var(--brand-primary-hover, #1f477f);
    --ind-blue-700: var(--brand-primary-deep, #163977);
    --ind-blue-soft: var(--brand-primary-soft, #eef4fb);
    --ind-blue-line: var(--brand-primary-border, #b9c9e0);
    --ind-orange: var(--brand-secondary, #e76b05);
    --ind-orange-600: var(--brand-secondary-hover, #c75a04);
    --ind-orange-bright: var(--brand-secondary, #fa8f14);
    --ind-orange-soft: var(--brand-secondary-soft, #fff2e8);
    --ind-theme-bg: #f4f7fb;
    --ind-theme-ink: #1f2937;

    /* Portal theme tokens used by vendor-indeliver-v8.css. */
    --ind-brand: var(--ind-blue);
    --ind-brand-600: var(--ind-blue-600);
    --ind-brand-700: var(--ind-blue-700);
    --ind-brand-soft: var(--ind-blue-soft);
    --ind-brand-ring: rgba(var(--brand-primary-rgb, 39, 84, 152), .14);
    --ind-accent: var(--ind-orange);
    --ind-accent-600: var(--ind-orange-600);
    --ind-accent-soft: var(--ind-orange-soft);

    /* Public/account design tokens used by existing account styles. */
    --expo-blue: var(--ind-blue);
    --expo-blue-dark: var(--ind-blue-700);
    --expo-blue-soft: var(--ind-blue-soft);
    --expo-orange: var(--ind-orange);
    --expo-orange-dark: var(--ind-orange-600);
    --expo-orange-soft: var(--ind-orange-soft);
    --expo-orange-line: var(--brand-secondary-border, #f3c39f);

    /* Registration reference stylesheet tokens. */
    --orange: var(--ind-orange);
    --orange-dark: var(--ind-orange-600);
    --dark: var(--ind-blue-700);
    --page: var(--ind-theme-bg);
}

/* ---------------------------------------------------------------------
   Application shell and brand
   --------------------------------------------------------------------- */
body.ind-vendor-body,
.ind-vendor-app,
.ind-app-content,
body.indeliver-public,
.auth-page,
.account-page,
.register-page {
    background: var(--ind-theme-bg);
}

.ind-topbar {
    border-bottom-color: #e2e8f0;
    box-shadow: 0 1px 7px rgba(var(--brand-primary-rgb, 39, 84, 152), .055);
}

.ind-topbar-brand {
    border-right-color: #e2e8f0;
}

.ind-brand {
    gap: 9px;
}

.ind-brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: block;
    object-fit: contain;
    border-radius: 11px;
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb, 39, 84, 152), .10);
}

.ind-brand-text strong {
    color: var(--ind-blue-700);
    letter-spacing: .045em;
}

.ind-brand-text small {
    color: var(--ind-orange);
    letter-spacing: .14em;
}

.ind-avatar {
    background: linear-gradient(145deg, var(--ind-blue), var(--ind-blue-700));
    box-shadow: 0 3px 10px rgba(var(--brand-primary-rgb, 39, 84, 152), .18);
}

.ind-global-track:focus-within {
    border-color: var(--ind-blue);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 39, 84, 152), .12);
}

/* Main CTA = orange. Structural/active state remains blue. */
.ind-vendor-body .btn-primary,
.ind-btn-primary,
.ind-vendor-body .btn-warning,
.ind-top-create {
    background: var(--ind-orange) !important;
    border-color: var(--ind-orange) !important;
    color: #fff !important;
    box-shadow: 0 5px 13px rgba(var(--brand-secondary-rgb, 231, 107, 5), .15);
}

.ind-vendor-body .btn-primary:hover,
.ind-btn-primary:hover,
.ind-vendor-body .btn-warning:hover,
.ind-top-create:hover {
    background: var(--ind-orange-600) !important;
    border-color: var(--ind-orange-600) !important;
}

.ind-vendor-body .btn-outline-primary {
    border-color: var(--ind-blue-line) !important;
    color: var(--ind-blue) !important;
    background: #fff !important;
}

.ind-vendor-body .btn-outline-primary:hover {
    border-color: var(--ind-blue) !important;
    background: var(--ind-blue-soft) !important;
    color: var(--ind-blue-700) !important;
}

/* Navigation and active state = blue. */
.ind-nav-item > a:hover,
.ind-nav-group-toggle:hover,
.ind-nav-submenu a:hover,
.ind-account-dropdown a:hover,
.ind-account-dropdown button:hover {
    color: var(--ind-blue) !important;
}

.ind-nav-item.active > a,
.ind-nav-group.active > .ind-nav-group-toggle,
.ind-nav-submenu li.active > a {
    background: var(--ind-blue-soft) !important;
    color: var(--ind-blue) !important;
}

.ind-nav-item.active > a {
    box-shadow: inset 3px 0 0 var(--ind-blue);
}

.ind-nav-item.active .ind-nav-glyph,
.ind-nav-group.active > .ind-nav-group-toggle .ind-nav-glyph {
    color: var(--ind-blue);
}

.ind-nav-submenu a:hover {
    background: #f5f8fc !important;
}

.ind-work-tabs a:hover,
.ind-work-tabs a.active,
.ind-tracking-link,
.ind-back-link,
.ind-card-header-row > a,
.ind-vendor-body .btn-link {
    color: var(--ind-blue) !important;
}

.ind-work-tabs a.active::after,
.ind-rider-workspace-tabs a.active {
    border-color: var(--ind-blue);
}

.ind-work-tabs a.active::after {
    background: var(--ind-blue);
}

.ind-status-tabs a.active,
.ind-subtabs a.active,
.ind-rider-kpis button.active {
    border-color: var(--ind-blue-line) !important;
    background: var(--ind-blue-soft) !important;
    color: var(--ind-blue) !important;
}

.ind-status-tabs a.active strong,
.ind-rider-kpis button.active strong {
    color: var(--ind-blue) !important;
}

/* Forms/focus = blue. Checkbox/radio selections use blue unless action-specific. */
.ind-vendor-body .form-control:focus,
.ind-vendor-body .form-select:focus,
.shipment-input:focus,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--ind-blue) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 39, 84, 152), .12) !important;
}

.ind-vendor-body .form-check-input:checked,
.ind-inline-check input,
.ind-api-scope input,
.ind-check-line input,
.permission-check input {
    accent-color: var(--ind-blue) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background: var(--ind-blue) !important;
}

.shipment-field em,
.ind-rider-profile-avatar,
.ind-rider-avatar {
    color: var(--ind-blue) !important;
}

.ind-rider-profile-avatar,
.ind-rider-avatar {
    background: var(--ind-blue-soft) !important;
}

/* Keep useful orange accents in dashboards/reports. */
.ind-report-progress span,
.ind-report-horizontal-bar-track span,
.ind-rider-month-track i.delivered {
    background: var(--ind-orange) !important;
}

.ind-report-dist-track i {
    background: linear-gradient(90deg, var(--ind-blue), var(--ind-orange-bright));
}

/* ---------------------------------------------------------------------
   Shared public/account logo mark
   --------------------------------------------------------------------- */
.ind-public-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    min-height: 48px;
}

.ind-public-brand > img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: block;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(5, 18, 42, .22);
}

.ind-public-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.ind-public-brand-copy strong {
    color: #fff;
    font-size: .94rem;
    font-weight: 900;
    letter-spacing: .055em;
}

.ind-public-brand-copy small {
    margin-top: 5px;
    color: var(--brand-secondary);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .18em;
}

/* ---------------------------------------------------------------------
   Login / password recovery / account status
   --------------------------------------------------------------------- */
.auth-shell,
.account-shell,
.register-shell {
    border-color: #dce5f0;
    box-shadow: 0 18px 48px rgba(var(--brand-primary-rgb, 39, 84, 152), .10);
}

.auth-story,
.account-brand,
.register-side {
    background:
        radial-gradient(circle at 88% 14%, rgba(var(--brand-secondary-rgb, 250, 143, 20), .13), transparent 28%),
        linear-gradient(145deg, var(--brand-primary-deep) 0%, var(--brand-primary) 58%, var(--brand-primary-deep) 100%) !important;
}

.auth-story::before,
.account-brand::before,
.register-side::before {
    background: linear-gradient(180deg, var(--ind-orange-bright), var(--ind-orange)) !important;
}

.auth-copy p,
.account-brand-copy p,
.register-side-copy {
    color: var(--brand-primary-contrast) !important;
}

.auth-proof,
.account-brand-foot,
.register-side-footer {
    color: var(--brand-primary-contrast) !important;
}

.auth-link,
.login-link,
.account-secondary a,
.account-secondary button {
    color: var(--ind-blue) !important;
}

.auth-password-toggle,
.account-toggle {
    color: var(--ind-orange) !important;
}

.auth-control:focus,
.account-control:focus,
.register-page .form-control:focus,
.register-page .select2-container--default.select2-container--focus .select2-selection--single,
.register-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ind-blue) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 39, 84, 152), .11) !important;
}

.auth-check input,
.password-toggle input {
    accent-color: var(--ind-blue) !important;
}

.auth-submit,
.register-submit,
.account-submit {
    background: var(--ind-orange) !important;
    border-color: var(--ind-orange) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(var(--brand-secondary-rgb, 231, 107, 5), .18) !important;
}

.auth-submit:hover,
.register-submit:hover,
.account-submit:hover {
    background: var(--ind-orange-600) !important;
    border-color: var(--ind-orange-600) !important;
}

.account-status-icon.is-mail {
    background: var(--ind-orange-soft) !important;
    color: var(--ind-orange) !important;
}

.account-outline:hover {
    border-color: var(--ind-blue-line) !important;
    background: var(--ind-blue-soft) !important;
    color: var(--ind-blue) !important;
}

/* Registration page details. */
.auth-eyebrow,
.account-brand-copy .account-kicker,
.expo-kicker,
.expo-eyebrow,
.expo-pill {
    color: var(--brand-secondary) !important;
}

.register-title,
.account-panel h2,
.auth-panel h2 {
    color: var(--ind-blue-700) !important;
}

/* ---------------------------------------------------------------------
   Public/basic controls that use the older Expo variables
   --------------------------------------------------------------------- */
a {
    text-decoration-color: rgba(var(--brand-primary-rgb, 39, 84, 152), .35);
}

:focus-visible {
    outline-color: rgba(var(--brand-primary-rgb, 39, 84, 152), .42) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ind-blue) !important;
    box-shadow: 0 0 0 .18rem rgba(var(--brand-primary-rgb, 39, 84, 152), .09) !important;
}

/* Footer and small decorative accent remain orange so both logo colors repeat. */
.expo-footer-support-link i,
.expo-footer-social a:hover,
#back-top:hover {
    color: var(--ind-orange) !important;
}

/* ---------------------------------------------------------------------
   Responsive logo treatment
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ind-brand-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

@media (max-width: 575.98px) {
    .ind-public-brand > img {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .ind-public-brand-copy strong {
        font-size: .86rem;
    }
}

/* Branded application footer. */
.ind-app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #7a8797;
}

.ind-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ind-footer-brand img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.ind-footer-brand strong {
    color: var(--ind-blue-700);
    font-size: 9px;
    letter-spacing: .06em;
}

.ind-footer-brand small {
    color: var(--ind-orange);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
}

@media (max-width: 575.98px) {
    .ind-app-footer {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Public tracking page: blue journey/progress + orange search action. */
:root {
    --tracking-brand: var(--ind-blue);
    --tracking-brand-dark: var(--ind-blue-700);
    --tracking-brand-soft: var(--ind-blue-soft);
    --tracking-page: var(--ind-theme-bg);
}

.tracking-brand-row {
    margin-bottom: 14px;
}

.tracking-brand-row .ind-public-brand > img {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    box-shadow: 0 4px 14px rgba(22, 57, 119, .11);
}

.tracking-brand-row .ind-public-brand-copy strong {
    color: var(--ind-blue-700);
}

.tracking-brand-row .ind-public-brand-copy small {
    color: var(--ind-orange);
}

.tracking-search-box:focus-within {
    border-color: var(--ind-blue) !important;
    box-shadow: 0 0 0 3px rgba(39, 84, 152, .10) !important;
}

.tracking-search-box button {
    background: var(--ind-orange) !important;
}

.tracking-search-box button:hover {
    background: var(--ind-orange-600) !important;
}

.tracking-progress-step.completed .tracking-step-icon {
    background: var(--ind-blue) !important;
    box-shadow: 0 0 0 1px rgba(var(--brand-primary-rgb, 39, 84, 152), .20) !important;
}

.tracking-progress-step.active .tracking-step-icon {
    background: var(--ind-orange) !important;
    box-shadow: 0 0 0 4px rgba(var(--brand-secondary-rgb, 231, 107, 5), .12) !important;
}