/* ============================================================================
   Finwise overrides of the Color Admin theme.

   PURPOSE
   Anything in here changes a rule that ships inside css/default/app.min.css or
   css/vendor.min.css. Those two files are VENDOR files - they get overwritten
   wholesale every time the theme is upgraded, so edits made directly to them
   are silently lost. Put such changes here instead.

   This file must be linked AFTER app.min.css in both _Layout.cshtml (login)
   and _AuthLayout.cshtml (main app), otherwise it will not win the cascade.

   HISTORY
   Created during the Color Admin 5.0.0 -> 5.5.2 upgrade (FW-3854). The pace
   block below was originally hand-edited into app.min.css by commit 42e564a77
   ("Fix login screen pace activity", 2023-07-31) and was lost when the vendor
   file was replaced - which is what prompted this file to exist.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   Pace loading indicator position.
   Theme defaults assume a fixed header, so the progress bar and spinner sit
   50px/63px down the page. Finwise pins them to the top of the viewport so
   they render correctly on the login screen, which has no header.
   Restores commit 42e564a77.
   --------------------------------------------------------------------------- */
.pace .pace-progress {
    top: 0px;
}

.pace .pace-activity {
    top: 10px;
}

.boxed-layout .pace .pace-activity {
    top: 0px;
}


/* ---------------------------------------------------------------------------
   .note-* colour variants.
   Color Admin 5.5.2 dropped these - the theme now expects "note alert-primary"
   and drives colours off Bootstrap's --bs-alert-* variables.

   Only .note-primary is restored here. Finwise's own Content/CSS/CustomFW.css
   already defines .note.note-success/.note-info/.note-warning/.note-danger with
   !important and two-class specificity, so those win regardless of load order,
   and every view that uses a note-* variant also carries the base .note class.
   --------------------------------------------------------------------------- */
.note-primary {
    background: #61a8e8;
    color: #10416d;
}

/* CustomFW.css sets background-color and border-color for these three with
   !important, but not color, so without the rules below their text falls back
   to the body colour (#2d353c) instead of the tinted text 5.0.0 gave them.
   .note-success is not listed because CustomFW.css does set its colour. */
.note-info {
    color: #195a6d;
}

.note-warning {
    color: #714505;
}

.note-danger {
    color: #bd0500;
}


/* ---------------------------------------------------------------------------
   Alert colours.
   5.0.0 styled alerts with two-class rules carrying all three colours, e.g.
       .alert.alert-danger { color:#662423; background-color:#ffd6d5; border-color:#ff5b57 }
   5.5.2 removed every one of them and drives alerts off --bs-alert-* instead,
   where -border-subtle resolves to the same value as -bg-subtle - so alerts lost
   their outline and shifted tint. Finwise uses ~238 alerts, 83 warning and 60
   danger among them, to carry compliance warnings, so the v5.0.0 rules are
   restored verbatim at their original specificity.
   --------------------------------------------------------------------------- */
.alert.alert-primary {
    color: #15395a;
    background-color: #cce3f8;
    border-color: #348fe2;
}

.alert.alert-secondary {
    color: #2b2f32;
    background-color: #dadddf;
    border-color: #6c757d;
}

.alert.alert-success {
    color: #004545;
    background-color: #bfeaea;
    border-color: #00acac;
}

.alert.alert-info {
    color: #1d4956;
    background-color: #d2edf5;
    border-color: #49b6d6;
}

.alert.alert-warning {
    color: #623e0a;
    background-color: #fde6c6;
    border-color: #f59c1a;
}

.alert.alert-danger {
    color: #662423;
    background-color: #ffd6d5;
    border-color: #ff5b57;
}

.alert.alert-dark {
    color: #121518;
    background-color: #cbcdce;
    border-color: #2d353c;
}


/* ---------------------------------------------------------------------------
   Read-only inputs.
   5.0.0 styled them with the disabled grey:
       .form-control:disabled, .form-control[readonly] { background-color:#e9ecef }
   Bootstrap 5.3 dropped [readonly] from that selector, so read-only fields render
   like editable ones. Finwise uses read-only to signal "you may not change this"
   (e.g. Mandate Initiation: First Collection Date, Client ID Number, Debtor Name),
   so the affordance matters, not just the colour. var() keeps it in step with the
   theme's disabled colour, which resolves to the same #e9ecef in light mode.
   --------------------------------------------------------------------------- */
.form-control[readonly] {
    background-color: var(--bs-component-disabled-bg);
    opacity: 1;
}
/* ---------------------------------------------------------------------------
   Colour parity with Color Admin 5.0.0.
   Generated from a resolved-value diff of 5.0.0 vs 5.5.2 app.min.css, limited
   to selectors whose classes Finwise actually renders. FW-3854 is a maintenance
   upgrade with no intended visual change, so each rule below restores the value
   the component had before. Ordered by how widely the component is used.
   --------------------------------------------------------------------------- */
/* 1571 uses */
.app-header .navbar-nav .navbar-item.show>a,
.app-header .navbar-nav .navbar-item.show>a:focus,
.app-header .navbar-nav .navbar-item.show>a:hover,
.btn:hover,
.dropdown-menu,
.dropdown-menu.media-list .dropdown-header,
.dropdown-menu.media-list .media .media-heading,
.form-control-plaintext,
.nav.nav-tabs.nav-tabs-inverse .nav-item .nav-link.active {
    color: #2d353c;
}

/* 540 uses */
.card-footer,
.card-header {
    background-color: #e1e4e8;
}

/* 322 uses */
.dropdown-header,
.dropdown-menu.media-list .media p,
.form-text,
.list-group-item.disabled,
.list-group-item:disabled,
.nav-link {
    color: #6c757d;
}

/* 197 uses */
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: #5db0ff;
}

/* 197 uses */
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: #c4c9cf;
}

/* 99 uses */
.text-muted {
    color: #627884!important;
}

/* 71 uses */
.table {
    border-color: #dee2e6;
}

/* 37 uses */
.accordion-button:not(.collapsed) {
    color: #009b9b;
}

/* 32 uses */
.h4 .small,
.h4 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small {
    color: #6f8293;
}

/* 25 uses */
.progress {
    background-color: #d2d8dd;
}

/* 19 uses */
.dropdown-item,
.list-group-item-action {
    color: #495057;
}

/* 12 uses */
.text-primary {
    color: #00acac!important;
}

/* 10 uses */
.bg-primary {
    background-color: #00acac!important;
}

/* 6 uses */
.page-link {
    color: #627281;
}

/* 6 uses */
.btn-link:hover,
.page-link:focus {
    color: #2a72b5;
}

/* 6 uses */
.page-link:hover {
    background-color: #e9ecef;
}

/* 4 uses */
.border-primary {
    border-color: #00acac!important;
}

/* 4 uses */
.table-dark {
    border-color: #424950;
}

/* 4 uses */
.table-dark {
    color: #fff;
}

/* 3 uses */
.dropdown-item:focus,
.dropdown-item:hover {
    color: #1d2126;
}

/* 2 uses */
.table-light {
    border-color: #dadbdc;
}

/* 2 uses */
.table-light {
    color: #000;
}

/* 1 uses */
.bg-muted {
    background-color: #627884!important;
}

/* 1 uses */
.link-success {
    color: #00acac;
}

/* 1 uses */
.link-success:focus,
.link-success:hover {
    color: #33bdbd;
}



/* ---------------------------------------------------------------------------
   nav-pills link colour (the consumer / Distribution tab headings).
   5.0.0 shipped:
       .nav.nav-pills .nav-item .nav-link { font-weight:600; color:#6f8293 }
       .nav.nav-pills .nav-item .nav-link:focus,:hover { color:#2d353c }
   5.5.2 removed both. Those tab headings sit inside the jQuery UI wrapper on
   Views/General/Index.cshtml (.ui-tabs.ui-widget.ui-widget-content), so with the
   (0,0,3,0) rule gone they fall through to vendor.min.css's
   .ui-widget-content a { color:#333 } and render black instead of blue-grey.
   Colour only - the padding is deliberately NOT restored, because CustomFW.css
   sets its own 7px padding and this file loads after it.
   --------------------------------------------------------------------------- */
.nav.nav-pills .nav-item .nav-link {
    font-weight: 600;
    color: #6f8293;
}

.nav.nav-pills .nav-item .nav-link:focus,
.nav.nav-pills .nav-item .nav-link:hover {
    color: #2d353c;
}

/* Must stay below the rule above: that one is (0,0,3,0) and would otherwise win
   over 5.5.2's .nav-pills .nav-link.active (0,0,2,0), leaving the selected tab
   grey on blue. 5.0.0 carried this same (0,0,4,0) rule for that reason. */
.nav.nav-pills .nav-item .nav-link.active {
    color: #fff;
}