or the itself when
there's no link) is the growing flex item. The close X stays at its
natural size, pinned to the right. */
.banner-inner > *:not(.banner-close) {
flex: 1 1 0;
min-width: 0;
}
.banner-inner > a {
display: block;
width: 100%;
}
.banner p {
font-size: 14px;
line-height: 1.4;
text-align: left;
}
.banner-close {
flex: 0 0 auto;
align-self: flex-start;
margin: 2px 0 0 0;
min-width: 24px;
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
.tc-report-tabs {
margin-top: 20px;
}
.tc-report-tab-list {
list-style: none;
padding: 0;
margin: 0;
border-bottom: 2px solid #E3E6EB;
}
.tc-report-tab-list li {
display: inline-block;
margin-bottom: -2px;
}
/* Legacy tab styling — scoped away from prodreports, which uses the new
Figma reskin styles below. */
body:not(.prodreports) .tc-report-tab-list li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #666;
border-bottom: 2px solid transparent;
background: none;
}
body:not(.prodreports) .tc-report-tab-list li.active a {
color: #333;
border-bottom: 2px solid #02CBC9;
font-weight: 600;
background: none;
}
.tc-report-tab-content {
padding: 20px 0;
background: none;
}
.tc-report-tab-pane {
display: none;
background: none;
}
.tc-report-tab-pane.active {
display: block;
background: none;
}
/* Remove button backgrounds */
.tc-report-tab-content button,
.tc-report-tab-pane button {
background: none;
}
.report-dropdown {
align-content: end;
}
.tc-box .tc-badge {
background-color: #F5F6F9;
color: #161825;
}
div.nice-select .current:has(+ .nice-select-dropdown .nice-select-search-box):before {
content: "\f002";
font-family: "Font Awesome 5 Pro";
margin-right: .5em;
}
.clear-section {
font-size: 14px;
color: #9FA5B1;
cursor: pointer;
font-weight: normal;
margin-left: 8px;
}
.clear-section.has-items {
color: #02CBC9;
}
.clear-section:before {
content: '|';
margin-right: 8px;
color: #EBEDF2;
cursor: default;
}
.clear-section:hover.has-items {
opacity: 0.8;
}
.button.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
#stats-tag+.nice-select.disabled,
#stats-tag-parameter+.nice-select.disabled {
background-color: #F5F6F9;
}
#tpl-product-filter .clear-tag {
margin-left: 0;
}
#source.locked .source-wrap {
opacity: 0.5;
}
#source.locked .source-wrap > * {
pointer-events: none;
}
/* -- Funnels Report -- */
.table-wrap-report .tc-pagination {
margin-top: 1rem;
}
.table-wrap-report .tc-pagination button:disabled {
color: rgba(159, 165, 177, 1);
cursor: not-allowed;
}
.table-wrap-report .tc-pagination .page-number {
padding: 0.7em 1.1em;
border-radius: 6px;
}
.table-wrap-report .tc-pagination .page-number:hover {
background-color: rgba(255, 255, 255, 1);
color: rgba(22, 24, 37, 1);
}
.table-wrap-report .tc-pagination .page-number:not(:last-child):after {
content: "";
left: 1.8em;
position: relative;
border-right: 1px rgba(215, 218, 224, 1) solid;
}
.table-wrap-report .tc-pagination .page-number.page-number-active {
background-color: #fff;
color: rgba(22, 24, 37, 1);
}
.table-wrap-report .tc-pagination .page-ellipsis {
padding: 0 5px;
line-height: 32px;
}
.table-wrap-report .tc-justify-right {
justify-content: right;
}
.table-wrap-report .icon-no-data {
width: 4.5em;
height: 4.5em;
background-image: url(/admin/themes/1.0/assets/select_window.svg);
}
.table-wrap-report .tc-page-numbers {
display: flex;
align-items: center;
gap: 1em;
border: 1px rgba(215, 218, 224, 1) solid;
border-radius: 8px;
padding: 0.3em;
}
.table-wrap-report button.page-number {
background: unset;
border: unset;
color: rgba(95, 105, 125, 1);
}
.table-wrap-report .tc-pagination .page-number.page-number-active {
background-color: #fff;
color: rgba(22, 24, 37, 1);
}
.table-wrap-report {
background: unset;
}
.table-wrap-report table {
border-collapse: separate;
border-spacing: 0 1em;
}
.table-wrap-report td {
border: unset !important;
}
.table-wrap-report td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 2em;
color: rgba(95, 105, 125, 1) !important;
}
.table-wrap-report td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding-right: 2em;
}
.table-wrap-report thead th:first-child {
padding-left: 2em;
}
.table-wrap-report thead th:last-child {
padding-right: 2em;
}
.table-wrap-report tbody td {
padding: 1.5em 1em;
}
.table-wrap-report tbody tr:hover {
box-shadow: 0px 16px 40px 0px rgba(235, 237, 242, 1);
background-color: rgba(255, 255, 255, 1) !important;
cursor: pointer;
z-index: 2;
position: relative;
}
.table-wrap-report button.next-page, button.prev-page {
background: none;
color: rgba(95, 105, 125, 1);
border: unset;
}
.tc-table-scroll-wrap {
overflow-x: auto;
overflow-y: hidden;
}
.tc-table-scroll-wrap .tc-table {
width: max-content;
min-width: 100%;
}
#cohort-table-no-data .icon-no-data {
background-image: url(/admin/themes/1.0/assets/bar_chart_4_bars.svg);
}
#subs-management-tabs .box.box-tabbed { margin-top: 6.6em; }
#subs-management-tabs .box.box-tabbed .subtabs { list-style: none; padding: 0; margin: -5.49em 0 2em 0em; }
#subs-management-tabs .box.box-tabbed .subtabs li { cursor: pointer; padding: 0.7em 2.14em; font-size: 100%; display: inline-block; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; border-left: 1px solid rgba(0, 0, 0, 0); border-right: 1px solid rgba(0, 0, 0, 0); color: #8c8c8c; text-align: center; }
#subs-management-tabs .box.box-tabbed .subtabs li.active { background: #fff; border: 1px solid #e8e8e8; border-bottom-color: #fff; cursor: default; color: #616161; }
#subs-management-tabs .content-list { margin-top: -15px; }
.select-product-line-margin { margin: 5px 0 5px; }
.product-listing-widget { height: 300px; overflow-y: scroll; }
#widget-products_to_cancel-container .product-listing-widget-card:nth-child(odd),
#widget-upsells_to_cancel-container .product-listing-widget-card:nth-child(odd),
#widget-downsells_to_cancel-container .product-listing-widget-card:nth-child(odd) {
background-color: #fafafa;
}
.selector-footer-text {
color: #919191;
}
.selector-footer-text span {
font-weight: bold;
}
.product-listing-widget-card.product-embed-wrapper .ribbon { left: unset; top:0.5em;}
.product-listing-widget-inner-card { display: flex; flex-direction: row; justify-content: space-between; gap: 10px; }
.disabled {pointer-events: none;}
/* -- Coupon Report -- */
#top-coupons .icon-no-data, #most-sold-products .icon-no-data {
width: 4.5em;
height: 4.5em;
background-image: url(/admin/themes/1.0/assets/coupon.svg);
}
.prodreports h2 {
font-weight: 600;
}
.tc-breakdown-dot {
border-width: 2px;
border-radius: 50%;
width: 10px;
height: 10px;
margin-right: 5px;
display: inline-block
}
.tc-breakdown-dot.existing-subscribers {
background-color: rgb(0, 75, 107);
}
.tc-breakdown-dot.new-subscriptions {
background-color: rgba(2, 203, 201, 1);
}
.tc-breakdown-dot.trial-subscriptions {
background-color: rgba(166, 231, 232, 1);
}
.tc-breakdown-dot.paused-subscriptions {
background-color: rgba(235, 237, 242, 1);
}
.tc-soon.pure-u-1, .tc-tooltip{
position: relative;
}
.tc-soon .pure-g{
opacity: 0.3;
}
.tc-soon.pure-u-1[data-msg]::after {
content: attr(data-msg);
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #333;
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 100;
text-align: center;
width: max-content;
max-width: 90%;
opacity: 1 !important;
}
.disabledQr {
position: relative;
opacity: 0.8;
}
.disabledQr::after {
content: "Unlock this feature with your Pro+ upgrade and our latest compatible version of Stripe.";
position: absolute;
bottom: 100%;
left: 60%;
transform: translateX(-50%);
background-color: #333333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
opacity: 1;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.disabledQr:hover::after {
opacity: 1;
visibility: visible;
}
.pure-controls-bottom {
clear: both;
margin-top: 1em !important;
}
.fixed-option {
margin-top: 2em;
padding-left: 5px;
}
.gray.disabled, .force-gray.disabled {
opacity: 0.9;
color: #cad2d3;
pointer-events: none;
}
.force-gray {
color: #cad2d3 !important;
}
.product-link {
color: #007bff;
text-decoration: underline;
cursor: pointer;
}
/* Pro-rata info tag and tooltip styles */
.prorata-info-tag-container {
margin-left: 8px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.prorata-tag {
background-color: #21c3c5;
color: white;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
}
.prorata-tooltip-details {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
width: 650px;
background-color: rgba(22, 24, 37, 1);
color: rgba(255, 255, 255, 1);
padding: 15px;
border-radius: 8px;
z-index: 1070;
text-align: left;
line-height: 1.5;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
margin-top: 8px;
max-width: 60vw;
}
.prorata-info-tag-container:hover .prorata-tooltip-details {
visibility: visible;
opacity: 1;
}
.prorata-tooltip-details::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
width: 16px;
height: 16px;
background-color: rgba(22, 24, 37, 1);
transform: translateX(-50%) translateY(50%) rotate(45deg);
border-radius: 3px 0 0 0;
}
/* End Pro-rata info tag and tooltip styles */
.account-level-setting-dropdown {
width: 100%;
}
.account-level-setting-dropdown select:disabled {
pointer-events: none;
}
.account-level-setting-dropdown.hint:before,
.account-level-setting-dropdown.hint:after {
font-size: 1em;
}
.checkout-cancellation-options-wrapper .ui-title-gray-box {
width: 40px;
height: 40px;
background: #ddd;
margin-right: 10px;
}
.tc-flex-column {
display: flex;
flex-direction: column;
}
/* ============================================
TC Sidebar Navigation
============================================ */
.tc-sidebar {
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 224px !important;
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
height: 100vh !important;
background-color: #F6F8F9 !important;
border-right: 1px solid #E8ECEF !important;
z-index: 101 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 20px 16px !important;
box-sizing: border-box !important;
}
.tc-sidebar-logo {
padding: 8px 0 8px 8px;
margin-bottom: 20px;
}
.tc-sidebar-logo a {
display: block !important;
width: 129px !important;
height: 32px !important;
background: url(../../../../../static/images/logo-sidebar.svg) no-repeat left center !important;
background-size: 129px 32px !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
.tc-sidebar-logo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.tc-sidebar-logo a {
flex-shrink: 0;
}
.tc-sidebar-logo a .logo-tc {
display: none;
}
/* Plan / edition badges that used to live in the old `.header h1`.
Placed inline-right of the wordmark in the new sidebar. The Launch
badge doubles as the click target for the limitations modal
(handler binds to `.tc-launch-plan-link-header` in
launch-plan-limitations-modal.js.twig). Colours match the legacy
chrome's `#0dc0c1` / `#b78ae8` so the visual language carries over. */
.tc-sidebar-logo-badges {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.tc-sidebar-logo-badges em,
.tc-sidebar-logo-badges .logo-courses {
font-size: 10px;
line-height: 1;
padding: 4px 8px;
border-radius: 999px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.2px;
display: inline-flex;
align-items: center;
}
.tc-sidebar-logo-badges em {
color: #0dc0c1;
border: 1px solid #0dc0c1;
background: rgba(13, 192, 193, 0.08);
}
.tc-sidebar-logo-badges em.tc-launch-plan-link-header {
cursor: pointer;
}
.tc-sidebar-logo-badges em.tc-launch-plan-link-header:hover {
background: rgba(13, 192, 193, 0.16);
}
/* Learn+ pill — only visible on `.learn` / `.course_editor` body
classes, matching the legacy rule scope. */
.tc-sidebar-logo-badges .logo-courses {
display: none;
color: #b78ae8;
border: 1px solid #b78ae8;
background: rgba(183, 138, 232, 0.08);
}
body.root.learn .tc-sidebar-logo-badges .logo-courses,
body.root.course_editor .tc-sidebar-logo-badges .logo-courses {
display: inline-flex;
}
.tc-sidebar-logo-badges .logo-courses em {
color: #b78ae8;
border: none;
background: transparent;
padding: 0;
margin-left: 2px;
font-weight: bold;
font-size: inherit;
}
/* Override ALL inherited #menu-main styles when inside sidebar */
.tc-sidebar #menu-main,
.tc-sidebar .tc-sidebar-nav {
text-align: left !important;
list-style: none !important;
margin: 0 !important;
padding: 4px 0 !important;
flex: 1;
display: block !important;
}
.tc-sidebar #menu-main > li,
.tc-sidebar .tc-sidebar-item {
display: block !important;
margin: 0 0 4px 0 !important;
line-height: normal !important;
text-align: left !important;
position: relative;
float: none !important;
border-bottom: none !important;
}
.tc-sidebar #menu-main > li > a,
.tc-sidebar .tc-sidebar-link {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px !important;
color: #364152 !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: 400 !important;
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
border-radius: 8px !important;
background-color: transparent !important;
background: transparent !important;
line-height: 16px !important;
position: static !important;
text-decoration: none !important;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
border: none !important;
box-shadow: none !important;
height: auto !important;
}
.tc-sidebar #menu-main > li > a:hover,
.tc-sidebar .tc-sidebar-link:hover {
background-color: #EEF0F3 !important;
background: #EEF0F3 !important;
color: rgba(58, 67, 81, 0.89) !important;
}
/* Force hide ALL old icon elements inside sidebar links */
.tc-sidebar #menu-main > li > a > i:not(.tc-sidebar-icon),
.tc-sidebar #menu-main > li > a > i.tc,
.tc-sidebar #menu-main > li > a > i.fa,
.tc-sidebar #menu-main > li > a > i.fa-angle-down {
display: none !important;
}
/* Force label spans to be visible and inline */
.tc-sidebar #menu-main > li > a > span,
.tc-sidebar .tc-sidebar-label {
position: static !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: 400 !important;
transform: none !important;
white-space: nowrap !important;
bottom: auto !important;
display: inline !important;
color: inherit !important;
line-height: 16px !important;
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* Active state driven by route only (`li.active` + the data-section rules
below). `submenu-open` is purely a UI expansion state and must NOT switch
the visual treatment, otherwise clicking a parent to open its submenu
steals the active pill from the page you're actually on. */
.tc-sidebar #menu-main > li.active > a {
background-color: #ECFDFC !important;
background: #ECFDFC !important;
color: #006B70 !important;
}
.tc-sidebar #menu-main > li.active > a .tc-sidebar-icon {
background-color: #006B70 !important;
}
.tc-sidebar #menu-main > li.active > a > span {
color: #006B70 !important;
font-weight: 500 !important;
}
/* Preload filled icon SVGs to prevent blink on active state change */
.tc-sidebar::after {
content: '';
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
background-image:
url('../../assets/nav-dashboard-filled.svg'),
url('../../assets/nav-reports-filled.svg'),
url('../../assets/nav-products-filled.svg'),
url('../../assets/nav-transactions-filled.svg'),
url('../../assets/nav-affiliates-filled.svg'),
url('../../assets/nav-learn-filled.svg'),
url('../../assets/nav-account-filled.svg');
}
/* Filled icons for active state — uses #menu-main for specificity */
.tc-sidebar #menu-main > li.active > a#menu-main-item-dash .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="dash"] #menu-main-wrapper-dash > a .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-dashboard-filled.svg') no-repeat center !important;
mask: url('../../assets/nav-dashboard-filled.svg') no-repeat center !important;
mask-size: contain !important;
}
.tc-sidebar #menu-main > li.active > a#menu-main-item-prodreports .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="prodreports"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="product-sales"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="subscriptions"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="funnels"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="coupons"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-reports-filled.svg') no-repeat center !important;
mask: url('../../assets/nav-reports-filled.svg') no-repeat center !important;
mask-size: contain !important;
}
.tc-sidebar #menu-main > li.active > a#menu-main-item-products .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="products"] #menu-main-wrapper-products > a .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-products-filled.svg') no-repeat center !important;
mask: url('../../assets/nav-products-filled.svg') no-repeat center !important;
mask-size: contain !important;
}
.tc-sidebar #menu-main > li.active > a#menu-main-item-transactions .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="transactions"] #menu-main-wrapper-transactions > a .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-transactions-filled.svg') no-repeat center !important;
mask: url('../../assets/nav-transactions-filled.svg') no-repeat center !important;
mask-size: contain !important;
}
.tc-sidebar #menu-main > li.active > a#menu-main-item-affiliates .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="affiliates"] #menu-main-wrapper-affiliates > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="contracts"] #menu-main-wrapper-affiliates > a .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-affiliates-filled.svg') no-repeat center !important;
mask: url('../../assets/nav-affiliates-filled.svg') no-repeat center !important;
mask-size: contain !important;
}
.tc-sidebar #menu-main > li.active > a#menu-main-item-learn .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="learn"] #menu-main-wrapper-learn > a .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-learn-filled.svg') no-repeat center !important;
mask: url('../../assets/nav-learn-filled.svg') no-repeat center !important;
mask-size: contain !important;
}
.tc-sidebar #menu-main > li.active > a#menu-main-item-account .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="settings"] #menu-main-wrapper-account > a .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-account-filled.svg') no-repeat center !important;
mask: url('../../assets/nav-account-filled.svg') no-repeat center !important;
mask-size: contain !important;
}
/* Also support data-section attribute matching for active state */
.tc-sidebar #menu-main[data-section="dash"] #menu-main-wrapper-dash > a,
.tc-sidebar #menu-main[data-section="prodreports"] #menu-main-wrapper-prodreports > a,
.tc-sidebar #menu-main[data-section="product-sales"] #menu-main-wrapper-prodreports > a,
.tc-sidebar #menu-main[data-section="subscriptions"] #menu-main-wrapper-prodreports > a,
.tc-sidebar #menu-main[data-section="funnels"] #menu-main-wrapper-prodreports > a,
.tc-sidebar #menu-main[data-section="coupons"] #menu-main-wrapper-prodreports > a,
.tc-sidebar #menu-main[data-section="products"] #menu-main-wrapper-products > a,
.tc-sidebar #menu-main[data-section="transactions"] #menu-main-wrapper-transactions > a,
.tc-sidebar #menu-main[data-section="affiliates"] #menu-main-wrapper-affiliates > a,
.tc-sidebar #menu-main[data-section="contracts"] #menu-main-wrapper-affiliates > a,
.tc-sidebar #menu-main[data-section="learn"] #menu-main-wrapper-learn > a,
.tc-sidebar #menu-main[data-section="settings"] #menu-main-wrapper-account > a {
background-color: #ECFDFC !important;
background: #ECFDFC !important;
color: #006B70 !important;
}
.tc-sidebar #menu-main[data-section="dash"] #menu-main-wrapper-dash > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="prodreports"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="product-sales"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="subscriptions"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="funnels"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="coupons"] #menu-main-wrapper-prodreports > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="products"] #menu-main-wrapper-products > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="transactions"] #menu-main-wrapper-transactions > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="affiliates"] #menu-main-wrapper-affiliates > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="contracts"] #menu-main-wrapper-affiliates > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="learn"] #menu-main-wrapper-learn > a .tc-sidebar-icon,
.tc-sidebar #menu-main[data-section="settings"] #menu-main-wrapper-account > a .tc-sidebar-icon {
background-color: #006B70 !important;
}
.tc-sidebar #menu-main[data-section="dash"] #menu-main-wrapper-dash > a > span,
.tc-sidebar #menu-main[data-section="prodreports"] #menu-main-wrapper-prodreports > a > span,
.tc-sidebar #menu-main[data-section="product-sales"] #menu-main-wrapper-prodreports > a > span,
.tc-sidebar #menu-main[data-section="subscriptions"] #menu-main-wrapper-prodreports > a > span,
.tc-sidebar #menu-main[data-section="funnels"] #menu-main-wrapper-prodreports > a > span,
.tc-sidebar #menu-main[data-section="coupons"] #menu-main-wrapper-prodreports > a > span,
.tc-sidebar #menu-main[data-section="products"] #menu-main-wrapper-products > a > span,
.tc-sidebar #menu-main[data-section="transactions"] #menu-main-wrapper-transactions > a > span,
.tc-sidebar #menu-main[data-section="affiliates"] #menu-main-wrapper-affiliates > a > span,
.tc-sidebar #menu-main[data-section="contracts"] #menu-main-wrapper-affiliates > a > span,
.tc-sidebar #menu-main[data-section="learn"] #menu-main-wrapper-learn > a > span,
.tc-sidebar #menu-main[data-section="settings"] #menu-main-wrapper-account > a > span {
color: #006B70 !important;
font-weight: 500 !important;
}
/* Sidebar icon — render inline SVGs via mask */
.tc-sidebar .tc-sidebar-icon {
display: inline-block !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
margin: 0 !important;
background-color: #364152;
transition: background-color 0.15s ease;
font-family: inherit !important;
font-size: 0 !important;
transform: none !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
.tc-sidebar .tc-sidebar-icon::before {
content: '' !important;
display: block !important;
width: 100% !important;
height: 100% !important;
}
.tc-sidebar .tc-sidebar-link:hover .tc-sidebar-icon,
.tc-sidebar #menu-main > li > a:hover .tc-sidebar-icon {
background-color: #364152;
transform: none !important;
}
.tc-sidebar #menu-main-item-dash .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-dashboard.svg') no-repeat center;
mask: url('../../assets/nav-dashboard.svg') no-repeat center;
mask-size: contain;
}
.tc-sidebar #menu-main-item-prodreports .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-reports.svg') no-repeat center;
mask: url('../../assets/nav-reports.svg') no-repeat center;
mask-size: contain;
}
.tc-sidebar #menu-main-item-products .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-products.svg') no-repeat center;
mask: url('../../assets/nav-products.svg') no-repeat center;
mask-size: contain;
}
.tc-sidebar #menu-main-item-transactions .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-transactions.svg') no-repeat center;
mask: url('../../assets/nav-transactions.svg') no-repeat center;
mask-size: contain;
}
.tc-sidebar #menu-main-item-affiliates .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-affiliates.svg') no-repeat center;
mask: url('../../assets/nav-affiliates.svg') no-repeat center;
mask-size: contain;
}
.tc-sidebar #menu-main-item-learn .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-learn.svg') no-repeat center;
mask: url('../../assets/nav-learn.svg') no-repeat center;
mask-size: contain;
}
.tc-sidebar #menu-main-item-account .tc-sidebar-icon {
-webkit-mask: url('../../assets/nav-account.svg') no-repeat center;
mask: url('../../assets/nav-account.svg') no-repeat center;
mask-size: contain;
}
/* Sidebar label */
.tc-sidebar .tc-sidebar-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Sub-menu styles - override all inherited dropdown styles */
.tc-sidebar #menu-main li ul,
.tc-sidebar .tc-sidebar-item .menu-main-sub {
display: none !important;
list-style: none;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
position: static !important;
width: auto !important;
border: none !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
top: auto !important;
left: auto !important;
}
.tc-sidebar #menu-main li ul:before,
.tc-sidebar .tc-sidebar-item .menu-main-sub:before {
display: none !important;
}
.tc-sidebar #menu-main li ul.active,
.tc-sidebar .tc-sidebar-item .menu-main-sub.active {
display: block !important;
}
/* Sub-menu container styling */
.tc-sidebar #menu-main li ul.active,
.tc-sidebar .tc-sidebar-item .menu-main-sub.active {
display: block !important;
background-color: transparent !important;
border-radius: 0 !important;
padding: 4px 0 !important;
position: relative !important;
}
/* `:has(~ .sub-active)` matches every sub-item that comes BEFORE the active
one, so the vertical line auto-extends to whichever item is current. */
.tc-sidebar #menu-main li ul.active li,
.tc-sidebar .tc-sidebar-item .menu-main-sub.active li {
position: relative;
}
.tc-sidebar #menu-main li ul.active li:has(~ .sub-active)::before,
.tc-sidebar .tc-sidebar-item .menu-main-sub.active li:has(~ .sub-active)::before {
content: '';
display: block;
position: absolute;
left: 16px;
top: 0;
bottom: 0;
width: 1.5px;
background: #d1d7de;
pointer-events: none;
}
.tc-sidebar #menu-main li ul.active li.sub-active::before,
.tc-sidebar .tc-sidebar-item .menu-main-sub.active li.sub-active::before {
content: '';
display: block;
position: absolute;
left: 16px;
top: -3px;
width: 11.5px;
height: 18.5px;
background: url('../../assets/nav-submenu-arrow.svg') no-repeat center;
background-size: contain;
pointer-events: none;
}
/* Sub-menu link styles — Inter font, aligned at 32px padding */
.tc-sidebar .tc-sidebar-sublink,
.tc-sidebar #menu-main li ul li a {
display: block !important;
padding: 8px 32px !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
color: #8493A8 !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: -0.0325em !important;
transition: color 0.15s ease;
line-height: 16px !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: left !important;
border-left: 2px solid transparent !important;
}
/* Active sub-item — bold dark text (set via JS based on current section) */
.tc-sidebar #menu-main li ul li.sub-active a,
.tc-sidebar .menu-main-sub li.sub-active a,
.tc-sidebar .menu-main-sub li.sub-active .tc-sidebar-sublink {
font-weight: 600 !important;
color: #364152 !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
letter-spacing: -0.0325em !important;
}
.tc-sidebar .tc-sidebar-sublink:hover,
.tc-sidebar #menu-main li ul li a:hover {
color: #006B70 !important;
background-color: transparent !important;
}
.tc-sidebar #menu-main li ul li span {
position: static !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: inherit !important;
transform: none !important;
display: inline !important;
vertical-align: baseline !important;
color: inherit !important;
font-family: inherit !important;
letter-spacing: inherit !important;
}
.tc-sidebar #menu-main li ul li i {
display: none !important;
}
/* Inaccessible submenu */
.tc-sidebar .tc-sidebar-item .menu-main-sub.inaccessible {
position: relative !important;
}
.tc-sidebar .tc-sidebar-item .menu-main-sub.inaccessible .locked-hint {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
/* Hide old header when sidebar is active */
.header.header-hidden {
display: none !important;
}
/* Content offset for sidebar */
body.root #tc-sidebar ~ #hero,
body.root #tc-sidebar ~ #footer {
margin-left: 224px !important;
width: calc(100% - 224px) !important;
}
body.root #tc-sidebar ~ #layout {
margin-left: 260px !important;
margin-right: 36px !important;
width: auto !important;
max-width: none !important;
}
/* Builder has its own Save / Next chrome and Exit button — sidebar would only overlap. */
body.ui-builder-v2 #tc-sidebar,
body.ui-builder-v2 #tc-mnav-topbar,
body.ui-builder-v2 #tc-mnav-tabbar,
body.ui-builder-v2 #tc-mnav-more-backdrop,
body.ui-builder-v2 .tc-mnav-more-sheet {
display: none !important;
}
body.ui-builder-v2 #tc-sidebar ~ #layout,
body.ui-builder-v2 #tc-sidebar ~ #hero,
body.ui-builder-v2 #tc-sidebar ~ #footer,
body.ui-builder-v2 #tc-sidebar ~ .footer {
margin-left: 0 !important;
margin-right: 0 !important;
width: auto !important;
}
/* Course editor (`#/learn/edit/...`) has its own fixed left panel + top toolbar. */
body.course_editor #tc-sidebar,
body.course_editor #tc-mnav-topbar,
body.course_editor #tc-mnav-tabbar,
body.course_editor #tc-mnav-more-backdrop,
body.course_editor .tc-mnav-more-sheet {
display: none !important;
}
body.course_editor #tc-sidebar ~ #layout,
body.course_editor #tc-sidebar ~ #hero,
body.course_editor #tc-sidebar ~ #footer,
body.course_editor #tc-sidebar ~ .footer {
margin-left: 0 !important;
margin-right: 0 !important;
width: auto !important;
}
/* Legacy `padding-top: 5.4em` on #layout and `top: 5.4em` on .courses-menu were sized for the old fixed header; reclaim that space now the new chrome is hidden. */
body.course_editor #layout {
padding-top: 0 !important;
height: 100vh !important;
}
body.course_editor .courses-menu {
top: 0 !important;
}
/* Legacy `.courses-menu-wrap` capped to 1404px and left-aligned, so Cancel/tabs/Preview hug the left while the right of the toolbar is empty white. Stretch the wrap full-width — the existing flex grid then puts Cancel at the viewport left edge, tabs centred (via `.courses-menu-tabs-wrapper`'s `justify-content: center`), and Preview/Next at the viewport right edge. */
body.course_editor .courses-menu .courses-menu-wrap {
max-width: none !important;
}
/* `.courses-sidebar` was offset `top: 11.9em` to clear the old 5.4em header + 6.4em menu. Header is hidden now, so reclaim the 5.4em — sidebar starts flush under the menu strip and grows by the same amount. */
body.course_editor .courses-sidebar {
top: calc(6.5em + 1px) !important;
height: calc(100vh - 6.6em) !important;
}
/* Also override the .inner max-width inside layout */
body.root #tc-sidebar ~ #layout .inner {
max-width: none !important;
width: 100% !important;
}
body.root #tc-sidebar ~ #hero .inner {
margin-left: 0;
}
body.root #tc-sidebar ~ .footer {
margin-left: 224px !important;
text-align: center;
}
/* Banners offset for sidebar layout — only when the sidebar is visible
(desktop). On mobile the sidebar is hidden by the mobile shell, so the
banner should fill the viewport without the 224px left gutter. */
@media (min-width: 768px) {
body.root #tc-sidebar ~ .banner {
padding-left: 224px !important;
}
}
/* Dashboard reskin — all rules scoped to .ui-dashboard. */
/* Scope the white page canvas to `.root.dash` so other admin pages keep
their existing body colour. */
body.root.dash,
body.root.dash #layout {
background: #ffffff;
}
.ui-dashboard {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: #364050;
padding: 0 32px 160px 32px;
box-sizing: border-box;
max-width: 1216px;
margin: 0 auto;
}
.ui-dashboard .ui-dashboard-head {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 24px 0;
}
.ui-dashboard .ui-dashboard-head h2 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 32px;
color: #28364a;
margin: 0;
letter-spacing: 0;
}
.ui-dashboard .tc-switch-btn,
.ui-dashboard #switch-btn {
display: none;
}
.ui-dashboard .ui-dashboard-head + .pure-g,
.ui-dashboard .tc-today-cards-track {
margin: 0;
display: flex;
gap: 16px;
align-items: stretch;
}
.ui-dashboard .ui-dashboard-head + .pure-g > div,
.ui-dashboard .tc-today-cards-track > .tc-today-card {
padding: 0;
flex: 1 1 0;
min-width: 0;
width: auto;
}
.ui-dashboard .ui-dashboard-head + .pure-g .tc-box,
.ui-dashboard .tc-today-cards-track > .tc-today-card .tc-box {
background: #ffffff;
border: 1px solid #d1d7de;
border-radius: 12px;
padding: 24px;
margin: 0;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
height: 164px;
box-sizing: border-box;
}
/* Icon square: 36×36 (20×20 icon + 8px padding), gray-100 bg, radius 8.
`background-size: contain` preserves the SVG's natural aspect ratio so
wide icons (e.g. payments 18.33×13.33) don't stretch to fill 20×20. */
.ui-dashboard .ui-dashboard-head + .pure-g .tc-box::before,
.ui-dashboard .tc-today-cards-track > .tc-today-card .tc-box::before {
content: '';
display: block;
width: 36px;
height: 36px;
background-color: #e8ecef;
border-radius: 8px;
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
flex: 0 0 auto;
}
/* Card 1 — payments (Figma 838:879) */
.ui-dashboard .ui-dashboard-head + .pure-g > div:nth-child(1) .tc-box::before,
.ui-dashboard .tc-today-cards-track > .tc-today-card:nth-child(1) .tc-box::before {
background-image: url("/static/icons/dashboard/today-revenue.svg");
}
/* Card 2 — receipt (Figma 838:880) */
.ui-dashboard .ui-dashboard-head + .pure-g > div:nth-child(2) .tc-box::before,
.ui-dashboard .tc-today-cards-track > .tc-today-card:nth-child(2) .tc-box::before {
background-image: url("/static/icons/dashboard/today-transactions.svg");
}
/* Cards 3, 4, 5 — Figma 838:881/882 don't expose distinct vectors (recycle
the receipt icon as placeholder); using sensible Material outlined icons
until the design system gives specific ones. */
.ui-dashboard .tc-today-cards-track > .tc-today-card:nth-child(3) .tc-box::before {
background-image: url("/static/icons/dashboard/today-net-revenue.svg");
}
.ui-dashboard .tc-today-cards-track > .tc-today-card:nth-child(4) .tc-box::before {
background-image: url("/static/icons/dashboard/today-commission.svg");
}
.ui-dashboard .tc-today-cards-track > .tc-today-card:nth-child(5) .tc-box::before {
background-image: url("/static/icons/dashboard/today-refund.svg");
}
.ui-dashboard .ui-dashboard-head + .pure-g .tc-box p,
.ui-dashboard .tc-today-cards-track > .tc-today-card .tc-box p {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 16px;
color: #8493a8;
text-transform: uppercase;
letter-spacing: 0.48px;
margin: 0;
width: 100%;
display: flex;
align-items: center;
gap: 6px;
}
/* Negative top margin collapses the card's 32px gap down to 4px between
label and value (label/value live in nested wrapper with its own gap). */
.ui-dashboard .ui-dashboard-head + .pure-g .tc-box h2,
.ui-dashboard .tc-today-cards-track > .tc-today-card .tc-box h2 {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 28px;
color: #364152;
margin: -28px 0 0 0;
letter-spacing: 0;
width: 100%;
}
.ui-dashboard .ui-dashboard-head + .pure-g .tc-box .hr-small,
.ui-dashboard .tc-today-cards-track > .tc-today-card .tc-box .hr-small {
display: none;
}
/* Today's cards — clickable drill-in (handler in account.html.twig).
Cursor, soft hover, active scale, focus-visible outline. No chevron —
the drill-in is signalled by the tap state alone. */
.ui-dashboard .tc-today-card[data-target] {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ui-dashboard .tc-today-card[data-target] .tc-box {
transition: transform 120ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.ui-dashboard .tc-today-card[data-target]:hover .tc-box {
border-color: #d1d7de;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
}
.ui-dashboard .tc-today-card[data-target]:active .tc-box {
transform: scale(0.985);
}
.ui-dashboard .tc-today-card[data-target]:focus-visible {
outline: 0;
}
.ui-dashboard .tc-today-card[data-target]:focus-visible .tc-box {
outline: 2px solid #006b70;
outline-offset: 2px;
}
/* Pulse-highlight applied to the destination card after a Today's drill-in
so the user sees what they landed on. JS adds .tc-target-highlight, the
keyframes fade in a teal ring, JS removes the class after 1.5s. */
@keyframes tc-target-pulse {
0% {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 0 rgba(0, 107, 112, 0.35);
}
30% {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 8px rgba(0, 107, 112, 0.2);
}
100% {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 0 rgba(0, 107, 112, 0);
}
}
.ui-dashboard .tc-box.tc-target-highlight {
animation: tc-target-pulse 1.4s ease-out;
}
/* Mini section heading — small uppercase row label above grouped sections
like "Today" above the today's hero cards. Margin-top kept tight so it
reads as a subhead under the page title, not a free-standing block. */
.ui-dashboard .tc-section-mini-head {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 16px;
color: #8493a8;
text-transform: uppercase;
letter-spacing: 0.48px;
margin: 0 0 12px 0;
}
/* Recurring Revenue subscription-type filter pills per Figma 838-1002.
Hidden on desktop — the design only shows them in the mobile layout. */
.ui-dashboard .tc-recurring-tabs {
display: none;
}
/* "Today" hero cards carousel — same visual chrome as the Trends row,
but the row now scrolls horizontally so we can fit one card per metric
shown in the Trends section (Revenue / Transactions / Net Revenue /
Commission Paid / Refund Volume). On wide desktops all five cards fit
in the viewport so the row reads as a static grid; on narrower widths
the track scrolls and the user navigates with arrow buttons (desktop)
or a swipe gesture (mobile). */
.ui-dashboard .tc-today-cards {
position: relative;
margin: 0 0 24px 0;
}
.ui-dashboard .tc-today-cards-track {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: clip; /* keep card shadows visible while preventing
any vertical drift during inertia swipes */
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 0; /* breathing room for box-shadow on cards */
/* Lock the carousel to horizontal pan so a sideways swipe doesn't
bleed into a vertical page scroll on iOS Safari (which otherwise
pulls the page up while the carousel is being swiped). The user
can still scroll the page vertically by touching ABOVE or BELOW
the track — the lock only applies inside the track. */
touch-action: pan-x;
overscroll-behavior: contain;
}
.ui-dashboard .tc-today-cards-track > * {
/* Reinforce the lock on every child — iOS Safari sometimes lets the
gesture leak vertically when only the parent declares pan-x. */
touch-action: pan-x;
}
.ui-dashboard .tc-today-cards-track::-webkit-scrollbar {
display: none;
}
.ui-dashboard .tc-today-card {
flex: 0 0 calc((100% - 64px) / 5); /* 5 cards, 4 × 16px gaps at desktop */
min-width: 0;
scroll-snap-align: start;
display: flex; /* let .tc-box stretch to fill the
flex-item height that the track
gives every card via align-items
stretch — keeps all 5 the same
height even when one card's
label wraps to two lines. */
}
.ui-dashboard .tc-today-card .tc-box {
background: #ffffff;
border: 1px solid #d1d7de;
border-radius: 12px;
padding: 20px;
margin: 0;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
min-height: 132px;
box-sizing: border-box;
width: 100%;
flex: 1 1 auto; /* fill the parent .tc-today-card */
}
.ui-dashboard .tc-today-card .tc-box::before {
content: '';
display: block;
width: 36px;
height: 36px;
background: #e8ecef no-repeat center;
background-size: 20px 20px;
border-radius: 8px;
flex: 0 0 36px;
}
/* Per-card icon mask. The first two reuse the masks the legacy
two-card layout already had (revenue-stack + receipt). The new
three echo the Trends section's tab metaphors: a banknote for net
revenue, an affiliate-style person-arrow for commission, and an
undo arrow for refunds. SVGs are inlined so we don't need to ship
new asset files. */
.ui-dashboard .tc-today-card:nth-child(1) .tc-box::before {
background-image: url("data:image/svg+xml;utf8,");
}
.ui-dashboard .tc-today-card:nth-child(2) .tc-box::before {
background-image: url("data:image/svg+xml;utf8,");
}
.ui-dashboard .tc-today-card:nth-child(3) .tc-box::before {
background-image: url("data:image/svg+xml;utf8,");
}
.ui-dashboard .tc-today-card:nth-child(4) .tc-box::before {
background-image: url("data:image/svg+xml;utf8,");
}
.ui-dashboard .tc-today-card:nth-child(5) .tc-box::before {
background-image: url("data:image/svg+xml;utf8,");
}
.ui-dashboard .tc-today-card .tc-box p {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #475467;
}
.ui-dashboard .tc-today-card .tc-box h2 {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 36px;
color: #28364a;
letter-spacing: -0.4px;
}
.ui-dashboard .tc-today-card .tc-box .hr-small {
display: none;
}
/* Prev/Next arrows — circular floating buttons that page the track by
one card. Hidden by default; the JS controller toggles them on when
the track has overflow. Hidden on phone viewports where the swipe
gesture is the natural affordance. */
.ui-dashboard .tc-today-cards-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
background: #ffffff;
border: 1px solid #d1d7de;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
color: #364152;
cursor: pointer;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 120ms ease, transform 120ms ease;
-webkit-tap-highlight-color: transparent;
}
.ui-dashboard .tc-today-cards-arrow[hidden] {
display: none;
}
.ui-dashboard .tc-today-cards-arrow:hover {
background: #f6f8f9;
}
.ui-dashboard .tc-today-cards-arrow:active {
transform: translateY(-50%) scale(0.94);
}
.ui-dashboard .tc-today-cards-arrow-prev { left: -8px; }
.ui-dashboard .tc-today-cards-arrow-next { right: -8px; }
/* At ≥1024px the 5-card grid always fits the row, so the carousel arrows
are never useful — hide them entirely instead of relying on the JS
overflow detector (which can show phantom arrows from sub-pixel
rounding / scrollbar reservation). The JS still toggles them as the
user resizes below 1024px where 3 → 1 cards visible and arrows are
genuinely needed. */
@media (min-width: 1024px) {
.ui-dashboard .tc-today-cards-arrow {
display: none;
}
}
@media (max-width: 1023px) {
.ui-dashboard .tc-today-card {
flex: 0 0 calc((100% - 32px) / 3); /* 3 cards visible */
}
}
@media (max-width: 767px) {
.ui-dashboard .tc-today-card {
flex: 0 0 80%; /* 1 card + sliver of next */
}
/* Keep the arrows centered over the cards on phone (the affordance
the user wanted), but hide them after a short idle so they don't
permanently sit on top of the card text. The JS controller adds
`is-idle` 1.5s after the last interaction; CSS only applies the
fade at phone widths so desktop ignores the class entirely. */
.ui-dashboard .tc-today-cards-arrow {
width: 32px;
height: 32px;
/* Liquid-glass surface: heavy blur + saturation pulls whatever is
behind through with extra vibrance, the rgba bg is mostly clear
so the blur is what's doing the work, and the inset highlight
plus light border give the "raised pane of glass" depth cue. */
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(10px) saturate(170%);
backdrop-filter: blur(10px) saturate(170%);
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow:
0 1px 4px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: opacity 240ms ease, background-color 120ms ease, transform 120ms ease;
}
.ui-dashboard .tc-today-cards-arrow:active {
background: rgba(255, 255, 255, 0.7);
}
.ui-dashboard .tc-today-cards-arrow-prev { left: 4px; }
.ui-dashboard .tc-today-cards-arrow-next { right: 4px; }
.ui-dashboard .tc-today-cards-arrow.is-idle {
opacity: 0;
pointer-events: none;
}
.ui-dashboard .tc-today-card .tc-box {
gap: 24px;
}
.ui-dashboard .tc-today-card .tc-box h2 {
font-size: 24px;
line-height: 32px;
}
}
.ui-dashboard > .hr-small {
display: none;
}
.ui-dashboard > .tc-flex.tc-between {
display: none;
}
/* Rebuild the filter row as a single flex container so dropdowns auto-size
and buttons never overlap them. The twig markup uses pure-grid (2/3 + 1/3,
each split in halves) which cramps the right-side buttons into ~1/6 of the
page; flex lets everything lay out on one line with real gaps. */
.ui-dashboard .pure-form.pure-form-stacked {
margin: 48px 0 0 0;
}
.ui-dashboard .pure-form-stacked > .pure-g.ui-input-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-self: stretch;
gap: 8px;
margin: 0;
width: 100%;
margin-left: 0;
}
.ui-dashboard .pure-form-stacked > .pure-g.ui-input-group > .pure-u-1,
.ui-dashboard .pure-form-stacked > .pure-g.ui-input-group > .pure-u-md-2-3,
.ui-dashboard .pure-form-stacked > .pure-g.ui-input-group > .pure-u-md-1-3 {
width: auto;
flex: 0 0 auto;
padding: 0;
}
/* Left group (products + date): dropdowns side-by-side */
.ui-dashboard #main-filter-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
margin-left: 0;
width: auto;
flex: 0 0 auto;
}
.ui-dashboard #main-filter-wrap > div {
width: auto;
flex: 0 0 auto;
padding: 0;
}
/* Right group (currency + buttons): push to flex-end */
.ui-dashboard .pure-form-stacked .pure-g.ui-input-group > .pure-u-md-1-3 > .pure-g.ui-input-group {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin: 0;
margin-left: 0;
width: auto;
flex: 0 0 auto;
}
.ui-dashboard .pure-form-stacked .pure-g.ui-input-group > .pure-u-md-1-3 > .pure-g.ui-input-group > div {
width: auto;
flex: 0 0 auto;
padding: 0;
}
/* Wrapper around the styled