/* ========= GA Experience Skin — drop-in overrides (no HTML changes) ========= */

/* Tokens to match the GA Experience look */
:root{
  --bg:#f7faf9;
  --card:#ffffff;
  --text:#23323a;
  --muted:#5a6b73;
  --primary:#2a8c8a;
  --primary-weak:#e0f1f0;
  --ring: rgba(42,140,138,0.25);
  --shadow: 0 10px 30px rgba(0,0,0,0.06);
  --radius: 18px;
}

/* Background + app shell calmness */
html, body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Helvetica Neue", Arial; }
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, #e6f4f2 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, #f3faf7 0%, transparent 60%),
    var(--bg) !important;
  color: var(--text);
}

/* Keep your page-wrapper and single-scroll model intact */
.page-wrapper { max-width: 1024px; margin: 0 auto; }

/* App content cards match GA style */
.dashboard-wrapper,
.events-wrapper,
.preferences-wrapper,
.meetings-wrapper,
.checkin-wrapper {
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Headings and muted text */
.dash-heading,
.events-wrapper h2,
.preferences-wrapper h2,
.meetings-wrapper h2,
.checkin-heading,
.about-wrapper h2,
.about-wrapper h3 { color:#0e152b; letter-spacing:.2px; }
.clean-summary p, .events-wrapper p, .preferences-wrapper p, .meetings-wrapper p, .checkin-wrapper p { color: var(--muted); }

/* ---------- Pill Tabs (no HTML change) ---------- */

/* Strip old separators and give the bar air + subtle bg */
.tab-links{
  display: flex;
  gap: 10px;                      /* pill spacing */
  align-items: center;
  padding: 10px 12px;
  border: 0 !important;
  background: transparent !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Turn each existing .tab-button into a pill */
.tab-links .tab-button{
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid #d9e7e6 !important;
  background: #eef6f5 !important;
  color: #2a5554 !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  padding: 8px 14px !important;
  border-radius: 9999px !important;       /* the pill */
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  cursor: pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}

/* Hover and focus ring */
.tab-links .tab-button:hover{
  box-shadow: 0 6px 20px rgba(42,140,138,.14);
}
.tab-links .tab-button:focus{
  outline: none;
  box-shadow: 0 0 0 6px var(--ring);
  border-color: var(--primary);
}

/* Active pill */
.tab-links .tab-button.active{
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(42,140,138,.25);
  transform: translateY(0); /* steady */
}

/* If your JS uses aria-selected instead of .active, this keeps it in sync */
.tab-links .tab-button[aria-selected="true"]{
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(42,140,138,.25);
}

/* Remove any leftover vertical borders from older styles */
.tab-button:first-child { border-left: 1px solid #d9e7e6 !important; }
.tab-button + .tab-button { border-left: 1px solid #d9e7e6 !important; }

/* ---------- White content shell stays clean ---------- */

.tab-content-container{
  background: #fff !important;
  border: 1px solid #e6ebf5;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
}

/* Keep your single inner scroller */
#tab-content-area{
  background: #fff !important;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Buttons (shared) ---------- */

.preferences-wrapper button,
.pref-button,
.theme-button,
.phone-actions button,
.nfc-permission-block button{
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.preferences-wrapper button:hover,
.pref-button:hover,
.theme-button:hover,
.phone-actions button:hover,
.nfc-permission-block button:hover{
  box-shadow: 0 14px 30px rgba(15,23,42,.16);
}

/* Secondary style to match GA’s soft teal */
.btn-secondary, .secondary-button{
  background: var(--primary-weak) !important;
  color: var(--primary) !important;
}

/* Badges to match the GA style */
.badge{
  background:#eaf6f5;
  color:#256d6b;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

/* Optional helper card to align with GA’s card */
.card-like{
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* Keep white content shell always white while loading */
.tab-content-container.is-loading::after{
  content:"";
  position:absolute; inset:0;
  background:#fff;
}

/* Small screens keep the pills scrollable and comfy */
@media(max-width: 480px){
  .tab-links{ padding: 8px 8px; gap: 8px; }
  .tab-links .tab-button{ padding: 8px 12px !important; font-size: 12.5px; }
}


/* ===== Companion — Preferences Tab (GA Experience Style) ===== */

/* Card shell already matches, just add spacing harmony */
.preferences-wrapper {
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* Headings */
.preferences-wrapper h2{
  font-size: 22px;
  font-weight: 800;
  color: #0e152b;
  letter-spacing: .2px;
  margin: 0 0 12px 0;
}
.preferences-wrapper h5{
  font-size: 14px;
  font-weight: 800;
  color: #2a5554;
  letter-spacing: .25px;
  text-transform: uppercase;
  margin: 18px 0 10px 0;
}

/* Soft separators */
.preferences-wrapper hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.12), rgba(15,23,42,0));
  margin: 16px 0 12px 0;
}

/* Labels */
.preferences-wrapper label{
  display:block;
  margin: 12px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Inputs and selects */
.preferences-wrapper input[type="text"],
.preferences-wrapper input[type="date"],
.preferences-wrapper input[type="number"],
.preferences-wrapper select{
  width: 90%;
  appearance: none;
  background:#f9fbfb;
  color: var(--text);
  border:1px solid #d9e7e6;
  border-radius:14px;
  padding:12px 14px;
  font-size:14px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.preferences-wrapper input[type="text"]:focus,
.preferences-wrapper input[type="date"]:focus,
.preferences-wrapper input[type="number"]:focus,
.preferences-wrapper select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 6px var(--ring);
  background: #ffffff;
}

/* Multi-select height and feel */
.preferences-wrapper select[multiple]{
  min-height: 116px;
  padding-top: 10px;
  padding-bottom: 10px;
  background:
    linear-gradient(#f9fbfb,#f9fbfb) padding-box,
    linear-gradient(180deg, #eef6f5, #eef6f5) border-box;
  border:1px solid #d9e7e6;
  border-radius:14px;
}

/* Checkbox row */
.preferences-wrapper input[type="checkbox"]{
  width:auto;
  height: 16px;
  margin-right:8px;
  vertical-align: middle;
}

/* PIN settings card */
.pin-settings{
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  background:#f8fbfb;
  border:1px dashed #b8dcd9;
}
#pinSection label{ margin-top:10px; }
#pinCode{
  max-width: 160px;
  letter-spacing: 2px;
  text-align: center;
}

/* Form group and help text */
.form-group{ margin: 10px 0 4px; }
.form-note{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Buttons */
.preferences-wrapper button,
#requestGPS,
#savePrefs,
#erasePrefs{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 12px 16px;
  border-radius:14px;
  border:1px solid transparent;
  background: var(--primary);
  color:#fff;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.preferences-wrapper button:hover,
#requestGPS:hover,
#savePrefs:hover{
  box-shadow: 0 14px 30px rgba(15,23,42,.16);
}
#erasePrefs{
  background: linear-gradient(90deg, #ff7a7a, #ff4d4d);
  border-color: rgba(255,77,77,0.35);
  color: #fff !important;
}

/* Center stack buttons nicely on this tab */
.preferences-wrapper center > button{
  width: 82%;
  max-width: 520px;
}

/* Small refinement for the Grant Location button when used alone */
#requestGPS{
  background: var(--primary-weak);
  color: var(--primary);
  border-color: #cfe7e6;
}
#requestGPS:hover{
  box-shadow: 0 10px 26px rgba(42,140,138,.18);
}

/* Layout: optional comfy two-column on wider screens */
@media(min-width: 860px){
  .preferences-wrapper{
    padding: 26px;
  }
  .preferences-wrapper .grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* Reduce input spacing on small screens to avoid scroll fatigue */
@media(max-width: 420px){
  .preferences-wrapper label{ margin: 10px 0 6px; }
  .preferences-wrapper input[type="text"],
  .preferences-wrapper input[type="date"],
  .preferences-wrapper input[type="number"],
  .preferences-wrapper select{ padding: 11px 12px; }
  .preferences-wrapper center > button{ width: 96%; }
}


/* ===== Companion — About Tab (GA Experience Style) ===== */

.about-wrapper{
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px !important;          /* beats inline padding if present */
  color: var(--text) !important;      /* harmonize text color */
  line-height: 1.7;
}

/* Headings */
.about-wrapper h2{
  margin: 0 0 10px 0 !important;      /* override inline margin-top:0 safely */
  font-size: 22px;
  font-weight: 800;
  color: #0e152b !important;          /* override any inline color */
  letter-spacing: .2px;
}
.about-wrapper h3{
  margin: 18px 0 8px 0;
  font-size: 18px;
  font-weight: 800;
  color: #0e152b !important;
  letter-spacing: .2px;
}

/* Paragraphs and lists */
.about-wrapper p{
  margin: 10px 0 12px 0;
  color: var(--text);
  font-size: 15px;
}
.about-wrapper ul{
  margin: 8px 0 14px 0;
  padding-left: 20px;
}
.about-wrapper li{
  margin: 6px 0;
  color: var(--text);
  font-size: 15px;
}

/* Soft rule if you decide to insert <hr> */
.about-wrapper hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.12), rgba(15,23,42,0));
  margin: 16px 0 12px 0;
}

/* Blockquote: calm, supportive */
.about-wrapper blockquote{
  margin: 12px 0 14px 0 !important;   /* beats inline margins if present */
  padding: 14px 16px 14px 16px !important;
  font-style: italic;
  color: #33424a !important;
  background: #f8fbfb;
  border: 1px dashed #b8dcd9;
  border-left: 4px solid #2a8c8a !important;
  border-radius: 14px;
}

/* Links */
.about-wrapper a{
  color: var(--primary) !important;
  text-decoration: underline;
  font-weight: 600;
}
.about-wrapper a:hover{
  text-decoration: none;
  box-shadow: 0 1px 0 0 currentColor;
}

/* Small print / meta */
.about-wrapper .muted,
.about-wrapper p[style*="font-size: 0.9em"],
.about-wrapper p[style*="color: #555"]{
  color: var(--muted) !important;
  font-size: 13px !important;
}

/* Responsive polish */
@media (max-width: 480px){
  .about-wrapper{ padding: 18px !important; }
  .about-wrapper h2{ font-size: 20px; }
  .about-wrapper h3{ font-size: 17px; }
  .about-wrapper p, .about-wrapper li{ font-size: 14.5px; }
}


/* ===== Companion — Check-In Tab (GA Experience Style) ===== */

.checkin-wrapper{
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.checkin-heading{
  font-size: 22px;
  font-weight: 800;
  color: #0e152b;
  letter-spacing: .2px;
  margin: 0 0 12px 0;
}

/* Body spacing */
.checkin-body{ margin-top: 6px; }

/* Divider */
.checkin-wrapper hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.12), rgba(15,23,42,0));
  margin: 16px 0 12px 0;
}

/* GPS search box */
#gpsCheckinBox{
  background: #f8fbfb;
  border: 1px dashed #b8dcd9;
  border-radius: 14px;
  padding: 16px;
}
#startGpsSearch{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
  cursor: pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
#startGpsSearch:hover{ box-shadow: 0 14px 30px rgba(15,23,42,.16); }

/* GPS result list container */
#gpsResult{
  margin-top: 16px !important;
  display: grid;
  gap: 10px;
}

/* Each found meeting card */
.gps-meeting-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid #e7ecf6;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  padding: 14px;
}
.gps-meeting-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 8px;
}
.gps-meeting-title{
  font-size: 16px; font-weight: 800; color:#0e152b;
}
.gps-meeting-meta{
  color: var(--muted); font-size: 13px;
}
.gps-meeting-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px;
}
.gps-meeting-actions .btn-checkin,
.gps-meeting-actions .btn-view{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px; border:1px solid transparent;
  font-weight:700; font-size:13px; text-decoration:none; cursor:pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.gps-meeting-actions .btn-checkin{
  background: var(--primary); color:#fff;
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
}
.gps-meeting-actions .btn-checkin:hover{ box-shadow: 0 14px 30px rgba(15,23,42,.16); }
.gps-meeting-actions .btn-view{
  background: var(--primary-weak); color: var(--primary);
  border-color: #cfe7e6;
}

/* Meeting history timeline */
#meeting-history{
  display: grid;
  gap: 12px;
}

/* History card style */
.history-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid #e7ecf6;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  padding: 14px;
  position: relative;
}
.history-card .title{
  font-size: 16px; font-weight: 800; color:#0e152b; margin-bottom: 4px;
}
.history-card .meta{
  color: var(--muted); font-size: 13px; margin-bottom: 8px;
}
.history-card .badge{
  background:#eaf6f5; color:#256d6b; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; display:inline-block;
}

/* Empty state */
#meeting-history:empty::before,
#gpsResult:empty::before{
  content: "Nothing to show yet.";
  display:block;
  text-align:center;
  padding: 18px 10px;
  color: var(--muted);
  font-size: 14px;
  background:#f8fbfb;
  border:1px dashed #b8dcd9;
  border-radius:14px;
}

/* Optional loading shimmer (add .is-loading to container while fetching) */
.is-loading{
  position: relative;
}
.is-loading::after{
  content:"";
  position:absolute; inset:0; border-radius:14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: shimmer 1.1s infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

/* NFC blocks — styled even when toggled on */
#nfc-status{
  text-align:center; margin-top:20px; color: var(--muted); font-size: 14px;
}
#nfc-permission{
  text-align:center;
  background:#f8fbfb; border:1px dashed #b8dcd9; border-radius:14px; padding:16px; margin-top: 14px;
}
#request-nfc{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 14px;
  background: var(--primary); color: #fff; border:1px solid transparent; font-weight:700; cursor:pointer;
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
#request-nfc:hover{ box-shadow: 0 14px 30px rgba(15,23,42,.16); }

#nfc-block-help{
  margin-top: 18px; color: var(--muted);
  background:#fff7f7; border:1px solid #ffe2e2; border-radius:14px; padding:14px;
}

#nfc-ready{
  background:#f8fbfb; border:1px solid #e3eeed; border-radius:14px; padding:16px; margin-top: 12px;
}
#nfc-ready p{ margin: 0 0 10px 0; color:#2b5934; font-weight:600; }
#shared-info{
  list-style:none; padding-left:0; margin:0;
}
#shared-info li{
  padding:8px 10px; border:1px solid #e3eeed; border-radius:12px; margin-bottom:8px;
  background:#ffffff; color: var(--text); font-size: 14px;
}

#nfc-response{ margin-top: 12px; font-size: 14px; color: var(--text); }
#nfc-error{ color: #c62828; margin-top: 12px; }

/* Fake scan button */
#fakeScan{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 14px;
  background: var(--primary-weak); color: var(--primary);
  border:1px solid #cfe7e6; font-weight:700; cursor:pointer;
  box-shadow: 0 2px 10px rgba(15,23,42,.06);
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
#fakeScan:hover{ box-shadow: 0 10px 24px rgba(15,23,42,.14); }

/* Responsive polish */
@media (max-width: 480px){
  .checkin-wrapper{ padding: 18px; }
  .gps-meeting-actions{ gap: 6px; }
  .gps-meeting-actions .btn-checkin,
  .gps-meeting-actions .btn-view{ padding: 9px 12px; font-size: 12.5px; }
}


/* ===== Companion — Phone List (GA Experience Style) ===== */

.meetings-wrapper{
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* Container state */
#phoneList{
  display: grid;
  gap: 12px;
  min-height: 60px;
}
#phoneList > p{ margin: 0; color: var(--muted); }

/* Empty and error states */
#phoneList.is-empty::before{
  content: "No phone entries yet.";
  display: block;
  text-align: center;
  padding: 18px 10px;
  color: var(--muted);
  font-size: 14px;
  background:#f8fbfb;
  border:1px dashed #b8dcd9;
  border-radius:14px;
}
#phoneList.is-error::before{
  content: "Unable to load phone list.";
  display: block;
  text-align: center;
  padding: 18px 10px;
  color: #b42318;
  font-size: 14px;
  background:#fff7f7;
  border:1px solid #ffe2e2;
  border-radius:14px;
}

/* Optional top controls your JS may inject */
.phone-controls{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom: 4px;
}
.phone-controls .input{
  flex:1;
  border:1px solid #d9e7e6; background:#f9fbfb; color:var(--text);
  padding:10px 12px; border-radius:14px; outline:none;
}
.phone-controls .input:focus{ border-color: var(--primary); box-shadow:0 0 0 6px var(--ring) }
.phone-controls .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px; border:1px solid transparent;
  background: var(--primary); color:#fff; font-weight:700; font-size:13px;
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
  cursor:pointer; transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.phone-controls .btn.secondary{ background: var(--primary-weak); color: var(--primary) }

/* Phone cards your JS can render */
.phone-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid #e7ecf6;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  padding: 14px;
}
.phone-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 6px;
}
.phone-name{
  font-size: 16px; font-weight: 800; color:#0e152b;
}
.phone-meta{
  color: var(--muted); font-size: 13px;
}

/* Details row: phone number, clean days, notes */
.phone-details{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top: 6px;
  color: var(--text); font-size: 14px;
}
.phone-pill{
  background:#eaf6f5; color:#256d6b; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
}

/* Call and SMS actions */
.phone-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px;
}
.phone-actions .btn-call,
.phone-actions .btn-sms,
.phone-actions .btn-edit{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px; border:1px solid transparent;
  font-weight:700; font-size:13px; text-decoration:none; cursor:pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.phone-actions .btn-call{ background: var(--primary); color:#fff; box-shadow: 0 2px 10px rgba(15,23,42,.08); }
.phone-actions .btn-sms{ background: var(--primary-weak); color: var(--primary); border-color:#cfe7e6; }
.phone-actions .btn-edit{ background:#f8fbfb; color:#2a5554; border:1px solid #d9e7e6; }

/* Inline admin badge if you expose edit rights */
.phone-admin-badge{
  margin-left: 8px;
  background:#fff4cf; color:#6b4e00; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800;
}

/* Loading shimmer helper: add .is-loading to #phoneList while fetching */
#phoneList.is-loading{ position: relative; }
#phoneList.is-loading::after{
  content:"";
  position:absolute; inset:0; border-radius:14px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: phoneShimmer 1.1s infinite;
}
@keyframes phoneShimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

/* Responsive */
@media (max-width: 480px){
  .meetings-wrapper{ padding: 18px; }
  .phone-actions .btn-call,
  .phone-actions .btn-sms,
  .phone-actions .btn-edit{ padding: 9px 12px; font-size: 12.5px; }
}


/* ===== Companion — Dashboard (GA Experience + Milestones) ===== */

.dashboard-wrapper{
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* Heading and summary */
.dash-heading{
  font-size: 22px;
  font-weight: 800;
  color:#0e152b;
  letter-spacing:.2px;
  margin: 0 0 10px 0;
}
.clean-summary p{
  margin:6px 0;
  font-size:15px;
  color: var(--text);
}

/* Soft rule */
.dashboard-wrapper hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.12), rgba(15,23,42,0));
  margin: 14px 0;
}

/* Breakdown line */
.breakdown-text{
  text-align:center;
  color: var(--muted);
  font-size:14px;
  margin: 4px 0 2px 0;
}

/* ===== Badges ===== */

.badge-label{
  font-size: 14px;
  font-weight: 700;
  color:#2a5554;
  margin: 6px 0 8px 0;
}
.badge-row{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Base badge */
.badge{
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing:.2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Colorful milestone variants (inspired by your original) */
.badge[data-days="30"]  { background:#201a00; color:#ffd46b; border-color:#ffd46b33; }
.badge[data-days="60"]  { background:#071826; color:#8fd3ff; border-color:#8fd3ff33; }
.badge[data-days="90"]  { background:#062216; color:#7ee3b5; border-color:#7ee3b533; }
.badge[data-days="365"] { background:#2b0e12; color:#ff9b9b; border-color:#ff9b9b33; }
.badge[data-days="1825"]{ background:#230c37; color:#d6b0ff; border-color:#d6b0ff33; }
.badge[data-days="3650"]{ background:#0d1a26; color:#a7c9e3; border-color:#a7c9e333; }
.badge[data-days="7300"]{ background:#2a2205; color:#ffe08a; border-color:#ffe08a33; }

/* Optional icon bubble inside badges */
.badge .dot{
  width:8px; height:8px; border-radius:999px; background: currentColor; opacity:.7;
}

/* ===== Daily Quote ===== */

.quote-card{
  text-align:center;
  margin: 8px 0 6px 0;
}
#dailyQuote{
  display: inline-block;
  max-width: 680px;
  padding: 8px 12px;
  border-radius: 14px;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color:#0f172a;
  background: linear-gradient(90deg, rgba(250,217,97,.14), rgba(196,113,237,.10), rgba(18,194,233,.10));
  border: 1px solid #ecdfff;          /* gentle lavender line */
  quotes: "“" "”" "‘" "’";
  position: relative;
}
#dailyQuote::before{
  content: open-quote;
  margin-right: .15em;
  font-size: 1.3em;
  vertical-align: top;
  color: #c471ed;
}
#dailyQuote::after{
  content: close-quote;
  margin-left: .1em;
  font-size: 1.3em;
  vertical-align: bottom;
  color: #c471ed;
}

/* ===== Birthday / Milestone Banner ===== */

#ShowBirthday{
  display:none;
  text-align:center;
  margin-top:20px;
}
#ShowBirthday .banner{
  display:inline-block;
  text-align:left;
  max-width: 720px;
  width: 100%;
  border-radius: 14px;
  padding: 16px 18px;
  color:#0f172a;
  background:
    radial-gradient(540px 180px at 8% 0%, rgba(250,217,97,.28), transparent 60%),
    radial-gradient(540px 180px at 92% 0%, rgba(18,194,233,.22), transparent 60%),
    #ffffff;
  border: 1px solid #e9eef9;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
#ShowBirthday .banner .title{
  font-size: 18px; font-weight: 800; margin: 0 0 6px 0;
}
#ShowBirthday .banner .meta{
  color: var(--muted); font-size: 14px; margin: 0;
}
#ShowBirthday img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin-top: 12px;
  outline: 1px solid rgba(233,236,255,0.5);
}

/* ===== Meetings Today Section ===== */

#meetingTodaySection{
  margin-top: 16px;
  background: #f8fbfb;
  border: 1px solid #e3eeed;
  border-radius: 14px;
  padding: 14px;
}
#meetingTodaySection .meet-today-title{
  font-size: 16px; font-weight: 800; color:#0e152b; margin: 0 0 8px 0;
}
#meetingTodaySection .meet-list{
  display:grid; gap:10px;
}
#meetingTodaySection .meet-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid #e7ecf6;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(15,23,42,.06);
  padding: 12px;
}
#meetingTodaySection .meet-card .row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
#meetingTodaySection .time{ font-weight: 800; color:#0e152b; }
#meetingTodaySection .meta{ color: var(--muted); font-size: 13px; }

/* ===== PWA Section (top hint) ===== */

#pwaSection{
  text-align:center;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}
#pwaSection .pwa-card{
  display:inline-block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background:#f8fbfb;
  border: 1px dashed #b8dcd9;
}

/* ===== Small helpers ===== */

.muted{ color: var(--muted); }
.center{ text-align:center; }

/* ===== Responsive polish ===== */
@media (max-width: 480px){
  .dashboard-wrapper{ padding: 18px; }
  #dailyQuote{ font-size: 1rem; padding: 8px 10px; }
}


/* ===== Companion — Meetings Tab (GA Experience Style) ===== */

.meetings-wrapper{
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* Header */
#meetingsHeader{
  font-size: 22px;
  font-weight: 800;
  color:#0e152b;
  letter-spacing:.2px;
  margin: 0 0 12px 0;
}

/* List container */
#meetingsList{
  display: grid;
  gap: 12px;
  min-height: 60px;
}

/* Optional day grouping your JS may add */
.day-group{
  display: grid;
  gap: 10px;
}
.day-title{
  position: sticky; top: 0;       /* stays visible when list is tall */
  z-index: 1;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid #e7ecf6;
  color:#2a5554;
  font-weight: 800;
  font-size: 13px;
  letter-spacing:.25px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  width: fit-content;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* Meeting card */
.meeting-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid #e7ecf6;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  padding: 14px;
}

/* Layout rows */
.meeting-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.meeting-title{
  font-size: 16px; font-weight: 800; color:#0e152b; margin: 0;
}
.meeting-time{
  font-weight: 800; color:#0e152b; white-space: nowrap;
}
.meeting-meta{
  color: var(--muted); font-size: 13px; margin-top: 2px;
}

.meeting-tags{
  display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px;
}
.meeting-tag{
  background:#eaf6f5; color:#256d6b; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
}

/* Virtual / in-person badges (auto via data attributes if you use them) */
.meeting-card[data-mode="virtual"] .meeting-tag.mode{ background:#eaf0ff; color:#244a9a; }
.meeting-card[data-mode="inperson"] .meeting-tag.mode{ background:#e6faee; color:#256b3b; }

/* Actions */
.meeting-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px;
}
.meeting-actions .btn-primary,
.meeting-actions .btn-secondary,
.meeting-actions .drive-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px; border:1px solid transparent;
  font-weight:700; font-size:13px; text-decoration:none; cursor:pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.meeting-actions .btn-primary{
  background: var(--primary); color:#fff; box-shadow: 0 2px 10px rgba(15,23,42,.08);
}
.meeting-actions .btn-primary:hover{ box-shadow: 0 14px 30px rgba(15,23,42,.16); }

.meeting-actions .btn-secondary{
  background: var(--primary-weak); color: var(--primary);
  border-color:#cfe7e6;
}

/* Keep Drive button green for affordance (matches your earlier UI) */
.meeting-actions .drive-button{
  background-color: #28a745;
  color: #fff;
  border-color: rgba(34,197,94,0.25);
  box-shadow: 0 2px 10px rgba(34,197,94,0.18);
}
.meeting-actions .drive-button:hover{ background-color:#1e7e34; }

/* Empty and error states */
#meetingsList.is-empty::before{
  content: "No upcoming meetings match your filters.";
  display: block;
  text-align: center;
  padding: 18px 10px;
  color: var(--muted);
  font-size: 14px;
  background:#f8fbfb;
  border:1px dashed #b8dcd9;
  border-radius:14px;
}
#meetingsList.is-error::before{
  content: "Unable to load meetings.";
  display: block;
  text-align: center;
  padding: 18px 10px;
  color: #b42318;
  font-size: 14px;
  background:#fff7f7;
  border:1px solid #ffe2e2;
  border-radius:14px;
}

/* Loading shimmer helper — add .is-loading to #meetingsList while fetching */
#meetingsList.is-loading{ position: relative; }
#meetingsList.is-loading::after{
  content:"";
  position:absolute; inset:0; border-radius:14px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: meetingsShimmer 1.1s infinite;
}
@keyframes meetingsShimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

/* Responsive tweaks */
@media (max-width: 520px){
  .meetings-wrapper{ padding: 18px; }
  .meeting-head{ flex-direction: column; align-items:flex-start; gap: 4px; }
  .meeting-time{ font-size: 14px; }
  .meeting-actions .btn-primary,
  .meeting-actions .btn-secondary,
  .meeting-actions .drive-button{ padding: 9px 12px; font-size: 12.5px; }
}


/* ===== Companion — Events Tab (GA Experience Style) ===== */

.events-wrapper{
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.events-wrapper h2{
  font-size: 22px;
  font-weight: 800;
  color:#0e152b;
  letter-spacing:.2px;
  margin: 0 0 12px 0;
}

/* List container */
#eventsList{
  display: grid;
  gap: 12px;
  min-height: 60px;
}

/* ===== Event Card ===== */
.event-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid #e7ecf6;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "date head"
    "date meta"
    "date tags"
    "date actions";
  column-gap: 12px;
  row-gap: 6px;
}

/* Calendar date badge (auto if your JS injects .event-date) */
.event-date{
  grid-area: date;
  align-self: start;
  background:#eef6f5;
  border: 1px solid #d9e7e6;
  color:#2a5554;
  width: 64px;
  border-radius: 12px;
  text-align:center;
  padding: 8px 6px;
  line-height: 1.1;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.event-date .month{ display:block; font-size:12px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; }
.event-date .day{ display:block; font-size:22px; font-weight:900; }
.event-date .dow{ display:block; font-size:11px; font-weight:700; opacity:.75; }

/* Head + meta */
.event-head{ grid-area: head; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.event-title{ font-size: 16px; font-weight: 800; color:#0e152b; margin:0; }
.event-time{ font-weight: 800; color:#0e152b; white-space:nowrap; }

.event-meta{ grid-area: meta; color: var(--muted); font-size: 13px; }

/* Tags */
.event-tags{ grid-area: tags; display:flex; gap:8px; flex-wrap:wrap; margin-top: 2px; }
.event-tag{
  background:#eaf6f5; color:#256d6b; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
}
/* Level accents if you set data-level on .event-card */
.event-card[data-level="local"]   .event-tag.level{ background:#e6faee; color:#256b3b; }
.event-card[data-level="regional"].event-tag, 
.event-card[data-level="regional"] .event-tag.level{ background:#fff4cf; color:#6b4e00; }
.event-card[data-level="global"]  .event-tag.level{ background:#eaf0ff; color:#244a9a; }

/* Mode accents if you set data-mode on .event-card */
.event-card[data-mode="virtual"]  .event-tag.mode{ background:#eaf0ff; color:#244a9a; }
.event-card[data-mode="inperson"] .event-tag.mode{ background:#e6faee; color:#256b3b; }

/* Actions */
.event-actions{
  grid-area: actions;
  display:flex; gap:8px; flex-wrap:wrap; margin-top: 6px;
}
.event-actions .btn-primary,
.event-actions .btn-secondary,
.event-actions .drive-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px; border:1px solid transparent;
  font-weight:700; font-size:13px; text-decoration:none; cursor:pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.event-actions .btn-primary{
  background: var(--primary); color:#fff; box-shadow: 0 2px 10px rgba(15,23,42,.08);
}
.event-actions .btn-primary:hover{ box-shadow: 0 14px 30px rgba(15,23,42,.16); }
.event-actions .btn-secondary{
  background: var(--primary-weak); color: var(--primary);
  border-color:#cfe7e6;
}
.event-actions .drive-button{
  background-color: #28a745; color: #fff; border-color: rgba(34,197,94,0.25);
  box-shadow: 0 2px 10px rgba(34,197,94,0.18);
}
.event-actions .drive-button:hover{ background-color:#1e7e34; }

/* Optional hero image (if your JS adds one) */
.event-image{
  grid-column: 1 / -1;
  order: -1;
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e7ecf6;
}
.event-image img{ width: 100%; display:block; }

/* Empty / error messaging */
#noEventsMessage{
  margin-top: 16px !important;
  text-align: center !important;
  color: var(--muted) !important;
}
#eventsList.is-empty::before{
  content: "No events found. Check in at a meeting to refresh your event list.";
  display: block;
  text-align: center;
  padding: 18px 10px;
  color: var(--muted);
  font-size: 14px;
  background:#f8fbfb;
  border:1px dashed #b8dcd9;
  border-radius:14px;
}
#eventsList.is-error::before{
  content: "Unable to load events.";
  display: block;
  text-align: center;
  padding: 18px 10px;
  color: #b42318;
  font-size: 14px;
  background:#fff7f7;
  border:1px solid #ffe2e2;
  border-radius:14px;
}

/* Loading shimmer — add .is-loading to #eventsList while fetching */
#eventsList.is-loading{ position: relative; }
#eventsList.is-loading::after{
  content:"";
  position:absolute; inset:0; border-radius:14px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: eventsShimmer 1.1s infinite;
}
@keyframes eventsShimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

/* Responsive */
@media (max-width: 560px){
  .events-wrapper{ padding: 18px; }
  .event-card{
    grid-template-columns: 1fr;            /* stack the date badge on small screens */
    grid-template-areas:
      "head"
      "meta"
      "tags"
      "actions";
  }
  .event-date{ width: 100%; display:flex; align-items:center; justify-content: center; padding: 10px; }
  .event-head{ flex-direction: column; align-items:flex-start; gap: 4px; }
  .event-time{ font-size: 14px; }
  .event-actions .btn-primary,
  .event-actions .btn-secondary,
  .event-actions .drive-button{ padding: 9px 12px; font-size: 12.5px; }
}


/* ===== Meetings (CSS tuned for your current renderMeetings output) ===== */

/* Wrapper stays consistent with GA cards */
.meetings-wrapper{
  background: var(--card);
  border: 1px solid #e7ecf6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* List container */
#meetingsList{
  display: grid;
  gap: 12px;
  min-height: 60px;
}

/* Card shell */
#meetingsList .meeting-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid #e7ecf6;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  padding: 14px;
}

/* Title */
#meetingsList .meeting-card > h3{
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 800;
  color: #0e152b;
}

/* Label/value rows (your <p><strong>Label:</strong> value</p>) */
#meetingsList .meeting-card > p{
  display: grid;
  grid-template-columns: 120px 1fr;       /* label / value */
  gap: 10px;
  align-items: start;
  margin: 6px 0;
  font-size: 14px;
  color: var(--text);
}

/* Label pill */
#meetingsList .meeting-card > p > strong{
  display: inline-block;
  background:#eaf6f5;
  color:#256d6b;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Values wrap nicely */
#meetingsList .meeting-card > p > strong + *{
  color: var(--text);
  min-width: 0;
  word-wrap: break-word;
}

/* Drive button (your existing class) */
#meetingsList .meeting-card .drive-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background-color: #28a745;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(34,197,94,0.25);
  box-shadow: 0 2px 10px rgba(34,197,94,0.18);
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
#meetingsList .meeting-card .drive-button:hover{
  background-color:#1e7e34;
}

/* Empty & error text you set via innerHTML */
#meetingsList > p{
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 12px 0;
}

/* Optional: compact card when many items */
@media (min-width: 860px){
  #meetingsList .meeting-card{
    padding: 16px;
  }
  #meetingsList .meeting-card > p{
    grid-template-columns: 140px 1fr;
  }
}

/* Small screens: stack labels above values for readability */
@media (max-width: 460px){
  #meetingsList .meeting-card > p{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  #meetingsList .meeting-card > p > strong{
    display: inline-flex;
    width: fit-content;
  }
}


/* === Mobile inline labels for meeting cards === */
@media (max-width: 520px){
  /* Make each label/value paragraph a flex row that can wrap */
  #meetingsList .meeting-card > p{
    display: flex;                 /* inline row */
    align-items: baseline;
    gap: 8px;
    margin: 6px 0;
    grid-template-columns: none;   /* cancels the desktop grid */
    flex-wrap: wrap;               /* long values wrap under, not squish */
  }

  /* Smaller label pill so it doesn’t dominate on mobile */
  #meetingsList .meeting-card > p > strong{
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 999px;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Tighter card + comfy title */
  #meetingsList .meeting-card{
    padding: 12px;
  }
  #meetingsList .meeting-card > h3{
    font-size: 16px;
    margin-bottom: 6px;
  }

  /* Make the Map/Navigate button full-width on narrow screens */
  #meetingsList .meeting-card .drive-button{
    width: 60%;
    justify-content: center;
  }
}

/* Keep the desktop/tablet grid look you already have */
@media (min-width: 521px){
  #meetingsList .meeting-card > p{
    display: grid;
    grid-template-columns: 140px 1fr; /* label | value */
    gap: 10px;
  }
}

/* === Mobile header: center logo + title on one line === */
@media (max-width: 5000px){
  header,
  .app-header{
    display: flex;                 /* ensure row layout */
    align-items: center;           /* vertical centering */
    justify-content: center;       /* center as a group */
    gap: 10px;                     /* space between logo + text */
    text-align: center;            /* keep text centered if it wraps */
    padding: 12px 14px;            /* comfy mobile padding */
  }

  /* If your header had left/right utility zones, hide them on mobile */
  .header-left,
  .header-right{
    display: none !important;
  }

  /* Logo size that fits phones nicely */
  header img,
  .app-header img{
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
  }

/* === PWA Exit button: fix to top-right of the viewport === */
.exit-button{
  position: fixed !important;         /* ignore wrapper flow */
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 2147483647;                /* above headers/overlays */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e8edf7;
  background: rgba(255,255,255,.95);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Only show in PWA/standalone */
@media (display-mode: standalone){
  .exit-button{ display: inline-flex; }
}

/* Tiny phones */
@media (max-width: 380px){
  .exit-button{ padding: 8px 10px; }
}