/* ========================================
   RUMBALARA CUSTOM CSS - OPTIMISED VERSION
   ======================================== */

/* Define colour palette as variables for easier maintenance */
:root {
  --primary-orange: #ee4720;
  --button-orange: #f05123;
  --button-orange-hover: #f56a42;
  --secondary-orange: #d0712a;
  --secondary-orange-hover: #e07f38;
  --dark-grey: #302f30;
  --medium-grey: #4a474a;
  --light-background: #fceddd;
  --drawer-red: #a62c21;
}

/* ========================================
   LOGO & HEADER
   ======================================== */
.clientLogo {
  display: block;
  box-sizing: border-box;
  background: url(https://rum.chris21.com/RUM_MER21p/Content/Images/rumba-logo.png) no-repeat left center !important;
  width: 165px;
  height: 109px;
  padding-left: 165px;
  background-size: contain;
}

/* Header sizing for logo */
#mySnapContent > header,
#mySnapContent > header > table,
#mySnapContent > header > table > tbody > tr,
#mySnapContent > header > table > tbody > tr > td:nth-child(2),
#mySnapContent > header > table > tbody > tr > td:nth-child(2) > a {
  min-height: 140px !important;
  height: 140px !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

.ftrBrand {
  max-height: none !important;
  height: auto !important;
  min-height: 109px !important;
}

/* ========================================
   BACKGROUNDS
   ======================================== */
.clientBackground {
  background-image: url('images/intro-swoosh.jpg');
}

.clientBackgroundInternal {
  background-image:
    url('images/intro-alone.jpg'),
    linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.15));
  background-color: antiquewhite;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: normal;
}

/* ========================================
   ICONS - CONSOLIDATED
   ======================================== */
/* Burger nav icon - using original specific styling */
.er21MobileIconFeature {
  background: transparent !important;
  color: #302f30 !important;
}

.er21MobileIconFeature i,
.er21MobileIconFeature .material-icons,
.er21MobileIconFeature .icon,
.er21MobileIconFeature svg,
.er21MobileIconFeature svg * {
  fill: #302f30 !important;
  stroke: #302f30 !important;
  color: #302f30 !important;
}

/* Burger hover/focus state */
.er21MobileIconFeature:hover,
.er21MobileIconFeature:focus {
  color: #4a474a !important;
}

.er21MobileIconFeature:hover svg *,
.er21MobileIconFeature:focus svg * {
  fill: #4a474a !important;
  stroke: #4a474a !important;
}

/* Magnifying glass icon - specific targeting */
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(1) > button {
  background: transparent !important;
  color: #302f30 !important;
}

#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(1) > button svg,
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(1) > button svg * {
  fill: #302f30 !important;
  stroke: #302f30 !important;
}

/* Magnifying glass hover/focus */
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(1) > button:hover,
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(1) > button:focus {
  color: #4a474a !important;
}

#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(1) > button:hover svg *,
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(1) > button:focus svg * {
  fill: #4a474a !important;
  stroke: #4a474a !important;
}

/* Paperclip icon */
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(2) > button svg,
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(2) > button svg * {
  fill: #302f30 !important;
  color: #302f30 !important;
}

/* Paperclip hover */
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(2) > button:hover svg,
#mySnapContent > header > table > tbody > tr > td:nth-child(3) > div:nth-child(2) > button:hover svg * {
  fill: #4a474a !important;
  color: #4a474a !important;
}

/* Other application icons */
svg.clientIconApplication path,
#Layer_1 > path,
#Capa_1 > g:nth-child(1) > g > path,
#mySnapContent > content-widget > ng-include > div > center > span > svg path,
#mySnapContent > content-widget > ng-include > div > center > span > svg.d-none.d-sm-block.er21MobileIconFeatureLarge.clientIconApplication.ng-scope > path {
  fill: #302f30 !important;
  stroke: #302f30 !important;
}

/* Register button icon - specific fix */
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg,
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg > path,
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg > path:nth-child(1),
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg > path:nth-child(2) {
  fill: #302f30 !important;
  stroke: #302f30 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Specific override for the problematic second path */
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg > path:nth-child(2) {
  fill: #302f30 !important;
  stroke: #302f30 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove any white fill that might be inline */
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg > path[fill="white"],
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg > path[fill="#fff"],
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg > path[fill="#ffffff"] {
  fill: #302f30 !important;
}

/* SVG container styling to remove white box */
svg.clientIconApplication,
#mySnapContent > content-widget > ng-include > div > center > span > svg,
#mySnapContent > content-widget > ng-include > div > center > span > svg.d-none.d-sm-block.er21MobileIconFeatureLarge.clientIconApplication.ng-scope,
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button {
  background: transparent !important;
  background-color: transparent !important;
}

/* Other icon hover states */
svg.clientIconApplication:hover path,
#mySnapContent > content-widget > ng-include > div > center > span > svg:hover path,
#mySnapContent > content-widget > ng-include > div > center > span > svg.d-none.d-sm-block.er21MobileIconFeatureLarge.clientIconApplication.ng-scope:hover > path,
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button:hover > svg > path {
  fill: #4a474a !important;
  stroke: #4a474a !important;
}

/* ========================================
   BUTTONS - CONSOLIDATED
   ======================================== */
/* Primary Apply/Next/Review buttons */
.recommendedButton,
button[ng-click*="apply"],
button[ng-click*="next"],
button[ng-click*="review"],
#mySnapContent > footer button.recommendedButton,
#ftrRightSnap button[type="submit"],
#ngdialog1 button:nth-child(1),
#ngdialog2 button:nth-child(1),
#ngdialog4 button:nth-child(1) {
  background-color: var(--button-orange) !important;
  border-color: var(--button-orange) !important;
  color: white !important;
  font-weight: bold !important;
}

/* Primary button hover */
.recommendedButton:hover,
button[ng-click*="apply"]:hover,
button[ng-click*="next"]:hover,
button[ng-click*="review"]:hover,
#mySnapContent > footer button.recommendedButton:hover,
#ftrRightSnap button[type="submit"]:hover,
#ngdialog1 button:nth-child(1):hover,
#ngdialog2 button:nth-child(1):hover,
#ngdialog4 button:nth-child(1):hover {
  background-color: var(--button-orange-hover) !important;
  border-color: var(--button-orange-hover) !important;
}

/* Secondary Back/Clear buttons */
.secondaryButton,
button[ng-click*="back"],
button[ng-click*="clear"],
#mySnapContent > footer button.secondaryButton,
#ngdialog1 button:nth-child(2),
#ngdialog2 button:nth-child(2),
#ngdialog4 button:nth-child(2) {
  background-color: var(--secondary-orange) !important;
  border-color: var(--secondary-orange) !important;
  color: white !important;
  font-weight: bold !important;
}

/* Secondary button hover */
.secondaryButton:hover,
button[ng-click*="back"]:hover,
button[ng-click*="clear"]:hover,
#mySnapContent > footer button.secondaryButton:hover,
#ngdialog1 button:nth-child(2):hover,
#ngdialog2 button:nth-child(2):hover,
#ngdialog4 button:nth-child(2):hover {
  background-color: var(--secondary-orange-hover) !important;
  border-color: var(--secondary-orange-hover) !important;
}

/* ========================================
   NAVIGATION DRAWERS
   ======================================== */
.snap-drawer-left,
.snap-drawer-right {
  background-color: var(--drawer-red) !important;
}

.snap-drawers {
  background-color: transparent !important;
}

#ftrLeftSnap table a {
  color: white !important;
  text-decoration: none !important;
}

#ftrLeftSnap table a:hover {
  color: var(--button-orange-hover) !important;
}

/* ========================================
   FORMS & LABELS - SIMPLIFIED
   ======================================== */
#mySnapContent label,
#mySnapContent legend,
.clientDialog label {
  color: var(--dark-grey) !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* Text input fields */
#mySnapContent input[type="text"],
#mySnapContent input[type="email"],
#mySnapContent input[type="password"],
#mySnapContent input[type="tel"],
#mySnapContent input[type="number"],
#mySnapContent input[type="date"],
#mySnapContent input[type="time"],
#mySnapContent input[type="url"],
#mySnapContent input[type="search"],
#mySnapContent textarea,
#mySnapContent select {
  color: var(--dark-grey) !important;
  border: 1px solid #ced4da !important; /* Same border as dropdowns */
  border-radius: 4px !important;
}

/* Input placeholder text */
#mySnapContent input::placeholder,
#mySnapContent textarea::placeholder {
  color: #999 !important; /* Lighter grey for placeholders */
}

/* Required field asterisks */
#mySnapContent .required,
#mySnapContent .required-star,
#mySnapContent .asterisk,
#mySnapContent [class*="required"] {
  color: var(--button-orange) !important;
}

/* ========================================
   GRIDS & TABLES
   ======================================== */
.ui-grid-header-cell,
.ui-grid-header-cell-primary-focus,
.ui-grid-header-cell:hover {
  background-color: var(--primary-orange) !important;
  color: white !important;
}

.clientVacancyListRow {
  background-color: #ff00d2;
}

/* Grid links */
[id$="uiGrid-001B-cell"] ul li a,
[id*="uiGrid"] ul li a {
  color: var(--dark-grey) !important;
  background-color: var(--light-background) !important;
  text-decoration: none !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

[id$="uiGrid-001B-cell"] ul li a:hover,
[id*="uiGrid"] ul li a:hover {
  color: white !important;
  background-color: var(--button-orange-hover) !important;
}

/* ========================================
   DROPDOWNS
   ======================================== */
/* Remove borders only from wrapper divs, not the functional elements */
#mySnapContent question-drop-down > div > fieldset > div {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Style the actual dropdown selector with 1px border */
#mySnapContent question-drop-down .ui-select-match,
#mySnapContent question-drop-down fieldset > div > div > span,
#mySnapContent > content-widget > ng-include > div > screening-questions > div > question-drop-down > div > fieldset > div > div > span {
  background-color: white !important;
  border: 1px solid #ced4da !important; /* Light grey border */
  color: var(--dark-grey) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure dropdown arrow is visible */
#mySnapContent .ui-select-toggle,
#mySnapContent .ui-select-match .caret,
#mySnapContent .ui-select-match .btn-default {
  display: inline-block !important;
  visibility: visible !important;
}

/* Style the dropdown arrow/caret */
#mySnapContent .ui-select-match .caret {
  border-top-color: var(--dark-grey) !important;
}

/* Dropdown text should be dark grey */
#mySnapContent question-drop-down span.ui-select-match-text,
#mySnapContent .ui-select-match span.ui-select-match-text,
#mySnapContent .ui-select-placeholder {
  color: var(--dark-grey) !important;
}

/* Dropdown options */
[id^="ui-select-choices-row-"] > a {
  background-color: var(--light-background) !important;
  color: var(--dark-grey) !important;
}

[id^="ui-select-choices-row-"] > a:hover,
[id^="ui-select-choices-row-"] > a:focus,
[id^="ui-select-choices-row-"] > a.active {
  background-color: var(--button-orange-hover) !important;
  color: white !important;
}

/* ========================================
   DATE PICKERS
   ======================================== */
/* Date picker buttons - more specific targeting */
#mySnapContent button.ui-datepicker-trigger,
#mySnapContent button[aria-label*="calendar"],
#mySnapContent button[ng-click*="date"],
#mySnapContent button[ng-click*="calendar"],
#mySnapContent question-date fieldset > div > button,
#mySnapContent question-date-picker fieldset > div > button,
#mySnapContent > content-widget question-date fieldset > div > button,
#mySnapContent > content-widget question-date-picker fieldset > div > button {
  background-color: var(--button-orange-hover) !important;
  border-color: var(--button-orange-hover) !important;
  background-image: none !important;
  color: white !important;
}

/* Date picker button hover */
#mySnapContent button.ui-datepicker-trigger:hover,
#mySnapContent button[aria-label*="calendar"]:hover,
#mySnapContent button[ng-click*="date"]:hover,
#mySnapContent button[ng-click*="calendar"]:hover,
#mySnapContent question-date fieldset > div > button:hover,
#mySnapContent question-date-picker fieldset > div > button:hover,
#mySnapContent > content-widget question-date fieldset > div > button:hover,
#mySnapContent > content-widget question-date-picker fieldset > div > button:hover {
  background-color: #ff7a60 !important;
  border-color: #ff7a60 !important;
}

/* Date picker icons - ensure they stay white */
#mySnapContent button.ui-datepicker-trigger i,
#mySnapContent button.ui-datepicker-trigger i::before,
#mySnapContent button.ui-datepicker-trigger svg,
#mySnapContent button.ui-datepicker-trigger svg *,
#mySnapContent button[aria-label*="calendar"] i,
#mySnapContent button[aria-label*="calendar"] i::before,
#mySnapContent button[aria-label*="calendar"] svg,
#mySnapContent button[aria-label*="calendar"] svg *,
#mySnapContent button[ng-click*="date"] i,
#mySnapContent button[ng-click*="date"] i::before,
#mySnapContent button[ng-click*="date"] svg,
#mySnapContent button[ng-click*="date"] svg *,
#mySnapContent button[ng-click*="calendar"] i,
#mySnapContent button[ng-click*="calendar"] i::before,
#mySnapContent button[ng-click*="calendar"] svg,
#mySnapContent button[ng-click*="calendar"] svg *,
#mySnapContent question-date fieldset > div > button i,
#mySnapContent question-date fieldset > div > button i::before,
#mySnapContent question-date fieldset > div > button svg,
#mySnapContent question-date fieldset > div > button svg *,
#mySnapContent question-date-picker fieldset > div > button i,
#mySnapContent question-date-picker fieldset > div > button i::before,
#mySnapContent question-date-picker fieldset > div > button svg,
#mySnapContent question-date-picker fieldset > div > button svg *,
#mySnapContent > content-widget question-date fieldset > div > button i,
#mySnapContent > content-widget question-date fieldset > div > button i::before,
#mySnapContent > content-widget question-date fieldset > div > button svg,
#mySnapContent > content-widget question-date fieldset > div > button svg *,
#mySnapContent > content-widget question-date-picker fieldset > div > button i,
#mySnapContent > content-widget question-date-picker fieldset > div > button i::before,
#mySnapContent > content-widget question-date-picker fieldset > div > button svg,
#mySnapContent > content-widget question-date-picker fieldset > div > button svg * {
  fill: white !important;
  stroke: white !important;
  color: white !important;
}

/* ========================================
   FOOTER
   ======================================== */
.clientFooter {
  background-color: var(--primary-orange);
}

#mySnapContent > footer > div.clientFooter {
  background-color: var(--light-background) !important;
}

/* ========================================
   MISCELLANEOUS
   ======================================== */
/* Headings */
.ftrHeadeing {
  color: var(--primary-orange) !important;
  font-weight: bold !important;
}

.ftrHeadeing:hover {
  color: var(--medium-grey) !important;
}

/* Loading bar */
#loading-bar .bar {
  background: var(--button-orange-hover) !important;
}

#loading-bar .peg {
  box-shadow: 0 0 10px var(--button-orange-hover), 0 0 5px var(--button-orange-hover) !important;
}

#loading-bar-spinner .spinner-icon {
  border-top-color: var(--button-orange-hover) !important;
  border-left-color: var(--button-orange-hover) !important;
}

/* Horizontal rules */
#mySnapContent .horizontalLineText,
#mySnapContent .horizontalLineText::before,
#mySnapContent .horizontalLineText::after {
  border-color: var(--dark-grey) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

#mySnapContent .horizontalLineText hr {
  border: 0 !important;
  height: 1px !important;
  background-color: var(--dark-grey) !important;
  margin: 8px 0 !important;
}

/* Content width */
#mySnapContent > content-widget > ng-include > div.swipe-div.ng-scope > table > tbody > tr > td > div {
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  box-sizing: border-box;
}

/* Bold text in various areas */
#mySnapContent > content-widget > ng-include > div > div > span,
#mySnapContent > content-widget > ng-include > div > div {
  color: var(--dark-grey) !important;
  font-weight: bold;
}

/* ========================================
   REGISTER BUTTON - SPECIFIC OVERRIDE (Must be at end for specificity)
   ======================================== */
/* Hide the entire SVG icon */
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button > svg {
  display: none !important;
}

/* Style like Apply button */
#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button {
  background-color: #f05123 !important;
  border-color: #f05123 !important;
  color: white !important;
  font-weight: bold !important;
}

#mySnapContent > content-widget > ng-include > div:nth-child(2) > form > div:nth-child(7) > button:hover {
  background-color: #f56a42 !important;
  border-color: #f56a42 !important;
}