/**
 * FUTURON Employee apps — shared UI system (guide-aligned)
 * Loaded on all employee app pages via app-shell.
 */

.futuron-app-shell {
  --ui-ink: #0f1b38;
  --ui-ink-2: #1f4d73;
  --ui-teal: #2f7a8a;
  --ui-teal-soft: #56a9b5;
  --ui-muted: #556170;
  --ui-border: #d3e3ed;
  --ui-card: #ffffff;
  --ui-panel: #f6fbff;
  --ui-radius: 16px;
  --ui-radius-sm: 12px;
  --ui-shadow: 0 10px 24px rgba(10, 35, 64, 0.08);
  --ui-shadow-lg: 0 18px 38px rgba(10, 35, 64, 0.1);
}

/* —— Page headers —— */
.futuron-app-shell .futuron-app-page-head h1,
.futuron-app-shell .futuron-brand-wrap h1,
.futuron-app-shell .futuron-media-wrap h1,
.futuron-app-shell .futuron-nfc-header h1,
.futuron-app-shell .futuron-sig-app .header h1,
.futuron-app-shell .futuron-contact-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ui-ink);
}

.futuron-app-shell .futuron-app-tab-desc,
.futuron-app-shell .futuron-media-intro,
.futuron-app-shell .futuron-nfc-header .subtitle,
.futuron-app-shell .futuron-sig-app .note,
.futuron-app-shell .futuron-contact-header .note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ui-muted);
}

/* —— Shared tabs scroll —— */
.futuron-app-shell .futuron-app-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
  border-bottom-color: var(--ui-border);
}
.futuron-app-shell .futuron-app-tabs::-webkit-scrollbar {
  display: none;
}
.futuron-app-shell .futuron-app-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
}
.futuron-app-shell .futuron-app-tab.is-active {
  color: var(--ui-ink);
  border-bottom-color: var(--ui-teal);
}

/* —— Content cards inside apps —— */
.futuron-app-shell .futuron-broadcast-card,
.futuron-app-shell .futuron-activity-item,
.futuron-app-shell .futuron-ai-card,
.futuron-app-shell .futuron-ai-form-panel,
.futuron-app-shell .futuron-ai-mode-card,
.futuron-app-shell .futuron-brand-card,
.futuron-app-shell .futuron-media-card,
.futuron-app-shell .futuron-nfc-instructions.card,
.futuron-app-shell .fta-card,
.futuron-app-shell .futuron-contact-app .card {
  border-radius: var(--ui-radius) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow);
}

/* —— List-style rows (activity, leads) —— */
.futuron-app-shell .futuron-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  min-height: 72px;
  padding: 14px 16px !important;
  border-radius: var(--ui-radius) !important;
  background: #fff !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow);
}
.futuron-app-shell .futuron-activity-item.is-clickable:hover,
.futuron-app-shell .futuron-activity-item.is-clickable.is-expanded {
  border-color: var(--ui-teal) !important;
  box-shadow: 0 12px 28px rgba(47, 122, 138, 0.12);
}
.futuron-app-shell .futuron-activity-label {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ui-ink) !important;
}
.futuron-app-shell .futuron-activity-meta,
.futuron-app-shell .futuron-activity-time {
  font-size: 12px !important;
  color: var(--ui-muted) !important;
}

/* —— Filter chips —— */
.futuron-app-shell .futuron-activity-filter,
.futuron-app-shell .fta-chip-filter,
.futuron-app-shell .fta-filter,
.futuron-app-shell .fta-lead-filter {
  border: 1px solid var(--ui-border) !important;
  background: #fff !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ui-ink-2) !important;
}
.futuron-app-shell .futuron-activity-filter.is-active,
.futuron-app-shell .fta-chip-filter.is-active,
.futuron-app-shell .fta-filter.is-active,
.futuron-app-shell .fta-lead-filter.is-active {
  background: var(--ui-teal) !important;
  border-color: var(--ui-teal) !important;
  color: #fff !important;
}

/* —— Primary actions —— */
.futuron-app-shell .futuron-ai-btn--primary,
.futuron-app-shell .fta-btn--primary,
.futuron-app-shell .futuron-bc-btn:not(.secondary):not(.wa),
.futuron-app-shell .futuron-sig-app .btn-primary,
.futuron-app-shell button.button-primary {
  background: linear-gradient(180deg, #0f1b38, #1f4d73) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(15, 27, 56, 0.16);
}

.futuron-app-shell .futuron-ai-btn,
.futuron-app-shell .fta-btn,
.futuron-app-shell .futuron-bc-btn.secondary {
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* —— Forms —— */
.futuron-app-shell input[type="text"],
.futuron-app-shell input[type="email"],
.futuron-app-shell input[type="tel"],
.futuron-app-shell input[type="password"],
.futuron-app-shell input[type="url"],
.futuron-app-shell input[type="number"],
.futuron-app-shell input[type="time"],
.futuron-app-shell input[type="search"],
.futuron-app-shell select,
.futuron-app-shell textarea {
  border-radius: 10px !important;
  border-color: var(--ui-border) !important;
}

.futuron-app-shell input:focus,
.futuron-app-shell select:focus,
.futuron-app-shell textarea:focus {
  border-color: var(--ui-teal) !important;
  box-shadow: 0 0 0 3px rgba(47, 122, 138, 0.14) !important;
  outline: none;
}

/* —— Tip / locked panels —— */
.futuron-app-shell .futuron-brand-locked,
.futuron-app-shell .futuron-ai-locked,
.futuron-app-shell .futuron-nfc-instructions .security-note {
  border-radius: var(--ui-radius-sm) !important;
}

/* —— Broadcast cards —— */
.futuron-app-shell .futuron-broadcast-body h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--ui-ink) !important;
}
.futuron-app-shell .futuron-broadcast-body p {
  color: var(--ui-muted) !important;
  line-height: 1.5 !important;
}

/* —— AI cards as soft list —— */
.futuron-app-shell .futuron-ai-card {
  padding: 14px 16px !important;
}
.futuron-app-shell .futuron-ai-card h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* —— Brand / media cards —— */
.futuron-app-shell .futuron-brand-body h3,
.futuron-app-shell .futuron-media-body h3 {
  font-weight: 800 !important;
  color: var(--ui-ink) !important;
}

/* —— Contact tools —— */
.futuron-app-shell .futuron-contact-tools h3 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ui-ink) !important;
  margin: 16px 0 8px !important;
}
.futuron-app-shell .futuron-contact-tools h3:first-child {
  margin-top: 0 !important;
}

/* —— Signature —— */
.futuron-app-shell .futuron-sig-app .card {
  border-radius: var(--ui-radius) !important;
  border-color: rgba(15, 27, 56, 0.06) !important;
  box-shadow: var(--ui-shadow-lg) !important;
}

/* —— NFC —— */
.futuron-app-shell .futuron-nfc-shell {
  max-width: 100% !important;
  padding: 0 0 24px !important;
}
.futuron-app-shell .futuron-nfc-header h1 {
  font-size: 22px !important;
}
.futuron-app-shell .futuron-nfc-instructions.card {
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
  padding: 16px !important;
}

/* —— Empty states —— */
.futuron-app-shell .futuron-analytics-empty,
.futuron-app-shell .fta-empty {
  color: var(--ui-muted) !important;
  font-size: 14px !important;
}

/* Stats bars */
.futuron-app-shell .futuron-ai-stats-bar,
.futuron-app-shell .fta-stats .fta-stat {
  border-radius: var(--ui-radius-sm) !important;
}