/* ============================================================
   Holidays Table v2 — Frontend Styles
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
	--ht-primary:      #2271b1;
	--ht-primary-dark: #135e96;
	--ht-today-bg:     #fff8e1;
	--ht-today-border: #f59e0b;
	--ht-today-text:   #92400e;
	--ht-next-bg:      #f0fff4;
	--ht-next-border:  #22c55e;
	--ht-next-text:    #14532d;
	--ht-past-color:   #aaa;
	--ht-radius:       8px;
	--ht-shadow:       0 2px 14px rgba(0,0,0,.08);
	--ht-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.ht-wrapper {
	font-family: var(--ht-font);
	margin: 1.5rem 0;
}
.ht-wrapper.ht-rtl { direction: rtl; text-align: right; }

.ht-title {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 1rem;
	color: #1a1a1a;
}

/* ── Scroll container ───────────────────────────────────────── */
.ht-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-shadow);
}

/* ── Table ──────────────────────────────────────────────────── */
.ht-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: .93rem;
}

.ht-table thead tr {
	background: var(--ht-primary);
	color: #fff;
}
.ht-table thead th {
	padding: .75rem 1rem;
	text-align: left;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}
.ht-rtl .ht-table thead th { text-align: right; }

.ht-table tbody tr {
	border-bottom: 1px solid #eef0f2;
	transition: background .12s;
}
.ht-table tbody tr:last-child { border-bottom: none; }
.ht-table tbody tr:hover { background: #f5f9ff; }

.ht-table td {
	padding: .65rem 1rem;
	vertical-align: middle;
}

/* ── Column styles ──────────────────────────────────────────── */
.ht-col-date      { white-space: nowrap; font-weight: 500; color: #374151; }
.ht-col-name      { font-weight: 500; }
.ht-col-day       { color: #6b7280; font-style: italic; white-space: nowrap; }
.ht-col-remaining { text-align: center; font-weight: 600; white-space: nowrap; }

/* ── Holiday links ──────────────────────────────────────────── */
.ht-holiday-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(0,0,0,.25);
	text-underline-offset: 2px;
	transition: color .15s, text-decoration-color .15s;
}
.ht-holiday-link:hover {
	color: var(--ht-primary);
	text-decoration-color: var(--ht-primary);
}
/* Link icon hint */
.ht-holiday-link::after {
	content: " ↗";
	font-size: .7em;
	opacity: .55;
	vertical-align: super;
}

/* ── Row states ─────────────────────────────────────────────── */
.ht-row--past td { color: var(--ht-past-color); }
.ht-row--past .ht-col-name { text-decoration: line-through; }
.ht-row--past .ht-holiday-link { color: var(--ht-past-color); }

.ht-row--today {
	background: var(--ht-today-bg) !important;
	border-left: 4px solid var(--ht-today-border);
}
.ht-row--today td { color: var(--ht-today-text); }
.ht-rtl .ht-row--today { border-left: none; border-right: 4px solid var(--ht-today-border); }

.ht-row--next {
	background: var(--ht-next-bg) !important;
	border-left: 4px solid var(--ht-next-border);
}
.ht-row--next td { color: var(--ht-next-text); }
.ht-rtl .ht-row--next { border-left: none; border-right: 4px solid var(--ht-next-border); }

/* ── Badges ─────────────────────────────────────────────────── */
.ht-badge {
	margin-left: .35rem;
	color: #f59e0b;
	font-size: .8rem;
}
.ht-rtl .ht-badge { margin-left: 0; margin-right: .35rem; }

.ht-today-badge {
	display: inline-block;
	padding: .18rem .6rem;
	background: #f59e0b;
	color: #fff;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.ht-past-dash { color: #d1d5db; }

/* ── Legend ─────────────────────────────────────────────────── */
.ht-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: .8rem;
	font-size: .8rem;
	color: #6b7280;
}
.ht-legend-item { display: flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border-radius: 4px; }
.ht-legend-item.ht-row--today { background: var(--ht-today-bg); color: var(--ht-today-text); }
.ht-legend-item.ht-row--next  { background: var(--ht-next-bg);  color: var(--ht-next-text);  }
.ht-legend-item.ht-row--past  { color: var(--ht-past-color); }

/* ── Error / empty ──────────────────────────────────────────── */
.ht-error { color: #b91c1c; font-style: italic; }
.ht-empty { color: #6b7280; font-style: italic; }

/* ── Dark mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.ht-table           { background: #1e1e2e; color: #e0e0e0; }
	.ht-table thead tr  { background: #1a4a7a; }
	.ht-table tbody tr  { border-bottom-color: #2d2d3e; }
	.ht-table tbody tr:hover { background: #252540; }
	.ht-col-date        { color: #cbd5e1; }
	.ht-col-day         { color: #94a3b8; }
	.ht-row--today      { background: #2d2500 !important; border-left-color: #f59e0b; }
	.ht-row--today td   { color: #fcd34d; }
	.ht-row--next       { background: #0d2d1a !important; border-left-color: #22c55e; }
	.ht-row--next td    { color: #86efac; }
	.ht-title           { color: #e2e8f0; }
	.ht-holiday-link    { text-decoration-color: rgba(255,255,255,.25); }
	.ht-holiday-link:hover { color: #60a5fa; text-decoration-color: #60a5fa; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
	.ht-table td, .ht-table th { padding: .5rem .65rem; font-size: .83rem; }
	.ht-title { font-size: 1.1rem; }
	.ht-col-day { display: none; }
}