/*
 * Client design override.
 *
 * Client colors:
 *   accent:          #dc0041
 *   grey background: #f8f8f8
 *   text:            #000000
 *
 * IMPORTANT: only assets/styles/app.scss is compiled by Sass. This file is served
 * as plain CSS, so use block comments and CSS custom properties only - no
 * line comments (double slash), `$variables`, `@import` or Sass functions. A line
 * comment makes the browser drop the rule that follows it.
 *
 * Logo: put the client logo at clientfiles/images/logo.svg. The default rule in
 * app.scss only knows logo.png, so the `.logo` rule below points to the SVG.
 * It covers the login page and the right column of every page.
 *
 * Navigation icons (policy / file / claim / task): they are SVG files loaded as
 * images, so CSS cannot recolor them. Recolored copies live in
 * clientfiles/icons/*-colored.svg.
 *
 * Home page tiles: the sizes of the tiles, their icons and labels come from
 * app.scss only (assets/js/common/default.js no longer sets them on resize).
 */

:root {
  --client-accent: #dc0041;
  --client-accent-hover: #b00034; /* accent darkened ~20% for hover states */
  --client-accent-rgb: 220, 0, 65;
  --client-bg-grey: #f8f8f8;
  --client-bg-main: #ffffff;
  --client-text: #000000;

  --bs-body-color: var(--client-text);
  --bs-primary: var(--client-accent);
  --bs-primary-rgb: var(--client-accent-rgb);
}

/* Backgrounds */
body {
  background-color: var(--client-bg-grey);
  color: var(--client-text);
}

.bg-color {
  background-color: var(--client-bg-main);
}

.right-bg-color {
  background-color: var(--client-bg-grey);
}

/* Sticky header of the declaration page mirrors .bg-color */
body .declaration-page .header-inner {
  background: var(--client-bg-main);
}

/* Titles, labels and navigation text use the text color, content links the accent */
.txt-color {
  color: var(--client-text);
}

a {
  color: var(--client-accent);
}

a.txt-color,
a.dropdown-item {
  color: var(--client-text);
}

a:hover,
a:focus {
  color: var(--client-accent-hover);
}

a.txt-color:hover,
a.txt-color:focus,
a.dropdown-item:hover,
a.dropdown-item:focus,
.nav-link:hover,
.nav-link:focus {
  color: var(--client-accent);
}

/* Inline SVG icons and navigation font icons */
svg path {
  fill: var(--client-accent);
  stroke: var(--client-accent);
}

.nav-link > .bi,
.bi-person-circle {
  color: var(--client-accent);
}

a:hover > .bi-person-circle,
.nav-link:hover > .bi {
  color: var(--client-accent-hover);
}

/* Top navigation: do not push the contact name to the top of the bar */
.top-nav .m-b-auto {
  margin-bottom: 0;
}

/* Customer advisor card: keep the default width, change only the color */
.client-Advisor-border {
  border-color: var(--client-accent);
}

/* Buttons (app.scss forces its colors with !important) */
button.btn-primary,
a.btn-primary,
.custom-button {
  background-color: var(--client-accent) !important;
  border-color: var(--client-accent) !important;
  color: #ffffff !important;
}

button.btn-primary:hover,
a.btn-primary:hover,
.custom-button:hover {
  background-color: var(--client-accent-hover) !important;
  border-color: var(--client-accent-hover) !important;
  color: #ffffff !important;
}

/* Form controls: replace the Bootstrap blue focus ring and checked state */
.form-control:focus,
.form-select:focus {
  border-color: var(--client-accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--client-accent-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--client-accent);
  border-color: var(--client-accent);
}

.form-check-input:focus {
  border-color: var(--client-accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--client-accent-rgb), 0.25);
}

/* Client logo (SVG) - login page and right column of every page */
.logo {
  content: url("../images/logo-fc9793aaf692e506dc1eac9dc721d59a.svg");
}

/* Logo in the right column: scale it, and blend the (sticky) nav so a white image
   background disappears into the grey column. */
.right-bg-color .logo {
  width: 425px;
  max-width: 100%;
  height: auto;
}

.right-bg-color .top-nav {
  mix-blend-mode: multiply;
}

/* Home / folder tiles */
.bg-card,
.bg-sub-card {
  background-color: var(--client-accent);
}

.bg-card:hover,
.bg-sub-card:hover,
.card:hover .card-img-top.bg-card,
.card:hover .card-img-top.bg-sub-card {
  background-color: var(--client-accent-hover) !important;
}

/* Notification count on the documents tile */
.notification .badge {
  border: 1px solid #ffffff;
}

/* Quick-selection tiles: the icons are dark SVGs loaded as images, so CSS cannot recolor
   them directly. The accent background lives on the img itself, so move it to the card
   and turn the icon glyph white with a filter. */
.card:has(> .bg-sub-card) {
  background-color: var(--client-accent);
}

.card:has(> .bg-sub-card):hover {
  background-color: var(--client-accent-hover);
}

.bg-sub-card,
.bg-sub-card:hover,
.card:hover .card-img-top.bg-sub-card {
  background-color: transparent !important;
  filter: brightness(0) invert(1);
}

/* Quick selection: the grid is as wide as the main menu and uses its gutters, so the tiles
   are the same size; tile, icon area and label follow the main menu exactly. */
.icon-card-wrapper .row.g-custom > .col-9 {
  width: 100%;
}

.icon-card-wrapper .g-custom2 {
  --bs-gutter-x: inherit;
  --bs-gutter-y: inherit;
}

.icon-card-wrapper .bg-card,
.icon-card-wrapper .bg-sub-card {
  padding: calc(1vw + 1vh) calc(1.5vw + 1.5vh) calc(2vw + 2vh);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Label: same size and baseline as the main menu labels (.h5-menu-title in app.scss), full tile
   width so names wrap by word. --quick-icon-scale enlarges the quick-selection icons, which have
   a lot of empty canvas around the art; lower it if icons crowd the label. */
.icon-card-wrapper {
  --tile-title: calc((4vw + 4vh + 2vmin) / 6);
  --quick-icon-scale: 1.5;
}

@media only screen and (min-width: 3000px) {
  .icon-card-wrapper {
    --tile-title: 40px;
  }
}

.icon-card-wrapper .card:has(> .bg-sub-card) .card-title {
  top: auto;
  right: 0;
  bottom: calc(15% - 0.6 * var(--tile-title));
  left: 0;
  margin: 0;
  padding: 0 0.25rem;
  transform: none;
  text-align: center;
  font-size: var(--tile-title) !important;
}

.icon-card-wrapper .bg-sub-card {
  transform: scale(var(--quick-icon-scale));
  transform-origin: 50% calc(50% - 0.5 * (1vw + 1vh));
}

/* News list in the right column of the homepage */
.right-bg-color .row > ul {
  padding-top: 1rem;
  list-style: none;
}

.right-bg-color .row > ul li {
  font-size: 20px;
}

/* Policy detail page: hide the right column (claims and premium invoices). The column is
   found by the claims table it contains, so no other page is affected. */
.col-md-6:has(> #policy_claim_table) {
  display: none;
}