@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

/* Re-point Vuetify's theme variables to the design-system palette. #mhr-stage is a
   closer ancestor than :root, so every color that reads var(--v-*-base) re-skins. */
#mhr-stage{
  --v-primary-base:#3DBFB8; --v-anchor-base:#1FA89F;
  --v-theme-color-base:#1FA89F; --v-nav-color-base:#1FA89F;
  --v-info-base:#4A90D9; --v-success-base:#4CAF82;
  --v-error-base:#E05252; --v-warning-base:#F5A623;
  --mhr-teal-50:#E6F9F8; --mhr-teal-100:#C0EEE9; --mhr-teal-400:#3DBFB8;
  --mhr-teal-600:#1FA89F; --mhr-teal-700:#1A8F88;
  --mhr-g50:#F7FFFE; --mhr-g100:#F5F6FA; --mhr-g200:#EAECF2; --mhr-g300:#D1D5E0;
  --mhr-g500:#8A93A8; --mhr-g600:#636D85; --mhr-g700:#454E64; --mhr-g900:#181D2E;
  --mhr-shadow-card:0 2px 12px rgba(0,0,0,.07);
  --mhr-radius-lg:20px; --mhr-radius-md:12px;
}

/* Typography */
#mhr-stage, #mhr-stage .v-application,
#mhr-stage .v-application .text-body-1,#mhr-stage .v-application .text-body-2,
#mhr-stage .v-application .body-1,#mhr-stage .v-application .body-2,
#mhr-stage .v-application .subtitle-1,#mhr-stage .v-application .caption,
#mhr-stage .v-data-table{font-family:'Poppins',sans-serif!important;}
#mhr-stage .v-application .text-h1,#mhr-stage .v-application .text-h2,
#mhr-stage .v-application .text-h3,#mhr-stage .v-application .text-h4,
#mhr-stage .v-application .text-h5,#mhr-stage .v-application .text-h6,
#mhr-stage .font-weight-bold,#mhr-stage .font-weight-black{
  font-family:'Plus Jakarta Sans',sans-serif!important;letter-spacing:-.01em!important;}

/* Cards & table containers. overflow:hidden is required here: the radius alone
   doesn't clip the square-cornered table header/footer poking past it. */
#mhr-stage .v-card,#mhr-stage .v-sheet.v-card{
  border-radius:var(--mhr-radius-lg)!important;
  box-shadow:var(--mhr-shadow-card)!important;
  border:1px solid var(--mhr-g200)!important;
  overflow:hidden!important;}
#mhr-stage .v-card.transparent,#mhr-stage .v-sheet.transparent{border:none!important;box-shadow:none!important;}
/* The first table card carries .rounded-t-0 (square top, meant to butt against
   a header) and .v-sheet--outlined adds its own border — force full theme radius
   on all corners and let the single .v-card border stand. */
#mhr-stage .v-card{
  border-top-left-radius:var(--mhr-radius-lg)!important;border-top-right-radius:var(--mhr-radius-lg)!important;}
#mhr-stage .v-data-table,#mhr-stage .v-data-table__wrapper{border:none!important;}

/* Data tables */
#mhr-stage .v-data-table>.v-data-table__wrapper>table>thead>tr>th,
#mhr-stage table>thead>tr>th{
  text-transform:uppercase!important;font-size:12px!important;font-weight:700!important;
  color:var(--mhr-g500)!important;letter-spacing:.06em!important;
  background:var(--mhr-g50)!important;border-bottom:1px solid var(--mhr-g200)!important;}
#mhr-stage .v-data-table>.v-data-table__wrapper>table>tbody>tr>td{
  font-size:14px!important;color:var(--mhr-g700)!important;
  border-bottom:1px solid var(--mhr-g100)!important;}
#mhr-stage .v-data-table>.v-data-table__wrapper>table>tbody>tr:hover{
  background:var(--mhr-teal-50)!important;}

/* Status pills (small inline Vuetify v-alert used as a table status chip) →
   design-system badges. Scoped to exclude v-alert--prominent, which is a
   different component (the big colored stat cards below) that happens to
   share the v-alert + v-alert--dense classes — without the :not() here this
   rule was clobbering the stat cards with pill-radius and no border. */
#mhr-stage .v-alert.v-alert--dense:not(.v-alert--prominent){
  border-radius:9999px!important;padding:3px 12px!important;border:none!important;
  font-weight:600!important;letter-spacing:.02em!important;}
#mhr-stage .v-alert.v-alert--dense:not(.v-alert--prominent).info--text{background:#EBF4FC!important;color:#2060a8!important;}
#mhr-stage .v-alert.v-alert--dense:not(.v-alert--prominent).success--text{background:#E8F7EF!important;color:#2d7a55!important;}
#mhr-stage .v-alert.v-alert--dense:not(.v-alert--prominent).error--text{background:#FDEAEA!important;color:#b03232!important;}
#mhr-stage .v-alert.v-alert--dense:not(.v-alert--prominent).warning--text{background:#FEF4E3!important;color:#a06806!important;}
#mhr-stage .v-alert.v-alert--dense:not(.v-alert--prominent).primary--text{background:var(--mhr-teal-50)!important;color:var(--mhr-teal-700)!important;}
#mhr-stage .v-alert.v-alert--dense:not(.v-alert--prominent) *{color:inherit!important;}

/* Stat cards (the big "New notification / In Progress / Completed / Unsuccessful"
   summary cards). These are v-alert--prominent + v-alert--border-left, a
   different visual language from the pill above: a left accent bar plus an
   icon. The bar is a separate absolutely-positioned element with square edges,
   which broke the rounded corner — hide it and use a flat tinted background
   plus a colored icon chip instead, matching the design system's card style. */
#mhr-stage .v-alert.v-alert--prominent{
  border-radius:var(--mhr-radius-md)!important;
  padding:16px 20px!important;border:none!important;box-shadow:none!important;
  overflow:hidden!important;}
#mhr-stage .v-alert.v-alert--prominent .v-alert__border{display:none!important;}
#mhr-stage .v-alert.v-alert--prominent .v-alert__wrapper{align-items:center!important;}
#mhr-stage .v-alert.v-alert--prominent .v-alert__icon{
  border-radius:50%!important;width:38px!important;height:38px!important;min-width:38px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:16px!important;margin-right:16px!important;background:rgba(255,255,255,.55)!important;
  opacity:1!important;color:inherit!important;}
#mhr-stage .v-alert.v-alert--prominent .text-h5{font-family:'Plus Jakarta Sans',sans-serif!important;font-size:22px!important;}
#mhr-stage .v-alert.v-alert--prominent.primary--text{background:var(--mhr-teal-50)!important;color:var(--mhr-teal-700)!important;}
#mhr-stage .v-alert.v-alert--prominent.warning--text{background:#FEF4E3!important;color:#a06806!important;}
#mhr-stage .v-alert.v-alert--prominent.success--text{background:#E8F7EF!important;color:#2d7a55!important;}
#mhr-stage .v-alert.v-alert--prominent.error--text{background:#FDEAEA!important;color:#b03232!important;}
#mhr-stage .v-alert.v-alert--prominent .v-alert__content *{color:inherit!important;}

/* Tabs. Kill borders/shadows/backgrounds on every tab CONTAINER (this removes
   the stray full-width line that trailed after the last tab, whatever element
   was drawing it). Then style the tabs themselves: inactive = outlined white
   pill with gray text; active = solid teal pill with white text + white icon. */
#mhr-stage .v-tabs,#mhr-stage .v-tabs-bar,#mhr-stage .v-item-group,
#mhr-stage .v-slide-group,#mhr-stage .v-slide-group__wrapper,#mhr-stage .v-slide-group__content{
  border:none!important;box-shadow:none!important;background:transparent!important;}
#mhr-stage .v-tab{
  border:1px solid var(--mhr-g200)!important;
  border-radius:var(--mhr-radius-md)!important;
  margin:0 8px 0 0!important;padding:0 16px!important;min-width:auto!important;
  text-transform:none!important;letter-spacing:0!important;font-weight:600!important;
  color:var(--mhr-g600)!important;background:#fff!important;}
#mhr-stage .v-tab:before{border-radius:var(--mhr-radius-md)!important;background-color:transparent!important;}
#mhr-stage .v-tab .v-icon{color:var(--mhr-g500)!important;}
#mhr-stage .v-tab--active{
  background:var(--mhr-teal-400)!important;border-color:var(--mhr-teal-400)!important;}
#mhr-stage .v-tab--active:before{background-color:transparent!important;opacity:0!important;}
#mhr-stage .v-tab--active,#mhr-stage .v-tab--active *{color:#fff!important;}
/* Explicit, maximally-specific override for the icon — mdi icons carry their
   own .theme--light.v-icon{color:...} rule; make sure white always wins here
   regardless of icon markup/theme class combination. */
#mhr-stage .v-tab--active .v-icon,
#mhr-stage .v-tab--active .v-icon.theme--light,
#mhr-stage .v-tab--active i.v-icon{color:#fff!important;}
/* The stray full-width line after the tabs is an <hr class="v-divider"> that
   sits INSIDE the tab bar content. Hide dividers within the tab component only
   (section dividers elsewhere on the page are kept). */
#mhr-stage .v-tabs .v-divider{display:none!important;}

/* Filter row (selects / date-range pickers / branch dropdown). Fields carried
   .v-box-border on the OUTER .v-input AND we were bordering the inner slot too —
   two stacked borders with mismatched radius. Drop the outer border and keep a
   single rounded border on the slot. */
#mhr-stage .v-input.v-box-border,
#mhr-stage .v-text-field.v-box-border{border:none!important;}
#mhr-stage .v-text-field--solo>.v-input__control>.v-input__slot,
#mhr-stage .v-text-field--solo-flat>.v-input__control>.v-input__slot{
  border:1px solid var(--mhr-g200)!important;border-radius:var(--mhr-radius-md)!important;
  box-shadow:none!important;background:#fff!important;}
#mhr-stage .v-input--is-focused>.v-input__control>.v-input__slot{
  border-color:var(--mhr-teal-400)!important;
  box-shadow:0 0 0 3px rgba(61,191,184,.15)!important;}
/* keep the neutral border recolor for the non-input box-border users (cards) */
#mhr-stage .v-card.v-box-border,#mhr-stage .v-sheet.v-box-border{border-color:var(--mhr-g200)!important;}

/* Buttons → rounded, no shouty uppercase, brand shadow on filled */
#mhr-stage .v-btn:not(.v-btn--icon):not(.v-btn--fab){
  border-radius:var(--mhr-radius-md)!important;text-transform:none!important;letter-spacing:0!important;}
#mhr-stage .v-btn.primary,#mhr-stage .v-btn.success{box-shadow:0 1px 4px rgba(61,191,184,.4)!important;}