/* THRS V14.21 — Leaves Calendar Luxury Visual Studio
 * Calendar-only visual scope within Leaves. Never modify shared HRCalendar.jsx
 * or calendar data, dates, events, event statuses or other screen calendars. */
html[data-theme="light"] .thrs-page-leaves {
  --lv21-sheet:#ffffff;
  --lv21-sheet-soft:#f6f9fd;
  --lv21-subtle:#eff4fa;
  --lv21-ink:#142f49;
  --lv21-secondary:#536d84;
  --lv21-line:#d9e5f0;
  --lv21-line-soft:#e8eef5;
  --lv21-gold:#b5813b;
  --lv21-gold-light:#f3dbb2;
  --lv21-gold-ink:#825420;
  --lv21-day:#fff;
  --lv21-day-alt:#f5f8fc;
  --lv21-shadow:0 12px 35px rgba(18,47,75,.076),0 3px 8px rgba(18,47,75,.025);
  --lv21-dshadow:0 5px 15px rgba(12,47,76,.065);
  --lv21-shadow-hover:0 10px 23px rgba(15,46,76,.13);
  --lv21-weekday:#143c5b;
  --lv21-weekday2:#0b2a45;
}
html[data-theme="dark"] .thrs-page-leaves {
  --lv21-sheet:#15314a;
  --lv21-sheet-soft:#1b3b56;
  --lv21-subtle:#25455f;
  --lv21-ink:#f0f6ff;
  --lv21-secondary:#c0d0df;
  --lv21-line:#3c5e79;
  --lv21-line-soft:#2b4c66;
  --lv21-gold:#e9bd7d;
  --lv21-gold-light:#f3d8a8;
  --lv21-gold-ink:#f3d6a1;
  --lv21-day:#1b3b55;
  --lv21-day-alt:#17334c;
  --lv21-shadow:0 18px 38px rgba(0,8,22,.22),0 4px 10px rgba(0,8,22,.08);
  --lv21-dshadow:0 5px 15px rgba(0,8,22,.14);
  --lv21-shadow-hover:0 12px 25px rgba(0,8,22,.27);
  --lv21-weekday:#0b263d;
  --lv21-weekday2:#061a2d;
}
/* Parent Card, just for the actual calendar; leave table and Types untouched. */
html[data-theme] .thrs-page-leaves > .thrs-card:has(.thrs-hr-calendar){
  border:1px solid color-mix(in srgb,var(--lv21-gold) 22%,var(--lv21-line)) !important;
  background:var(--lv21-sheet) !important;
  border-radius:20px !important;
  box-shadow:var(--lv21-shadow) !important;
  overflow:hidden !important;
}
html[data-theme] .thrs-page-leaves > .thrs-card:has(.thrs-hr-calendar) > .thrs-card-header{
  border-bottom:1px solid var(--lv21-line) !important;
  background:
    radial-gradient(ellipse at 87% 0%,color-mix(in srgb,var(--lv21-gold) 9%,transparent),transparent 55%),
    linear-gradient(135deg,var(--lv21-sheet),var(--lv21-sheet-soft)) !important;
}
html[data-theme] .thrs-page-leaves > .thrs-card:has(.thrs-hr-calendar) > .thrs-card-header h3{
  color:var(--lv21-ink) !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}
html[data-theme] .thrs-page-leaves .thrs-hr-calendar {
  padding:clamp(12px,2vw,25px) !important;
  border-radius:17px !important;
  border:1px solid var(--lv21-line) !important;
  background:
    radial-gradient(ellipse at 91% 0%,color-mix(in srgb,var(--lv21-gold) 7%,transparent),transparent 35%),
    linear-gradient(148deg,var(--lv21-sheet),var(--lv21-sheet-soft)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--lv21-dshadow) !important;
  color:var(--lv21-ink) !important;
  min-width:0 !important;
}
/* Month heading and year — no replacement of original month names or dates. */
html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar {
  padding:12px 16px !important;
  border:1px solid var(--lv21-line) !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,var(--lv21-sheet),var(--lv21-sheet-soft)) !important;
  box-shadow:0 4px 13px rgba(13,47,77,.035) !important;
  gap:12px 16px !important;
  margin-bottom:16px !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar > div:first-child > div {
  color:var(--lv21-gold-ink) !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
  font-size:10px !important;
  font-weight:850 !important;
  margin-bottom:6px !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar h3 {
  color:var(--lv21-ink) !important;
  font-size:clamp(21px,2vw,27px) !important;
  font-weight:950 !important;
  line-height:1.13 !important;
  letter-spacing:-.045em !important;
  text-wrap:balance;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar button{
  min-width:65px !important;
  min-height:36px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:870 !important;
  transition:background .16s,border-color .16s,box-shadow .16s !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar .thrs-calendar-nav-btn {
  background:var(--lv21-sheet) !important;
  border:1px solid var(--lv21-line) !important;
  color:var(--lv21-ink) !important;
  box-shadow:0 2px 7px rgba(10,40,66,.035) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar .thrs-calendar-today-btn{
  background:linear-gradient(129deg,#214d6c,#092940) !important;
  border:1px solid #c59b63 !important;
  color:#fff !important;
  box-shadow:0 5px 16px rgba(6,39,64,.17) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar button:hover:not(:disabled){
  border-color:var(--lv21-gold) !important;
  box-shadow:0 5px 13px rgba(12,42,67,.115) !important;
  filter:brightness(1.04);
}
/* Calendar color legend uses event-provided colors (no fake status data). */
html[data-theme] .thrs-page-leaves .thrs-calendar-legend-chip {
  background:var(--lv21-sheet) !important;
  border:1px solid var(--lv21-line) !important;
  border-radius:999px !important;
  padding:7px 12px !important;
  color:var(--lv21-secondary) !important;
  font-size:11px !important;
  font-weight:780 !important;
  box-shadow:0 2px 8px rgba(13,43,71,.035) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-legend-chip > span:first-child{
  width:9px !important;
  height:9px !important;
  border-radius:999px !important;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 8%,transparent) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-legend-chip > span:last-child {
  color:var(--lv21-ink) !important;
  font-weight:780 !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-scroll {
  border:1px solid var(--lv21-line) !important;
  border-radius:16px !important;
  background:var(--lv21-sheet-soft) !important;
  padding:12px !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--lv21-gold) transparent;
}
/* Seven weekday labels, a single continuous navy strip of individual cells. */
html[data-theme] .thrs-page-leaves .thrs-calendar-weekday {
  color:#f1f6fb !important;
  background:linear-gradient(145deg,var(--lv21-weekday),var(--lv21-weekday2)) !important;
  border:1px solid color-mix(in srgb,var(--lv21-gold) 29%,#204663) !important;
  border-radius:10px !important;
  padding:11px 5px !important;
  font-size:11px !important;
  font-weight:880 !important;
  letter-spacing:.075em !important;
  text-transform:uppercase !important;
  box-shadow:0 3px 8px rgba(4,30,52,.09) !important;
}
/* Date cells: visually lighter density while retaining all 42 real dates,
   three visible events, +N more, weekend label and click target. */
html[data-theme] .thrs-page-leaves .thrs-calendar-day {
  min-height:109px !important;
  border:1px solid var(--lv21-line) !important;
  border-radius:12px !important;
  background:linear-gradient(152deg,var(--lv21-day),var(--lv21-sheet-soft)) !important;
  color:var(--lv21-ink) !important;
  box-shadow:0 2px 8px rgba(12,45,76,.035) !important;
  padding:10px !important;
  text-align:start !important;
  opacity:1 !important;
  gap:7px !important;
  transition:box-shadow .18s,border-color .18s,background .18s,transform .18s !important;
  position:relative;
  min-width:0 !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day:not(.is-muted):hover {
  transform:translateY(-2px) !important;
  border-color:color-mix(in srgb,var(--lv21-gold) 65%,var(--lv21-line)) !important;
  box-shadow:var(--lv21-shadow-hover) !important;
  background:var(--lv21-sheet) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day.is-muted {
  background:var(--lv21-day-alt) !important;
  border-color:var(--lv21-line-soft) !important;
  opacity:.70 !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day.is-today{
  border:2px solid var(--lv21-gold) !important;
  background:
    radial-gradient(ellipse at 95% 1%,color-mix(in srgb,var(--lv21-gold) 21%,transparent),transparent 76%),
    var(--lv21-day) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lv21-gold) 13%,transparent),var(--lv21-dshadow) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day > div:first-child > span:first-child{
  color:var(--lv21-ink) !important;
  font-size:14px !important;
  font-weight:900 !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:-.02em !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day.is-today > div:first-child > span:first-child {
  color:#15304a !important;
  background:linear-gradient(132deg,#f4dcaf,#dcaf6f) !important;
  border:1px solid #c9a16b !important;
  min-width:28px !important;
  min-height:28px !important;
  border-radius:9px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 9px rgba(112,77,31,.12) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day > div:first-child > span:nth-child(2){
  color:var(--lv21-secondary) !important;
  font-size:9px !important;
  font-weight:820 !important;
  letter-spacing:.01em;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day > div:nth-child(2){
  gap:4px !important;
  width:100% !important;
  min-width:0 !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day > div:nth-child(2) > div[title]{
  max-width:100% !important;
  border-radius:7px !important;
  padding:4px 7px !important;
  border:1px solid color-mix(in srgb,currentColor 27%,var(--lv21-line)) !important;
  background:color-mix(in srgb,currentColor 9%,var(--lv21-day)) !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  box-shadow:inset 2px 0 0 currentColor !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day > div:nth-child(2) > div:not([title]){
  color:var(--lv21-secondary) !important;
  font-size:10px !important;
  font-weight:790 !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-day:focus-visible,
html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar button:focus-visible{
  outline:3px solid var(--lv21-gold) !important;
  outline-offset:2px !important;
}
/* Accurate empty state, no invented event. */
html[data-theme] .thrs-page-leaves .thrs-calendar-empty {
  color:var(--lv21-secondary) !important;
  background:linear-gradient(130deg,var(--lv21-sheet),var(--lv21-sheet-soft)) !important;
  border:1px dashed color-mix(in srgb,var(--lv21-gold) 28%,var(--lv21-line)) !important;
  border-radius:12px !important;
  padding:20px !important;
  font-size:12px !important;
  font-weight:720 !important;
  line-height:1.6 !important;
}
/* Selected day details: actual HRCalendar modal lives under Leaves DOM.
   Color tokens override hardcoded white surfaces and dark-mode text safely. */
html[data-theme] .thrs-page-leaves .thrs-calendar-overlay {
  background:rgba(3,19,36,.67) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  padding:16px !important;
  z-index:1500 !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal {
  background:linear-gradient(149deg,var(--lv21-sheet),var(--lv21-sheet-soft)) !important;
  color:var(--lv21-ink) !important;
  border:1px solid color-mix(in srgb,var(--lv21-gold) 35%,var(--lv21-line)) !important;
  border-radius:20px !important;
  width:100% !important;
  max-width:640px !important;
  max-height:min(82dvh,770px) !important;
  box-shadow:0 28px 85px rgba(0,9,23,.34),inset 0 1px 0 rgba(255,255,255,.065) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:first-child {
  background:linear-gradient(132deg,var(--lv21-sheet),var(--lv21-sheet-soft)) !important;
  border-bottom:1px solid var(--lv21-line) !important;
  padding:19px 22px !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:first-child > div > div {
  color:var(--lv21-secondary) !important;
  font-size:11px !important;
  font-weight:790 !important;
  text-transform:uppercase;
  letter-spacing:.07em !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:first-child h4 {
  color:var(--lv21-ink) !important;
  font-size:21px !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal button.thrs-calendar-nav-btn{
  background:var(--lv21-sheet) !important;
  color:var(--lv21-ink) !important;
  border:1px solid var(--lv21-line) !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:840 !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:nth-child(2) {
  padding:20px !important;
  color:var(--lv21-secondary) !important;
  font-size:12px !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:nth-child(2) > div[style*="border:"]{
  border:1px solid var(--lv21-line) !important;
  background:var(--lv21-sheet) !important;
  border-radius:13px !important;
  padding:14px !important;
  margin-bottom:11px !important;
  box-shadow:0 3px 12px rgba(12,39,67,.045) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:nth-child(2) > div strong {
  color:var(--lv21-ink) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:nth-child(2) > div div[style*="color: rgb(51, 65, 85)"],
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:nth-child(2) > div div[style*="color: #334155"]{
  color:var(--lv21-secondary) !important;
  line-height:1.55 !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:nth-child(2) > div div[style*="color: rgb(100, 116, 139)"],
html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:nth-child(2) > div div[style*="color: #64748b"]{
  color:var(--lv21-secondary) !important;
}
html[data-theme] .thrs-page-leaves .thrs-calendar-modal button:focus-visible{
  outline:2px solid var(--lv21-gold) !important;
  outline-offset:3px !important;
}
/* Narrow viewports: swipe days horizontally *inside* the calendar,
   preserving a legible 7-column matrix and no page-level overflow. */
@media(max-width:900px){
 html[data-theme] .thrs-page-leaves .thrs-calendar-scroll > div {
  min-width:676px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-day {
  min-height:98px !important;
  padding:8px !important;
 }
}
@media(max-width:630px){
 html[data-theme] .thrs-page-leaves .thrs-hr-calendar {
  padding:10px !important;
  border-radius:13px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar{
  padding:13px 12px !important;
  gap:10px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar > div:last-child{
  width:100% !important;
  justify-content:space-between !important;
  gap:6px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar button{
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:38px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-scroll{
  padding:9px !important;
  border-radius:12px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-scroll > div{
  min-width:650px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-day{
  min-height:92px !important;
  border-radius:10px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-day > div:nth-child(2) > div[title]{
  font-size:9px !important;
  padding:4px 5px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-hr-calendar::after{
  content:"Swipe sideways to view all days ↔";
  display:block;
  margin-top:10px;
  font-size:10px;
  color:var(--lv21-secondary);
  text-align:center;
  font-weight:730;
 }
 html[dir="rtl"][data-theme] .thrs-page-leaves .thrs-hr-calendar::after{
  content:"مرّر التقويم أفقيًا لعرض بقية الأيام ↔";
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-modal{
  max-width:100% !important;
  max-height:85dvh !important;
  border-radius:15px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:first-child{
  padding:15px !important;
 }
 html[data-theme] .thrs-page-leaves .thrs-calendar-modal > div:nth-child(2){
  padding:14px !important;
 }
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] .thrs-page-leaves .thrs-calendar-day,
 html[data-theme] .thrs-page-leaves .thrs-calendar-toolbar button{
  transition:none !important;
  transform:none !important;
 }
}