/* Timely Event Calendar – Frontend Styles */

/* ── Variables ─────────────────────────────────────────────────────────── */
.tec-calendar-root {
  --tec-accent:      #4353FF;
  --tec-accent-10:   #4353FF1a;
  --tec-accent-20:   #4353FF33;
  --tec-bg:          #ffffff;
  --tec-bg-2:        #f8f9fc;
  --tec-bg-3:        #eef0f8;
  --tec-border:      #e2e5f0;
  --tec-text:        #1a1d2e;
  --tec-text-2:      #5c6080;
  --tec-text-3:      #9398b0;
  --tec-radius:      10px;
  --tec-shadow:      0 2px 12px rgba(0,0,0,.08);
  --tec-shadow-lg:   0 8px 40px rgba(0,0,0,.16);
  --tec-font:        -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-family:       var(--tec-font);
  color:             var(--tec-text);
  background:        var(--tec-bg);
  border-radius:     var(--tec-radius);
  overflow:          hidden;
  box-shadow:        var(--tec-shadow);
  position:          relative;
}

/* Dark scheme */
.tec-calendar-root[data-scheme="dark"] {
  --tec-bg:     #111827;
  --tec-bg-2:   #1e2538;
  --tec-bg-3:   #283044;
  --tec-border: #2e3650;
  --tec-text:   #e8eaf5;
  --tec-text-2: #9398b0;
  --tec-text-3: #5c6080;
  --tec-shadow: 0 2px 12px rgba(0,0,0,.4);
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Header ────────────────────────────────────────────────────────────── */
.tec-header {
  background:   var(--tec-bg);
  border-bottom: 1px solid var(--tec-border);
  padding:      0 16px 0;
}

/* View tabs */
.tec-view-tabs {
  display:    flex;
  gap:        2px;
  padding:    12px 0 0;
}
.tec-view-tab {
  background:    transparent;
  border:        none;
  padding:       7px 16px;
  border-radius: 6px 6px 0 0;
  cursor:        pointer;
  font-size:     14px;
  font-weight:   500;
  color:         var(--tec-text-2);
  transition:    all .2s;
  border-bottom: 2px solid transparent;
}
.tec-view-tab:hover  { color: var(--tec-text); background: var(--tec-bg-2); }
.tec-view-tab.active { color: var(--tec-accent); border-bottom-color: var(--tec-accent); background: var(--tec-accent-10); }

/* Nav row */
.tec-nav {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     12px 0;
}
.tec-nav-title {
  flex:        1;
  text-align:  center;
  font-size:   18px;
  font-weight: 700;
  margin:      0;
  color:       var(--tec-text);
}
.tec-nav-btn {
  background:    var(--tec-bg-2);
  border:        1px solid var(--tec-border);
  border-radius: 8px;
  width:         36px;
  height:        36px;
  font-size:     22px;
  line-height:   1;
  cursor:        pointer;
  color:         var(--tec-text);
  transition:    all .2s;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.tec-nav-btn:hover { background: var(--tec-accent); color: #fff; border-color: var(--tec-accent); }
.tec-nav-today {
  background:    var(--tec-accent-10);
  color:         var(--tec-accent);
  border:        1px solid var(--tec-accent-20);
  border-radius: 8px;
  padding:       6px 14px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all .2s;
}
.tec-nav-today:hover { background: var(--tec-accent); color: #fff; }

/* ── Category Tabs (horizontal scroll) ─────────────────────────────────── */
.tec-tabs-wrap {
  position:        relative;
  background:      var(--tec-bg-2);
  border-bottom:   1px solid var(--tec-border);
  overflow:        hidden;
}
.tec-tabs {
  display:     flex;
  gap:         6px;
  padding:     10px 48px 10px 16px;
  overflow-x:  auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tec-tabs::-webkit-scrollbar { display: none; }
.tec-tab {
  flex-shrink: 0;
  padding:     6px 14px;
  border-radius: 20px;
  border:      1.5px solid var(--tec-border);
  background:  var(--tec-bg);
  color:       var(--tec-text-2);
  font-size:   13px;
  font-weight: 500;
  cursor:      pointer;
  transition:  all .2s;
  white-space: nowrap;
  scroll-snap-align: start;
}
.tec-tab:hover  { border-color: var(--cat-color, var(--tec-accent)); color: var(--cat-color, var(--tec-accent)); }
.tec-tab.active {
  background:  var(--cat-color, var(--tec-accent));
  border-color: var(--cat-color, var(--tec-accent));
  color:       #fff;
}
.tec-tab-arrow {
  position:    absolute;
  top:         50%;
  transform:   translateY(-50%);
  background:  var(--tec-bg);
  border:      1px solid var(--tec-border);
  border-radius: 50%;
  width:       30px;
  height:      30px;
  font-size:   18px;
  display:     flex;
  align-items: center;
  justify-content: center;
  cursor:      pointer;
  z-index:     2;
  transition:  opacity .2s, background .2s;
  box-shadow:  var(--tec-shadow);
}
.tec-tab-arrow-left  { left:  8px; }
.tec-tab-arrow-right { right: 8px; }
.tec-tab-arrow:hover { background: var(--tec-accent); color: #fff; }

/* ── Canvas ─────────────────────────────────────────────────────────────── */
.tec-canvas { padding: 16px; }

/* Loading */
.tec-loading {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         12px;
  padding:     48px;
  color:       var(--tec-text-2);
  font-size:   14px;
}
.tec-spinner {
  width:  24px;
  height: 24px;
  border: 3px solid var(--tec-border);
  border-top-color: var(--tec-accent);
  border-radius: 50%;
  animation: tec-spin .7s linear infinite;
}
@keyframes tec-spin { to { transform: rotate(360deg); } }

.tec-loader { display:flex; align-items:center; justify-content:center; padding:60px; }
.tec-loader .tec-spinner { width:36px; height:36px; border-width:4px; }

.tec-error, .tec-empty {
  text-align:  center;
  padding:     48px 24px;
  color:       var(--tec-text-2);
}
.tec-empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ── Month Grid ──────────────────────────────────────────────────────────── */
.tec-month-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   1px;
  background:            var(--tec-border);
  border:                1px solid var(--tec-border);
  border-radius:         var(--tec-radius);
  overflow:              hidden;
}
.tec-month-dayname {
  background:   var(--tec-bg-2);
  text-align:   center;
  padding:      8px;
  font-size:    11px;
  font-weight:  700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:        var(--tec-text-2);
}
.tec-month-cell {
  background:   var(--tec-bg);
  min-height:   110px;
  padding:      6px;
  cursor:       default;
  transition:   background .15s;
  position:     relative;
}
.tec-month-cell:hover       { background: var(--tec-bg-2); }
.tec-month-cell.outside     { background: var(--tec-bg-2); }
.tec-month-cell.outside .tec-day-num { color: var(--tec-text-3); }
.tec-month-cell.today       { background: var(--tec-accent-10); }
.tec-day-num {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  width:        26px;
  height:       26px;
  border-radius: 50%;
  font-size:    13px;
  font-weight:  600;
  color:        var(--tec-text);
  cursor:       pointer;
  transition:   all .15s;
}
.today .tec-day-num {
  background:  var(--tec-accent);
  color:       #fff;
}

.tec-event-chip {
  display:       flex;
  align-items:   center;
  gap:           4px;
  background:    var(--ev-color, var(--tec-accent));
  color:         #fff;
  border-radius: 4px;
  padding:       2px 6px;
  font-size:     11px;
  font-weight:   500;
  margin-top:    2px;
  cursor:        pointer;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  transition:    opacity .15s, transform .15s;
}
.tec-event-chip:hover { opacity: .9; transform: translateX(1px); }
.tec-chip-time  { opacity: .8; font-size: 10px; flex-shrink: 0; }
.tec-chip-title { overflow: hidden; text-overflow: ellipsis; }

.tec-more-events {
  font-size:  11px;
  color:      var(--tec-accent);
  font-weight: 600;
  margin-top: 2px;
  cursor:     pointer;
  padding:    1px 4px;
  border-radius: 4px;
}
.tec-more-events:hover { background: var(--tec-accent-10); }

/* ── Week View ──────────────────────────────────────────────────────────── */
.tec-week-wrap { overflow-x: auto; }
.tec-week-header, .tec-week-allday-row {
  display:               grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-bottom:         1px solid var(--tec-border);
}
.tec-week-time-col, .tec-allday-label {
  font-size:   11px;
  color:       var(--tec-text-3);
  text-transform: uppercase;
  font-weight: 600;
  padding:     8px 4px;
  text-align:  center;
}
.tec-week-day-head {
  padding:     8px 4px;
  text-align:  center;
  border-left: 1px solid var(--tec-border);
}
.tec-week-day-head.today .tec-week-daynum {
  background:  var(--tec-accent);
  color:       #fff;
  border-radius: 50%;
  width:       28px;
  height:      28px;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.tec-week-dayname { display:block; font-size:11px; color:var(--tec-text-2); text-transform:uppercase; font-weight:700; letter-spacing:.05em; }
.tec-week-daynum  { display:block; font-size:18px; font-weight:700; margin-top:2px; }
.tec-week-allday-cell {
  border-left:  1px solid var(--tec-border);
  min-height:   36px;
  padding:      4px;
}
.tec-week-grid {
  position:    relative;
  display:     grid;
  grid-template-rows: repeat(24, 56px);
}
.tec-week-hour-row {
  display:     grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-bottom: 1px solid var(--tec-border);
}
.tec-week-time-label {
  padding:     4px 6px 0;
  font-size:   11px;
  color:       var(--tec-text-3);
  text-align:  right;
  margin-top:  -8px;
}
.tec-week-cell {
  border-left:   1px solid var(--tec-border);
  position:      relative;
  transition:    background .1s;
}
.tec-week-cell:hover  { background: var(--tec-bg-2); }
.tec-week-cell.today  { background: var(--tec-accent-10); }

.tec-week-event-block {
  position:  absolute;
  background: var(--ev-color, var(--tec-accent));
  color:     #fff;
  border-radius: 4px;
  padding:   3px 6px;
  font-size: 11px;
  overflow:  hidden;
  cursor:    pointer;
  z-index:   2;
  transition: opacity .15s;
  min-height: 24px;
}
.tec-week-event-block:hover { opacity: .85; z-index: 3; }
.tec-week-event-block span  { display:block; font-size:10px; opacity:.8; }
.tec-week-event-block strong { display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── List View ──────────────────────────────────────────────────────────── */
.tec-list { display: flex; flex-direction: column; gap: 12px; }

.tec-event-card {
  background:   var(--tec-bg);
  border:       1px solid var(--tec-border);
  border-radius: var(--tec-radius);
  overflow:     hidden;
  display:      flex;
  gap:          0;
  cursor:       pointer;
  transition:   box-shadow .2s, transform .2s;
  border-left:  4px solid var(--ev-color, var(--tec-accent));
}
.tec-event-card:hover {
  box-shadow: var(--tec-shadow-lg);
  transform:  translateY(-1px);
}
.tec-card-thumb {
  width:        120px;
  flex-shrink:  0;
  overflow:     hidden;
}
.tec-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.tec-card-thumb-placeholder {
  background:  var(--ev-color, var(--tec-accent));
  display:     flex;
  align-items: center;
  justify-content: center;
}
.tec-thumb-date { color:#fff; font-weight:700; font-size:13px; text-align:center; padding:8px; }

.tec-card-body    { flex:1; padding:14px 16px; min-width:0; }
.tec-card-actions { display:flex; flex-direction:column; gap:8px; padding:14px 16px; align-items:flex-start; justify-content:center; border-left:1px solid var(--tec-border); }

.tec-card-meta    { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.tec-card-date    { font-size:13px; font-weight:600; color:var(--tec-accent); }
.tec-card-time    { font-size:12px; color:var(--tec-text-2); }
.tec-card-title   { margin:0 0 6px; font-size:16px; font-weight:700; color:var(--tec-text); }
.tec-card-location { margin:0 0 6px; font-size:13px; color:var(--tec-text-2); display:flex; align-items:center; gap:4px; }
.tec-card-excerpt { margin:0 0 8px; font-size:13px; color:var(--tec-text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tec-card-cats    { display:flex; flex-wrap:wrap; gap:4px; }
.tec-cat-badge    { font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; background: var(--cat-color, var(--tec-accent)); color:#fff; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tec-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       8px 16px;
  border-radius: 8px;
  font-size:     13px;
  font-weight:   600;
  text-decoration: none;
  cursor:        pointer;
  transition:    all .2s;
  border:        none;
  white-space:   nowrap;
}
.tec-btn-primary { background: var(--tec-accent); color:#fff; }
.tec-btn-primary:hover { opacity: .85; color:#fff; }
.tec-btn-outline {
  background:  transparent;
  color:       var(--tec-accent);
  border:      1.5px solid var(--tec-accent);
}
.tec-btn-outline:hover { background: var(--tec-accent); color:#fff; }
.tec-btn-sm { padding:5px 10px; font-size:12px; }

.tec-featured-badge { font-size:11px; font-weight:700; background:#fbbf24; color:#78350f; padding:2px 8px; border-radius:20px; }

/* ── Agenda View ─────────────────────────────────────────────────────────── */
.tec-agenda { display: flex; flex-direction: column; gap: 0; }
.tec-agenda-group { margin-bottom: 24px; }
.tec-agenda-date-header {
  display:      flex;
  align-items:  center;
  gap:          12px;
  padding:      12px 0 8px;
  border-bottom: 2px solid var(--tec-border);
  margin-bottom: 8px;
  position:     sticky;
  top:          0;
  background:   var(--tec-bg);
  z-index:      1;
}
.tec-agenda-date-header.today { border-bottom-color: var(--tec-accent); }
.tec-agenda-daynum {
  font-size:   32px;
  font-weight: 800;
  color:       var(--tec-text);
  line-height: 1;
  min-width:   44px;
  text-align:  center;
}
.tec-agenda-date-header.today .tec-agenda-daynum { color: var(--tec-accent); }
.tec-agenda-dayinfo { display:flex; flex-direction:column; }
.tec-agenda-dayname  { font-size:14px; font-weight:700; color:var(--tec-text); }
.tec-agenda-monthyear { font-size:12px; color:var(--tec-text-2); }
.tec-today-badge { margin-left:auto; font-size:11px; font-weight:700; background:var(--tec-accent); color:#fff; padding:3px 10px; border-radius:20px; }

.tec-agenda-event {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor:      pointer;
  transition:  background .15s;
  background:  var(--tec-bg-2);
}
.tec-agenda-event:hover { background: var(--tec-accent-10); }
.tec-agenda-color-bar { width:4px; min-height:40px; border-radius:2px; background:var(--ev-color, var(--tec-accent)); flex-shrink:0; }
.tec-agenda-time  { font-size:12px; font-weight:600; color:var(--tec-text-2); min-width:90px; flex-shrink:0; }
.tec-agenda-info  { flex:1; min-width:0; }
.tec-agenda-title { margin:0 0 2px; font-size:14px; font-weight:700; color:var(--tec-text); }
.tec-agenda-loc   { margin:0 0 4px; font-size:12px; color:var(--tec-text-2); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.tec-pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.tec-page-btn { background:var(--tec-bg-2); border:1px solid var(--tec-border); border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--tec-text); cursor:pointer; transition:all .2s; }
.tec-page-btn:hover:not(.disabled) { background:var(--tec-accent); color:#fff; border-color:var(--tec-accent); }
.tec-page-btn.disabled { opacity:.4; cursor:not-allowed; }
.tec-page-info { font-size:13px; color:var(--tec-text-2); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.tec-modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.tec-modal.open { pointer-events:all; }
.tec-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; backdrop-filter:blur(3px); }
.tec-modal.open .tec-modal-backdrop { opacity:1; }

.tec-modal-box {
  position:      relative;
  background:    var(--tec-bg);
  border-radius: 16px;
  width:         min(560px, 95vw);
  max-height:    90vh;
  overflow-y:    auto;
  box-shadow:    var(--tec-shadow-lg);
  transform:     translateY(20px) scale(.96);
  opacity:       0;
  transition:    all .25s cubic-bezier(.34,1.56,.64,1);
  border-top:    5px solid var(--ev-color, var(--tec-accent));
}
.tec-modal.open .tec-modal-box { transform: translateY(0) scale(1); opacity:1; }

.tec-modal-close {
  position:   absolute;
  top:        14px;
  right:      14px;
  background: var(--tec-bg-2);
  border:     1px solid var(--tec-border);
  border-radius: 50%;
  width:      32px;
  height:     32px;
  font-size:  14px;
  cursor:     pointer;
  color:      var(--tec-text-2);
  z-index:    2;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.tec-modal-close:hover { background:var(--tec-accent); color:#fff; border-color:var(--tec-accent); }

.tec-modal-img { height:200px; overflow:hidden; }
.tec-modal-img img { width:100%; height:100%; object-fit:cover; display:block; }
.tec-modal-img-placeholder { background: linear-gradient(135deg, var(--ev-color, var(--tec-accent)) 0%, var(--tec-accent-20) 100%); }

.tec-modal-content { padding: 20px 24px 24px; }
.tec-modal-title { margin:10px 0 16px; font-size:22px; font-weight:800; line-height:1.2; }

.tec-modal-meta { display:flex; flex-direction:column; gap:8px; background:var(--tec-bg-2); border-radius:10px; padding:14px; margin-bottom:16px; }
.tec-modal-meta-item { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--tec-text-2); }
.tec-modal-meta-item svg { color:var(--tec-accent); flex-shrink:0; }

.tec-modal-excerpt { font-size:14px; line-height:1.6; color:var(--tec-text-2); margin-bottom:16px; }
.tec-modal-actions { display:flex; flex-wrap:wrap; gap:8px; }

/* ── Admin CSS (basic) ───────────────────────────────────────────────────── */

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .tec-month-cell  { min-height: 70px; }
  .tec-card-thumb  { width: 80px; }
  .tec-card-actions { display:none; }
  .tec-view-tab    { padding: 6px 10px; font-size:12px; }
  .tec-month-grid  { font-size: 12px; }
  .tec-chip-time   { display:none; }
  .tec-week-wrap   { overflow-x: auto; }
  .tec-agenda-time { min-width: 70px; font-size:11px; }
  .tec-modal-title { font-size:18px; }
}

@media (max-width: 480px) {
  .tec-nav-title { font-size:15px; }
  .tec-event-card { flex-direction:column; }
  .tec-card-thumb { width:100%; height:140px; }
  .tec-card-actions { border-left:none; border-top:1px solid var(--tec-border); flex-direction:row; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FIH-STYLE CARDS VIEW  —  horizontal scrolling event card carousel
   ════════════════════════════════════════════════════════════════════════════ */

/* Section wrapper */
.tec-cards-section { padding: 0; }

/* Filter pill row */
.tec-cards-filters {
  display:    flex;
  gap:        6px;
  flex-wrap:  wrap;
  margin-bottom: 14px;
}
.tec-cards-filter {
  font-size:     12px;
  font-weight:   500;
  padding:       5px 14px;
  border-radius: 20px;
  border:        1.5px solid var(--tec-border);
  background:    var(--tec-bg);
  color:         var(--tec-text-2);
  cursor:        pointer;
  transition:    all .18s;
  white-space:   nowrap;
}
.tec-cards-filter:hover  { border-color: var(--tec-accent); color: var(--tec-accent); }
.tec-cards-filter.active {
  background:   var(--tec-accent);
  border-color: var(--tec-accent);
  color:        #fff;
}

/* Scroll track + arrow wrapper */
.tec-cards-scroll-wrap {
  position: relative;
}
.tec-cards-track {
  display:          flex;
  gap:              14px;
  overflow-x:       auto;
  scroll-snap-type: x mandatory;
  padding:          4px 2px 16px;
  -ms-overflow-style: none;
  scrollbar-width:  none;
}
.tec-cards-track::-webkit-scrollbar { display: none; }

/* Arrow buttons */
.tec-cards-arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         4;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--tec-bg);
  border:          1px solid var(--tec-border);
  box-shadow:      var(--tec-shadow);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       20px;
  color:           var(--tec-text);
  transition:      all .18s;
  line-height:     1;
}
.tec-cards-arrow:hover          { background: var(--tec-accent); color: #fff; border-color: var(--tec-accent); }
.tec-cards-arrow[disabled]      { opacity: .3; pointer-events: none; }
.tec-cards-arrow-left           { left:  -18px; }
.tec-cards-arrow-right          { right: -18px; }

/* Individual card */
.tec-fih-card {
  flex:             0 0 284px;
  scroll-snap-align: start;
  background:       var(--tec-bg);
  border:           1px solid var(--tec-border);
  border-radius:    var(--tec-radius);
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
  transition:       box-shadow .2s, transform .2s, border-color .18s;
  cursor:           pointer;
}
.tec-fih-card:hover {
  box-shadow:   var(--tec-shadow-lg);
  transform:    translateY(-2px);
  border-color: var(--tec-accent-20);
}

/* Card image / placeholder */
.tec-fih-card-img {
  width:       100%;
  height:      164px;
  object-fit:  cover;
  display:     block;
  flex-shrink: 0;
}
.tec-fih-card-placeholder {
  width:           100%;
  height:          164px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       44px;
  flex-shrink:     0;
  position:        relative;
  overflow:        hidden;
}
.tec-fih-card-placeholder::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.18));
}

/* Category colour stripe at top */
.tec-fih-card-stripe {
  height:  4px;
  flex-shrink: 0;
}

/* Body */
.tec-fih-card-body {
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

/* Badge row */
.tec-fih-badges {
  display:     flex;
  flex-wrap:   wrap;
  gap:         5px;
  align-items: center;
}
.tec-fih-badge {
  font-size:     11px;
  font-weight:   600;
  padding:       3px 9px;
  border-radius: 20px;
  letter-spacing: .02em;
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
}
.tec-badge-live     { background: #FAECE7; color: #993C1D; }
.tec-badge-upcoming { background: #E6F1FB; color: #185FA5; }
.tec-badge-official { background: #EAF3DE; color: #3B6D11; }
.tec-badge-completed{ background: var(--tec-bg-3); color: var(--tec-text-2); }
.tec-badge-featured { background: #FAEEDA; color: #854F0B; }
.tec-badge-men      { background: #EEEDFE; color: #3C3489; border-radius: 5px; padding: 2px 7px; }
.tec-badge-women    { background: #FBEAF0; color: #72243E; border-radius: 5px; padding: 2px 7px; }

/* Event name */
.tec-fih-card-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--tec-text);
  line-height: 1.35;
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* Meta */
.tec-fih-card-meta {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  margin-top:     auto;
  padding-top:    10px;
  border-top:     1px solid var(--tec-border);
}
.tec-fih-card-meta-row {
  display:     flex;
  align-items: flex-start;
  gap:         6px;
  font-size:   12px;
  color:       var(--tec-text-2);
  line-height: 1.35;
}
.tec-fih-card-meta-row svg {
  flex-shrink: 0;
  margin-top:  1px;
  color:       var(--tec-text-3);
}

/* Action row */
.tec-fih-card-actions {
  display: flex;
  gap:     8px;
  padding: 0 16px 14px;
}
.tec-fih-card-btn {
  flex:          1;
  padding:       7px 0;
  font-size:     12px;
  font-weight:   600;
  border-radius: 8px;
  border:        1.5px solid var(--tec-border);
  background:    transparent;
  cursor:        pointer;
  color:         var(--tec-text);
  text-align:    center;
  text-decoration: none;
  display:       inline-block;
  transition:    all .18s;
  line-height:   1.4;
}
.tec-fih-card-btn:hover    { background: var(--tec-bg-2); }
.tec-fih-card-btn-primary  {
  background:   var(--ev-color, var(--tec-accent));
  border-color: var(--ev-color, var(--tec-accent));
  color:        #fff;
}
.tec-fih-card-btn-primary:hover { opacity: .88; color:#fff; }

/* Empty state */
.tec-cards-empty {
  padding:    40px 24px;
  text-align: center;
  color:      var(--tec-text-2);
  font-size:  14px;
}

/* Responsive */
@media (max-width: 600px) {
  .tec-fih-card   { flex: 0 0 240px; }
  .tec-cards-arrow { display: none; }
}

/* Hide global category tab strip in Cards view (cards has its own filter row) */
.tec-calendar-root[data-active-view="cards"] .tec-tabs-wrap { display: none; }

/* ── Past events toggle button ─────────────────────────────────────────── */
.tec-nav-past {
  background:    var(--tec-bg-2);
  border:        1px solid var(--tec-border);
  border-radius: 8px;
  padding:       6px 12px;
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  color:         var(--tec-text-2);
  transition:    all .2s;
  white-space:   nowrap;
}
.tec-nav-past:hover  { border-color: var(--tec-accent); color: var(--tec-accent); }
.tec-nav-past.active { background: var(--tec-accent-10); color: var(--tec-accent); border-color: var(--tec-accent); }

/* ════════════════════════════════════════════════════════════════════════════
   INLINE EVENT DETAIL PANEL  —  replaces the fixed modal popup
   Sits in the document flow directly below the card/list/agenda view.
   ════════════════════════════════════════════════════════════════════════════ */

.tec-detail-panel {
  display:    none;
  --ev-color: #c0392b;
}
.tec-detail-panel.open { display: block; }

.tec-dp-inner {
  max-width:   800px;
  margin:      0 auto;
  padding:     0 4px 2rem;
  font-family: var(--tec-font, -apple-system,'Segoe UI',system-ui,sans-serif);
  color:       var(--tec-text, #1a1d2e);
}

/* Back button */
.tec-dp-back,
.tec-dp-back-bottom {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    transparent;
  border:        none;
  padding:       0;
  font-size:     13px;
  font-weight:   700;
  color:         var(--ev-color);
  cursor:        pointer;
  margin-bottom: 1.25rem;
  opacity:       .85;
  transition:    opacity .15s;
}
.tec-dp-back:hover,
.tec-dp-back-bottom:hover { opacity: 1; }
.tec-dp-back-bottom       { margin-top: 2rem; margin-bottom: 0; }

/* Hero */
.tec-dp-hero {
  border-radius: 14px;
  overflow:      hidden;
  margin-bottom: 1.5rem;
  position:      relative;
  background:    color-mix(in srgb, var(--ev-color) 10%, white);
  max-height:    360px;
}
.tec-dp-stripe {
  position: absolute; top: 0; left: 0; right: 0;
  height:   4px;
  background: var(--ev-color);
  z-index:    1;
}
.tec-dp-hero-img {
  width:       100%;
  max-height:  360px;
  object-fit:  cover;
  display:     block;
}
.tec-dp-hero-placeholder {
  height:          200px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       72px;
}

/* Badges */
.tec-dp-badges {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 1rem;
}
.tec-dp-badge {
  font-size:     11px;
  font-weight:   700;
  padding:       4px 11px;
  border-radius: 20px;
}
.tec-dp-badge--upcoming { background: #E6F1FB; color: #185FA5; }
.tec-dp-badge--live     { background: #FAECE7; color: #993C1D; }
.tec-dp-badge--past     { background: #f1f0ea; color: #5f5e5a; }
.tec-dp-badge--featured { background: #FAEEDA; color: #854F0B; }
.tec-dp-badge--cat      { color: #fff; }

/* Title */
.tec-dp-title {
  font-size:   clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin:      0 0 1.5rem;
  color:       var(--tec-text, #111);
}

/* Info grid */
.tec-dp-info-grid {
  display:       grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap:           1px;
  background:    var(--tec-border, #e8eaf0);
  border:        1px solid var(--tec-border, #e8eaf0);
  border-radius: 12px;
  overflow:      hidden;
  margin-bottom: 1.5rem;
}
.tec-dp-info-item {
  background:  var(--tec-bg, #fff);
  padding:     13px 16px;
  display:     flex;
  align-items: flex-start;
  gap:         10px;
}
.tec-dp-info-icon {
  width:        34px;
  height:       34px;
  border-radius: 9px;
  background:   color-mix(in srgb, var(--ev-color) 12%, white);
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    16px;
  flex-shrink:  0;
}
.tec-dp-info-label {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--tec-text-2, #9398b0);
  margin-bottom:  2px;
}
.tec-dp-info-value {
  font-size:   14px;
  font-weight: 600;
  color:       var(--tec-text, #1a1d2e);
  line-height: 1.35;
}

/* Excerpt / description */
.tec-dp-excerpt {
  font-size:     15px;
  line-height:   1.75;
  color:         var(--tec-text-2, #3a3d4e);
  margin-bottom: 1.5rem;
}

/* Action buttons */
.tec-dp-actions {
  display:       flex;
  flex-wrap:     wrap;
  gap:           10px;
  margin-bottom: 1.5rem;
}
.tec-dp-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       10px 20px;
  border-radius: 9px;
  font-size:     13px;
  font-weight:   700;
  text-decoration: none;
  transition:    all .18s;
  cursor:        pointer;
  border:        2px solid transparent;
  line-height:   1.2;
}
.tec-dp-btn--primary {
  background:   var(--ev-color);
  color:        #fff;
  border-color: var(--ev-color);
}
.tec-dp-btn--primary:hover { filter: brightness(1.1); color: #fff; }
.tec-dp-btn--outline {
  background:   transparent;
  color:        var(--ev-color);
  border-color: var(--ev-color);
}
.tec-dp-btn--outline:hover {
  background: var(--ev-color);
  color:      #fff;
}

/* Add to calendar strip */
.tec-dp-cal {
  border-top:    1px solid var(--tec-border, #e8eaf0);
  padding-top:   1.2rem;
  margin-bottom: 1.5rem;
}
.tec-dp-cal-label {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--tec-text-2, #9398b0);
  margin-bottom:  10px;
}
.tec-dp-cal-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tec-dp-cal-link {
  font-size:     12px;
  font-weight:   600;
  padding:       6px 14px;
  border-radius: 7px;
  border:        1px solid var(--tec-border, #e2e5f0);
  color:         var(--tec-text-2, #5c6080);
  text-decoration: none;
  transition:    all .15s;
}
.tec-dp-cal-link:hover {
  border-color: var(--ev-color);
  color:        var(--ev-color);
}

/* color-mix() fallback for older browsers */
@supports not (color: color-mix(in srgb, red 10%, white)) {
  .tec-dp-hero         { background: #f5f5f5; }
  .tec-dp-info-icon    { background: #f0f0f0; }
}

@media (max-width: 600px) {
  .tec-dp-info-grid { grid-template-columns: 1fr; }
  .tec-dp-title     { font-size: 1.35rem; }
}