html:has(.budget-detail-screen:not([hidden])),
body:has(.budget-detail-screen:not([hidden])) {
background: #e0e0e0 !important;
}
.section-heading,
.group-title,
.budget-section-head,
.tour-budget-editor-head,
.employee-card-head {
align-items: flex-start;
display: flex;
gap: 16px;
justify-content: space-between;
}
.section-heading h2,
.ceo-hero h2 {
margin: 0;
}
.section-heading p,
.ceo-hero p,
.tour-budget-editor-head span,
.employee-card span {
color: #667085;
}
.tab-panel,
.budget-designer,
.tour-designer {
display: none;
}
[hidden] {
display: none !important;
}
.tab-panel {
background: transparent !important;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.tab-panel.active,
.budget-designer.open,
.tour-designer.open {
display: block;
}
.ceo-hero,
.budget-designer,
.tour-designer,
.employee-group {
background: transparent !important;
border: none !important;
border-radius: 0;
box-shadow: none !important;
padding: 24px 0;
}
.ceo-hero {
background: #e0e0e0 !important;
border: none !important;
border-radius: 28px;
box-shadow:
16px 16px 40px #bebebe,
-16px -16px 40px #ffffff !important;
padding: 24px;
}
.employee-groups,
.budget-sections,
.tour-card-details,
.tour-participants,
.tour-participant-form,
.tour-budget-editor {
display: grid;
gap: 10px !important;
}
.tour-detail-panel {
display: grid;
gap: 28px !important;
}
.employee-group {
background: transparent !important;
border: 0;
box-shadow: none;
padding: 0;
}
.ceo-load-more {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 16px 0 8px;
}
.ceo-load-more small {
color: #6b7280;
}
.budget-designer-trigger {
display: flex;
justify-content: center;
margin: 0;
}
.tour-designer-trigger {
display: flex;
justify-content: center;
}
.tour-designer-actions .secondary.is-bound {
background: var(--btt-color-accent-soft) !important;
border-color: var(--btt-color-accent) !important;
box-shadow: 0 8px 18px rgba(231, 82, 39, 0.14);
color: var(--btt-color-accent-text) !important;
}
.budget-designer,
.tour-designer {
background: #e0e0e0 !important;
border: none !important;
border-radius: 28px;
box-shadow:
16px 16px 40px #bebebe,
-16px -16px 40px #ffffff !important;
padding: 24px;
}
.budget-designer.open,
.tour-designer.open {
margin-bottom: 0;
margin-top: 0;
}
/* —— Tour Designer 2-Row Layout with Animated Pickers —— */
.tour-basic-row {
align-items: flex-end;
display: grid;
gap: 16px;
grid-template-columns: minmax(0, 1.8fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 0.9fr);
margin-bottom: 16px;
}
.tour-basic-row > label {
color: #475467;
display: flex;
flex-direction: column;
font-size: 13px;
font-weight: 700;
gap: 6px;
min-width: 0;
}
.tour-basic-row > label.tour-field-title {
position: relative;
}
.tour-field-preview-hint {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--btt-text-muted, #667085);
white-space: nowrap;
}
.tour-field-suggest-btn {
background: none;
border: none;
padding: 0;
color: var(--btt-color-accent, #e75227);
cursor: pointer;
text-decoration: underline;
font-size: 12px;
font-family: inherit;
}
.tour-field-suggest-btn:hover {
color: var(--btt-color-accent-hover, #d0441c);
}
.tour-basic-row input,
.tour-basic-row select {
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff !important;
color: #101828 !important;
font-size: 14px;
font-weight: 600;
height: 44px;
min-height: 44px;
padding: 0 14px;
width: 100%;
}
.tour-basic-row select:disabled {
cursor: not-allowed;
opacity: 0.65;
}
@media (max-width: 860px) {
.tour-basic-row {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 520px) {
.tour-basic-row {
grid-template-columns: 1fr;
}
}
.tour-picker-triggers-row {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 16px 0 6px;
}
@media (max-width: 680px) {
.tour-picker-triggers-row {
grid-template-columns: 1fr;
}
}
.tour-picker-trigger-col {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.tour-picker-btn {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 16px;
box-shadow:
6px 6px 14px #bebebe,
-6px -6px 14px #ffffff !important;
color: #101828 !important;
cursor: pointer;
display: flex;
font-size: 14px;
font-weight: 800;
gap: 10px;
height: 48px;
justify-content: center;
min-height: 48px;
padding: 0 18px;
position: relative;
transition: box-shadow 160ms ease, transform 120ms ease, color 160ms ease;
width: 100%;
}
.tour-picker-btn:hover {
box-shadow: 0 8px 18px #b0b0b0 !important;
}
.tour-picker-btn:active,
.tour-picker-btn.is-active-drawer {
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff !important;
}
.tour-picker-btn.is-budget-assigned {
box-shadow:
0 0 0 2px #f79009,
0 6px 20px rgba(247, 144, 9, 0.4),
6px 6px 14px #bebebe,
-6px -6px 14px #ffffff !important;
color: #b54708 !important;
font-weight: 800;
}
.tour-picker-btn.is-budget-assigned.is-active-drawer {
box-shadow:
0 0 0 2px #f79009,
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff !important;
}
.tour-picker-btn.is-leader-assigned {
box-shadow:
0 0 0 2px #2e7be6,
0 6px 20px rgba(46, 123, 230, 0.35),
6px 6px 14px #bebebe,
-6px -6px 14px #ffffff !important;
color: #175cd3 !important;
font-weight: 800;
}
.tour-picker-btn.is-leader-assigned.is-active-drawer {
box-shadow:
0 0 0 2px #2e7be6,
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff !important;
}
.tour-picker-btn-icon {
display: inline-flex;
}
.tour-picker-chevron {
color: #667085;
display: inline-flex;
font-size: 16px;
margin-left: auto;
transition: transform 180ms ease;
}
.tour-picker-chevron.is-open {
transform: rotate(180deg);
}
.tour-picker-selected-card {
align-items: center;
background: #e0e0e0;
border-radius: 14px;
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff;
display: flex;
gap: 12px;
justify-content: space-between;
min-width: 0;
padding: 10px 14px;
}
.tour-picker-selected-card.is-budget {
border-left: 4px solid #f79009;
}
.tour-picker-selected-card.is-leader {
border-left: 4px solid #2e7be6;
}
.tour-picker-selected-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tour-picker-selected-info strong {
color: #101828;
font-size: 13px;
font-weight: 800;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tour-picker-selected-info span {
color: #667085;
font-size: 12px;
font-weight: 600;
}
.tour-picker-change-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--btt-color-accent) !important;
cursor: pointer;
flex: 0 0 auto;
font-size: 12px;
font-weight: 800;
height: auto !important;
min-height: unset !important;
padding: 4px 8px !important;
}
.tour-picker-change-btn:hover {
text-decoration: underline;
}
.tour-picker-drawer-wrapper {
display: grid;
grid-template-rows: 0fr;
margin-top: 0;
opacity: 0;
transition:
grid-template-rows 280ms cubic-bezier(0.2, 0.9, 0.3, 1),
opacity 220ms ease,
margin 220ms ease;
}
.tour-picker-drawer-wrapper.is-open {
grid-template-rows: 1fr;
margin-bottom: 16px;
margin-top: 14px;
opacity: 1;
}
.tour-picker-drawer-inner {
min-height: 0;
overflow: hidden;
}
.tour-picker-panel {
background: #e0e0e0;
border-radius: 20px;
box-shadow:
inset 5px 5px 12px #bebebe,
inset -5px -5px 12px #ffffff;
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px;
}
.tour-picker-panel-head {
align-items: center;
display: flex;
justify-content: space-between;
}
.tour-picker-panel-title {
color: #101828;
font-size: 15px;
font-weight: 800;
}
.tour-picker-panel-close {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 10px;
box-shadow:
3px 3px 7px #bebebe,
-3px -3px 7px #ffffff !important;
color: #667085 !important;
cursor: pointer;
display: inline-flex;
font-size: 14px;
font-weight: 700;
height: 32px;
justify-content: center;
min-height: unset !important;
padding: 0;
width: 32px;
}
.tour-picker-panel-close:active {
box-shadow:
inset 2px 2px 4px #bebebe,
inset -2px -2px 4px #ffffff !important;
}
.tour-picker-search-row {
display: flex;
justify-content: flex-start;
min-width: 0;
width: 100%;
}
.tour-picker-search-row .budget-search,
.tour-picker-search-row .cab-search {
display: block;
margin: 0;
max-width: 480px;
position: relative;
width: 100%;
}
.tour-picker-search-row .budget-search input {
background: #e0e0e0 !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 999px !important;
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff !important;
font-size: 14px;
font-weight: 500;
height: 42px !important;
min-height: 42px !important;
padding: 0 38px 0 42px !important;
transition: all 0.2s ease;
width: 100%;
}
.tour-picker-search-row .budget-search input:focus {
border-color: #f79009 !important;
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff,
0 0 0 3px rgba(247, 144, 9, 0.25) !important;
outline: none !important;
}
.tour-picker-direction-row {
border-bottom: 2px solid #d0d5dd;
display: flex !important;
gap: 4px;
grid-template-columns: none !important;
margin-bottom: 4px;
overflow-x: auto;
padding-bottom: 6px;
}
.tour-picker-direction-row::after {
display: none !important;
}
.tour-picker-direction-row .budget-direction-filter {
border-radius: 999px !important;
flex: 0 0 auto;
padding: 6px 14px !important;
}
.tour-picker-direction-row .budget-direction-filter.active {
background: #e0e0e0 !important;
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff !important;
color: var(--btt-color-accent) !important;
}
.tour-picker-items-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
max-height: min(640px, 68vh);
overflow-y: auto;
padding: 4px 12px 80px 12px;
scroll-behavior: smooth;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0px,
black 8px,
black calc(100% - 72px),
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0px,
black 8px,
black calc(100% - 72px),
transparent 100%
);
}
.tour-picker-items-grid.is-leaders {
max-height: 360px;
padding: 14px 10px 24px 10px;
-webkit-mask-image: none;
mask-image: none;
}
.tour-picker-grid-wrap {
position: relative;
min-height: 0;
width: 100%;
}
.tour-picker-grid-fade {
pointer-events: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 90px;
background: linear-gradient(
to bottom,
rgba(224, 224, 224, 0) 0%,
rgba(224, 224, 224, 0.45) 30%,
rgba(224, 224, 224, 0.88) 65%,
rgba(224, 224, 224, 0.98) 85%,
#e0e0e0 100%
);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
z-index: 2;
}
.tour-picker-floating-actions {
position: absolute;
bottom: 14px;
left: 14px;
z-index: 5;
display: flex;
align-items: center;
gap: 12px;
pointer-events: auto;
}
.tour-picker-floating-actions button.secondary {
box-shadow: 4px 4px 10px #bebebe, -4px -4px 10px #ffffff !important;
}
.tour-picker-floating-actions button.secondary:hover {
box-shadow: 0 8px 18px #b0b0b0 !important;
}
.tour-step-budget-panel {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
gap: 16px !important;
}
.budget-directions-panel.tour-step-directions-sticky {
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
background: #e0e0e0 !important;
margin: 10px 0 6px 0 !important;
}
.tour-picker-item-card {
align-items: center;
background: #e0e0e0;
border: 1px solid transparent;
border-radius: 14px;
box-shadow:
4px 4px 10px #bebebe,
-4px -4px 10px #ffffff;
cursor: pointer;
display: flex;
gap: 10px;
justify-content: space-between;
padding: 12px 14px;
transition: box-shadow 140ms ease, transform 120ms ease;
}
.tour-picker-item-card:hover {
box-shadow: 0 6px 14px #b8b8b8;
}
.tour-picker-item-card:active {
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff;
}
.tour-picker-item-card.is-selected.is-budget {
border-color: #f79009;
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff;
}
.tour-picker-item-card.is-selected.is-leader {
border-color: #2e7be6;
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff;
}
.tour-picker-item-main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tour-picker-item-main strong {
color: #101828;
font-size: 14px;
font-weight: 800;
line-height: 1.25;
overflow-wrap: break-word;
}
.tour-picker-item-meta {
color: #667085;
display: flex;
flex-wrap: wrap;
font-size: 12px;
font-weight: 600;
gap: 6px;
}
.tour-picker-meta-tag {
background: rgba(16, 24, 40, 0.05);
border-radius: 6px;
padding: 2px 6px;
}
.tour-picker-selected-check {
color: #067647;
font-size: 16px;
font-weight: 900;
}
.tour-picker-empty {
color: #667085;
font-size: 13px;
font-weight: 600;
grid-column: 1 / -1;
padding: 16px;
text-align: center;
}
.budget-detail-mode .budget-designer-trigger,
.budget-detail-mode #budgetDesigner {
display: none !important;
}
.employee-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
align-items: stretch;
}
.employee-card,
.tour-budget-editor {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
12px 12px 28px #bebebe,
-12px -12px 28px #ffffff !important;
padding: 16px;
}
.employee-card {
background: #e0e0e0 !important;
border: none !important;
box-shadow:
12px 12px 28px #bebebe,
-12px -12px 28px #ffffff !important;
display: flex;
flex-direction: column;
gap: 0;
height: 100%;
}
.employee-card-main {
display: flex;
align-items: flex-start;
gap: 14px;
flex-shrink: 0;
}
.employee-avatar {
align-items: center;
background: #e0e0e0;
border-radius: 20px;
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff;
display: inline-flex;
flex-shrink: 0;
height: 76px;
justify-content: center;
overflow: hidden;
padding: 12px;
width: 76px;
}
.employee-avatar-image {
display: block;
height: 100%;
object-fit: contain;
width: 100%;
}
.employee-avatar--sm {
border-radius: 14px;
height: 48px;
padding: 8px;
width: 48px;
}
.employee-card-fields {
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.employee-card-title-row {
align-items: flex-start;
display: flex;
gap: 10px;
justify-content: space-between;
}
.employee-name {
color: #101828;
font-size: 15px;
font-weight: 750;
line-height: 1.3;
word-break: break-word;
}
.employee-roles-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 2px 0 4px 0;
}
.employee-role-tag {
background: #e0e0e0;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 6px;
box-shadow: inset 1.5px 1.5px 3px #bebebe, inset -1.5px -1.5px 3px #ffffff;
color: #344054;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
padding: 2px 6px;
white-space: nowrap;
}
.employee-line {
color: #667085;
font-size: 13px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.employee-card-spacer {
flex: 1 1 auto;
min-height: 12px;
}
.employee-card-actions {
display: flex;
justify-content: flex-start;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(16, 24, 40, 0.1);
flex-shrink: 0;
}
.tour-budget-editor[hidden] {
display: none;
}
.tour-budget-editor {
background: transparent;
border: 0;
box-shadow: none;
display: grid;
gap: 18px;
padding: 0;
}
.employee-meta,
.tour-status-flow,
.tour-designer-actions,
.budget-designer-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.total-pill,
.tour-status-step {
background: #eef2f6;
border-radius: 999px;
color: #344054;
display: inline-flex;
font-weight: 700;
padding: 6px 10px;
}
.budget-title-error {
color: #b42318;
}
.tour-status-step.current {
background: #dcfae6;
color: #067647;
}
.tour-detail-panel {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: grid;
gap: 28px !important;
margin-top: 0;
padding: 0;
}
.tour-detail-navigation {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
}
.tour-detail-navigation > [data-action="change-tour-status"] {
min-height: 40px;
width: auto;
}
.tour-detail-hero {
align-items: stretch;
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7) !important;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
}
.tour-detail-hero-main {
align-content: start;
align-items: start;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
display: grid;
gap: 14px;
grid-template-columns: 1fr;
padding: 22px 24px;
}
.tour-detail-title-row {
align-items: center;
display: grid;
gap: 14px;
grid-template-columns: 58px minmax(0, 1fr);
min-width: 0;
}
.tour-detail-hero-icon {
align-items: center;
background: #e0e0e0;
border-radius: 999px;
box-shadow:
4px 4px 10px #bebebe,
-4px -4px 10px #ffffff;
color: var(--btt-color-accent-text);
display: inline-flex;
height: 58px;
justify-content: center;
width: 58px;
}
.tour-detail-hero-icon svg {
fill: none;
height: 30px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
width: 30px;
}
.tour-detail-title-block {
display: grid;
gap: 8px;
justify-items: start;
min-width: 0;
}
.tour-detail-title-row h3 {
color: #101828;
font-size: 32px;
line-height: 1.08;
margin: 0;
}
.tour-detail-hero-metrics {
align-self: stretch;
background: #e0e0e0;
border-left: 1px solid rgba(16, 24, 40, 0.08);
box-shadow: none;
display: grid;
height: 100%;
margin: 0;
min-width: 0;
}
.tour-detail-metric {
display: grid;
gap: 4px;
padding: 14px 18px;
}
.tour-detail-metric + .tour-detail-metric {
border-top: 1px solid rgba(16, 24, 40, 0.08);
}
.tour-detail-metric span,
.tour-detail-metric small {
color: #667085;
font-size: 13px;
font-weight: 800;
}
.tour-detail-metric strong {
color: #079455;
font-size: 26px;
font-weight: 900;
line-height: 1.1;
}
.tour-detail-metric + .tour-detail-metric strong {
color: #101828;
font-size: 22px;
}
.tour-detail-status-flow {
display: grid;
gap: 10px;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100%;
}
.tour-detail-status-flow .tour-status-step {
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow:
6px 6px 14px #bebebe,
-6px -6px 14px #ffffff;
box-sizing: border-box;
color: #667085 !important;
font-size: 13px;
font-weight: 800;
justify-content: center;
min-width: 0;
padding: 10px 8px;
text-align: center;
width: 100%;
}
.tour-detail-status-flow .tour-status-step.current {
background: #e0e0e0 !important;
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff;
color: var(--btt-color-accent-text) !important;
}
.tour-detail-meta-grid {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7) !important;
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
overflow: hidden;
}
.tour-detail-meta-item {
align-content: start;
display: grid;
gap: 8px;
grid-template-rows: auto 1fr;
justify-items: center;
min-height: 0;
min-width: 0;
padding: 16px 10px 14px;
text-align: center;
}
.tour-detail-meta-item + .tour-detail-meta-item {
border-left: 1px solid rgba(16, 24, 40, 0.08);
}
.tour-detail-meta-icon {
align-items: center;
background: #e0e0e0;
border-radius: 999px;
box-shadow:
4px 4px 10px #bebebe,
-4px -4px 10px #ffffff;
color: var(--btt-color-accent-text);
display: inline-flex;
font-size: 17px;
font-style: normal;
font-weight: 900;
height: 32px;
justify-content: center;
width: 32px;
}
.tour-detail-meta-head {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
min-height: 0;
}
.tour-detail-meta-icon svg {
fill: none;
height: 16px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
width: 16px;
}
.tour-detail-meta-item small {
color: #667085;
display: block;
font-size: 11px;
font-weight: 800;
line-height: 1.15;
}
.tour-detail-meta-item strong {
align-self: center;
color: #344054;
display: block;
font-size: 17px;
line-height: 1.25;
max-width: 100%;
overflow-wrap: anywhere;
}
.tour-detail-meta-hint {
align-self: center;
color: #98a2b3;
font-size: 10px;
font-weight: 700;
}
.tour-base-currency-edit {
align-self: center;
display: grid;
justify-items: center;
margin: 0;
min-width: 0;
width: 100%;
}
.tour-base-currency-edit select {
appearance: none;
background: #f4f6f8;
border: 1px solid rgba(16, 24, 40, 0.12);
border-radius: 12px;
color: #344054;
cursor: pointer;
font: inherit;
font-size: 16px;
font-weight: 800;
max-width: 100%;
padding: 8px 12px;
text-align: center;
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.tour-linked-budget {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7) !important;
padding: 0;
}
.tour-linked-leader .tour-linked-budget-head {
cursor: default;
}
.tour-linked-leader .tour-linked-budget-total {
align-self: center;
}
.tour-linked-leader .tour-linked-budget-actions {
margin-top: 0;
}
.tour-linked-leader.is-unassigned .tour-linked-budget-head {
align-items: center;
grid-template-columns: 1fr auto;
}
.tour-leader-unassigned-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.tour-leader-unassigned-notice {
align-items: center;
color: #b54708;
display: inline-flex;
font-size: 14px;
font-weight: 700;
gap: 8px;
line-height: 1.4;
}
.tour-leader-unassigned-icon {
color: #d97706;
flex-shrink: 0;
}
.tour-assign-leader-btn {
align-items: center !important;
background: #101828 !important;
border-radius: 12px !important;
box-shadow: 0 2px 4px rgba(16, 24, 40, 0.1) !important;
color: #ffffff !important;
display: inline-flex !important;
font-size: 13px !important;
font-weight: 700 !important;
justify-content: center !important;
min-height: 40px !important;
padding: 10px 18px !important;
transition: all 0.15s ease !important;
white-space: nowrap;
}
.tour-assign-leader-btn:hover:not(:disabled) {
background: #1f2937 !important;
box-shadow: 0 4px 8px rgba(16, 24, 40, 0.15) !important;
transform: translateY(-1px);
}
.tour-assign-leader-btn:active:not(:disabled) {
transform: translateY(0);
}
@media (max-width: 768px) {
.tour-linked-leader.is-unassigned .tour-linked-budget-head {
gap: 12px;
grid-template-columns: 1fr;
}
.tour-assign-leader-btn {
width: 100%;
}
}
.tour-replace-budget-picker {
background: #e0e0e0 !important;
border: none !important;
border-radius: 20px;
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff;
display: grid;
gap: 12px;
padding: 14px;
}
.tour-replace-budget-picker[hidden] {
display: none;
}
.tour-replace-budget-picker-head {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
}
.tour-replace-budget-picker-head strong {
color: #101828;
font-size: 16px;
}
.tour-replace-budget-picker > p {
color: #667085;
font-size: 13px;
font-weight: 800;
margin: 0;
}
.tour-linked-budget-head {
align-items: center;
cursor: pointer;
display: grid;
gap: 16px;
grid-template-columns: minmax(220px, 1fr) minmax(260px, auto) auto;
list-style: none;
padding: 14px 18px;
}
.tour-linked-budget-head::-webkit-details-marker {
display: none;
}
.tour-linked-budget-head h4 {
color: #101828;
font-size: 18px;
line-height: 1.2;
margin: 0;
}
.tour-linked-budget-head > div:first-child > span,
.tour-linked-budget-head small {
color: #667085;
display: block;
font-size: 13px;
font-style: normal;
font-weight: 800;
margin-top: 6px;
}
.tour-linked-budget-meta {
display: grid;
gap: 6px;
}
.tour-linked-budget-meta span {
align-items: center;
display: grid;
gap: 8px;
grid-template-columns: 74px minmax(0, 1fr);
}
.tour-linked-budget-meta small {
color: #667085;
font-size: 12px;
font-weight: 900;
margin: 0;
}
.tour-linked-budget-meta strong {
color: #344054;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tour-linked-budget-total {
display: grid;
justify-items: end;
}
.tour-linked-budget-total > strong {
color: #101828;
font-size: 24px;
font-weight: 900;
line-height: 1.15;
white-space: nowrap;
}
.tour-linked-budget-actions {
align-items: center;
display: flex;
gap: 8px;
margin-top: 6px;
}
.tour-linked-budget-actions em {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow: none;
box-sizing: border-box;
color: var(--btt-color-accent-text) !important;
display: inline-flex;
font-size: 13px;
font-style: normal;
font-weight: 800;
height: 38px;
line-height: 1;
padding: 0 14px;
transition: box-shadow 140ms ease, transform 120ms ease;
}
.tour-linked-budget-head:hover .tour-linked-budget-actions em,
.tour-linked-budget-actions em:hover {
box-shadow: 0 7px 14px #b0b0b0;
}
.tour-linked-budget-head:active .tour-linked-budget-actions em,
.tour-linked-budget-actions em:active {
box-shadow: 0 2px 6px #b0b0b0;
transform: translateY(1px);
}
.tour-linked-budget-actions .tour-replace-budget-button {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px;
box-shadow: none !important;
box-sizing: border-box;
color: var(--btt-color-accent-text) !important;
display: inline-flex;
height: 38px;
justify-content: center;
min-height: 38px;
min-width: 38px;
padding: 0;
transition: box-shadow 140ms ease, transform 120ms ease;
width: 38px;
}
.tour-linked-budget-actions .tour-replace-budget-button:hover:not(:disabled) {
background: #e0e0e0 !important;
box-shadow: 0 7px 14px #b0b0b0 !important;
}
.tour-linked-budget-actions .tour-replace-budget-button:active:not(:disabled) {
box-shadow: 0 2px 6px #b0b0b0 !important;
transform: translateY(1px);
}
.tour-linked-budget-actions .tour-replace-budget-button svg {
display: block;
fill: currentColor;
height: 18px;
stroke: none;
width: 20px;
}
.tour-linked-budget-actions .tour-replace-budget-button svg.is-stroke {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.tour-linked-budget .close-label,
.tour-linked-budget[open] .open-label {
display: none;
}
.tour-linked-budget[open] .close-label {
display: inline;
}
.tour-linked-budget .budget-statement {
border-top: 1px solid rgba(16, 24, 40, 0.08);
gap: 8px;
padding: 10px 12px 12px;
}
/* Detailed tour: neumorphic cards matching booking cabinet. */
.tour-detail-panel .booking-prepay-block,
.tour-detail-panel .tour-income.booking-prepay-block,
.tour-detail-panel .tour-participants.booking-prepay-block,
.tour-detail-panel .tour-participant-form {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7) !important;
}
.tour-detail-panel .booking-prepay-block {
padding: 16px;
}
.tour-detail-panel .tour-participant-form {
margin-top: 12px;
padding: 16px;
box-shadow:
inset 5px 5px 10px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55) !important;
}
.tour-detail-panel .booking-prepay-summary strong {
background: #e0e0e0 !important;
border: none !important;
border-radius: 999px;
box-shadow: none;
color: var(--btt-color-accent-text) !important;
font-size: 15px;
font-weight: 800;
line-height: 1;
padding: 8px 12px;
transition: box-shadow 140ms ease;
}
.tour-detail-panel .booking-prepay-summary:hover strong {
box-shadow: 0 5px 12px #b0b0b0;
}
.tour-detail-panel .booking-prepay-entry,
.tour-detail-panel .budget-statement-category {
background: #e0e0e0 !important;
border: none !important;
box-shadow:
8px 10px 18px #bebebe,
-4px -4px 12px rgba(255, 255, 255, 0.65);
}
.tour-linked-budget .budget-statement-category.compact {
gap: 0;
padding: 8px 10px;
}
.tour-linked-budget .budget-statement-category.compact .budget-statement-category-head {
padding-bottom: 5px;
}
.tour-linked-budget .budget-statement-category.compact .budget-statement-category-head h5 {
font-size: 14px;
}
.tour-linked-budget .budget-statement-category.compact .budget-statement-category-head strong {
font-size: 13px;
}
.tour-linked-budget .budget-statement-category.compact .budget-statement-row {
padding: 5px 0;
}
.tour-linked-budget .budget-statement-category.compact .budget-statement-row span,
.tour-linked-budget .budget-statement-category.compact .budget-statement-row strong {
font-size: 13px;
}
.tour-linked-budget .budget-statement-category.compact .budget-statement-row small {
font-size: 11px;
}
.tour-participants {
gap: 0;
overflow: visible;
}
.tour-income.booking-prepay-block {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7) !important;
display: grid;
gap: 10px;
padding: 16px;
}
.tour-income-body {
display: grid;
gap: 12px;
min-width: 0;
padding-top: 4px;
}
.tour-income-table-wrap {
background: #e0e0e0;
border-radius: 16px;
box-shadow:
inset 4px 4px 8px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55);
overflow-x: auto;
padding: 4px 8px 8px;
}
.tour-income-table {
border-collapse: collapse;
min-width: 760px;
width: 100%;
}
.tour-income-table th,
.tour-income-table td {
border-bottom: 1px solid rgba(16, 24, 40, 0.08);
color: #344054;
font-size: 13px;
padding: 10px 8px;
text-align: left;
vertical-align: top;
}
.tour-income-table th {
background: transparent;
color: #667085;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.tour-income-table td.num {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tour-income-kind {
background: #e0e0e0;
border-radius: 999px;
box-shadow:
3px 3px 8px #bebebe,
-3px -3px 8px #ffffff;
color: var(--btt-color-accent-text);
display: inline-flex;
font-size: 12px;
font-weight: 800;
line-height: 1;
padding: 5px 8px;
}
.tour-income-kind-prepay,
.tour-income-kind-payment,
.tour-income-kind-merch,
.tour-income-kind-extra_service {
background: #e0e0e0;
color: var(--btt-color-accent-text);
}
.tour-income-empty {
color: #667085;
font-weight: 700;
margin: 0;
padding: 8px 0;
text-align: center;
}
.tour-income-empty-inline {
color: #98a2b3;
font-weight: 600;
padding: 10px 8px !important;
}
.tour-income-participant td {
background: transparent;
border-bottom: 1px solid rgba(16, 24, 40, 0.1);
color: #101828;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.01em;
padding: 12px 8px 8px;
}
.tour-income-subtotal td {
background: transparent;
font-weight: 700;
}
.tour-income-grand-total td {
background: transparent;
border-bottom: 0;
color: var(--btt-color-accent-text);
font-size: 14px;
font-weight: 800;
}
.booking-prepay-summary strong {
background: #e0e0e0 !important;
border-radius: 999px;
box-shadow: none;
color: var(--btt-color-accent-text) !important;
font-size: 15px;
font-weight: 800;
line-height: 1;
padding: 8px 12px;
transition: box-shadow 140ms ease;
}
.booking-prepay-summary:hover strong {
box-shadow: 0 5px 12px #b0b0b0;
}
.tour-participants.booking-prepay-block {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7) !important;
display: grid;
gap: 10px;
padding: 16px;
}
.tour-participants-body {
display: grid;
gap: 12px;
min-width: 0;
}
.tour-participants ul {
border: 0;
border-radius: 0;
display: grid;
gap: 12px;
margin: 0;
padding: 0;
}
.tour-participants li {
border: 0;
padding: 0;
}
.tour-participants li:first-child {
padding-top: 0;
}
.tour-participant-card {
background: #e0e0e0 !important;
border: none !important;
border-radius: 18px;
box-shadow:
8px 8px 18px #bebebe,
-6px -6px 14px #ffffff !important;
display: grid;
gap: 12px;
padding: 16px 18px;
width: 100%;
}
.tour-participant-card-body {
align-items: stretch;
display: grid;
gap: 16px 20px;
grid-template-columns:
minmax(180px, 1.1fr)
minmax(150px, 0.9fr)
minmax(120px, 0.7fr)
minmax(220px, 1.2fr);
min-width: 0;
}
.tour-participant-identity {
display: grid;
gap: 4px;
min-width: 0;
}
.tour-participant-identity strong {
color: #101828;
font-size: 18px;
font-weight: 800;
line-height: 1.2;
}
.tour-participant-identity small {
color: #667085;
font-size: 13px;
font-weight: 700;
overflow-wrap: anywhere;
}
.tour-participant-status {
align-items: center;
background: #e0e0e0;
border-radius: 999px;
box-shadow:
3px 3px 8px #bebebe,
-3px -3px 8px #ffffff;
display: inline-flex;
font-size: 11px;
font-weight: 800;
justify-self: start;
letter-spacing: 0.02em;
line-height: 1;
margin-top: 8px;
padding: 7px 10px;
width: fit-content;
}
.tour-participant-status.is-paid {
color: #067647;
}
.tour-participant-status.is-partial {
color: #c2410c;
}
.tour-participant-status.is-debt {
color: #b42318;
}
.tour-participant-metrics {
border-left: 1px solid rgba(16, 24, 40, 0.08);
display: grid;
gap: 14px;
min-width: 0;
padding-left: 18px;
}
.tour-participant-metric,
.tour-participant-remainder {
display: grid;
gap: 4px;
min-width: 0;
}
.tour-participant-metric span,
.tour-participant-remainder span,
.tour-participant-detail span {
color: #667085;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
}
.tour-participant-metric strong,
.tour-participant-remainder-value {
color: #101828;
font-size: 20px;
font-variant-numeric: tabular-nums;
font-weight: 800;
line-height: 1.15;
overflow-wrap: anywhere;
}
.tour-participant-remainder {
border-left: 1px solid rgba(16, 24, 40, 0.08);
padding-left: 18px;
}
.tour-participant-remainder-value.is-zero {
color: #98a2b3;
}
.tour-participant-remainder-value.is-due {
color: #b42318;
}
.tour-participant-paid-note {
display: grid;
gap: 2px;
margin-top: 10px;
}
.tour-participant-paid-note span {
color: #667085;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
}
.tour-participant-paid-note strong {
color: #101828;
font-size: 14px;
font-variant-numeric: tabular-nums;
font-weight: 800;
line-height: 1.2;
overflow-wrap: anywhere;
}
.tour-participant-paid-note small {
color: #667085;
font-size: 12px;
font-weight: 700;
}
.tour-participant-side {
align-items: start;
border-left: 1px solid rgba(16, 24, 40, 0.08);
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 1fr) auto;
min-width: 0;
padding-left: 18px;
}
.tour-participant-details {
display: grid;
gap: 6px;
min-width: 0;
}
.tour-participant-detail {
align-items: baseline;
display: grid;
gap: 10px;
grid-template-columns: minmax(0, 1fr) auto;
}
.tour-participant-detail strong {
color: #101828;
font-size: 12px;
font-variant-numeric: tabular-nums;
font-weight: 800;
text-align: right;
white-space: normal;
}
.tour-participant-actions {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: flex-start;
}
.tour-participant-actions .icon-button {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px;
box-shadow:
4px 4px 10px #bebebe,
-4px -4px 10px #ffffff !important;
color: var(--btt-color-accent-text) !important;
display: inline-flex;
height: 38px;
justify-content: center;
min-height: 38px;
min-width: 38px;
padding: 0;
transition: box-shadow 140ms ease, transform 120ms ease;
width: 38px;
}
.tour-participant-actions .icon-button:hover:not(:disabled) {
background: #e0e0e0 !important;
box-shadow: 0 7px 14px #b0b0b0 !important;
}
.tour-participant-actions .icon-button:active:not(:disabled) {
box-shadow: 0 2px 6px #b0b0b0 !important;
transform: translateY(1px);
}
.tour-participant-actions .icon-button svg,
.tour-participant-edit-actions button[data-action="toggle-participant-editor"] svg {
display: block;
fill: currentColor;
height: 18px;
stroke: none;
width: 18px;
}
.tour-participant-actions .icon-button svg.is-stroke,
.tour-participant-edit-actions button[data-action="toggle-participant-editor"] svg.is-stroke {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.tour-participant-edit-button,
.tour-participant-delete-button {
background: #e0e0e0 !important;
border: none !important;
color: var(--btt-color-accent-text) !important;
}
.tour-participant-delete-button:hover:not(:disabled) {
background: #e0e0e0 !important;
box-shadow: 0 7px 14px #b0b0b0 !important;
color: var(--btt-color-accent-text) !important;
}
.tour-participant-edit-form {
background: #e0e0e0 !important;
border: none !important;
border-radius: 16px;
box-shadow:
inset 5px 5px 10px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55);
display: grid;
gap: 12px;
margin-top: 12px;
padding: 14px;
}
.tour-participant-edit-form[hidden] {
display: none;
}
.tour-participant-edit-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
.tour-participant-edit-actions > button[type="submit"]:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.tour-participant-history-toggle {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff !important;
color: #344054 !important;
cursor: pointer;
display: flex;
font-size: 13px;
font-weight: 800;
gap: 10px;
height: 42px;
justify-content: space-between;
min-height: 42px;
padding: 0 14px;
transition: box-shadow 140ms ease;
width: 100%;
}
.tour-participant-history-toggle:hover:not(:disabled) {
background: #e0e0e0 !important;
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff !important;
transform: none;
}
.tour-participant-history-toggle[aria-expanded="true"] {
box-shadow:
4px 4px 10px #bebebe,
-4px -4px 10px #ffffff !important;
}
.tour-participant-history-toggle span {
align-items: center;
background: #e0e0e0;
border-radius: 999px;
box-shadow:
3px 3px 8px #bebebe,
-3px -3px 8px #ffffff;
color: #475467;
display: inline-flex;
font-size: 12px;
font-weight: 800;
height: 24px;
justify-content: center;
min-width: 24px;
padding: 0 8px;
}
.tour-participant-history-panel {
background: transparent !important;
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 320ms ease,
opacity 200ms ease;
}
.tour-participant-history-panel[hidden] {
display: none;
}
.tour-participant-history-panel.open {
background: transparent !important;
display: grid;
grid-template-rows: 1fr;
opacity: 1;
}
.tour-participant-history-panel-inner {
background: transparent !important;
display: grid;
gap: 10px;
min-height: 0;
overflow: hidden;
}
.tour-participant-history-panel.open .tour-participant-history-panel-inner {
overflow: visible;
}
.tour-participant-history-item {
background: #e0e0e0 !important;
border: none !important;
border-radius: 16px;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
padding: 12px 14px;
}
.tour-participant-history-item-head {
align-items: center;
display: flex;
gap: 8px;
justify-content: space-between;
}
.tour-participant-history-item-head span {
color: #101828;
font-size: 13px;
font-weight: 900;
}
.tour-participant-history-item-head small {
color: #667085;
font-size: 12px;
font-weight: 700;
}
.tour-participant-history-rows {
display: grid;
gap: 8px;
margin-top: 10px;
}
.tour-participant-history-row {
align-items: center;
background: #e0e0e0;
border-radius: 12px;
box-shadow:
3px 3px 8px #bebebe,
-3px -3px 8px #ffffff;
display: grid;
gap: 8px;
grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
padding: 10px 12px;
}
.tour-participant-history-row span {
color: #475467;
font-size: 12px;
font-weight: 800;
}
.tour-participant-history-row small {
color: #98a2b3;
font-size: 12px;
font-weight: 700;
}
.tour-participant-history-row strong {
color: #101828;
font-size: 12px;
font-weight: 900;
}
.tour-participant-history-rows .empty-state {
background: transparent !important;
border: 0 !important;
color: #667085;
font-size: 12px;
font-weight: 700;
margin: 0;
padding: 4px 0;
}
.tour-participant-empty {
align-items: center;
border-radius: 8px;
display: grid !important;
gap: 14px;
grid-template-columns: 48px minmax(0, 1fr);
justify-content: start !important;
margin: 18px 0;
padding: 18px 22px !important;
}
.tour-participant-empty-icon {
align-items: center;
background: #dcfae6;
border-radius: 999px;
color: #079455;
display: inline-flex;
height: 44px;
justify-content: center;
width: 44px;
}
.tour-participant-empty-icon svg {
fill: none;
height: 22px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
width: 22px;
}
.tour-participant-empty strong {
color: #344054;
display: block;
font-size: 15px;
}
.tour-participant-empty small {
color: #667085;
display: block;
font-size: 13px;
font-weight: 700;
margin-top: 4px;
}
.tour-participant-locked-note {
color: #667085;
font-size: 13px;
font-weight: 600;
line-height: 1.45;
margin: 12px 0 0;
}
.tour-participant-form {
background: #e0e0e0 !important;
border: none !important;
border-radius: 20px;
box-shadow:
inset 6px 6px 12px #bebebe,
inset -6px -6px 12px #ffffff;
display: grid;
gap: 12px;
padding: 14px;
}
.tour-participant-form-head {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tour-participant-form-head strong {
color: #101828;
font-size: 17px;
}
.tour-participant-form-head span {
color: #667085;
font-size: 13px;
font-weight: 800;
}
.budget-detail-screen {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: grid;
gap: 22px;
margin-top: 16px;
padding: 0;
}
.budget-detail-screen[hidden] {
display: none;
}
.budget-detail-screen-head {
display: flex;
flex-direction: column;
gap: 18px;
}
.budget-detail-nav {
align-items: center;
display: grid;
gap: 12px;
grid-template-columns: 52px minmax(0, 1fr) 52px;
}
.budget-detail-nav-spacer {
height: 52px;
width: 52px;
}
.budget-detail-screen-head h3 {
color: #101828;
font-size: 34px;
line-height: 1.1;
margin: 0;
text-align: center;
}
.budget-detail-screen-head span {
color: #667085;
font-size: 14px;
font-weight: 800;
}
.budget-detail-title-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
min-width: 0;
text-align: center;
}
.budget-detail-title-row .budget-status-badge {
position: static;
}
.budget-detail-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.budget-detail-actions button {
width: auto;
}
.budget-detail-metrics {
background: #e0e0e0;
border: none;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7);
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 18px;
}
.budget-detail-metric {
align-items: center;
background: #e0e0e0;
border-radius: 16px;
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff;
display: grid;
gap: 16px;
grid-template-columns: 64px 1fr;
min-width: 0;
padding: 18px;
}
.budget-detail-metric-total,
.budget-detail-metric-person,
.budget-detail-metric-markup,
.budget-detail-metric-selling {
background: #e0e0e0;
}
.budget-detail-metric-icon {
align-items: center;
background: rgba(255, 255, 255, 0.74);
border-radius: 16px;
color: #2e7be6;
display: inline-flex;
font-size: 14px;
font-weight: 900;
height: 56px;
justify-content: center;
width: 56px;
}
.budget-detail-metric-total .budget-detail-metric-icon {
color: #079455;
}
.budget-detail-metric-markup .budget-detail-metric-icon {
color: #c4320a;
}
.budget-detail-metric-selling .budget-detail-metric-icon {
color: #6941c6;
}
.budget-detail-metric span,
.budget-detail-meta-grid span {
color: #667085;
font-size: 13px;
font-weight: 800;
}
.budget-detail-metric strong {
color: #078348;
display: block;
font-size: 26px;
line-height: 1.1;
margin-top: 8px;
}
.budget-detail-metric-person strong {
color: #2e7be6;
}
.budget-detail-metric small {
color: #667085;
display: block;
font-size: 13px;
font-weight: 700;
margin-top: 8px;
}
.budget-detail-meta-grid {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7);
display: grid;
gap: 16px;
grid-template-columns: repeat(5, minmax(0, 1fr));
padding: 18px;
}
.budget-detail-meta-grid div {
min-width: 0;
}
.budget-detail-meta-grid strong {
color: #101828;
display: block;
font-size: 15px;
font-weight: 800;
margin-top: 4px;
overflow-wrap: anywhere;
}
.budget-detail-currencies strong {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.budget-add-currency-button {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px;
box-shadow:
4px 4px 10px #bebebe,
-4px -4px 10px #ffffff !important;
color: var(--btt-color-accent-text) !important;
display: inline-flex;
flex: 0 0 auto;
font-size: 20px;
font-weight: 700;
height: 32px;
justify-content: center;
line-height: 1;
min-height: 32px;
min-width: 32px;
padding: 0;
width: 32px;
}
.budget-add-currency-button > span {
display: block;
line-height: 1;
transform: translateY(1px);
}
.budget-add-currency-button:hover:not(:disabled) {
background: #e0e0e0 !important;
box-shadow: 0 6px 12px #b0b0b0 !important;
}
.ceo-add-budget-currencies-dialog {
background: #e0e0e0 !important;
border: 0;
border-radius: 24px;
max-width: min(720px, calc(100vw - 32px));
padding: 0;
width: 100%;
}
.ceo-add-budget-currencies-dialog::backdrop {
background: rgba(16, 24, 40, 0.35);
}
.ceo-add-budget-currencies-panel {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff !important;
display: grid;
gap: 16px;
padding: 22px;
}
.ceo-add-budget-currencies-head {
align-items: start;
display: flex;
gap: 12px;
justify-content: space-between;
}
.ceo-add-budget-currencies-head h3 {
color: #101828;
font-size: 20px;
font-weight: 800;
margin: 0 0 6px;
}
.ceo-add-budget-currencies-head p {
color: #667085;
font-size: 13px;
font-weight: 600;
margin: 0;
}
.ceo-add-budget-currencies-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.ceo-add-budget-currencies-status {
color: #b42318;
font-size: 13px;
font-weight: 700;
min-height: 1.2em;
}
.budget-detail-section-title {
color: #101828;
font-family: inherit;
font-size: 21px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0 0 6px;
position: relative;
z-index: 2;
}
.budget-detail-screen .tour-card-details {
display: grid;
gap: 22px;
}
.budget-detail-screen .tour-card-details > div {
display: grid;
gap: 6px;
min-width: 0;
}
.budget-detail-screen .budget-detail-metrics,
.budget-detail-screen .budget-detail-meta-grid,
.budget-detail-screen .budget-statement-category {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7);
position: relative;
z-index: 1;
}
.direction-europe .budget-card-icon {
border-color: rgba(46, 123, 230, 0.22);
color: #2e7be6;
}
.direction-asia .budget-card-icon,
.direction-africa .budget-card-icon {
border-color: rgba(245, 158, 11, 0.24);
color: #f59e0b;
}
.direction-north-america .budget-card-icon,
.direction-south-america .budget-card-icon,
.direction-oceania .budget-card-icon {
border-color: rgba(105, 65, 198, 0.22);
color: #6941c6;
}
.tour-participant-client-picker {
display: grid;
gap: 10px;
margin-bottom: 4px;
}
.tour-participant-client-results {
align-content: start;
background: #e0e0e0;
border: none;
border-radius: 16px;
box-shadow:
inset 4px 4px 8px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55);
display: grid;
gap: 6px;
grid-auto-rows: min-content;
max-height: 240px;
overflow: auto;
padding: 8px;
}
.tour-participant-client-option {
align-items: flex-start;
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px;
box-shadow: none !important;
color: #101828 !important;
cursor: pointer;
display: grid;
gap: 4px;
height: auto !important;
justify-items: start;
line-height: 1.35;
min-height: min-content;
overflow: visible;
padding: 12px 14px;
text-align: left;
transform: none;
transition: box-shadow 140ms ease, transform 120ms ease;
width: 100%;
}
.tour-participant-client-option:last-child {
border-bottom: 0;
}
.tour-participant-client-option:hover:not(:disabled) {
background: #e0e0e0 !important;
box-shadow:
6px 6px 12px #bebebe,
-4px -4px 10px rgba(255, 255, 255, 0.75) !important;
transform: none;
}
.tour-participant-client-option:active:not(:disabled) {
box-shadow:
inset 4px 4px 8px #bebebe,
inset -3px -3px 6px #ffffff !important;
}
.tour-participant-client-option strong,
.tour-participant-client-option span,
.tour-participant-client-option em {
display: block;
width: 100%;
}
.tour-participant-client-option strong {
color: #101828;
font-size: 14px;
font-weight: 800;
line-height: 1.3;
}
.tour-participant-client-option span,
.tour-participant-client-option em {
color: #667085;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 1.35;
}
.tour-participant-client-empty {
color: #667085;
font-size: 13px;
font-weight: 600;
padding: 12px 14px;
}
.tour-participant-selected-client {
align-items: center;
background: #e0e0e0;
border: none;
border-radius: 16px;
box-shadow:
inset 4px 4px 8px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55);
display: flex;
gap: 12px;
justify-content: space-between;
padding: 12px 14px;
}
.tour-participant-selected-client div {
display: grid;
gap: 2px;
}
.tour-participant-selected-client strong {
color: #101828;
font-size: 14px;
}
.tour-participant-selected-client small {
color: #667085;
font-size: 12px;
font-weight: 600;
}
.ceo-cancel-participant-dialog {
border: 0;
border-radius: 16px;
max-width: min(440px, calc(100vw - 24px));
padding: 0;
width: 100%;
}
.ceo-cancel-participant-dialog::backdrop {
background: rgba(16, 24, 40, 0.45);
}
.ceo-cancel-participant-panel {
display: grid;
gap: 14px;
padding: 20px;
}
.ceo-cancel-participant-head {
align-items: flex-start;
display: flex;
gap: 12px;
justify-content: space-between;
}
.ceo-cancel-participant-head h3 {
color: #101828;
font-size: 18px;
font-weight: 900;
margin: 0;
}
.ceo-cancel-participant-head p {
color: #667085;
font-size: 14px;
font-weight: 700;
margin: 4px 0 0;
}
.ceo-cancel-participant-paid {
background: #f8fafc;
border-radius: 12px;
color: #344054;
font-size: 14px;
font-weight: 700;
margin: 0;
padding: 12px 14px;
}
.ceo-cancel-participant-hint {
color: #667085;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
margin: 0;
}
.ceo-cancel-participant-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.ceo-cancel-participant-status {
color: #b42318;
font-size: 13px;
font-weight: 700;
min-height: 1.2em;
}
.budget-basic-row,
.budget-detail-row,
.tour-participant-form-grid {
align-items: end;
display: grid;
gap: 14px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.budget-categories-step {
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-8px);
transition:
max-height 360ms ease,
opacity 220ms ease,
transform 260ms ease;
}
.budget-categories-step.open {
max-height: none;
opacity: 1;
overflow: visible;
transform: translateY(0);
}
.budget-basic-row {
grid-template-columns:
minmax(0, 1.4fr)
minmax(5.2rem, 0.5fr)
minmax(6.5rem, 0.7fr)
minmax(6.2rem, 0.65fr)
minmax(5.2rem, 0.5fr)
minmax(5.2rem, 0.5fr);
}
.budget-basic-row > label,
.budget-basic-row > label > input,
.budget-basic-row > label > select {
min-width: 0;
width: 100%;
}
.budget-basic-row .budget-field-compact select,
.budget-basic-row .budget-field-compact input {
padding-left: 10px;
padding-right: 10px;
}
.budget-composer {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: grid;
gap: 18px;
min-width: 0;
padding: 0;
}
.budget-composer-head {
align-items: start;
display: grid;
gap: 24px;
grid-template-columns: 1fr auto;
}
.budget-composer-head h3 {
color: #101828;
font-size: 26px;
line-height: 1.1;
margin: 0 0 10px;
}
.budget-composer-head p {
color: #667085;
font-size: 17px;
margin: 0;
}
.budget-composer-total {
display: grid;
gap: 8px;
min-width: 190px;
}
.budget-composer-total > span {
color: #667085;
font-size: 16px;
}
.budget-composer-total strong {
align-items: baseline;
color: #101828;
display: flex;
font-size: 34px;
gap: 8px;
line-height: 1;
}
.budget-composer-total small {
color: #101828;
font-size: 18px;
font-weight: 900;
}
.budget-composer-table-head {
background: #e0e0e0;
border: none;
border-radius: 18px;
box-shadow:
inset 3px 3px 7px #c5c5c5,
inset -3px -3px 7px #f5f5f5;
color: #667085;
display: grid;
font-size: 15px;
font-weight: 900;
gap: 16px;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(110px, 0.55fr) 72px;
min-width: 0;
padding: 16px 22px;
position: relative;
z-index: 30;
}
.budget-composer .budget-sections {
display: grid;
gap: 20px;
isolation: isolate;
margin: 4px -14px 0;
overflow: visible;
padding: 14px;
}
.budget-currencies-block {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: grid;
gap: 16px;
margin: 0 0 20px;
overflow: visible;
padding: 0;
}
.budget-currencies-head h4 {
font-size: 18px;
margin: 0 0 4px;
}
.budget-currencies-head p {
color: #667085;
font-size: 14px;
margin: 0;
}
.budget-currency-checks {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
isolation: isolate;
margin: 0 -12px;
overflow: visible;
padding: 12px;
}
.budget-currency-check {
align-items: center;
background: #e0e0e0;
border: none;
border-radius: 16px;
box-shadow:
6px 6px 12px #bebebe,
-6px -6px 12px #ffffff;
color: #101828;
cursor: pointer;
display: flex;
gap: 12px;
min-height: 0;
padding: 14px 16px;
position: relative;
transition: box-shadow 140ms ease, color 140ms ease, transform 120ms ease;
z-index: 1;
}
.budget-currency-check:nth-child(1) { z-index: 40; }
.budget-currency-check:nth-child(2) { z-index: 39; }
.budget-currency-check:nth-child(3) { z-index: 38; }
.budget-currency-check:nth-child(4) { z-index: 37; }
.budget-currency-check:nth-child(5) { z-index: 36; }
.budget-currency-check:nth-child(6) { z-index: 35; }
.budget-currency-check:nth-child(7) { z-index: 34; }
.budget-currency-check:nth-child(8) { z-index: 33; }
.budget-currency-check:nth-child(9) { z-index: 32; }
.budget-currency-check:nth-child(10) { z-index: 31; }
.budget-currency-check:nth-child(11) { z-index: 30; }
.budget-currency-check:nth-child(12) { z-index: 29; }
.budget-currency-check:nth-child(13) { z-index: 28; }
.budget-currency-check:nth-child(14) { z-index: 27; }
.budget-currency-check:nth-child(15) { z-index: 26; }
.budget-currency-check:nth-child(16) { z-index: 25; }
.budget-currency-check:nth-child(17) { z-index: 24; }
.budget-currency-check:nth-child(18) { z-index: 23; }
.budget-currency-check:nth-child(19) { z-index: 22; }
.budget-currency-check:nth-child(20) { z-index: 21; }
.budget-currency-check:nth-child(21) { z-index: 20; }
.budget-currency-check:nth-child(22) { z-index: 19; }
.budget-currency-check:nth-child(23) { z-index: 18; }
.budget-currency-check:nth-child(24) { z-index: 17; }
.budget-currency-check:nth-child(25) { z-index: 16; }
.budget-currency-check:nth-child(26) { z-index: 15; }
.budget-currency-check:nth-child(27) { z-index: 14; }
.budget-currency-check:nth-child(28) { z-index: 13; }
.budget-currency-check:nth-child(29) { z-index: 12; }
.budget-currency-check:nth-child(30) { z-index: 11; }
.budget-currency-check:nth-child(31) { z-index: 10; }
.budget-currency-check:nth-child(32) { z-index: 9; }
.budget-currency-check:nth-child(33) { z-index: 8; }
.budget-currency-check:nth-child(34) { z-index: 7; }
.budget-currency-check:nth-child(35) { z-index: 6; }
.budget-currency-check:nth-child(36) { z-index: 5; }
.budget-currency-check:nth-child(37) { z-index: 4; }
.budget-currency-check:nth-child(38) { z-index: 3; }
.budget-currency-check:nth-child(39) { z-index: 2; }
.budget-currency-check:nth-child(40) { z-index: 1; }
.budget-currency-check:hover,
.budget-currency-check:focus-within {
z-index: 50;
}
.budget-currency-check:hover {
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff;
}
.budget-currency-check:has(input:checked),
.budget-currency-check.locked {
background: #e0e0e0;
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff;
color: var(--btt-color-accent-text);
}
.budget-currency-check.locked {
cursor: default;
}
.budget-currency-check input {
accent-color: var(--btt-color-accent-text);
flex: 0 0 20px;
height: 20px;
margin: 0;
min-height: 20px;
padding: 0;
width: 20px;
}
.budget-currency-check strong {
color: inherit;
display: block;
font-size: 14px;
font-weight: 800;
}
.budget-currency-check small {
color: #667085;
font-size: 12px;
}
.budget-currency-check:has(input:checked) small,
.budget-currency-check.locked small {
color: var(--btt-color-accent-text);
opacity: 0.78;
}
.budget-currency-check small b {
color: inherit;
font-weight: 900;
}
.budget-currency-rates {
align-items: start;
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.budget-currency-rate {
align-content: start;
display: grid;
gap: 6px;
grid-template-rows: auto auto;
}
.budget-currency-rate span,
.budget-currency-rates-empty {
color: #344054;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
min-height: calc(1.35em * 2);
}
.budget-currency-rate input,
.budget-detail-row select[data-field="currencyCode"] {
background: #e0e0e0;
border: none;
border-radius: 14px;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
box-sizing: border-box;
flex-shrink: 0;
font-size: 14px;
font-weight: 700;
height: 40px;
min-height: 40px;
padding: 0 12px;
width: 100%;
}
.budget-currency-rates-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
grid-column: 1 / -1;
}
.budget-currency-rates-actions .secondary {
height: auto;
min-height: 44px;
padding: 12px 20px;
width: auto;
}
.budget-currency-rates-actions small {
color: #667085;
font-size: 12px;
font-weight: 600;
}
.budget-pricing-block {
background: #e0e0e0;
border: none;
border-radius: 24px;
box-shadow:
12px 12px 28px #bebebe,
-12px -12px 28px #ffffff;
display: grid;
gap: 0;
margin-top: 8px;
overflow: hidden;
}
.budget-pricing-row,
.budget-pricing-field {
align-items: center;
display: grid;
gap: 16px;
grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.8fr);
padding: 14px 18px;
}
.budget-pricing-row + .budget-pricing-row,
.budget-pricing-row + .budget-pricing-field,
.budget-pricing-field + .budget-pricing-row,
.budget-pricing-field + .budget-pricing-field {
border-top: 1px solid rgba(16, 24, 40, 0.08);
}
.budget-pricing-row span,
.budget-pricing-field span {
color: #344054;
font-size: 14px;
font-weight: 700;
}
.budget-pricing-row strong {
color: #101828;
font-size: 16px;
font-variant-numeric: tabular-nums;
font-weight: 800;
text-align: right;
}
.budget-pricing-row small,
.budget-pricing-field small {
color: #667085;
font-size: 13px;
font-weight: 700;
}
.budget-pricing-field input {
background: #e0e0e0;
border: none;
border-radius: 14px;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
font-size: 15px;
font-weight: 700;
padding: 10px 12px;
text-align: right;
width: 100%;
}
.budget-detail-row {
align-items: center;
background: transparent;
border-bottom: 1px solid rgba(16, 24, 40, 0.06);
gap: 8px;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(110px, 0.55fr) 72px;
min-width: 0;
padding: 8px 16px;
}
.budget-detail-row.budget-row-invalid {
outline: 1px solid #d92d20;
outline-offset: 4px;
border-radius: 8px;
}
.budget-composer .budget-detail-row input[aria-invalid="true"] {
border-color: #d92d20;
}
.budget-detail-row .budget-amount-error {
color: #b42318;
font-size: 12px;
line-height: 1.4;
}
.budget-detail-row .budget-amount-error[hidden] {
display: none;
}
.budget-detail-row:last-child {
border-bottom: 0;
}
.budget-detail-row.tour-leader-expense-row {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(110px, 0.55fr) 72px;
}
.budget-composer .budget-detail-row label {
color: inherit;
font-size: inherit;
min-width: 0;
width: 100%;
}
.budget-composer .budget-detail-row label > input,
.budget-composer .budget-detail-row label > select {
-webkit-text-fill-color: #101828;
color: #101828 !important;
font-family: var(--btt-font-sans) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.budget-composer .budget-detail-row label > input::placeholder {
-webkit-text-fill-color: #98a2b3;
color: #98a2b3 !important;
font-weight: 600;
opacity: 1;
}
.budget-composer .budget-detail-row input {
height: 36px;
min-height: 36px;
min-width: 0;
padding-bottom: 6px;
padding-top: 6px;
width: 100%;
}
.budget-composer .budget-detail-row select[data-field="currencyCode"],
.budget-composer .budget-detail-row select {
height: 36px;
min-height: 36px;
padding: 5px 10px;
}
.budget-composer .budget-detail-row button[data-action="remove-budget-detail"] {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px;
box-shadow: none !important;
color: var(--btt-color-accent-text) !important;
display: inline-flex;
height: 36px;
justify-content: center;
justify-self: center;
min-height: 36px;
min-width: 36px;
padding: 0;
transition: box-shadow 140ms ease, transform 120ms ease;
width: 36px;
}
.budget-composer .budget-detail-row button[data-action="remove-budget-detail"]:hover:not(:disabled) {
background: #e0e0e0 !important;
box-shadow: 0 7px 14px #b0b0b0 !important;
color: var(--btt-color-accent-text) !important;
}
.budget-composer .budget-detail-row button[data-action="remove-budget-detail"]:active:not(:disabled) {
box-shadow: 0 2px 6px #b0b0b0 !important;
transform: translateY(1px);
}
.budget-composer .budget-detail-row button[data-action="remove-budget-detail"] svg {
display: block;
fill: none;
height: 18px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
width: 18px;
}
.budget-composer .budget-detail-row button[data-action="remove-budget-detail"] svg.is-fill {
fill: currentColor;
stroke: none;
}
.tour-participant-form-grid {
grid-template-columns: 1fr;
}
.tour-participant-form-row {
align-items: end;
display: grid;
gap: 14px;
min-width: 0;
}
.tour-participant-form-row.is-single {
grid-template-columns: 1fr;
}
.tour-participant-form-row.is-contacts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tour-participant-form-row.is-pricing,
.tour-participant-form-row.is-payment,
.tour-participant-form-row.is-final {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.tour-participant-insurance-row {
align-items: end;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.tour-participant-form-grid .tour-participant-insurance-toggle {
align-items: center !important;
display: flex !important;
flex-direction: row !important;
gap: 10px !important;
grid-template-columns: none !important;
min-height: 44px;
}
.tour-participant-form-grid .tour-participant-insurance-toggle span {
display: inline;
line-height: 1.3;
white-space: normal;
}
.tour-participant-form-grid .tour-participant-insurance-toggle input[type="checkbox"] {
appearance: auto !important;
box-shadow: none !important;
flex: 0 0 auto;
height: 18px;
margin: 0;
padding: 0;
width: 18px;
}
.tour-participant-insurance-row > label:not(.tour-participant-insurance-toggle) {
width: min(100%, 260px);
}
.tour-participant-form-grid .tour-participant-field-wide {
grid-column: 1 / -1;
min-width: 0;
}
.tour-participant-form-grid .tour-participant-field-wide input {
width: 100%;
}
.tour-participants ul {
border: 1px solid #e4e7ec;
border-radius: 8px;
padding: 14px;
}
.budget-section {
background: #e0e0e0;
border: none;
border-radius: 20px;
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff;
display: grid;
gap: 0;
margin-top: 0;
min-width: 0;
overflow: visible;
padding: 0;
position: relative;
}
.budget-section:has(.budget-detail-list:not(:empty)) {
padding-bottom: 6px;
}
.budget-composer .budget-sections > .budget-section:nth-of-type(1) { z-index: 20; }
.budget-composer .budget-sections > .budget-section:nth-of-type(2) { z-index: 19; }
.budget-composer .budget-sections > .budget-section:nth-of-type(3) { z-index: 18; }
.budget-composer .budget-sections > .budget-section:nth-of-type(4) { z-index: 17; }
.budget-composer .budget-sections > .budget-section:nth-of-type(5) { z-index: 16; }
.budget-composer .budget-sections > .budget-section:nth-of-type(6) { z-index: 15; }
.budget-composer .budget-sections > .budget-section:nth-of-type(n + 7) { z-index: 14; }
.budget-section-head {
align-items: center;
background: transparent;
border: none;
border-bottom: none;
border-radius: 0;
display: grid;
gap: 12px;
grid-template-columns: auto minmax(0, 1fr) auto auto;
min-width: 0;
padding: 16px 18px;
width: 100%;
}
.budget-section:has(.budget-detail-list:not(:empty)) .budget-section-head {
border-bottom: 1px solid rgba(16, 24, 40, 0.08);
padding-bottom: 12px;
}
.budget-section-head > div {
align-items: center;
display: contents;
gap: 12px;
min-width: 0;
}
.budget-section-head h4 {
color: #101828;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.budget-section-icon {
align-items: center;
background: transparent;
border-radius: 0;
color: var(--btt-color-accent-text);
display: inline-flex;
height: 2.1rem;
justify-content: center;
width: 2.1rem;
}
.budget-section-icon svg {
display: block;
fill: currentColor;
height: 100%;
stroke: none;
width: 100%;
}
.budget-category-total {
color: var(--btt-color-accent-text);
font-size: 14px;
font-weight: 800;
margin-left: 0;
padding-left: 0;
padding-right: 0;
white-space: nowrap;
}
.budget-section-head .icon-button {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px;
box-shadow:
6px 6px 12px #bebebe,
-6px -6px 12px #ffffff !important;
color: var(--btt-color-accent-text) !important;
display: inline-flex;
flex: 0 0 36px;
font-size: 24px;
font-weight: 400;
height: 36px;
justify-content: center;
line-height: 1;
margin-left: 0;
min-height: 36px;
padding: 0;
transition: box-shadow 140ms ease, transform 120ms ease;
width: 36px;
}
.budget-section-head .icon-button:hover:not(:disabled) {
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff !important;
}
.budget-section-head .icon-button:active:not(:disabled) {
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff !important;
transform: translateY(1px);
}
.budget-detail-list,
.budget-statement,
.budget-history,
.tour-participants ul {
display: grid;
gap: 10px;
}
.budget-statement {
gap: 14px;
}
.budget-statement-category {
border: 1px solid #e4e7ec;
border-radius: 8px;
display: grid;
gap: 8px;
margin-top: 0;
padding: 14px 16px;
}
.budget-statement-category-head {
align-items: center;
border-bottom: 1px solid #eef2f6;
display: flex;
gap: 8px;
justify-content: space-between;
padding-bottom: 10px;
}
.budget-statement-category-head > div {
align-items: center;
display: flex;
gap: 0;
min-width: 0;
}
.budget-statement-category-head h5 {
color: #101828;
font-size: 14px;
margin: 0;
}
.budget-statement-category-head strong {
color: #079455;
display: grid;
font-size: 13px;
gap: 1px;
justify-items: end;
white-space: nowrap;
}
.budget-statement-category-head strong small {
color: #667085;
font-size: 11px;
font-weight: 800;
}
.budget-items {
list-style: disc;
margin: 0;
padding: 0 0 0 14px;
}
.budget-statement-row {
align-items: center;
border-bottom: 1px solid #eef2f6;
display: grid;
gap: 8px;
grid-template-columns: 1fr auto;
padding: 10px 0;
}
.budget-statement-row:last-child {
border-bottom: 0;
}
.budget-statement-row span {
color: #101828;
display: block;
font-size: 13px;
font-weight: 800;
}
.budget-statement-row small {
color: #667085;
display: block;
font-size: 11px;
font-weight: 700;
margin-top: 1px;
}
.budget-statement-row strong {
color: #101828;
font-size: 13px;
text-align: right;
white-space: nowrap;
}
.budget-statement-row strong small {
margin-top: 1px;
}
.budget-composer .budget-detail-list {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: grid;
gap: 4px;
overflow: visible;
}
.budget-designer-actions {
justify-content: center;
margin-top: 18px;
}
.budget-detail-list:empty {
display: none;
}
.budget-history,
.tour-participants ul {
list-style: none;
margin: 0;
padding: 0;
}
.budget-history {
gap: 8px;
}
.budget-history-version {
background: #e0e0e0 !important;
border: none !important;
border-radius: 20px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7);
display: grid;
gap: 8px;
padding: 12px 14px;
position: relative;
z-index: 1;
}
.budget-history-version-head {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
}
.budget-history-version-head span {
color: #101828;
display: block;
font-size: 16px;
font-weight: 900;
}
.budget-history-version-head strong,
.budget-history-version-head time {
color: #667085;
font-size: 13px;
font-weight: 800;
}
.budget-history-details {
display: grid;
gap: 6px;
}
.budget-history-initial {
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow:
inset 4px 4px 8px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55);
color: #475467;
font-weight: 800;
line-height: 1.35;
padding: 12px 14px;
}
.budget-history-changes {
display: grid;
gap: 6px;
}
.budget-history-change {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow:
inset 4px 4px 8px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55);
display: grid;
gap: 8px;
grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.9fr) auto;
padding: 10px 12px;
}
.budget-history-change.changed {
box-shadow:
inset 4px 4px 8px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55),
inset 4px 0 0 var(--btt-color-accent);
}
.budget-history-change.added {
box-shadow:
inset 4px 4px 8px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55),
inset 4px 0 0 #079455;
}
.budget-history-change.removed {
box-shadow:
inset 4px 4px 8px #c8c8c8,
inset -3px -3px 6px rgba(255, 255, 255, 0.55),
inset 4px 0 0 #d92d20;
}
.budget-history-change-main > span {
color: var(--btt-color-accent);
display: inline-flex;
font-size: 12px;
font-weight: 900;
margin-bottom: 2px;
}
.budget-history-change.added .budget-history-change-main > span {
color: #079455;
}
.budget-history-change.removed .budget-history-change-main > span {
color: #d92d20;
}
.budget-history-change-main strong {
color: #101828;
display: block;
font-size: 15px;
}
.budget-history-change-main small,
.budget-history-change-actor {
color: #667085;
display: block;
font-size: 12px;
font-weight: 800;
margin-top: 3px;
}
.budget-history-change-values {
display: grid;
gap: 6px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.budget-history-change-values div {
background: transparent;
border: 1px solid var(--btt-color-accent);
border-radius: 8px;
padding: 6px 8px;
}
.budget-history-change-values span {
color: #667085;
display: block;
font-size: 11px;
font-weight: 900;
margin-bottom: 3px;
}
.budget-history-change-values strong {
color: #101828;
font-size: 13px;
white-space: nowrap;
}
.tour-participants li {
align-items: center;
border-top: 1px solid #eef2f6;
display: flex;
gap: 8px;
justify-content: space-between;
padding: 5px 0;
}
.budget-direction-filter-row {
background: transparent !important;
border: 0;
border-bottom: 2px solid #d0d5dd;
border-radius: 0;
display: grid;
gap: 0;
grid-template-columns: repeat(9, minmax(0, 1fr));
margin: 0 0 14px;
padding: 0;
position: relative;
}
.budget-direction-filter-row::after {
background: var(--btt-color-accent);
border-radius: 3px 3px 0 0;
bottom: -2px;
content: "";
height: 3px;
left: 0;
pointer-events: none;
position: absolute;
transition: transform 260ms ease;
width: calc(100% / 9);
}
.budget-direction-filter-row:has(.budget-direction-filter:nth-child(2).active)::after {
transform: translateX(100%);
}
.budget-direction-filter-row:has(.budget-direction-filter:nth-child(3).active)::after {
transform: translateX(200%);
}
.budget-direction-filter-row:has(.budget-direction-filter:nth-child(4).active)::after {
transform: translateX(300%);
}
.budget-direction-filter-row:has(.budget-direction-filter:nth-child(5).active)::after {
transform: translateX(400%);
}
.budget-direction-filter-row:has(.budget-direction-filter:nth-child(6).active)::after {
transform: translateX(500%);
}
.budget-direction-filter-row:has(.budget-direction-filter:nth-child(7).active)::after {
transform: translateX(600%);
}
.budget-direction-filter-row:has(.budget-direction-filter:nth-child(8).active)::after {
transform: translateX(700%);
}
.budget-direction-filter-row:has(.budget-direction-filter:nth-child(9).active)::after {
transform: translateX(800%);
}
.budget-direction-filter,
.budget-status-filter,
.tour-status-filter {
align-items: center;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #667085 !important;
cursor: pointer;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
font-weight: 900;
gap: 6px;
height: auto;
justify-content: center;
line-height: 1.15;
min-height: 40px;
padding: 8px 8px;
text-align: center;
white-space: nowrap;
}
.budget-direction-filter {
font-size: 12px;
min-width: 0;
white-space: normal;
}
.budget-direction-filter:not(.active):hover:not(:disabled),
.budget-status-filter:not(.active):hover:not(:disabled),
.tour-status-filter:not(.active):hover:not(:disabled) {
background: transparent !important;
box-shadow: none !important;
color: #344054 !important;
transform: none !important;
}
.budget-direction-filter.active,
.budget-status-filter.active,
.tour-status-filter.active {
background: transparent !important;
box-shadow: none !important;
color: var(--btt-color-accent) !important;
}
.budget-direction-filter.active:hover:not(:disabled),
.budget-direction-filter.active:active:not(:disabled),
.budget-status-filter.active:hover:not(:disabled),
.budget-status-filter.active:active:not(:disabled),
.tour-status-filter.active:hover:not(:disabled),
.tour-status-filter.active:active:not(:disabled) {
background: transparent !important;
box-shadow: none !important;
color: var(--btt-color-accent) !important;
transform: none !important;
}
.budget-status-filter-row {
background: transparent !important;
border: 0;
border-bottom: 2px solid #d0d5dd;
border-radius: 0;
display: grid;
gap: 0;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0 0 8px;
padding: 0;
position: relative;
}
.budget-status-filter-row::after {
background: var(--btt-color-accent);
border-radius: 3px 3px 0 0;
bottom: -2px;
content: "";
height: 3px;
left: 0;
pointer-events: none;
position: absolute;
transition: transform 260ms ease;
width: 25%;
}
.budget-status-filter-row:has(.budget-status-filter:nth-child(2).active)::after {
transform: translateX(100%);
}
.budget-status-filter-row:has(.budget-status-filter:nth-child(3).active)::after {
transform: translateX(200%);
}
.budget-status-filter-row:has(.budget-status-filter:nth-child(4).active)::after {
transform: translateX(300%);
}
.budget-status-filter {
font-size: 14px;
}
.budget-status-filter span {
background: transparent;
border-radius: 0;
color: inherit;
display: inline-flex;
font-size: 13px;
font-weight: 800;
justify-content: center;
min-width: 20px;
padding: 2px 4px;
}
.budget-status-filter.active span {
background: transparent;
color: var(--btt-color-accent);
}
.tour-status-filter-row {
background: transparent !important;
border: 0;
border-bottom: 2px solid #d0d5dd;
border-radius: 0;
display: grid;
gap: 0;
grid-template-columns: repeat(6, minmax(0, 1fr));
margin: 0 0 14px;
padding: 0;
position: relative;
}
.tour-status-filter-row::after {
background: var(--btt-color-accent);
border-radius: 3px 3px 0 0;
bottom: -2px;
content: "";
height: 3px;
left: 0;
pointer-events: none;
position: absolute;
transition: transform 260ms ease;
width: calc(100% / 6);
}
.tour-status-filter-row:has(.tour-status-filter:nth-child(2).active)::after {
transform: translateX(100%);
}
.tour-status-filter-row:has(.tour-status-filter:nth-child(3).active)::after {
transform: translateX(200%);
}
.tour-status-filter-row:has(.tour-status-filter:nth-child(4).active)::after {
transform: translateX(300%);
}
.tour-status-filter-row:has(.tour-status-filter:nth-child(5).active)::after {
transform: translateX(400%);
}
.tour-status-filter-row:has(.tour-status-filter:nth-child(6).active)::after {
transform: translateX(500%);
}
.tour-status-filter {
font-size: 14px;
min-width: 0;
}
.tour-status-filter span {
background: transparent;
border-radius: 0;
color: inherit;
flex: 0 0 auto;
font-size: 13px;
font-weight: 800;
min-width: 20px;
padding: 2px 4px;
text-align: center;
}
.tour-status-filter.active span {
background: transparent;
color: var(--btt-color-accent);
}
.tour-detail-panel {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: grid;
gap: 28px !important;
margin-top: 0;
padding: 0;
}
.tour-detail-panel .tour-participants ul {
border: 0;
border-radius: 0;
display: grid;
gap: 10px;
padding: 0;
}
.tour-detail-panel .tour-participants li {
border: 0;
display: grid;
gap: 0;
justify-content: stretch;
padding: 0;
}
.tour-detail-panel .tour-participants li:first-child {
padding-top: 0;
}
.tour-detail-panel .tour-participant-empty {
margin: 0;
padding: 14px;
}
.empty-state {
background: #e0e0e0 !important;
border: none !important;
border-radius: 20px;
box-shadow:
inset 6px 6px 12px #bebebe,
inset -6px -6px 12px #ffffff;
color: #667085;
padding: 16px;
text-align: center;
}
@media (max-width: 1180px) {
.budget-detail-meta-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.tour-participant-card-body {
grid-template-columns: 1fr;
}
.tour-participant-metrics,
.tour-participant-remainder,
.tour-participant-side {
border-left: 0;
border-top: 1px solid rgba(16, 24, 40, 0.08);
padding-left: 0;
padding-top: 12px;
}
.tour-participant-side {
grid-template-columns: minmax(0, 1fr) auto;
}
.tour-participant-actions {
flex-direction: row;
}
.tour-participant-history-row {
grid-template-columns: 1fr;
}
.section-heading {
display: grid;
}
.budget-basic-row,
.budget-detail-row {
grid-template-columns: 1fr;
}
.budget-composer {
padding: 18px;
}
.budget-composer-head,
.budget-composer-table-head,
.budget-detail-row,
.budget-pricing-row,
.budget-pricing-field {
grid-template-columns: 1fr;
}
.budget-pricing-row strong,
.budget-pricing-field input {
text-align: left;
}
.budget-composer-table-head {
display: none;
}
.budget-detail-screen {
padding: 0;
}
.budget-detail-nav {
align-items: center;
display: grid;
gap: 12px;
grid-template-columns: 52px minmax(0, 1fr) 52px;
}
.budget-detail-title-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.budget-detail-actions {
align-items: stretch;
display: grid;
justify-content: stretch;
}
.budget-detail-actions button {
width: 100%;
}
.budget-detail-screen-head h3 {
font-size: 24px;
}
.budget-detail-metrics,
.budget-detail-meta-grid,
.budget-history-change,
.budget-history-change-values,
.budget-statement-row,
.tour-detail-hero,
.tour-participant-card,
.tour-participant-history-row,
.tour-participant-form-grid,
.tour-linked-budget-head {
grid-template-columns: 1fr;
}
.tour-participant-form-row.is-single,
.tour-participant-form-row.is-contacts,
.tour-participant-form-row.is-pricing,
.tour-participant-form-row.is-payment,
.tour-participant-form-row.is-final {
grid-template-columns: 1fr;
}
.tour-detail-meta-grid {
grid-auto-flow: row;
grid-template-columns: 1fr;
}
.tour-participant-actions {
justify-self: start;
}
.tour-detail-panel {
padding: 0;
}
.tour-detail-hero-main {
grid-template-columns: 1fr;
padding: 20px;
}
.tour-detail-title-row h3 {
font-size: 28px;
}
.tour-detail-hero-metrics,
.tour-detail-meta-item + .tour-detail-meta-item {
border-left: 0;
}
.tour-detail-meta-item + .tour-detail-meta-item {
border-top: 1px solid #e4e7ec;
}
.tour-linked-budget-head {
padding-left: 18px;
padding-right: 18px;
}
.tour-linked-budget-total {
justify-items: start;
}
.tour-detail-panel .tour-participants ul {
padding-left: 0;
padding-right: 0;
}
.budget-statement-row strong {
text-align: left;
}
}
.booking-prepay-block {
background: #f8fafc;
border: 1px solid #e4e7ec;
border-radius: 14px;
display: grid;
gap: 10px;
padding: 14px;
}
.booking-prepay-details {
display: grid;
gap: 10px;
min-width: 0;
}
.booking-prepay-summary {
align-items: center;
color: #101828;
cursor: pointer;
display: flex;
font-size: 15px;
font-weight: 800;
gap: 10px;
justify-content: space-between;
list-style: none;
margin: 0;
user-select: none;
}
.booking-prepay-summary::-webkit-details-marker {
display: none;
}
.booking-prepay-summary::before {
color: #667085;
content: "▾";
flex: 0 0 auto;
font-size: 12px;
line-height: 1;
transition: transform 0.15s ease;
}
.booking-prepay-details:not([open]) .booking-prepay-summary::before {
transform: rotate(-90deg);
}
.booking-prepay-summary span {
flex: 1 1 auto;
min-width: 0;
}
.booking-prepay-summary strong {
background: #e0e0e0 !important;
border-radius: 999px;
box-shadow: none;
color: var(--btt-color-accent-text) !important;
font-size: 15px;
font-weight: 800;
line-height: 1;
padding: 8px 12px;
transition: box-shadow 140ms ease;
}
.booking-prepay-summary:hover strong {
box-shadow: 0 5px 12px #b0b0b0;
}
/* --- CEO neumorphism (booking-aligned) --- */
.budget-detail-screen:not([hidden]) {
background: #e0e0e0 !important;
border: none !important;
border-radius: 36px;
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff !important;
margin: 24px auto;
max-width: min(1440px, calc(100vw - 80px));
padding: 28px;
width: 100%;
}
.ceo-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ceo-shell textarea,
.budget-detail-screen input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.budget-detail-screen textarea {
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff;
color: #101828;
height: 40px;
min-height: 40px;
padding: 0 12px;
}
.ceo-shell input::placeholder,
.ceo-shell textarea::placeholder,
.budget-detail-screen input::placeholder,
.budget-detail-screen textarea::placeholder {
-webkit-text-fill-color: #98a2b3;
color: #98a2b3;
opacity: 1;
}
.ceo-shell textarea,
.budget-detail-screen textarea {
height: auto;
min-height: 88px;
padding: 10px 12px;
}
.ceo-shell select,
.budget-detail-screen select {
-webkit-appearance: none;
appearance: none;
background-color: #e0e0e0 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-position: right 12px center !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
border: none !important;
border-radius: 14px;
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff;
color: #101828;
cursor: pointer;
height: 40px;
min-height: 40px;
padding: 0 36px 0 12px;
}
.ceo-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.ceo-shell select:focus,
.ceo-shell textarea:focus,
.budget-detail-screen input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.budget-detail-screen select:focus,
.budget-detail-screen textarea:focus {
outline: none;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff,
0 0 0 3px var(--btt-color-accent-focus);
}
.ceo-shell button.ceo-btn,
.ceo-shell button.secondary,
.budget-detail-screen button.ceo-btn,
.budget-detail-screen button.secondary {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow: none !important;
box-sizing: border-box;
color: var(--btt-color-accent-text) !important;
display: inline-flex;
height: auto;
justify-content: center;
min-height: 44px;
padding: 12px 18px;
transition: box-shadow 140ms ease, transform 120ms ease;
}
.ceo-shell button.ceo-btn:hover:not(:disabled),
.ceo-shell button.secondary:hover:not(:disabled),
.budget-detail-screen button.ceo-btn:hover:not(:disabled),
.budget-detail-screen button.secondary:hover:not(:disabled) {
background: #e0e0e0 !important;
box-shadow: 0 7px 14px #b0b0b0 !important;
}
.ceo-shell button.ceo-btn:active:not(:disabled),
.ceo-shell button.secondary:active:not(:disabled),
.budget-detail-screen button.ceo-btn:active:not(:disabled),
.budget-detail-screen button.secondary:active:not(:disabled) {
box-shadow: 0 2px 6px #b0b0b0 !important;
transform: translateY(1px);
}
.budget-detail-screen button.budget-back-button,
.budget-detail-screen a.budget-back-button {
align-items: center;
background: #e0e0e0 !important;
border: none !important;
border-radius: 16px;
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff !important;
color: var(--btt-color-accent-text) !important;
display: inline-flex;
height: 52px !important;
justify-content: center;
min-height: 52px !important;
padding: 0 !important;
transition: box-shadow 140ms ease, transform 120ms ease;
width: 52px !important;
}
.budget-detail-screen button.budget-back-button svg,
.budget-detail-screen a.budget-back-button svg {
display: block;
fill: currentColor;
height: 32px;
stroke: none;
width: 32px;
}
.budget-detail-screen button.budget-back-button svg.is-stroke,
.budget-detail-screen a.budget-back-button svg.is-stroke {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
}
.budget-detail-screen button.budget-back-button:hover:not(:disabled),
.budget-detail-screen a.budget-back-button:hover {
background: #e0e0e0 !important;
box-shadow:
10px 10px 20px #bebebe,
-10px -10px 20px #ffffff !important;
color: var(--btt-color-accent-text) !important;
}
.budget-detail-screen button.budget-back-button:active:not(:disabled),
.budget-detail-screen a.budget-back-button:active {
background: #e0e0e0 !important;
box-shadow:
inset 6px 6px 12px #bebebe,
inset -6px -6px 12px #ffffff !important;
transform: translateY(1px);
}
.ceo-shell .total-pill {
background: #e0e0e0 !important;
border: none !important;
box-shadow:
4px 4px 10px #bebebe,
-4px -4px 10px #ffffff;
}
.ceo-shell input[type="search"] {
border-radius: 999px !important;
}
.ceo-shell .cab-wallet input[type="search"],
.ceo-shell .cab-wallet-recipient-search input,
.ceo-shell .cab-wallet-recipient-trigger {
border-radius: 14px !important;
}
.ceo-shell .budget-statement-category,
.ceo-shell .tour-detail-hero,
.ceo-shell .tour-detail-meta-grid,
.ceo-shell .tour-linked-budget {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 12px 24px #bebebe,
-6px -6px 16px rgba(255, 255, 255, 0.7) !important;
}
.ceo-shell .tour-detail-hero-main {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.ceo-shell .tour-replace-budget-picker {
background: #e0e0e0 !important;
border: none !important;
border-radius: 20px;
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff !important;
}
.ceo-shell .tour-detail-status-flow .tour-status-step {
background: #e0e0e0 !important;
border: none !important;
border-radius: 14px;
box-shadow:
6px 6px 14px #bebebe,
-6px -6px 14px #ffffff !important;
color: #667085 !important;
}
.ceo-shell .tour-detail-status-flow .tour-status-step.current {
box-shadow:
inset 5px 5px 10px #bebebe,
inset -5px -5px 10px #ffffff !important;
color: var(--btt-color-accent-text) !important;
}
.ceo-shell .budget-section {
background: #e0e0e0 !important;
border: none !important;
border-radius: 20px;
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff !important;
}
.ceo-shell .budget-section-head {
background: transparent !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
.ceo-shell .budget-section:has(.budget-detail-list:not(:empty)) .budget-section-head {
border-bottom: 1px solid rgba(16, 24, 40, 0.08) !important;
}
.ceo-shell .budget-pricing-block {
background: #e0e0e0 !important;
border: none !important;
border-radius: 24px;
box-shadow:
10px 10px 22px #bebebe,
-10px -10px 22px #ffffff !important;
}
.ceo-shell .budget-composer-table-head {
background: #e0e0e0 !important;
border: none !important;
box-shadow:
inset 3px 3px 7px #c5c5c5,
inset -3px -3px 7px #f5f5f5 !important;
position: relative;
z-index: 30;
}
.ceo-shell .budget-detail-row,
.ceo-shell .budget-detail-list {
background: transparent;
}
.ceo-shell .budget-section-head .icon-button {
box-shadow:
6px 6px 12px #bebebe,
-6px -6px 12px #ffffff !important;
}
.ceo-shell .budget-section-head .icon-button:hover:not(:disabled) {
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff !important;
}
.ceo-cancel-participant-panel {
background: #e0e0e0 !important;
border: none !important;
border-radius: 28px;
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff !important;
}
/* Executive Dashboard (Home) Neumorphism */
.ceo-dashboard-root {
display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 32px;
background: transparent;
}
.ceo-dashboard-root > .leader-incoming-transfers {
margin: 0;
}
.ceo-dashboard-root .leader-incoming-transfer-card {
gap: 6px;
padding: 10px 14px;
}
.ceo-dashboard-root .leader-incoming-transfer-accept-btn,
.ceo-dashboard-root .leader-incoming-transfer-reject-btn {
min-height: 36px;
padding: 6px 12px;
}
.ceo-dashboard-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 14px;
}
.ceo-dashboard-title {
font-size: 26px;
font-weight: 800;
color: #101828;
margin: 0 0 4px;
letter-spacing: -0.4px;
}
.ceo-dashboard-subtitle {
font-size: 13.5px;
color: #667085;
margin: 0;
line-height: 1.4;
}
.ceo-dashboard-quick-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ceo-dashboard-quick-actions .cab-btn,
.ceo-dashboard-quick-actions .ceo-btn {
min-height: 42px;
padding: 10px 18px;
border-radius: 14px;
}
.ceo-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.ceo-kpi-card {
background: #e0e0e0 !important;
border: none !important;
border-radius: 20px;
padding: 16px 18px;
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
min-width: 0;
box-shadow:
7px 7px 16px #bebebe,
-7px -7px 16px #ffffff !important;
text-decoration: none;
color: inherit;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.ceo-kpi-card.is-link:hover {
transform: translateY(-1px);
box-shadow:
9px 9px 18px #b8b8b8,
-9px -9px 18px #ffffff !important;
}
.ceo-kpi-card.is-link:active {
transform: translateY(1px);
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff !important;
}
.ceo-kpi-card.highlight {
box-shadow:
7px 7px 16px #bebebe,
-7px -7px 16px #ffffff,
inset 0 0 0 1.5px rgba(234, 88, 12, 0.22) !important;
}
.ceo-kpi-card.highlight .ceo-kpi-value {
color: var(--btt-color-accent-text, #c2410c);
}
.ceo-kpi-icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
background: #e0e0e0 !important;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ceo-kpi-icon-wrap svg.ceo-kpi-icon,
.ceo-kpi-icon-wrap svg {
width: auto;
height: auto;
max-width: 26px;
max-height: 26px;
display: block;
}
.ceo-kpi-icon-wrap svg.is-fill path,
.ceo-kpi-icon-wrap svg.is-fill [fill]:not([fill="none"]) {
fill: #344054;
}
.ceo-kpi-card.highlight .ceo-kpi-icon-wrap svg.is-fill path,
.ceo-kpi-card.highlight .ceo-kpi-icon-wrap svg.is-fill [fill]:not([fill="none"]) {
fill: var(--btt-color-accent-text, #c2410c);
}
.ceo-kpi-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ceo-kpi-label {
font-size: 12.5px;
font-weight: 650;
color: #667085;
}
.ceo-kpi-value {
font-size: 30px;
font-weight: 800;
color: #101828;
letter-spacing: -0.5px;
line-height: 1.15;
}
.ceo-kpi-total {
font-size: 16px;
font-weight: 650;
color: #8894a8;
}
.ceo-kpi-subtext {
font-size: 12px;
color: #8894a8;
margin-top: 2px;
}
.ceo-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.ceo-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
}
.ceo-section-head h3 {
font-size: 17px;
font-weight: 800;
color: #101828;
margin: 0;
}
.ceo-section-subtitle {
font-size: 12.5px;
color: #667085;
margin: 3px 0 0;
}
.ceo-section-link {
font-size: 13px;
font-weight: 700;
color: var(--btt-color-accent-text, #ea580c);
text-decoration: none;
white-space: nowrap;
transition: opacity 140ms ease;
}
.ceo-section-link:hover {
opacity: 0.8;
}
.ceo-status-pipeline {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.ceo-pipeline-step {
background: #e0e0e0 !important;
border: none !important;
border-radius: 18px;
padding: 14px 16px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow:
6px 6px 14px #bebebe,
-6px -6px 14px #ffffff !important;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.ceo-pipeline-step:hover {
transform: translateY(-1px);
box-shadow:
8px 8px 16px #b8b8b8,
-8px -8px 16px #ffffff !important;
}
.ceo-pipeline-step:active {
transform: translateY(1px);
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff !important;
}
.ceo-pipeline-step strong {
font-size: 12.5px;
font-weight: 700;
color: #667085;
}
.ceo-pipeline-count {
font-size: 28px;
font-weight: 800;
color: #101828;
letter-spacing: -0.4px;
line-height: 1.1;
}
.ceo-pipeline-step.is-planned .ceo-pipeline-count {
color: #667085;
}
.ceo-pipeline-step.is-open .ceo-pipeline-count {
color: #2563eb;
}
.ceo-pipeline-step.is-progress .ceo-pipeline-count {
color: #059669;
}
.ceo-pipeline-step.is-review .ceo-pipeline-count {
color: #d97706;
}
.ceo-attention-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.ceo-attention-card {
background: #e0e0e0 !important;
border: none !important;
border-radius: 20px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow:
7px 7px 16px #bebebe,
-7px -7px 16px #ffffff !important;
}
.ceo-attention-card-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.ceo-attention-dates {
font-size: 12px;
color: #667085;
font-weight: 600;
}
.ceo-attention-title {
font-size: 15.5px;
font-weight: 750;
color: #101828;
line-height: 1.3;
}
.ceo-attention-meta {
display: flex;
flex-direction: column;
gap: 5px;
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px;
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff !important;
padding: 10px 12px;
font-size: 12.5px;
}
.ceo-attention-meta-item {
display: flex;
justify-content: space-between;
gap: 10px;
color: #667085;
}
.ceo-attention-meta-item strong {
color: #101828;
font-weight: 700;
text-align: right;
}
.ceo-btn-attention {
display: block;
text-align: center;
background: #e0e0e0 !important;
border: none !important;
color: var(--btt-color-accent-text, #c2410c) !important;
font-size: 13px;
font-weight: 750;
padding: 10px 12px;
border-radius: 12px;
text-decoration: none;
box-shadow:
4px 4px 10px #bebebe,
-4px -4px 10px #ffffff !important;
transition: box-shadow 140ms ease, transform 120ms ease, color 140ms ease;
}
.ceo-btn-attention:hover {
background: #e0e0e0 !important;
color: var(--btt-color-accent, #e86339) !important;
box-shadow:
6px 6px 12px #b8b8b8,
-6px -6px 12px #ffffff !important;
}
.ceo-btn-attention:active {
box-shadow:
inset 3px 3px 6px #bebebe,
inset -3px -3px 6px #ffffff !important;
transform: translateY(1px);
}
.ceo-empty-attention {
background: #e0e0e0 !important;
border: none !important;
color: #374151;
border-radius: 18px;
box-shadow:
inset 5px 5px 12px #bebebe,
inset -5px -5px 12px #ffffff !important;
padding: 16px 18px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.45;
}
@media (max-width: 1100px) {
.ceo-kpi-grid,
.ceo-status-pipeline {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.ceo-dashboard-root {
gap: 16px;
}
.ceo-dashboard-header {
align-items: stretch;
}
.ceo-dashboard-quick-actions {
width: 100%;
}
.ceo-dashboard-quick-actions .cab-btn,
.ceo-dashboard-quick-actions .ceo-btn {
flex: 1 1 auto;
}
.ceo-kpi-grid,
.ceo-status-pipeline {
grid-template-columns: 1fr;
}
.ceo-kpi-value,
.ceo-pipeline-count {
font-size: 26px;
}
}
/* ==========================================================================
Neumorphic Concrete Directions Filter Card (Budgets)
Matches the reference card style: #e0e0e0, inset inputs, pressed active buttons
========================================================================== */
.budget-directions-panel {
background: #e0e0e0 !important;
border-radius: 20px !important;
box-shadow: 6px 8px 18px #bebebe, -6px -8px 18px #ffffff !important;
padding: 18px 22px !important;
margin: 16px 0 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
box-sizing: border-box !important;
border: none !important;
}
.budget-directions-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.budget-macro-tabs {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.budget-macro-tab {
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px !important;
box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff !important;
color: #4b5563 !important;
font-family: var(--btt-font-sans, "Manrope", sans-serif) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
padding: 8px 14px !important;
cursor: pointer !important;
transition: all 140ms ease !important;
user-select: none !important;
white-space: nowrap !important;
outline: none !important;
}
.budget-macro-tab:hover:not(:disabled) {
box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff !important;
color: #101828 !important;
}
.budget-macro-tab.active {
box-shadow: inset 3px 3px 6px #bebebe, inset -3px -3px 6px #ffffff !important;
color: var(--btt-color-accent, #e75227) !important;
font-weight: 750 !important;
}
.budget-dir-search-wrap {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
min-width: 200px !important;
max-width: 320px !important;
flex: 1 !important;
}
.budget-dir-search-input {
width: 100% !important;
height: 38px !important;
padding: 8px 32px 8px 14px !important;
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px !important;
box-shadow: inset 3px 3px 6px #bebebe, inset -3px -3px 6px #ffffff !important;
color: #101828 !important;
font-family: var(--btt-font-sans, "Manrope", sans-serif) !important;
font-size: 13px !important;
outline: none !important;
box-sizing: border-box !important;
transition: box-shadow 140ms ease !important;
}
.budget-dir-search-input:focus {
box-shadow: inset 3px 3px 6px #bebebe, inset -3px -3px 6px #ffffff, 0 0 0 2px rgba(231, 82, 39, 0.25) !important;
}
.budget-dir-search-input::placeholder {
color: #98a2b3 !important;
}
.budget-dir-search-clear {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: none !important;
border: none !important;
color: #98a2b3 !important;
cursor: pointer !important;
padding: 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
line-height: 1 !important;
border-radius: 50% !important;
}
.budget-dir-search-clear:hover {
color: #344054 !important;
}
.budget-concrete-chips {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding-top: 10px !important;
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.budget-dir-pill {
background: #e0e0e0 !important;
border: none !important;
border-radius: 12px !important;
box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff !important;
color: #344054 !important;
font-family: var(--btt-font-sans, "Manrope", sans-serif) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
padding: 8px 14px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
transition: all 140ms ease !important;
user-select: none !important;
white-space: nowrap !important;
outline: none !important;
}
.budget-dir-pill:hover:not(:disabled) {
box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff !important;
color: #101828 !important;
}
.budget-dir-pill.active {
box-shadow: inset 3px 3px 6px #bebebe, inset -3px -3px 6px #ffffff !important;
color: var(--btt-color-accent, #e75227) !important;
font-weight: 750 !important;
}
.budget-dir-pill.active:hover:not(:disabled) {
box-shadow: inset 3px 3px 6px #bebebe, inset -3px -3px 6px #ffffff !important;
color: var(--btt-color-accent-hover, #d0441c) !important;
}
.budget-dir-pill-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1 !important;
background: rgba(0, 0, 0, 0.06) !important;
color: #667085 !important;
transition: all 140ms ease !important;
}
.budget-dir-pill.active .budget-dir-pill-count {
background: rgba(231, 82, 39, 0.15) !important;
color: var(--btt-color-accent, #e75227) !important;
}
.budget-dir-pill.has-budgets:not(.active) {
color: #1e293b !important;
}
.budget-dir-toggle-btn {
font-size: 12px !important;
color: var(--btt-color-accent, #e75227) !important;
background: #e0e0e0 !important;
font-weight: 600 !important;
border: 1px dashed rgba(231, 82, 39, 0.35) !important;
}
.budget-directions-trigger {
grid-column: 1;
justify-self: start;
}
@media (max-width: 900px) {
.budget-directions-trigger {
grid-column: 1;
justify-self: stretch;
width: 100%;
}
.budget-directions-trigger button {
width: 100%;
}
}
/* Direction KPI / Stats Bar Cards */
.direction-stat-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 20px !important;
min-height: 52px !important;
border-radius: 16px !important;
background: #e0e0e0 !important;
box-shadow: 6px 6px 14px #bebebe, -6px -6px 14px #ffffff !important;
box-sizing: border-box !important;
}
.direction-stat-label {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--btt-text-muted, #667085) !important;
white-space: nowrap !important;
}
.direction-stat-value-group {
display: inline-flex !important;
align-items: baseline !important;
gap: 5px !important;
white-space: nowrap !important;
}
.direction-stat-num {
font-size: 24px !important;
font-weight: 800 !important;
color: var(--btt-text-primary, #101828) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
}
.direction-stat-sub {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--btt-text-muted, #667085) !important;
line-height: 1 !important;
}