/* ===== Holidays Tool Styles =====
   Reuses style.css (header, hero, content section, footer) and timer.css
   (breadcrumb palette). This file holds Holidays-specific pieces:
   card wrapper, country dropdown, year tabs, holidays table. Layout mirrors
   the Age Calculator card so the tool sits naturally in the same family. */

/* ===== Hero spacing ===== */
.hero:has(.hol-card) {
  padding-top: 14vh;
  padding-bottom: 80px;
  justify-content: flex-start;
}

/* ===== Card wrapper =====
   Same dark rounded card language as the Age Calculator + Pomodoro tools so
   the Holidays page visually belongs to the same family. */
.hol-card {
  width: 880px;
  max-width: calc(100vw - 40px);
  background-color: var(--bg-secondary);
  border-radius: 10px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .hol-card {
  background-color: #ffffff;
}

[data-theme="red"] .hol-card,
[data-theme="teal"] .hol-card,
[data-theme="blue"] .hol-card,
[data-theme="purple"] .hol-card,
[data-theme="green"] .hol-card,
[data-theme="slate"] .hol-card {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ===== Controls row ===== */
.hol-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
}

.hol-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.1px;
}

/* ===== Country picker ===== */
.hol-country-wrap {
  min-width: 0;
}

.hol-country-field {
  position: relative;
}

.hol-country-input {
  width: 100%;
  height: 38px;
  padding: 0 38px 0 14px;
  background-color: #1e1e1e;
  border: 1px solid #555;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}

.hol-country-input:hover {
  border-color: #777;
}

.hol-country-field.open .hol-country-input,
.hol-country-input:focus-visible {
  border-color: #ffffff;
}

[data-theme="light"] .hol-country-input {
  background-color: #f3f4f6;
  border-color: #d5d8dd;
  color: var(--text-primary);
}

[data-theme="light"] .hol-country-input:hover {
  border-color: #b8bcc4;
}

[data-theme="light"] .hol-country-field.open .hol-country-input,
[data-theme="light"] .hol-country-input:focus-visible {
  border-color: #000000;
}

[data-theme="red"] .hol-country-input,
[data-theme="teal"] .hol-country-input,
[data-theme="blue"] .hol-country-input,
[data-theme="purple"] .hol-country-input,
[data-theme="green"] .hol-country-input,
[data-theme="slate"] .hol-country-input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

[data-theme="red"] .hol-country-input:hover,
[data-theme="teal"] .hol-country-input:hover,
[data-theme="blue"] .hol-country-input:hover,
[data-theme="purple"] .hol-country-input:hover,
[data-theme="green"] .hol-country-input:hover,
[data-theme="slate"] .hol-country-input:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

[data-theme="red"] .hol-country-field.open .hol-country-input,
[data-theme="teal"] .hol-country-field.open .hol-country-input,
[data-theme="blue"] .hol-country-field.open .hol-country-input,
[data-theme="purple"] .hol-country-field.open .hol-country-input,
[data-theme="green"] .hol-country-field.open .hol-country-input,
[data-theme="slate"] .hol-country-field.open .hol-country-input {
  border-color: #ffffff;
}

.hol-country-caret {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-secondary);
  pointer-events: none;
  transition: transform 0.2s, color 0.15s;
}

.hol-country-caret svg {
  width: 14px;
  height: 14px;
}

.hol-country-field.open .hol-country-caret {
  transform: translateY(-50%) rotate(180deg);
  color: var(--text-primary);
}

[data-theme="light"] .hol-country-caret {
  color: #777;
}

[data-theme="red"] .hol-country-caret,
[data-theme="teal"] .hol-country-caret,
[data-theme="blue"] .hol-country-caret,
[data-theme="purple"] .hol-country-caret,
[data-theme="green"] .hol-country-caret,
[data-theme="slate"] .hol-country-caret {
  color: rgba(255, 255, 255, 0.7);
}

/* ===== Country dropdown popup =====
   Same visual language as the alarm-clock sound dropdown / world-clock
   search results: solid dark surface in default + light, translucent
   blur on color themes. */
.hol-country-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background-color: #2a2a2a;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  box-sizing: border-box;
}

.hol-country-field.open .hol-country-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="light"] .hol-country-dropdown {
  background-color: #ffffff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="red"] .hol-country-dropdown,
[data-theme="teal"] .hol-country-dropdown,
[data-theme="blue"] .hol-country-dropdown,
[data-theme="purple"] .hol-country-dropdown,
[data-theme="green"] .hol-country-dropdown,
[data-theme="slate"] .hol-country-dropdown {
  background-color: rgba(0, 0, 0, 0.32);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hol-country-search {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  flex-shrink: 0;
}

.hol-country-search::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.hol-country-search:focus-visible {
  border-color: rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .hol-country-search {
  background-color: #f3f4f6;
  border-color: #d5d8dd;
  color: #000;
}

[data-theme="light"] .hol-country-search::placeholder {
  color: #888;
}

[data-theme="light"] .hol-country-search:focus-visible {
  border-color: #b8bcc4;
}

.hol-country-list {
  flex: 1;
  overflow-y: auto;
  max-height: 240px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.hol-country-list::-webkit-scrollbar {
  width: 4px;
}

.hol-country-list::-webkit-scrollbar-track {
  background: transparent;
}

.hol-country-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

[data-theme="light"] .hol-country-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

.hol-country-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 13px;
  background: none;
  border: none;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.hol-country-item:hover,
.hol-country-item.active {
  background-color: rgba(255, 255, 255, 0.08);
}

.hol-country-item.selected {
  background-color: rgba(255, 255, 255, 0.14);
  font-weight: 500;
}

[data-theme="light"] .hol-country-item {
  color: #000;
}

[data-theme="light"] .hol-country-item:hover,
[data-theme="light"] .hol-country-item.active {
  background-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .hol-country-item.selected {
  background-color: rgba(0, 0, 0, 0.12);
}

.hol-country-empty {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ===== Year tabs ===== */
.hol-year-wrap {
  min-width: 0;
}

.hol-year-label {
  display: block;
  margin-bottom: 8px;
}

.hol-year-tabs {
  display: inline-flex;
  background-color: #1e1e1e;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 3px;
  height: 38px;
  box-sizing: border-box;
  align-items: stretch;
}

[data-theme="light"] .hol-year-tabs {
  background-color: #f3f4f6;
  border-color: #d5d8dd;
}

[data-theme="red"] .hol-year-tabs,
[data-theme="teal"] .hol-year-tabs,
[data-theme="blue"] .hol-year-tabs,
[data-theme="purple"] .hol-year-tabs,
[data-theme="green"] .hol-year-tabs,
[data-theme="slate"] .hol-year-tabs {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.hol-year-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0 14px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.hol-year-tab:hover {
  color: var(--text-primary);
}

/* Active year tab uses the same ocean palette as the World Clock map +
   the holidays table header, so the controls and table read as a family. */
.hol-year-tab.active {
  background-color: #565656;
  color: #ffffff;
}

[data-theme="light"] .hol-year-tab.active {
  background-color: #2c68b8;
  color: #ffffff;
}

[data-theme="red"] .hol-year-tab.active {
  background-color: #7a3333;
  color: #ffffff;
}

[data-theme="teal"] .hol-year-tab.active {
  background-color: #1d5155;
  color: #ffffff;
}

[data-theme="blue"] .hol-year-tab.active {
  background-color: #214a69;
  color: #ffffff;
}

[data-theme="purple"] .hol-year-tab.active {
  background-color: #4c3560;
  color: #ffffff;
}

[data-theme="green"] .hol-year-tab.active {
  background-color: #335537;
  color: #ffffff;
}

[data-theme="slate"] .hol-year-tab.active {
  background-color: #364954;
  color: #ffffff;
}

/* ===== Holidays table =====
   Visual language mirrors .lap-table from style.css (the stopwatch lap
   results) so the table feels native to the project. */
.hol-table-wrap {
  width: 100%;
  position: relative;
  margin-top: 4px;
}

.hol-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

/* Same approach as .lap-table in style.css: thead is its own block, tbody
   is a scrollable block, and each row is `display: table` with
   table-layout: fixed so columns line up between header and body. The
   header now picks up the ocean palette from the World Clock map so the
   table reads as part of the same visual family across themes. */
.hol-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: #565656;
  border-radius: 8px 8px 0 0;
}

.hol-table thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.hol-table th {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  padding: 18px 22px;
  text-align: left;
  background-color: #565656;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

[data-theme="light"] .hol-table th,
[data-theme="red"] .hol-table th,
[data-theme="teal"] .hol-table th,
[data-theme="blue"] .hol-table th,
[data-theme="purple"] .hol-table th,
[data-theme="green"] .hol-table th,
[data-theme="slate"] .hol-table th {
  color: #ffffff;
}

[data-theme="light"] .hol-table thead,
[data-theme="light"] .hol-table th {
  background-color: #2c68b8;
}

[data-theme="red"] .hol-table thead,
[data-theme="red"] .hol-table th {
  background-color: #7a3333;
}

[data-theme="teal"] .hol-table thead,
[data-theme="teal"] .hol-table th {
  background-color: #1d5155;
}

[data-theme="blue"] .hol-table thead,
[data-theme="blue"] .hol-table th {
  background-color: #214a69;
}

[data-theme="purple"] .hol-table thead,
[data-theme="purple"] .hol-table th {
  background-color: #4c3560;
}

[data-theme="green"] .hol-table thead,
[data-theme="green"] .hol-table th {
  background-color: #335537;
}

[data-theme="slate"] .hol-table thead,
[data-theme="slate"] .hol-table th {
  background-color: #364954;
}

.hol-table th:first-child {
  border-radius: 8px 0 0 0;
}

.hol-table th:last-child {
  border-radius: 0 8px 0 0;
  text-align: right;
}

.hol-col-date {
  width: 36%;
}

.hol-col-name {
  width: 44%;
}

.hol-col-left {
  width: 20%;
}

.hol-table tbody {
  display: block;
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

[data-theme="light"] .hol-table tbody {
  border-color: #e5e5e5;
}

.hol-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  transition: background-color 0.12s;
  box-sizing: border-box;
}

/* Zebra striping for clearer row separation, matching the reference look. */
.hol-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.025);
}

[data-theme="light"] .hol-table tbody tr:nth-child(even) {
  background-color: #f7f8fa;
}

[data-theme="red"] .hol-table tbody tr:nth-child(even),
[data-theme="teal"] .hol-table tbody tr:nth-child(even),
[data-theme="blue"] .hol-table tbody tr:nth-child(even),
[data-theme="purple"] .hol-table tbody tr:nth-child(even),
[data-theme="green"] .hol-table tbody tr:nth-child(even),
[data-theme="slate"] .hol-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.06);
}

.hol-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .hol-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="red"] .hol-table tbody tr:hover,
[data-theme="teal"] .hol-table tbody tr:hover,
[data-theme="blue"] .hol-table tbody tr:hover,
[data-theme="purple"] .hol-table tbody tr:hover,
[data-theme="green"] .hol-table tbody tr:hover,
[data-theme="slate"] .hol-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hol-table tbody::-webkit-scrollbar {
  width: 5px;
}

.hol-table tbody::-webkit-scrollbar-track {
  background: transparent;
}

.hol-table tbody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
}

[data-theme="light"] .hol-table tbody::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

.hol-table td {
  font-size: 14px;
  color: var(--text-primary);
  padding: 16px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.hol-table tbody tr:first-child td {
  border-top: none;
}

[data-theme="light"] .hol-table td {
  border-top-color: #ececef;
}

[data-theme="red"] .hol-table tbody,
[data-theme="teal"] .hol-table tbody,
[data-theme="blue"] .hol-table tbody,
[data-theme="purple"] .hol-table tbody,
[data-theme="green"] .hol-table tbody,
[data-theme="slate"] .hol-table tbody {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="red"] .hol-table td,
[data-theme="teal"] .hol-table td,
[data-theme="blue"] .hol-table td,
[data-theme="purple"] .hol-table td,
[data-theme="green"] .hol-table td,
[data-theme="slate"] .hol-table td {
  border-top-color: rgba(255, 255, 255, 0.14);
}

[data-theme="red"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="teal"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="blue"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="purple"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="green"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="slate"] .hol-table tbody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
}

.hol-table td:last-child {
  text-align: right;
}

.hol-cell-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Date cell: upcoming rows render the date and weekday in full primary
   text color so the weekday isn't lost against the row background. Past
   rows are dimmed by the .hol-row.past rules below. */
.hol-cell-date-main {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 0.1px;
}

.hol-cell-date-sub {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 400;
  opacity: 0.85;
}

[data-theme="light"] .hol-cell-date-main {
  color: #000000;
}

[data-theme="light"] .hol-cell-date-sub {
  color: #333333;
  opacity: 1;
}

/* Holiday name: the visual anchor of the row. Upcoming holidays pick up
   a highlight that contrasts with each theme: the project's green
   start-button on dark, the table-header blue on light, plain white on
   color themes (so the already-saturated accent backdrop isn't fighting
   another hue). Passed holidays fall back to .hol-row.past below. */
.hol-cell-name {
  font-weight: 700;
  font-size: 15px;
  color: #32d74b;
  word-break: break-word;
  letter-spacing: -0.1px;
}

[data-theme="light"] .hol-cell-name {
  color: #2c68b8;
}

[data-theme="red"] .hol-cell-name,
[data-theme="teal"] .hol-cell-name,
[data-theme="blue"] .hol-cell-name,
[data-theme="purple"] .hol-cell-name,
[data-theme="green"] .hol-cell-name,
[data-theme="slate"] .hol-cell-name {
  color: #ffffff;
}

/* Time-left: tabular-nums keeps digit columns aligned. Default rows show
   "N days" in the regular primary color; the per-second countdown and the
   "Today!" pill below pick up the same highlight as the upcoming-name. */
.hol-cell-left {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
}

[data-theme="light"] .hol-cell-left {
  color: #222;
}

/* Final-day countdown (HH:MM:SS): emphasized so the user feels the
   urgency. Reuses the same highlight palette as the upcoming holiday
   name so the row reads as one accent - except on color themes where
   a warm yellow keeps the countdown from blending into the white
   text/accent backdrop. */
.hol-cell-left.is-countdown {
  font-weight: 700;
  font-size: 14px;
  color: #32d74b;
}

[data-theme="light"] .hol-cell-left.is-countdown {
  color: #2c68b8;
}

[data-theme="red"] .hol-cell-left.is-countdown,
[data-theme="teal"] .hol-cell-left.is-countdown,
[data-theme="blue"] .hol-cell-left.is-countdown,
[data-theme="purple"] .hol-cell-left.is-countdown,
[data-theme="green"] .hol-cell-left.is-countdown,
[data-theme="slate"] .hol-cell-left.is-countdown {
  color: #ffd166;
}

/* "Today!" pill - emphasizes the holiday is right now */
.hol-cell-left.is-today {
  display: inline-block;
  padding: 3px 10px;
  background: #ff5b3e;
  color: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* Past row: drop the upcoming-row highlight entirely. Date, weekday and
   holiday name all fall back to a uniform muted grey - no bold, no warm
   accent - so the eye skims past them and lands on what's still ahead. */
.hol-row.past .hol-cell-date-main,
.hol-row.past .hol-cell-date-sub,
.hol-row.past .hol-cell-name {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  opacity: 1;
}

.hol-row.past .hol-cell-left {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
}

[data-theme="light"] .hol-row.past .hol-cell-date-main,
[data-theme="light"] .hol-row.past .hol-cell-date-sub,
[data-theme="light"] .hol-row.past .hol-cell-name,
[data-theme="light"] .hol-row.past .hol-cell-left {
  color: #aaa;
}

[data-theme="red"] .hol-row.past .hol-cell-date-main,
[data-theme="teal"] .hol-row.past .hol-cell-date-main,
[data-theme="blue"] .hol-row.past .hol-cell-date-main,
[data-theme="purple"] .hol-row.past .hol-cell-date-main,
[data-theme="green"] .hol-row.past .hol-cell-date-main,
[data-theme="slate"] .hol-row.past .hol-cell-date-main,
[data-theme="red"] .hol-row.past .hol-cell-date-sub,
[data-theme="teal"] .hol-row.past .hol-cell-date-sub,
[data-theme="blue"] .hol-row.past .hol-cell-date-sub,
[data-theme="purple"] .hol-row.past .hol-cell-date-sub,
[data-theme="green"] .hol-row.past .hol-cell-date-sub,
[data-theme="slate"] .hol-row.past .hol-cell-date-sub,
[data-theme="red"] .hol-row.past .hol-cell-name,
[data-theme="teal"] .hol-row.past .hol-cell-name,
[data-theme="blue"] .hol-row.past .hol-cell-name,
[data-theme="purple"] .hol-row.past .hol-cell-name,
[data-theme="green"] .hol-row.past .hol-cell-name,
[data-theme="slate"] .hol-row.past .hol-cell-name,
[data-theme="red"] .hol-row.past .hol-cell-left,
[data-theme="teal"] .hol-row.past .hol-cell-left,
[data-theme="blue"] .hol-row.past .hol-cell-left,
[data-theme="purple"] .hol-row.past .hol-cell-left,
[data-theme="green"] .hol-row.past .hol-cell-left,
[data-theme="slate"] .hol-row.past .hol-cell-left {
  color: rgba(255, 255, 255, 0.45);
}

/* Empty state */
.hol-empty {
  padding: 32px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  margin-top: 8px;
}

[data-theme="light"] .hol-empty {
  border-color: rgba(0, 0, 0, 0.12);
}

/* Loading shimmer for first paint */
.hol-loading {
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .hero:has(.hol-card) {
    padding-top: 14vh;
    padding-bottom: 60px;
  }

  .hol-card {
    padding: 20px 16px 18px;
    gap: 16px;
  }

  .hol-controls {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hol-year-tabs {
    width: 100%;
    height: 36px;
  }

  .hol-year-tab {
    flex: 1;
    min-width: 0;
    font-size: 13px;
  }

  /* Mobile table: collapse to a card-style row layout. The Date column
     stacks vertically (date + weekday) and Time Left sits on the right. */
  .hol-table {
    table-layout: auto;
  }

  .hol-table thead {
    display: none;
  }

  .hol-table tbody {
    border: none;
    border-radius: 0;
    max-height: none;
  }

  .hol-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name left"
      "date left";
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hol-table tbody tr:first-child {
    border-top: none;
  }

  [data-theme="light"] .hol-table tbody tr {
    border-top-color: rgba(0, 0, 0, 0.07);
  }

  [data-theme="red"] .hol-table tbody tr,
  [data-theme="teal"] .hol-table tbody tr,
  [data-theme="blue"] .hol-table tbody tr,
  [data-theme="purple"] .hol-table tbody tr,
  [data-theme="green"] .hol-table tbody tr,
  [data-theme="slate"] .hol-table tbody tr {
    border-top-color: rgba(255, 255, 255, 0.14);
  }

  .hol-table tbody tr:hover {
    background-color: transparent;
  }

  .hol-table td {
    padding: 0;
    border: none;
    font-size: 13px;
  }

  .hol-cell-name-wrap {
    grid-area: name;
  }

  .hol-cell-date-wrap {
    grid-area: date;
  }

  .hol-cell-left-wrap {
    grid-area: left;
    align-self: center;
    text-align: right;
  }

  .hol-cell-name {
    font-size: 14px;
    font-weight: 600;
  }

  .hol-cell-date-main {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    display: inline;
  }

  .hol-cell-date-sub {
    font-size: 12px;
    display: inline;
    margin-left: 6px;
  }

  .hol-cell-left {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .hol-card {
    padding: 18px 12px 14px;
  }

  .hol-cell-name {
    font-size: 13px;
  }
}

/* ===== Phase 5.2 - RTL fixes for .hol-table =====
   Mirror text alignment so headers track the body cells (which already follow
   logical start/end via text-align inheritance), swap header corner radii for
   the visually outer edges, and flip the time-left column to the inline-end. */
[dir="rtl"] .hol-table th {
  text-align: right;
}
[dir="rtl"] .hol-table th:first-child {
  border-radius: 0 8px 0 0;
}
[dir="rtl"] .hol-table th:last-child {
  border-radius: 8px 0 0 0;
  text-align: left;
}
[dir="rtl"] .hol-table td:last-child {
  text-align: left;
}

@media (max-width: 768px) {
  /* CSS Grid auto-flips column order in RTL (column 1 moves to the visual
     right), so the existing `name | left` template already lands time-left
     on the visual LEFT in RTL. We just need to flush the time text against
     the outer edge of its cell, and put the date/weekday gap on the
     correct physical side. */
  [dir="rtl"] .hol-cell-left-wrap {
    text-align: left;
  }
  [dir="rtl"] .hol-cell-date-sub {
    margin-left: 0;
    margin-right: 6px;
  }
}