/*
 * 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.
 *


 */

/* Pull to Refresh Styles */
[data-controller="pull-to-refresh"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

[data-controller="pull-to-refresh"] [data-pull-to-refresh-target="content"] {
  will-change: transform;
  backface-visibility: hidden;
}

[data-controller="pull-to-refresh"] [data-pull-to-refresh-target="indicator"] {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

/* Smooth transitions for pull feedback */
[data-controller="pull-to-refresh"] [data-pull-to-refresh-target="content"] {
  transition: transform 0.1s ease-out;
}

/* Enhanced touch feedback */
@media (hover: none) and (pointer: coarse) {
  [data-controller="pull-to-refresh"] [data-pull-to-refresh-target="content"] {
    touch-action: pan-y;
  }
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
  [data-controller="pull-to-refresh"] [data-pull-to-refresh-target="indicator"] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  [data-controller="pull-to-refresh"] [data-pull-to-refresh-target="indicator"] {
    background: rgba(17, 24, 39, 0.95);
    border-bottom-color: rgba(75, 85, 99, 0.5);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  [data-controller="pull-to-refresh"] [data-pull-to-refresh-target="indicator"] {
    border-bottom-width: 2px;
    border-bottom-color: currentColor;
  }
}

/* Markdown article typography */
.blog-content { font-size: 1.0625rem; line-height: 1.8; }
.blog-content > * + * { margin-top: 1.35rem; }
.blog-content h2,
.blog-content h3 { color: #17211b; font-weight: 650; line-height: 1.25; scroll-margin-top: 6rem; }
.blog-content h2 { margin-top: 2.5rem; font-size: 1.75rem; }
.blog-content h3 { margin-top: 2rem; font-size: 1.35rem; }
.blog-content a { color: #5c7c27; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.blog-content ul { list-style: disc; padding-left: 1.5rem; }
.blog-content ol { list-style: decimal; padding-left: 1.5rem; }
.blog-content li + li { margin-top: 0.4rem; }
.blog-content blockquote { border-left: 3px solid #8ba54a; color: #526057; padding-left: 1.25rem; }
.blog-content code { border-radius: 0.3rem; background: #f0ede5; padding: 0.15rem 0.35rem; font-size: 0.9em; }
.blog-content pre { overflow-x: auto; border-radius: 0.75rem; background: #17211b; color: #f7f4ec; padding: 1rem; }
.blog-content pre code { background: transparent; padding: 0; }
.blog-content img { border-radius: 0.75rem; }
.blog-content table { width: 100%; border-collapse: collapse; }
.blog-content th,
.blog-content td { border-bottom: 1px solid #e7e1d4; padding: 0.65rem; text-align: left; }

/* Admin uses the same warm, high-contrast product language as the customer app. */
.admin-shell main .bg-gray-50 { background-color: #f4f2ea; }
.admin-shell main .bg-white { background-color: #fff; }
.admin-shell main .text-gray-900 { color: #17211b; }
.admin-shell main .text-gray-700,
.admin-shell main .text-gray-600 { color: #536057; }
.admin-shell main .text-gray-500,
.admin-shell main .text-gray-400 { color: #6d766f; }
.admin-shell main .border-gray-200,
.admin-shell main .border-gray-300,
.admin-shell main .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #e7e1d4; }
.admin-shell main .ring-gray-200 { --tw-ring-color: #e7e1d4; }
.admin-shell main .shadow-sm { box-shadow: none; }
.admin-shell main .rounded-xl { border-radius: .5rem; }
.admin-shell main :is(.bg-blue-50, .bg-blue-100, .bg-emerald-50, .bg-emerald-100, .bg-green-50, .bg-green-100, .bg-purple-50, .bg-purple-100) { background-color: #efffd9; }
.admin-shell main :is(.bg-blue-500, .bg-blue-600, .bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600, .bg-purple-500, .bg-purple-600) { background-color: #b8ff5c; }
.admin-shell main :is(.text-blue-800, .text-blue-900, .text-emerald-800, .text-emerald-900, .text-green-800, .text-green-900, .text-purple-800, .text-purple-900) { color: #365314; }
.admin-shell main :is(.border-blue-200, .border-emerald-200, .border-green-200, .border-purple-200) { border-color: #d8d4c9; }
.admin-shell main :is(.text-blue-600, .text-blue-700, .text-emerald-600, .text-emerald-700, .text-green-600, .text-green-700, .text-purple-600, .text-purple-700) { color: #5c7c27; }
.admin-shell main :is(.hover\:text-blue-700, .hover\:text-blue-800, .hover\:text-emerald-700, .hover\:text-green-700, .hover\:text-purple-700):hover { color: #365314; }
.admin-shell main :is(input, select, textarea):focus { border-color: #b8ff5c; --tw-ring-color: #b8ff5c; }
.admin-shell main table thead { background: #f4f2ea; }
.admin-shell main table tbody tr { transition: background-color .15s ease; }
.admin-shell main table tbody tr:hover { background: #fbfaf6; }
.admin-shell main .bg-red-600 { background-color: #17211b; }
.admin-shell main .hover\:bg-red-700:hover { background-color: #2a382f; }