/* ============================================================
   BUILDYBOT — APP VIEWER LAYOUT

   To customize the app header for a specific app, create your
   own CSS file and override any --app-* variable defined in
   the ":root" block below (e.g. --app-header-bg, --app-header-
   text, --app-header-height, --app-body-bg, etc.). Your file
   should be loaded after this one so your values take priority.
   All other colours and shapes are inherited from the active
   theme (themes.css) and layout (layouts.css), so you only
   need to set what you want to change.
   ============================================================ */

/* --- App-specific custom properties (override these) --- */
:root {
  --app-header-height: 48px;
  --app-header-bg: var(--nav-bg);
  --app-header-text: var(--nav-text);
  --app-header-border: var(--border-color);
  --app-header-font-size: 0.88rem;
  --app-header-padding-x: 1rem;
  --app-back-btn-bg: transparent;
  --app-back-btn-color: var(--nav-text);
  --app-back-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --app-back-btn-radius: var(--radius-sm);
  --app-body-bg: var(--bg);
  --app-body-padding: 0;
}

/* --- Header bar --- */
.app-viewer-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  height: var(--app-header-height);
  background: var(--app-header-bg);
  color: var(--app-header-text);
  border-bottom: 1px solid var(--app-header-border);
  padding: 0 var(--app-header-padding-x);
  gap: 0.75rem;
  font-size: var(--app-header-font-size);
  transition: background-color var(--transition-speed, 0.2s) ease,
              border-color var(--transition-speed, 0.2s) ease;
}

/* --- Back button --- */
.app-viewer-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--app-back-btn-bg);
  color: var(--app-back-btn-color);
  border: none;
  border-radius: var(--app-back-btn-radius);
  font-size: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.app-viewer-back:hover,
.app-viewer-back:focus-visible {
  background: var(--app-back-btn-hover-bg);
  color: var(--app-back-btn-color);
  text-decoration: none;
}

.app-viewer-back i {
  font-size: 1.1em;
}

/* --- Separator between back button and app name --- */
.app-viewer-sep {
  width: 1px;
  height: 1.2rem;
  background: currentColor;
  opacity: 0.25;
  flex-shrink: 0;
}

/* --- App name --- */
.app-viewer-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* --- Data storage link (centered in header) --- */
.app-viewer-data-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-header-text);
  opacity: 0.7;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

.app-viewer-data-link:hover,
.app-viewer-data-link:focus-visible {
  opacity: 1;
  background: var(--app-back-btn-hover-bg);
  color: var(--app-header-text);
  text-decoration: none;
}

/* --- Right-side slot for optional actions --- */
.app-viewer-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* --- Main content area beneath the header --- */
.app-viewer-body {
  flex: 1;
  background: var(--app-body-bg);
  padding: var(--app-body-padding);
  min-height: calc(100vh - var(--app-header-height));
}

/* --- Form controls styling helpers --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.form-grid { width: 100%; }

/* --- Simple button styling --- */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem 1rem;
  border:1px solid var(--border-color, #ccc);
  background: var(--nav-bg, #2c3e50);
  color: var(--nav-text, #fff);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.05); }

/* --- Results table styling --- */
.results-table th, .results-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border-color, #ddd);
  vertical-align: middle;
}
.results-table thead {
  background: rgba(0,0,0,0.04);
  font-weight: 600;
}
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
}