@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ================================================================
   THEME — CSS custom properties (single source of truth)
   Change these values to re-theme the entire application.
   ================================================================ */
:root {
  /* Brand */
  --ts-primary:        13 148 136;    /* teal-600  #0d9488 */
  --ts-primary-light:  204 251 241;   /* teal-100  #ccfbf1 */
  --ts-primary-dark:   15 118 110;    /* teal-700  #0f766e */
  --ts-accent:         20 184 166;    /* teal-500  #14b8a6 */

  /* Semantic status */
  --ts-success:        22 163 74;     /* green-600 #16a34a */
  --ts-warning:        234 179 8;     /* amber-500 #eab308 */
  --ts-danger:         220 38 38;     /* red-600   #dc2626 */
  --ts-info:           59 130 246;    /* blue-500  #3b82f6 */

  /* Surfaces */
  --ts-bg:             255 255 255;
  --ts-surface:        249 250 251;   /* gray-50 */
  --ts-surface-secondary: 243 244 246; /* gray-100 */
  --ts-surface-hover:  243 244 246;
  --ts-surface-active: 229 231 235;   /* gray-200 */

  /* Borders */
  --ts-border:         229 231 235;   /* gray-200 */
  --ts-border-subtle:  243 244 246;   /* gray-100 */
  --ts-border-strong:  209 213 219;   /* gray-300 */

  /* Text */
  --ts-text:           17 24 39;      /* gray-900 */
  --ts-text-secondary: 75 85 99;      /* gray-600 */
  --ts-text-muted:     156 163 175;   /* gray-400 */
  --ts-text-disabled:  209 213 219;   /* gray-300 */
  --ts-text-inverse:   255 255 255;
}

/* ================================================================
   BASE LAYER — element defaults
   ================================================================ */
@layer base {
  h1 { @apply text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight text-ts-text mb-2; }
  h2 { @apply text-xl sm:text-2xl lg:text-3xl font-semibold tracking-tight text-ts-text; }
  h3 { @apply text-lg sm:text-xl lg:text-2xl font-semibold text-ts-text; }
  h4 { @apply text-base sm:text-lg lg:text-xl font-medium text-ts-text; }
  h5 { @apply text-base lg:text-lg font-medium text-ts-text; }
  h6 { @apply text-sm lg:text-base font-medium text-ts-text-secondary uppercase; }

  label {
    @apply block text-sm font-medium text-ts-text-secondary mb-1;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea {
    @apply w-full rounded-md border border-ts-border-strong bg-ts-bg px-3 py-2 text-sm
           text-ts-text placeholder-ts-text-muted shadow-sm
           focus:border-ts-primary focus:ring-1 focus:ring-ts-primary
           transition-colors duration-150;
  }

  input[type="checkbox"] {
    @apply h-4 w-4 rounded border-ts-border-strong text-ts-primary focus:ring-ts-primary;
  }

  input[type="radio"] {
    @apply h-4 w-4 border-ts-border-strong text-ts-primary focus:ring-ts-primary;
  }

  input:disabled, select:disabled, textarea:disabled, button:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
}

/* ================================================================
   COMPONENT LAYER — ts- BEM library
   ================================================================ */
@layer components {

  /* ------ Layout ------ */
  .ts-container      { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
  .ts-container-full { @apply w-full px-4 sm:px-6 lg:px-8; }
  .ts-section        { @apply py-6; }
  .ts-subtitle       { @apply text-ts-text-muted mb-2; }

  .ts-link { @apply underline; }

  /* ------ Page Header ------ */
  .ts-page-header {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6;
  }
  .ts-page-header__title   { @apply text-xl sm:text-2xl font-bold text-ts-text mb-0; }
  .ts-page-header__desc    { @apply text-sm text-ts-text-muted mt-1; }
  .ts-page-header__actions { @apply flex items-center gap-2 flex-shrink-0; }

  /* ------ Breadcrumb ------ */
  .ts-breadcrumb {
    @apply bg-ts-bg border-b border-ts-border;
  }
  .ts-breadcrumb__inner {
    @apply flex items-center space-x-2 text-sm text-ts-text-muted py-3;
  }
  .ts-breadcrumb__link  { @apply hover:text-ts-primary transition-colors; }
  .ts-breadcrumb__sep   { @apply size-4 text-ts-text-disabled; }

  /* ------ Section Title (unified) ------ */
  .ts-section-title     { @apply text-base font-semibold text-ts-text mb-4 flex items-center gap-2; }
  .ts-section-title--lg { @apply text-lg; }

  /* ------ Buttons: base + solid variants ------ */
  .ts-btn {
    @apply inline-flex items-center justify-center gap-2
           px-4 py-2 rounded-md text-sm font-medium
           border border-transparent
           focus:outline-none focus:ring-2 focus:ring-offset-2
           transition-all duration-150;
  }

  .ts-btn--primary    { @apply bg-ts-primary text-ts-text-inverse hover:bg-ts-primary-dark focus:ring-ts-primary active:scale-[0.98]; }
  .ts-btn--success    { @apply bg-ts-success  text-ts-text-inverse hover:brightness-90  focus:ring-ts-success; }
  .ts-btn--danger     { @apply bg-ts-danger   text-ts-text-inverse hover:brightness-90  focus:ring-ts-danger; }
  .ts-btn--warning    { @apply bg-ts-warning  text-ts-text         hover:brightness-90  focus:ring-ts-warning; }
  .ts-btn--info       { @apply bg-ts-info     text-ts-text-inverse hover:brightness-90  focus:ring-ts-info; }
  .ts-btn--secondary  { @apply bg-ts-surface-active text-ts-text hover:bg-ts-border-strong focus:ring-ts-border-strong; }
  .ts-btn--dark       { @apply bg-ts-text     text-ts-text-inverse hover:bg-ts-text-secondary focus:ring-ts-text; }
  .ts-btn--light      { @apply bg-ts-bg border-ts-border text-ts-text hover:bg-ts-surface focus:ring-ts-border; }
  .ts-btn--ghost      { @apply bg-transparent text-ts-text-secondary hover:bg-ts-surface-hover focus:ring-ts-border; }

  /* CTA (call-to-action) */
  .ts-btn--cta {
    @apply rounded-md bg-ts-primary px-3.5 py-2.5 text-sm font-semibold text-ts-text-inverse shadow-sm
           hover:bg-ts-primary-dark focus-visible:outline focus-visible:outline-2
           focus-visible:outline-offset-2 focus-visible:outline-ts-primary
           active:scale-[0.98] transition-all;
  }

  .ts-btn--cta-link {
    @apply text-sm font-semibold leading-6 text-ts-text;
  }

  /* Buttons: outline variants */
  .ts-btn--outline           { @apply bg-transparent border-ts-border text-ts-text hover:bg-ts-surface focus:ring-ts-border; }
  .ts-btn--outline-primary   { @apply bg-transparent border-ts-primary text-ts-primary hover:bg-ts-primary-light focus:ring-ts-primary; }
  .ts-btn--outline-success   { @apply bg-transparent border-ts-success text-ts-success hover:bg-green-50 focus:ring-ts-success; }
  .ts-btn--outline-danger    { @apply bg-transparent border-ts-danger  text-ts-danger  hover:bg-red-50   focus:ring-ts-danger; }
  .ts-btn--outline-secondary { @apply bg-transparent border-ts-border-strong text-ts-text-secondary hover:bg-ts-surface focus:ring-ts-border; }
  .ts-btn--outline-dark      { @apply bg-transparent border-ts-text   text-ts-text   hover:bg-ts-surface-secondary focus:ring-ts-text; }
  .ts-btn--outline-light     { @apply bg-transparent border-ts-border text-ts-text-secondary hover:bg-ts-surface focus:ring-ts-border; }

  /* Buttons: sizes */
  .ts-btn--sm   { @apply px-2.5 py-1.5 text-xs rounded-md; }
  .ts-btn--lg   { @apply px-5 py-3 text-base rounded-lg; }
  .ts-btn--icon { @apply w-9 h-9 p-0 justify-center rounded-md; }

  /* Buttons: disabled */
  .ts-btn:disabled { @apply opacity-60 cursor-not-allowed; }

  /* Buttons: loading */
  .ts-btn--loading {
    @apply relative pointer-events-none;
  }
  .ts-btn--loading::after {
    content: '';
    @apply absolute inset-0 flex items-center justify-center;
    background: inherit;
    border-radius: inherit;
  }
  .ts-btn--loading > * { @apply invisible; }
  .ts-btn--loading::before {
    content: '';
    @apply absolute w-4 h-4 border-2 border-current border-t-transparent rounded-full;
    animation: spin 0.6s linear infinite;
  }

  /* ------ Key-Value Row (unified) ------ */
  .ts-kv             { @apply flex justify-between py-2 border-b border-ts-border last:border-b-0; }
  .ts-kv__label      { @apply text-sm text-ts-text-secondary; }
  .ts-kv__value      { @apply text-sm font-medium text-ts-text text-right; }
  .ts-kv--stacked    { @apply flex-col gap-0.5; }
  .ts-kv--stacked .ts-kv__value { @apply text-left; }
  .ts-kv--icon       { @apply flex items-start gap-2 border-b-0 py-1; }
  .ts-kv--icon .ts-kv__icon { @apply size-5 text-ts-text-muted mt-0.5 flex-shrink-0; }

  /* ------ Table ------ */
  .ts-table                                { @apply w-full border-collapse text-sm text-left text-ts-text-secondary; }
  .ts-table thead                          { @apply bg-ts-surface-secondary text-ts-text; }
  .ts-table th                             { @apply px-6 py-3 text-left text-xs font-medium text-ts-text-muted uppercase tracking-wider; }
  .ts-table thead th:last-child            { @apply text-right; }
  .ts-table tbody td:last-child            { @apply text-right; }
  .ts-table tbody td:last-child > .flex    { @apply justify-end; }
  .ts-table tbody                          { @apply bg-ts-bg divide-y divide-ts-border; }
  .ts-table tbody td                       { @apply border-b border-ts-border px-6 py-4 whitespace-nowrap; }
  .ts-table tbody tr:hover                 { @apply bg-ts-surface; }
  .ts-table--striped tbody tr:nth-child(even) { @apply bg-ts-surface; }
  .ts-table--bordered th, .ts-table--bordered td { @apply border border-ts-border-strong; }
  .ts-table--sm th, .ts-table--sm td       { @apply px-2 py-1 text-xs; }

  /* ------ Card ------ */
  .ts-card          { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm overflow-hidden; }
  .ts-card__header  { @apply px-5 py-3 border-b border-ts-border bg-ts-surface; }
  .ts-card__body    { @apply p-5; }
  .ts-card__footer  { @apply px-5 py-3 border-t border-ts-border bg-ts-surface; }
  .ts-card__title   { @apply text-base font-semibold text-ts-text; }
  .ts-card__text    { @apply text-sm text-ts-text-secondary; }

  /* ------ Badge ------ */
  .ts-badge             { @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium; }
  .ts-badge--primary    { @apply bg-ts-primary-light text-ts-primary-dark; }
  .ts-badge--success    { @apply bg-green-100  text-green-800; }
  .ts-badge--danger     { @apply bg-red-100    text-red-800; }
  .ts-badge--warning    { @apply bg-yellow-100 text-yellow-800; }
  .ts-badge--info       { @apply bg-blue-100   text-blue-800; }
  .ts-badge--secondary  { @apply bg-ts-surface-secondary text-ts-text-secondary; }
  .ts-badge--trainer    { @apply bg-purple-100 text-purple-800; }
  .ts-badge--specialist { @apply bg-green-100  text-green-800; }

  /* ------ Alert ------ */
  .ts-alert           { @apply px-4 py-3 rounded-md text-sm mb-4; }
  .ts-alert--info     { @apply bg-ts-primary-light text-ts-primary-dark border border-ts-primary/20; }
  .ts-alert--success  { @apply bg-green-50  text-green-700  border border-green-200; }
  .ts-alert--warning  { @apply bg-yellow-50 text-yellow-700 border border-yellow-200; }
  .ts-alert--danger   { @apply bg-red-50    text-red-700    border border-red-200; }

  /* ------ Modal ------ */
  .ts-modal           { @apply fixed inset-0 z-50 flex items-center justify-center hidden; }
  .ts-modal--active   { @apply flex; }
  .ts-modal__overlay  { @apply fixed inset-0 bg-black bg-opacity-50; }
  .ts-modal__dialog   { @apply relative bg-ts-bg rounded-lg shadow-xl max-w-lg w-full mx-4 z-10; }
  .ts-modal__header   { @apply flex items-center justify-between px-6 py-4 border-b border-ts-border; }
  .ts-modal__body     { @apply px-6 py-4; }
  .ts-modal__footer   { @apply flex items-center justify-end gap-2 px-6 py-4 border-t border-ts-border; }
  .ts-modal__close    { @apply text-ts-text-muted hover:text-ts-text-secondary transition-colors; }

  /* ------ Form ------ */
  .ts-form-group       { @apply mb-4; }
  .ts-form-check        { @apply flex items-center gap-2; }
  .ts-form-check label  { @apply mb-0 text-sm font-normal text-ts-text-secondary; }
  .ts-form-check__input { @apply h-4 w-4 rounded border-ts-border-strong text-ts-primary focus:ring-ts-primary shrink-0; }
  .ts-form-check__label { @apply text-sm text-ts-text-secondary leading-snug; }
  .ts-form-hint        { @apply mt-1 text-xs text-ts-text-muted; }
  .ts-form-date        { @apply flex items-center gap-3; }
  .ts-form-date__field { @apply flex-1; }
  .ts-form-date__sep   { @apply text-ts-text-muted text-sm font-medium; }
  .ts-input-group      { @apply flex items-stretch; }
  .ts-input-group input { @apply rounded-none first:rounded-l-md last:rounded-r-md; }
  .ts-input-group__text { @apply inline-flex items-center px-3 text-sm text-ts-text-secondary bg-ts-surface-secondary border border-ts-border-strong; }

  /* ------ List ------ */
  .ts-list        { @apply divide-y divide-ts-border border border-ts-border rounded-lg overflow-hidden; }
  .ts-list__item  { @apply px-4 py-3 bg-ts-bg; }
  .ts-list__item:hover { @apply bg-ts-surface; }

  /* ------ Image ------ */
  .ts-img--fluid  { @apply max-w-full h-auto; }
  .ts-img--circle { @apply rounded-full object-cover; }

  /* ------ Avatar ------ */
  .ts-avatar        { @apply rounded-full object-cover flex-shrink-0; }
  .ts-avatar--xs    { @apply w-8 h-8; }
  .ts-avatar--sm    { @apply w-10 h-10; }
  .ts-avatar--md    { @apply w-12 h-12; }
  .ts-avatar--lg    { @apply w-14 h-14; }
  .ts-avatar--xl    { @apply w-16 h-16; }

  .ts-avatar-placeholder {
    @apply rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center flex-shrink-0;
  }
  .ts-avatar-placeholder span { @apply text-ts-text-inverse font-bold; }
  .ts-avatar-placeholder--xs  { @apply w-8 h-8; }
  .ts-avatar-placeholder--xs span { @apply text-xs; }
  .ts-avatar-placeholder--sm  { @apply w-10 h-10; }
  .ts-avatar-placeholder--sm span { @apply text-sm; }
  .ts-avatar-placeholder--md  { @apply w-12 h-12; }
  .ts-avatar-placeholder--md span { @apply text-sm; }
  .ts-avatar-placeholder--lg  { @apply w-14 h-14; }
  .ts-avatar-placeholder--lg span { @apply text-base; }
  .ts-avatar-placeholder--xl  { @apply w-16 h-16; }
  .ts-avatar-placeholder--xl span { @apply text-xl; }
  .ts-avatar-placeholder--neutral {
    @apply bg-ts-surface-active;
    background-image: none;
  }
  .ts-avatar-placeholder--neutral span { @apply text-ts-text-muted; }

  /* ------ Navigation ------ */
  .ts-nav                { @apply bg-ts-bg/95 backdrop-blur-md shadow-sm fixed w-full top-0 z-40 border-b border-ts-border-subtle; }
  .ts-nav__bar           { @apply mx-auto px-4 py-3 flex justify-between items-center; }
  .ts-nav__brand         { @apply flex flex-1 items-center; }
  .ts-nav__brand-name    { @apply text-2xl text-ts-text; }
  .ts-nav__search        { @apply flex-1 lg:mx-8; }
  .ts-nav__links         { @apply hidden md:flex space-x-4 items-center; }
  .ts-nav__item          { @apply inline-flex gap-1 items-center text-ts-text-secondary hover:text-ts-primary transition-colors; }
  .ts-nav__item--active  { @apply text-ts-primary; }
  .ts-nav__icon          { @apply inline-block size-4; }
  .ts-nav__dot           { @apply inline-block rounded-full bg-ts-danger w-2 h-2; }
  .ts-nav__toggle        { @apply text-ts-text-secondary focus:outline-none p-2.5 ml-3 rounded-md hover:bg-ts-surface-hover active:bg-ts-surface-active transition-colors; }
  .ts-nav__auth          { @apply text-ts-text; }

  /* Nav avatar (desktop) */
  .ts-nav__avatar              { @apply w-8 h-8 rounded-full object-cover border-2 border-ts-border transition; }
  .ts-nav__avatar-placeholder  {
    @apply w-8 h-8 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center border-2 border-ts-border transition;
  }
  .ts-nav__avatar-placeholder span { @apply text-ts-text-inverse text-sm font-bold; }
  .group:hover .ts-nav__avatar             { @apply border-ts-accent; }
  .group:hover .ts-nav__avatar-placeholder { @apply border-ts-accent; }
  .ts-nav__user-name { @apply text-sm font-medium text-ts-text-secondary hidden lg:inline; }

  /* Nav dropdown */
  .ts-nav-dropdown           { @apply relative; }
  .ts-nav-dropdown__trigger  { @apply flex items-center gap-2 focus:outline-none cursor-pointer; }
  .ts-nav-dropdown__menu     {
    @apply absolute right-0 top-full mt-1 w-64 bg-ts-bg rounded-lg shadow-lg
           border border-ts-border opacity-0 invisible transition-all duration-200 z-50;
  }
  .group:hover .ts-nav-dropdown__menu { @apply opacity-100 visible; }
  .ts-nav-dropdown__header   { @apply px-4 py-3 border-b border-ts-border-subtle; }
  .ts-nav-dropdown__name     { @apply text-sm font-semibold text-ts-text; }
  .ts-nav-dropdown__email    { @apply text-xs text-ts-text-muted truncate; }
  .ts-nav-dropdown__section  { @apply py-1; }
  .ts-nav-dropdown__section--bordered { @apply py-1 border-t border-ts-border-subtle; }
  .ts-nav-dropdown__label    { @apply px-4 pt-2 pb-1 text-xs font-semibold uppercase tracking-wider; }
  .ts-nav-dropdown__label--gray { @apply text-ts-text-muted; }
  .ts-nav-dropdown__label--blue { @apply text-ts-primary; }
  .ts-nav-dropdown__label--red  { @apply text-ts-danger; }
  .ts-nav-dropdown__link     { @apply flex items-center gap-3 px-4 py-2 text-sm text-ts-text-secondary hover:bg-ts-surface transition; }
  .ts-nav-dropdown__icon     { @apply size-4 text-ts-text-muted; }
  .ts-nav-dropdown__icon--blue { @apply text-ts-accent; }
  .ts-nav-dropdown__icon--red  { @apply text-ts-danger; }
  .ts-nav-dropdown__logout   { @apply flex items-center gap-3 w-full px-4 py-2 text-sm text-ts-danger hover:bg-red-50 transition rounded-b-lg; }

  /* Nav mobile menu */
  .ts-nav-mobile {
    @apply lg:hidden bg-ts-bg shadow-lg overflow-hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
    opacity: 0;
  }
  .ts-nav-mobile.ts-nav-mobile--open {
    max-height: calc(100vh - 75px);
    opacity: 1;
    overflow-y: auto;
    transition: max-height 0.35s ease-in, opacity 0.2s ease-in;
  }
  .ts-nav-mobile__link         { @apply block px-4 py-3 text-ts-text-secondary hover:text-ts-primary hover:bg-ts-surface transition-colors; }
  .ts-nav-mobile__link--danger { @apply block px-4 py-3 text-ts-danger hover:brightness-90 hover:bg-red-50 transition-colors; }
  .ts-nav-mobile__divider      { @apply border-t border-ts-border mt-2 pt-2; }
  .ts-nav-mobile__divider--sm  { @apply border-t border-ts-border-subtle mt-1 pt-1; }
  .ts-nav-mobile__lang         { @apply border-t border-ts-border mt-1 pt-1 px-4 py-2; }
  .ts-nav-mobile__user         { @apply flex items-center gap-3 px-4 py-2; }
  .ts-nav-mobile__user-name    { @apply text-sm font-semibold text-ts-text; }
  .ts-nav-mobile__avatar       { @apply w-8 h-8 rounded-full object-cover; }
  .ts-nav-mobile__avatar-placeholder {
    @apply w-8 h-8 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center;
  }
  .ts-nav-mobile__avatar-placeholder span { @apply text-ts-text-inverse text-xs font-bold; }
  .ts-nav-mobile__label        { @apply px-4 py-1 text-xs font-semibold text-ts-primary uppercase; }
  .ts-nav-mobile__logout       { @apply block w-full text-left px-4 py-2 text-ts-danger hover:brightness-90; }

  /* Nav admin dark variant */
  .ts-nav--admin               { @apply bg-gray-900 border-b-gray-800; backdrop-filter: none; }
  .ts-nav__brand-name--admin   { @apply text-white text-lg; }
  .ts-nav__item--admin         { @apply text-gray-300 hover:text-white; }
  .ts-nav__toggle--admin       { @apply text-gray-300 hover:bg-gray-800; }
  .ts-btn--admin-logout        { @apply text-gray-300 hover:text-white hover:bg-gray-800; }
  .ts-nav-mobile--admin        { @apply bg-gray-900; }
  .ts-nav-mobile__link--admin  { @apply text-gray-300 hover:text-white hover:bg-gray-800; }

  /* ------ Footer ------ */
  .ts-footer          { @apply bg-gray-900 text-sm px-8 pt-12 pb-6; }
  .ts-footer__inner    { @apply max-w-6xl mx-auto; }
  .ts-footer__columns  { @apply grid grid-cols-1 sm:grid-cols-3 gap-8 mb-8; }
  .ts-footer__heading  { @apply font-semibold text-white mb-3 text-xs uppercase tracking-wider; }
  .ts-footer__links    { @apply list-none p-0 m-0 space-y-2; }
  .ts-footer__links a  { @apply text-gray-400 no-underline hover:text-white transition-colors duration-150; }
  .ts-footer__bottom   { @apply border-t border-gray-700 pt-4 text-center text-gray-500 text-xs; }

  /* ------ Footer (Admin) ------ */
  .ts-footer-admin        { @apply bg-gray-800 text-gray-400 text-xs py-2 px-4 mt-auto sticky bottom-0 z-20; }
  .ts-footer-admin__inner { @apply flex flex-wrap items-center justify-center gap-x-1 gap-y-0.5; }
  .ts-footer-admin__sep   { @apply text-gray-600; }

  /* ------ Pagination (Kaminari) ------ */
  .ts-pagination {
    @apply flex justify-center my-8 py-2;
  }
  .ts-pagination * {
    @apply px-3 py-2 mx-1 text-ts-text-secondary no-underline rounded-md;
  }
  .ts-pagination a {
    @apply bg-ts-surface-active;
  }
  .ts-pagination a:hover {
    @apply text-ts-text-inverse bg-ts-text-secondary;
  }
  .ts-pagination .active a {
    @apply bg-ts-primary text-ts-text-inverse;
  }

  /* ------ Pagination (Pagy) ------ */
  .ts-pagy {
    @apply flex space-x-1 font-semibold text-sm text-ts-text-muted;
  }
  .ts-pagy a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-white;
  }
  .ts-pagy a:not(.gap):hover {
    @apply bg-ts-primary-light text-ts-primary;
  }
  .ts-pagy a:not(.gap):not([href]) {
    @apply text-ts-text-disabled bg-ts-surface-secondary cursor-default;
  }
  .ts-pagy a.current {
    @apply text-white bg-ts-primary;
  }
  .ts-pagy label {
    @apply inline-block whitespace-nowrap bg-ts-surface-active rounded-md px-3 py-0.5;
  }
  .ts-pagy label input {
    @apply bg-ts-surface-secondary border-none rounded-md;
  }
  .ts-pagy a:first-child,
  .ts-pagy a:last-child {
    @apply text-ts-primary;
  }

  /* ------ Flash ------ */
  .ts-flash {
    z-index: 99999;
    position: fixed;
    top: 10rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    width: max-content;
  }

  /* ------ Sidebar ------ */
  .ts-sidebar                                { @apply w-64; }
  .ts-sidebar--collapsed                     { @apply w-16; }
  .ts-sidebar--collapsed .ts-sidebar__text,
  .ts-sidebar--collapsed .ts-sidebar__brand-text { @apply hidden; }
  .ts-sidebar--collapsed .ts-sidebar__link   { @apply justify-center px-2; }
  .ts-sidebar--expanded                      { /* default width via .ts-sidebar */ }
  .ts-sidebar__link {
    @apply flex items-center gap-3 px-3 py-2 rounded-lg text-sm
           text-gray-300 hover:bg-gray-800 hover:text-white
           transition-colors duration-150 no-underline;
  }
  .ts-sidebar__link--active { @apply bg-gray-800 text-white; }
  .ts-sidebar__icon         { @apply size-5 flex-shrink-0; }
  .ts-sidebar__text         { @apply whitespace-nowrap overflow-hidden; }

  /* ------ Profile ------ */
  .ts-profile              { @apply -mt-20 relative z-10; }
  .ts-profile__grid        { @apply grid grid-cols-1 lg:grid-cols-3 gap-6; }
  .ts-profile__sidebar     { @apply lg:col-span-1; }
  .ts-profile__main        { @apply lg:col-span-2 space-y-6; }

  .ts-profile-card         { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm overflow-hidden sticky top-6; }
  .ts-profile-card__avatar { @apply relative bg-gradient-to-br from-ts-primary-light to-ts-surface p-6 text-center; }
  .ts-profile-card__avatar-img {
    @apply w-40 h-40 rounded-full border-4 border-ts-bg shadow-md object-cover mx-auto;
  }
  .ts-profile-card__avatar-placeholder {
    @apply w-40 h-40 rounded-full border-4 border-ts-bg shadow-md
           bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center mx-auto;
  }
  .ts-profile-card__avatar-placeholder span { @apply text-ts-text-inverse text-4xl font-bold; }
  .ts-profile-card__verified { @apply absolute bottom-2 right-1; }
  .ts-profile-card__body   { @apply p-6; }
  .ts-profile-card__name   { @apply text-xl font-bold text-ts-text text-center mb-2; }
  .ts-profile-card__location { @apply text-ts-text-muted text-sm text-center mb-3; }
  .ts-profile-card__headline { @apply text-ts-text-secondary text-center mb-2 font-medium; }
  .ts-profile-card__badges { @apply flex items-center justify-center gap-2 mb-4 flex-wrap; }
  .ts-profile-card__actions { @apply space-y-3; }

  .ts-profile-stats        { @apply grid grid-cols-2 gap-3 mb-6 pt-4 border-t border-ts-border-subtle; }
  .ts-profile-stats__item  { @apply text-center p-3 rounded-md; }
  .ts-profile-stats__item--blue   { @apply bg-gradient-to-br from-ts-primary-light to-ts-surface; }
  .ts-profile-stats__item--green  { @apply bg-gradient-to-br from-green-50 to-emerald-50; }
  .ts-profile-stats__item--purple { @apply bg-gradient-to-br from-purple-50 to-pink-50; }
  .ts-profile-stats__item--orange { @apply bg-gradient-to-br from-yellow-50 to-orange-50; }
  .ts-profile-stats__value { @apply text-2xl font-bold; }
  .ts-profile-stats__label { @apply text-xs text-ts-text-secondary mt-1; }

  .ts-profile-section      { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm overflow-hidden p-6; }
  .ts-profile-section__title { @apply text-lg font-semibold text-ts-text mb-4 flex items-center; }
  .ts-profile-section__title--lg { @apply mb-6; }

  .ts-profile-cta          {
    @apply bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200
           rounded-lg p-6 flex items-center justify-between;
  }
  .ts-profile-cta__content { @apply flex items-center; }
  .ts-profile-cta__title   { @apply text-lg font-bold text-green-900; }
  .ts-profile-cta__text    { @apply text-green-700; }

  .ts-profile-info-list    { @apply space-y-3; }
  .ts-profile-info-list li { @apply flex items-start text-ts-text-secondary; }
  .ts-profile-info-list__icon { @apply text-ts-primary mr-3 text-xl; }

  .ts-profile-gallery      { @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4; }
  .ts-profile-gallery__item {
    @apply relative bg-ts-surface
           rounded-md overflow-hidden border border-ts-border
           hover:border-ts-accent hover:shadow-md transition-all duration-200 cursor-pointer;
  }
  .ts-profile-gallery__item--green { @apply hover:border-green-400; }
  .ts-profile-gallery__overlay {
    @apply absolute inset-0 bg-black bg-opacity-0
           transition duration-200 flex justify-center items-center
           opacity-0;
  }
  .group:hover .ts-profile-gallery__overlay { @apply bg-opacity-50 opacity-100; }
  .ts-profile-gallery__btn {
    @apply px-4 py-2 bg-ts-bg text-ts-text font-semibold rounded-md hover:bg-ts-surface transition;
  }

  .ts-profile-people       { @apply flex flex-wrap gap-4; }
  .ts-profile-people__item { @apply flex flex-col items-center; }
  .ts-profile-people__avatar {
    @apply w-16 h-16 rounded-full border-2 border-ts-border transition object-cover;
  }
  .ts-profile-people__placeholder {
    @apply w-16 h-16 rounded-full border-2 border-ts-border transition
           flex items-center justify-center;
  }
  .ts-profile-people__placeholder--blue   { @apply bg-gradient-to-br from-ts-accent to-ts-primary; }
  .ts-profile-people__placeholder--green  { @apply bg-gradient-to-br from-green-400 to-emerald-500; }
  .ts-profile-people__placeholder--purple { @apply bg-gradient-to-br from-purple-400 to-pink-500; }
  .ts-profile-people__placeholder span { @apply text-ts-text-inverse text-xl font-bold; }
  .ts-profile-people__name { @apply mt-2 text-sm text-ts-text-secondary text-center transition; }

  /* group-hover interactions for people items */
  .group:hover .ts-profile-people__avatar--blue   { @apply border-ts-accent; }
  .group:hover .ts-profile-people__avatar--green  { @apply border-green-400; }
  .group:hover .ts-profile-people__avatar--purple { @apply border-purple-400; }
  .group:hover .ts-profile-people__placeholder--blue   { @apply border-ts-accent; }
  .group:hover .ts-profile-people__placeholder--green  { @apply border-green-400; }
  .group:hover .ts-profile-people__placeholder--purple { @apply border-purple-400; }
  .group:hover .ts-profile-people__name--blue   { @apply text-ts-primary; }
  .group:hover .ts-profile-people__name--green  { @apply text-green-600; }
  .group:hover .ts-profile-people__name--purple { @apply text-purple-600; }

  .ts-profile-event-link {
    @apply block p-4 rounded-md border border-ts-border
           hover:border-ts-accent hover:bg-ts-primary-light transition no-underline;
  }
  .ts-profile-event-link__title  { @apply font-semibold text-ts-text; }
  .ts-profile-event-link__time   { @apply text-sm text-ts-text-muted mt-1; }
  .ts-profile-event-link__venue  { @apply text-xs text-ts-text-muted mt-1; }
  .group:hover .ts-profile-event-link__title { @apply text-ts-primary; }

  /* ------ Landing / Homepage ------ */
  .ts-hero                { @apply relative overflow-hidden min-h-[480px] sm:min-h-[560px] flex items-center; }
  .ts-hero--fullscreen    { @apply min-h-screen; }
  .ts-hero__bg            { @apply absolute inset-0 z-0; }
  .ts-hero__bg-img        { @apply w-full h-full object-cover scale-105; }
  .ts-hero__overlay       { @apply absolute inset-0 bg-gradient-to-b from-black/60 via-black/45 to-black/70; }
  .ts-hero__content       { @apply relative z-10 w-full py-12 sm:py-20; }
  .ts-hero__content-inner { @apply mx-auto max-w-3xl text-center px-4; }
  .ts-hero__location-badge { @apply inline-flex items-center gap-1.5 mt-6 rounded-full bg-white/15 backdrop-blur-sm px-4 py-1.5 text-sm font-medium text-white/90 ring-1 ring-white/25; }
  .ts-hero__location-link  { @apply text-white underline underline-offset-2 hover:text-white/80 transition-colors; }
  .ts-hero__title         { @apply text-3xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl; }
  .ts-hero__text          { @apply mt-4 text-base sm:text-lg leading-relaxed text-gray-200 max-w-2xl mx-auto; }

  .ts-hero__search        { @apply mt-8 max-w-xl mx-auto; }
  .ts-hero__search-form   { @apply flex items-center gap-2 rounded-2xl bg-white p-2.5 shadow-2xl ring-1 ring-white/20; }
  .ts-hero__search-icon   { @apply size-5 ml-2 text-ts-text-muted shrink-0; }
  .ts-hero__search-input  { @apply flex-1 border-0 bg-transparent text-base text-ts-text placeholder:text-ts-text-muted focus:ring-0 focus:outline-none; }

  .ts-hero__pills         { @apply mt-6 flex flex-wrap justify-center gap-2; }
  .ts-hero__pill-item     { @apply rounded-full px-4 py-2 text-sm font-medium text-white bg-white/15 ring-1 ring-white/30 hover:bg-white/25 hover:ring-white/50 backdrop-blur-sm transition-all duration-200 no-underline; }

  .ts-stats-bar           { @apply mt-8 flex justify-center gap-8 sm:gap-14 border-t border-white/20 pt-6; }
  .ts-stats-bar__item     { @apply flex flex-col items-center; }
  .ts-stats-bar__number   { @apply text-2xl sm:text-3xl font-bold text-white; }
  .ts-stats-bar__label    { @apply text-xs sm:text-sm text-gray-300 mt-0.5; }

  .ts-testimonial          { @apply bg-ts-bg rounded-lg p-6 shadow-sm ring-1 ring-ts-border-subtle flex flex-col; }
  .ts-testimonial__stars   { @apply flex gap-0.5 mb-3; }
  .ts-testimonial__body    { @apply text-ts-text-secondary leading-relaxed flex-1; }
  .ts-testimonial__footer  { @apply flex items-center gap-3 mt-4 pt-4 border-t border-ts-border-subtle; }
  .ts-testimonial__avatar  { @apply w-10 h-10 rounded-full object-cover; }
  .ts-testimonial__author  { @apply text-sm font-semibold text-ts-text; }
  .ts-testimonial__location { @apply text-xs text-ts-text-muted; }

  .ts-landing-section     { @apply py-12 sm:py-16; }
  .ts-landing-section--alt { @apply bg-ts-surface; }
  .ts-landing-section__heading { @apply text-2xl md:text-3xl font-bold text-ts-text mb-8 sm:mb-12; }
  .ts-landing-section__heading-icon { @apply inline-block size-10 sm:size-12; }
  .ts-landing-section__grid { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8; }
  .ts-landing-section__grid--4 { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6; }

  .ts-landing-steps        { @apply grid grid-cols-1 md:grid-cols-3 gap-8; }
  .ts-landing-steps__item  { @apply relative text-center; }
  .ts-landing-steps__number { @apply inline-flex items-center justify-center w-12 h-12 rounded-full bg-ts-primary text-white text-xl font-bold mb-4; }
  .ts-landing-steps__title { @apply text-lg font-semibold text-ts-text mb-2; }
  .ts-landing-steps__text  { @apply text-ts-text-secondary leading-relaxed; }

  .ts-landing-faq          { @apply max-w-3xl mx-auto divide-y divide-ts-border; }
  .ts-landing-faq__item    { @apply py-5; }
  .ts-landing-faq__question { @apply flex items-center justify-between w-full text-left text-lg font-medium text-ts-text cursor-pointer hover:text-ts-primary transition-colors; }
  .ts-landing-faq__chevron { @apply size-5 text-ts-text-muted transition-transform duration-200; }
  .ts-landing-faq__answer  { @apply mt-3 text-ts-text-secondary leading-relaxed; }

  .ts-pricing-grid          { @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6; }
  .ts-pricing-card          { @apply relative flex flex-col rounded-lg border border-ts-border bg-ts-bg p-6 shadow-sm transition-shadow hover:shadow-md; }
  .ts-pricing-card--featured { @apply border-ts-primary ring-2 ring-ts-primary; }
  .ts-pricing-card__badge   { @apply absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-ts-primary px-3 py-0.5 text-xs font-semibold text-ts-text-inverse; }
  .ts-pricing-card__title   { @apply text-xl font-bold text-ts-text; }
  .ts-pricing-card__price   { @apply mt-4 flex items-baseline gap-1; }
  .ts-pricing-card__amount  { @apply text-4xl font-bold tracking-tight text-ts-text; }
  .ts-pricing-card__interval { @apply text-sm text-ts-text-muted; }
  .ts-pricing-card__desc    { @apply mt-3 text-sm text-ts-text-secondary leading-relaxed; }
  .ts-pricing-card__features { @apply mt-6 space-y-3 flex-1; }
  .ts-pricing-card__feature { @apply flex items-start gap-2 text-sm text-ts-text-secondary; }
  .ts-pricing-card__check   { @apply size-4 text-ts-primary shrink-0 mt-0.5; }
  .ts-pricing-card__x       { @apply size-4 text-ts-text-disabled shrink-0 mt-0.5; }
  .ts-pricing-card__cta     { @apply mt-8; }

  .ts-index-tabs__list     { @apply flex flex-wrap gap-2 mb-10; }
  .ts-index-tabs__tab      { @apply px-5 py-2.5 rounded-full text-sm font-medium text-ts-text-secondary bg-ts-surface-secondary border border-ts-border transition-colors duration-200 hover:bg-ts-surface-active cursor-pointer; }
  .ts-index-tabs__tab--active { @apply bg-ts-primary text-white border-ts-primary hover:bg-ts-primary-dark; }

  .ts-cta                 { @apply py-16 sm:py-24; }
  .ts-cta--centered       { @apply mx-auto max-w-3xl text-center; }
  .ts-cta--split          { @apply lg:flex lg:items-center lg:justify-between; }
  .ts-cta__eyebrow        { @apply text-base font-semibold leading-7 text-ts-primary; }
  .ts-cta__title          { @apply text-2xl font-bold tracking-tight text-ts-text sm:text-3xl lg:text-4xl; }
  .ts-cta__title--xl      { @apply mt-2 text-3xl font-bold tracking-tight text-ts-text sm:text-5xl lg:text-6xl; }
  .ts-cta__text           { @apply mx-auto mt-4 max-w-xl text-base sm:text-lg leading-relaxed text-ts-text-secondary; }
  .ts-cta__actions        { @apply mt-8 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-x-6; }
  .ts-cta__actions--left  { @apply mt-8 flex flex-col sm:flex-row items-center gap-4 sm:gap-x-6 lg:mt-0 lg:flex-shrink-0; }

  /* ------ Listing Page ------ */
  .ts-listing             { @apply flex flex-col lg:flex-row gap-6 mt-4; }
  .ts-listing__sidebar    { @apply w-full lg:w-64 shrink-0; }
  .ts-listing__sidebar-inner { @apply lg:sticky lg:top-20 space-y-2 border border-ts-border p-4 rounded-lg; }

  /* Filter drawer (mobile collapsible) */
  .ts-filter-toggle {
    @apply flex items-center justify-between w-full px-4 py-3
           bg-ts-bg border border-ts-border rounded-md text-sm font-medium text-ts-text-secondary
           lg:hidden;
  }
  .ts-filter-toggle__icon { @apply size-5 text-ts-text-muted transition-transform duration-200; }
  .ts-filter-drawer {
    @apply overflow-hidden lg:!max-h-none lg:!opacity-100;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  }
  .ts-filter-drawer--open {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.35s ease-in, opacity 0.2s ease-in;
  }
  @media (min-width: 1024px) {
    .ts-filter-drawer {
      max-height: none !important;
      opacity: 1 !important;
    }
  }
  .ts-listing__main       { @apply flex-1 min-w-0; }
  .ts-listing__search     { @apply flex space-x-2 mb-4; }
  .ts-listing__search-input {
    @apply flex-1 px-3 py-2 border border-ts-border-strong rounded-md
           focus:outline-none focus:ring focus:ring-ts-primary/30 focus:border-ts-primary text-sm transition-colors;
  }
  .ts-listing__meta       { @apply text-sm text-ts-text-muted mb-3; }
  .ts-listing__grid       { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6; }

  /* ------ Detail Page ------ */
  .ts-detail              { @apply grid grid-cols-1 lg:grid-cols-3 gap-8; }
  .ts-detail__main        { @apply lg:col-span-2 space-y-6; }
  .ts-detail__sidebar     { @apply space-y-6; }
  .ts-detail-section      { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm overflow-hidden p-6; }
  .ts-detail-section__title { @apply text-lg font-semibold text-ts-text mb-3; }
  .ts-detail-label        { @apply text-ts-text-muted text-xs uppercase tracking-wide mb-1; }
  .ts-detail-inline       { @apply flex items-center gap-4; }
  .ts-detail-inline__img  { @apply w-16 h-16 rounded-md object-cover; }
  .ts-detail-inline__avatar {
    @apply w-14 h-14 rounded-full object-cover ring-2 ring-ts-border transition;
  }
  .group:hover .ts-detail-inline__avatar { @apply ring-ts-accent; }
  .ts-detail-inline__name { @apply font-semibold text-ts-text transition; }
  .group:hover .ts-detail-inline__name   { @apply text-ts-primary; }

  /* ------ Booking ------ */
  .ts-booking              { @apply bg-ts-bg shadow-sm border border-ts-border rounded-lg overflow-hidden; }
  .ts-booking__banner      { @apply text-ts-text-inverse px-6 py-4; }
  .ts-booking__banner-inner { @apply flex items-center justify-between; }
  .ts-booking__banner-title { @apply text-xl font-bold text-ts-text-inverse; }
  .ts-booking__banner-ref  { @apply text-sm opacity-80; }
  .ts-booking__body        { @apply p-6 space-y-6; }

  .ts-booking__person      { @apply flex items-center gap-4; }
  .ts-booking__person--sm  { @apply gap-3; }
  .ts-booking__avatar      { @apply w-14 h-14 rounded-full object-cover; }
  .ts-booking__avatar--sm  { @apply w-10 h-10; }
  .ts-booking__avatar-placeholder {
    @apply w-14 h-14 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center;
  }
  .ts-booking__avatar-placeholder span { @apply text-ts-text-inverse text-lg font-bold; }
  .ts-booking__person-name { @apply font-semibold text-base; }
  .ts-booking__person-role { @apply text-ts-text-muted text-sm; }

  .ts-booking__grid        { @apply grid grid-cols-2 gap-4; }
  .ts-booking__detail      { @apply bg-ts-surface rounded-md p-4; }
  .ts-booking__detail-label { @apply text-sm text-ts-text-muted; }
  .ts-booking__detail-value { @apply font-semibold; }
  .ts-booking__detail-value--lg { @apply font-semibold text-lg; }

  .ts-booking__section     { @apply border-t border-ts-border pt-4; }
  .ts-booking__section-title { @apply font-semibold text-ts-text mb-2; }

  .ts-booking__cancel-box  { @apply bg-red-50 border border-red-200 rounded-md p-4; }
  .ts-booking__cancel-label { @apply text-sm text-ts-danger font-medium; }
  .ts-booking__cancel-text { @apply text-red-800; }

  .ts-booking__actions     { @apply border-t border-ts-border pt-4 flex flex-wrap gap-3; }

  /* ------ Admin Panel ------ */
  /* ------ Bulk Actions Bar ------ */
  .ts-bulk-bar {
    @apply inline-flex items-center gap-3 bg-ts-bg shadow-sm rounded-md px-4 py-2 mb-4 border border-ts-border;
  }

  .ts-admin-panel          { @apply bg-ts-bg shadow-sm border border-ts-border rounded-lg p-6; }
  .ts-admin-panel__title   { @apply text-lg font-semibold text-ts-text mb-4; }
  .ts-admin-panel__icon    { @apply size-5 text-ts-primary mr-2; }

  /* ------ Admin Detail Row (key-value pair) ------ */
  .ts-detail-row           { @apply flex justify-between border-b border-ts-border pb-2; }
  .ts-detail-row:last-child { @apply border-b-0; }
  .ts-detail-row__label    { @apply text-ts-text-secondary font-medium; }
  .ts-detail-row__value    { @apply text-ts-text; }

  /* ------ Admin Info Row (icon + label/value) ------ */
  .ts-info-row             { @apply flex items-start; }
  .ts-info-row__icon       { @apply size-5 text-ts-text-muted mr-2 mt-0.5; }
  .ts-info-row__label      { @apply text-ts-text-secondary font-medium; }
  .ts-info-row__value      { @apply text-ts-text; }

  /* ------ Admin Activity Item ------ */
  .ts-activity             { @apply flex items-start p-3 bg-ts-surface rounded-md hover:shadow-sm transition; }
  .ts-activity__icon       { @apply flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center mr-3; }
  .ts-activity__title      { @apply font-medium text-ts-text; }
  .ts-activity__time       { @apply text-xs text-ts-text-muted mt-1; }

  /* ------ Admin Social Row ------ */
  .ts-social-row           { @apply flex items-center p-2 bg-ts-surface rounded-md; }
  .ts-social-row__avatar   { @apply w-8 h-8 rounded-full object-cover mr-2; }
  .ts-social-row__placeholder {
    @apply w-8 h-8 rounded-full flex items-center justify-center mr-2;
  }
  .ts-social-row__placeholder span { @apply text-ts-text-inverse font-semibold text-xs; }
  .ts-social-row__name     { @apply text-sm font-medium text-ts-text; }

  /* ------ User Selector ------ */
  .ts-user-selector          { @apply relative; }
  .ts-user-selector__dropdown {
    @apply absolute z-20 mt-1 w-full bg-ts-bg rounded-lg shadow-lg border border-ts-border
           max-h-64 overflow-y-auto;
  }
  .ts-user-selector__result {
    @apply flex items-center gap-3 w-full px-4 py-2.5 text-left
           hover:bg-ts-surface transition cursor-pointer;
  }
  .ts-user-selector__chosen {
    @apply flex items-center gap-3 p-3 bg-ts-surface rounded-md border border-ts-border;
  }

  /* ------ Form: checkbox card modifier ------ */
  .ts-form-check--card {
    @apply p-2 rounded-md border border-ts-border hover:border-ts-accent transition cursor-pointer;
  }

  /* ------ Form: file input ------ */
  .ts-form-file {
    @apply block w-full text-sm text-ts-text-muted
           file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0
           file:bg-ts-primary-light file:text-ts-primary-dark hover:file:bg-ts-primary/10;
  }

  /* ------ Gallery Thumb ------ */
  .ts-gallery-thumb        { @apply relative; }
  .ts-gallery-thumb__img   { @apply h-20 w-full object-cover rounded; }
  .ts-gallery-thumb__delete {
    @apply absolute top-1 right-1 bg-red-600 text-white text-xs px-1 rounded
           opacity-0 transition;
  }
  .group:hover .ts-gallery-thumb__delete { @apply opacity-100; }

  /* ------ Inline Gallery (horizontal scroll + fullscreen) ------ */
  .ts-inline-gallery {
    @apply relative my-6;
  }
  .ts-inline-gallery__track {
    @apply flex gap-3 overflow-x-auto scroll-smooth pb-2;
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.300') transparent;
  }
  .ts-inline-gallery__track::-webkit-scrollbar { height: 6px; }
  .ts-inline-gallery__track::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  .ts-inline-gallery__slide {
    @apply flex-shrink-0;
  }
  .ts-inline-gallery__img {
    @apply h-48 w-auto rounded-lg object-cover cursor-pointer
           transition hover:opacity-90 hover:shadow-lg;
  }
  .ts-inline-gallery__arrow {
    @apply absolute top-1/2 -translate-y-1/2 z-10
           bg-white/80 backdrop-blur-sm rounded-full p-1.5 shadow
           text-gray-700 hover:bg-white hover:text-gray-900 transition;
  }
  .ts-inline-gallery__arrow--left  { @apply left-2;  }
  .ts-inline-gallery__arrow--right { @apply right-2; }

  /* Fullscreen overlay */
  .ts-inline-gallery__fullscreen {
    @apply fixed inset-0 z-50 flex items-center justify-center
           bg-black/80 backdrop-blur-sm;
  }
  .ts-inline-gallery__fullscreen-close {
    @apply absolute top-4 right-4 text-white hover:text-gray-300 transition z-10;
  }
  .ts-inline-gallery__fullscreen-img {
    @apply max-h-[90vh] max-w-[90vw] object-contain rounded-lg shadow-2xl;
  }
  .ts-inline-gallery__fullscreen-arrow {
    @apply absolute top-1/2 -translate-y-1/2 text-white/70 hover:text-white
           transition p-2;
  }
  .ts-inline-gallery__fullscreen-arrow--left  { @apply left-4;  }
  .ts-inline-gallery__fullscreen-arrow--right { @apply right-4; }
  .ts-inline-gallery__fullscreen-counter {
    @apply absolute bottom-6 left-1/2 -translate-x-1/2
           text-white/80 text-sm font-medium;
  }

  /* ------ User Cell (table avatar + name row) ------ */
  .ts-user-cell              { @apply flex items-center gap-3; }
  .ts-user-cell__avatar      { @apply w-10 h-10 rounded-full object-cover flex-shrink-0; }
  .ts-user-cell__placeholder {
    @apply w-10 h-10 rounded-full bg-ts-surface-active flex items-center justify-center flex-shrink-0;
  }
  .ts-user-cell__placeholder span { @apply text-ts-text-muted text-sm font-medium; }
  .ts-user-cell__name        { @apply font-medium text-ts-text; }
  .ts-user-cell__email       { @apply text-xs text-ts-text-muted; }

  /* ------ Cookie Consent Banner ------ */
  .ts-cookie-banner {
    @apply fixed bottom-0 left-0 right-0 z-50 bg-ts-bg border-t border-ts-border shadow-lg p-4;
  }
  .ts-cookie-banner__inner {
    @apply max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4;
  }
  .ts-cookie-banner__text {
    @apply flex-1;
  }
  .ts-cookie-banner__title {
    @apply font-semibold text-ts-text text-sm mb-1;
  }
  .ts-cookie-banner__description {
    @apply text-sm text-ts-text-secondary;
  }
  .ts-cookie-banner__actions {
    @apply flex flex-wrap gap-2 shrink-0;
  }

  /* ------ Cookie Consent Modal ------ */
  .ts-cookie-modal {
    @apply fixed inset-0 z-50 items-center justify-center;
  }
  .ts-cookie-modal__overlay {
    @apply fixed inset-0 bg-black bg-opacity-50;
  }
  .ts-cookie-modal__dialog {
    @apply relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4 z-10;
  }
  .ts-cookie-modal__header {
    @apply flex items-center justify-between px-6 py-4 border-b border-ts-border;
  }
  .ts-cookie-modal__title {
    @apply text-lg font-semibold text-ts-text;
  }
  .ts-cookie-modal__body {
    @apply px-6 py-4 space-y-4 max-h-80 overflow-y-auto;
  }
  .ts-cookie-modal__footer {
    @apply flex justify-end px-6 py-4 border-t border-ts-border;
  }
  .ts-cookie-modal__category {
    @apply border border-ts-border rounded-md p-3;
  }
  .ts-cookie-modal__category-header {
    @apply flex items-start justify-between gap-4;
  }
  .ts-cookie-modal__category-name {
    @apply font-medium text-sm text-ts-text;
  }
  .ts-cookie-modal__category-desc {
    @apply text-xs text-ts-text-muted mt-1;
  }
  .ts-cookie-modal__toggle {
    @apply shrink-0 pt-0.5;
  }
  .ts-cookie-modal__toggle--locked {
    @apply opacity-60;
  }
  .ts-cookie-modal__checkbox {
    @apply h-5 w-5 rounded border-ts-border-strong text-ts-primary focus:ring-ts-primary;
  }

  /* ------ Dashboard ------ */
  .ts-dashboard                    { @apply space-y-6; }
  .ts-dashboard__top               { @apply grid grid-cols-1 md:grid-cols-2 gap-6; }
  .ts-dashboard__section           { @apply bg-ts-bg rounded-lg border border-ts-border shadow-sm p-6; }
  .ts-dashboard__section-title     { @apply text-base font-semibold text-ts-text mb-4 flex items-center gap-2; }
  .ts-dashboard__section-subtitle  { @apply text-sm text-ts-text-muted mb-4; }
  .ts-dashboard__quick-links       { @apply flex flex-wrap gap-2 mt-4; }
  .ts-dashboard__stat-grid         { @apply grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4; }
  .ts-dashboard__location-group    { @apply mb-4; }
  .ts-dashboard__location-group-title { @apply text-sm font-medium text-ts-text-secondary mb-2; }
  .ts-dashboard__location-row      { @apply flex items-center justify-between py-2 border-b border-ts-border-subtle last:border-0; }
  .ts-dashboard__location-name     { @apply font-medium text-ts-text; }
  .ts-dashboard__location-meta     { @apply flex items-center gap-2; }
  .ts-dashboard__empty             { @apply bg-ts-surface border border-ts-border rounded-md p-6 text-center text-ts-text-muted; }
  .ts-dashboard__account-header    { @apply flex items-center gap-4 mb-4; }
  .ts-dashboard__account-avatar    { @apply w-16 h-16 rounded-full object-cover border-2 border-ts-border; }
  .ts-dashboard__account-avatar-placeholder {
    @apply w-16 h-16 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center border-2 border-ts-bg shadow;
  }
  .ts-dashboard__account-avatar-placeholder span { @apply text-ts-text-inverse text-xl font-bold; }
  .ts-dashboard__account-info      { @apply flex-1; }
  .ts-dashboard__account-name      { @apply text-lg font-bold text-ts-text; }
  .ts-dashboard__account-email     { @apply text-sm text-ts-text-muted; }
  .ts-dashboard__account-badges    { @apply flex flex-wrap gap-1.5 mt-2; }
  .ts-dashboard__meta-grid         { @apply grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4 text-sm; }
  .ts-dashboard__meta-item         { @apply flex items-center gap-2 text-ts-text-secondary; }
  .ts-dashboard__meta-label        { @apply text-ts-text-muted; }
  .ts-dashboard__pro-stats         { @apply grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4; }
  .ts-dashboard__pro-stat          { @apply text-center p-3 bg-ts-surface rounded-md; }
  .ts-dashboard__pro-stat-value    { @apply text-xl font-bold text-ts-text; }
  .ts-dashboard__pro-stat-label    { @apply text-xs text-ts-text-muted mt-1; }

  /* ------ Pipeline / CRM ------ */
  .ts-pipeline                        { @apply overflow-x-auto pb-4; }
  .ts-pipeline__columns               { @apply flex gap-4 min-w-max; }
  .ts-pipeline__column                { @apply w-64 flex-shrink-0 bg-ts-surface rounded-lg border border-ts-border; }
  .ts-pipeline__column-header         { @apply px-3 py-2.5 border-b border-ts-border bg-ts-bg rounded-t-lg; }
  .ts-pipeline__column-title          { @apply text-sm font-semibold text-ts-text-secondary flex items-center; }
  .ts-pipeline__column-body           { @apply p-2 space-y-2 min-h-[120px] transition-colors duration-150; }
  .ts-pipeline__column-body--dragover { @apply bg-ts-primary-light border-2 border-dashed border-ts-accent rounded-b-lg; }
  .ts-pipeline__card {
    @apply bg-ts-bg rounded-md border border-ts-border p-3 shadow-sm
           cursor-grab hover:shadow-md transition;
  }
  .ts-pipeline__card--dragging        { @apply opacity-50 rotate-2 shadow-lg; }
  .ts-pipeline__card--lost            { @apply opacity-70 cursor-default; }
  .ts-pipeline__card-header           { @apply flex items-center justify-between mb-1; }
  .ts-pipeline__card-name             { @apply text-sm font-medium text-ts-text; }
  .ts-pipeline__card-source           { @apply text-[11px] text-ts-text-muted; }
  .ts-pipeline__card-date             { @apply text-[11px] text-ts-text-muted mt-1; }
  .ts-pipeline__card-link             { @apply text-[11px] text-ts-primary hover:text-ts-primary-dark mt-1 inline-block; }
  .ts-pipeline__lost                  { @apply border border-ts-border rounded-md p-4 bg-ts-surface; }
  .ts-pipeline__lost-title            { @apply text-sm font-medium text-ts-text-secondary cursor-pointer; }
  .ts-pipeline__lost-grid             { @apply grid grid-cols-2 md:grid-cols-4 gap-2; }

  /* ------ Featured / Sponsored ------ */
  .ts-featured-section__title {
    @apply text-sm font-semibold uppercase tracking-wide text-amber-600 mb-3 flex items-center gap-1.5;
  }
  .ts-featured-badge {
    @apply absolute top-3 left-3 z-10 inline-flex items-center gap-1
           bg-amber-500 text-white text-xs font-bold uppercase tracking-wide
           px-2 py-0.5 rounded-full shadow-sm;
  }

  /* ------ Email Protect ------ */
  .ts-email-reveal {
    @apply inline-flex items-center gap-1 text-sm text-ts-primary
           border border-ts-primary/30 rounded px-2 py-0.5
           hover:bg-ts-primary-light cursor-pointer transition;
  }

  /* ------ Chat ------ */
  .ts-chat-layout            { @apply flex; height: calc(100vh - 75px); }
  .ts-chat-sidebar           { @apply w-full lg:w-80 border-r border-ts-border flex flex-col bg-ts-bg overflow-y-auto flex-shrink-0; }
  .ts-chat-main              { @apply flex-1 flex flex-col bg-ts-surface min-w-0; }
  .ts-chat-header            { @apply flex items-center gap-3 px-4 py-3 bg-ts-bg border-b border-ts-border flex-shrink-0; }
  .ts-chat-messages          { @apply flex-1 overflow-y-auto px-4 py-4 space-y-1; }
  .ts-chat-input             { @apply flex items-center gap-2 px-4 py-3 bg-ts-bg border-t border-ts-border flex-shrink-0; }
  .ts-chat-input__field      { @apply flex-1 border-ts-border-strong rounded-full px-4 py-2 text-sm focus:ring-ts-primary focus:border-ts-primary; }
  .ts-chat-input__send       { @apply bg-ts-primary text-white rounded-full p-2 hover:bg-ts-primary-dark transition cursor-pointer; }

  /* Contact list items */
  .ts-chat-contact           { @apply flex items-center gap-3 px-4 py-3 hover:bg-ts-surface border-b border-ts-border-subtle no-underline transition; }
  .ts-chat-contact--active   { @apply bg-ts-primary-light hover:bg-ts-primary-light; }
  .ts-chat-contact__avatar   { @apply w-12 h-12 rounded-full object-cover flex-shrink-0; }
  .ts-chat-contact__avatar-placeholder {
    @apply w-12 h-12 rounded-full bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center flex-shrink-0;
  }
  .ts-chat-contact__avatar-placeholder span { @apply text-white text-sm font-bold; }
  .ts-chat-contact__info     { @apply flex-1 min-w-0; }
  .ts-chat-contact__header   { @apply flex items-center justify-between; }
  .ts-chat-contact__name     { @apply text-sm font-semibold text-ts-text; }
  .ts-chat-contact__time     { @apply text-xs text-ts-text-muted flex-shrink-0 ml-2; }
  .ts-chat-contact__preview  { @apply flex items-center justify-between mt-0.5; }
  .ts-chat-contact__text     { @apply text-sm text-ts-text-muted truncate; }
  .ts-chat-contact__badge    {
    @apply ml-2 px-1.5 py-0.5 rounded-full text-xs font-bold leading-none
           bg-ts-primary text-white flex-shrink-0;
  }

  /* Message bubbles */
  .ts-chat-bubble            { @apply max-w-[75%] w-fit rounded-2xl px-4 py-2; }
  .ts-chat-bubble--mine      { @apply ml-auto bg-ts-primary text-white rounded-br-sm; }
  .ts-chat-bubble--theirs    { @apply mr-auto bg-ts-bg text-ts-text rounded-bl-sm shadow-sm; }
  .ts-chat-bubble--system    { @apply mx-auto bg-transparent text-ts-text-muted text-center text-xs rounded-lg max-w-[90%] shadow-none; }
  .ts-chat-bubble__body      { @apply text-sm leading-relaxed break-words; }
  .ts-chat-bubble__meta      { @apply flex items-center justify-end gap-1 mt-0.5; }
  .ts-chat-bubble__time      { @apply text-[10px] opacity-70; }
  .ts-chat-bubble__status    { @apply inline-flex; }

  /* ------ Skeleton Loading ------ */
  .ts-skeleton {
    @apply rounded-md bg-ts-surface-active animate-shimmer;
    background-image: linear-gradient(90deg, rgb(var(--ts-surface-active)) 0%, rgb(var(--ts-surface-secondary)) 40%, rgb(var(--ts-surface-active)) 80%);
    background-size: 800px 100%;
  }
  .ts-skeleton--text   { @apply h-4 w-3/4; }
  .ts-skeleton--title  { @apply h-6 w-1/2; }
  .ts-skeleton--avatar { @apply h-12 w-12 rounded-full; }
  .ts-skeleton--card   { @apply h-64 w-full; }
  .ts-skeleton--img    { @apply h-48 w-full; }

  /* ------ Fade In (for lazy-loaded sections) ------ */
  .ts-fade-in { @apply animate-fade-in-up; }

  /* ------ Empty State ------ */
  .ts-empty-state {
    @apply text-center py-12 px-6;
  }
  .ts-empty-state__icon {
    @apply mx-auto w-16 h-16 text-ts-text-disabled mb-4;
  }
  .ts-empty-state__title {
    @apply text-lg font-semibold text-ts-text mb-2;
  }
  .ts-empty-state__text {
    @apply text-sm text-ts-text-muted max-w-sm mx-auto mb-6;
  }
  .ts-empty-state__action {
    @apply inline-flex;
  }

  /* ------ Location Card (BEM) ------ */
  .ts-location-card {
    @apply w-full bg-white shadow-sm rounded-xl overflow-hidden cursor-pointer
           flex flex-col border border-gray-100
           transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
  }
  .ts-location-card--featured { @apply ring-2 ring-amber-300; }
  .ts-location-card__image    { @apply relative h-48 bg-ts-surface-secondary; }
  .ts-location-card__image img { @apply w-full h-full object-cover; }
  .ts-location-card__body     { @apply px-5 py-4 flex flex-col flex-1; }
  .ts-location-card__title    { @apply text-lg font-bold text-ts-text; }
  .ts-location-card__meta     { @apply text-ts-text-muted text-sm mt-1; }
  .ts-location-card__rating   { @apply flex items-center mt-auto pt-4; }

  /* ------ Professional Card (BEM) ------ */
  .ts-pro-card {
    @apply w-full bg-white shadow-sm rounded-xl overflow-hidden
           flex flex-col border border-gray-100
           transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
  }
  .ts-pro-card__cover         { @apply h-24 bg-gradient-to-r from-ts-primary-light to-ts-surface-secondary; }
  .ts-pro-card__avatar-wrap   { @apply flex justify-center -mt-[70px] relative; }
  .ts-pro-card__avatar        { @apply w-[130px] h-[130px] object-cover rounded-full border-4 border-white shadow-md; }
  .ts-pro-card__avatar-placeholder {
    @apply w-[130px] h-[130px] rounded-full border-4 border-white shadow-md
           bg-gradient-to-br from-ts-accent to-ts-primary
           flex items-center justify-center;
  }
  .ts-pro-card__body          { @apply text-center px-5 py-4 flex-grow; }
  .ts-pro-card__name          { @apply text-lg font-bold text-ts-text; }
  .ts-pro-card__headline      { @apply text-ts-text-muted text-sm mt-1; }
  .ts-pro-card__stats         { @apply px-5 py-3 border-t border-ts-border-subtle flex gap-4 justify-center text-center; }
  .ts-pro-card__stat-value    { @apply text-ts-text font-bold text-lg; }
  .ts-pro-card__stat-label    { @apply text-ts-text-muted text-xs; }
  .ts-pro-card__action        { @apply px-5 py-4 mt-auto; }
  .ts-pro-card__btn {
    @apply block w-full text-center border border-ts-primary text-ts-primary
           px-4 py-2 rounded-lg font-semibold
           hover:bg-ts-primary hover:text-white transition-all duration-200;
  }

  /* ------ Event Card (BEM) ------ */
  .ts-event-card {
    @apply bg-ts-bg rounded-lg border border-ts-border-subtle shadow-sm
           flex flex-col overflow-hidden
           transition-all duration-300 hover:-translate-y-1 hover:shadow-lg no-underline text-inherit;
  }
  .ts-event-card__image       { @apply relative h-40 bg-gradient-to-br from-ts-surface to-ts-surface-secondary; }
  .ts-event-card__image img   { @apply absolute inset-0 w-full h-full object-cover; }
  .ts-event-card__body        { @apply p-5 flex flex-col flex-1; }
  .ts-event-card__title       { @apply text-lg font-semibold text-ts-text mb-2; }
  .ts-event-card__info        { @apply space-y-1.5 text-sm text-ts-text-muted; }
  .ts-event-card__link        { @apply mt-auto pt-4 text-sm font-medium text-ts-primary; }
}

/* ================================================================
   REDUCED MOTION — respect user preference
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ts-skeleton {
    animation: none !important;
    background-image: none !important;
  }
}

/* Admin rich-text editor height */
#admin-main trix-editor {
  min-height: 20em;
}

/* Trix editor heading buttons */
.trix-button--heading2,
.trix-button--heading3,
.trix-button--heading4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  width: 2.5em;
}

/* Trix editor heading styles */
trix-editor h1 { font-size: 1.75em; font-weight: 700; line-height: 1.3; margin: 0.5em 0; }
trix-editor h2 { font-size: 1.4em; font-weight: 700; line-height: 1.3; margin: 0.4em 0; }
trix-editor h3 { font-size: 1.15em; font-weight: 600; line-height: 1.3; margin: 0.3em 0; }
trix-editor h4 { font-size: 1em; font-weight: 600; line-height: 1.3; margin: 0.25em 0; }

/* Trix editor list bullets */
trix-editor ul {
  list-style: disc;
  padding-left: 1.5em;
}
trix-editor ol {
  list-style: decimal;
  padding-left: 1.5em;
}
trix-editor ul li,
trix-editor ol li {
  margin-left: 0;
}

/* Leaflet override */
.leaflet-attribution-flag {
  display: none;
}

/* Leaflet MarkerCluster — uses brand teal */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgb(var(--ts-primary) / 0.3);
  border-radius: 50%;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background-color: rgb(var(--ts-primary) / 0.8);
  line-height: 30px;
}

.marker-cluster-medium {
  background-color: rgb(var(--ts-primary) / 0.4);
}

.marker-cluster-medium div {
  width: 36px;
  height: 36px;
  margin-left: 2px;
  margin-top: 2px;
  line-height: 36px;
  font-size: 14px;
  background-color: rgb(var(--ts-primary-dark) / 0.85);
}

.marker-cluster-large {
  background-color: rgb(var(--ts-primary-dark) / 0.45);
}

.marker-cluster-large div {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  background-color: rgb(var(--ts-primary-dark) / 0.9);
}

.marker-cluster {
  background-clip: padding-box;
}

.custom-map-marker {
  background: none !important;
  border: none !important;
}