/* ============================================================
   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 {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--app-header-height));
  background: var(--app-body-bg);
  padding: var(--app-body-padding);
}

/* --- Section blocks --- */
.section {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.section h2 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

/* --- Form styles --- */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.form-inline input {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: #fff;
  min-width: 180px;
  outline: 2px solid #4a90e2; /* outline around input for accessibility/visibility */
}
.form-inline input:focus {
  outline: 2px solid #2b6cb0;
}
.form-inline button {
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 4px;
  background: var(--nav-btn, #4a8bdc);
  color: #fff;
  cursor: pointer;
}
.form-inline button:hover {
  opacity: 0.95;
}

/* --- Lists and items --- */
.contacts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.8);
}
.contact-item .left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.contact-item .name {
  font-weight: 600;
}
.contact-item .phone {
  color: var(--text-muted);
}
.contact-item .last-updated {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  color: #555;
}
.contact-item .update-area {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.contact-item .inline-input {
  padding: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.contact-item .save-mini {
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 4px;
  background: #28a745;
  color: #fff;
  cursor: pointer;
}
.contact-item .edit-btn {
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 4px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}
.contact-item .edit-btn:hover,
.contact-item .save-mini:hover {
  opacity: 0.92;
}

/* --- Daily prompts --- */
.prompts-container {
  display: grid;
  gap: 0.75rem;
}
.prompt-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fafafa;
}
.prompt-item .p-name {
  font-weight: 600;
}
.prompt-item input[type="text"] {
  padding: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  min-width: 180px;
  outline: 2px solid #4a90e2; /* outline around input for visibility */
}
.prompt-item input[type="text"]:focus {
  outline: 2px solid #2b6cb0;
}
.prompt-item button {
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.prompt-item .update-btn {
  background: #28a745;
  color: #fff;
}
.prompt-item .skip-btn {
  background: #6c757d;
  color: #fff;
}
@media (max-width: 600px) {
  .form-inline input { min-width: 140px; }
  .prompt-item { flex-wrap: wrap; align-items: stretch; }
}