/* =========================================================
   Rabbit Workspace OS v127 — Attendance color accents
   Visual-only enhancement for the attendance module.
   ========================================================= */

/* Hero: subtle blue/teal atmosphere, without altering layout. */
#attendance.view.active .rat-hero{
  border:1px solid rgba(82,132,226,.20) !important;
  background:
    radial-gradient(circle at 7% 0%,rgba(64,128,235,.16),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(39,190,160,.14),transparent 32%),
    var(--neo-surface,#e8edf3) !important;
}

#attendance.view.active .rat-kicker{
  color:#235fc7 !important;
  background:rgba(239,246,255,.88) !important;
  border:1px solid rgba(59,130,246,.18) !important;
}

/* Status/control panel gains a clearer visual hierarchy. */
#attendance.view.active .rat-punch-card{
  border:1px solid rgba(103,135,181,.16) !important;
  background:
    linear-gradient(145deg,rgba(244,248,253,.90),rgba(225,233,242,.92)) !important;
}

#attendance.view.active .rat-hero.is-in .rat-punch-card{
  border-color:rgba(34,197,94,.26) !important;
  background:
    linear-gradient(145deg,rgba(235,253,244,.94),rgba(222,244,235,.92)) !important;
}

/* Primary action: blue, with white icon/text. */
#attendance.view.active .rat-punch-actions button.rat-in,
#attendance.view.active .rat-punch-actions .rat-in{
  color:#fff !important;
  background:linear-gradient(135deg,#2f80ed 0%,#2563eb 55%,#1d4ed8 100%) !important;
  border:1px solid rgba(29,78,216,.62) !important;
  box-shadow:
    0 12px 24px rgba(37,99,235,.24),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
  text-shadow:0 1px 2px rgba(15,23,42,.20) !important;
}

/* Exit action: red, with white icon/text. */
#attendance.view.active .rat-punch-actions button.rat-out,
#attendance.view.active .rat-punch-actions .rat-out{
  color:#fff !important;
  background:linear-gradient(135deg,#ef5f6c 0%,#dc3545 55%,#bd2436 100%) !important;
  border:1px solid rgba(185,28,28,.56) !important;
  box-shadow:
    0 12px 24px rgba(220,53,69,.22),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  text-shadow:0 1px 2px rgba(69,10,10,.20) !important;
}

#attendance.view.active .rat-punch-actions button.rat-in b,
#attendance.view.active .rat-punch-actions button.rat-in span,
#attendance.view.active .rat-punch-actions button.rat-out b,
#attendance.view.active .rat-punch-actions button.rat-out span{
  color:#fff !important;
  opacity:1 !important;
}

#attendance.view.active .rat-punch-actions button.rat-in:hover:not(:disabled){
  background:linear-gradient(135deg,#3b8cf5 0%,#2b6df0 55%,#2155c9 100%) !important;
  box-shadow:0 15px 28px rgba(37,99,235,.30),inset 0 1px 0 rgba(255,255,255,.34) !important;
}

#attendance.view.active .rat-punch-actions button.rat-out:hover:not(:disabled){
  background:linear-gradient(135deg,#f06b76 0%,#e13e4d 55%,#c62b3c 100%) !important;
  box-shadow:0 15px 28px rgba(220,53,69,.28),inset 0 1px 0 rgba(255,255,255,.32) !important;
}

#attendance.view.active .rat-punch-actions button.rat-in:active:not(:disabled),
#attendance.view.active .rat-punch-actions button.rat-out:active:not(:disabled){
  transform:translateY(1px) !important;
  box-shadow:inset 4px 4px 9px rgba(15,23,42,.25),inset -3px -3px 8px rgba(255,255,255,.14) !important;
}

/* Disabled buttons retain their semantic color, but are clearly inactive. */
#attendance.view.active .rat-punch-actions button.rat-in:disabled,
#attendance.view.active .rat-punch-actions button.rat-out:disabled{
  color:rgba(255,255,255,.94) !important;
  opacity:.48 !important;
  filter:saturate(.72) !important;
  box-shadow:none !important;
}

/* KPI cards: discreet colored accents to make the page less monochrome. */
#attendance.view.active .rat-hero-stats article{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(116,138,166,.14) !important;
}

#attendance.view.active .rat-hero-stats article::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:999px;
  background:#2f80ed;
}

#attendance.view.active .rat-hero-stats article:nth-child(2)::before{background:#7c6cf2}
#attendance.view.active .rat-hero-stats article:nth-child(3)::before{background:#23b78f}

#attendance.view.active .rat-hero-stats article:nth-child(1){background:linear-gradient(145deg,rgba(239,246,255,.86),rgba(229,237,247,.90)) !important}
#attendance.view.active .rat-hero-stats article:nth-child(2){background:linear-gradient(145deg,rgba(245,243,255,.86),rgba(232,232,245,.90)) !important}
#attendance.view.active .rat-hero-stats article:nth-child(3){background:linear-gradient(145deg,rgba(236,253,245,.86),rgba(225,241,236,.90)) !important}

#attendance.view.active .rat-panel-head span,
#attendance.view.active .rat-day header strong{
  color:#2563eb !important;
}

/* Mobile: maintain strong colors and comfortable touch targets. */
@media(max-width:520px){
  #attendance.view.active .rat-punch-actions button.rat-in,
  #attendance.view.active .rat-punch-actions button.rat-out{
    min-height:58px !important;
    font-size:12px !important;
  }
}

/* Dark mode keeps text white and semantic colors recognisable. */
body[data-rabbit-theme="dark"] #attendance.view.active .rat-punch-actions button.rat-in,
body.rabbit-theme-dark #attendance.view.active .rat-punch-actions button.rat-in{
  background:linear-gradient(135deg,#3788ef,#245fce) !important;
}
body[data-rabbit-theme="dark"] #attendance.view.active .rat-punch-actions button.rat-out,
body.rabbit-theme-dark #attendance.view.active .rat-punch-actions button.rat-out{
  background:linear-gradient(135deg,#eb6672,#bd2b3d) !important;
}