/* ==========================================================================
   Courier Exchange theme. Applied with <body class="theme-cx"> on every
   Courier Exchange page (and a CX driver's own page). #282837 replaces the
   green everywhere (buttons, menu, cards, pills, meters, charts) and #fed200 is
   the accent (card strips, message edges, the sign-in dot). Buttons stay
   #282837 on hover; there are no coloured underlines.
   DPD pages use the cherry-red theme instead (dpd-theme.css).
   ========================================================================== */

.theme-cx {
    --cx-ink: #282837;
    --cx-ink-soft: #ececf1;
    --cx-yellow: #fed200;
    --cx-yellow-soft: #fff7d1;

    /* The whole Courier Exchange palette: #282837 replaces the green, #fed200 is the accent. */
    --app-navy: var(--cx-ink);
    --app-navy-hover: var(--cx-ink);
    --app-teal: var(--cx-ink);
    --app-teal-soft: var(--cx-ink-soft);
    --app-willow: var(--cx-yellow);
    --app-line: #e2e2ea;
    --app-canvas: #f6f6f9;
    --app-muted: #4a4a5c;
}

/* Cards, pills, meters and figures use #282837 instead of green. Red (overdue) and amber (warning) keep their meaning. */
.theme-cx .tone-success { --tone: var(--cx-ink); --tone-bg: var(--cx-ink-soft); --tone-ink: var(--cx-ink); }
.theme-cx .tone-info    { --tone: #7a7a92; --tone-bg: #eeeef3; --tone-ink: var(--cx-ink); }

.theme-cx .text-success {
    color: var(--cx-ink) !important;
}

.theme-cx .bg-success,
.theme-cx .progress-bar.bg-success {
    background-color: var(--cx-ink) !important;
    color: #ffffff !important;
}

.theme-cx .bg-warning {
    background-color: var(--cx-yellow-soft) !important;
    color: var(--cx-ink) !important;
}

.theme-cx .progress {
    background: var(--cx-ink-soft);
}

.theme-cx .invoice-status-open {
    color: var(--cx-ink);
    background: #eeeef3;
}

.theme-cx .invoice-status-paid {
    color: #ffffff;
    background: var(--cx-ink);
}

.theme-cx .app-flash {
    border-color: var(--cx-ink-soft);
    border-left: 4px solid var(--cx-yellow);
    background: #ffffff;
    color: var(--cx-ink);
}

.theme-cx .user-indicator {
    background: var(--cx-yellow);
}

.theme-cx .rec-link:hover,
.theme-cx .rec-link:focus-within {
    border-color: var(--cx-ink);
}

/* Links: #282837 text, underlined in the same colour (no coloured underline). */
.theme-cx a:not(.btn):not(.sidebar-link):not(.business-switch-option):not(.nav-link),
.theme-cx a:not(.btn):not(.sidebar-link):not(.business-switch-option):not(.nav-link):hover {
    color: var(--cx-ink);
    text-decoration-color: currentColor;
}

/* Buttons: #282837 with white text, staying #282837 on hover. */
.theme-cx .btn-primary,
.theme-cx .btn-success,
.theme-cx .btn-primary:hover,
.theme-cx .btn-primary:focus,
.theme-cx .btn-primary:active,
.theme-cx .btn-success:hover,
.theme-cx .btn-success:focus,
.theme-cx .btn-success:active {
    background: var(--cx-ink);
    border-color: var(--cx-ink);
    color: #ffffff;
}

.theme-cx .btn-primary:disabled,
.theme-cx .btn-primary.disabled {
    background: var(--cx-ink);
    border-color: var(--cx-ink);
    color: #ffffff;
    opacity: 0.55;
}

.theme-cx .btn-outline-primary,
.theme-cx .btn-outline-secondary {
    border-color: var(--cx-ink);
    color: var(--cx-ink);
}

.theme-cx .btn-outline-primary:hover,
.theme-cx .btn-outline-primary:focus,
.theme-cx .btn-outline-primary:active,
.theme-cx .btn-outline-secondary:hover,
.theme-cx .btn-outline-secondary:focus,
.theme-cx .btn-outline-secondary:active {
    background: var(--cx-ink);
    border-color: var(--cx-ink);
    color: #ffffff;
}

/* Sidebar and business switcher: the active item is #282837. */
.theme-cx .sidebar-link:hover,
.theme-cx .sidebar-link:focus {
    background: var(--cx-ink-soft);
    color: var(--cx-ink);
}

.theme-cx .sidebar-link.active,
.theme-cx .sidebar-link.active:hover,
.theme-cx .sidebar-link.active:focus {
    background: var(--cx-ink);
    color: #ffffff;
}

.theme-cx .sidebar-link.active .sidebar-icon {
    color: #ffffff;
}

.theme-cx .business-switch-option.active,
.theme-cx .business-switch-option.active:hover {
    background: var(--cx-ink);
    color: #ffffff;
}

.theme-cx .business-switch-option:hover {
    color: var(--cx-ink);
}

/* Tabs (settings, collections) and pill tabs (weekly report). */
.theme-cx .nav-tabs .nav-link {
    color: var(--cx-ink);
}

.theme-cx .ops-tabs .nav-link.active {
    background: var(--cx-ink);
    border-color: var(--cx-ink);
    color: #ffffff;
}

.theme-cx summary.text-primary {
    color: var(--cx-ink) !important;
}

.theme-cx .form-control:focus,
.theme-cx .form-select:focus {
    border-color: var(--cx-ink);
    box-shadow: 0 0 0 0.2rem rgba(40, 40, 55, 0.16);
}

.theme-cx .form-check-input:checked {
    background-color: var(--cx-ink);
    border-color: var(--cx-ink);
}

/* Toggle buttons (e.g. the payment reminder days): selected ones are #282837. */
.theme-cx .btn-check:checked + .btn,
.theme-cx .btn-check:checked + .btn:hover {
    background: var(--cx-ink);
    border-color: var(--cx-ink);
    color: #ffffff;
}