/* Forkware Processing shared base styles (light + dark neutral layer)
   Keep this file intentionally shared; page-only rules should live with their page. */

:root {
  color-scheme: light dark;
}

/* Base typography helpers (minimal) */
html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Shared form controls used across list/filter pages */
.filter-input { font-size: 0.75rem; padding: 0.25rem 0.375rem; line-height: 1rem; width: 100%; border: 1px solid #e5e7eb; border-radius: 0.375rem; background: #fff; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.filter-input::placeholder { color: #9ca3af; }
.filter-input:focus { outline: 2px solid #93c5fd; outline-offset: 0; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); position: relative; z-index: 20; width: 180%; max-width: 180%; }

.filter-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border: 1px solid #e5e7eb; border-radius: 0.375rem; padding: 0.25rem 1.75rem 0.25rem 0.5rem; font-size: 0.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke-width='1.5' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .45rem center; background-size: 0.9rem 0.9rem; }
.filter-select:focus { outline: 2px solid #93c5fd; outline-offset: 0; border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }

.tw-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.375rem 2rem 0.375rem 0.5rem; line-height: 1.25rem; font-size: 0.875rem; color: #111827; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke-width='1.5' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 1rem 1rem; }
.tw-select:focus { outline: 2px solid #93c5fd; outline-offset: 0; border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.tw-select-sm { padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.75rem; }

/* Column toggle button shared styling */
.column-toggle-btn { font-size: 0.75rem; padding: 0.375rem 0.75rem; background: #fff; border: 1px solid #d1d5db; border-radius: 0.375rem; cursor: pointer; transition: all 0.15s; }
.column-toggle-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.column-toggle-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/* Skeleton animation shared */
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%); background-size: 1000px 100%; animation: shimmer 2s infinite; }

/* Cards base (neutral) */
.card { background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.2s; }
.card:active { transform: scale(0.98); }