/*
 * Active Admin Theme — Albyn Fieldworks
 *
 * Colour palette (matches customer-facing booking form):
 *   stone-900  #1c1917  — dark canvas
 *   stone-800  #292524  — raised surfaces
 *   sand-100   #faf6f0  — primary headings
 *   sand-200   #e2ddd5  — body text
 *   sand-300   #c5bfb5  — labels / secondary text
 *   sand-400   #9c9488  — muted text
 *   sand-500   #6e665c  — disabled / subtle
 *   sage-500   #6b8f71  — brand accent
 *   sage-600   #5a7d60  — accent hover
 *
 * Font: Inter 300–600 via Google Fonts
 */

/* ================================================================
   1. CORE — Body & Typography
   ================================================================ */
body {
  background-color: #1c1917 !important;
  color: #e2ddd5 !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ================================================================
   2. HEADER BAR — Fixed top bar
   ================================================================ */
body > div:first-child {
  background: rgba(28, 25, 23, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(197, 191, 181, 0.1) !important;
}

[data-test-site-title] {
  color: #faf6f0 !important;
}

.dark-mode-toggle {
  display: none !important;
}

#user-menu-button {
  color: #9c9488 !important;
}
#user-menu-button:hover {
  color: #e2ddd5 !important;
}

#user-menu {
  background: #292524 !important;
  border: 1px solid rgba(197, 191, 181, 0.1) !important;
  outline: none !important;
}
#user-menu a {
  color: #e2ddd5 !important;
}
#user-menu a:hover {
  background: rgba(107, 143, 113, 0.15) !important;
  color: #faf6f0 !important;
}

/* Hamburger menu icon (mobile) */
[data-drawer-target="main-menu"] {
  color: #9c9488 !important;
}
[data-drawer-target="main-menu"]:hover {
  color: #e2ddd5 !important;
}

/* ================================================================
   3. NAVIGATION SIDEBAR
   ================================================================ */
#main-menu {
  background: #1c1917 !important;
  border-color: rgba(197, 191, 181, 0.08) !important;
}

#main-menu a {
  color: #9c9488 !important;
}
#main-menu a:hover {
  color: #faf6f0 !important;
  background: rgba(226, 221, 213, 0.04) !important;
}
#main-menu a.selected {
  background: rgba(107, 143, 113, 0.15) !important;
  color: #faf6f0 !important;
}

#main-menu button {
  color: #9c9488 !important;
}
#main-menu button:hover {
  color: #faf6f0 !important;
}

#main-menu ul ul {
  border-color: rgba(107, 143, 113, 0.15) !important;
}

/* ================================================================
   4. PAGE HEADER — Breadcrumbs, title, action items
   ================================================================ */
[data-test-page-header] {
  background: rgba(28, 25, 23, 0.5) !important;
  border-color: rgba(197, 191, 181, 0.08) !important;
}

[data-test-page-header] h2 {
  color: #faf6f0 !important;
}

[data-test-page-header] nav a {
  color: #9c9488 !important;
}
[data-test-page-header] nav a:hover {
  color: #e2ddd5 !important;
}
[data-test-page-header] nav svg {
  color: #6e665c !important;
}

/* Action item buttons */
[data-test-action-items] a,
a.action-item-button,
.action-item-button {
  display: inline-block;
  padding: 0.5rem 1.25rem !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background: #6b8f71 !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: background 0.2s;
}
[data-test-action-items] a:hover,
a.action-item-button:hover,
.action-item-button:hover {
  background: #5a7d60 !important;
}

/* ================================================================
   5. PANELS
   ================================================================ */
.panel {
  background: rgba(41, 37, 36, 0.4) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 1rem !important;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.panel-title {
  color: #faf6f0 !important;
  font-weight: 600;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid rgba(226, 221, 213, 0.08) !important;
  background: transparent !important;
  margin: 0 !important;
}

.panel-body {
  padding: 1rem 1.25rem !important;
}

/* ================================================================
   6. DATA TABLES — Index pages
   ================================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  color: #9c9488 !important;
  background: rgba(41, 37, 36, 0.3) !important;
  border-bottom: 1px solid rgba(226, 221, 213, 0.1) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem !important;
}

.data-table th a {
  color: #9c9488 !important;
  text-decoration: none !important;
}
.data-table th a:hover {
  color: #e2ddd5 !important;
}

.data-table td {
  color: #e2ddd5 !important;
  border-bottom: 1px solid rgba(226, 221, 213, 0.06) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem;
}

.data-table tbody tr:hover td {
  background: rgba(107, 143, 113, 0.06) !important;
}

.data-table td a {
  color: #6b8f71 !important;
  text-decoration: none !important;
}
.data-table td a:hover {
  color: #85aa8a !important;
}

.data-table input[type="checkbox"] {
  accent-color: #6b8f71;
}

/* Sort icon */
.data-table-sorted-icon {
  width: 0.75rem;
  height: 0.75rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25rem;
}

/* ================================================================
   7. ATTRIBUTES TABLE — Show pages
   ================================================================ */
.attributes-table table {
  width: 100%;
}

.attributes-table th {
  color: #9c9488 !important;
  background: transparent !important;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid rgba(226, 221, 213, 0.06) !important;
  text-align: left;
  width: 200px;
}

.attributes-table td {
  color: #e2ddd5 !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid rgba(226, 221, 213, 0.06) !important;
  font-size: 0.875rem;
}

.attributes-table-empty-value {
  color: #6e665c !important;
  font-style: italic;
}

/* ================================================================
   8. STATUS TAGS
   ================================================================ */
.status-tag {
  display: inline-flex !important;
  align-items: center;
  padding: 0.2rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.5;
  background: rgba(110, 102, 92, 0.2) !important;
  color: #e2ddd5 !important;
}

.status-tag[data-status="yes"],
.status-tag[data-status="confirmed"],
.status-tag[data-status="paid"],
.status-tag[data-status="completed"],
.status-tag.ok,
.status-tag.yes,
.status-tag.green {
  background: rgba(107, 143, 113, 0.2) !important;
  color: #85aa8a !important;
}

.status-tag[data-status="no"],
.status-tag[data-status="cancelled"],
.status-tag.error,
.status-tag.no {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

.status-tag[data-status="pending"],
.status-tag.orange,
.status-tag.warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
}

.status-tag.blue {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

.status-tag[data-status="small"] {
  background: rgba(107, 143, 113, 0.15) !important;
  color: #85aa8a !important;
}
.status-tag[data-status="medium"] {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}
.status-tag[data-status="large"] {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
}

/* ================================================================
   9. SCOPES — Scope/tab buttons
   ================================================================ */
.scopes {
  margin-bottom: 1rem;
}

.index-button-group {
  display: inline-flex !important;
  gap: 0.25rem;
  background: rgba(41, 37, 36, 0.4) !important;
  border-radius: 0.5rem !important;
  padding: 0.25rem !important;
  border: none !important;
}

.index-button {
  padding: 0.4rem 1rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #9c9488 !important;
  text-decoration: none !important;
  transition: all 0.15s;
  background: transparent !important;
}

.index-button:hover {
  color: #e2ddd5 !important;
  background: rgba(226, 221, 213, 0.06) !important;
}

.index-button-selected,
.index-button-selected:hover {
  background: rgba(107, 143, 113, 0.2) !important;
  color: #faf6f0 !important;
}

.scopes-count {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ================================================================
   10. PAGINATION
   ================================================================ */
.paginated-collection-pagination {
  color: #9c9488 !important;
  font-size: 0.875rem;
}

.pagination-information {
  color: #9c9488 !important;
}

.paginated-collection-footer {
  color: #9c9488 !important;
}

.paginated-collection-footer a {
  color: #6b8f71 !important;
}

/* Kaminari nav */
nav.pagination a,
nav.pagination span,
.pagination a,
.pagination span {
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}

nav.pagination a,
.pagination a {
  color: #9c9488 !important;
  text-decoration: none !important;
}
nav.pagination a:hover,
.pagination a:hover {
  background: rgba(107, 143, 113, 0.15) !important;
  color: #e2ddd5 !important;
}
nav.pagination .current,
.pagination .current {
  background: rgba(107, 143, 113, 0.2) !important;
  color: #faf6f0 !important;
}
nav.pagination .gap,
.pagination .gap {
  color: #6e665c !important;
}

.pagination-per-page {
  background: rgba(41, 37, 36, 0.6) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 0.375rem !important;
  color: #e2ddd5 !important;
  padding: 0.25rem 0.5rem !important;
}

/* ================================================================
   11. FORMS
   ================================================================ */
fieldset.inputs {
  background: rgba(41, 37, 36, 0.3) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

fieldset.inputs .fieldset-title,
fieldset.inputs legend.fieldset-title {
  color: #faf6f0 !important;
  font-weight: 600 !important;
  font-size: 1rem;
  padding: 0 0.5rem !important;
}

fieldset.inputs ol {
  list-style: none;
  padding: 0 !important;
}

fieldset.inputs li {
  margin-bottom: 1rem !important;
  padding: 0 !important;
}

fieldset.inputs label {
  color: #c5bfb5 !important;
  font-size: 0.875rem;
  font-weight: 500 !important;
}

fieldset.inputs input[type="text"],
fieldset.inputs input[type="email"],
fieldset.inputs input[type="password"],
fieldset.inputs input[type="number"],
fieldset.inputs input[type="url"],
fieldset.inputs input[type="tel"],
fieldset.inputs input[type="date"],
fieldset.inputs textarea,
fieldset.inputs select {
  background: rgba(41, 37, 36, 0.6) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 0.875rem !important;
  color: #faf6f0 !important;
  font-size: 0.875rem;
  transition: border-color 0.2s;
  color-scheme: dark;
}

fieldset.inputs input:focus,
fieldset.inputs textarea:focus,
fieldset.inputs select:focus {
  border-color: rgba(107, 143, 113, 0.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(107, 143, 113, 0.15) !important;
}

fieldset.inputs .inline-hints,
p.inline-hints {
  color: #6e665c !important;
  font-size: 0.8125rem;
}

fieldset.inputs .inline-errors {
  color: #f87171 !important;
  font-size: 0.8125rem;
}

fieldset.inputs input[type="checkbox"] {
  accent-color: #6b8f71;
}

fieldset.inputs .choice label {
  display: inline;
  color: #e2ddd5 !important;
}

/* Form actions */
fieldset.actions {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

fieldset.actions ol {
  list-style: none;
  padding: 0 !important;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

fieldset.actions input[type="submit"] {
  background: #6b8f71 !important;
  color: #fff !important;
  border: none !important;
  padding: 0.625rem 1.5rem !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
}
fieldset.actions input[type="submit"]:hover {
  background: #5a7d60 !important;
}

fieldset.actions a {
  color: #9c9488 !important;
  font-size: 0.875rem;
  text-decoration: none !important;
}
fieldset.actions a:hover {
  color: #e2ddd5 !important;
}

/* has_many nested forms */
.has-many-container .has-many-fields {
  background: rgba(41, 37, 36, 0.2) !important;
  border: 1px solid rgba(226, 221, 213, 0.08) !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  margin-bottom: 0.75rem !important;
}

/* ================================================================
   12. FILTER SIDEBAR
   ================================================================ */
.sidebar-section {
  background: rgba(41, 37, 36, 0.3) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 0.75rem !important;
  overflow: hidden;
}

.sidebar-section h3,
.sidebar-section .sidebar-section-title {
  color: #faf6f0 !important;
  font-weight: 600;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid rgba(226, 221, 213, 0.08) !important;
}

.sidebar-section label {
  color: #c5bfb5 !important;
  font-size: 0.8125rem;
}

.sidebar-section input[type="text"],
.sidebar-section input[type="email"],
.sidebar-section input[type="number"],
.sidebar-section input[type="date"],
.sidebar-section select {
  background: rgba(41, 37, 36, 0.6) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 0.375rem !important;
  color: #faf6f0 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem;
  color-scheme: dark;
}

.sidebar-section input:focus,
.sidebar-section select:focus {
  border-color: rgba(107, 143, 113, 0.5) !important;
  outline: none !important;
}

.sidebar-section input[type="submit"] {
  background: #6b8f71 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.sidebar-section input[type="submit"]:hover {
  background: #5a7d60 !important;
}

.sidebar-section a.clear-filters-btn,
.sidebar-section a {
  color: #6b8f71 !important;
  text-decoration: none !important;
}
.sidebar-section a:hover {
  color: #85aa8a !important;
}

/* ================================================================
   13. FLASH MESSAGES
   ================================================================ */
[data-test-page-content] ~ .px-2\.5 .rounded-lg,
.px-2\.5 .rounded-lg {
  border-radius: 0.75rem !important;
}

/* ================================================================
   14. FOOTER
   ================================================================ */
body .text-gray-500.border-t {
  border-color: rgba(197, 191, 181, 0.08) !important;
  color: #6e665c !important;
}
body .text-gray-500.border-t a {
  color: #6e665c !important;
}
body .text-gray-500.border-t a:hover {
  color: #9c9488 !important;
}

/* ================================================================
   15. LINKS — General
   ================================================================ */
.panel-body a {
  color: #6b8f71 !important;
  text-decoration: none !important;
}
.panel-body a:hover {
  color: #85aa8a !important;
}

/* Member links (Edit / View / Delete in tables) */
a.member_link {
  color: #6b8f71 !important;
  text-decoration: none !important;
  font-size: 0.8125rem;
}
a.member_link:hover {
  color: #85aa8a !important;
}

/* ================================================================
   16. BLANK SLATE — Empty state
   ================================================================ */
.border-dashed {
  border-color: rgba(197, 191, 181, 0.15) !important;
}
.border-dashed:hover {
  border-color: rgba(197, 191, 181, 0.25) !important;
}
.border-dashed h2 {
  color: #e2ddd5 !important;
}
.border-dashed a {
  color: #6b8f71 !important;
}

/* ================================================================
   17. BATCH ACTIONS
   ================================================================ */
.batch-actions-dropdown button,
[data-batch-actions] button {
  background: rgba(41, 37, 36, 0.6) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  color: #e2ddd5 !important;
  border-radius: 0.5rem !important;
}

/* ================================================================
   18. LOGIN PAGE
   ================================================================ */
.bg-gray-50,
body.bg-gray-50 {
  background-color: #1c1917 !important;
}

/* Login card */
body > div > div {
  /* Let specificity from class selectors handle this */
}

.sm\:max-w-md {
  background: rgba(41, 37, 36, 0.5) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 1rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
}

.sm\:max-w-md h2 {
  color: #faf6f0 !important;
}

/* ================================================================
   19. CUSTOM ADMIN COMPONENTS
   ================================================================ */

/* Availability hint */
p.availability-hint {
  color: #9c9488 !important;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* Custom buttons used in service area etc. */
a.button,
.button {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: rgba(41, 37, 36, 0.6);
  color: #e2ddd5 !important;
  text-decoration: none !important;
  border: 1px solid rgba(226, 221, 213, 0.1);
  cursor: pointer;
  transition: all 0.2s;
}
a.button:hover,
.button:hover {
  background: rgba(41, 37, 36, 0.8);
  color: #faf6f0 !important;
}
a.button.primary,
.button.primary {
  background: #6b8f71 !important;
  color: #fff !important;
  border-color: transparent;
}
a.button.primary:hover,
.button.primary:hover {
  background: #5a7d60 !important;
}

/* Pricing admin range sliders */
input[type="range"] {
  accent-color: #6b8f71 !important;
}

/* Generic styled table (pricing history etc.) */
table.w-full th {
  color: #9c9488 !important;
}
table.w-full td {
  color: #e2ddd5 !important;
}
table.w-full tr {
  border-color: rgba(226, 221, 213, 0.08) !important;
}

/* ================================================================
   20. SELECTION & SCROLLBAR
   ================================================================ */
::selection {
  background: rgba(107, 143, 113, 0.3);
  color: #faf6f0;
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(110, 102, 92, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 102, 92, 0.5);
}

/* ================================================================
   21. MISC OVERRIDES
   ================================================================ */

/* Paragraphs in panels */
.panel-body p,
.panel-body para {
  color: #e2ddd5;
}

/* Download format links */
.paginated-collection-footer span {
  color: #9c9488;
}
.paginated-collection-footer a {
  color: #6b8f71 !important;
  text-decoration: none !important;
  margin-left: 0.25rem;
}

/* Ensure active filters are themed */
.active-filters {
  background: rgba(41, 37, 36, 0.3) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 0.5rem !important;
  color: #e2ddd5 !important;
}

.active-filters a {
  color: #6b8f71 !important;
}

/* Date select dropdowns */
select.date-select,
fieldset.inputs .fragments select {
  background: rgba(41, 37, 36, 0.6) !important;
  border: 1px solid rgba(226, 221, 213, 0.1) !important;
  border-radius: 0.375rem !important;
  color: #faf6f0 !important;
  padding: 0.5rem !important;
  color-scheme: dark;
}