/* Poppins for the compact card type on the Admin Dashboard and Profile page
   (see "Compact type" below). Google Fonts is already allowed by the site's
   CSP for the template's Roboto. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/*
 * Pulse Work Chrono theme corrections, loaded after the SmartHR template's
 * style.css (see the site's head markup).
 *
 * The template's brand and status colours fail WCAG AA (4.5:1) as text: white
 * on the orange primary is 3.15:1, yellow warning text 1.55:1, green success
 * text 2.0:1. These rules keep every tinted background and the bright orange
 * for icons, progress bars and the PW brand mark, and only darken the colours
 * that carry text. Each shade below passes 4.5:1 on white, on its 10% tint and
 * under white text:
 *
 *   primary  #C1460B (template #F26522)   success  #027936 (#03C95A)
 *   warning  #8C6900 (#FFC107)            info     #0061D3 (#1B84FF)
 *   danger   #B90A0A (#E70D0D, tints)     pink     #C70260 (#FD3995)
 *   purple   #983DA7 (#AB47BC)            skyblue  #07748A (#0DCAF0)
 *   muted    #606F7F (#677788)
 *
 * `html[data-color]` in front of each selector outranks the template rule it
 * replaces, including the template's `[data-color=primary]` colour-scheme
 * variants (the head markup sets data-color on <html>). `!important` is used
 * only where the template rule has it.
 */

/* ---------- Text colours (icons keep the template colour) ---------- */
html[data-color] .text-primary:not(i):not(.ti):not(svg) {
  color: #c1460b !important;
}
html[data-color] .text-success:not(i):not(.ti):not(svg) {
  color: #027936 !important;
}
html[data-color] .text-warning:not(i):not(.ti):not(svg) {
  color: #8c6900 !important;
}
html[data-color] .text-info:not(i):not(.ti):not(svg) {
  color: #0061d3 !important;
}
html[data-color] .text-pink:not(i):not(.ti):not(svg) {
  color: #c70260 !important;
}
html[data-color] .text-skyblue:not(i):not(.ti):not(svg) {
  color: #07748a !important;
}
html[data-color] .text-muted {
  color: #606f7f !important;
}

/* ---------- Alerts: same tints, readable text ---------- */
html[data-color] .alert-primary,
html[data-color] .alert-primary .alert-link {
  color: #c1460b;
}
html[data-color] .alert-success,
html[data-color] .alert-success .alert-link {
  color: #027936;
}
html[data-color] .alert-warning,
html[data-color] .alert-warning .alert-link {
  color: #8c6900;
}
html[data-color] .alert-info,
html[data-color] .alert-info .alert-link {
  color: #0061d3;
}
html[data-color] .alert-danger,
html[data-color] .alert-danger .alert-link {
  color: #b90a0a;
}

/* ---------- Soft and transparent badges and backgrounds ---------- */
html[data-color] .badge.badge-soft-primary,
html[data-color] .badge.badge-primary-transparent {
  color: #c1460b;
}
html[data-color] .bg-primary-transparent {
  color: #c1460b !important;
}
html[data-color] .badge.badge-soft-success,
html[data-color] .badge.badge-success-transparent {
  color: #027936;
}
html[data-color] .bg-success-transparent {
  color: #027936 !important;
}
html[data-color] .badge.badge-soft-warning,
html[data-color] .badge.badge-warning-transparent {
  color: #8c6900;
}
html[data-color] .bg-warning-transparent {
  color: #8c6900 !important;
}
html[data-color] .badge.badge-soft-info,
html[data-color] .badge.badge-info-transparent {
  color: #0061d3;
}
html[data-color] .bg-info-transparent {
  color: #0061d3 !important;
}
html[data-color] .badge.badge-soft-danger,
html[data-color] .badge.badge-danger-transparent {
  color: #b90a0a;
}
html[data-color] .bg-danger-transparent {
  color: #b90a0a !important;
}
html[data-color] .badge.badge-pink-transparent {
  color: #c70260;
}
html[data-color] .bg-pink-transparent {
  color: #c70260 !important;
}
html[data-color] .badge.badge-soft-purple,
html[data-color] .badge.badge-purple-transparent,
html[data-color] .bg-purple-transparent,
html[data-color] .bg-transparent-purple {
  color: #983da7 !important;
}
html[data-color] .badge.badge-soft-skyblue {
  color: #07748a;
}
html[data-color] .bg-skyblue-transparent {
  color: #07748a !important;
}
/* Icons in tinted primary tiles stay brand orange. */
html[data-color] .bg-primary-transparent :is(i, .ti, svg),
html[data-color] .badge-soft-primary :is(i, .ti, svg) {
  color: #f26522 !important;
}

/* ---------- Solid badges with white text ---------- */
html[data-color] .badge.badge-primary {
  background: #c1460b;
}
html[data-color] .badge.badge-success {
  background: #027936;
}
html[data-color] .badge.badge-info {
  background: #0061d3;
}
html[data-color] .badge.badge-pink {
  background-color: #c70260;
}
html[data-color] .badge.badge-skyblue {
  background-color: #07748a;
}
/* Yellow stays yellow; its text turns dark instead of white. */
html[data-color] .badge.badge-warning {
  color: #111827;
}

/* ---------- Buttons ---------- */
html[data-color] .btn.btn-primary,
html[data-color] .btn-primary {
  background-color: #c1460b;
  border-color: #c1460b;
}
html[data-color] .btn.btn-primary:hover,
html[data-color] .btn.btn-primary:focus,
html[data-color] .btn.btn-primary:active,
html[data-color] .btn.btn-primary.active {
  background-color: #a33b09;
  border-color: #a33b09;
}
html[data-color] .btn.btn-success {
  background-color: #027936;
  border-color: #027936;
}
html[data-color] .btn.btn-success:hover,
html[data-color] .btn.btn-success:focus,
html[data-color] .btn.btn-success:active {
  background-color: #01632c;
  border-color: #01632c;
}
html[data-color] .btn.btn-warning {
  color: #111827;
}
html[data-color] .btn-outline-primary {
  color: #c1460b !important;
  border-color: #c1460b !important;
}
html[data-color] .btn-outline-primary:hover,
html[data-color] .btn-outline-primary:focus {
  color: #fff !important;
  background-color: #c1460b !important;
}
html[data-color] .btn-outline-success {
  color: #027936 !important;
  border-color: #027936 !important;
}
html[data-color] .btn-outline-success:hover,
html[data-color] .btn-outline-success:focus {
  color: #fff !important;
  background-color: #027936 !important;
}

/* ---------- Solid colour fills that carry white text ---------- */
html[data-color] :is(.btn, .badge, .avatar, .text-white, .text-fixed-white).bg-primary:not(.brand-mark) {
  background-color: #c1460b !important;
}
html[data-color] :is(.btn, .badge, .avatar, .text-white, .text-fixed-white).bg-success {
  background-color: #027936 !important;
}
html[data-color] :is(.btn, .badge, .avatar, .text-white, .text-fixed-white).bg-info {
  background-color: #0061d3 !important;
}
html[data-color] :is(.btn, .badge, .avatar, .text-white, .text-fixed-white).bg-pink {
  background-color: #c70260 !important;
}
html[data-color] :is(.btn, .badge, .avatar).bg-warning {
  color: #111827 !important;
}

/* ---------- Active navigation ---------- */
html[data-color] .nav-pills .nav-link.active,
html[data-color] .nav-tabs.nav-tabs-solid .nav-link.active,
html[data-color] .nav-tabs.nav-tabs-solid > li > a.active {
  background-color: #c1460b;
  border-color: #c1460b;
}
html[data-color] .nav-link.active:not(.nav-pills .nav-link):not(.nav-tabs-solid .nav-link) {
  color: #c1460b;
}
html[data-color] .gridjs-pages button.gridjs-currentPage {
  background-color: #c1460b !important;
  border-color: #c1460b !important;
}
/* Active sidebar entries sit on the template's grey (#E8E9EA), where the
   primary shade gives 4.2:1; this one gives 4.6:1. */
html[data-color] .sidebar .sidebar-menu > ul > li ul li a.active,
html[data-color] .sidebar .sidebar-menu > ul > li ul > li.active a.subdrop,
html[data-color] .sidebar .sidebar-menu > ul > li ul > li.active a.subdrop span,
html[data-color] .sidebar .sidebar-menu > ul li .submenu > ul li a.active,
html[data-color] .sidebar .nav-link.active {
  color: #b5420a;
}
html[data-color] .settings-list.list-group a.active,
html[data-color] .nav-tabs.nav-tabs-bottom li a.active {
  color: #c1460b;
}
html[data-color] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active,
html[data-color] .dataTables_paginate .pagination li.active a.page-link {
  background-color: #c1460b;
  border-color: #c1460b;
}

/* ---------- Smallest text ---------- */
/* Section labels in the sidebar (MAIN MENU…): 10px grey #9CA3AF was 2.5:1. */
html[data-color] .sidebar .sidebar-menu > ul li.menu-title {
  font-size: 11px;
  color: #6b7280;
}
/* Status badges were 10px (9.75px inside 13px text). */
html[data-color] .badge,
html[data-color] .badge.badge-xs {
  font-size: 11px;
}
html[data-color] .badge.badge-md {
  font-size: 12px;
}
/* Bootstrap's .875em gave 12.25px helper text under fields. */
html[data-color] .form-text {
  font-size: 12px;
}
html[data-color] .header kbd {
  font-size: 11px;
}

/* ---------- Card refresh (c/pwchronoDashboardRefresh) ---------- */
/* A card whose filter changed keeps its content, dimmed, under a spinner
   while it reloads; the rest of the dashboard stays as it is. */
[data-refreshing] {
  position: relative;
}
[data-refreshing] > * {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
[data-refreshing]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid #f26522;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pwchrono-card-spin 0.75s linear infinite;
}
@keyframes pwchrono-card-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-refreshing]::after {
    animation-duration: 2.5s;
  }
}

/* ---------- Card filter control ---------- */
/* The icon sits inside a bordered select, like the template's period
   buttons, instead of floating beside a bare select. */
.pw-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pw-filter > .ti {
  position: absolute;
  left: 10px;
  z-index: 1;
  color: #c1460b;
  font-size: 15px;
  pointer-events: none;
}
html[data-color] .pw-filter > .form-select {
  width: auto;
  min-height: 34px;
  padding-left: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  color: #111827;
  font-size: 13px;
  font-weight: 500;
}
html[data-color] .pw-filter > .form-select:hover,
html[data-color] .pw-filter > .form-select:focus {
  border-color: #c1460b;
}

/* ---------- Stats cards ---------- */
/* Stats cards keep a 20px inner margin at every screen width (the
   template's later rules drop card bodies to 16px). */
html[data-color] .pw-stats .card .card-body,
html[data-color] [data-tiles] .card .card-body {
  padding: 20px;
}

/* ---------- Compact type: Admin Dashboard and Profile page ---------- */
/* Card headings in Roboto 14px; everything else inside cards in Poppins
   12px. Headline numbers (.pw-value) keep their size, in Poppins. */
html[data-color] .pw-type-compact .card {
  font-family: "Poppins", sans-serif;
}
html[data-color]
  .pw-type-compact
  .card
  :is(p, span, a, li, td, th, dt, dd, label, small, summary, .btn, .badge, .form-control, .form-select):not(.ti) {
  font-size: 12px !important;
}
html[data-color]
  .pw-type-compact
  .card
  :is(h1, h2, h3, h4, h5, h6, .card-title):not(.pw-value) {
  font-family: "Roboto", sans-serif;
  font-size: 14px !important;
}
html[data-color] .pw-type-compact .card .pw-value {
  font-family: "Poppins", sans-serif;
}

/* ---------- Brand mark (static resource pwchrono_brand_mark) ---------- */
.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-mark-lg {
  width: 40px;
  height: 40px;
}
/* The full logo (mark and name) shows only while the sidebar is expanded;
   collapsed, the template's .logo-small shows the mark alone. */
html[data-color] body:not(.mini-sidebar) .sidebar .sidebar-logo .logo-normal,
html[data-color]
  body.mini-sidebar.expand-menu
  .sidebar
  .sidebar-logo
  .logo-normal {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111827;
}

/* ---------- Header actions ---------- */
/* The template's 16px icons in 32px buttons read small at desktop size. */
html[data-color] .header .header-user .user-menu .btn-menubar {
  width: 38px;
  height: 38px;
}
html[data-color] .header .header-user .user-menu .btn-menubar > .ti {
  font-size: 20px;
}
html[data-color] .header .profile-dropdown .avatar {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

/* ---------- Tables that must fit their card ---------- */
/* Dashboard detail tables in narrow cards wrap instead of scrolling
   sideways; long names break between words. */
html[data-color] .pw-fit-table th,
html[data-color] .pw-fit-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
/* Wide registers wrap on desktop so they fit their card; on smaller screens
   they keep one line per cell and scroll sideways inside the card. */
@media (min-width: 992px) {
  html[data-color] .pw-fit-wide th,
  html[data-color] .pw-fit-wide td {
    white-space: normal;
  }
}
/* List pages (Grid.js): on laptop and desktop widths long cells wrap so the
   list fits its card; tablets and phones keep one line and scroll. */
@media (min-width: 1200px) {
  html[data-color] td.gridjs-td {
    white-space: normal;
  }
}