/* ==========================================================
   STYLES.CSS — Unified CentroChat + Newsletter Styles
   Updated: Nov 2025 (Full Version)
   ==========================================================
   Sections:
   1. Brand Tokens and Global Colors
   2. Web App Layout (Navbar, Footer, Buttons, Forms)
   3. SMS Preview and Animations
   4. Tables and Logs
   5. Newsletter Templates (Feast, Parish, Education, etc.)
   ========================================================== */


/* ==========================================================
   1. BRAND TOKENS AND GLOBAL COLORS
   ========================================================== */
:root {
  --copper-main: #b87333;
  --copper-bright: #fbceb1; /* For that "shimmer" highlight */
  --copper-dark: #8b4513;
  --copper-gradient: linear-gradient(90deg, #8b4513 0%, #b87333 50%, #fbceb1 100%);
  --copper-glow: rgba(184, 115, 51, 0.3);
}

/* ==========================================================
   2. WEB APP LAYOUT — NAVBAR, FOOTER, BUTTONS, FORMS
   ========================================================== */

body {
  font-family: 'Inter', sans-serif;
  background: radial-gradient(1200px 500px at 50% -200px, rgba(245,215,110,.06), transparent 60%) #fff;
}

/* Navbar + Logo */
.navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height: 80px;
}
.navbar-center-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  /* We remove the gap because the image has its own internal padding */
  gap: 0;
}

.navbar-brand img {
  /* Scale up: We set a larger height to make the internal icon look 'normal' */
  height: 85px;
  width: auto;

  /* The Secret Sauce: Negative margins 'crop' the white space visually */
  /* This pulls the text closer and centers the icon better */
  margin: -15px -20px -15px -15px;

  transition: transform 0.3s ease;
  z-index: 1;
}

.navbar-brand img:hover {
  transform: scale(1.1);
}

.text-true-brand {
  /* Using a hex code to better match the copper/gold accents */
  color: #B87333 !important;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}


.user-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 150px;
}
.user-info span { color: #fff; font-size: 0.875rem; }


/* Responsive Navbar */
@media (max-width: 768px) {
  .user-info { flex-direction: column; align-items: center; margin-top: 0.5rem; }
  .navbar-brand { margin-bottom: 0.5rem; }
  .navbar-center-logo { position: static; transform: none; margin: 0 auto; flex-direction: column; }
}

/* Profile images */
.navbar-profile-img, .profile-page-img {
  object-fit: cover; border-radius: 50%;
  transition: transform 0.2s ease;
}
.navbar-profile-img { width: 56px; height: 56px; }
.navbar-profile-img:hover { transform: scale(1.05); }
.profile-page-img { width: 200px; height: 200px; }
@media (max-width: 768px) {
  .navbar-profile-img { width: 40px; height: 40px; }
  .profile-page-img { width: 140px; height: 140px; }
}

/* Copper Edge Utility */
.copper-edge {
  position: relative;
  background-color: var(--ink); /* Assuming this is your dark background */
  color: #f8f9fa;
  /* Updated inset shadow to match copper tones */
  box-shadow: 0 0 0 1px rgba(184, 115, 51, 0.4) inset, 0 8px 30px var(--copper-glow);
}

.copper-edge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  /* Metallic gradient for the "shiny" line */
  background: var(--copper-gradient);
  /* Warm glow instead of yellow */
  box-shadow: 0 0 12px rgba(184, 115, 51, 0.6);
  pointer-events: none;
}

/* Buttons for Web UI */
.btn-outline-gold {
  color:#ffc107; border-color:#ffc107;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  text-shadow: 0 0 6px rgba(255,193,7,.25);
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold-1) 45%, var(--gold-3));
  color:#111; border:none;
  box-shadow: 0 4px 18px var(--gold-glow);
}
.btn-gold:hover { filter: brightness(.98); }

/* Web Footer (site-wide) */
.site-footer {
  font-size: 0.85rem;
  color: #ccc;
  background-color: #212529;
  text-align: center;
  padding: 1rem 0;
}


/* ==========================================================
   3. SMS PREVIEW + ANIMATIONS
   ========================================================== */

.phone-image-wrapper {
  position: relative;
  display: inline-block;
}

.phone-image-wrapper img {
  display: block; /* important: prevents weird inline spacing */
}

#smsPreviewBubble {
  position: absolute;
  top: 22%;
  left: 24%;
  width: 56%;
  max-height: 200px;

  padding: 10px 12px;
  box-sizing: border-box;

  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;

  background-color: #fff;
  border-radius: 12px;

  font-size: 12px;
  line-height: 1.4;
}

#smsPreviewText {
  font-size: 12px;
  line-height: 1.35;
  color: #000;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}


.sms-preview { display: flex; justify-content: center; }


@media (max-width: 500px) {
  .phone-frame { width: 100%; height: 360px; }
  .preview-text { font-size: 14px; }
}

/* Fade Animations */
.fade { opacity: 0; transition: opacity 0.5s ease-in-out; }
.fade.show { opacity: 1; }
@keyframes fadeInDown { from {opacity:0;transform:translateY(-20px);} to {opacity:1;transform:translateY(0);} }
@keyframes fadeInUp { from {opacity:0;transform:translateY(20px);} to {opacity:1;transform:translateY(0);} }


/* ==========================================================
   4. TABLES, LISTS, AND LOGS
   ========================================================== */
ul li { margin-bottom: 0.1rem; font-size: 0.9rem; list-style-position: inside; }
td, th { vertical-align: top !important; }
.recipient-list { padding-left: 0.8rem; font-size: 0.85rem; line-height: 1.2; }
.message-content {
  padding: 0.4rem 0.5rem;
  background-color: #f9f9f9;
  border: 1px dashed rgba(76,175,80,0.4);
  border-radius: 4px;
  display: inline-block;
  text-align: justify;
}


/* End of unified stylesheet */