@import url('https://fonts.cdnfonts.com/css/gotham');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Shrikhand&family=JetBrains+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;

@layer components {
  .card { @apply bg-white shadow rounded-lg overflow-hidden mb-6; }
  .card-header { @apply px-6 py-4 border-b border-gray-200; }
  .card-title { @apply text-lg font-medium; }
  .card-subtitle { @apply text-sm text-gray-500 mt-2; }
  .card-body { @apply p-6; }
  .card-buttons-right { @apply flex justify-end pt-6 border-t border-gray-200 mt-8 pb-4; }
  .ping-link { @apply text-indigo-600 hover:text-indigo-700 hover:underline; }
}

@layer components {
  .ping-shell { @apply h-dvh overflow-hidden bg-cream text-brown font-body antialiased; }

  .ping-grain::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0.018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)'/%3E%3C/svg%3E");
  }

  .ping-shell__frame { @apply flex h-dvh overflow-hidden; }
  .ping-shell__main { @apply flex min-w-0 flex-1 flex-col; }
  .ping-shell__content { @apply flex-1 overflow-y-auto p-6; }
  .ping-shell__card {
    @apply rounded-3xl bg-white px-4 py-6 shadow-xl md:px-6;
    min-height: calc(100vh - 200px);
  }

  .ping-sidebar-wrapper { @apply relative z-30 h-dvh w-0 shrink-0 lg:w-[260px]; }
  .ping-sidebar-wrapper.is-collapsed { @apply lg:w-[72px]; }

  .ping-sidebar-mobile-toggle {
    @apply fixed left-0 top-0 z-40 m-4 rounded-md p-2 shadow-md lg:hidden;
    background-color: #0F1322;
  }

  .ping-sidebar {
    @apply fixed inset-y-0 left-0 z-30 flex h-dvh w-[260px] shrink-0 flex-col bg-sidebar transition-all duration-300 ease-in-out lg:static;
  }

  .ping-sidebar.is-collapsed { @apply lg:w-[72px]; }
  .ping-sidebar.is-collapsed .ping-sidebar-text { @apply hidden; }
  .ping-sidebar.is-collapsed .ping-sidebar-section-label { @apply hidden; }
  .ping-sidebar.is-collapsed .ping-nav-item { @apply justify-center px-0; }
  .ping-sidebar.is-collapsed .ping-nav-label { @apply hidden; }
  .ping-sidebar.is-collapsed .ping-nav-children { @apply hidden; }
  .ping-sidebar.is-collapsed .ping-nav-expand-chevron { @apply hidden; }
  .ping-sidebar.is-collapsed .ping-user-block { @apply justify-center p-3; }
  .ping-sidebar.is-collapsed .ping-user-block .ping-user-info { @apply hidden; }
  .ping-sidebar.is-collapsed .ping-user-toggle { @apply justify-center; }
  .ping-sidebar.is-collapsed .ping-logo-full { @apply hidden; }
  .ping-sidebar.is-collapsed .ping-logo-mini { @apply flex; }

  .ping-sidebar__logo { @apply px-5 pb-3 pt-5; }
  .ping-logo-link { @apply flex items-center; }
  .ping-logo-image { @apply block h-10 w-auto; }
  .ping-logo-image--mini { @apply block h-10 w-10; }
  .ping-logo-mini { @apply hidden mx-auto items-center justify-center; }

  .ping-sidebar__close { @apply ml-auto; }
  .ping-sidebar__scroll {
    @apply min-h-0 flex-1 overflow-y-auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .ping-sidebar__nav { @apply px-3 py-2; }
  .ping-sidebar-section-label {
    @apply px-3 pb-2 pt-6 font-bold uppercase text-white/20;
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .ping-nav-item {
    @apply relative flex items-center gap-3 rounded-xl px-3 py-2.5 transition-all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .ping-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: #ef463d;
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .ping-nav-item:hover { background: rgba(255, 255, 255, 0.04); }

  .ping-nav-item.is-active { background: rgba(239, 70, 61, 0.08); }
  .ping-nav-item.is-active::before { transform: scaleY(1); }

  .ping-nav-icon {
    @apply shrink-0 text-white/40;
    width: 18px;
    height: 18px;
  }
  .ping-nav-label { @apply text-sm font-medium text-white/50; }
  .ping-nav-item.is-active .ping-nav-icon { @apply text-coral; }
  .ping-nav-item.is-active .ping-nav-label { @apply text-white font-semibold; }

  .ping-nav-expand-chevron {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .ping-nav-children {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
      max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease,
      padding 0.3s ease;
    padding: 0;
  }
  .ping-nav-children.is-open {
    max-height: 9999px;
    opacity: 1;
    padding: 2px 0 4px 0;
  }

  .ping-sidebar-collapse {
    @apply absolute -right-3 top-7 z-40 hidden h-6 w-6 items-center justify-center rounded-full border-2 bg-sidebar transition-all hover:border-coral hover:bg-coral lg:flex;
    border-color: #ede6d5;
  }

  .ping-sidebar-collapse svg { @apply h-3 w-3 text-white/50 transition-all duration-300; }
  .ping-sidebar-collapse:hover svg { @apply text-white; }
  .ping-sidebar-wrapper.is-collapsed .ping-sidebar-collapse svg { transform: rotate(180deg); }

  .ping-user-block { @apply flex items-center gap-3 border-t bg-sidebar px-5 py-4; border-color: rgba(255, 255, 255, 0.05); }
  .ping-user-avatar { @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-white text-xs font-bold; background-image: linear-gradient(to bottom right, #ef463d, #ffd200); }
  .ping-user-info { @apply min-w-0; }
  .ping-user-name { @apply truncate text-sm font-semibold text-white; }
  .ping-user-sub { @apply truncate text-[11px] font-medium text-white/30; }
  .ping-user-toggle { @apply flex w-full items-center gap-3 rounded-xl transition hover:bg-white/5; }
  .ping-user-chevron { @apply ml-auto h-4 w-4 shrink-0 text-white/30; }
  .ping-user-menu {
    @apply absolute bottom-full left-0 right-0 z-50 mb-3 overflow-hidden rounded-2xl border border-border-warm bg-white shadow-xl;
  }
  .ping-user-menu__header { @apply flex items-center gap-3 px-4 py-3; }
  .ping-user-menu__divider { @apply h-px bg-border-warm; }
  .ping-user-menu__item { @apply flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-semibold text-brown hover:bg-cream transition; }

  .ping-topbar { @apply relative z-20 shrink-0; }
  .ping-topbar__breadcrumbs { @apply flex h-10 items-center border-b border-border-warm bg-white px-6; }
  .ping-topbar__scope { @apply flex h-16 items-center gap-4 border-b border-white/15 bg-coral px-6; }
  .ping-breadcrumb { @apply flex min-w-0 items-center gap-1.5 text-[11px]; }
  .ping-breadcrumb-muted { @apply font-medium text-brown-light; }
  .ping-breadcrumb-current { @apply font-bold text-brown; }
  .ping-breadcrumb-sep { @apply h-3 w-3 shrink-0 text-brown-light/25; }
  .ping-search {
    @apply flex w-64 items-center gap-2 rounded-xl border border-border-warm bg-white px-3.5 py-2 transition-all duration-200;
  }
  .ping-search-kbd { @apply rounded border border-border-warm bg-cream px-1.5 py-0.5 font-mono text-[10px] font-medium text-brown-light/50; }
  .ping-search:focus-within { box-shadow: 0 0 0 3px rgba(239, 70, 61, 0.12); border-color: #ef463d; }
  .ping-topbar-icon-button {
    @apply relative flex h-9 w-9 items-center justify-center rounded-xl border border-border-warm bg-white transition hover:bg-mint/30;
  }

  .ping-profile-button { @apply flex items-center gap-2.5 rounded-xl py-1 pl-3 pr-1 transition hover:bg-white; }
  .ping-profile-avatar {
    @apply inline-flex h-8 w-8 items-center justify-center rounded-lg text-[10px] font-bold text-white;
    background-image: linear-gradient(to bottom right, #ef463d, #ffd200);
  }
  .ping-profile-avatar--sm { @apply h-9 w-9 rounded-xl text-xs; }
  .ping-profile-chevron { @apply hidden h-4 w-4 text-brown-light/40 transition-transform; }

  .ping-profile-menu {
    @apply absolute right-0 z-50 mt-2 w-64 overflow-hidden rounded-2xl border border-border-warm bg-white shadow-xl;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .ping-profile-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .ping-profile-menu__header { @apply flex items-center gap-3 px-4 py-3; }
  .ping-profile-menu__divider { @apply h-px bg-border-warm; }
  .ping-profile-menu__item { @apply flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-semibold text-brown hover:bg-cream transition; }

  .ping-scope-seg {
    @apply flex items-center gap-2 rounded-lg border border-white/20 bg-white/15 px-3 py-2 text-white transition hover:bg-white/20;
  }
  .ping-scope-change { @apply rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-[11px] font-bold text-white transition hover:bg-white/15; }
  .ping-scope-badge { @apply rounded-md border border-white/20 bg-white/15 px-1.5 py-0.5 text-[10px] font-semibold text-white/90; }
  .ping-scope-chevron { @apply h-3.5 w-3.5 text-white/70; }

  .ping-scope-inline { @apply flex flex-wrap items-center gap-2; }
  .ping-scope-inline__button {
    @apply inline-flex items-center gap-2 rounded-xl border border-border-warm bg-cream/30 px-3 py-1.5 text-brown-mid transition hover:bg-cream/50;
  }
  .ping-scope-inline__badge {
    @apply rounded-md border border-border-warm bg-white/80 px-1.5 py-0.5 text-[10px] font-bold text-brown-light/70;
  }
  .ping-scope-inline__chevron { @apply h-4 w-4 text-brown-light/50; }
  .ping-scope-inline__change {
    @apply inline-flex items-center rounded-xl border border-border-warm bg-white px-3 py-1.5 text-[11px] font-bold text-brown-mid transition hover:bg-cream;
  }

  .ping-detail-grid { @apply grid grid-cols-2 gap-4; }
  .ping-detail-field { @apply rounded-xl border border-border-warm bg-cream/15 px-3 py-2; }
  .ping-detail-field--full { @apply col-span-2; }
  .ping-detail-label { @apply text-[10px] font-bold uppercase tracking-wider text-brown-light/60; }
  .ping-detail-value { @apply mt-1 text-[12px] font-semibold text-brown-mid break-words; }
  .ping-detail-value--mono { @apply font-mono; }

  .ping-textarea {
    @apply w-full rounded-2xl border border-border-warm bg-white px-4 py-3 text-[12px] font-medium text-brown outline-none transition focus:border-coral;
  }
  .ping-textarea--mono { @apply font-mono text-[11px] leading-relaxed; }

  .ping-modal-backdrop { @apply fixed inset-0 z-50 bg-brown/20 p-4; }
  .ping-modal-wrap { @apply flex min-h-full items-center justify-center; }
  .ping-modal-panel { @apply w-full overflow-hidden rounded-3xl border border-border-warm bg-white shadow-2xl; }
  .ping-modal-head { @apply flex items-start justify-between gap-4 border-b border-border-warm bg-cream/30 px-6 py-4; }
  .ping-modal-body { @apply px-6 py-5; }
  .ping-modal-close { @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border-warm bg-white text-brown-light/60 transition hover:bg-cream hover:text-brown; }

  .ping-spinner { @apply h-9 w-9 animate-spin rounded-full border-2 border-border-warm border-t-coral; }

  .ping-hover-popover {
    @apply absolute right-0 top-full z-40 mt-2 hidden w-[520px] max-w-[80vw] rounded-2xl border border-border-warm bg-white p-4 shadow-xl;
  }
  .group:hover > .ping-hover-popover { display: block; }

  .ping-diff-line { @apply rounded-md px-2 py-1 text-[10px] font-semibold text-brown-mid; }
  .ping-diff-line--add { @apply border border-brand-green/30 bg-brand-green/15; }
  .ping-diff-line--del { @apply border border-coral/20 bg-coral/10 text-coral; }
  .ping-diff-line--hunk { @apply border border-brand-teal/20 bg-brand-teal/10 text-brand-teal; }

  .ping-block-item { @apply flex items-center gap-3 rounded-xl border border-border-warm bg-cream/15 px-3 py-2; }
  .ping-block-item__pos { @apply w-6 shrink-0 text-center text-[11px] font-bold text-brown-light/50; }

  .ping-version-item[open] .ping-version-chevron { transform: rotate(180deg); }
  .ping-version-summary {
    @apply flex cursor-pointer list-none items-start justify-between gap-4 px-4 py-4 transition hover:bg-cream/20;
  }
  .ping-version-summary::-webkit-details-marker { display: none; }
  .ping-version-label { @apply inline-flex items-center rounded-lg border border-border-warm bg-white px-2 py-1 text-[11px] font-bold text-brown; }
  .ping-version-chevron { @apply mt-1 inline-flex h-8 w-8 items-center justify-center rounded-xl border border-border-warm bg-white text-brown-light/60 transition; }
  .ping-version-body { @apply px-4 pb-5 pt-0 space-y-4; }

  .ping-page { @apply flex flex-1 min-h-0 flex-col bg-white; }
  .ping-shell__content--shellless { @apply flex flex-col min-h-0 bg-white p-0 overflow-hidden; }
  .ping-page-body { @apply relative flex flex-1 flex-col min-h-0; }
  .ping-page-header { @apply sticky top-0 z-10 border-b border-border-warm bg-white px-6 pt-5 pb-3; }
  .ping-page-header--static { @apply static; }
  .ping-page-title { @apply font-heading text-brown text-2xl leading-none; }
  .ping-page-subtitle { @apply mt-1 text-sm font-medium text-brown-light; }

  .ping-shell__content--shellless .ping-page-body { @apply overflow-y-auto; }

  .ping-stats-strip { @apply mt-4 grid gap-3; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .ping-stat-card { @apply rounded-xl border border-border-warm bg-white px-4 py-3; }
  .ping-stat-label { @apply mb-1 text-[10px] font-bold uppercase tracking-wider text-brown-light/50; }
  .ping-stat-value { @apply text-xl font-bold text-brown leading-none; }
  .ping-stat-card--coral { @apply border-coral/25 bg-coral/5; }
  .ping-stat-card--mint { @apply border-brand-green/25 bg-mint/35; }
  .ping-stat-card--yellow { @apply border-brand-yellow/30 bg-brand-yellow/10; }
  .ping-stat-card--teal { @apply border-brand-teal/25 bg-brand-teal/10; }
  .ping-stat-icon { @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border-warm bg-white/70 text-brown-mid; }
  .ping-stat-icon--coral { @apply border-coral/20 text-coral; }
  .ping-stat-icon--mint { @apply border-brand-green/25 text-brand-teal; }
  .ping-stat-icon--yellow { @apply border-brand-yellow/30 text-brown; }
  .ping-stat-icon--teal { @apply border-brand-teal/25 text-brand-teal; }

  .ping-results-header { @apply flex flex-wrap items-center justify-between gap-3 px-6 py-4; }
  .ping-results-count { @apply text-sm font-semibold text-brown-mid; }
  .ping-controls { @apply flex flex-wrap items-center gap-3; }
  .ping-select { @apply cursor-pointer rounded-lg border border-border-warm bg-white px-2.5 py-1.5 text-[11px] font-semibold text-brown outline-none transition hover:border-brand-green; }
  .ping-button-sm { @apply inline-flex items-center gap-1.5 rounded-lg border border-border-warm bg-white px-3 py-1.5 text-[11px] font-semibold text-brown-mid transition; }
  .ping-button-sm--filters { @apply hover:border-coral; }

  .ping-form-label { @apply text-[11px] font-bold uppercase tracking-wider text-brown-light/50; }
  .ping-input { @apply mt-2 w-full rounded-xl border border-border-warm bg-white px-3 py-2 text-[12px] font-semibold text-brown outline-none transition focus:border-coral; }
  .ping-form-error { @apply rounded-xl border border-coral/30 bg-coral/5 px-4 py-3 text-[12px] font-semibold text-coral; }

  .ping-columns-menu { @apply absolute right-0 z-20 mt-2 w-[320px] overflow-hidden rounded-2xl border border-border-warm bg-white shadow-xl; }
  .ping-columns-menu-header { @apply flex items-center justify-between px-4 pt-4; }
  .ping-columns-title { @apply text-[11px] font-bold uppercase tracking-wider text-brown-light/50; }
  .ping-columns-reset { @apply text-[11px] font-semibold text-coral/70 hover:text-coral transition; }
  .ping-columns-presets { @apply mt-2 grid grid-cols-2 gap-2 px-4 pb-3; }
  .ping-columns-preset { @apply rounded-xl border border-border-warm bg-cream/30 px-3 py-2 text-[12px] font-semibold text-brown-mid transition hover:bg-cream; }
  .ping-columns-preset.is-active { @apply border-coral bg-coral text-white shadow-[0_2px_8px_rgba(239,70,61,0.2)]; }
  .ping-columns-divider { @apply h-px bg-border-warm; }
  .ping-columns-grid { @apply grid grid-cols-2 gap-x-4 gap-y-2 px-4 py-4; }
  .ping-columns-option { @apply flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 transition hover:bg-cream/60; }
  .ping-columns-option-label { @apply text-[12px] font-medium text-brown; }

  .ping-filter-toggle-badge { @apply ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-coral text-[9px] font-bold leading-none text-white; }

  .ping-tooltip {
    @apply fixed z-50 max-w-[420px] rounded-xl border border-border-warm bg-white px-3 py-2 text-[11px] font-medium text-brown shadow-xl;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity 0.12s ease, transform 0.12s ease;
    white-space: normal;
  }
  .ping-tooltip.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .ping-filter-drawer-backdrop {
    @apply absolute inset-0 z-30 opacity-0 pointer-events-none transition-opacity duration-300;
    background: rgba(43, 36, 29, 0.08);
  }
  .ping-filter-drawer-backdrop.is-open { @apply opacity-100 pointer-events-auto; }

  .ping-filter-drawer {
    @apply absolute bottom-0 right-0 top-0 z-40 w-[320px] translate-x-full transition-transform duration-300;
    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  .ping-filter-drawer.is-open { @apply translate-x-0; }
  .ping-filter-drawer-inner {
    @apply flex h-full flex-col overflow-hidden border-l border-border-warm bg-white shadow-[-12px_0_40px_rgba(43,36,29,0.08)];
  }
  .ping-filter-drawer-header { @apply border-b border-border/60 bg-white px-5 pt-5 pb-3 shrink-0; }
  .ping-filter-drawer-title { @apply text-[13px] font-bold text-brown leading-none; }
  .ping-filter-drawer-icon { @apply flex h-7 w-7 items-center justify-center rounded-lg; background: rgba(239, 70, 61, 0.08); }
  .ping-filter-drawer-close { @apply flex h-7 w-7 items-center justify-center rounded-lg transition text-brown-light/40 hover:text-brown-mid; }
  .ping-filter-drawer-close:hover { background: rgba(255, 255, 255, 0.8); }
  .ping-filter-drawer-reset-top { @apply text-[11px] font-semibold text-coral/70 hover:text-coral transition; }
  .ping-filter-drawer-body {
    @apply flex-1 overflow-y-auto bg-cream/20 px-4 pb-5 pt-3;
    mask-image: linear-gradient(to bottom, transparent 0%, black 16px, black calc(100% - 24px), transparent 100%);
  }
  .ping-filter-drawer-footer { @apply flex items-center gap-3 border-t border-border/60 bg-white px-5 py-3.5 shrink-0; }

  .ping-filter-section-card { @apply rounded-[14px] border border-border-warm bg-white px-3.5 pt-3.5 pb-3; }
  .ping-filter-section-card + .ping-filter-section-card { margin-top: 10px; }
  .ping-filter-section-title { @apply mb-2.5 flex items-center gap-1.5 text-[11px] font-bold text-brown; letter-spacing: 0.01em; }
  .ping-filter-section-title svg { @apply h-3.5 w-3.5 text-brand-green; }

  .ping-filter-field {
    @apply flex items-center gap-2 rounded-xl border border-border bg-cream/40 px-3 py-2 transition-all;
  }
  .ping-filter-field:focus-within {
    border-color: #ef463d;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(239, 70, 61, 0.06);
  }
  .ping-filter-field-icon { @apply h-3.5 w-3.5 shrink-0 text-brown-light/30; }

  .ping-filter-input-field { @apply w-full flex-1 border-0 bg-transparent p-0 text-[11px] font-medium text-brown placeholder:text-brown-light/35 outline-none shadow-none focus:ring-0; }
  .ping-filter-date { @apply w-full rounded-lg border border-border bg-cream/40 px-2.5 py-1.5 text-[11px] font-medium text-brown outline-none transition focus:border-coral focus:bg-white; }

  .ping-filter-check {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #dfe8dd;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    flex-shrink: 0;
    background: white;
  }
  .ping-filter-check:hover { border-color: #96C2AC; }
  .ping-filter-check:checked { background: #ef463d; border-color: #ef463d; }
  .ping-filter-check:checked::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
  }

  .ping-filter-option { @apply flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 transition hover:bg-cream/60; }
  .ping-filter-option-label { @apply text-[12px] font-medium text-brown; }

  .ping-filter-pill-group { @apply flex flex-wrap gap-2; }
  .ping-filter-pill-input { @apply sr-only; }
  .ping-filter-pill { @apply inline-flex items-center justify-center rounded-lg border border-border bg-cream/40 px-3.5 py-1.5 text-[11px] font-semibold text-brown-mid transition; }
  .ping-filter-pill:hover { background: rgba(239, 70, 61, 0.04); border-color: #ef463d; }
  .ping-filter-pill-input:checked + .ping-filter-pill {
    @apply bg-coral text-white border-transparent;
    box-shadow: 0 2px 6px rgba(239, 70, 61, 0.2);
  }

  .ping-filter-apply { @apply rounded-xl bg-coral px-5 py-2 text-[12px] font-bold text-white shadow-[0_4px_16px_rgba(239,70,61,0.2)] transition hover:bg-coral-dark active:scale-[0.97]; }
  .ping-filter-reset { @apply flex-1 text-left text-[11px] font-semibold text-brown-light transition hover:text-brown-mid; }

  .ping-conv-card { @apply mx-6 mb-4 overflow-hidden rounded-xl border border-border-warm bg-white flex flex-1 flex-col min-h-0; }
  .ping-conv-overflow { @apply min-h-0 flex-1 overflow-y-auto overflow-x-hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .ping-conv-head {
    @apply border-b border-border-warm bg-cream/50 px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-brown-light/50;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .ping-conv-row { @apply border-b border-border-warm/60 px-4 py-2.5; }
  .ping-conv-row:hover { background: rgba(246, 241, 228, 0.3); }
  .ping-conv-grid { @apply grid min-w-0 items-center gap-2; }
  .ping-conv-head > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ping-conv-row > * { min-width: 0; overflow: hidden; }
  .ping-conv-row [data-col] { min-width: 0; }
  .ping-conv-grid--default { grid-template-columns: minmax(0, 140px) minmax(0, 110px) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 120px) minmax(0, 2.2fr) minmax(0, 90px); }
  .ping-conv-grid--superadmin { grid-template-columns: minmax(0, 140px) minmax(0, 110px) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 120px) minmax(0, 2.2fr) minmax(0, 90px); }
  .ping-conv-summary {
    @apply text-[10px] font-medium leading-tight text-brown-light/80;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .ping-conv-summary--empty { @apply text-[10px] font-medium text-brown-light/50 italic; }

  .ping-tabs-bar { @apply border-b border-border-warm bg-white; }
  .ping-tabs-nav { @apply relative flex items-center gap-6 overflow-x-auto px-6 py-2; }
  .ping-tab {
    @apply relative cursor-pointer whitespace-nowrap rounded-md px-1 py-3 text-[13px] font-semibold text-brown-light/70 transition hover:text-brown focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coral/30;
  }
  .ping-tab.is-active { @apply text-brown; }
  .ping-tab-indicator { @apply absolute bottom-0 left-0 h-1 rounded-full bg-coral transition-all duration-200; }

  @media (max-width: 639px) {
    .ping-conv-grid--default {
      grid-template-columns: minmax(0, 140px) minmax(0, 120px) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.7fr) minmax(0, 110px) minmax(0, 1.8fr) minmax(0, 90px);
    }
    .ping-conv-grid--superadmin {
      grid-template-columns: minmax(0, 140px) minmax(0, 120px) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.7fr) minmax(0, 110px) minmax(0, 1.8fr) minmax(0, 90px);
    }
  }

  .ping-avatar-chip { @apply flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-[10px] font-bold; background-image: linear-gradient(to bottom right, rgba(239, 70, 61, 0.2), rgba(239, 70, 61, 0.45)); color: #ef463d; }
  .ping-avatar-chip--empty { @apply bg-brown-light/10 text-brown-light/40; background-image: none; }
  .ping-person-name { @apply truncate text-[13px] font-semibold text-brown; }
  .ping-person-sub { @apply truncate font-mono text-[10px] text-brown-light/50; }

  .ping-grid-card { @apply mx-6 mb-4 overflow-hidden rounded-xl border border-border-warm bg-white flex flex-1 flex-col min-h-0; }
  .ping-grid-overflow { @apply min-h-0 flex-1 overflow-y-auto overflow-x-hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .ping-grid-head {
    @apply border-b border-border-warm bg-cream/50 px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-brown-light/50;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .ping-grid-row { @apply border-b border-border-warm/60 px-4 py-2.5; }
  .ping-grid-row:hover { background: rgba(246, 241, 228, 0.3); }
  .ping-grid { @apply grid min-w-0 items-center gap-2; }
  .ping-grid-head > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ping-grid-row > * { min-width: 0; overflow: hidden; }
  .ping-grid-row [data-col] { min-width: 0; }

  .ping-badge { @apply inline-flex items-center justify-center rounded-md px-2 py-0.5 text-[10px] font-bold uppercase; }
  .ping-badge--vapi { background: rgba(32, 178, 170, 0.1); color: #20B2AA; }
  .ping-badge--delivery { background: rgba(32, 178, 170, 0.1); color: #20B2AA; }
  .ping-badge--pickup { background: rgba(150, 194, 172, 0.25); color: #5b4f42; }
  .ping-badge--reservation { background: rgba(255, 210, 0, 0.15); color: #5b4f42; }
  .ping-badge--unknown { @apply bg-brown-light/10 text-brown-light/60; }
  .ping-lang-chip { @apply rounded bg-cream px-1.5 py-0.5 text-center text-[10px] font-bold text-brown-light/50; }

  .ping-table-card { @apply bg-white border border-border-warm rounded-2xl overflow-hidden shadow-[0_1px_4px_rgba(43,36,29,0.04)]; }
  .ping-table-card-header { @apply flex items-center justify-between gap-4 border-b border-border-warm px-4 py-4; }
  .ping-table-card-title { @apply text-lg font-semibold text-brown; }
  .ping-table-card-meta { @apply text-sm font-medium text-brown-light; }
  .ping-chart-frame { @apply rounded-2xl border border-border-warm bg-cream/20 p-4; }
  .ping-table-scroll { @apply overflow-x-auto; }
  .ping-table { @apply w-full text-left; }
  .ping-thead-row { @apply border-b border-border-warm bg-cream/40; }
  .ping-thead-row--sticky { position: sticky; top: 0; z-index: 1; }
  .ping-th { @apply px-4 py-3 text-[11px] font-bold uppercase tracking-wider text-brown-light/60; }
  .ping-td { @apply px-4 py-3.5 text-sm text-brown-mid; }
  .ping-td--mono { @apply font-mono font-semibold text-brown; }
  .ping-row { @apply border-b border-border-warm/60 transition-colors; }
  .ping-row:hover { background: rgba(43, 36, 29, 0.02); }
  .ping-table-link { @apply font-semibold text-brown hover:text-coral transition; }
  .ping-table-action { @apply inline-flex items-center justify-center rounded-lg border border-border-warm bg-white px-2.5 py-1.5 text-[11px] font-bold text-brown-mid hover:bg-cream transition; }
  .ping-table-action--danger { @apply border-coral/30 text-coral hover:bg-coral/10; }
  .ping-button-primary { @apply inline-flex items-center justify-center rounded-xl bg-coral px-4 py-2 text-[12px] font-bold text-white shadow-[0_4px_16px_rgba(239,70,61,0.2)] transition hover:bg-coral-dark active:scale-[0.97]; }
  .ping-pill { @apply inline-flex items-center gap-1 rounded-lg px-2 py-0.5 text-[11px] font-bold; }
  .ping-pill--neutral { @apply bg-cream text-brown-mid; }
  .ping-pill--mint { @apply bg-mint text-brand-teal; }
  .ping-pill--warn { @apply bg-brand-yellow/15 text-brown-mid; }
  .ping-pill--danger { @apply bg-coral/10 text-coral; }

  .ping-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .ping-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .ping-builder-preview {
    @apply max-h-96 overflow-auto whitespace-pre-wrap rounded-2xl border border-border-warm bg-cream/20 p-4 text-[11px] leading-relaxed font-mono text-brown;
  }

  .ping-markdown { @apply text-[12px] font-medium leading-relaxed text-brown-mid; }
  .ping-markdown > * + * { margin-top: 12px; }
  .ping-markdown h1 { @apply text-xl font-bold text-brown; }
  .ping-markdown h2 { @apply text-lg font-bold text-brown; }
  .ping-markdown h3 { @apply text-base font-bold text-brown; }
  .ping-markdown h4 { @apply text-sm font-bold text-brown; }
  .ping-markdown ul { @apply list-disc pl-5; }
  .ping-markdown ol { @apply list-decimal pl-5; }
  .ping-markdown li { @apply text-[12px]; }
  .ping-markdown a { @apply font-semibold text-coral underline decoration-coral/30 underline-offset-2 hover:decoration-coral; }
  .ping-markdown blockquote { @apply rounded-xl border border-border-warm bg-white px-4 py-3 text-brown-light/80; }
  .ping-markdown code { @apply rounded-md border border-border-warm bg-white px-1.5 py-0.5 font-mono text-[11px] font-semibold text-brown; }
  .ping-markdown pre { @apply overflow-auto rounded-xl border border-border-warm bg-white px-4 py-3; }
  .ping-markdown pre code { @apply border-0 bg-transparent px-0 py-0; }
  .ping-markdown table { @apply w-full border-separate border-spacing-0 overflow-hidden rounded-xl border border-border-warm bg-white; }
  .ping-markdown th { @apply border-b border-border-warm bg-cream/30 px-3 py-2 text-left text-[11px] font-bold uppercase tracking-wider text-brown-light/60; }
  .ping-markdown td { @apply border-b border-border-warm/60 px-3 py-2 text-[12px] font-medium text-brown-mid; }
  .ping-markdown tr:last-child td { border-bottom: 0; }

  .ping-markdown-panel { @apply rounded-xl border border-border-warm bg-cream/30 px-4 py-4; }

  .ping-md-toggle { @apply inline-flex items-center gap-1 rounded-xl border border-border-warm bg-white p-1; }
  .ping-md-toggle-btn { @apply rounded-lg px-2.5 py-1 text-[11px] font-bold text-brown-light transition hover:bg-cream; }
  .ping-md-toggle-btn.is-active { @apply bg-coral text-white shadow-[0_2px_8px_rgba(239,70,61,0.2)]; }

  .ping-panel-scroll { @apply min-h-0 flex-1 overflow-y-auto; }
  .ping-panel-footer { @apply mt-3 border-t border-border-warm/60 pt-2; }
  .ping-code-plain { @apply whitespace-pre-wrap font-mono text-[11px] leading-relaxed text-brown-mid; }

  .ping-overflow-fade { @apply relative; }
  .ping-overflow-fade::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: linear-gradient(to bottom, rgba(246, 241, 228, 0), rgba(246, 241, 228, 0.98));
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .ping-overflow-fade.has-more-below::after { opacity: 1; }

  .ping-diff ul { @apply list-none pl-0; }
  .ping-diff li { @apply my-1; }
  .ping-diff del {
    @apply block rounded-lg border border-coral/15 bg-coral/10 px-3 py-2 text-[11px] font-mono font-semibold text-coral;
    text-decoration-thickness: 2px;
  }
  .ping-diff ins {
    @apply block rounded-lg border border-brand-green/30 bg-brand-green/15 px-3 py-2 text-[11px] font-mono font-semibold text-brown;
    text-decoration: none;
  }

  .ping-builder-block { @apply overflow-hidden rounded-2xl border border-border-warm bg-white shadow-[0_1px_4px_rgba(43,36,29,0.04)]; }
  .ping-builder-block__top { @apply flex items-center gap-3 border-b border-border-warm px-4 py-3; }
  .ping-builder-block__drag { @apply inline-flex h-8 w-8 items-center justify-center rounded-xl border border-border-warm bg-cream/20 text-brown-light/60 transition hover:bg-cream hover:text-brown; }
  .ping-builder-block__content { @apply px-4 py-3; }
  .ping-builder-block__code { @apply rounded-xl border border-border-warm bg-cream/30 p-3 text-[11px] font-mono leading-relaxed text-brown-mid whitespace-pre-wrap; }
  .ping-builder-icon-btn {
    @apply inline-flex h-8 w-8 items-center justify-center rounded-xl border border-border-warm bg-white text-brown-light/60 transition hover:bg-cream hover:text-brown;
  }

  .ping-available-blocks { @apply max-h-[520px] overflow-auto space-y-2 pr-1; }
  .ping-available-block { @apply cursor-pointer rounded-2xl border border-border-warm bg-white px-3 py-3 transition hover:bg-cream/30; }
  .ping-entity-shell { @apply grid gap-6 lg:grid-cols-[260px_minmax(0,1fr)]; }
  .ping-entity-nav { @apply lg:sticky lg:top-6 self-start; }
  .ping-entity-nav-card { @apply overflow-hidden rounded-2xl border border-border-warm bg-white shadow-[0_1px_4px_rgba(43,36,29,0.04)]; }
  .ping-entity-nav-title { @apply border-b border-border-warm bg-cream/40 px-4 py-3 text-[10px] font-bold uppercase tracking-wider text-brown-light/60; }
  .ping-entity-nav-list { @apply p-2 space-y-1; }
  .ping-entity-nav-item {
    @apply relative flex items-center justify-between gap-3 rounded-xl px-3 py-2 text-[12px] font-semibold text-brown-light/70 transition hover:bg-cream/40 hover:text-brown;
  }
  .ping-entity-nav-item.is-active { @apply bg-cream text-brown; }
  .ping-entity-nav-item.is-active::before {
    content: '';
    @apply absolute left-0 top-2 bottom-2 w-1 rounded-full bg-coral;
  }

  .ping-tools-wall { @apply flex flex-wrap gap-x-2 gap-y-1; }
  .ping-tool-chip { @apply inline-flex items-center rounded-md border border-border-warm bg-cream/40 px-2 py-0.5 text-[11px] font-semibold text-brown-mid hover:bg-cream transition; }
  .ping-assistant-chip { @apply inline-flex items-center rounded-md border border-border-warm bg-mint/30 px-2 py-0.5 text-[11px] font-semibold text-brown-mid hover:bg-mint/50 transition; }
  .ping-code-pill { @apply inline-flex items-center gap-1 rounded-lg border border-border-warm bg-cream px-2 py-1 font-mono text-[11px] font-semibold text-brown; }

  .ping-filter-bar { @apply flex flex-wrap items-center gap-3; }
  .ping-filter-input {
    @apply w-full rounded-xl border border-border-warm bg-cream px-3 py-2 text-sm font-medium text-brown placeholder:text-brown-light/50 outline-none transition-all;
  }
  .ping-filter-input:focus { box-shadow: 0 0 0 3px rgba(239, 70, 61, 0.08); border-color: #ef463d; }
  .ping-filter-button { @apply rounded-xl bg-coral px-4 py-2 text-sm font-bold text-white shadow-[0_4px_16px_rgba(239,70,61,0.25)] transition-all hover:bg-coral-dark active:scale-[0.97]; }
  .ping-filter-clear { @apply rounded-xl border border-border-warm bg-white px-4 py-2 text-sm font-semibold text-brown-mid hover:bg-cream transition-all active:scale-[0.97]; }

  .ping-typeahead-menu {
    @apply absolute left-0 right-0 top-full z-30 mt-2 overflow-hidden rounded-2xl border border-border-warm bg-white shadow-[0_12px_30px_rgba(43,36,29,0.10)];
  }
  .ping-typeahead-results { @apply max-h-64 overflow-auto py-1; }
  .ping-typeahead-item {
    @apply flex w-full items-center justify-between gap-3 px-4 py-2 text-left text-[12px] font-semibold text-brown-mid transition hover:bg-cream/50;
  }
  .ping-typeahead-status { @apply px-4 py-3 text-[11px] font-semibold text-brown-light/70; }
  .ping-typeahead-clear {
    @apply absolute right-3 top-1/2 -translate-y-1/2 rounded-lg border border-border-warm bg-white p-1.5 text-brown-light/60 transition hover:bg-cream hover:text-brown;
  }

  .ping-pagination { @apply w-full flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between; }
  .ping-page-list { @apply flex items-center gap-1; }
  .ping-page-btn {
    @apply inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-warm bg-white text-sm font-semibold text-brown-mid transition;
  }
  .ping-page-btn:hover { background: rgba(246, 241, 228, 1); }
  .ping-page-btn[aria-disabled="true"] { @apply cursor-not-allowed opacity-50; }
  .ping-page-btn--active { @apply border-coral bg-coral text-white shadow-[0_2px_8px_rgba(239,70,61,0.25)]; }
  .ping-page-meta { @apply text-[11px] font-medium text-brown-light; }

  .ping-settings-section { @apply border border-border-warm rounded-2xl bg-white overflow-hidden shadow-[0_1px_4px_rgba(43,36,29,0.04)]; }
  .ping-settings-summary { @apply flex cursor-pointer list-none items-center justify-between gap-4 border-b border-border-warm px-4 py-4 select-none; }
  .ping-settings-summary::-webkit-details-marker { display: none; }
  .ping-settings-summary::marker { content: ''; }
  .ping-settings-chevron { @apply h-5 w-5 text-brown-light/50 transition-transform duration-200 group-open:rotate-180; }
  .ping-settings-body { @apply bg-white; }
  .ping-settings-head { @apply grid grid-cols-12 gap-4 border-b border-border-warm bg-cream/40 px-6 py-3 text-[11px] font-bold uppercase tracking-wider text-brown-light/60; }
  .ping-settings-head > :nth-child(1) { @apply col-span-12 md:col-span-4; }
  .ping-settings-head > :nth-child(2) { @apply col-span-12 md:col-span-5; }
  .ping-settings-head > :nth-child(3) { @apply col-span-6 md:col-span-2; }
  .ping-settings-head > :nth-child(4) { @apply col-span-6 md:col-span-1; }

  .ping-settings-row { @apply grid grid-cols-12 gap-4 px-6 py-5; }
  .ping-settings-setting { @apply col-span-12 md:col-span-4 min-w-0; }
  .ping-settings-setting__name { @apply text-[13px] font-semibold text-brown; }
  .ping-settings-setting__desc { @apply mt-1 text-[12px] font-medium text-brown-light; }
  .ping-settings-setting__key { @apply mt-2 font-mono text-[11px] font-semibold text-brown-light/60; }
  .ping-settings-value { @apply col-span-12 md:col-span-5 min-w-0 text-sm text-brown-mid; }
  .ping-settings-source { @apply col-span-6 md:col-span-2 flex items-start; }
  .ping-settings-actions { @apply col-span-6 md:col-span-1 flex items-start justify-end gap-2; }

  .ping-settings-empty { @apply text-[12px] font-medium italic text-brown-light; }
  .ping-settings-pre { @apply max-w-full whitespace-pre-wrap break-words rounded-xl border border-border-warm bg-cream/20 p-3 text-[11px] font-mono text-brown; }
  .ping-settings-pre--preview { @apply max-h-28 overflow-hidden; }
  .ping-settings-pre--expanded { @apply max-h-80 overflow-auto; }
  .ping-settings-text { @apply rounded-xl border border-border-warm bg-cream/10 px-3 py-2 text-[12px] font-medium text-brown-mid; }
  .ping-settings-expand { @apply mt-2 inline-flex items-center rounded-lg border border-border-warm bg-white px-2.5 py-1.5 text-[11px] font-bold text-brown-mid hover:bg-cream transition; }

  .ping-kv-row { @apply grid grid-cols-12 gap-4 px-6 py-4; }
  .ping-kv-key { @apply col-span-5 text-[11px] font-bold uppercase tracking-wider text-brown-light/50; }
  .ping-kv-val { @apply col-span-7 text-[13px] font-semibold text-brown-mid break-words; }

  .ping-role-grid { @apply grid grid-cols-1 gap-2 sm:grid-cols-2; }
  .ping-role-option { @apply flex items-center gap-2 rounded-xl border border-border-warm bg-cream/15 px-3 py-2 transition hover:bg-cream/30; }
  .ping-role-checkbox { @apply h-4 w-4 rounded border-border-warm text-coral focus:ring-coral/20; }
}

.ping-sidebar__scroll::-webkit-scrollbar { width: 5px; }
.ping-sidebar__scroll::-webkit-scrollbar-track { background: transparent; }
.ping-sidebar__scroll::-webkit-scrollbar-thumb { background: #dfe8dd; border-radius: 99px; }
.ping-sidebar__scroll::-webkit-scrollbar-thumb:hover { background: #96C2AC; }

.select2-container {
  /* The container where the selectbox is housing*/
  @apply relative box-border align-middle inline-block m-0 mb-2;
}
.select2-container .select2-selection--single {
  /* Selection box itself */
  @apply box-border cursor-pointer block select-none shadow border rounded;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  /* DIV inside Selection box with text, clear button and arrow down*/
  @apply block h-6 pl-1 pr-6 truncate;
}
.select2-container .select2-selection--single .select2-selection__clear {
  /* The DIV where the X is housing to clear the chosen option */
  @apply relative -m-1;
}
.select2-container[dir="rtl"]
  .select2-selection--single
  .select2-selection__rendered {
  /*@apply;*/
}

.select2-container .select2-selection--multiple {
  @apply box-border overflow-hidden h-4 cursor-pointer block select-none;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  @apply inline-block pl-2 truncate whitespace-nowrap;
}
.select2-container .select2-search--inline {
  /* Search box*/
  @apply float-left;
}
.select2-container .select2-search--inline .select2-search__field {
  @apply box-border border dark:border-gray-600 pl-1 my-1 w-full text-base;
}
.select2-container
  .select2-search--inline
  .select2-search__field::-webkit-search-cancel-button {
  @apply appearance-none;
}

.select2-dropdown {
  /* Dropdown area after the arrow down is clicked */
  @apply absolute block w-auto box-border bg-white dark:bg-slate-700 border-solid border border-gray-200 z-50 float-left;
}

.select2-results {
  @apply block text-black dark:text-gray-300;
}

.select2-results__options {
  @apply list-none m-0 p-0;
}

.select2-results__option {
  /* The rows with results that you see after dropdown.
	Increase p-1 to p-2 to have more space between results */
  @apply p-1 select-none;
}
.select2-results__option[aria-selected] {
  @apply cursor-pointer;
}

.select2-container--open .select2-dropdown {
  /* Dropdown container opened and results are shown*/
  @apply mt-3 left-0;
}

.select2-container--open .select2-dropdown--above {
  /* The left and right borders of the option rows */
  @apply rounded border-gray-400 dark:border-gray-700 shadow;
}

.select2-container--open .select2-dropdown--below {
  /* The left and right borders of the option rows */
  @apply rounded border-gray-400 dark:border-gray-700 shadow;
}

.select2-search--dropdown {
  /* Search dropdown element*/
  @apply block p-2;
}
.select2-search--dropdown .select2-search__field {
  /* Search box itself where you can enter text*/
  @apply h-10 p-1 bg-white dark:bg-slate-500 box-border rounded border-2 border-blue-300 dark:border-gray-700 dark:text-gray-200 outline-none;
  width: 100%;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
  @apply appearance-none;
}
.select2-search--dropdown.select2-search--hide {
  @apply hidden;
}

.select2-close-mask {
  @apply block w-12 min-w-full m-0 p-0;
  border: 0;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0);
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/*

	Default template settings:

*/

.select2-container--default .select2-selection--single {
  /* Selection bar - Self */
  @apply p-2 h-10 bg-white dark:bg-slate-700 border border-solid dark:border-gray-700;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  /* Selection bar - Text color of the item you selected from the results */
  @apply text-gray-700 dark:text-gray-200;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__clear {
  /* Selection bar - Clear button - If this property is enabled*/
  @apply cursor-pointer float-right text-red-700;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  /* Selection bar - Color of the placeholder text before selection - If this property is enabled */
  @apply text-gray-600 dark:text-gray-300;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  /* Selection bar - DIV where the arrow pointing down is living*/
  @apply absolute right-0 top-0 h-10 w-8;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  /* Arrow is a CSS triangle that does not exists in Tailwind without a package */
  @apply absolute border-solid h-0 w-0 border-t-4 border-r-4 border-b-0 border-l-4;
  border-color: #000 transparent transparent transparent;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  top: 50%;
}

.select2-container--default[dir="rtl"]
  .select2-selection--single
  .select2-selection__clear {
  /* Selection bar - Clear button - If this property is enabled from right to left*/
  @apply float-left ml-4;
}

.select2-container--default[dir="rtl"]
  .select2-selection--single
  .select2-selection__arrow {
  /* Placement of the dropdown arrow when in rtl mode */
  @apply left-0 right-auto;
}

.select2-container--default.select2-container--disabled
  .select2-selection--single {
  /* Selection by property disabled*/
  @apply cursor-default bg-gray-300;
}
.select2-container--default.select2-container--disabled
  .select2-selection--single
  .select2-selection__clear {
  /* Selection bar - Hide the clear cross when selection bar is disabled*/
  @apply hidden;
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-selection--multiple {
  @apply p-1 min-h-full h-full border border-solid dark:border-gray-700 rounded shadow bg-white dark:bg-slate-700;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered {
  @apply box-border list-none m-0 px-1 min-w-full;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered
  li {
  @apply list-none;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__clear {
  @apply float-right cursor-pointer mt-1 mr-2 p-1;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  @apply bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-200 border cursor-default rounded my-1 mr-1 px-2 float-left;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  @apply text-gray-700 dark:text-gray-200 cursor-pointer inline-block mr-1;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover {
  @apply text-gray-700 dark:text-gray-200;
}
.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  @apply border-2 outline-none;
}

.select2-container--default.select2-container--disabled
  .select2-selection__choice__remove {
  @apply hidden;
}
.select2-container--classic
  .select2-selection--multiple
  .select2-selection__choice {
  @apply bg-gray-300 border-2 dark:border-gray-700 shadow rounded float-left cursor-default mt-1 mr-1 px-1;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  /* The border of the search textbox */
  @apply border-solid;
}

.select2-container--default .select2-search--inline .select2-search__field {
  /* Search textbox */
  @apply border-none bg-transparent outline-none shadow-none select-text;
}

.select2-container--default .select2-results > .select2-results__options {
  /* Hight of the dropdown zone where the options or results are visible */
  @apply h-full max-h-32 overflow-y-auto;
}

.select2-container--default .select2-results__option[role="group"] {
  /* No clue what this does */
  @apply p-0;
}

.select2-container--default .select2-results__option[aria-disabled="true"] {
  @apply text-gray-700;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  /* The already selected option row color */
  @apply bg-gray-300 dark:text-gray-700;
}
.select2-results__option--selected {
  @apply hidden;
}
.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em;
}
.select2-container--default
  .select2-results__option
  .select2-results__option
  .select2-results__group {
  padding-left: 0;
}
.select2-container--default
  .select2-results__option
  .select2-results__option
  .select2-results__option {
  margin-left: -1em;
  padding-left: 2em;
}
.select2-container--default
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option {
  margin-left: -2em;
  padding-left: 3em;
}
.select2-container--default
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option {
  margin-left: -3em;
  padding-left: 4em;
}
.select2-container--default
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option {
  margin-left: -4em;
  padding-left: 5em;
}
.select2-container--default
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option
  .select2-results__option {
  margin-left: -5em;
  padding-left: 6em;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  /* Background color and text color of the options rows when select is open */
  @apply bg-gray-100 dark:bg-gray-500 text-gray-700 dark:text-gray-200;
}

.select2-container--default .select2-results__group {
  /* Have no idea what this is for */
  @apply cursor-default block;
  padding: 6px;
}
@tailwind utilities;

@layer components {
  .link-label-blue {
    @apply font-bold text-sm text-blue-500 hover:text-blue-800;
  }

  .black-button {
    @apply text-sm bg-slate-900 text-white px-4 py-2 rounded-lg hover:bg-slate-800 flex items-center;
  }

  .gray-button {
    @apply text-sm bg-slate-200 text-slate-500 px-4 py-2 rounded-lg hover:bg-slate-300 flex items-center;
  }

  .auth-button {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }

  .link-sidebar {
    @apply flex items-center px-2 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100;
  }

  .dropdown-button {
    @apply inline-flex items-center justify-center gap-1.5 rounded-xl border border-border-warm bg-white px-3 py-1.5 text-[11px] font-semibold text-brown-mid transition hover:bg-cream;
  }

  .dropdown-menu {
    @apply absolute right-0 z-20 mt-2 w-56 overflow-hidden rounded-2xl border border-border-warm bg-white shadow-xl;
  }

  .dropdown-option {
    @apply flex w-full items-center gap-2 px-4 py-2.5 text-[12px] font-semibold text-brown-mid transition hover:bg-cream;
  }

  .dropdown-option-not-allowed {
    @apply flex w-full items-center gap-2 px-4 py-2.5 text-[12px] font-semibold text-brown-light/50 cursor-not-allowed;
  }

  .minimal-dropdown-button {
    @apply text-brown-light/60 hover:text-brown p-1 rounded-full hover:bg-cream focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-coral/30;
  }

  .minimal.dropdown-menu {
    @apply origin-top-right absolute right-0 mt-2 w-56 overflow-hidden rounded-2xl border border-border-warm bg-white shadow-xl focus:outline-none;
  }

  .popover-content {
    @apply z-50 min-w-[200px] max-w-[300px] overflow-hidden text-left;
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 1023px) {
  .sidebar-content {
    transition: transform 0.3s ease-in-out;
  }
  .sidebar-content.-translate-x-full {
    transform: translateX(-100%);
  }
}

.ping-scroll::-webkit-scrollbar,
.ping-shell__content--shellless .ping-page-body::-webkit-scrollbar { width: 5px; }
.ping-scroll::-webkit-scrollbar-track,
.ping-shell__content--shellless .ping-page-body::-webkit-scrollbar-track { background: transparent; }
.ping-scroll::-webkit-scrollbar-thumb,
.ping-shell__content--shellless .ping-page-body::-webkit-scrollbar-thumb { background: #dfe8dd; border-radius: 99px; }
.ping-scroll::-webkit-scrollbar-thumb:hover,
.ping-shell__content--shellless .ping-page-body::-webkit-scrollbar-thumb:hover { background: #96C2AC; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

turbo-cable-stream-source {
    display: none;
}