/*
 * Date filter bar + day view (port-only, sport-book specs/009 B) -- not in the
 * reference stylesheet. Colours go through the admin theme's role variables
 * (`var(--tc-<hex>, <default>)`, see src/lib/theme/), same palette as
 * featured-matches.css: brand #016a34, panels #ffffff, text #333333,
 * background #e6e6e6. The active tab is underlined in the brand colour.
 */
.df-wrapper{position:relative;margin-bottom:10px}
.df-bar{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border-radius:6px;background:var(--tc-ffffff,#fff);color:var(--tc-333333,#333);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.df-sport select{height:32px;max-width:150px;padding:0 6px;border:1px solid var(--tc-e6e6e6,#e6e6e6);border-radius:4px;font:inherit;font-size:13px;font-weight:bold;background:var(--tc-ffffff,#fff);color:var(--tc-333333,#333);cursor:pointer}
.df-tabs{position:relative;flex:1 1 auto;display:flex;align-items:stretch;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.df-tabs::-webkit-scrollbar{display:none}
.df-tab{flex:0 0 auto;display:flex;align-items:center;height:44px;padding:0 10px;border-bottom:3px solid transparent;font-size:13px;font-weight:bold;white-space:nowrap;text-decoration:none;color:inherit;opacity:.75;box-sizing:border-box}
.df-tab:hover{opacity:1}
.df-tab.active{opacity:1;color:var(--tc-016a34,#016a34);border-bottom-color:var(--tc-016a34,#016a34)}
.df-tab.df-empty{opacity:.45}
.df-actions{display:flex;gap:4px}
.df-icon-button{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:4px;font:inherit;font-size:13px;cursor:pointer;background:var(--tc-e6e6e6,#e6e6e6);color:var(--tc-333333,#333)}
.df-icon-button.active{background:var(--tc-016a34,#016a34);color:var(--tc-ffffff,#fff)}
.df-tab:focus-visible,.df-icon-button:focus-visible,.df-sport select:focus-visible,.df-day:focus-visible,.df-button:focus-visible{outline:2px solid var(--tc-016a34,#016a34);outline-offset:1px}
.df-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.df-search{margin-top:6px}
.df-calendar{position:absolute;top:calc(100% + 4px);right:8px;z-index:20;width:252px;padding:10px;border-radius:6px;background:var(--tc-ffffff,#fff);color:var(--tc-333333,#333);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.df-calendar-title{margin-bottom:8px;font-size:13px;font-weight:bold;text-align:center}
.df-calendar-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.df-calendar-head{font-size:11px;text-align:center;opacity:.6}
.df-day,.df-day-pad{height:30px}
.df-day{border:0;border-radius:4px;font:inherit;font-size:13px;cursor:pointer;background:var(--tc-e6e6e6,#e6e6e6);color:var(--tc-333333,#333)}
.df-day.df-today{font-weight:bold;box-shadow:inset 0 0 0 1px var(--tc-016a34,#016a34)}
.df-day.active{background:var(--tc-016a34,#016a34);color:var(--tc-ffffff,#fff)}
.df-day:disabled{cursor:not-allowed;opacity:.35}
.df-group{margin-bottom:12px}
.df-group-title{margin:0;padding:8px 10px;font-size:13px;font-weight:bold;color:var(--tc-016a34,#016a34)}
.df-message{padding:24px;text-align:center}
.df-more{display:flex;justify-content:center;padding:8px 0 16px}
.df-button{height:34px;padding:0 16px;border:0;border-radius:4px;font:inherit;font-size:13px;font-weight:bold;cursor:pointer;background:var(--tc-016a34,#016a34);color:var(--tc-ffffff,#fff)}
.df-button:disabled{opacity:.6;cursor:progress}
.df-placeholder-row{height:44px;margin:0 0 4px;border-radius:4px;background:var(--tc-e6e6e6,#e6e6e6);animation:df-pulse 1.2s ease-in-out infinite}
@keyframes df-pulse{50%{opacity:.5}}
@media (max-width:1139px){
  .df-bar{border-radius:0;padding:0 6px}
  .df-sport select{max-width:110px}
  .df-icon-label{display:none}
  .df-calendar{right:4px}
}
@media (prefers-reduced-motion:reduce){.df-placeholder-row{animation:none}}
/* Upcoming (audit 2026-10-26 bug 16): the bar on its own row above the reference view, whose
   filter header is absolute at the top of `.df-upcoming-body` and whose list scrolls inside it. */
.middle-content.upcoming.df-upcoming{display:flex;flex-direction:column}
.df-upcoming>.df-wrapper{flex:0 0 auto}
.df-upcoming-body{position:relative;flex:1 1 auto;min-height:0}