/* Quick Actions Container */
#quick-actions,
.quick-actions {
  /* Styles consolidated in content-header.css */
}

.quick-actions__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Full-bleed dashed divider under the "Quick Actions" title/button row,
   matching the header/sidebar/stats-row dashed-divider pattern — bleeds past
   .content-body--compact's own 18px padding to reach the card's true edges. */
.quick-actions .v-content-title {
  border-bottom: 1px dashed #C9C9C9;
  margin-inline: -18px;
  padding-inline: 18px;
  padding-bottom: var(--spacing-5);
}

.quick-actions .v-content-title .v-title {
  font-size: 18px;
}

/* content-header.css sets justify-content:space-between on .v-content-title
   at <=768px, which was fine with a single action button but spreads a
   leftover wrapped row of buttons (e.g. the last 2 of 5) to opposite ends
   of the line instead of keeping them packed together. */
@media screen and (max-width: 768px) {
  .quick-actions .v-content-title {
    justify-content: flex-start;
  }
}

/* All 5 action buttons render inside one .quick-actions__buttons group
   (dashboard-quick-actions.php) rather than as individual .v-content-title
   children — this gives the group its own flex context to size/stack in,
   instead of trying to force each button's width from inside a wrapped row
   it shares with the "Quick Actions" title. */
.quick-actions .v-content-title .quick-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* <=991px: the button group takes its own full-width line below the title
   (flex-basis:100% on a flex-wrap item always starts a fresh line), and the
   gap between buttons tightens so more fit per row. */
@media screen and (max-width: 991px) {
  .quick-actions .v-content-title .quick-actions__buttons {
    flex-basis: 100%;
    gap: var(--spacing-2);
  }
}

/* <=640px: buttons stack one per row, each stretched to the group's full
   width via align-items:stretch — more reliable than a plain width:100% on
   each button while it's still a sibling of other wrapped items. Also drops
   the full-bleed divider's negative margin-inline/compensating
   padding-inline back to 0 here — that -18px/+18px pairing was throwing off
   the button group's own width calc, leaving it short of the card's true
   edge instead of actually filling it. */
@media screen and (max-width: 640px) {
  .quick-actions .v-content-title {
    margin-inline: 0;
    padding-inline: 0;
  }

  .quick-actions .v-content-title .quick-actions__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-actions .v-content-title .quick-actions__buttons .verimus-btn {
    justify-content: center;
  }
}

/* My Tasks / Employee Tasks column boxes have no card border/background of
   their own — the columns are separated by .quick-actions__col dividers
   instead (see below). */
#quick-actions #my-tasks,
#quick-actions #employee-tasks {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Height-stretch chain (column > wrapper > card > toggle-content/tips-body)
   so each column's inner content fills the row's full stretched height —
   otherwise a short column (e.g. Tips with one card) only stretches at the
   outer .quick-actions__col level and its divider stops short of the row's
   full height. */
.quick-actions__col {
  display: flex;
  flex-direction: column;
}

.quick-actions__my-tasks,
.quick-actions__employee-tasks,
.quick-actions__tips {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.quick-actions__my-tasks > .v-card,
.quick-actions__employee-tasks > .v-card{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.quick-actions__employee-tasks{
  padding-left: 0;
}

.quick-action-toggle{
  display: none;
}

/* Divider between Quick Actions columns (My Tasks / Employee Tasks /
   HR Command Tips) — vertical side-by-side, horizontal once they stack.
   On the side-by-side layout the border sits on each column's card area
   (#employee-tasks .toggle-content / .quick-actions__tips-body), not the
   full-height column, so it starts level with the cards, not the title row;
   the height-stretch chain above lets it reach the full row height too.

   When Tips is present, all columns go side-by-side from 768px up (kept in
   sync with the col-md-4/col-lg-* classes in dashboard-quick-actions.php),
   so .quick-actions__main--has-tips gets the vertical divider from that
   earlier point too. Without Tips, My Tasks/Employee Tasks still only split
   at 992px — the unscoped rule below covers both cases from there up. */
@media screen and (min-width: 768px) {
  .quick-actions__main--has-tips .quick-actions__col + .quick-actions__col #employee-tasks .toggle-content,
  .quick-actions__main--has-tips .quick-actions__col + .quick-actions__col .quick-actions__tips-body {
    /* A background stripe renders a true 0.5px line — a border-left this
       thin gets rounded up to 1px on standard-density displays. */
    background-image: linear-gradient(#C9C9C9, #C9C9C9);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 0.5px 100%;
    padding-left: var(--spacing-4);
  }
}

@media screen and (min-width: 992px) {
  .quick-actions__col + .quick-actions__col #employee-tasks .toggle-content,
  .quick-actions__col + .quick-actions__col .quick-actions__tips-body {
    background-image: linear-gradient(#C9C9C9, #C9C9C9);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 0.5px 100%;
    padding-left: var(--spacing-4);
  }
}

@media screen and (max-width: 767px) {
  .quick-actions__main--has-tips .quick-actions__col + .quick-actions__col {
    padding-top: var(--spacing-4);
  }
}

@media screen and (max-width: 991px) {
  .quick-actions__main:not(.quick-actions__main--has-tips) .quick-actions__col + .quick-actions__col {
    padding-top: var(--spacing-4);
  }
}

/* No min-width guard on .quick-actions__col--tips here on purpose: the
   sidebar eats into the real content width, so at the low end of the
   768px/992px tiers Tips' actual computed share can be well under 243px —
   a min-width that large forced an overflow that wrapped Tips onto its own
   row below, the opposite of what the col-md-4/col-lg-2 split intends. */

/* Custom widths at 992px+ (Bootstrap's own col-lg-5/col-lg-2 give 41.6%/
   16.6%) — scoped to .quick-actions__col so this doesn't touch col-lg-5/
   col-lg-2 usage elsewhere on the site. */
@media screen and (min-width: 992px) {
  .quick-actions__col.col-lg-5 {
    width: 37%;
  }

  .quick-actions__col.col-lg-2 {
    width: 25%;
  }

  .quick-actions__col {
    padding-right: 0;
  }
}

/* Aligns the Employee Tasks / HR Command Tips column headings with their
   card content below, which is inset by the same amount for the divider
   (see the background-stripe rule above). */
@media screen and (min-width: 992px) {
  #quick-actions #employee-tasks .task__title,
  #quick-actions .quick-actions__tips .task__title {
    padding-left: var(--spacing-4);
  }
}

#quick-actions .task__item {
  padding-left: 0px;
}

#quick-actions #employee-tasks .task__item,
#quick-actions #employee-tasks .task__content.bottom-10-black {
  border-bottom: 0;
}
#quick-actions #my-tasks .toggle-content,
#quick-actions #employee-tasks .toggle-content{
  flex: 1 1 auto;
}

#quick-actions #my-tasks-completed {
  display: none;
}

#quick-actions .task-tip-card {
  flex: 0 0 auto;
}

#quick-actions .task > .d-flex:first-child {
  padding-bottom: var(--spacing-4);
}

#quick-actions .task > .d-flex:first-child .task__title {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   Dashboard stats row: Documents / Tasks / People + Upcoming Key Dates
   ========================================================================== */

.hrc-dashboard-stats-row {
  /* The approved summary uses compact counts and date labels. */
  --font-size-body: var(--font-size-xs);
  display: flex;
  align-items: stretch;
  gap: var(--spacing-4);
  margin-top: 19px;
}

.hrc-dashboard-stats-card {
  display: flex;
  min-width: 0;
  min-height: 117px;
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-5);
}

.hrc-dashboard-stats-card--groups {
  flex: 2.2 1 0;
  align-items: stretch;
}

.hrc-dashboard-calendar {
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
}

.hrc-dashboard-stats-card--groups,
.hrc-dashboard-calendar {
  border: none !important;
}

.hrc-dashboard-stats-card__group {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hrc-dashboard-stats-card__divider {
  align-self: stretch;
  width: 0;
  flex-shrink: 0;
  border-right: 1px dashed #C9C9C9;
  margin-block: calc(-1 * var(--spacing-2)) calc(-1 * var(--spacing-5));
  margin-inline: var(--spacing-4);
}

.hrc-dashboard-stats-card__header {
  margin-bottom: var(--spacing-4);
}

.hrc-dashboard-stats-row .hrc-dashboard-stats-card__group .v-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

@media screen and (min-width: 1280px) {
  .hrc-dashboard-stats-card__group {
    flex: 181 1 0;
  }

  .hrc-dashboard-stats-card__group:first-child {
    flex-grow: 288;
  }

  .hrc-dashboard-stats-card__group:last-child {
    flex-grow: 237;
  }
}

.hrc-dashboard-stats-card__pills {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--spacing-2);
}

.hrc-stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--spacing-2);
  background-color: var(--gray-100);
  color: var(--text-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  text-decoration: none;
  transition: background-color var(--transition-base) var(--ease-in-out),
    color var(--transition-base) var(--ease-in-out);
}

a.hrc-stat-pill:hover {
  background-color: var(--color-primary);
  color: var(--white);
  text-decoration: none;
}

.hrc-view-all {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-decoration: none;
}

.hrc-view-all:hover {
  color: var(--color-primary);
  text-decoration: none;
}

@media screen and (min-width: 1400px) {
  #quick-actions #employee-tasks .task__label {
    width: auto;
  }
}

@media screen and (max-width: 1279px) {
  .hrc-dashboard-stats-card--groups {
    flex-direction: column;
  }

  .hrc-dashboard-stats-card__divider {
    align-self: auto;
    width: auto;
    height: 0;
    border-right: none;
    border-bottom: 1px dashed #C9C9C9;
    margin-inline: 0;
    margin-block: var(--spacing-4);
  }
}

@media screen and (max-width: 767px) {
  .hrc-dashboard-stats-row {
    flex-direction: column;
  }

  /* The desktop zero flex-basis would collapse this stacked card to its
     minimum height, allowing Tasks and People to overlap the next cards. */
  .hrc-dashboard-stats-card--groups {
    flex: 0 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .quick-actions__my-tasks .task__item .task-due {
    gap: 0.8rem;
  }
}

@media screen and (max-width: 767px) {
  .quick-actions__my-tasks #my-tasks .task__info {
    max-width: 40%;
  }

  .quick-actions__my-tasks #my-tasks .task__tags {
    max-width: 60%;
  }
}

/* ==========================================================================
   Dashboard task cards (My Tasks / Employee Tasks) — colour-coded left
   border + "View" link, per Figma. Dashboard-only: parts/tasks/task-content.php
   and parts/employees/employee-content-task.php keep their own styling on
   the full /my-tasks/ list page.
   ========================================================================== */

.dashboard-task-card {
  background-color: #F7F7F7;
  border-left: 6px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.dashboard-task-card:last-child {
  margin-bottom: 0;
}

.dashboard-task-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.dashboard-task-card__title {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: 0;
}

.dashboard-task-card__view {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

.dashboard-task-card__view:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.dashboard-task-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.dashboard-task-card__badges .v-badge {
  background-color: var(--white);
  padding: 5px 8px;
  height: auto;
  margin-top: 0;
}

/* Only the neutral "muted" badges (Created:, assignee) go to #171717 —
   status-coloured badges (e.g. an overdue "Due" badge, .v-badge--error)
   keep their semantic colour. */
.dashboard-task-card__badges .v-badge--muted {
  color: var(--gray-900);
}

.dashboard-task-card__badges .v-badge strong {
  font-weight: var(--tag-font-weight);
}

.dashboard-task-card__badges .avatar-initials {
  display: none;
}

/* ==========================================================================
   HR Command Tips — third Quick Actions column (ACF options carousel)
   ========================================================================== */

/* Grows to fill the column's full stretched height (see the height-stretch
   chain near the top of this file) so the column divider reaches the row's
   full height — the card itself inside stays auto/content-height. */
.quick-actions__tips-body {
  flex: 1 1 auto;
}

.command-tips-card {
  background-color: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  height: auto;
}

/* The Tips card uses a fixed light surface, so it needs its own dark-mode
   surface instead of relying on the global card token. */
.dark-mode .command-tips-card {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

.command-tips-card__content {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-bottom: var(--spacing-4);
}

.command-tips-card__content p {
  margin: 0 0 var(--spacing-2);
}

@media screen and (max-width: 480px) {
  .quick-actions__header .quick-actions__title, 
  .quick-actions__header .quick-actions__btn-create {
    width: 100%;
  }
  .quick-actions__header .quick-actions__btn-create {
    margin-top: 1rem;
  }

  .quick-actions__my-tasks{
  }
  .quick-actions__employee-tasks{
    padding-left: 0;
  }
  .quick-action-toggle{
    display: block;
    margin-top: -15px;
    border:0;
    min-height: 40px;
    min-width: 40px;
  }
  .task-tip-card .btn-close {
    flex: 0 0 40px;
    height: 40px;
    min-width: 40px;
  }
  #employee-tasks .toggle-content{
    display: none;
  }
  .quick-actions__header .quick-actions__title {
    font-size: var(--font-size-lg);
  }
  .quick-actions__my-tasks #my-tasks .dashboard-task-item {
    display: block!important;
  }
  .quick-actions__my-tasks #my-tasks .dashboard-task-item .task__tags {
    float: left;
  }
  .quick-actions__my-tasks #my-tasks .task__info, .quick-actions__my-tasks #my-tasks .task__tags {
    max-width: 100%;
  }
}

/* Compact key-date summary, matching the approved dashboard Figma (BugHerd 2862). */
.hrc-dashboard-calendar {
  min-height: 117px;
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-5);
}

.hrc-dashboard-calendar__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.hrc-dashboard-calendar__header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

.hrc-dashboard-calendar__header .hrc-view-all {
  flex-shrink: 0;
  white-space: nowrap;
}

.hrc-dashboard-calendar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.hrc-dashboard-calendar__list li {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  line-height: 18px;
}

.hrc-dashboard-calendar__list li:first-child {
  flex-basis: 100%;
}

.hrc-dashboard-calendar__item {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hrc-dashboard-calendar a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .hrc-dashboard-calendar {
    align-self: flex-start;
  }
}

@media screen and (max-width: 767px) {
  .hrc-dashboard-calendar {
    flex: 0 0 auto;
  }
}