/* ============================================================
   TechAge MissionSuite — shared components (public site + admin)
   ============================================================ */

/* ---------- Signature: Dispatch Stamp ---------- */
.ms-stamp{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px;
  text-transform:uppercase; font-weight:600; padding:4px 10px 4px 8px; border-radius:20px; border:1.5px dashed currentColor; transform:rotate(-2deg); }
.ms-stamp i{ font-size:9px; }
.ms-stamp.active{ color:var(--ms-canopy); background:var(--ms-canopy-soft); }
.ms-stamp.new{ color:var(--ms-amber-dark); background:var(--ms-amber-soft); }
.ms-stamp.pending{ color:var(--ms-amber-dark); background:var(--ms-amber-soft); }
.ms-stamp.off{ color:var(--ms-slate); background:#EEF0EC; }
.ms-stamp.danger, .ms-stamp.rejected{ color:var(--ms-red); background:var(--ms-red-soft); }
.ms-stamp.published{ color:var(--ms-canopy); background:var(--ms-canopy-soft); }
.ms-stamp.featured{ color:var(--ms-navy); background:#E9EEF2; }

/* ---------- Admin CRUD list chrome: KPI tiles, filter bar, search ---------- */
.ms-kpi{ background:var(--ms-surface); border:1px solid var(--ms-border); border-radius:12px; padding:18px 20px; position:relative; overflow:hidden; }
.ms-kpi::after{ content:""; position:absolute; right:-26px; top:-26px; width:80px; height:80px; border-radius:50%; border:1px dashed var(--ms-border); }
.ms-kpi .label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ms-slate); }
.ms-kpi .value{ font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--ms-navy); margin:6px 0 4px; }
.ms-kpi .delta{ font-size:12px; font-weight:600; } .ms-kpi .delta.up{ color:var(--ms-canopy); } .ms-kpi .delta.down{ color:var(--ms-red); }
.ms-kpi .icon{ position:absolute; right:16px; top:16px; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--ms-canopy-soft); color:var(--ms-canopy); font-size:14px; }
.ms-filterbar{ background:var(--ms-surface); border:1px solid var(--ms-border); border-radius:12px; padding:14px 18px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px; }
.ms-search{ position:relative; flex:1; min-width:220px; }
.ms-search input{ padding-left:32px; border-color:var(--ms-border); font-size:13px; }
.ms-search i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ms-slate); font-size:12px; }
.cat-badge{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.5px; text-transform:uppercase; background:var(--ms-canopy-soft); color:var(--ms-canopy); padding:3px 9px; border-radius:20px; }
.dept-badge{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.5px; text-transform:uppercase; background:#E9EEF2; color:var(--ms-navy); padding:3px 9px; border-radius:20px; }
.faq-item{ display:flex; align-items:flex-start; gap:14px; padding:16px 20px; border-bottom:1px solid var(--ms-border); }
.faq-item:last-child{ border-bottom:none; }
.faq-item:hover{ background:#FCFAF4; }
.faq-item .body{ flex:1; min-width:0; }
.faq-item .q{ font-weight:600; font-size:13.5px; color:var(--ms-ink); margin-bottom:4px; }
.faq-item .a{ font-size:12.5px; color:var(--ms-slate); }
.faq-item .actions{ display:flex; gap:6px; align-items:center; flex-shrink:0; }
.btn-ms-success{ background:transparent; border:1px solid var(--ms-canopy); color:var(--ms-canopy); font-weight:600; font-size:12px; padding:6px 10px; border-radius:7px; }
.btn-ms-success:hover{ background:var(--ms-canopy); color:#fff; }

/* ---------- Panels / tables (admin CRUD screens) ---------- */
.ms-panel{ background:var(--ms-surface); border:1px solid var(--ms-border); border-radius:12px; overflow:hidden; }
.ms-panel-head{ padding:16px 20px; border-bottom:1px solid var(--ms-border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.ms-panel-head h2{ font-family:var(--font-display); font-size:16.5px; font-weight:600; margin:0; color:var(--ms-navy); }
.ms-panel-head .hint{ font-size:12px; color:var(--ms-slate); }
.ms-panel-body{ padding:22px; }

.ms-table{ width:100%; border-collapse:collapse; font-size:13px; }
.ms-table thead th{ font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ms-slate);
  font-weight:600; padding:10px 16px; text-align:left; background:#FBF9F3; border-bottom:1px solid var(--ms-border); }
.ms-table tbody td{ padding:11px 16px; border-bottom:1px solid var(--ms-border); vertical-align:middle; }
.ms-table tbody tr:last-child td{ border-bottom:none; }
.ms-code{ font-family:var(--font-mono); font-size:12px; color:var(--ms-slate); }
.role-badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; background:#E9EEF2; color:var(--ms-navy); padding:3px 9px; border-radius:6px; }
.ms-person{ display:flex; align-items:center; gap:10px; }
.ms-person .ph{ width:36px; height:36px; border-radius:50%; flex-shrink:0; background:var(--ms-parchment); border:1px solid var(--ms-border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; color:var(--ms-navy); font-size:12.5px; }
.ms-person .nm{ font-weight:600; color:var(--ms-ink); font-size:13.5px; } .ms-person .fd{ font-size:11.5px; color:var(--ms-slate); }
.ms-progress{ height:6px; border-radius:20px; background:var(--ms-border); width:80px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:6px; }
.ms-progress span{ display:block; height:100%; background:var(--ms-amber); }
.ms-stamp.furlough{ color:var(--ms-slate); background:#EEF0EC; }
.ms-stamp.closed{ color:var(--ms-red); background:var(--ms-red-soft); }
.ms-stamp.upcoming{ color:var(--ms-canopy); background:var(--ms-canopy-soft); }
.ms-stamp.open, .ms-stamp.planning{ color:var(--ms-amber-dark); background:var(--ms-amber-soft); }
.ms-stamp.urgent{ color:var(--ms-red); background:var(--ms-red-soft); }
.milestone-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--ms-border); font-size:13px; }
.milestone-row:last-child{ border-bottom:none; }
.milestone-row i.fa-circle-check{ color:var(--ms-canopy); }
.milestone-row i.fa-circle{ color:var(--ms-border); }
.nav-tabs .nav-link{ font-size:13px; color:var(--ms-slate); border:none; border-bottom:2px solid transparent; }
.nav-tabs .nav-link.active{ color:var(--ms-amber-dark); border-bottom:2px solid var(--ms-amber); background:transparent; }

/* ---------- Key reveal / danger zone ---------- */
.key-copy{ cursor:pointer; color:var(--ms-slate); }
.key-copy:hover{ color:var(--ms-amber-dark); }
.danger-zone{ border:1px dashed var(--ms-red); background:var(--ms-red-soft); border-radius:12px; padding:18px 20px; }
.danger-zone h6{ color:var(--ms-red); font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }

/* ---------- Modules (feature-flag cards) ---------- */
.module-tier-section{ margin-bottom:26px; } .module-tier-section:last-of-type{ margin-bottom:16px; }
.module-tier-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--ms-border); }
.module-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.module-card{ display:flex; align-items:flex-start; gap:12px; border:1px solid var(--ms-border); border-radius:12px; padding:14px 16px;
  background:var(--ms-surface); transition:border-color .15s ease, background .15s ease; }
.module-card:hover{ border-color:var(--ms-amber); }
.module-card.is-off{ background:var(--ms-parchment); }
.module-card.is-off .module-card-icon{ background:#EEF0EC; color:var(--ms-slate); }
.module-card.is-off .module-card-title,
.module-card.is-off .module-card-desc{ color:var(--ms-slate); }
.module-card-icon{ width:38px; height:38px; border-radius:9px; background:var(--ms-amber-soft); color:var(--ms-amber-dark);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.module-card-body{ flex:1; min-width:0; }
.module-card-title{ font-weight:600; font-size:13.5px; color:var(--ms-ink); margin-bottom:2px; }
.module-card-desc{ font-size:11.5px; color:var(--ms-slate); line-height:1.4; }
.module-card-switch{ flex-shrink:0; margin:2px 0 0; }
.module-card.is-locked{ background:var(--ms-parchment); border-style:dashed; cursor:not-allowed; }
.module-card.is-locked .module-card-icon{ background:#EEF0EC; color:var(--ms-slate); }
.module-card.is-locked .module-card-title{ color:var(--ms-slate); }
.module-card.is-locked .module-card-desc{ color:var(--ms-slate); font-style:italic; }
.module-card.is-locked:hover{ border-color:var(--ms-border); }
@media (max-width: 767px){ .module-grid{ grid-template-columns:1fr; } }

/* ---------- Gateway card ---------- */
.gw-card{ border:1px solid var(--ms-border); border-radius:12px; padding:18px 20px; margin-bottom:14px; }
.gw-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gw-logo{ width:38px; height:38px; border-radius:9px; background:var(--ms-parchment); border:1px solid var(--ms-border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--ms-navy); font-size:13px; }
.gw-title{ font-weight:600; font-size:14.5px; color:var(--ms-ink); }
.gw-sub{ font-size:11.5px; color:var(--ms-slate); font-family:var(--font-mono); }
.gw-body{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--ms-border); display:none; }
.gw-body.show{ display:block; }

/* ---------- Skeleton loading ---------- */
.sk{ position:relative; overflow:hidden; background:#ECE7D8; border-radius:6px; }
.sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:sk-sweep 1.3s infinite; }
@keyframes sk-sweep{ 100%{ transform:translateX(100%); } }
.sk-title{ height:16px; width:60%; margin-bottom:8px; }
.sk-text{ height:11px; width:85%; margin-bottom:6px; }
.sk-photo{ height:170px; width:100%; border-radius:10px 10px 0 0; }
.sk-field{ height:36px; border-radius:8px; margin-bottom:18px; }
.sk-label{ height:10px; width:35%; margin-bottom:8px; }

/* ---------- Overlay loading ---------- */
.ms-overlay{ position:fixed; inset:0; background:rgba(10,25,41,0.55); backdrop-filter:blur(2px); display:none;
  align-items:center; justify-content:center; z-index:2000; }
.ms-overlay.show{ display:flex; }
.ms-overlay-card{ background:var(--ms-navy); border:1px solid rgba(201,122,43,0.4); border-radius:14px; padding:30px 38px;
  display:flex; flex-direction:column; align-items:center; gap:14px; color:#EDE7D8; min-width:240px; }
.ms-compass{ width:46px; height:46px; border:2px solid var(--ms-amber); border-radius:50%; position:relative; animation:compass-spin 1.4s linear infinite; }
.ms-compass::before{ content:""; position:absolute; left:50%; top:6%; width:0; height:0; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:14px solid var(--ms-amber); }
.ms-compass::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; background:#EDE7D8; border-radius:50%; transform:translate(-50%,-50%); }
@keyframes compass-spin{ 100%{ transform:rotate(360deg); } }
.ms-overlay-text{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:#B9C7CE; text-align:center; }

#toast-container > .toast-success{ background-color:var(--ms-canopy) !important; }
#toast-container > .toast-error{ background-color:var(--ms-red) !important; }
#toast-container > .toast-info{ background-color:var(--ms-navy) !important; }

/* ---------- Milestone 5: Sermons/Media, Publications, Prayer Centre ---------- */
.ms-stamp.draft{ color:var(--ms-amber-dark); background:var(--ms-amber-soft); }
.ms-stamp.archived{ color:var(--ms-slate); background:#EEF0EC; }
.ms-stamp.praying{ color:var(--ms-navy); background:#E9EEF2; }
.ms-stamp.answered{ color:var(--ms-canopy); background:var(--ms-canopy-soft); }

.upload-drop{ border:1.5px dashed var(--ms-border); border-radius:12px; padding:22px; text-align:center; color:var(--ms-slate); font-size:13px; background:var(--ms-parchment); cursor:pointer; }
.upload-drop i{ font-size:20px; color:var(--ms-amber); margin-bottom:6px; display:block; }
.upload-drop.has-file{ border-style:solid; border-color:var(--ms-amber); color:var(--ms-ink); }

.media-card{ background:var(--ms-navy); border-radius:14px; overflow:hidden; height:100%; position:relative; color:#EDE7D8; transition:transform .15s,box-shadow .15s; }
.media-card:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(15,36,56,0.18); }
.media-card .thumb{ height:120px; background:linear-gradient(135deg, var(--ms-navy-raise), var(--ms-navy-deep)); display:flex; align-items:center; justify-content:center; position:relative; }
.media-card .play{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ms-amber); color:var(--ms-amber); display:flex; align-items:center; justify-content:center; font-size:15px; background:rgba(10,25,41,0.4); cursor:pointer; }
.media-card .type-badge{ position:absolute; top:10px; right:10px; font-family:var(--font-mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; background:rgba(201,122,43,0.9); color:#fff; padding:3px 8px; border-radius:20px; }
.media-card .dur{ position:absolute; bottom:8px; right:10px; font-family:var(--font-mono); font-size:10px; color:#B9C7CE; }
.media-card .body{ padding:16px 18px; }
.media-card .cat{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ms-amber); margin-bottom:4px; }
.media-card h5{ font-family:var(--font-display); font-size:15px; color:#F3EFE4; margin-bottom:4px; }
.media-card .meta{ font-family:var(--font-mono); font-size:10.5px; color:#8FA0AA; margin-bottom:12px; }
.media-card .actions{ display:flex; gap:6px; }
.media-card .actions .btn{ flex:1; font-size:11px; padding:6px 8px; border-radius:6px; }
.media-card .btn-light-outline{ background:transparent; border:1px solid rgba(255,255,255,0.2); color:#EDE7D8; }
.media-card .btn-light-outline:hover{ background:rgba(255,255,255,0.08); color:#EDE7D8; }
.media-card .btn-light-danger{ background:transparent; border:1px solid rgba(180,67,46,0.6); color:#E29383; }
.media-card .btn-light-danger:hover{ background:var(--ms-red); color:#fff; }

.pub-card{ background:var(--ms-surface); border:1px solid var(--ms-border); border-radius:14px; overflow:hidden; height:100%; transition:transform .15s,box-shadow .15s; }
.pub-card:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(15,36,56,0.07); }
.pub-cover{ height:110px; background:linear-gradient(135deg, var(--ms-navy), var(--ms-navy-raise)); display:flex; align-items:center; justify-content:center; position:relative; background-size:cover; background-position:center; }
.pub-cover i{ font-size:28px; color:rgba(255,255,255,0.5); }
.pub-cover .cat-badge{ position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; background:rgba(201,122,43,0.9); color:#fff; padding:3px 8px; border-radius:20px; }
.pub-body{ padding:16px 18px; }
.pub-body h5{ font-family:var(--font-display); font-size:15.5px; color:var(--ms-navy); margin-bottom:4px; }
.pub-body .meta{ font-size:11.5px; color:var(--ms-slate); margin-bottom:10px; }
.pub-body .stats{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:10.5px; color:var(--ms-slate); margin-bottom:12px; }
.pub-body .actions{ display:flex; gap:6px; }
.pub-body .actions .btn{ flex:1; font-size:11px; padding:6px 8px; }

.prayer-row{ display:flex; gap:14px; padding:16px 20px; border-bottom:1px solid var(--ms-border); align-items:flex-start; }
.prayer-row:last-child{ border-bottom:none; }
.prayer-row:hover{ background:#FCFAF4; }
.prayer-row .ph{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background:var(--ms-parchment); border:1px solid var(--ms-border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; color:var(--ms-navy); font-size:13px; }
.prayer-row .body{ flex:1; min-width:0; }
.prayer-row .top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.prayer-row .nm{ font-weight:600; font-size:13.5px; color:var(--ms-ink); }
.prayer-row .dt{ font-family:var(--font-mono); font-size:11px; color:var(--ms-slate); }
.prayer-row .cat{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--ms-canopy); background:var(--ms-canopy-soft); padding:2px 8px; border-radius:20px; }
.prayer-row .excerpt{ font-size:13px; color:var(--ms-slate); margin-bottom:8px; }
.prayer-row .actions{ display:flex; gap:6px; flex-wrap:wrap; }
.prayer-row .actions .btn{ font-size:11.5px; padding:5px 10px; }
.private-flag{ font-size:11px; color:var(--ms-red); font-family:var(--font-mono); }

.wall-tabs{ display:flex; gap:4px; background:var(--ms-surface); border:1px solid var(--ms-border); border-radius:10px; padding:4px; margin-bottom:24px; width:fit-content; }
.wall-tabs button{ border:none; background:transparent; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; padding:9px 20px; border-radius:7px; color:var(--ms-slate); font-weight:600; cursor:pointer; }
.wall-tabs button.active{ background:var(--ms-amber); color:#fff; }
.wall-card{ background:var(--ms-surface); border:1px solid var(--ms-border); border-radius:14px; padding:20px; height:100%; }
.wall-card .top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wall-card .ph{ width:34px; height:34px; border-radius:50%; background:var(--ms-parchment); border:1px solid var(--ms-border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; color:var(--ms-navy); font-size:12px; }
.wall-card .nm{ font-weight:600; font-size:13.5px; } .wall-card .dt{ font-family:var(--font-mono); font-size:10.5px; color:var(--ms-slate); }
.wall-card p{ font-size:13px; color:var(--ms-slate); margin:0 0 12px; }
.wall-card .pray-btn{ font-size:12px; font-weight:600; color:var(--ms-amber-dark); background:var(--ms-amber-soft); border:none; padding:6px 12px; border-radius:20px; cursor:pointer; }
.wall-card .pray-btn i{ margin-right:5px; } .wall-card .pray-btn.prayed{ background:var(--ms-canopy-soft); color:var(--ms-canopy); cursor:default; }

.player-modal audio, .player-modal video{ width:100%; border-radius:10px; background:#000; }

/* ---------- Milestone 6: Donations, Volunteers ---------- */
.ms-stamp.inactive{ color:var(--ms-slate); background:#EEF0EC; }
.give-card .freq-btn:focus, .give-card .amt-btn:focus{ outline:none; }

/* ---------- Dashboard: Quick Action tiles ---------- */
.qa-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.qa-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  background:var(--ms-parchment); border:1px solid var(--ms-border); border-radius:12px; padding:20px 12px;
  color:var(--ms-navy); font-size:12.5px; font-weight:600; text-decoration:none; transition:transform .15s,box-shadow .15s,border-color .15s; }
.qa-tile i{ font-size:20px; color:var(--ms-amber); }
.qa-tile:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(15,36,56,0.1); border-color:var(--ms-amber); color:var(--ms-navy); }