/*!
 * Styles used across the entire application, for Employers and Agencies alike.
 */
@import "variables";        // imports ./variables.less
@import "colors";           // imports ./colors.less
@import "bojo-bootstrap-3"; // imports ./bojo-bootstrap-3.less
@import "helper-classes";   // imports ./helper-classes.less
@import "forms";            // imports ./forms.less
@import "modals";           // imports ./modals.less
@import "typography";       // imports ./typography.less
@import "buttons";          // imports ./buttons.less
@import "agencies";         // imports ./agencies.less
@import "employers";        // imports ./employers.less
@import "admins";           // imports ./admins.less
@import "connect";          // imports ./connect.less
@import "split-network";    // imports ./split-network.less
@import "staffing";         // imports ./staffing.less


/* STANDARD HTML ELEMENTS
----------------------------------------------------------*/
html {
  position: relative;
  min-height: 100%;
  padding-bottom: 20px;
}
h1 {
  color: @header-color;
  font-family: @font-family;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.25em;
}
h2 {
  font-family: @font-family;
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  color: @header-color;
}
h3 {
  font-family: @font-family;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: @bounty-brown;
}
h4 {
  font-family: @font-family;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: @header-color;
}
h5 { color: @header-color; }
h6 {
  font-family: @font-family;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: @header-color;
}
body {
  color: @font-color;
  font-family: @font-family;
  font-size: @font-size;
  line-height: 18px;
  padding-top: 80px;
}
body.site-down {
  padding-top: 120px;
}
body.announcement {
  padding-top: 120px;
}
hr { margin:0 0 15px 0; }
pre {
  padding:0;
  color: #555;
  background-color: #fff;
  border:none;
  font-family: @font-georgia;
  font-size: 11px;
  line-height: 20px;
}


/* POSTINGS
----------------------------------------------------------*/
.posting-separator {
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: thin dashed #bbb;
}
ul.postings {

  margin-left: 0;
  padding: 0;

  li.posting {

    // override of Bootstrap 3 .panel, .panel-default, and .panel-heading classes, but ONLY for child nodes of "ul.postings"
    .panel {
      margin-bottom: 4px;
      border: 1px solid #e5e5e5;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .panel-default > .panel-heading {
      background-color: #fff;
    }
    .selected-posting {
      .panel-default > .panel-heading, .panel-body {
        background-color: #f4f4f4;
      }
    }

    .posting-title {
      font-size: 12px;
      line-height: 14px;
      font-weight: bold;
      display: inline-block;
    }

    .posting-location {
      font-family: @font-family;
      font-size: 11px;
      line-height: 14px;
    }

    .posting-tools {
      .notifications {
        font-family: @font-family;
        font-size:9px;
        line-height: 14px;
        padding-left: 10px;
      }

      a.manage {
        color: @link-color;
        font-family: @font-family;
        font-size: 11px;
        font-weight: @bounty-bold;
        text-transform: uppercase;
      }
      a.manage:hover, a.manage:active, a.manage:focus {
        color: @bounty-dark-orange;
      }
      a.manage-disabled {
        color: @disabled-link-color;
        font-family: @font-family;
        font-size: 11px;
        font-weight: @bounty-bold;
        text-transform: uppercase;
      }
      a.manage-disabled:hover, a.manage-disabled:active, a.manage-disabled:focus {
        color: @disabled-link-color;
      }
      a.selected {
        color: @bounty-dark-orange;
      }
    }
  }

  .selected-posting a {
    color: @bounty-dark-orange;
  }
  a.icons {
    color: @link-color;
    font-family: @font-family;
  }
  a.icons:hover, a.manage:active, a.manage:focus {
    color: @bounty-dark-orange;
  }
}

.bounty-type-marketplace {
  border-left: 3px solid #ffb600;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.bounty-type-private {
  border-left: 3px solid #711d45;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.bounty-type-closed {
  border-left: 3px solid #bbb;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.bounty-type-ats-hold {
  border-left: 3px solid @error-color;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.bounty-type-draft,
.bounty-type-ats-draft {
  border-left:3px solid #e17c00;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.bounty-type-retained {
  border-left:3px solid #9b1c52 ;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

.bounty-type-label {
  padding-top: 20px;
  color: #777;
  text-transform: uppercase;
}

.posting-draft-last-modified {
  font-style: italic;
  color: #777;
}
.postingSelected {
  border-style: solid;
  border-width: 0px 28px 0px 0px;
  -moz-border-image: url("../img/selector-arrow2.png") 0 28 0 0 stretch;
  -webkit-border-image: url("../img/selector-arrow2.png") 0 28 0 0 stretch;
  -o-border-image: url("../img/selector-arrow2.png") 0 28 0 0 stretch;
  border-image: url("../img/selector-arrow2.png") 0 28 0 0 stretch;
  background-color: #f4f4f4;
  padding:20px;
}
.postingSelected a {
  color: #9b1c52;
}
.postingNavTitles {
  font-family: @font-family;
  font-size: 14px;
  font-weight: bold;
}
.postingTitles {
  font-family: @font-family;
  font-size: 32px;
  line-height: 30px;
}

.bounty-stats {
  font-family: @font-family-condensed;
  font-size: 40px;
  font-weight: 300;
}


/* LISTS
----------------------------------------------------------*/
ul.plain {
  list-style: none;
}
ul.no-margin {
  margin: 0;
}
ul.candidate-list {
  margin-top:15px;
}
ul.candidate-list li.candidate-list-item {
  margin-bottom: 30px;
}
ul.unindent {
  padding-left: 15px;
}


/* DROPDOWN MENUS
----------------------------------------------------------*/

.img-polaroid-nav {
  margin: 0 0 0 10px;
  padding: 4px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.3);
}

.dropdown .caret-white {
  margin-left: 2px;
  margin-top: 8px;
}
.caret-white {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #FFFFFF;
  content: "";
  display: inline-block;
  height: 0;
  vertical-align: top;
  width: 0;
}
b.caret-white {
  margin-top: 4px;
}

.dropdown .caret-gray {
  margin-left: 2px;
  margin-top: 6px;
}

.dropdown .gray {
  color:#999;
}

.caret-gray {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #999;
  content: "";
  display: inline-block;
  height: 0;
  vertical-align: top;
  width: 0;
}
.sort-placement {
  margin: 10px 0 5px 0;
}

.dropdown-menu > li > .candidate-resume-unavailable {
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 1.42857143;
  white-space: nowrap;
  color: #6d7a83;
  font-weight: normal;
}


/* HEADER NAVIGATION (ENTERPRISE)
----------------------------------------------------------*/
.site-down-warnings {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin-bottom: 0;
  text-align: center;
  font-weight: @bounty-bold;
  font-family: @font-family;
  font-size: 14px;
  color: @bounty-white;
  background-color: @error-color;
  line-height: 40px;
  z-index:1030;
}

.site-down-warnings a {
  color: @bounty-white;
}

.site-down-warnings a:hover {
  color: @bounty-white;
  text-decoration: underline;
}

.announcements {
  padding: 15px;
}
.announcement-text {
  font-family: @font-family;
  font-size: 14px;
}


/* PROFILES
----------------------------------------------------------*/
.profile-image(@size) {
  width: @size;
  height: @size;
  max-height: @size;
  max-width: @size;
  -ms-interpolation-mode: bicubic;
  image-rendering: optimizeQuality;
  overflow: hidden; // effectively crops profile images that exceed 1:1 ratio for height:width. can be removed when profile image cropping is implemented
  box-sizing: content-box; /* needed to override Bootstrap 3 "border-box" value, which effectively shrinks profile images to fit inside DIV tag */

  // IMPORTANT: this needs to be here to override Bootstrap 3 img style, otherwise the photos don't fit inside their wee boxes
  img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }
}
.avatar-20 {
  .profile-image(20px);
}
.avatar-24 {
  .profile-image(24px);
}
.avatar-32 {
  .profile-image(32px);
}
.avatar-36 {
  .profile-image(36px);
}
.avatar-40 {
  .profile-image(40px);
}
.avatar-44 {
  .profile-image(44px);
}
.avatar-48 {
  .profile-image(48px);
}
.avatar-52 {
  .profile-image(52px);
}
.avatar-56 {
  .profile-image(56px);
}
.avatar-60 {
  .profile-image(60px);
}
.avatar-80 {
  .profile-image(80px);
}
.avatar-92 {
  .profile-image(92px);
}
.avatar-100 {
  .profile-image(100px);
}
.avatar-104 {
  .profile-image(104px);
}
.avatar-108 {
  .profile-image(108px);
}
.avatar-112 {
  .profile-image(112px);
}
.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.profile-login {
  .profile-image(48px);
}

.profile-job-wall {
  .profile-image(20px);
}

.profile-candidate-or-engaged-recruiter {
  .profile-image(32px);
}

.profile-public {
  .profile-image(128px);
}

span.hm-profile-toggle-link {
  margin: 10px 0;
  padding: 4px 6px;
}

.recruiter-info {
  font-family: @font-family;
  font-size: 10px;
  line-height: 14px;

  pre {
    padding: 0;
    color: #555;
    background-color: #fff;
    border:none;
    font-family: @font-georgia;
    font-size: 11px;
    line-height: 20px;
  }
}

.recruiter-summary {
  .avatar {
    float: left;
  }
  .info {
    width: 142px;
    margin-left:10px;
  }
  .favorite {
    vertical-align: middle;
    margin-top: 4px;
    input[type="checkbox"] {
      margin: 0px 0 0 !important;
    }
  }
  .name {
    font-family: @font-family;
    font-size: 12px;
    font-weight: @bounty-bold;
    text-transform: uppercase;
  }
  .vendor-status {
    font-weight: @bounty-bold;
    color: @bounty-dark-orange;
    text-transform: uppercase;
    font-size: 9px;
  }
  .bounty-status {
    font-size: 9px;
    text-align: center;
    text-transform: uppercase;
  }
  .location {
    font-family: @font-family;
    font-size: 10px;
  }

  .headhunter-status-label {
    max-width: 90px;
    background-color: #222;
    opacity: .7;
    text-align: center;
    color: #fff;
    font-family: 'Open Sans Condensed', Arial, serif;
    text-transform: uppercase;
  }
}

.recruiter-submissions {
  margin-left: 0px;
  overflow: hidden;

  .submissions {
    font-weight: @bounty-bold;
    font-size: 10px;
    text-transform: uppercase;
    margin: 5px 0 5px 0;
    background-color: transparent;
  }
  .active {
    border-right: thin dotted #BBBBBB;
  }
  .count  {
    font-family: @font-family;
    font-weight:300;
    font-size: 30px;
  }
  .bounty-status {
    position: relative;
  }
}

.headhunter-profile {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  border-top: thin dotted #BBBBBB;
  border-bottom: thin dotted #BBBBBB;
  margin: 10px auto;

  .fills {
    margin: 10px 0;
    border-right: thin dotted #bbb;
  }
  .interview-rate {
    margin: 10px 0;
    border-right: thin dotted #bbb;
  }
  .interviews {
    margin: 10px 0;
  }
  .metric {
    font-family: @font-family-condensed;
    font-size: 24px;
    line-height: 30px;
  }
  .metric-label {
    font-family: @font-family;
    font-size:10px;
  }
}
.headhunter-profile div {
  padding: 0 10px;
}


/* PRIVACY POLICY, ABOUT US, CONTACT US & 404 PAGE
  ----------------------------------------------------------*/
.textPages {
  font-size: 16px;
  line-height: 24px;
  margin: 0px auto;
  text-align: left;
}

.contact {
  width: 540px;
}

.about {
  width: 800px;
}
.notFound {
  width: 1050px;
}
.accessDenied {
  width: 500px;
}
.star {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 50px;
}


/* DATA BOT
  ----------------------------------------------------------*/
.enterprise-data-bot {
  position: fixed;
  right: 0px;
  top: 60px;
  z-index: 1001;
  background-color: @bounty-lightest-gray;
  padding: 10px;
}
.enterprise-data-bot a {
  color:#fff;
}

.check-box-link {
  float: left;
  margin-right: 8px;
}


/*  LINKS
----------------------------------------------------------*/
a {
  color: @link-color;
}
a:hover {
  color: @bounty-dark-orange;
  text-decoration: none;
}
a:focus {
  outline: none;
}
a:active, a:focus {
  color: @bounty-dark-orange;
  text-decoration: none;
}
a:active, a:focus {
  color:@bounty-dark-orange;
  text-decoration: none;
}

ul.nav-tabs {
  li {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    a {
      display: inline-block;
    }
    .wicket-ajax-indicator { /* moves ajax indicator image a value equal to its own width on bootstrap styled tabs */
      float: right;
      position: relative;
      margin-left: -16px;
    }
  }
  li.active {
    a {
      color: #9a1c52;
    }
  }
}

a.slide-panel {
  .glyphicon {
    color: @bounty-light-gray
  }
}
a.popover-link {
  color: #394366;
  text-decoration: none;
}


/*  AJAX INDICATORS
----------------------------------------------------------*/
#loading-overlay {
  background: none repeat scroll 0 0 #000000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.0;
  filter: Alpha(opacity=0); /* IE 8 and earlier versions */
  position: fixed;
  text-align: center;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

#loading-image {
  background-image: url("../img/loading.gif");
  display: inline-block;
  height: 32px;
  overflow: hidden;
  width: 32px;
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -16px; /* image width / 2 */
  margin-top: -16px;  /* image height / 2 */
}

.busy-indicator {
  background-image: url("../img/busy-indicator-16x16-trans.gif");
  background-repeat: no-repeat;
  background-position: 0 0;
  display: none;
  margin-left: 4px;
  height: 16px;
  width: 16px;
}

.loading-indicator {
  display: none;
  animation: blink 2s infinite;
  -webkit-animation: blink 2s infinite;
}
.overlay {
  display: none; /* Initially hidden */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* transparent background */
  z-index: 999; /* Ensure it's above other content */
  text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes blink {
  to {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  to {
    opacity: 0.0;
  }
}


/* FORM FEEDBACK MESSAGES
---------------------------------------------------------*/
// removes the browser's (40px) default left padding from "<ul>" tag that we use to display feedback messages
.feedback-no-padding > ul.feedbackPanel,
.feedback-panel > ul.feedbackPanel,
.feedback > ul.feedbackPanel {
  padding-left: 0px !important;
}
.info-error { color: @error-color; }
.info-success { color: @bounty-light-green; }


/* FOOTERS
----------------------------------------------------------*/
/* Footer "sticks" to the bottom of viewport. flexbox is used to center footer content. Touchy layout. Be mindful with changes. */
.footer {
   height: 115px;
   content: " ";
   display: block;
}

a.footer-logo {
  background-image: url('../img/new_logo_transparent_white.png');
  display: block;
  height: 40px;
  width: 252px;
  margin-left: 0px !important;
}

.sticky-footer {
  bottom: 0;
  position: absolute;
  width: 100%;
}

ul.footer-links li:last-child {
  margin-left: 40px;
}

.crosshatch-background {
  background-image: url("../img/crosshatch_background.png");
  background-repeat: repeat;
}


/*  BOOTSTRAP 2 BUT NOT IN BOOTSTRAP 3
----------------------------------------------------------*/

// custom BountyJobs class used to replicate functionality of Bootstrap 2 "container" fixed width class
.container-fixed {
  width: 1240px;
  /*width: 1170px;*/ /* this is the actual computed width of the Bootstrap 3 class if you inspect the CSS in Firebug */
  margin-left: auto;
  margin-right: auto;
}

ul.unstyled, ol.unstyled {
  list-style: outside none none;
  margin-left: 0;
}

.input-mini {
  width: 60px !important;
}


/*  CSS 3
----------------------------------------------------------*/
.column-count-3 {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}


/* NO LOGIN SITE -- MARKETING PAGES
----------------------------------------------------------*/
.feePage-bg {
  background-image:~'url("images/umbrella-ella-ella.jpg")';   //less is not good at picking up the correct relative path, so use this syntax ~'' to make it behave
  background-repeat: no-repeat;
  margin-top:-100px;
  height:826px;
}

.landingPage-btn {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffb600;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight:600;
  line-height: 20px;
  margin-bottom: 0;
  padding: 10px 10px;
  text-align: center;
  vertical-align: middle;
  transition: all 0.3s ease 0s;
}

.landingPage-btn:hover, .posting-btn:focus, .posting-btn:active {
  background-color: #ffa800;
  color: #ffffff;
  box-shadow: 3px 3px 3px #999;
}



/* CANDIDATE STATUSES
----------------------------------------------------------*/

.candidate-status-s { background-color: @candidate-status-s; }  // Unopened
.candidate-status-b { background-color: @candidate-status-b; }  // Undecided
.candidate-status-f { background-color: @candidate-status-f; }  // Awaiting Feedback
.candidate-status-i { background-color: @candidate-status-i; }  // Phone Interview
.candidate-status-e { background-color: @candidate-status-e; }  // Offer Extended
.candidate-status-h { background-color: @candidate-status-h; }  // Hired
.candidate-status-o { background-color: @candidate-status-o; }  // Final Consideration
.candidate-status-n { background-color: @candidate-status-n; }  // In-Person Interview
.candidate-status-q { background-color: @candidate-status-q; }  // Pending Placement
.candidate-status-r,                                            // Rejected
.candidate-status-w,                                            // Withdrawn
.candidate-status-c,                                            // Closed - No Hire
.candidate-status-a,                                            // Award Bounty *
.candidate-status-j,                                            // Hired Not Rejected *
.candidate-status-p,                                            // Hired And Paid *
.candidate-status-t,                                            // Not Uploaded to ATS *
.candidate-status-u,                                            // Rejected by ATS *
.candidate-status-v {                                           // ATS Rejection Appeal *
  background-color: @bounty-white;
}

/* Breaking out of a bootstrap container
----------------------------------------------------------*/
.agency-views-table {
  width: 90vw;
  position: relative;
  left: ~"calc(-1 * (90vw - 100%) / 2)";
}


/* ICONS & IMAGES
----------------------------------------------------------*/

.recruiter-nav-submenu .icon-handshake {
  background-image: url("../img/icons/bounty/handshake-no-lines.svg");
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
  overflow: visible;
  display: inline-block;
}

.recruiter-nav-submenu .icon-handshake:hover {
  background-image: url("../img/icons/bounty/handshake-no-lines-raspberry.svg");
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
  overflow: visible;
  display: inline-block;
}


/* JQUERY UI OVERRIDES
----------------------------------------------------------*/
.datepicker-readonly {
  background-color: #ffffff !important;
}
.ui-datepicker .ui-datepicker-title select {
  color: #000 !important;
  font-weight: normal;
}


/* YAHOO UI OVERRIDES
----------------------------------------------------------*/
.yui-skin-sam .yui-calendar a.calnav {
  color: #06c !important;
}


/* QBR PANEL STYLES
----------------------------------------------------------*/
.qbr-panel .page-header-qbr {
    border-bottom: 3px solid #9b1c52;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.qbr-panel .page-header-qbr h2 {
    color: #9b1c52;
    font-weight: 300;
    margin: 0;
}

/* Filter Bar */
.qbr-panel .filter-bar {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}
.qbr-panel .filter-bar label {
    font-weight: 600;
    color: #555;
    font-size: 12px;
    text-transform: uppercase;
}

/* KPI Cards */
.qbr-panel .kpi-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.qbr-panel .kpi-card .kpi-value {
    font-size: 32px;
    font-weight: 300;
    color: #9b1c52;
}
.qbr-panel .kpi-card .kpi-label {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    margin-top: 5px;
}

/* Panel styling */
.qbr-panel .panel-bj > .panel-heading {
    background: linear-gradient(to bottom, #fafafa 0%, #f4f4f4 100%);
    border-bottom: 1px solid #ddd;
    color: #333;
    font-weight: 600;
}

/* View Toggle */
.qbr-panel .view-toggle {
    float: right;
    margin-top: -3px;
}
.qbr-panel .view-toggle .btn.active {
    background-color: #9b1c52;
    color: #fff;
    border-color: #9b1c52;
}

/* Section divider */
.qbr-panel .section-divider {
    border-top: 3px solid #9b1c52;
    margin: 40px 0 30px 0;
    padding-top: 20px;
}
.qbr-panel .section-divider h3 {
    color: #9b1c52;
    font-weight: 300;
    margin: 0 0 20px 0;
}

/* Funnel visualization */
.qbr-panel .funnel-container {
    padding: 20px;
}
.qbr-panel .funnel-step {
    text-align: center;
    padding: 15px 10px;
}
.qbr-panel .funnel-bar {
    height: 80px;
    margin: 0 auto 10px auto;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
}
.qbr-panel .funnel-bar.funnel-navy { background: #394366; }
.qbr-panel .funnel-bar.funnel-raspberry { background: #9b1c52; }
.qbr-panel .funnel-bar.funnel-gold { background: #ffb600; color: #333; }
.qbr-panel .funnel-bar.funnel-green { background: #5da21c; }
.qbr-panel .funnel-label {
    font-size: 13px;
    color: #555;
    font-weight: 600;
}
.qbr-panel .funnel-rate {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}
.qbr-panel .funnel-arrow {
    font-size: 24px;
    color: #ccc;
    padding-top: 30px;
}

/* Rate bar in tables */
.qbr-panel .rate-bar {
    height: 8px;
    background: #eee;
    border-radius: 4px;
    margin-top: 5px;
    min-width: 100px;
}
.qbr-panel .rate-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: #9b1c52;
}

/* Export button */
.qbr-panel .btn-export {
    background-color: #5da21c;
    border-color: #5da21c;
    color: #fff;
}
.qbr-panel .btn-export:hover {
    background-color: #4a8516;
    border-color: #4a8516;
    color: #fff;
}

/* Chart/Table view toggle */
.qbr-panel .view-content {
    display: none;
}
.qbr-panel .view-content.active {
    display: block;
}

/* Loading spinner animation */
@keyframes qbr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.qbr-panel .spinner-icon {
    animation: qbr-spin 1s linear infinite;
    display: inline-block;
}

/* Chart container */
.qbr-panel .chart-container {
    min-height: 300px;
    padding: 15px;
}

/* Period Selector */
.qbr-panel .period-selector-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.qbr-panel .quick-year-select {
    width: 80px;
}
.qbr-panel .quick-period-btns .btn {
    padding: 6px 12px;
}
.qbr-panel .quick-period-btns .btn.active {
    background-color: #9b1c52;
    color: #fff;
    border-color: #9b1c52;
}
.qbr-panel .inline-date-fields {
    display: flex;
    align-items: center;
    gap: 5px;
}
.qbr-panel .date-input {
    width: 100px;
}
.qbr-panel .date-input:disabled {
    background-color: #eee;
}
.qbr-panel .date-input.custom-active {
    background-color: #fff8e1;
    border-color: #ffb600;
}
.qbr-panel .date-separator {
    color: #777;
}

/* Compare Periods */
.qbr-panel .compare-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}
.qbr-panel .compare-toggle input[type="checkbox"] {
    transform: scale(1.2);
}
.qbr-panel .compare-toggle-label {
    font-weight: 600;
    color: #9b1c52;
    margin: 0;
}
.qbr-panel .compare-years-select {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
}
.qbr-panel .compare-section {
    margin-bottom: 5px;
}
.qbr-panel .compare-label {
    font-weight: 600;
    color: #555;
    font-size: 11px;
    margin-bottom: 3px;
}
.qbr-panel .compare-years-select label {
    font-weight: normal;
    margin-right: 15px;
    font-size: 12px;
}

/* YoY Change indicators */
.qbr-panel .change-positive {
    color: #5da21c;
}
.qbr-panel .change-negative {
    color: #c51f09;
}
.qbr-panel .change-neutral {
    color: #777;
}
.qbr-panel .trend-indicator {
    font-size: 12px;
    margin-left: 5px;
}
.qbr-panel .trend-up {
    color: #5da21c;
}
.qbr-panel .trend-down {
    color: #c51f09;
}
.qbr-panel .trend-neutral {
    color: #777;
}
/* For metrics where down is good (like cost, time) */
.qbr-panel .trend-up-bad {
    color: #c51f09;
}
.qbr-panel .trend-down-good {
    color: #5da21c;
}

/* Period Comparison Table */
.qbr-panel .comparison-table-container {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
}
.qbr-panel .comparison-table {
    width: 100%;
    margin: 0;
}
.qbr-panel .comparison-table th {
    background: linear-gradient(to bottom, #fafafa 0%, #f4f4f4 100%);
    border-bottom: 2px solid #ddd;
    padding: 12px 15px;
    font-weight: 600;
    color: #555;
}
.qbr-panel .comparison-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}
.qbr-panel .comparison-table tr:last-child td {
    border-bottom: none;
}
.qbr-panel .comparison-table .metric-name {
    font-weight: 600;
    color: #333;
}
.qbr-panel .comparison-table .change-cell {
    font-weight: 600;
}

/* Insights Section */
.qbr-panel .insight-card {
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}
.qbr-panel .insight-card.maroon {
    background: linear-gradient(135deg, #9b1c52 0%, #711d45 100%);
}
.qbr-panel .insight-card.gold {
    background: linear-gradient(135deg, #ffb600 0%, #e6a400 100%);
    color: #333;
}
.qbr-panel .insight-card.navy {
    background: linear-gradient(135deg, #394366 0%, #2a3350 100%);
}
.qbr-panel .insight-card.green {
    background: linear-gradient(135deg, #5da21c 0%, #4a8516 100%);
}
.qbr-panel .insight-value {
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 1.2;
}
.qbr-panel .insight-label {
    font-size: 12px;
    opacity: 0.9;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Key Findings */
.qbr-panel .key-findings {
    background: #fff;
    border: 1px solid #ddd;
    border-left: 4px solid #9b1c52;
    border-radius: 4px;
    padding: 20px;
}
.qbr-panel .key-findings h5 {
    color: #9b1c52;
    font-weight: 600;
    margin: 0 0 15px 0;
}
.qbr-panel .key-findings ul {
    margin: 0;
    padding-left: 20px;
}
.qbr-panel .key-findings li {
    margin-bottom: 8px;
    color: #555;
}

/* Vendor Type Badges */
.qbr-panel .badge-preferred {
    background-color: #5da21c;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}
.qbr-panel .badge-marketplace {
    background-color: #6d7a83;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}
.qbr-panel .badge-new {
    background-color: #ffb600;
    color: #333;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

/* Pagination */
.qbr-panel .pagination-container {
    margin-top: 10px;
    padding: 10px;
    border-top: 1px solid #ddd;
}
.qbr-panel .page-info {
    padding: 0 15px;
    color: #777;
}

/* Metric Values */
.qbr-panel .metric-value-primary {
    color: #9b1c52;
    margin: 0;
}
.qbr-panel .metric-value-secondary {
    color: #394366;
    margin: 0;
}
.qbr-panel .metric-label {
    font-size: 12px;
    color: #777;
}
.qbr-panel .filter-hint {
    font-size: 11px;
    color: #777;
}

/* Table header row */
.qbr-panel .table-header-row {
    font-weight: bold;
    background-color: #f5f5f5;
}

/* Fiscal Year Selector */
.qbr-panel .fiscal-year-selector {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Disabled state utility - used by pagination and other buttons */
.btn-disabled-state {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}