:root {
  --sidebar-bg: #f0f4ff;
  --sidebar-text: #000000;
  --sidebar-active: #f5821f;
  --breadcrumb-text: #000000;
  --breadcrumb-active: #21336d;
}

/* =====================================
   E-LIBRARY LAYOUT
===================================== */

body.elibrary-layout {
  overflow-x: hidden;
  background: #f8fafc;
}

.elibrary-wrapper {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 140px);
  align-items: stretch; /* 🔑 force equal height */
}

/* =====================================
   E-LIBRARY SIDEBAR
===================================== */

.elibrary-open-toggle {
  background: transparent;
  border: none;
  font-size: 18px;
  margin-right: 10px;
  cursor: pointer;
}

.elibrary-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.elibrary-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--sidebar-text);
}

.elibrary-sidebar-toggle {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.elibrary-sidebar {
  width: 260px;
  background: var(--sidebar-bg);
  padding: 16px 12px;
  border-right: 1px solid #e2e8f0;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
}

/* Remove bullets everywhere */
.elibrary-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Main vertical stack */
.elibrary-sidebar .main-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elibrary-sidebar .menu-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.elibrary-sidebar .menu-icon.small {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.elibrary-sidebar-toggle {
  background: transparent;
  border: none;
  font-size: 20px;
  margin-right: 8px;
}

/* =====================================
   SECTION TITLE
===================================== */

.elibrary-sidebar .menu-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 8px 10px 10px;
}

/* =====================================
   ALL LINKS (BASE)
===================================== */

.elibrary-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 30px 8px 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 6px;
  position: relative;
  transition: all 250ms ease;
}

.elibrary-sidebar a:hover {
  color: var(--sidebar-active);
  background: rgba(245, 130, 31, 0.12);
}

.elibrary-sidebar li.active > a {
  color: var(--sidebar-active);
  font-weight: 500;
}

.elibrary-sidebar li.active > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--sidebar-active);
  border-radius: 0 4px 4px 0;
}

/* =====================================
   DROPDOWN CARET (SERVICES STYLE)
===================================== */

.elibrary-sidebar .dropdown > a::after {
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  font-size: 12px;
  font-weight: 400;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 250ms ease, color 250ms ease;
  color: var(--sidebar-text);
}

.elibrary-sidebar .dropdown > a[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
  color: var(--sidebar-active);
}

/* =====================================
   LEVEL 2 – CHAPTERS (ONLY)
===================================== */

.elibrary-sidebar > ul > li > ul {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 2px solid rgba(33, 51, 109, 0.35);
}

.elibrary-sidebar > ul > li > ul > li > a {
  font-size: 13.5px;
  padding-left: 0;
  gap: 6px;
}

/* Chapter hover = text only */
.elibrary-sidebar > ul > li > ul > li > a:hover {
  background: transparent;
  color: var(--sidebar-active);
}

/* Hide any icon if accidentally rendered */
.elibrary-sidebar > ul > li > ul > li > a img {
  display: none !important;
}

/* Hyphen marker for chapters */
.elibrary-sidebar > ul > li > ul > li > a span::before {
  content: "–";
  margin-right: 6px;
  color: #000;
  font-weight: 400;
}

/* Chapter active = text only */
.elibrary-sidebar > ul > li > ul > li.active > a {
  background: transparent;
  color: var(--sidebar-active);
  font-weight: 500;
}

/* Remove left active bar for chapters */
.elibrary-sidebar > ul > li > ul > li.active > a::before {
  content: none !important;
}

/* =====================================
   MAIN CONTENT
===================================== */

.elibrary-content {
  flex: 1;
  min-width: 0;
  padding: 24px;
  background: #ffffff;
  overflow-x: hidden;
}

/* Prevent footer overlap */
footer {
  position: relative;
  z-index: 1;
}

/* ===============================
   E-LIBRARY BREADCRUMB + SEARCH
================================ */

/* Wrapper for breadcrumb + search */
.elibrary-breadcrumb-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* ===============================
   E-LIBRARY BREADCRUMB (WITH SEARCH INSIDE)
================================ */

.elibrary-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 🔑 left breadcrumb, right search */
  gap: 10px;
  width: 100%;
  background: #f3f6fc;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;

  /* subtle enterprise border */
  border: 1px solid rgba(30, 64, 175, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}

/* ===============================
   BREADCRUMB TEXT
================================ */

.elibrary-breadcrumb .breadcrumb {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  background: transparent;
  flex-wrap: wrap;
}

.elibrary-breadcrumb .breadcrumb-item {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
}

.elibrary-breadcrumb .breadcrumb-item a {
  color: var(--breadcrumb-text);
  text-decoration: none;
}

.elibrary-breadcrumb .breadcrumb-item a:hover {
  color: var(--breadcrumb-active);
  text-decoration: underline;
}

.elibrary-breadcrumb .breadcrumb-item.active {
  color: var(--breadcrumb-active);
  font-weight: 600;
}

/* Separator */
.elibrary-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #94a3b8;
  padding: 0 5px;
}

/* ===============================
   GLOBAL SEARCH (INSIDE PILL)
================================ */

.elibrary-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(30, 64, 175, 0.15);
}

.elibrary-search-pill i {
  font-size: 15px;
  color: #64748b;
}

.elibrary-search-pill input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  width: 180px;
  color: #334155;
}

.elibrary-search-pill input::placeholder {
  color: #94a3b8;
}

/* Focus */
.elibrary-search-pill:focus-within {
  border-color: rgba(30, 64, 175, 0.4);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.08);
}

/* FAQ header: title left, search right */
.elibrary-faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* Prevent title wrapping unnecessarily */
.elibrary-faq-title {
  margin: 0;
  white-space: nowrap;
}

.elibrary-no-faq-result {
  margin-top: 16px;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 8px;
}

/* ===============================
  E-LIBRARY FAQ – NEW DESIGN
================================ */

.elibrary-faq-title {
  font-size: 28px;
  font-weight: 600;
  margin: 10px 0 20px;
  color: #21336d;
}

/* Outer container */
.elibrary-faq-box {
  background: #ffffff;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid #e4ebff;
  position: relative;
}

/* Scroll container */
.elibrary-faq-box .accrodion-grp {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
  scroll-behavior: smooth;
}

/* FAQ card */
.elibrary-faq-accrodion .accrodion {
  background: #f2f5fb; /* light card */
  border-radius: 14px;
  border-left: 5px solid transparent;

  /* 🔑 controlled shadow */
  box-shadow: 0 2px 6px rgba(33, 51, 109, 0.08),
    0 1px 2px rgba(33, 51, 109, 0.06);

  transition: all 0.25s ease;
}

/* Space between cards */
.elibrary-faq-accrodion .accrodion + .accrodion {
  margin-top: 16px;
}

/* Hover effect */
.elibrary-faq-accrodion .accrodion:hover {
  transform: translateY(-2px);
}

/* Active card */
.elibrary-faq-accrodion .accrodion.active {
  background: #ffffff;
  border-left: 5px solid #f5821f; /* left accent */
  box-shadow: inset 0 0 0 1px #e4ebff; /* ✅ border shadow */
}

/* Title */
.elibrary-faq-accrodion .accrodion-title {
  padding: 16px 44px 16px 20px;
  cursor: pointer;
  position: relative;
}

.elibrary-faq-accrodion .accrodion-title h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #21336d;
}

/* Arrow icon */
.elibrary-faq-accrodion .accrodion-title h4::before {
  content: "\f105";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #f5821f;
  transition: transform 0.3s ease;
}

/* Active arrow */
.elibrary-faq-accrodion .accrodion.active .accrodion-title h4::before {
  content: "\f107";
  color: #21336d;
}

/* Content */
.elibrary-faq-accrodion .accrodion-content {
  padding: 0 20px 18px;
}

.elibrary-faq-accrodion .accrodion-content p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #444;
}

/* Scrollbar */
.elibrary-faq-box .accrodion-grp::-webkit-scrollbar {
  width: 6px;
}
.elibrary-faq-box .accrodion-grp::-webkit-scrollbar-thumb {
  background: #c7d2ff;
  border-radius: 4px;
}
.elibrary-faq-box .accrodion-grp::-webkit-scrollbar-track {
  background: transparent;
}

.elibrary-faq-accrodion .accrodion:active,
.elibrary-faq-accrodion .accrodion-title:active {
  background-color: inherit;
}

/* FINAL FIX: remove black line during mouse click */
.elibrary-faq-accrodion .accrodion:active {
  box-shadow: none !important;
}

/* =====================================================
   E-LIBRARY – FILTER + ACCORDION + GRID (LIST AND CALENDAER VIEW)
===================================================== */

/* ===============================
  HOLIDAY FILTER CARD
================================ */

/* .holiday-filter-header {
  font-size: 13px;
  background: #f8fbff;
  border-bottom: 1px solid #e2e8f0;
} */

.holiday-filter-wrapper {
  padding: 14px;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
  margin-bottom: 16px;
}

.holiday-filter-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 14px;
}

.holiday-filter-row {
  display: flex;
  align-items: flex-end;
  column-gap: 12px;
}

.holiday-filter-group {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  flex: 1 1 50%;
}

.holiday-filter-group.holiday-filter-action {
  flex: 0 0 auto;
}

.holiday-filter-group label {
  margin-bottom: 6px;
}

.holiday-filter-group select {
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #cbd5f5;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  box-shadow: none;
}

.holiday-filter-action button {
  height: 34px;
  padding: 0 18px;
  background: #21336d;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

/* ===============================
  HOLIDAY ACTION BAR LAYOUT
================================ */

.holiday-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
  background: #f8fbff;
  border-bottom: 1px solid #e2e8f0;
}

/* LEFT LINKS */
.holiday-actions-left a {
  margin-right: 14px;
  color: #21336d;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex; /* ✅ aligns icon + text */
  align-items: center;
}

/* space between icon and text */
.holiday-actions-left a i {
  margin-right: 6px; /* ✅ THIS fixes +Expand issue */
}

.holiday-actions-left a:hover {
  text-decoration: underline;
}

/* RIGHT TOGGLE */
.holiday-actions-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* TOGGLE BUTTON */
.view-toggle {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 20px;
  border: 1px solid #dbe3f0;
  background: #ffffff;
  color: #21336d;
  cursor: pointer;
  transition: all 200ms ease;
}

/* ACTIVE STATE */
.view-toggle.active {
  background: #21336d;
  color: #ffffff;
  border-color: #21336d;
}

/* HOVER */
.view-toggle:hover {
  background: #eef2f8;
}

/* ACTIVE HOVER FIX */
.view-toggle.active:hover {
  background: #21336d;
}

/* ===============================
  HOLIDAY CARD 
================================ */
.holiday-card {
  border: 1px solid #dbe3f0;
  border-radius: 12px;
  overflow: hidden;
}

/* ===============================
   HOLIDAY LIST TOOLBAR
================================ */

.holiday-list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

/* LEFT FILTER GROUP */
.holiday-list-filters {
  display: flex;
  gap: 10px;
}

/* FILTER SELECTS */
.holiday-list-filters select {
  height: 34px;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #dbe3f0;
  background: #ffffff;
  color: #21336d;
}

/* RIGHT META INFO */
.holiday-list-meta {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.holiday-list-meta .separator {
  margin: 0 6px;
}

/* Remove default outline & glow on selects */
.holiday-list-filters select {
  outline: none;
  box-shadow: none;
}

/* =========================================================
  LIST HEADER (TABLE HEADER)
========================================================= */
.holiday-list-header {
  display: flex;
  padding: 12px 14px;
  background: #eef2f7;
  font-weight: 600;
  font-size: 13px;
  border-left: 4px solid #21336d;
  border-bottom: 1px solid #e2e8f0;
}

.holiday-list-header > div:nth-child(1) {
  flex: 0 0 25%;
}
.holiday-list-header > div:nth-child(2) {
  flex: 0 0 40%;
}
.holiday-list-header > div:nth-child(3) {
  flex: 0 0 15%;
}
.holiday-list-header > div:nth-child(4) {
  flex: 0 0 20%;
}

/* =========================================================
  MONTH ACCORDION ROW (LIST VIEW)
========================================================= */
.elibrary-row.month-row {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

/* Month title */
.elibrary-row.month-row .row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* Toggle icon */
.elibrary-row.month-row .toggle-icon {
  width: 18px;
  height: 18px;
  background: #111827;
  color: #ffffff;
  text-align: center;
  line-height: 18px;
  border-radius: 3px;
  font-size: 14px;
}

/* Open state icon */
.elibrary-row.month-row.open .toggle-icon {
  background: #21336d;
}

/* =========================================================
  MONTH CONTENT (LIST CONTAINER)
========================================================= */
.elibrary-row.month-row .row-content {
  display: none; /* Required for slideUp / slideDown */
  background: #ffffff;
}

/* =========================================================
  HOLIDAY ROW (ONE HOLIDAY = ONE ROW)
========================================================= */
.holiday-row {
  display: flex;
  padding: 10px 14px;
  font-size: 13px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

.holiday-row > div:nth-child(1) {
  flex: 0 0 25%;
}
.holiday-row > div:nth-child(2) {
  flex: 0 0 40%;
}
.holiday-row > div:nth-child(3) {
  flex: 0 0 15%;
}
.holiday-row > div:nth-child(4) {
  flex: 0 0 20%;
}

/* Zebra striping like screenshot */
.holiday-row:nth-child(odd) {
  background: #e6f7f7;
}

/* =========================================================
  LIST VIEW SCROLL
========================================================= */

/* Default: NO scroll */
.holiday-list-view {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

/* Scroll enabled ONLY when data is loaded */
/* SCROLLABLE BODY */
#holidayList {
  max-height: 630px;
  overflow-y: auto;
}

/* Scrollbar styling */
#holidayList::-webkit-scrollbar {
  width: 8px;
}

#holidayList::-webkit-scrollbar-thumb {
  background: #cbd5f5;
  border-radius: 6px;
}

#holidayList::-webkit-scrollbar-track {
  background: #f8fafc;
}

/* ===============================
  MODERN GRID (CALENDAR VIEW)
================================ */

.calendar-card {
  /* border: 1px solid #e5ebf8;
  border-radius: 14px; */
  background: #ffffff;
  padding: 14px;
}

/* HEADER */
.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #dbe3f0;
  background: #ffffff;
  font-size: 18px;
  cursor: pointer;
}

#monthSelect {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #dbe3f0;
}

#yearLabel {
  font-weight: 600;
  color: #21336d;
}

/* WEEK HEADER (NO FLOATING BLOCK) */
.calendar-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 0 0 6px 0;
  padding: 0;
}

.calendar-week-header div {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding: 6px 0;
}

/* GRID */
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 0;
}

/* DAY CARD */
.calendar-days > div {
  height: 140px;            /* 🔒 HARD LOCK */
  max-height: 140px;
  overflow: hidden;         /* ❌ never expand */

  border: 1px solid #cbd0dd;
  border-radius: 14px;
  padding: 8px 10px;
  transition: all 0.2s ease;
}


.calendar-days > div:hover {
  background: #ffffff;
  border-color: #c7d2fe;
  box-shadow: 0 6px 16px rgba(30, 58, 138, 0.12);
}

/* OTHER MONTH */
.calendar-days .other-month {
  opacity: 0.35;
}

/* ===============================
  FESTIVAL DAY – CALENDAR UI
================================ */

/* Festival tag (TOP) */
.day-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.festival-tag {
  background: #f5821f;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 14px;
  display: inline-block;
}

/* Date + Image row */
.festival-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* Normal date (non-festival days) */
.calendar-days .date {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
  background: #eef2ff;
  padding: 4px 8px;
  border-radius: 10px;
  display: inline-block;
}

/* Big bold date (festival days only) */
.calendar-days .festival-day .date {
  font-size: 28px;
  font-weight: 800;
  background: transparent;
  padding: 0;
  line-height: 1;
}

/* Festival image (RIGHT) */
.festival-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #ffffff;
  border: 2px solid rgba(33, 51, 109, 0.25);
}

.festival-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Holiday name pill (BOTTOM) */
.calendar-days .holiday {
  padding: 6px 10px;
  background: rgb(85 236 255 / 39%);
  color: #1e3a8a;
  border-radius: 6px;

  font-size: 12px;
  font-weight: 500;
  max-height: 2.6em;
  line-height: 1.3;

   /* 🔑 HARD CONSTRAINTS */
  white-space: nowrap;        /* ❌ no wrapping */
  overflow: hidden;           /* ❌ no overflow */
  text-overflow: ellipsis;    /* ✅ dots */
  max-width: 100%;            /* stay inside card */

  display: block;             /* needed for ellipsis */
  
  
}

/* Weekday label (hidden by default – desktop) */
.weekday-label {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.calendar-card,
.calendar-days {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================================
   RESPONSIVE – E-LIBRARY HOLIDAYS
   Breakpoints:
   Desktop ≥ 993px
   Tablet  577–992px
   Mobile  ≤ 576px
   Small Mobile ≤ 576px
========================================================= */

/* =========================================================
   DESKTOP (≥ 993px)
========================================================= */
@media (min-width: 993px) {
  .elibrary-open-toggle,
  .elibrary-sidebar-header {
    display: none;
  }

  .elibrary-overlay {
    display: none !important;
  }
}

/* =========================================================
   TABLET & BELOW (≤ 992px)
========================================================= */
@media (max-width: 992px) {
  /* Sidebar slide */
  .elibrary-wrapper {
    display: block;
  }

  .elibrary-sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    background: var(--sidebar-bg);
    z-index: 1050;
    transition: left 0.3s ease;
  }

  .elibrary-sidebar.show {
    left: 0;
  }

  .elibrary-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1040;
  }

  .elibrary-overlay.show {
    display: block;
  }

  /* List view → stacked cards */
  .holiday-list-header {
    display: none;
  }

  .holiday-row {
    display: block;
    padding: 12px 14px;
  }

  .holiday-row > div {
    display: block;
    padding: 2px 0;
    font-size: 13px;
  }

  .holiday-row > div:nth-child(1)::before {
    content: "Date: ";
    font-weight: 600;
  }

  .holiday-row > div:nth-child(2)::before {
    content: "Description: ";
    font-weight: 600;
  }

  .holiday-row > div:nth-child(3)::before {
    content: "Type: ";
    font-weight: 600;
  }

  .holiday-row > div:nth-child(4)::before {
    content: "State: ";
    font-weight: 600;
  }

  /* Calendar */
  .calendar-week-header {
    display: none;
  }

  .calendar-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .weekday-label {
    display: block;
  }

  .calendar-days .day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* =========================================================
   MOBILE (≤ 576px)
========================================================= */
@media (max-width: 576px) {
  /* Safety */
  html,
  body {
    overflow-x: hidden;
  }

  .elibrary-content {
    padding: 10px;
  }

  /* Breadcrumb container */
  .elibrary-breadcrumb {
    display: grid; /* 🔑 FIX: grid avoids ghost rows */
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "toggle search"
      "breadcrumb breadcrumb";
    gap: 8px;
    padding: 10px;
  }

  /* Toggle */
  .elibrary-open-toggle {
    grid-area: toggle;
    align-self: center;
    flex-shrink: 0;
  }

  /* Search */
  .elibrary-search-pill {
    grid-area: search;
    width: 100%;
    margin-top: 0;
    display: flex;
    align-items: center;
  }

  .elibrary-search-pill input {
    width: 100%;
  }

  /* Breadcrumb text */
  .elibrary-breadcrumb .breadcrumb {
    grid-area: breadcrumb;
    width: 100%;
  }

  .elibrary-breadcrumb .breadcrumb-item {
    font-size: 12px;
  }

  .elibrary-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 3px;
  }

  /* Filters */
  .holiday-filter-row {
    flex-direction: column;
    gap: 14px;
  }

  .holiday-filter-group,
  .holiday-filter-action,
  .holiday-filter-action button {
    width: 100%;
  }

  /* Action bar */
  .holiday-actions {
    flex-direction: column;
    gap: 10px;
  }

  .holiday-actions-left {
    justify-content: center;
    gap: 16px;
  }

  .holiday-actions-right {
    width: 100%;
    gap: 6px;
  }

  .holiday-actions-right .view-toggle {
    flex: 1;
  }

  /* Calendar */
  .calendar-header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    gap: 6px;
  }

  #monthSelect {
    width: 100%;
    text-align: center;
  }

  .calendar-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .calendar-days > div {
    padding: 6px;
    border-radius: 12px;
  }

  .weekday-label {
    font-size: 10px;
    white-space: nowrap;
  }

  .calendar-days .festival-day .date {
    font-size: 22px;
  }

  .festival-avatar {
    width: 40px;
    height: 40px;
  }

  .calendar-days .holiday {
    font-size: 11px;
    padding: 4px 6px;
  }

  /* List toolbar (mobile center) */
  .holiday-list-toolbar {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .holiday-list-filters {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .holiday-list-filters select {
    min-width: 120px;
    text-align: center;
  }

  .holiday-list-meta {
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 12px;
  }

  .view-toggle {
    padding: 5px 12px;
  }
}

/* =========================================================
   SMALL MOBILE (≤ 390px / 375px / 360px)
========================================================= */

/* ≤ 390px (base small mobile) */
@media (max-width: 390px) {
  .elibrary-breadcrumb .breadcrumb-item {
    font-size: 12px;
  }

  .elibrary-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 2px;
  }

  .elibrary-open-toggle {
    align-self: center;
  }
  .view-toggle {
    padding: 5px 10px;
  }
}

/* ≤ 360px (extra small) */
@media (max-width: 360px) {
  .elibrary-breadcrumb .breadcrumb-item {
    font-size: 11px;
  }

  .elibrary-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 2px;
  }

  .view-toggle {
    padding: 5px 7px;
  }
}

/* =========================================================
   TABLET FIX – HOLIDAY NAME NO WRAP
========================================================= */
@media (min-width: 577px) and (max-width: 992px) {
  .calendar-days .holiday {
    font-size: 12px;
  }
}

/* =========================================================
   FILTER – HARD GUARANTEE (ALL SCREENS)
========================================================= */
.holiday-filter-wrapper,
.holiday-filter-row,
.holiday-filter-action {
  visibility: visible;
  opacity: 1;
}

/* ===============================
   HOLIDAY PAGE INTRO
================================ */

.holiday-intro {
  margin-bottom: 20px;
  padding: 14px 18px;
  background: #f8fbff;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
}

/* Main title */
.holiday-intro h1 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 600;
  color: #21336d;
}

/* Section subtitle */
.holiday-intro h4 {
  margin: 14px 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #1e3a8a;
}

/* Paragraph text */
.holiday-intro p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
}

/* Last paragraph spacing cleanup */
.holiday-intro p:last-child {
  margin-bottom: 0;
}

.calendar-days .holiday:active::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  bottom: 110%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 999;
}

/* ===============================
   RESPONSIVE TUNING
================================ */

/* Tablet */
@media (max-width: 992px) {
  .holiday-intro {
    padding: 12px 16px;
  }

  .holiday-intro h1 {
    font-size: 22px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .holiday-intro {
    padding: 12px;
  }

  .holiday-intro h1 {
    font-size: 20px;
  }

  .holiday-intro h4 {
    font-size: 14px;
  }

  .holiday-intro p {
    font-size: 13px;
  }
}