/* Shubh Ventures v1.06 — SHUBHI mini mode, tablet header, login 2FA fix, press feedback, role/person appearance card. */

/* ---------------------------------------------------------------- press feedback (replaces the old click ripple) */
.u-ripple { display: none !important; }
button, a.btn-primary, a.btn-secondary, a.btn-ghost, .nav-link { -webkit-tap-highlight-color: transparent; }
.btn-primary:not(:disabled):active, .btn-secondary:not(:disabled):active, .btn-ghost:not(:disabled):active, .btn-icon:not(:disabled):active, .sh-chip:active { transform: scale(.97); transition: transform .08s ease-out; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

/* ---------------------------------------------------------------- login: copyright line always at the bottom of the card */
.sv-login-card { display: flex; flex-direction: column; }
.sv-login-card > .svm-foot { order: 99; margin-top: auto; }
@media (max-width: 640px) {
  html.sv-route-login .sv-login-card { justify-content: flex-start; }
  html.sv-route-login .sv-login-card > :not(.svm-foot) { order: 0; }
}

/* ---------------------------------------------------------------- tablet top bar: no overflow, no cut-off SHUBHI orb */
@media (max-width: 1180px) {
  header [title="Keyboard shortcuts (?)"] { display: none !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  header button.max-w-md { display: none !important; }
  header button.btn-icon.sm\:hidden[title="Search"] { display: inline-flex !important; }
  header a.btn-icon.hidden.sm\:inline-flex { display: none !important; }
  header .ml-auto { gap: 4px !important; }
}
@media (max-width: 1023px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  main { min-width: 0; }
  main table { max-width: 100%; }
}
/* tablet: two-column cards instead of stretched single column; page header actions wrap neatly */
@media (min-width: 640px) and (max-width: 1023px) {
  main div.mb-6.flex { flex-wrap: wrap; row-gap: 12px; }
  main div.mb-6.flex > :last-child:not(.min-w-0) { flex-wrap: wrap; justify-content: flex-start; }
}
/* the "About this page" card: tidy list indent on every size */
.sv-guide ul { padding-left: 18px; margin: 8px 0 0; }
.sv-guide ul li { margin: 3px 0; }

/* ---------------------------------------------------------------- SHUBHI mini mode */
#shubhi-panel .sh-mini { display: none; }
#shubhi-panel .sh-min svg { width: 18px; height: 18px; }
#shubhi-panel.open.mini {
  top: auto !important; left: auto !important; right: 18px !important; bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  width: min(380px, calc(100vw - 24px)) !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  border-radius: 22px !important; border: 1px solid var(--glass-border, rgba(148, 163, 184, .28)) !important;
  transform: none !important; visibility: visible !important; opacity: 1 !important; padding: 0 !important;
  box-shadow: 0 18px 50px -14px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .08) !important;
  animation: sh-mini-in .32s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sh-mini-in { from { transform: translateY(24px) scale(.96) !important; opacity: 0; } to { transform: none; opacity: 1; } }
#shubhi-panel.open.mini::before { display: none !important; }
#shubhi-panel.mini > :not(.sh-mini):not(.sh-aurora) { display: none !important; }
#shubhi-panel.mini .sh-aurora { opacity: .35; }
#shubhi-panel.mini .sh-mini { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; }
#shubhi-panel .sh-mini-mic {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, #a78bfa, #6d28d9 45%, #0ea5e9 100%); box-shadow: 0 6px 18px -6px rgba(109, 40, 217, .6);
  position: relative;
}
#shubhi-panel .sh-mini-mic svg { width: 20px; height: 20px; }
#shubhi-panel .sh-mini-mic.on::after, #shubhi-panel.mini[data-state="speaking"] .sh-mini-mic::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(139, 92, 246, .55); animation: sh-mini-pulse 1.3s ease-out infinite;
}
#shubhi-panel.mini[data-state="working"] .sh-mini-mic::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #8b5cf6; animation: sh-mini-spin .9s linear infinite; }
@keyframes sh-mini-pulse { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@keyframes sh-mini-spin { to { transform: rotate(360deg); } }
#shubhi-panel .sh-mini-txt { flex: 1; min-width: 0; cursor: pointer; padding: 2px 0; }
#shubhi-panel .sh-mini-txt em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #6d28d9); margin-bottom: 1px; }
#shubhi-panel .sh-mini-txt span { font-size: 13.5px; line-height: 1.32; color: var(--text, #0f172a); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
#shubhi-panel .sh-mini .sh-ic { flex: none; width: 36px; height: 36px; }
html.shubhi-mini #shubhi-orb { opacity: 0 !important; pointer-events: none !important; transform: scale(.6) !important; }
html.shubhi-mini body { overflow: auto !important; }
html.shubhi-mini::after { display: none !important; }
@media (max-width: 767px) {
  #shubhi-panel.open.mini { left: 10px !important; right: 10px !important; width: auto !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 20px !important; }
}
@media (prefers-reduced-motion: reduce) { #shubhi-panel.open.mini { animation: none; } }

/* ---------------------------------------------------------------- appearance for a role / person */
.sv-target {
  margin: 0 0 18px; padding: 16px 18px; border-radius: var(--radius-card, 16px); background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, .08)); box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, .05));
}
.sv-target .tg-head { display: flex; gap: 12px; align-items: flex-start; }
.sv-target .tg-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--accent, #2563eb); background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent); }
.sv-target .tg-ic svg { width: 20px; height: 20px; }
.sv-target h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--text, #0f172a); letter-spacing: -.01em; }
.sv-target p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted, #64748b); }
.sv-target .tg-you { color: var(--accent, #2563eb); font-weight: 600; }
.sv-target .tg-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.sv-target .tg-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2, rgba(100, 116, 139, .1)); border: 1px solid var(--border, rgba(15, 23, 42, .06)); }
.sv-target .tg-seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font: 600 13px var(--sv-font, inherit); color: var(--muted, #64748b); cursor: pointer; }
.sv-target .tg-seg button.on { background: var(--surface, #fff); color: var(--text, #0f172a); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.sv-target .tg-sel { flex: 1 1 240px; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--radius-ctl, 11px); border: 1px solid var(--border-strong, rgba(15, 23, 42, .15)); background: var(--surface-elevated, var(--surface, #fff)); color: var(--text, #0f172a); font: 14px var(--sv-font, inherit); }
.sv-target .tg-save { height: 40px; white-space: nowrap; }
.sv-target .tg-list { margin-top: 14px; display: grid; gap: 8px; }
.sv-target .tg-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, rgba(100, 116, 139, .06)); border: 1px solid var(--border, rgba(15, 23, 42, .06)); }
.sv-target .tg-item b { font-size: 13.5px; color: var(--text, #0f172a); font-weight: 600; }
.sv-target .tg-item small { flex: 1 1 160px; font-size: 12px; color: var(--muted, #64748b); }
.sv-target .tg-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #2563eb) 14%, transparent); color: var(--accent, #2563eb); }
.sv-target .tg-kind.admin { background: rgba(139, 92, 246, .14); color: #7c3aed; }
.sv-target .tg-rm { color: var(--c-danger, #dc2626) !important; }
.sv-target .tg-empty { margin-top: 12px; font-size: 12.5px; }
.sv-target .tg-skel { margin-top: 14px; height: 40px; border-radius: 12px; background: linear-gradient(90deg, rgba(148, 163, 184, .12), rgba(148, 163, 184, .24), rgba(148, 163, 184, .12)); background-size: 200% 100%; animation: tg-sk 1.2s linear infinite; }
@keyframes tg-sk { to { background-position: -200% 0; } }
@media (max-width: 640px) { .sv-target { padding: 14px; } .sv-target .tg-save { width: 100%; } .sv-target .tg-seg { width: 100%; } .sv-target .tg-seg button { flex: 1; } }

.sv106-toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2147483600; padding: 10px 16px; border-radius: 14px; font: 600 13px var(--sv-font, system-ui); color: var(--text, #0f172a);
  background: var(--glass-strong, rgba(255, 255, 255, .92)); border: 1px solid var(--glass-border, rgba(148, 163, 184, .3)); box-shadow: 0 16px 40px -14px rgba(15, 23, 42, .35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: opacity .3s, transform .3s; max-width: calc(100vw - 32px); }
.sv106-toast.bad { color: var(--c-danger, #dc2626); }
.sv106-toast.out { opacity: 0; transform: translate(-50%, -8px); }
/* tablets that show the bottom bar: keep the SHUBHI mini bar above it */
html.sv-mobile #shubhi-panel.open.mini { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }