/* YatriEcom trips admin: pieces the trips screens add on top of yatri-theme.css. */

/* Hero band stats row */
.yt-hero-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; position: relative; }
.yt-hero-stats .n { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.yt-hero-stats .l { font-size: .8125rem; opacity: .85; }

/* Underlined tabs */
.yt-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--tblr-border-color); margin-bottom: 1rem; }
.yt-tabs a { padding: .625rem .875rem; font-weight: 700; font-size: .875rem; color: var(--tblr-secondary-color); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.yt-tabs a:hover { color: var(--tblr-body-color); text-decoration: none; }
.yt-tabs a.active { color: #4F46E5; border-color: #4F46E5; }

/* Photo thumbnails (destination and trip images) */
.yt-thumb { width: 56px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--ye-indigo-50); display: inline-flex; align-items: center; justify-content: center; color: #4F46E5; }
.yt-thumb-lg { width: 120px; height: 90px; border-radius: 12px; }
.yt-thumb-xl { width: 240px; height: 120px; border-radius: 14px; }

/* Enquiry pipeline */
.yt-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: .875rem; overflow-x: auto; padding-bottom: .375rem; }
.yt-col { background: var(--tblr-bg-surface-tertiary); border-radius: 16px; padding: .75rem; display: flex; flex-direction: column; gap: .625rem; min-width: 0; }
.yt-col-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.yt-lead { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 14px; padding: .75rem; display: flex; flex-direction: column; gap: .375rem; color: var(--tblr-body-color); text-decoration: none; }
.yt-lead:hover { color: var(--tblr-body-color); text-decoration: none; border-color: #A5ABF0; }
.yt-lead.active { border: 2px solid #4F46E5; }

/* Itinerary day cards in the package editor */
.yt-day { background: #FAFBFE; border: 1px solid var(--tblr-border-color); border-radius: 14px; padding: .875rem; display: flex; flex-direction: column; gap: .625rem; }
[data-bs-theme="dark"] .yt-day { background: var(--tblr-bg-surface-secondary); }
.yt-day-num { width: 32px; height: 32px; border-radius: 50%; background: #4F46E5; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8125rem; flex-shrink: 0; }

/* Route chips (city + nights) */
.yt-city { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--tblr-border-color); border-radius: 10px; padding: .25rem .375rem .25rem .75rem; background: var(--tblr-bg-surface); }

/* Sidebar count badge */
.yt-count { margin-left: auto; background: #FF6B4A; color: #2A0E05; border-radius: 999px; font-size: .6875rem; font-weight: 800; padding: 1px 7px; line-height: 1.5; }
#panel-sidebar .nav-link .yt-count { flex-shrink: 0; margin-right: .25rem; }
#panel-sidebar .nav-link:has(.yt-count) .nav-link-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Small helpers */
.yt-dl { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0; }
.yt-dl dt { font-weight: 400; color: var(--tblr-secondary-color); }
.yt-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.yt-dl .total { font-weight: 800; color: var(--tblr-body-color); border-top: 1px solid var(--tblr-border-color); padding-top: .5rem; }
.yt-next { border: 2px solid #4F46E5 !important; }
.yt-section-title { font-size: 1rem; font-weight: 700; margin: 0; }
.yt-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }

/* Website builder: sections | editor | preview */
.sb-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 991px) { .sb-grid { grid-template-columns: minmax(0, 1fr); } }
.sb-side { position: sticky; top: 1rem; }
.sb-col { max-height: calc(100vh - 2rem); overflow: auto; }
@media (max-width: 991px) { .sb-col { position: static; max-height: none; } }
.sb-item { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; border-bottom: 1px solid var(--tblr-border-color); cursor: pointer; }
.sb-item:hover { background: var(--ye-indigo-50); }
.sb-item.active { background: var(--ye-indigo-50); box-shadow: inset 3px 0 0 #4F46E5; }
.sb-item.off .sb-item-name { opacity: .5; text-decoration: line-through; }
.sb-handle { cursor: grab; color: var(--tblr-secondary-color); padding: .25rem; }
.sb-item-name { flex: 1; min-width: 0; }
.sb-item-name b { display: block; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item-name small { display: block; color: var(--tblr-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-icon-btn { border: 0; background: transparent; color: var(--tblr-secondary-color); padding: .375rem; border-radius: 8px; line-height: 1; }
.sb-icon-btn:hover { background: rgba(79, 70, 229, .1); color: #4F46E5; }
.sb-ghost { opacity: .4; }
.sb-group-title { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tblr-secondary-color); margin: 1.25rem 0 .5rem; }
.sb-group-title:first-child { margin-top: 0; }
.sb-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.sb-variants label { border: 1px solid var(--tblr-border-color); border-radius: 10px; padding: .5rem .625rem; cursor: pointer; font-size: .8125rem; font-weight: 600; }
.sb-variants input:checked + span { color: #4F46E5; }
.sb-variants label:has(input:checked) { border: 2px solid #4F46E5; background: var(--ye-indigo-50); }
.sb-image { display: flex; gap: .75rem; align-items: center; }
.sb-image img, .sb-image .sb-noimg { width: 96px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--ye-indigo-50); display: grid; place-items: center; color: #4F46E5; flex: none; }
.sb-row { border: 1px solid var(--tblr-border-color); border-radius: 12px; padding: .75rem; margin-bottom: .625rem; background: var(--tblr-bg-surface); }
.sb-picked { list-style: none; padding: 0; margin: .5rem 0 0; }
.sb-picked li { display: flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border: 1px solid var(--tblr-border-color); border-radius: 8px; margin-bottom: .25rem; font-size: .8125rem; }
.sb-picked li span { flex: 1; }
.sb-preview .card-header { position: sticky; top: 0; z-index: 2; background: var(--tblr-bg-surface); }
.sb-stage { background: #E9ECF5; padding: 1rem; min-height: 70vh; overflow: hidden; display: flex; justify-content: center; }
.sb-frame-wrap { transform-origin: top center; }
.sb-frame-wrap iframe { display: block; border: 0; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px -18px rgba(16, 24, 40, .4); }
.sb-type { border: 1px solid var(--tblr-border-color); border-radius: 14px; padding: 1rem; height: 100%; display: flex; gap: .75rem; text-align: left; background: var(--tblr-bg-surface); width: 100%; }
.sb-type:hover:not(:disabled) { border-color: #A5ABF0; background: var(--ye-indigo-50); }
.sb-type:disabled { opacity: .5; }