/* TipTracker UI - Bootstrap polish + ambient blur background (green/purple) */ :root { --tt-green: 34, 197, 94; /* emerald */ --tt-purple: 168, 85, 247; /* violet */ --tt-brand-rgb: var(--tt-green); --tt-accent-rgb: var(--tt-purple); --tt-radius: 18px; --tt-shadow-light: 0 12px 32px rgba(0, 0, 0, .08); --tt-shadow-dark: 0 18px 46px rgba(0, 0, 0, .45); } #ttNavbar .nav-link.active { font-weight: 600; } /* underline only the text, not the full-width link */ #ttNavbar .nav-link.active .tt-nav-label { position: relative; display: inline-block; /* key: width becomes just the text */ padding-bottom: .35rem; /* space for the line */ } #ttNavbar .nav-link.active .tt-nav-label::after { content: ""; position: absolute; left: 0; right: 0; /* now matches span width (text width) */ bottom: .05rem; height: 2px; background: currentColor; opacity: .85; border-radius: 2px; } /* Ambient backdrop */ .tt-bg { position: relative; min-height: 100vh; } .tt-bg::before, .tt-bg::after { content: ""; position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none; } .tt-bg::before { background: radial-gradient(1200px 900px at 18% 12%, rgba(var(--tt-green), .25), transparent 65%), radial-gradient(1100px 850px at 82% 8%, rgba(var(--tt-purple), .22), transparent 70%), radial-gradient(900px 700px at 60% 88%, rgba(var(--tt-green), .12), transparent 70%); filter: blur(0px); } .tt-bg::after { background: radial-gradient(700px 500px at 20% 30%, rgba(var(--tt-green), .18), transparent 70%), radial-gradient(700px 500px at 80% 24%, rgba(var(--tt-purple), .18), transparent 70%); filter: blur(34px); opacity: .9; } /* ============================ PATCH: also support body.tt-ambient (your base.html uses ) ============================ */ .tt-ambient { position: relative; min-height: 100vh; } .tt-ambient::before, .tt-ambient::after { content: ""; position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none; } .tt-ambient::before { background: radial-gradient(1200px 900px at 18% 12%, rgba(var(--tt-green), .25), transparent 65%), radial-gradient(1100px 850px at 82% 8%, rgba(var(--tt-purple), .22), transparent 70%), radial-gradient(900px 700px at 60% 88%, rgba(var(--tt-green), .12), transparent 70%); filter: blur(0px); } .tt-ambient::after { background: radial-gradient(700px 500px at 20% 30%, rgba(var(--tt-green), .18), transparent 70%), radial-gradient(700px 500px at 80% 24%, rgba(var(--tt-purple), .18), transparent 70%); filter: blur(34px); opacity: .9; } /* ============================ END PATCH ============================ */ /* Make sure bootstrap background isn't flat */ html[data-bs-theme="dark"] body { background-color: #0b0f17; } html[data-bs-theme="light"] body { background-color: #f7f9ff; } /* Nav gets a subtle glass feel */ .tt-nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .08); } html[data-bs-theme="light"] .tt-nav { border-bottom: 1px solid rgba(0, 0, 0, .08); } /* (Unused if you removed the dot in HTML, safe to keep) */ .tt-dot { width: 12px; height: 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(var(--tt-green), 1), rgba(var(--tt-purple), 1)); box-shadow: 0 0 0 6px rgba(var(--tt-green), .14), 0 0 18px rgba(var(--tt-purple), .22); } /* Cards */ .tt-card { border-radius: var(--tt-radius); overflow: hidden; } .tt-soft-shadow { box-shadow: var(--tt-shadow-light); } html[data-bs-theme="dark"] .tt-soft-shadow { box-shadow: var(--tt-shadow-dark); } /* Glass surface on top of ambient bg */ .tt-glass { background: rgba(255, 255, 255, .72); border: 1px solid rgba(0, 0, 0, .06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-bs-theme="dark"] .tt-glass { background: rgba(15, 22, 36, .72); border: 1px solid rgba(255, 255, 255, .08); } /* Buttons inherit the glass vibe a bit */ .tt-btn { border-radius: 14px; } /* Alerts match cards */ .tt-alert { border-radius: 16px; border: 1px solid rgba(255, 255, 255, .10); } html[data-bs-theme="light"] .tt-alert { border: 1px solid rgba(0, 0, 0, .08); } /* KPIs */ .tt-kpi { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; } .tt-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Receipt thumbnails */ .tt-thumb { width: 100%; height: 150px; object-fit: cover; cursor: pointer; } /* File preview grid items */ .tt-thumb-name { font-size: .8rem; word-break: break-word; } /* Modal image fit */ .tt-modal-imgwrap { width: 100%; height: min(78vh, 820px); display: flex; align-items: center; justify-content: center; background: var(--bs-body-bg); } .tt-modal-img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Chart container */ .tt-chart { width: 100%; height: 300px; } /* Slightly nicer tables on mobile */ .table-responsive { border-radius: 16px; } /* --- Make secondary/outline buttons visible on dark background --- */ /* Exclude .tt-pill (and .tt-pass-toggle) because those have custom styling */ html[data-bs-theme="dark"] .btn-outline-secondary:not(.tt-pill):not(.tt-pass-toggle), html[data-bs-theme="dark"] .btn-secondary:not(.tt-pill) { border-color: rgba(255, 255, 255, .28) !important; color: rgba(255, 255, 255, .88) !important; background: rgba(255, 255, 255, .06) !important; /* faint fill so it doesn't blend */ box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset; } html[data-bs-theme="dark"] .btn-outline-secondary:not(.tt-pill):not(.tt-pass-toggle):hover, html[data-bs-theme="dark"] .btn-secondary:not(.tt-pill):hover { border-color: rgba(255, 255, 255, .40) !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; } html[data-bs-theme="dark"] .btn-outline-secondary:not(.tt-pill):not(.tt-pass-toggle):focus, html[data-bs-theme="dark"] .btn-secondary:not(.tt-pill):focus, html[data-bs-theme="dark"] .btn-outline-secondary:not(.tt-pill):not(.tt-pass-toggle):focus-visible, html[data-bs-theme="dark"] .btn-secondary:not(.tt-pill):focus-visible { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 0 .22rem rgba(var(--tt-purple), .25) !important; } html[data-bs-theme="dark"] .btn-outline-secondary:not(.tt-pill):not(.tt-pass-toggle):disabled, html[data-bs-theme="dark"] .btn-secondary:not(.tt-pill):disabled { opacity: .55; background: rgba(255, 255, 255, .04) !important; } html[data-bs-theme="dark"] .btn-outline-secondary:hover, html[data-bs-theme="dark"] .btn-secondary:hover { border-color: rgba(255, 255, 255, .40) !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; } html[data-bs-theme="dark"] .btn-outline-secondary:focus, html[data-bs-theme="dark"] .btn-secondary:focus, html[data-bs-theme="dark"] .btn-outline-secondary:focus-visible, html[data-bs-theme="dark"] .btn-secondary:focus-visible { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 0 .22rem rgba(var(--tt-purple), .25) !important; } html[data-bs-theme="dark"] .btn-outline-secondary:disabled, html[data-bs-theme="dark"] .btn-secondary:disabled { opacity: .55; background: rgba(255, 255, 255, .04) !important; } /* Modal header actions: keep Open + Close on the right with spacing */ .tt-modal-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; /* space between Open and X */ } .tt-modal-actions .btn-close { margin: 0; /* prevents Bootstrap default margin quirks */ } /* Space between receipt preview grid and buttons */ #receiptPreview { margin-bottom: 1rem; /* increase to 1.5rem if you want more */ } #receiptPreview .card { margin-bottom: .25rem; } /* ----------------------------- Sortable table headers (clean) ------------------------------ */ th.tt-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .tt-sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; user-select: none; } .tt-sort-link:hover { text-decoration: none; opacity: .95; } .tt-sort-icons { display: inline-flex; flex-direction: column; line-height: .75; font-size: .6rem; opacity: .35; transform: translateY(-1px); } .tt-sort-icons .up, .tt-sort-icons .down { display: block; height: .6rem; } /* Active sort state */ th.tt-sortable.tt-sort-active .tt-sort-icons { opacity: .85; } th.tt-sortable.tt-sort-active.tt-sort-asc .tt-sort-icons .up { opacity: 1; color: var(--bs-primary); } th.tt-sortable.tt-sort-active.tt-sort-asc .tt-sort-icons .down { opacity: .25; } th.tt-sortable.tt-sort-active.tt-sort-desc .tt-sort-icons .down { opacity: 1; color: var(--bs-primary); } th.tt-sortable.tt-sort-active.tt-sort-desc .tt-sort-icons .up { opacity: .25; } /* ----------------------------- Sticky + blur navbar patch ------------------------------ */ .tt-nav-sticky { position: sticky; top: 0; z-index: 1030; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Stronger contrast for glass navbar */ html[data-bs-theme="dark"] .tt-nav.tt-nav-sticky { background: rgba(15, 22, 36, .65); border-bottom: 1px solid rgba(255, 255, 255, .10); } html[data-bs-theme="light"] .tt-nav.tt-nav-sticky { background: rgba(255, 255, 255, .75); border-bottom: 1px solid rgba(0, 0, 0, .08); } /* Navbar shrink-on-scroll polish */ .tt-nav { transition: box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease; } /* Wrap your container in .tt-nav-inner for smooth padding animation (recommended) */ .tt-nav-inner { padding-top: .75rem; padding-bottom: .75rem; transition: padding 160ms ease; } /* Scrolled state: slightly tighter + shadow */ .tt-nav--scrolled .tt-nav-inner { padding-top: .40rem; padding-bottom: .40rem; } html[data-bs-theme="dark"] .tt-nav--scrolled { box-shadow: 0 10px 26px rgba(0, 0, 0, .45); border-bottom-color: rgba(255, 255, 255, .14); background: rgba(15, 22, 36, .78); } html[data-bs-theme="light"] .tt-nav--scrolled { box-shadow: 0 10px 22px rgba(0, 0, 0, .12); border-bottom-color: rgba(0, 0, 0, .10); background: rgba(255, 255, 255, .82); } /* Optional: make the brand feel a touch more compact when scrolled */ .tt-nav--scrolled .navbar-brand { transform: translateY(-1px); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .tt-nav, .tt-nav-inner { transition: none; } } /* ============================ PATCH: tt-table theme-aware styling (fix: table rows stay dark in light mode + improve spacing) ============================ */ .tt-table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: rgba(255, 255, 255, .10); --bs-table-striped-bg: rgba(255, 255, 255, .04); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: rgba(255, 255, 255, .06); --bs-table-hover-color: var(--bs-body-color); } html[data-bs-theme="light"] .tt-table { --bs-table-border-color: rgba(0, 0, 0, .10); --bs-table-striped-bg: rgba(0, 0, 0, .03); --bs-table-hover-bg: rgba(0, 0, 0, .05); } /* Comfortable row height */ .tt-table thead th, .tt-table tbody td { padding-top: .78rem; padding-bottom: .78rem; } /* ============================ END PATCH ============================ */ /* Reports/Dashboard table: nicer edge padding for first + last columns */ .tt-table thead th:first-child, .tt-table tbody td:first-child { padding-left: 1.1rem; } .tt-table thead th:last-child, .tt-table tbody td:last-child { padding-right: 1.1rem; } /* Keep your generic table padding too, but fix missing semicolons */ .table thead th:first-child, .table tbody td:first-child { padding-left: 1.1rem; } .table thead th:last-child, .table tbody td:last-child { padding-right: 1.1rem; } /* ========================================================= Password eye toggle: force icon visibility in both themes Put this at the VERY END of styles.css so it wins. ========================================================= */ .tt-pass-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; /* consistent square button */ padding: 0 .8rem; } /* Force SVG to render with the button color no matter what */ .tt-pass-toggle .tt-eye { display: block; width: 16px; height: 16px; fill: currentColor !important; stroke: none !important; pointer-events: none; opacity: 1 !important; } /* Override your global dark-mode btn-outline-secondary patch for THIS button */ html[data-bs-theme="dark"] .tt-pass-toggle.btn-outline-secondary { color: rgba(255, 255, 255, .92) !important; background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .28) !important; } /* Light theme readability (prevents “white on white” or washed out icon) */ html[data-bs-theme="light"] .tt-pass-toggle.btn-outline-secondary { color: rgba(11, 18, 32, .80) !important; background: rgba(0, 0, 0, .03) !important; border-color: rgba(0, 0, 0, .18) !important; } /* Extra safety: add a tiny outline so even same-color backgrounds show the icon */ html[data-bs-theme="dark"] .tt-pass-toggle .tt-eye { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .65)); } html[data-bs-theme="light"] .tt-pass-toggle .tt-eye { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)); } /* ------------------- Chart Canvas -------------- */ .tt-chart canvas { display: block; } /* ---------------------------- Calendar view ---------------------------- */ .tt-cal-title { font-weight: 700; padding: .35rem .6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); } .tt-cal-headers { display: grid; grid-template-columns: repeat(var(--tt-cal-cols, 7), minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; } .tt-cal-head { padding: .25rem .25rem; text-align: center; } .tt-cal-grid { display: grid; grid-template-columns: repeat(var(--tt-cal-cols, 7), minmax(0, 1fr)); gap: .75rem; } .tt-cal-cell { min-height: 130px; transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease; border: 1px solid rgba(255, 255, 255, .10); } .tt-cal-cell:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .22); } .tt-cal-out { opacity: .55; } .tt-cal-today { outline: 2px solid rgba(var(--bs-primary-rgb), .85); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15); } /* Calendar: make toolbar title look like a button and match heights */ .tt-cal-label { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding-inline: .9rem; opacity: 0.9; } /* Calendar: controls align evenly */ .tt-cal-controls .form-control, .tt-cal-controls .form-select, .tt-cal-controls .btn { min-height: 44px; } /* Add entry full width on phones, normal on larger screens */ .tt-cal-add { width: 100%; } @media (min-width: 576px) { .tt-cal-add { width: auto; } } /* Mobile squish fix: allow horizontal scroll for the calendar grid */ .tt-cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; /* add gutters so first/last cards + shadows don't get clipped */ padding: .5rem .75rem .75rem; scroll-padding-inline: .75rem; } /* Force a reasonable minimum width so 7 columns don't collapse */ .tt-cal-scroll .tt-cal-headers, .tt-cal-scroll .tt-cal-grid { min-width: 860px; /* adjust 780–980 if you want */ } @media (min-width: 992px) { .tt-cal-scroll { /* desktop doesn't need extra scroll gutters */ padding: 0; scroll-padding-inline: 0; } .tt-cal-scroll .tt-cal-headers, .tt-cal-scroll .tt-cal-grid { min-width: 0; } } /* Calendar form: perfect alignment for View / Anchor / Apply */ .tt-cal-controls .tt-field { display: flex; flex-direction: column; height: 100%; } .tt-vis-hidden { visibility: hidden; /* keeps label height so button aligns with other controls */ } .tt-cal-spacer { min-height: 1.25rem; /* same space as helper text line */ } .tt-cal-apply { min-height: 44px; /* matches your other controls */ } /* Calendar cell padding (replaces p-3) */ .tt-cal-body { padding: 1rem; } /* Month view: force equal squares + keep content contained */ .tt-cal-grid--square .tt-cal-cell { aspect-ratio: 1 / 1; /* makes every cell a square */ min-height: 0; /* override your min-height: 130px */ } .tt-cal-grid--square .tt-cal-cell .tt-cal-body { height: 100%; overflow: hidden; /* prevents content from expanding the square */ gap: .45rem !important; } /* Slightly denser typography inside squares so 4 metrics fit nicely */ .tt-cal-grid--square .tt-cal-cell .small { font-size: .82rem; line-height: 1.15; } .tt-cal-grid--square .tt-cal-cell .badge { font-size: .75rem; } /* Keep metric rows from wrapping weirdly */ .tt-cal-grid--square .tt-cal-cell .small.d-flex { white-space: nowrap; } /* ========================================= PATCH: Fix sticky navbar flicker / jump ========================================= */ /* 1) Prevent width reflow when modals open/close (scrollbar changes) */ html { scrollbar-gutter: stable; /* modern browsers */ } /* fallback: reserve scrollbar space so layout stays stable */ @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* Bootstrap sometimes adds body padding-right for scrollbar compensation; with stable gutter, that can cause micro reflow → cancel it */ body.modal-open { padding-right: 0 !important; } /* 2) Make sticky + backdrop-filter paint more stable */ .tt-nav.tt-nav-sticky { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; will-change: transform; } /* 3) Stop the “shrink” from changing layout height (this was causing the jump) Keep height constant; only shadow/bg changes remain */ .tt-nav-inner { padding-top: .75rem !important; padding-bottom: .75rem !important; } .tt-nav--scrolled .tt-nav-inner { padding-top: .75rem !important; padding-bottom: .75rem !important; /* Optional tiny visual tweak without affecting layout */ transform: translateY(-1px); } /* 4) When modal opens, disable navbar transitions to avoid any flicker */ .tt-nav--freeze, .tt-nav--freeze .tt-nav-inner, body.modal-open .tt-nav, body.modal-open .tt-nav .tt-nav-inner { transition: none !important; } /* ========================================= PATCH: Make btn-check toggle selected state obvious in DARK + LIGHT themes (fixes Tip pool mode highlight) ========================================= */ /* Selected (checked) label */ .btn-group .btn-check:checked+.btn.btn-outline-secondary.tt-btn { background: rgba(var(--bs-primary-rgb), .14) !important; border-color: rgba(var(--bs-primary-rgb), .55) !important; color: var(--bs-body-color) !important; } /* Dark theme: stronger contrast */ html[data-bs-theme="dark"] .btn-group .btn-check:checked+.btn.btn-outline-secondary.tt-btn { background: rgba(var(--bs-primary-rgb), .28) !important; border-color: rgba(var(--bs-primary-rgb), .75) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .18) inset; } /* Optional: clearer hover on unselected buttons */ html[data-bs-theme="dark"] .btn-group .btn-check:not(:checked)+.btn.btn-outline-secondary.tt-btn:hover { background: rgba(255, 255, 255, .10) !important; border-color: rgba(255, 255, 255, .42) !important; } /* Focus ring when toggling via keyboard */ .btn-group .btn-check:focus+.btn.btn-outline-secondary.tt-btn, .btn-group .btn-check:focus-visible+.btn.btn-outline-secondary.tt-btn { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 0 .22rem rgba(var(--tt-purple), .25) !important; } /* ========================= Text contrast improvements ========================= */ /* Light theme: make "secondary" text darker so it stays readable on light gradients */ :root[data-bs-theme="light"] { --bs-body-color: #0f172a; /* main text */ --bs-emphasis-color: #0b1220; /* headings / emphasis */ --bs-secondary-color: #334155; /* replaces too-light muted text */ --bs-tertiary-color: #475569; } /* Dark theme: make secondary text brighter (less "washed out") */ :root[data-bs-theme="dark"] { --bs-body-color: rgba(255, 255, 255, .92); --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(255, 255, 255, .72); --bs-tertiary-color: rgba(255, 255, 255, .56); } /* If your hero/gradient area is making text harder to read, add a subtle shadow */ .tt-hero, .pagehead, .tt-header-hero { /* (keep this selector if you already have one; otherwise it's harmless) */ } .tt-hero h1, .tt-hero h2, .tt-hero .h1, .tt-hero .h2, .pagehead h1, .pagehead h2, .pagehead .h1, .pagehead .h2 { text-shadow: 0 1px 0 rgba(0, 0, 0, .08); } :root[data-bs-theme="dark"] .tt-hero h1, :root[data-bs-theme="dark"] .tt-hero h2, :root[data-bs-theme="dark"] .pagehead h1, :root[data-bs-theme="dark"] .pagehead h2 { text-shadow: 0 1px 0 rgba(0, 0, 0, .35); } /* ========================= Pill / badge styling ========================= */ :root { --tt-pill-radius: 999px; } /* Default pill tokens per theme */ :root[data-bs-theme="light"] { --tt-pill-bg: rgba(var(--bs-primary-rgb), .12); --tt-pill-border: rgba(var(--bs-primary-rgb), .35); --tt-pill-text: #0b3a8a; } :root[data-bs-theme="dark"] { --tt-pill-bg: rgba(var(--bs-primary-rgb), .22); --tt-pill-border: rgba(var(--bs-primary-rgb), .55); --tt-pill-text: rgba(255, 255, 255, .92); } /* Apply to any pill */ .tt-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: var(--tt-pill-radius); background: var(--tt-pill-bg); border: 1px solid var(--tt-pill-border); color: var(--tt-pill-text); font-weight: 600; line-height: 1; white-space: nowrap; } /* Make icons inherit pill color nicely */ .tt-pill .bi { opacity: .95; } .tt-btn.tt-pill { border-radius: 14px; } /* ========================= Footer ========================= */ .tt-footer { border-top: 1px solid rgba(255, 255, 255, .10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-bs-theme="dark"] .tt-footer { background: rgba(15, 22, 36, .62); } html[data-bs-theme="light"] .tt-footer { background: rgba(255, 255, 255, .78); border-top: 1px solid rgba(0, 0, 0, .10); } .tt-footer-link { color: var(--bs-body-color); text-decoration: none; opacity: .85; font-weight: 600; } .tt-footer-link:hover { opacity: 1; text-decoration: underline; } .tt-footer-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(var(--bs-primary-rgb), .85); display: inline-block; } /* ========================= Calendar toolbar layout ========================= */ .tt-cal-actions { display: flex; flex-direction: column; /* mobile: stack */ gap: .6rem; width: 100%; } .tt-cal-navrow { display: flex; align-items: center; gap: .6rem; width: 100%; } .tt-cal-navgroup { display: inline-flex; /* keep Bootstrap button-group behavior */ flex: 1 1 auto; /* take remaining space */ min-width: 0; /* allow title to shrink */ } /* Make month label take available space and center nicely */ .tt-cal-navgroup .tt-cal-label { flex: 1 1 auto; min-width: 0; text-align: center; } /* Desktop/tablet: allow toolbar to sit nicely on the right */ @media (min-width: 768px) { .tt-cal-actions { width: auto; align-items: flex-end; } .tt-cal-navrow { width: auto; } } /* ========================= Light theme: improve button & input visibility ========================= */ html[data-bs-theme="light"] .tt-cal-toolbar .btn-outline-secondary.tt-btn, html[data-bs-theme="light"] .tt-cal-controls .btn-outline-secondary.tt-btn { color: rgba(11, 18, 32, .90) !important; border-color: rgba(15, 23, 42, .22) !important; background: rgba(255, 255, 255, .72) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .50) inset; } html[data-bs-theme="light"] .tt-cal-toolbar .btn-outline-secondary.tt-btn:hover, html[data-bs-theme="light"] .tt-cal-controls .btn-outline-secondary.tt-btn:hover { background: rgba(255, 255, 255, .90) !important; border-color: rgba(15, 23, 42, .30) !important; color: rgba(11, 18, 32, .95) !important; } html[data-bs-theme="light"] .tt-cal-toolbar .btn-outline-secondary.tt-btn:focus, html[data-bs-theme="light"] .tt-cal-controls .btn-outline-secondary.tt-btn:focus, html[data-bs-theme="light"] .tt-cal-toolbar .btn-outline-secondary.tt-btn:focus-visible, html[data-bs-theme="light"] .tt-cal-controls .btn-outline-secondary.tt-btn:focus-visible { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset, 0 0 0 .22rem rgba(var(--tt-purple), .20) !important; } /* Month label is "disabled" -> keep it readable in light theme */ html[data-bs-theme="light"] .tt-cal-label.disabled { opacity: 1 !important; color: rgba(11, 18, 32, .78) !important; background: rgba(255, 255, 255, .66) !important; } /* Date input + select readability in light theme */ html[data-bs-theme="light"] .tt-cal-controls .form-control, html[data-bs-theme="light"] .tt-cal-controls .form-select { background-color: rgba(255, 255, 255, .85); border-color: rgba(15, 23, 42, .18); color: #0b1220; } html[data-bs-theme="light"] .tt-cal-controls .form-control:focus, html[data-bs-theme="light"] .tt-cal-controls .form-select:focus { border-color: rgba(var(--tt-purple), .35); box-shadow: 0 0 0 .22rem rgba(var(--tt-purple), .18); } /* ========================= Calendar cells: remove "glass blur" so only cards are visible ========================= */ .tt-cal-cell.tt-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Make cells more solid per theme */ html[data-bs-theme="light"] .tt-cal-cell.tt-glass { background: rgba(255, 255, 255, .94) !important; border-color: rgba(15, 23, 42, .12) !important; } html[data-bs-theme="dark"] .tt-cal-cell.tt-glass { background: rgba(15, 22, 36, .88) !important; border-color: rgba(255, 255, 255, .10) !important; } /* Ensure Bootstrap select caret is visible (caret is a background-image) */ .tt-cal-controls .form-select{ background-image: var(--bs-form-select-bg-img) !important; background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 16px 12px !important; padding-right: 2.5rem; /* space for caret */ } /* ========================================= Shared "soft outline" button (matches Calendar look) Use with: class="btn btn-outline-secondary tt-btn tt-soft-outline" ========================================= */ .btn.tt-soft-outline { border-radius: 14px; /* consistent with tt-btn */ } /* Light theme: darker text, cleaner border, soft white background */ html[data-bs-theme="light"] .btn-outline-secondary.tt-soft-outline { color: rgba(11, 18, 32, .90) !important; border-color: rgba(15, 23, 42, .22) !important; background: rgba(255, 255, 255, .72) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .50) inset; } html[data-bs-theme="light"] .btn-outline-secondary.tt-soft-outline:hover { background: rgba(255, 255, 255, .90) !important; border-color: rgba(15, 23, 42, .30) !important; color: rgba(11, 18, 32, .95) !important; } html[data-bs-theme="light"] .btn-outline-secondary.tt-soft-outline:focus, html[data-bs-theme="light"] .btn-outline-secondary.tt-soft-outline:focus-visible { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset, 0 0 0 .22rem rgba(var(--tt-purple), .20) !important; } /* Dark theme: keep your existing dark style, but ensure it's consistent */ html[data-bs-theme="dark"] .btn-outline-secondary.tt-soft-outline { border-color: rgba(255, 255, 255, .28) !important; color: rgba(255, 255, 255, .88) !important; background: rgba(255, 255, 255, .06) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset; } html[data-bs-theme="dark"] .btn-outline-secondary.tt-soft-outline:hover { border-color: rgba(255, 255, 255, .40) !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; }