/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "MultiSelect.css";
@import "styled_checkbox.css";
@import "autocomplete.css";
@import "simple_form.css";

/* Brand color system */
:root {
  --color-primary: #4292C6;
  --color-primary-hover: #3A80B0;
  --color-primary-light: #EBF3F9;
  --color-primary-dark: #2A6A94;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
}
.btn-outline-primary {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  background-color: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: white;
}
.text-primary { color: var(--color-primary); }
.hover\:text-primary:hover { color: var(--color-primary); }
.badge-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.turbo-progress-bar { display: none; }

html[data-app-online="false"] .hide-offline { display: none !important; }
html:not([data-app-online="false"]) .show-offline { display: none !important; }

/* Global placeholder styling for all form controls */
::placeholder {
  color: #9ca3af; /* tailwind gray-400 */
}

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}

/* Responsive tables: stack into label/value cards below md (768px).
   Opt-in: <table class="responsive-table" data-controller="responsive-table">.
   The Stimulus controller fills each <td>'s data-label from its column header. */
@media (max-width: 767.98px) {
  table.responsive-table thead { display: none; }
  table.responsive-table,
  table.responsive-table tbody,
  table.responsive-table tfoot { display: block; width: 100%; }
  table.responsive-table tr {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
  }
  table.responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-align: right;
    padding: 0.375rem 0;
    border: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  table.responsive-table td form.inline-flex {
    flex-wrap: wrap;
  }
  table.responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
    text-align: left;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  table.responsive-table td:first-child {
    display: block;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.25rem;
    padding-bottom: 0.375rem;
  }
  table.responsive-table td:first-child::before { content: none; }
  table.responsive-table td:empty { display: none; }
}