@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');

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

  label {
    @apply block text-sm font-medium text-gray-700 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-gray-300 bg-white px-3 py-2 text-sm
           text-gray-900 placeholder-gray-400 shadow-sm
           focus:border-blue-500 focus:ring-1 focus:ring-blue-500;
  }

  input[type="checkbox"] {
    @apply h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500;
  }

  input[type="radio"] {
    @apply h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500;
  }

  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-gray-400 mb-2; }

  .ts-link { @apply underline; }

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

  .ts-btn--primary    { @apply bg-blue-600   text-white hover:bg-blue-700   focus:ring-blue-500; }
  .ts-btn--success    { @apply bg-green-600  text-white hover:bg-green-700  focus:ring-green-500; }
  .ts-btn--danger     { @apply bg-red-600    text-white hover:bg-red-700    focus:ring-red-500; }
  .ts-btn--warning    { @apply bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400; }
  .ts-btn--info       { @apply bg-cyan-600   text-white hover:bg-cyan-700   focus:ring-cyan-500; }
  .ts-btn--secondary  { @apply bg-gray-200   text-gray-800 hover:bg-gray-300 focus:ring-gray-400; }
  .ts-btn--dark       { @apply bg-gray-900   text-white hover:bg-gray-800   focus:ring-gray-500; }
  .ts-btn--light      { @apply bg-white border-gray-300 text-gray-900 hover:bg-gray-50 focus:ring-gray-400; }
  .ts-btn--ghost      { @apply bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-400; }

  /* CTA (call-to-action) */
  .ts-btn--cta {
    @apply rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm
           hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2
           focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
  }

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

  /* Buttons: outline variants */
  .ts-btn--outline           { @apply bg-transparent border-gray-300 text-gray-900 hover:bg-gray-50 focus:ring-gray-400; }
  .ts-btn--outline-primary   { @apply bg-transparent border-blue-600  text-blue-600  hover:bg-blue-50  focus:ring-blue-500; }
  .ts-btn--outline-success   { @apply bg-transparent border-green-600 text-green-600 hover:bg-green-50 focus:ring-green-500; }
  .ts-btn--outline-danger    { @apply bg-transparent border-red-600   text-red-600   hover:bg-red-50   focus:ring-red-500; }
  .ts-btn--outline-secondary { @apply bg-transparent border-gray-500  text-gray-700  hover:bg-gray-50  focus:ring-gray-400; }
  .ts-btn--outline-dark      { @apply bg-transparent border-gray-900  text-gray-900  hover:bg-gray-100 focus:ring-gray-500; }
  .ts-btn--outline-light     { @apply bg-transparent border-gray-200  text-gray-700  hover:bg-gray-50  focus:ring-gray-300; }

  /* 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-xl; }
  .ts-btn--icon { @apply w-9 h-9 p-0 justify-center; }

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

  /* ------ Table ------ */
  .ts-table                                { @apply w-full border-collapse text-sm text-left text-gray-700; }
  .ts-table thead                          { @apply bg-gray-100 text-gray-900; }
  .ts-table th                             { @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider; }
  .ts-table thead th:last-child            { @apply text-right; }
  .ts-table tbody                          { @apply bg-white divide-y divide-gray-200; }
  .ts-table tbody td                       { @apply border-b border-gray-200 px-6 py-4 whitespace-nowrap; }
  .ts-table tbody tr:hover                 { @apply bg-gray-50; }
  .ts-table--striped tbody tr:nth-child(even) { @apply bg-gray-50; }
  .ts-table--bordered th, .ts-table--bordered td { @apply border border-gray-300; }
  .ts-table--sm th, .ts-table--sm td       { @apply px-2 py-1 text-xs; }

  /* ------ Card ------ */
  .ts-card          { @apply bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden; }
  .ts-card__header  { @apply px-4 py-3 border-b border-gray-200 bg-gray-50; }
  .ts-card__body    { @apply p-4; }
  .ts-card__footer  { @apply px-4 py-3 border-t border-gray-200 bg-gray-50; }
  .ts-card__title   { @apply text-lg font-semibold text-gray-900; }
  .ts-card__text    { @apply text-sm text-gray-600; }

  /* ------ Badge ------ */
  .ts-badge             { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; }
  .ts-badge--primary    { @apply bg-blue-100   text-blue-800; }
  .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-cyan-100   text-cyan-800; }
  .ts-badge--secondary  { @apply bg-gray-100   text-gray-800; }
  .ts-badge--trainer  { @apply bg-purple-100   text-gray-800; }
  .ts-badge--specialist  { @apply bg-green-100   text-gray-800; }

  /* ------ Alert ------ */
  .ts-alert           { @apply px-4 py-3 rounded-lg text-sm mb-4; }
  .ts-alert--info     { @apply bg-blue-50   text-blue-700   border border-blue-200; }
  .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-white 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-gray-200; }
  .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-gray-200; }
  .ts-modal__close    { @apply text-gray-400 hover:text-gray-600 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-gray-700; }
  .ts-form-hint        { @apply mt-1 text-xs text-gray-400; }
  .ts-form-date        { @apply flex items-center gap-3; }
  .ts-form-date__field { @apply flex-1; }
  .ts-form-date__sep   { @apply text-gray-400 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-gray-600 bg-gray-100 border border-gray-300; }

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

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

  /* ------ Navigation ------ */
  .ts-nav__item        { @apply text-gray-600 hover:text-blue-500; }
  .ts-nav__item--active { @apply text-blue-600 hover:text-blue-400; }
  .ts-nav__icon        { @apply inline-block size-4; }

  /* ------ Footer ------ */
  .ts-footer          { @apply bg-gray-50 border-t border-gray-200 text-sm px-8 mt-10 pt-10 pb-6 z-50; }
  .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-gray-800 mb-3 text-xs uppercase tracking-wider; }
  .ts-footer__links    { @apply list-none p-0 m-0 space-y-1.5; }
  .ts-footer__links a  { @apply text-gray-500 no-underline hover:text-gray-800 hover:underline; }
  .ts-footer__bottom   { @apply border-t border-gray-200 pt-4 text-center text-gray-400 text-xs; }

  /* ------ Footer (Admin) ------ */
  .ts-footer-admin        { @apply bg-gray-800 text-gray-400 text-xs py-2 px-4 mt-auto; }
  .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-gray-700 no-underline rounded-lg;
  }
  .ts-pagination a {
    @apply bg-gray-200;
  }
  .ts-pagination a:hover {
    @apply text-gray-200 bg-gray-700;
  }
  .ts-pagination .active a {
    @apply bg-gray-400 text-white;
  }

  /* ------ Pagination (Pagy) ------ */
  .ts-pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;
  }
  .ts-pagy a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-white;
  }
  .ts-pagy a:not(.gap):hover {
    @apply bg-purple-300;
  }
  .ts-pagy a:not(.gap):not([href]) {
    @apply text-gray-300 bg-gray-100 cursor-default;
  }
  .ts-pagy a.current {
    @apply text-white bg-gray-400;
  }
  .ts-pagy label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
  }
  .ts-pagy label input {
    @apply bg-gray-100 border-none rounded-md;
  }
  .ts-pagy a:first-child,
  .ts-pagy a:last-child {
    @apply text-purple-400;
  }

  /* ------ 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 w-5 h-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-white rounded-xl border border-gray-200 shadow-sm overflow-hidden sticky top-6; }
  .ts-profile-card__avatar { @apply relative bg-gradient-to-br from-blue-50 to-indigo-50 p-6 text-center; }
  .ts-profile-card__avatar-img {
    @apply w-40 h-40 rounded-full border-4 border-white shadow-xl object-cover mx-auto;
  }
  .ts-profile-card__avatar-placeholder {
    @apply w-40 h-40 rounded-full border-4 border-white shadow-xl
           bg-gradient-to-br from-blue-500 to-indigo-600
           flex items-center justify-center mx-auto;
  }
  .ts-profile-card__avatar-placeholder span { @apply text-white 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-2xl font-bold text-gray-900 text-center mb-2; }
  .ts-profile-card__location { @apply text-gray-500 text-sm text-center mb-3; }
  .ts-profile-card__headline { @apply text-gray-600 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-gray-100; }
  .ts-profile-stats__item  { @apply text-center p-3 rounded-lg; }
  .ts-profile-stats__item--blue   { @apply bg-gradient-to-br from-blue-50 to-indigo-50; }
  .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-gray-600 mt-1; }

  .ts-profile-section      { @apply bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-8; }
  .ts-profile-section__title { @apply text-2xl font-bold text-gray-900 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-2 border-green-200
           rounded-xl p-6 flex items-center justify-between;
  }
  .ts-profile-cta__content { @apply flex items-center; }
  .ts-profile-cta__title   { @apply text-xl 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-gray-700; }
  .ts-profile-info-list__icon { @apply text-blue-500 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-gradient-to-br from-gray-50 to-gray-100
           rounded-lg overflow-hidden border border-gray-200
           hover:border-blue-400 hover:shadow-xl transition-all duration-300 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-300 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-white text-gray-900 font-semibold rounded-lg hover:bg-gray-100 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-gray-200 transition object-cover;
  }
  .ts-profile-people__placeholder {
    @apply w-16 h-16 rounded-full border-2 border-gray-200 transition
           flex items-center justify-center;
  }
  .ts-profile-people__placeholder--blue   { @apply bg-gradient-to-br from-blue-400 to-indigo-500; }
  .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-white text-xl font-bold; }
  .ts-profile-people__name { @apply mt-2 text-sm text-gray-600 text-center transition; }

  /* group-hover interactions for people items */
  .group:hover .ts-profile-people__avatar--blue   { @apply border-blue-400; }
  .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-blue-400; }
  .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-blue-600; }
  .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-lg border border-gray-200
           hover:border-blue-300 hover:bg-blue-50 transition no-underline;
  }
  .ts-profile-event-link__title  { @apply font-semibold text-gray-900; }
  .ts-profile-event-link__time   { @apply text-sm text-gray-500 mt-1; }
  .ts-profile-event-link__venue  { @apply text-xs text-gray-400 mt-1; }
  .group:hover .ts-profile-event-link__title { @apply text-blue-600; }

  /* ------ Landing / Homepage ------ */
  .ts-hero                { @apply relative bg-white; }
  .ts-hero__grid          { @apply lg:grid lg:grid-cols-12 lg:gap-x-8; }
  .ts-hero__content       { @apply px-6 pb-24 pt-4 sm:pb-8 lg:col-span-7 lg:px-0 lg:pb-56 lg:pt-24 xl:col-span-6; }
  .ts-hero__content-inner { @apply mx-auto max-w-2xl lg:mx-0; }
  .ts-hero__media         { @apply relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0; }
  .ts-hero__img           { @apply aspect-[3/2] grayscale w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full; }
  .ts-hero__pill {
    @apply relative rounded-full px-3 py-1 text-sm leading-6 text-gray-500
           ring-1 ring-gray-900/10 hover:ring-gray-900/20;
  }
  .ts-hero__title         { @apply text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl; }
  .ts-hero__text          { @apply mt-6 text-lg leading-8 text-gray-600; }
  .ts-hero__actions       { @apply mt-10 flex items-center gap-x-6; }

  .ts-landing-section     { @apply py-16; }
  .ts-landing-section__heading { @apply text-2xl md:text-4xl text-gray-800 mb-12; }
  .ts-landing-section__heading-icon { @apply inline-block size-12; }
  .ts-landing-section__grid { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12; }

  .ts-cta                 { @apply py-24 sm:py-32; }
  .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-indigo-600; }
  .ts-cta__title          { @apply text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl; }
  .ts-cta__title--xl      { @apply mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl; }
  .ts-cta__text           { @apply mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600; }
  .ts-cta__actions        { @apply mt-10 flex items-center justify-center gap-x-6; }
  .ts-cta__actions--left  { @apply mt-10 flex items-center 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-gray-200 p-4 rounded; }
  .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-gray-300 rounded-md
           focus:outline-none focus:ring focus:ring-blue-500 text-sm;
  }
  .ts-listing__meta       { @apply text-sm text-gray-500 mb-3; }
  .ts-listing__grid       { @apply grid md:grid-cols-2 lg:grid-cols-3 gap-4; }

  /* ------ 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-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6; }
  .ts-detail-section__title { @apply text-xl font-semibold mb-3; }
  .ts-detail-label        { @apply text-gray-500 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-lg object-cover; }
  .ts-detail-inline__avatar {
    @apply w-14 h-14 rounded-full object-cover ring-2 ring-gray-200 transition;
  }
  .group:hover .ts-detail-inline__avatar { @apply ring-blue-400; }
  .ts-detail-inline__name { @apply font-semibold text-gray-900 transition; }
  .group:hover .ts-detail-inline__name   { @apply text-blue-600; }

  /* ------ Booking ------ */
  .ts-booking              { @apply bg-white shadow-lg rounded-xl overflow-hidden; }
  .ts-booking__banner      { @apply text-white px-6 py-4; }
  .ts-booking__banner-inner { @apply flex items-center justify-between; }
  .ts-booking__banner-title { @apply text-2xl font-bold text-white; }
  .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-blue-500 to-indigo-600
           flex items-center justify-center;
  }
  .ts-booking__avatar-placeholder span { @apply text-white text-lg font-bold; }
  .ts-booking__person-name { @apply font-semibold text-lg; }
  .ts-booking__person-role { @apply text-gray-500 text-sm; }

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

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

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

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

  /* ------ Admin Panel ------ */
  .ts-admin-panel          { @apply bg-white shadow-lg rounded-xl p-6; }
  .ts-admin-panel__title   { @apply text-xl font-semibold mb-4; }

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

  /* ------ Form: file input ------ */
  .ts-form-file {
    @apply block w-full text-sm text-gray-500
           file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0
           file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100;
  }

  /* ------ 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; }

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

/* 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;
}