/* Shubh Ventures v1.08 */

/* ---------- "Who is this for?" bar (Theme Studio + Layout Manager) ---------- */
.aud { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-lg, 16px); background: var(--surface, #fff); border: 1px solid var(--border, rgba(15,23,42,.1)); box-shadow: var(--shadow-1, 0 1px 2px rgba(15,23,42,.06)); }
.aud-skel { height: 64px; opacity: .5; }
.aud-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.aud-q { font-weight: 650; font-size: 14px; color: var(--text-strong, var(--text, #0f172a)); }
.aud-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface-muted, rgba(15,23,42,.05)); border: 1px solid var(--border, rgba(15,23,42,.08)); flex-wrap: wrap; }
.aud-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--text-muted, #64748b); background: transparent; border: 0; cursor: pointer; transition: background .15s, color .15s; }
.aud-seg button:hover { color: var(--text, #0f172a); }
.aud-seg button.on { background: var(--surface-elevated, #fff); color: var(--accent, #2563eb); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.aud-sel { min-width: 220px; max-width: 100%; flex: 0 1 320px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong, rgba(15,23,42,.16)); background: var(--surface-elevated, #fff); color: var(--text, #0f172a); font-family: inherit; font-size: 13px; font-weight: 500; }
.aud-msg { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted, #64748b); }
.aud-msg b { color: var(--text, #0f172a); font-weight: 600; }
.aud-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-muted, #64748b); }
.aud-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, rgba(15,23,42,.1)); background: transparent; color: var(--text, #0f172a); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.aud-chip svg { width: 13px; height: 13px; }
.aud-chip.on, .aud-chip:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
@media (max-width: 640px) {
  .aud { padding: 12px; }
  .aud-seg { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }
  .aud-seg button { justify-content: center; padding: 9px 8px; }
  .aud-sel { flex: 1 1 100%; min-width: 0; }
}
#sv-lm .lm-btn.arm, #sv-studio .arm { color: var(--c-danger, #dc2626) !important; border-color: currentColor !important; }

/* ---------- Layout Manager preview: screen never leaks out of the device frame ---------- */
#sv-lm .lm-pv-clip { overflow: hidden; isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
#sv-lm .lm-pv-clip { clip-path: inset(0 round 18px); }
#sv-lm .lm-pv-dev.m .lm-pv-clip { clip-path: inset(0 round 26px); }
#sv-lm .lm-pv-dev.d .lm-pv-clip { clip-path: inset(0 round 7px); }
#sv-lm .lm-pv-clip iframe { display: block; border: 0; }

/* ---------- Tailwind responsive-hide wins over our component display rules ---------- */
@media (min-width: 640px) { .sm\:hidden { display: none !important; } }
@media (min-width: 768px) { .md\:hidden { display: none !important; } }
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
  /* on desktop the ☰ button folds the sidebar into icons (sv-layout.js) */
  header button[data-lm-fold] { display: inline-grid !important; }
  html[data-lm-focus="on"] header button[data-lm-fold] { display: none !important; }
}

/* ---------- phones & tablets: bottom bar + "More" menu ---------- */
@media (max-width: 1023.98px) {
  html[data-lm-mmenu="hide"] header button[aria-label="Open menu"] { display: none !important; }
  /* full labels in the More menu — no "Authentication Ce…" */
  [role="dialog"][aria-label="Control Center"] .list-card .truncate { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  [role="dialog"][aria-label="Control Center"] .list-card { min-height: 46px; }
  html[data-lm-msheet="list"] [role="dialog"][aria-label="Control Center"] .grid.grid-cols-2 { grid-template-columns: 1fr; gap: 4px; }
  html[data-lm-msheet="list"] [role="dialog"][aria-label="Control Center"] .list-card { min-height: 44px; }
  html[data-lm-msheet="tiles"] [role="dialog"][aria-label="Control Center"] .grid.grid-cols-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html[data-lm-msheet="tiles"] [role="dialog"][aria-label="Control Center"] .list-card { flex-direction: column; justify-content: center; text-align: center; gap: 6px; min-height: 84px; padding: 10px 6px; font-size: 12px; }
  html[data-lm-msheet="tiles"] [role="dialog"][aria-label="Control Center"] .list-card svg { width: 22px; height: 22px; }
  /* the SHUBHI button never sits on top of an open menu / sheet */
  body:has([role="dialog"][aria-label="Control Center"]) #shubhi-orb,
  body:has(aside[role="dialog"][aria-modal="true"]) #shubhi-orb { opacity: 0 !important; pointer-events: none !important; transform: scale(.6) !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  [role="dialog"][aria-label="Control Center"] .grid.grid-cols-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-lm-msheet="list"] [role="dialog"][aria-label="Control Center"] .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-lm-msheet="tiles"] [role="dialog"][aria-label="Control Center"] .grid.grid-cols-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* segmented filters fit phone width instead of scrolling with a clipped first item */
@media (max-width: 480px) {
  .segmented { max-width: 100%; }
  .segmented > button, .segmented > a { padding-left: 8px !important; padding-right: 8px !important; font-size: 12px !important; letter-spacing: -.005em; }
}
@media (max-width: 360px) { .segmented > button, .segmented > a { padding-left: 6px !important; padding-right: 6px !important; font-size: 11.5px !important; } }
#sv-lm .lm-extra { margin-top: 16px; display: grid; gap: 16px; }
#sv-lm .lm-extra > .lm-card { margin: 0; }
/* long key/value details stack (label above, value below) */
.sv-kv-stack { flex-direction: column; gap: 4px !important; }
.sv-kv-stack > .text-right { text-align: left !important; }
/* page-top glow: soft edges so no hard band/box shows beside centred content */
main::before { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 40%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 40%, transparent 100%); mask-composite: intersect; }
/* compact sidebar: brand fits instead of "SHUBH VENTU…" */
html[data-lm-sidew="compact"] aside .tracking-\[0\.16em\] { letter-spacing: .05em; font-size: 12px; }
html[data-lm-sidew="compact"] aside .tracking-\[0\.16em\] + div { letter-spacing: .06em; white-space: nowrap; font-size: 10px; }
/* Layout Manager: live preview stays pinned on the right while you scroll the options (desktop) */
@media (min-width: 1101px) {
  #sv-lm .lm-grid > .lm-side { align-self: stretch !important; }
  #sv-lm .lm-side .lm-pv { position: sticky !important; top: calc(var(--header-h, 56px) + 12px); max-height: calc(100vh - var(--header-h, 56px) - 24px); overflow: auto; }
}
/* small selects keep their small size after the custom dropdown takes over (e.g. "Mention someone…") */
.svs-trigger.text-xs { font-size: 12px !important; }
.svs-trigger.h-8 { height: 2rem !important; min-height: 2rem !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.svs-trigger.h-7 { height: 1.75rem !important; min-height: 1.75rem !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* e-mail values in detail tiles: slightly smaller so "…@gmail.com" doesn't split mid-word */
.sv-kv-mail { font-size: 13px !important; overflow-wrap: anywhere; }
/* send-email dialog: the "Cancel" radio duplicated the Cancel button */
.sv-dup-cancel { display: none !important; }
/* Light / Dark / System switch fits a compact sidebar: tighter buttons, label only on the chosen one */
aside [role="group"][aria-label="Theme"] { gap: 2px; padding: 3px; }
aside [role="group"][aria-label="Theme"] > button { min-width: 0; padding: 4px 6px !important; gap: 4px !important; font-size: 12px !important; white-space: nowrap; overflow: hidden; }
html[data-lm-sidew="compact"] aside [role="group"][aria-label="Theme"] > button[aria-pressed="false"] > span { display: none; }
html[data-lm-sidew="compact"] aside [role="group"][aria-label="Theme"] > button[aria-pressed="false"] { flex: 0 0 34px !important; }
html[data-lm-sidew="compact"] aside [role="group"][aria-label="Theme"] > button[aria-pressed="true"] { flex: 1 1 auto !important; }
/* no page jump when a dialog locks scrolling */
@media (min-width: 1101px) { html { scrollbar-gutter: stable; } }
/* guide tips: real bullets (tailwind reset removed them, leaving an odd indent) */
.sv-guide ul { list-style: none; padding-left: 0 !important; }
.sv-guide ul li { position: relative; padding-left: 16px; }
.sv-guide ul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #2563eb); opacity: .55; }
/* custom dropdowns: same text size as the inputs next to them (they inherited 16px) */
.svs-trigger.input:not(.text-xs):not(.text-lg) { font-size: 14px; }
/* action menus: wide enough that items don't wrap to two lines */
[role="menu"] { min-width: 232px; }
[role="menu"] [role="menuitem"] { white-space: nowrap; }
/* version chip overlapped page content in the bottom-right corner — keep it on the sign-in screen only */
body:has(aside) #u-version, body:has(header) #u-version { display: none !important; }
/* the SHUBHI orb stepped on dialog/sheet buttons (e.g. "Assign task") — tuck it away while a dialog is open */
body:has([role="dialog"][aria-modal="true"]:not(#shubhi-panel):not([id^="shubhi"])) #shubhi-orb,
body:has(.svs-pop.sheet) #shubhi-orb { opacity: 0 !important; pointer-events: none !important; transform: scale(.6) !important; transition: opacity .15s, transform .15s; }
/* task sheet: meta values share one size; History is a clear, clickable disclosure */
.td-meta > div > span { font-size: 13px !important; line-height: 1.4; }
.td-meta > div > span.muted { color: var(--muted, #64748b); }
.td-hist > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 4px 0; user-select: none; }
.td-hist > summary::-webkit-details-marker { display: none; }
.td-hist > summary::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .18s ease; opacity: .6; }
.td-hist[open] > summary::after { transform: rotate(45deg); }
.td-hist > ul { margin-top: 8px !important; }
/* multi-step dialogs (Add administrator …): compact stepper, numbers only except the current step; no scrollbar */
[role=dialog] ol.overflow-x-auto:has(> li > button > span.rounded-full) { scrollbar-width: none; align-items: center; gap: 4px; flex-wrap: nowrap; }
[role=dialog] ol.overflow-x-auto:has(> li > button > span.rounded-full)::-webkit-scrollbar { display: none; }
[role=dialog] ol.overflow-x-auto > li > button:has(> span.rounded-full):not(.btn-primary) { font-size: 0 !important; gap: 0 !important; padding: 5px !important; }
[role=dialog] ol.overflow-x-auto > li > button:has(> span.rounded-full):not(.btn-primary) > span { font-size: 12px !important; }
[role=dialog] ol.overflow-x-auto:has(> li > button > span.rounded-full) > li:not(:last-child)::after { content: ""; display: inline-block; width: 10px; height: 1.5px; background: var(--border, #e2e8f0); vertical-align: middle; margin-left: 4px; }
[role=dialog] ol.overflow-x-auto:has(> li > button > span.rounded-full) > li { display: flex; align-items: center; }
/* delete-administrator confirm */
.sv-del-ov { position: fixed; inset: 0; z-index: 9990; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: svFadeIn .15s ease; }
.sv-del-card { width: min(440px, 100%); padding: 22px !important; border-radius: 18px !important; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35); }
.sv-del-card h3 { font-size: 17px; font-weight: 650; margin: 0 0 8px; }
.sv-del-card p { font-size: 13.5px; line-height: 1.55; margin: 0 0 8px; opacity: .85; }
.sv-del-card .sv-del-hint { font-size: 12.5px; opacity: .65; }
.sv-del-card label { display: grid; gap: 6px; font-size: 13px; margin-top: 12px; }
.sv-del-card input { width: 100%; }
.sv-del-err { color: #dc2626; font-size: 12.5px; min-height: 18px; margin-top: 8px; }
.sv-del-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.sv-del-act .btn-danger { background: #dc2626; color: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.sv-del-act .btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.sv-admin-del { color: #dc2626 !important; }
@keyframes svFadeIn { from { opacity: 0 } to { opacity: 1 } }
/* tab strips: no grey scrollbar under the tabs; a soft fade shows there are more tabs to scroll to */
[role=tablist].overflow-x-auto { scrollbar-width: none; }
[role=tablist].overflow-x-auto::-webkit-scrollbar { display: none; }
[role=tablist].sv-tl-r { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
[role=tablist].sv-tl-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
[role=tablist].sv-tl-l.sv-tl-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
[role=tablist].w-fit.overflow-x-auto { max-width: 100%; }
/* API key dialog: scope rows as tidy selectable rows */
[role=dialog] label.cursor-pointer:has(> input[type=checkbox] + span.font-mono) { padding: 9px 12px !important; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; margin-bottom: 6px; transition: background .15s, border-color .15s; gap: 10px !important; }
[role=dialog] label.cursor-pointer:has(> input[type=checkbox] + span.font-mono):hover { background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent); }
[role=dialog] label.cursor-pointer:has(> input[type=checkbox]:checked + span.font-mono) { border-color: color-mix(in srgb, var(--accent, #2563eb) 55%, transparent); background: color-mix(in srgb, var(--accent, #2563eb) 7%, transparent); }
[role=dialog] label.cursor-pointer:has(> input[type=checkbox] + span.font-mono) > span.font-mono { min-width: 128px; font-weight: 600; }
/* SHUBHI panel: never let it scroll sideways (a chip scrolled into view used to shift the whole panel left) */
#shubhi-panel { overflow: clip !important; }
#shubhi-panel .sh-chips { overscroll-behavior-x: contain; }
#shubhi-panel .sh-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); scrollbar-width: none; }
#shubhi-panel .sh-chips::-webkit-scrollbar { display: none; }
/* Bell dropdown: clamp long descriptions, footer link to the Notification Center */
header [role=dialog][aria-label=Notifications] .t-muted.text-xs, header [role=dialog][aria-label=Notifications] p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.sv-bell-foot { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; padding: 11px 16px; border-top: 1px solid var(--border, rgba(148,163,184,.25)); font-size: 13px; font-weight: 600; color: var(--c-primary, #2563eb); background: transparent; cursor: pointer; transition: background .15s; }
.sv-bell-foot:hover { background: color-mix(in srgb, var(--c-primary, #2563eb) 7%, transparent); }
.sv-bell-foot svg { transition: transform .15s; } .sv-bell-foot:hover svg { transform: translateX(3px); }
/* What's new: latest update block */
.sv-wn { margin: 2px 2px 6px; padding: 6px 4px 4px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary, #2563eb) 9%, transparent), color-mix(in srgb, #a855f7 7%, transparent)); border: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 18%, transparent); list-style: none; }
.sv-wn-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary, #2563eb); }
.sv-wn-h em { font-style: normal; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--c-primary, #2563eb); color: #fff; letter-spacing: 0; text-transform: none; }
.sv-wn-sep { list-style: none; padding: 8px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
/* Invoice detail on phones: Back sits above the title as a small pill */
@media (max-width: 639px) {
  html.sv106-invoice main .mb-6.flex.flex-col:has(> .flex-wrap > a.btn-ghost:only-child) { gap: 8px; }
  html.sv106-invoice main .mb-6.flex.flex-col:has(> .flex-wrap > a.btn-ghost:only-child) > .flex-wrap { order: -1; }
  html.sv106-invoice main .mb-6.flex.flex-col > .flex-wrap > a.btn-ghost:only-child { height: 32px; padding: 0 12px 0 8px; margin-left: -4px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--c-primary, #2563eb) 7%, transparent); }
}