/* SousChefCloud site-wide theme overrides.
   This is the designated file for new global/reusable UI theming going
   forward — add new shared component styles here instead of custom.css. */

/* ==========================================================================
   Shared form layout — title bar + sectioned two-column body
   Originally established on Site create/edit; reused here so any form can
   opt into the same look via these classes instead of per-page inline
   styles.
   ========================================================================== */
:root {
  --app-form-accent: #26A69A;
  --app-form-border: #e3e8ec;
  --app-form-label: #4a5560;
  --app-form-muted: #8a94a0;
  --app-form-heading: #364150;
}

.app-form-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 12px 0 12px 4px;
}

.app-form-titlebar .app-form-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--app-form-heading);
}

.app-form-titlebar .app-form-title i {
  color: var(--app-form-accent);
}

.app-form-titlebar .app-form-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-form-columns {
  display: flex;
  padding: 16px 8px;
}

.app-form-col {
  flex: 1;
  overflow-x: hidden;
}

.app-form-col + .app-form-col {
  border-left: 1px solid #e9ecef;
  padding-left: 24px;
}

.app-form-col:first-child {
  padding-right: 12px;
}

/* Single-column variant: sections stack vertically instead of side by side. */
.app-form-columns--single {
  flex-direction: column;
}

.app-form-columns--single .app-form-col + .app-form-col {
  border-left: 0;
  padding-left: 0;
}

.app-form-columns--single .app-form-col:first-child {
  padding-right: 0;
}

.app-form-section {
  margin-bottom: 0.75rem;
}

.app-form-section-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #e9ecef;
}

.app-form-section-header i {
  color: var(--app-form-accent);
  font-size: 12px;
  margin-right: 0.5rem;
}

.app-form-section-header span {
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--app-form-muted);
}

.app-form-required-note {
  padding: 8px 0 4px;
  font-size: 12px;
  color: var(--app-form-muted);
}

.app-form-required-note .app-required-mark {
  color: #e74c3c;
  font-weight: 600;
}

/* Select + adjoining icon button (e.g. "add new site") */
.app-input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.app-input-group > * {
  flex: 1 1 auto;
}

.app-btn-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  border: 1px solid var(--app-form-border);
  border-radius: 4px;
  color: var(--app-form-accent);
  background: #ffffff;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.app-btn-icon:hover {
  background: var(--app-form-accent);
  color: #ffffff;
}

.app-help-link {
  color: var(--app-form-accent);
  text-decoration: none;
  font-weight: 500;
}

.app-help-link:hover {
  color: var(--app-form-accent);
  text-decoration: underline;
}