/* ==========================================================================
   FBMart Brand Override
   ---------------------------------------------------------------------------
   Single global stylesheet linked from every base template. Overrides the
   Phoenix / Bootstrap defaults (blue primary, Nunito Sans body) with the
   green/orange brand palette and Geist typeface used by the new dashboards.

   Load order matters: this file MUST be linked AFTER theme.min.css and
   user.min.css so its rules win. Scoped redesigned pages (.home-v3,
   .cust-dash-v2, .merch-dash-v2) keep their own rules — their selectors
   carry higher specificity than the bare class names here.
   ========================================================================== */

:root {
    --brand-green:       #1FAB5C;
    --brand-green-deep:  #168447;
    --brand-green-tint:  #E5F4EC;
    --brand-orange:      #F47A1B;
    --brand-orange-deep: #D8650E;
    --brand-orange-tint: #FEEBD8;
    --brand-red:         #C23A2E;
    --brand-red-tint:    #F8E3E0;
    --brand-blue:        #1B6A8E;
    --brand-blue-tint:   #DBEEF6;
    --brand-amber:       #88761E;
    --brand-amber-tint:  #F5EFD5;
    --brand-ink:         #0E1A12;
    --brand-bg:          #FAFAF7;

    /* Override Bootstrap's CSS variables for components that read them */
    --bs-primary:        #1FAB5C;
    --bs-primary-rgb:    31, 171, 92;
    --bs-link-color:     #168447;
    --bs-link-hover-color: #0E1A12;
}

/* === Typography ========================================================= */
body {
    font-family: 'Geist', 'Inter', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
code, kbd, samp, pre, .font-monospace, .text-monospace {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* === Button: primary → brand green ====================================== */
.btn-primary,
.btn.btn-primary {
    --phoenix-btn-bg: var(--brand-green);
    --phoenix-btn-border-color: var(--brand-green);
    --phoenix-btn-hover-bg: var(--brand-green-deep);
    --phoenix-btn-hover-border-color: var(--brand-green-deep);
    --phoenix-btn-active-bg: var(--brand-green-deep);
    --phoenix-btn-active-border-color: var(--brand-green-deep);
    --phoenix-btn-disabled-bg: var(--brand-green);
    --phoenix-btn-disabled-border-color: var(--brand-green);
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: var(--brand-green-deep);
    --bs-btn-hover-border-color: var(--brand-green-deep);
    --bs-btn-active-bg: var(--brand-green-deep);
    --bs-btn-active-border-color: var(--brand-green-deep);
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--brand-green-deep);
    border-color: var(--brand-green-deep);
    color: #fff;
}
.btn-outline-primary {
    color: var(--brand-green-deep);
    border-color: var(--brand-green);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}
.btn-success,
.btn.btn-success {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--brand-green-deep);
    border-color: var(--brand-green-deep);
}
.btn-outline-success {
    color: var(--brand-green-deep);
    border-color: var(--brand-green);
}
.btn-outline-success:hover {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}

/* Warning button → brand orange */
.btn-warning,
.btn.btn-warning {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--brand-orange-deep);
    border-color: var(--brand-orange-deep);
    color: #fff;
}
.btn-outline-warning {
    color: var(--brand-orange-deep);
    border-color: var(--brand-orange);
}
.btn-outline-warning:hover {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
}

/* Danger button — slightly warmer to match dashboard palette */
.btn-danger,
.btn.btn-danger {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #9C2D24;
    border-color: #9C2D24;
}
.btn-outline-danger {
    color: var(--brand-red);
    border-color: var(--brand-red);
}
.btn-outline-danger:hover {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

/* Info button → brand blue */
.btn-info,
.btn.btn-info {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #134F6A;
    border-color: #134F6A;
    color: #fff;
}
.btn-outline-info {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.btn-outline-info:hover {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

/* Phoenix's btn-phoenix-primary helper */
.btn-phoenix-primary {
    color: var(--brand-green-deep);
    background-color: var(--brand-green-tint);
    border-color: transparent;
}
.btn-phoenix-primary:hover,
.btn-phoenix-primary:focus,
.btn-phoenix-primary:active {
    background-color: var(--brand-green);
    color: #fff;
}

/* === Background utility classes ========================================= */
.bg-primary,
.bg-primary-subtle {
    background-color: var(--brand-green) !important;
    color: #fff;
}
.bg-primary-subtle {
    background-color: var(--brand-green-tint) !important;
    color: var(--brand-green-deep);
}
.bg-success,
.bg-success-subtle {
    background-color: var(--brand-green) !important;
    color: #fff;
}
.bg-success-subtle {
    background-color: var(--brand-green-tint) !important;
    color: var(--brand-green-deep);
}
.bg-warning,
.bg-warning-subtle {
    background-color: var(--brand-orange) !important;
    color: #fff;
}
.bg-warning-subtle {
    background-color: var(--brand-orange-tint) !important;
    color: var(--brand-orange-deep);
}
.bg-danger,
.bg-danger-subtle {
    background-color: var(--brand-red) !important;
    color: #fff;
}
.bg-danger-subtle {
    background-color: var(--brand-red-tint) !important;
    color: var(--brand-red);
}
.bg-info,
.bg-info-subtle {
    background-color: var(--brand-blue) !important;
    color: #fff;
}
.bg-info-subtle {
    background-color: var(--brand-blue-tint) !important;
    color: var(--brand-blue);
}

/* === Text utility classes =============================================== */
.text-primary { color: var(--brand-green-deep) !important; }
.text-success { color: var(--brand-green-deep) !important; }
.text-warning { color: var(--brand-orange-deep) !important; }
.text-danger  { color: var(--brand-red) !important; }
.text-info    { color: var(--brand-blue) !important; }

/* === Badges — brand status palette ====================================== */
.badge.bg-primary,
.badge.bg-success {
    background-color: var(--brand-green-tint) !important;
    color: var(--brand-green-deep) !important;
    font-weight: 500;
}
.badge.bg-warning {
    background-color: var(--brand-orange-tint) !important;
    color: var(--brand-orange-deep) !important;
    font-weight: 500;
}
.badge.bg-danger {
    background-color: var(--brand-red-tint) !important;
    color: var(--brand-red) !important;
    font-weight: 500;
}
.badge.bg-info {
    background-color: var(--brand-blue-tint) !important;
    color: var(--brand-blue) !important;
    font-weight: 500;
}
/* Phoenix badge variants */
.badge-phoenix.badge-phoenix-primary,
.badge-phoenix.badge-phoenix-success {
    background-color: var(--brand-green-tint);
    color: var(--brand-green-deep);
}
.badge-phoenix.badge-phoenix-warning {
    background-color: var(--brand-orange-tint);
    color: var(--brand-orange-deep);
}
.badge-phoenix.badge-phoenix-danger {
    background-color: var(--brand-red-tint);
    color: var(--brand-red);
}
.badge-phoenix.badge-phoenix-info {
    background-color: var(--brand-blue-tint);
    color: var(--brand-blue);
}

/* === Links ============================================================== */
a {
    color: var(--brand-green-deep);
}
a:hover, a:focus {
    color: var(--brand-orange-deep);
}
/* Don't recolor links inside Phoenix nav / sidebar / buttons — they have
   their own color schemes that we shouldn't disturb here. */
.nav-link, .navbar a, .dropdown-item, .btn, .navbar-vertical a,
.shopify-sidebar a, .shopify-customer-sidebar a {
    color: inherit;
}
.nav-link.active, .nav-link:hover {
    color: var(--brand-green-deep);
}

/* === Forms — focused inputs use brand green ============================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.2rem rgba(31, 171, 92, 0.15);
}
.form-check-input:checked {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}
.form-check-input:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.2rem rgba(31, 171, 92, 0.15);
}

/* === Progress bars ====================================================== */
.progress-bar { background-color: var(--brand-green); }
.progress-bar.bg-success { background-color: var(--brand-green); }
.progress-bar.bg-warning { background-color: var(--brand-orange); }
.progress-bar.bg-danger  { background-color: var(--brand-red); }
.progress-bar.bg-info    { background-color: var(--brand-blue); }

/* === Selection ========================================================== */
::selection {
    background: var(--brand-green);
    color: #fff;
}