/*
  New-layout client branding template.

  Copy this file to custom/{store_id}.css and update the variables below.
  Add the client logo as custom/{store_id}.png. The portal already loads it
  automatically when present.

  Keep this file variable-led and scoped to the modern header/button surfaces.
  Avoid fixed header heights, old nav corner image overrides, and broad
  .full_col/.box_top layout changes.
*/

:root {
  /* Brand colours */
  --client-primary: #E76727;
  --client-primary-hover: #565859;
  --client-primary-active: #000000;
  --client-primary-soft: #bfc5c2;
  --client-accent: #E76727;
  --client-nav-bg: #565859;
  --client-nav-hover: #2e2526;
  --client-nav-current: #000000;
  --client-nav-divider: rgba(255, 255, 255, 0.28);
  --client-focus-ring: rgba(231, 103, 39, 0.45);
  --client-header-text: #ffffff;
  --client-nav-text: #ffffff;

  /* Portal theme variables consumed by current layout/buttons */
  --blue-1: var(--client-primary);
  --blue-2: var(--client-primary-hover);
  --blue-0: var(--client-primary-active);
  --blue-4: var(--client-primary-soft);
  --green-1: #51bf9a;
  --green-2: #49AE8C;
}

/* Modern portal masthead only. Keep this scoped so panel headers, including
   Noticeboard, keep their standard neutral styling. */
body > .header,
.header_tile,
.header_tile_logged_out,
.header_tile_top,
.second_nav.header_tile {
  background: var(--client-primary) !important;
  color: var(--client-header-text);
}

body > .header,
.header-content {
  height: 154px;
}

.menu_item {
  background: var(--client-primary);
  color: var(--client-header-text);
}

/* Client logo loaded from custom/{store_id}.png by header-new.php/header_logged_out-new.php */
.header .logo,
.header.logged-out .logo {
  display: block;
  width: auto;
  max-width: min(320px, calc(100vw - 32px));
  margin-top: 15px;
  margin-bottom: 0;
  overflow: visible;
}

.header .logo img,
.header.logged-out .logo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
}

.header.logged-out .logo {
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

/* Desktop navigation */
.top_nav,
.top_nav.custom,
.nav,
.nav.custom {
  background: var(--client-nav-bg) !important;
  background-image: none !important;
}

.nav {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  float: none !important;
  margin-top: 0 !important;
}

.top_nav .divider,
.nav .divider {
  background: var(--client-nav-divider) !important;
  background-image: none !important;
  height: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Legacy corner blocks can still render behind the last nav item in some layouts */
.top_nav .right_corner,
.nav .right_corner {
  display: none !important;
  background: var(--client-nav-bg) !important;
  background-image: none !important;
}

.nav .nav_right.current + .right_corner,
.top_nav .nav_topright.current + .right_corner {
  background: var(--client-nav-current) !important;
  background-image: none !important;
}

.top_nav a,
.nav a,
.dropdown a {
  color: var(--client-nav-text) !important;
}

.top_nav a,
.nav a {
  height: 100% !important;
  box-sizing: border-box;
}

.top_nav a:hover,
.nav a:hover,
.header .dropdown a:hover,
.header .dropdown .current {
  background: var(--client-nav-hover) !important;
  color: var(--client-nav-text) !important;
}

.top_nav .current,
.nav .current {
  background: var(--client-nav-current) !important;
  color: var(--client-nav-text) !important;
}

/* Keep the last nav item wide enough to fully cover the right edge */
.nav a.nav_right.cufon,
.nav a.nav_right.cufon:hover,
.nav a.nav_right.cufon.current,
.nav a.nav_right.cufon:active,
.nav a.nav_right.cufon:focus {
  width: 221px !important;
  box-sizing: border-box;
}

/* Match Home-tab edge handling: rounded corner comes from the tab itself */
.nav .nav_right,
.nav .nav_right:hover,
.nav .nav_right.current,
.nav .nav_right:active,
.nav .nav_right:focus {
  border-radius: 0 15px 0 0 !important;
}

.top_nav a:active,
.nav a:active,
.header .dropdown a:active {
  background: var(--client-nav-current) !important;
  color: var(--client-nav-text) !important;
}

.header .dropdown {
  background: var(--client-primary) !important;
  top: 154px !important;
  z-index: 1000 !important;
}

.header .dropdown .divider {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 0 !important;
}

#popup_menu a:active .menu_item,
.menu_item:active {
  background: var(--client-primary-active) !important;
  color: var(--client-header-text) !important;
}

/* Modern buttons and dashboard action tiles */
.button.b-pri,
.b-pri,
.form-button-dark,
.home_buttons a.home-action-btn {
  background: var(--client-primary);
  border-color: var(--client-primary) !important;
  color: #ffffff !important;
}

.button.b-pri:hover,
.b-pri:hover,
.form-button-dark:hover,
.home_buttons a.home-action-btn:hover {
  background: var(--client-primary-hover);
  border-color: var(--client-primary-hover) !important;
  color: #ffffff !important;
}

.button.b-pri:active,
.b-pri:active,
.form-button-dark:active,
.home_buttons a.home-action-btn:active,
.home_buttons a.home-action-btn:focus {
  background: var(--client-primary-active);
  border-color: var(--client-primary-active) !important;
  color: #ffffff !important;
}

.button.b-sec,
.b-sec,
.form-button-light {
  color: var(--client-primary) !important;
}

.button.b-sec:hover,
.b-sec:hover,
.form-button-light:hover {
  background: var(--client-primary-soft);
  border-color: var(--client-primary) !important;
  color: var(--client-primary) !important;
}

.button.b-sec:active,
.b-sec:active,
.form-button-light:active {
  background: var(--client-primary-active);
  border-color: var(--client-primary-active) !important;
  color: #ffffff !important;
}

.button.b-pri:focus,
.b-pri:focus,
.button.b-sec:focus,
.b-sec:focus,
.form-button-dark:focus,
.form-button-light:focus {
  box-shadow: 0 0 0 3px var(--client-focus-ring) !important;
}


/* Force GO action buttons to primary green regardless of surrounding theme rules */
.button.b-go,
.b-go,
.form-button-success {
  background: var(--green-1) !important;
  border-color: var(--green-1) !important;
  color: #ffffff !important;
}

.button.b-go:hover,
.b-go:hover,
.form-button-success:hover {
  background: var(--green-2) !important;
  border-color: var(--green-2) !important;
  color: #ffffff !important;
}

.button.b-go:active,
.button.b-go:focus,
.b-go:active,
.b-go:focus,
.form-button-success:active,
.form-button-success:focus {
  background: var(--green-2) !important;
  border-color: var(--green-2) !important;
  color: #ffffff !important;
}
/* Availability choice tiles: override hardcoded blue hover/active states from core CSS */
@media (hover: hover) and (pointer: fine) {
  .availability-choice-btn:hover {
    background: var(--client-primary-hover) !important;
    border-color: var(--client-primary-hover) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22) !important;
    color: #ffffff !important;
  }
}

.availability-choice-btn:active,
.availability-choice-btn:focus {
  background: var(--client-primary-active) !important;
  border-color: var(--client-primary-active) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16) !important;
  color: #ffffff !important;
}

/* Component buttons used by newer controls */
.genericComponent.button.primary .inner,
.genericComponent.circleButton.primary .inner {
  background-color: var(--client-primary) !important;
  border-color: var(--client-primary) !important;
  color: #ffffff !important;
}

.genericComponent.button.primary:hover .inner,
.genericComponent.circleButton.primary:hover .inner {
  background-color: var(--client-primary-hover) !important;
  border-color: var(--client-primary-hover) !important;
}

.genericComponent.button.primary:active .inner,
.genericComponent.circleButton.primary:active .inner,
.genericComponent.button.primary:focus .inner,
.genericComponent.circleButton.primary:focus .inner,
.genericComponent.button.primary.open .inner,
.genericComponent.circleButton.primary.open .inner {
  background-color: var(--client-primary-active) !important;
  border-color: var(--client-primary-active) !important;
}

.genericComponent.circleButton.primary .inner .icon,
.genericComponent.circleButton.primary:focus .inner .icon,
.genericComponent.circleButton.primary.open .inner .icon {
  color: #ffffff !important;
}

.genericComponent.button.primary .ripple,
.genericComponent.circleButton.primary .ripple {
  background: var(--client-primary-active) !important;
}

.genericComponent.button.secondary .inner,
.genericComponent.circleButton.secondary .inner {
  color: var(--client-primary) !important;
}

.genericComponent.button.secondary:hover .inner,
.genericComponent.circleButton.secondary:hover .inner {
  background-color: var(--client-primary-soft) !important;
  border-color: var(--client-primary) !important;
  color: var(--client-primary) !important;
}

.genericComponent.button.attachment .inner {
  color: var(--client-primary) !important;
}

.genericComponent.button.attachment:hover .inner {
  border-color: var(--client-primary) !important;
  color: var(--client-primary) !important;
}

#select-img {
  width: 150px !important;
  max-width: 150px !important;
}

#select-img .inner {
  background-color: var(--client-primary) !important;
  border-color: var(--client-primary) !important;
  color: #ffffff !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

#select-img .label {
  color: #ffffff !important;
  font-size: 12pt !important;
  line-height: 20pt !important;
}

#select-img:hover .inner {
  background-color: var(--client-primary-hover) !important;
  border-color: var(--client-primary-hover) !important;
}

#select-img:active .inner,
#select-img:focus .inner {
  background-color: var(--client-primary-active) !important;
  border-color: var(--client-primary-active) !important;
}

/* File upload component: keep base sizing/behaviour, only tint the standard attachment colours */
.attachment .attachment-label {
  border-color: var(--client-primary) !important;
}

.attachment .attachment-label,
.attachment .attachment-label p,
.attachment .attachment-label .icon,
.attachment .attachment-label div,
.attachment .attachment-label div p {
  color: var(--client-primary) !important;
}

.attachment .attachment-label:hover,
.attachment .attachment-label:hover p.empty {
  color: var(--client-primary-hover) !important;
  border-color: var(--client-primary-hover) !important;
}

.download-attachment,
.docs-and-forms-list-item,
.request_header .right_button a,
.filename_div a {
  color: var(--client-primary) !important;
}

.docs-and-forms-list-item:hover {
  border-color: var(--client-primary) !important;
  color: var(--client-primary-active) !important;
}

/* Pagination and tabular list controls */
.pagination,
.pagenum.selected,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background-color: var(--client-primary) !important;
  border-color: var(--client-primary) !important;
  color: #ffffff !important;
}

.pagination:hover,
.pagenum:hover,
.dataTables_paginate .paginate_button:hover {
  background-color: var(--client-primary-hover) !important;
  border-color: var(--client-primary-hover) !important;
  color: #ffffff !important;
}

.pagenum,
.dataTables_paginate .paginate_button {
  color: var(--client-primary) !important;
}

/* Previous Activity page paging: keep numbers readable and keep Next on the right */
#recent_activity_table ~ .paging {
  background: none !important;
  border: 0 !important;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 14px;
}

#recent_activity_table ~ .paging .genericComponent:first-of-type {
  justify-self: start;
}

#recent_activity_table ~ .paging .genericComponent:last-of-type {
  justify-self: end;
  margin-left: 12px;
}

#recent_activity_table ~ .paging .paging_middle {
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  line-height: normal;
}

#recent_activity_table ~ .paging .paging_middle > div {
  display: inline-flex;
  align-items: center;
}

#recent_activity_table ~ .paging .paging_middle a,
#recent_activity_table ~ .paging .paging_middle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  font-weight: 700;
}

#recent_activity_table ~ .paging .paging_middle a {
  color: var(--client-primary) !important;
  background: #ffffff !important;
  border: 1px solid var(--client-primary-soft) !important;
}

#recent_activity_table ~ .paging .paging_middle span {
  color: #ffffff !important;
  background: var(--client-primary) !important;
  border: 1px solid var(--client-primary) !important;
}

#recent_activity_table ~ .paging .paging_middle .divider {
  color: #7a7a7a !important;
  padding: 0 5px;
}

/* Date picker */
.dpDayTD,
.dpButton:hover,
.dpTDHover,
.dpDayHighlightTD {
  background-color: var(--client-primary) !important;
  border-color: var(--client-primary) !important;
  color: #ffffff !important;
}

.dpTitleText,
.dpDayHighlight {
  color: var(--client-primary) !important;
}

.dpButton {
  background-color: var(--client-primary-soft) !important;
  border-color: var(--client-primary) !important;
  color: var(--client-primary) !important;
}

/* Availability/shift-planner legacy header cells */
#top_hours td,
.left_td {
  background: var(--client-primary-soft) !important;
  border-top-color: var(--client-primary-soft) !important;
  border-bottom-color: var(--client-primary) !important;
}

@media only screen and (max-width: 960px) {
  /* Release fixed header height on small screens (hamburger nav) */
  body > .header,
  .header-content {
    height: auto !important;
    padding-bottom: 10px;
  }

  .header .logo,
  .header.logged-out .logo {
    float: none !important;
    display: block;
    width: fit-content;
    max-width: min(260px, calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
  }

  .header .logo img,
  .header.logged-out .logo img {
    max-height: 72px;
    margin-left: auto;
    margin-right: auto;
  }
}