/* ========================================================
   CAMPAIGN 27 COLOUR SYSTEM START
   ========================================================= */

:root {
  --c27-red: #c40f3a;
  --c27-pink: #E5007D;
  --c27-green: #3BAA35;
  --c27-blue: #1D70B8;
  --c27-orange: #F39206;
  --c27-purple: #662381;
  --c27-black: #121212;
  --c27-white: #FFFFFF;

  --c27-red-soft: #fde8ee;
  --c27-pink-soft: #fde6f3;
  --c27-green-soft: #e8f7e7;
  --c27-blue-soft: #e8f2fa;
  --c27-orange-soft: #fff1df;
  --c27-purple-soft: #f1e7f5;

  --c27-grey-50: #fbfbfb;
  --c27-grey-75: #f9f9f9;
  --c27-grey-100: #f3f3f3;
  --c27-grey-150: #f1f1f1;
  --c27-grey-200: #e8e8e8;
  --c27-grey-250: #ddd;
  --c27-grey-300: #d8d8d8;
  --c27-grey-350: #d0d0d0;
  --c27-grey-500: #777;
  --c27-grey-600: #666;
  --c27-grey-700: #555;
  --c27-grey-800: #333;
}

/* =========================================================
   CAMPAIGN 27 COLOUR SYSTEM END
   ========================================================= */


/* =========================================================
   GLOBAL / BASE START
   ========================================================= */

body {
  font-family: 'Poppins', sans-serif;
  padding: 0 20px 20px;
  margin: 0;
  background: var(--c27-white);
  color: var(--c27-black);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

h1 {
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 22px;
  line-height: 1.1;
}

button {
  background: var(--c27-red);
  color: var(--c27-white);
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 19px;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  min-height: 54px;
}

input,
textarea,
select {
  width: 100%;
  padding: 11px 13px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  border-radius: 12px;
  border: 1px solid var(--c27-grey-350);
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  margin: 6px 0 14px;
  display: block;
}

textarea {
  height: 5.2em;
  resize: none;
}

.label {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
}

/* =========================================================
   GLOBAL / BASE END
   ========================================================= */



/* =========================================================
   LOADING SCREEN START
   ========================================================= */

#loadingScreen {
  position: fixed;

  top: 124px;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 1100;

  background: var(--c27-white);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

#loadingScreen.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

#loadingBackground {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 60px;
  padding-right: 60px;

  box-sizing: border-box;

  opacity: 0.18;
}

#loadingBackground svg {
  width: auto;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  display: block;
}

/* Preserve original SVG colours */
#loadingBackground svg,
#loadingBackground svg * {
  stroke: initial;
}

#loadingBackground svg .st0,
#loadingBackground svg .st1 {
  fill: var(--c27-black) !important;
}

#loadingBackground svg .st2 {
  fill: var(--c27-white) !important;
}

#loadingBackground svg .st3 {
  fill: var(--c27-red) !important;
}

#loadingSpinner {
  position: relative;
  z-index: 2;

  width: 72px;
  height: 72px;

  border-radius: 50%;

  border: 8px solid rgba(196,15,58,0.18);
  border-top-color: var(--c27-red);

  animation: loadingSpin .8s linear infinite;
}

@keyframes loadingSpin {
  to {
    transform: rotate(360deg);
  }
}



/* =========================================================
   LOADING SCREEN END
   ========================================================= */


/* =========================================================
   TOP BAR START
   ========================================================= */

#topBar {
  position: sticky;
  top: 0;
  z-index: 1200;

  background: var(--c27-red);
  color: var(--c27-white);

  height: 124px;
  width: calc(100% + 40px);

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 0 24px;
  margin: 0 -20px 20px -20px;

  box-sizing: border-box;

  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

#backButton,
#menuButton {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;

  color: var(--c27-white);

  min-width: 74px;
  width: 74px;
  min-height: 74px;
  height: 74px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
}

#backButton {
  font-size: 46px;
  font-weight: 700;
}

#menuButton {
  font-size: 34px;
  font-weight: 800;
}

#backButton.hidden {
  visibility: hidden;
}

#appTitle {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  min-width: 0;

  text-align: center;

  font-size: 44px;
  font-weight: 900;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#appTitle span {
  display: block;
  white-space: nowrap;
}

#headerLogo {
  height: 46px;
  max-width: 220px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  flex-shrink: 1;
}

#headerLogo svg {
  height: 46px;
  width: auto;
  max-width: 100%;

  display: block;
}



/* =========================================================
   TOP BAR END
   ========================================================= */


/* =========================================================
   HAMBURGER MENU START
   ========================================================= */

.public-view .organiser-only {
  display: none !important;
}

#menuOverlay {
  position: fixed;
  top: 104px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;

  background: rgba(0,0,0,0.35);

  opacity: 0;
  pointer-events: none;

  transition: opacity .2s ease;
}

#mainMenu {
  position: fixed;
  top: 104px;
  right: 0;
  z-index: 1101;

  width: min(72vw, 320px);
  height: calc(100vh - 104px);

  background: var(--c27-red);
  color: var(--c27-white);

  box-sizing: border-box;

  transform: translateX(105%);
  transition: transform .22s ease;

  box-shadow: -8px 0 28px rgba(0,0,0,0.26);
}

body.menu-open #menuOverlay {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open #mainMenu {
  transform: translateX(0);
}

.main-menu-title {
  display: none;
}

.main-menu-option {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 22px 24px;

  background: transparent;
  color: rgba(255,255,255,0.82);

  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.28);
  border-radius: 0;

  box-shadow: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  text-align: left;

  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
}

.main-menu-option.active {
  background: rgba(255,255,255,0.18);
  color: var(--c27-white);

  border-left: 6px solid var(--c27-white);

  padding-left: 18px;

  font-weight: 800;
}

.main-menu-option:hover {
  background: rgba(255,255,255,0.08);
  color: var(--c27-white);
}

.main-menu-option span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.main-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.28);
  margin: 0;
}

.main-menu-option.disabled {
  opacity: .6;
  cursor: not-allowed;
}



/* =========================================================
   HAMBURGER MENU END
   ========================================================= */


/* =========================================================
   LIST VIEW / MONTH SECTIONS START
   ========================================================= */

#cards {
  display: block;
}

.month-section {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );
  border: 1px solid var(--c27-grey-300);
  border-radius: 20px;
  padding: 18px 14px;
  margin: 0 0 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.month-title {
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
  margin: 0 0 18px;
}

.month-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.week-header {
  border: none;
  padding: 0;
  margin: 0 0 4px;
  font-size: 21px;
  line-height: 1.25;
}

.week-header strong {
  display: block;
  font-weight: 800;
}

.week-header div {
  font-size: 20px;
  font-weight: 400;
  margin-top: 3px;
}

/* =========================================================
   LIST VIEW / MONTH SECTIONS END
   ========================================================= */


/* =========================================================
   EVENT CARDS START
   ========================================================= */

.card {
  color: var(--c27-white);
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 3px 7px rgba(0,0,0,0.16);
  cursor: pointer;
}

.event-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  border-radius: 18px;
  padding: 18px 54px 18px 18px;
  color: var(--c27-white);
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 3px 7px rgba(0,0,0,0.18);
  cursor: pointer;
}

.event-complete-card {
  background: linear-gradient(
    to bottom,
    #55bf50 0%,
    var(--c27-green) 100%
  );
  border-color: var(--c27-green);
}

.event-incomplete-card {
  background: linear-gradient(
    to bottom,
    #f8aa3d 0%,
    var(--c27-orange) 100%
  );
  border-color: var(--c27-orange);
}

.event-date-block {
  background: linear-gradient(
    to bottom,
    var(--c27-white) 0%,
    var(--c27-grey-100) 100%
  );
  color: inherit;
  min-width: 84px;
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 4px rgba(0,0,0,0.10);
}

.event-complete-card .event-date-block {
  color: var(--c27-green);
}

.event-incomplete-card .event-date-block {
  color: var(--c27-orange);
}

.event-date-day {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.event-date-number {
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
}

.event-date-month {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.event-card-main {
  flex: 1;
  min-width: 0;
}

.event-card-main h2,
.card h2 {
  font-size: 25px;
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 10px;
}

.event-meta-row,
.event-bottom-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
}

.event-bottom-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );
  border: 1px solid var(--c27-grey-300);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.event-icon,
.activity-pill,
.rsvp-pill,
.sent-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.event-icon svg,
.activity-pill svg,
.rsvp-pill svg,
.sent-status svg,
.event-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.meta-divider {
  opacity: .6;
}

/* =========================================================
   SHARED GLASS STATUS PILLS START
   ========================================================= */

.activity-pill,
.rsvp-pill,
.sent-status,
.detail-status-pills .activity-pill,
.detail-status-pills .rsvp-pill,
.detail-status-pills .sent-status {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  box-sizing: border-box;

  border-radius: 9999px;
  border: 1px solid rgba(92, 100, 110, 0.28);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 2px rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.10);
}

.activity-pill::before,
.rsvp-pill::before,
.sent-status::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 8px;
  right: 8px;
  height: 45%;
  border-radius: 9999px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.62),
    rgba(255,255,255,0)
  );
  pointer-events: none;
}

.activity-pill {
  background: var(--c27-green-soft);
  color: var(--c27-green);
}

.rsvp-pill {
  background: var(--c27-blue-soft);
  color: var(--c27-blue);
}

.sent-status {
  color: var(--c27-white);
}

/* COMPLETE */
.sent-yes {
  background: var(--c27-green);
}

/* NOT YET DUE */
.sent-off,
.sent-no {
  background: #8c939c;
}

/* WARNING */
.sent-warning {
  background: var(--c27-orange);
}

/* OVERDUE / URGENT */
.sent-urgent {
  background: var(--c27-red);
}

.detail-activity-hidden {
  display: none !important;
}

/* =========================================================
   SHARED GLASS STATUS PILLS END
   ========================================================= */

.event-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c27-white);
}

.event-arrow svg {
  width: 32px;
  height: 32px;
  stroke-width: 3;
}

/* =========================================================
   EVENT CARDS END
   ========================================================= */


/* =========================================================
   DETAIL SCREEN CSS START
   ========================================================= */

#detailView {
  display: none;
  background: var(--c27-white);
}

#detailContent {
  max-width: 1000px;
  margin: 0 auto;
}

/* shared subtle panel outline */
.detail-status-pills,
.detail-info-pill,
.detail-card,
.detail-map,
.copy-code-card,
.rsvp-row {
  border: 1px solid var(--c27-grey-300);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

/* subtle light steel panel effect */
.detail-status-pills,
.detail-info-pill,
.detail-card {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );
}

.detail-status-pills {
  position: sticky;
  top: 105px;
  z-index: 100;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: -8px;
  padding: 12px;
  overflow-x: auto;
  border-radius: 12px;

  background-clip: padding-box;
  backdrop-filter: blur(6px);
}

.detail-main-title {
  margin-top: 26px;
  margin-bottom: 22px;
}

.detail-status-pills svg,
.detail-info-pill svg,
.detail-card-title svg,
.green-action-button svg,
.detail-action-buttons svg,
.copy-code-card svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.detail-info-pill {
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 10px;
  font-weight: 200;
}

.detail-location-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
  align-items: stretch;
}

.detail-map {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: 18px;
  display: block;
  object-fit: cover;
}

.detail-card {
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}

.detail-location-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 12px;
}

.detail-location-block + .detail-location-block {
  border-top: 1px solid var(--c27-grey-250);
  padding-top: 10px;
}

/* =========================================================
   DETAIL ROAD GROUPS START
   ========================================================= */

.detail-road-groups-panel {
  margin: 0 0 24px;
}

.detail-road-groups-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================================
   DETAIL ROAD GROUPS END
   ========================================================= */

.detail-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}

.detail-card-title svg {
  color: var(--c27-black);
}

.detail-card p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
}

.organiser-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}

.organiser-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--c27-red);
  color: var(--c27-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
}

.organiser-label {
  color: var(--c27-green);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.organiser-name {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

.organiser-phone {
  font-size: 18px;
  margin-top: 4px;
}

.organiser-actions {
  display: flex;
  gap: 14px;
}

.green-action-button {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;

  padding: 0;
  border-radius: 50%;

  background: var(--c27-green);
  color: var(--c27-white);
  border: 1px solid var(--c27-green);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  font-size: 0;
  line-height: 0;
  text-decoration: none;
  text-transform: uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.16);
}


.green-action-button svg {
  width: 21px;
  height: 21px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Campaign App Access */
.campaign-app-card {
  background: var(--c27-orange-soft);
  border: 1px solid #f0d1a5;
}

.amber-title {
  color: var(--c27-orange);
}

.amber-title svg {
  color: var(--c27-orange);
}

.copy-code-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.copy-code-card {
  border-color: #f0d1a5;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.72);
}

.copy-code-label {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.copy-code-value {
  font-size: 20px;
  font-weight: 800;
  margin-top: 8px;
  word-break: break-word;
}

.copy-code-button {
  position: relative;
  z-index: 2;

  background: var(--c27-orange);
  color: var(--c27-white);
  border: 1px solid var(--c27-orange);
  border-radius: 10px;

  padding: 8px 14px;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;

  cursor: pointer;
  pointer-events: auto;
  flex-shrink: 0;
}

.detail-note-card,
.detail-clash-card {
  background: var(--c27-orange-soft);
  border: 1px solid #efd1a2;
}

.detail-note-card .detail-card-title svg {
  color: var(--c27-orange);
}

.detail-clash-card .detail-card-title svg {
  color: var(--c27-red);
}

.event-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-log-entry {
  background: rgba(255,255,255,0.65);
  border: 1px solid #efd1a2;
  border-radius: 12px;
  padding: 12px 14px;
}

.event-log-action {
  font-size: 16px;
  font-weight: 700;
  color: var(--c27-black);
}

.event-log-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--c27-grey-700);
}

.rsvp-detail-card {
  background: var(--c27-blue-soft);
  border: 1px solid #bddbf1;
}

.rsvp-detail-card h2 {
  margin: 0 0 14px;
  color: var(--c27-blue);
  text-transform: uppercase;
}

.rsvp-detail-card .detail-card-title,
.rsvp-detail-card .detail-card-title svg {
  color: var(--c27-blue);
}

.detail-action-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 24px 0;
}

.detail-action-buttons button {
  min-width: 0;
  border-radius: 10px;
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--c27-white);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.16);
}

.outline-red {
  background: var(--c27-red);
  color: var(--c27-white);
  border: 1px solid var(--c27-red);
}

.outline-green {
  background: var(--c27-green);
  color: var(--c27-white);
  border: 1px solid var(--c27-green);
}

.outline-blue {
  background: var(--c27-blue);
  color: var(--c27-white);
  border: 1px solid var(--c27-blue);
}

.outline-yellow {
  background: var(--c27-orange);
  color: var(--c27-white);
  border: 1px solid var(--c27-orange);
}

.outline-purple {
  background: var(--c27-purple);
  color: var(--c27-white);
  border: 1px solid var(--c27-purple);
}

.photo-button {
  background: var(--c27-pink);
  color: var(--c27-white);
  border: 1px solid var(--c27-pink);
}

.detail-collapsible-card {
  padding: 0;
  overflow: hidden;
}

.detail-collapsible-card summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  margin: 0;
}

.detail-collapsible-card summary::-webkit-details-marker {
  display: none;
}

.detail-collapsible-card summary::after {
  content: "⌄";
  margin-left: auto;
  font-size: 24px;
  font-weight: 800;
}

.detail-collapsible-card[open] summary::after {
  content: "⌃";
}

.detail-collapsible-card p {
  padding: 0 14px 14px;
}

.rsvp-detail-card .icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;

  padding: 0;
  border-radius: 50%;

  background: var(--c27-green);
  color: var(--c27-white);
  border: 1px solid var(--c27-green);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  font-size: 0;
  line-height: 0;
  text-decoration: none;
  flex-shrink: 0;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.16);
}

.rsvp-detail-card .icon-button svg {
  width: 21px;
  height: 21px;
  fill: var(--c27-white);
}

.rsvp-detail-card .icon-button::after,
.rsvp-detail-card a[href^="sms:"].icon-button::after,
.rsvp-detail-card a[href^="tel:"].icon-button::after {
  content: none;
  display: none;
}

.edit-history-card {
  margin: 16px 0;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: #444;
}

.edit-history-card strong {
  color: #111;
  font-weight: 700;
}

/* =========================================================
   DETAIL SCREEN CSS END
   ========================================================= */

/* =========================================================
   EVENT LOG CARD START
   ========================================================= */

.event-log-card {
  background: var(--c27-orange-soft);
  border: 1px solid #efd1a2;
}

.event-log-card .detail-card-title svg {
  color: var(--c27-orange);
}

.event-log-list {
  padding: 0 14px 14px;
}

.event-log-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.event-log-row:last-child {
  border-bottom: none;
}

.event-log-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--c27-grey-700);
  margin-bottom: 2px;
}

.event-log-action {
  font-size: 16px;
  font-weight: 700;
  color: var(--c27-black);
  margin-bottom: 2px;
}

.event-log-user {
  font-size: 14px;
  font-weight: 500;
  color: var(--c27-grey-700);
}

/* =========================================================
   EVENT LOG CARD END
   ========================================================= */

/* =========================================================
   RSVP SCREEN START
   ========================================================= */

#rsvpView {
  display: none;
  max-width: 760px;
  margin: 0 auto;
}

.rsvp-screen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-bottom: 96px;
}

.rsvp-card {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );

  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;

  padding: 18px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.rsvp-hero-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}

.rsvp-icon-bubble {
  width: 66px;
  height: 66px;
  min-width: 66px;

  border-radius: 50%;

  background: var(--c27-blue);
  color: var(--c27-white);

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.16);
}

.rsvp-icon-bubble svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rsvp-kicker {
  color: var(--c27-blue);

  font-size: 14px;
  font-weight: 800;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  margin-bottom: 6px;
}

.rsvp-card h1 {
  margin: 0 0 8px;

  color: var(--c27-black);

  font-size: 32px;
  font-weight: 800;
  line-height: 1.08;
}

.rsvp-card p {
  margin: 0;

  color: var(--c27-grey-800);

  font-size: 17px;
  font-weight: 400;
  line-height: 1.42;
}

.rsvp-label {
  display: block;

  margin: 0 0 6px;

  color: var(--c27-black);

  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rsvp-input {
  width: 100%;

  margin: 0 0 16px;
  padding: 13px 14px;

  border: 1px solid var(--c27-grey-350);
  border-radius: 12px;

  background: var(--c27-white);
  color: var(--c27-black);

  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;

  box-sizing: border-box;
}

.rsvp-input:focus {
  outline: 3px solid rgba(29,112,184,0.24);
  outline-offset: 0;
}

.rsvp-primary-button,
.rsvp-secondary-button,
.rsvp-text-button {
  width: 100%;

  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;

  margin-top: 10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.16);
}

.rsvp-primary-button {
  background: var(--c27-blue);
  color: var(--c27-white);
  border: 1px solid var(--c27-blue);
}

.rsvp-secondary-button {
  background: var(--c27-red);
  color: var(--c27-white);
  border: 1px solid var(--c27-red);
}

.rsvp-text-button {
  background: transparent;
  color: var(--c27-grey-800);
  border: 1px solid var(--c27-grey-300);
  box-shadow: none;
}

.rsvp-primary-button:disabled,
.rsvp-secondary-button:disabled,
.rsvp-text-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rsvp-confirm-card {
  background: var(--c27-blue-soft);
  border-color: #bddbf1;
}

.rsvp-session-title {
  margin: 0 0 14px;

  color: var(--c27-blue);

  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.rsvp-saved-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;

  margin: 0 0 16px;
}

.rsvp-saved-row {
  background: rgba(255,255,255,0.78);

  border: 1px solid #bddbf1;
  border-radius: 12px;

  padding: 13px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 3px rgba(0,0,0,0.06);
}

.rsvp-saved-row span {
  color: var(--c27-grey-700);

  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rsvp-saved-row strong {
  color: var(--c27-black);

  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;

  text-align: right;
  overflow-wrap: anywhere;
}

.rsvp-privacy-box {
  background: var(--c27-orange-soft);

  border: 1px solid #efd1a2;
  border-radius: 14px;

  padding: 14px;
  margin: 4px 0 16px;
}

.rsvp-privacy-box strong {
  display: block;

  margin: 0 0 6px;

  color: var(--c27-orange);

  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rsvp-privacy-box p {
  color: var(--c27-grey-800);

  font-size: 15px;
  font-weight: 400;
  line-height: 1.42;
}

.rsvp-back-button {
  background: transparent !important;
  color: var(--c27-grey-800) !important;
  box-shadow: none !important;
  border: none !important;
}

/* =========================================================
   RSVP SCREEN END
   ========================================================= */

/* =========================================================
   MISSING INFO PANEL START
   ========================================================= */

.detail-status-pills {
  margin-bottom: 0;
}

#missingInfoPanel {
  margin: -1px 0 26px;
}

.missing-info-box {
  background: linear-gradient(
    to bottom,
    #f8aa3d 0%,
    var(--c27-orange) 100%
  );
  color: var(--c27-white);

  border: 1px solid var(--c27-orange);
  border-top: none;
  border-radius: 0 0 18px 18px;

  padding: 18px;
  margin: 0;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 3px 7px rgba(0,0,0,0.18);
}

.missing-info-box strong {
  display: block;
  margin: 0 0 14px;

  text-align: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.missing-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.missing-info-list li {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 10px;

  padding: 10px 12px;
  margin-bottom: 8px;

  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.missing-info-edit-button {
  width: 140px;
  height: 54px;
  min-height: 54px;

  margin: 18px auto 0;
  padding: 0;

  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;

  box-sizing: border-box;
}

.missing-info-edit-button svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   MISSING INFO PANEL END
   ========================================================= */

/* =========================================================
   EDIT / FORM BUTTONS START
   ========================================================= */

.action-buttons,
.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-buttons {
  justify-content: center;
  margin-top: 20px;
}

.action-buttons button {
  min-width: 300px;
}

.button-row button {
  flex: 1;
}

/* =========================================================
   EDIT / FORM BUTTONS END
   ========================================================= */

/* =========================================================
   EDIT / CREATE SCREEN REDESIGN START
   ========================================================= */

#editMode,
#createView {
  width: 100%;
  max-width: 1000px;
  min-width: 0;
  margin: 0 auto;
  padding-bottom: 104px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.edit-screen,
.create-screen,
.edit-card,
.road-groups-edit-card,
.edit-road-group-list,
.edit-road-group-carousel,
.edit-road-group-page,
.edit-road-sign,
.edit-road-sign-inner {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.edit-screen,
.create-screen {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  overflow-x: hidden;
}

.edit-title,
.create-title {
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 4px;
}

.edit-card {
  width: 100%;
  background: linear-gradient(to bottom, var(--c27-grey-75) 0%, var(--c27-grey-150) 50%, var(--c27-grey-200) 100%);
  border: 1px solid var(--c27-grey-300);
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
  overflow: hidden;
}

.edit-card-heading {
  display: none;
}

.edit-field {
  margin-bottom: 14px;
  min-width: 0;
}

.edit-field:last-child {
  margin-bottom: 0;
}

.edit-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c27-grey-700);
  margin: 0 0 5px;
}

.edit-field input,
.edit-field textarea,
.edit-select,
.edit-native-picker,
.edit-road-group-search {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--c27-white);
  color: var(--c27-black);
  border: 1px solid var(--c27-grey-350);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0;
  font-size: 17px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

.edit-field textarea {
  min-height: 110px;
  resize: vertical;
}

.edit-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

  /* EDIT / CREATE DATE + TIME FIX */
  .edit-date-time-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
  }

  .edit-date-time-row .edit-field {
    flex: 0 0 auto;
    margin: 0;
  }

  .edit-date-time-row .edit-field:first-child {
    width: auto;
  }

  .edit-date-time-row input[type="date"],
  .edit-date-time-row input[type="time"],
  .edit-date-time-row input[type="text"] {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 8px 8px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
  }

  .edit-date-time-row input[type="date"] {
    max-width: 112px;
  }

  .edit-date-time-row input[type="time"] {
    max-width: 78px;
  }

.constituency-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.constituency-choice {
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  display: block;
  background: var(--c27-white);
  color: var(--c27-black);
  border: 1px solid var(--c27-grey-350);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  text-align: left;
  box-shadow: none;
  box-sizing: border-box;
}

.constituency-choice.selected {
  background: var(--c27-green-soft);
  color: var(--c27-green);
  border-color: var(--c27-green);
}

.edit-road-group-summary {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--c27-green-soft);
  color: var(--c27-black);
  border: 1px solid #bfe6bd;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.edit-road-group-summary strong {
  font-size: 28px;
  color: var(--c27-green);
}

.edit-road-group-total-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 14px;
  color: var(--c27-green);
}

.edit-road-group-search {
  margin-bottom: 24px;
}

.edit-road-group-list {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.edit-road-group-carousel {
  width: 100%;
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.edit-road-group-page {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding-right: 0;
}

.edit-road-group-page-number {
  text-align: left;
  color: var(--c27-grey-700);
  font-size: 13px;
  font-weight: 800;
  padding-left: 8px;
  margin-top: 2px;
}

.edit-empty-road-groups {
  width: 100%;
  box-sizing: border-box;
  background: var(--c27-white);
  color: var(--c27-grey-700);
  border: 1px solid var(--c27-grey-250);
  border-radius: 14px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
}

.edit-road-sign {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  background: var(--c27-green);
  color: var(--c27-white);
  border: none;
  border-radius: 16px;
  padding: 6px;
  margin: 0;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  min-height: 0;
  overflow: hidden;
}

.edit-road-sign.selected {
  background: var(--c27-green);
}

.edit-road-sign-inner {
  width: 100%;
  border: 2px solid var(--c27-white);
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
}

.edit-road-sign-title-row {
  display: block;
  min-width: 0;
}

.edit-road-sign-check {
  display: none;
}

.edit-road-sign-title {
  display: block;
  max-width: 100%;
  min-width: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-road-sign.selected .edit-road-sign-title::before {
  content: "✓ ";
}

.edit-road-sign-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 0.9fr;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

.edit-road-sign-stats span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.road-contact-icon {
    outline: 1px solid red;
}

.edit-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--c27-white);
  border: 1px solid var(--c27-grey-350);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
  max-width: 100%;
}

.edit-toggle-row:last-child {
  margin-bottom: 0;
}

.edit-toggle-row strong {
  display: block;
  font-size: 17px;
}

.edit-toggle-row small {
  display: block;
  font-size: 13px;
  color: var(--c27-grey-600);
  margin-top: 3px;
}

.edit-toggle-row input {
  display: none;
}

.edit-toggle-slider {
  width: 58px;
  height: 32px;
  border-radius: 999px;
  background: var(--c27-grey-300);
  position: relative;
  flex-shrink: 0;
}

.edit-toggle-slider::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: var(--c27-white);
  border-radius: 50%;
  transition: left .18s ease;
}

.edit-toggle-row input:checked + .edit-toggle-slider {
  background: var(--c27-green);
}

.edit-toggle-row input:checked + .edit-toggle-slider::after {
  left: 30px;
}

.edit-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 10px;
  background: rgba(255,255,255,0.94);
  border-top: 1px solid var(--c27-grey-250);
  padding: 12px 0 0;
  margin-top: 18px;
  max-width: 100%;
}

.edit-sticky-actions button {
  min-height: 56px;
  border-radius: 14px;
  font-size: 17px;
  min-width: 0;
}

.edit-cancel-button {
  background: var(--c27-grey-600);
}

.edit-map-search-row {
  display: flex;
  gap: 0;
  margin: 0 0 10px;
  align-items: stretch;
}

.edit-map-search-row input {
  flex: 1;
  margin: 0;
  border-radius: 12px 0 0 12px;
  border: 1px solid var(--c27-grey-350);
  border-right: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--c27-grey-500);
  background: var(--c27-grey-50);
}

.edit-map-search-row input:focus {
  color: var(--c27-black);
  background: var(--c27-white);
}

.edit-map-search-row button {
  width: 58px;
  min-width: 58px;
  min-height: 54px;
  padding: 0;
  margin: 0;
  border-radius: 0 12px 12px 0;
  background: var(--c27-black);
  color: var(--c27-white);
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.edit-map-search-row button::before {
  content: "⌕";
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.edit-map-preview-wrap {
  width: 100%;
  margin: 0 0 18px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c27-grey-200);
  border: 1px solid var(--c27-grey-350);
}

.edit-map-preview {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}

/* =========================================================
   EDIT / CREATE SCREEN REDESIGN END
   ========================================================= */
/* =========================================================
   RSVP LIST START
   ========================================================= */

#rsvpList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0 24px;
}

.rsvp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;

  background: var(--c27-white);
  color: var(--c27-black);

  padding: 14px 16px;
  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 2px 5px rgba(0,0,0,0.08);
}

.rsvp-person-name {
  min-width: 0;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.rsvp-actions {
  display: grid;
  grid-template-columns: auto 44px 44px;
  align-items: center;
  justify-content: end;
  gap: 10px;
}

/* slider toggle */

.checkin-label {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin: 0;

  font-size: 15px;
  font-weight: 800;
  color: var(--c27-grey-800);
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
}

.checkin-text {
  display: inline-block;
}

.checkin-label .rsvp-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.checkin-label::before {
  content: none !important;
}

.checkin-label::after {
  content: "";

  width: 58px;
  height: 32px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 16px 50%, white 0 12px, transparent 13px),
    var(--c27-red);

  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.12);

  transition: background .18s ease;
}

.checkin-label:has(.rsvp-check:checked)::after {
  background:
    radial-gradient(circle at 42px 50%, white 0 12px, transparent 13px),
    var(--c27-green);
}

.checked-in-row {
  background: var(--c27-white) !important;
  border-left: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 2px 5px rgba(0,0,0,0.08);
}

.checked-in-row .rsvp-person-name {
  color: var(--c27-black);
  font-weight: 700;
}

/* call / text buttons */

.icon-button,
.rsvp-call-button,
.rsvp-text-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;

  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: var(--c27-red);
  text-decoration: none;
  flex-shrink: 0;

  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.18);
}

.rsvp-call-button,
.rsvp-text-button {
  background: var(--c27-green) !important;
}

.rsvp-button-icon {
  width: 22px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 0;
  font-size: 0;
}

.rsvp-button-icon svg {
  width: 22px !important;
  height: 22px !important;

  display: block !important;
  flex: 0 0 auto;

  margin: 0 !important;

  stroke: var(--c27-white) !important;
  fill: none !important;
  stroke-width: 2.3;
}

.rsvp-text-button .rsvp-button-icon svg {
  transform: translateY(-1px);
}

/* mobile compact layout */

@media (max-width: 720px) {
  #rsvpList {
    gap: 8px;
  }

  .rsvp-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .rsvp-person-name {
    width: 100%;
    font-size: 24px;
    line-height: 1.05;
  }

  .rsvp-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    align-items: center;
    gap: 8px;
  }

  .checkin-label {
    justify-self: start;
    font-size: 16px;
    line-height: 1;
    gap: 8px;
  }

  .checkin-label::after {
    width: 52px;
    height: 28px;

    background:
      radial-gradient(circle at 14px 50%, white 0 10px, transparent 11px),
      var(--c27-red);
  }

  .checkin-label:has(.rsvp-check:checked)::after {
    background:
      radial-gradient(circle at 38px 50%, white 0 10px, transparent 11px),
      var(--c27-green);
  }

  .rsvp-call-button,
  .rsvp-text-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    justify-self: end;
  }

  .rsvp-button-icon {
    width: 20px;
    height: 20px;
  }

  .rsvp-button-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* =========================================================
   RSVP LIST END
   ========================================================= */

/* =========================================================
   PHOTO GALLERY START
   ========================================================= */

.photo-detail-card {
  background: #f8f8f8;   /* or whatever your normal detail-card background is */
}

.photo-detail-card h2 {
  margin: 0 0 14px;
  color: #111;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
}

#photoGallery {
  margin-top: 0;
}

.photo-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.photo-carousel-item {
  flex: 0 0 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
  background: #eee;
  scroll-snap-align: start;
}

.photo-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 800px) {
  .photo-carousel {
    gap: 14px;
  }

  .photo-carousel-item {
    flex: 0 0 calc((100% - 28px) / 3);
  }
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 72px 14px 28px;
  box-sizing: border-box;
  background: rgba(0,0,0,0.92);
}

.photo-lightbox img {
  width: 100%;
  max-width: 980px;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 14px;
}

.photo-lightbox-close {
  position: fixed;
  top: 16px;
  right: 18px;
  border: 0;
  background: transparent;
  color: white;
  font-size: 46px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.photo-mobile-save-hint {
  display: none;
  margin-top: 12px;
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  text-align: center;
}

.photo-lightbox-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.photo-lightbox-actions a,
.photo-lightbox-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: white;
  color: #111;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.photo-delete-button {
  background: #C40F3A !important;
  color: white !important;
}

.photo-delete-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

body.photo-lightbox-open {
  overflow: hidden;
}

@media (max-width: 799px) {
  .photo-lightbox {
    padding: 66px 10px 22px;
  }

  .photo-lightbox img {
    max-height: 70vh;
    border-radius: 10px;
  }

  .photo-mobile-save-hint {
    display: block;
  }

  .photo-lightbox-actions {
    width: 100%;
    justify-content: center;
  }

  .photo-lightbox-actions a {
    display: none;
  }

  .photo-lightbox-actions button {
    min-width: 150px;
  }
}

/* =========================================================
   PHOTO GALLERY END
   ========================================================= */


/* =========================================================
   MOBILE RESPONSIVE START
   ========================================================= */



/* =========================================================
   MOBILE RESPONSIVE END
   ========================================================= */

/* =========================================================
   WHATSAPP EDITOR START
   ========================================================= */

#whatsappView {
  display: none;
}

.whatsapp-editor-card {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );

  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;

  padding: 20px;
  margin-bottom: 22px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.whatsapp-template-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  margin-bottom: 18px;
}

.whatsapp-template-button {
  min-height: 58px;

  border-radius: 12px;

  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;

  color: var(--c27-white);

  transition: transform .15s ease;
}

.whatsapp-template-button.active {
  transform: scale(1.04);
}

.whatsapp-invite {
  background: var(--c27-green);
}

.whatsapp-reminder {
  background: var(--c27-orange);
}

.whatsapp-update {
  background: var(--c27-blue);
}

.whatsapp-cancel {
  background: var(--c27-red);
}

.whatsapp-preview-wrapper {
  position: relative;
}

.whatsapp-edit-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;

  padding: 0;
  border-radius: 50%;

  background: var(--c27-grey-100);
  color: var(--c27-grey-800);
  border: 1px solid var(--c27-grey-350);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 0;
  line-height: 0;
  font-weight: 800;
}

.whatsapp-edit-button::before {
  content: "✎";
  font-size: 20px;
  line-height: 1;
}


.whatsapp-preview {
  background: #efeae2;

  border-radius: 18px;

  padding: 30px 20px;

  min-height: 360px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsapp-bubble {
  position: relative;

  background: #fffdf8;

  width: 92%;
  max-width: 700px;

  border-radius: 18px 18px 4px 18px;

  padding: 18px 20px;

  box-shadow:
    0 1px 2px rgba(0,0,0,0.08);
}

.whatsapp-bubble::after {
  content: '';

  position: absolute;

  right: -18px;
  bottom: 6px;

  width: 0;
  height: 0;

  border-left: 24px solid #fffdf8;
  border-top: 14px solid transparent;
  border-bottom: 4px solid transparent;
}

.whatsapp-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;

  font-size: 19px;
  line-height: 1.5;

  color: var(--c27-black);
}

.whatsapp-message-editor {
  width: 100%;

  min-height: 320px;

  font-size: 19px;
  line-height: 1.5;

  resize: vertical;

  margin: 0;

  border-radius: 18px;

  overflow-wrap: anywhere;
  word-break: break-word;
}

.whatsapp-send-button {
  width: 100%;
  max-width: 520px;
  min-height: 58px;

  margin: 18px auto 0;
  padding: 14px 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: var(--c27-green);
  color: var(--c27-white);

  border: 1px solid var(--c27-green);
  border-radius: 12px;

  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.16);
}

.whatsapp-send-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   MOBILE
   ========================================================= */


/* =========================================================
   WHATSAPP EDITOR END
   ========================================================= */

/*************************************************************
 *
 * EMAIL EDITOR START
 *
 *************************************************************/

#emailView {
  display: none;
}

.email-editor-card {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );
  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.email-template-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.email-template-button {
  min-height: 58px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c27-white);
  transition: transform .15s ease;
}

.email-template-button.active {
  transform: scale(1.04);
}

.email-invite {
  background: var(--c27-green);
}

.email-reminder {
  background: var(--c27-orange);
}

.email-update {
  background: var(--c27-blue);
}

.email-cancel {
  background: var(--c27-red);
}

.email-recipient-summary {
  background: var(--c27-white);
  border: 1px solid var(--c27-grey-300);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.35;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.email-quota-note {
  margin-top: 4px;
  color: var(--c27-grey-700);
  font-size: 14px;
}

.email-recipient-details {
  margin-top: 8px;
  font-size: 14px;
  color: var(--c27-grey-800);
}

.email-preview-wrapper {
  position: relative;
}

.email-edit-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;

  padding: 0;
  border-radius: 50%;

  background: var(--c27-grey-100);
  color: var(--c27-grey-800);
  border: 1px solid var(--c27-grey-350);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 0;
  line-height: 0;
  font-weight: 800;
}

.email-edit-button::before {
  content: "✎";
  font-size: 20px;
  line-height: 1;
}


.email-preview-card {
  background: var(--c27-white);
  border-radius: 18px;
  padding: 58px 20px 22px;
  margin-bottom: 18px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08);
}

.email-preview-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c27-grey-500);
  margin-bottom: 10px;
}

.email-preview-subject {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--c27-black);
  margin-bottom: 8px;
}

.email-preview-from {
  font-size: 15px;
  color: var(--c27-grey-600);
  border-bottom: 1px solid var(--c27-grey-250);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.email-preview-body {
  font-size: 18px;
  line-height: 1.5;
  color: var(--c27-black);
  overflow-wrap: anywhere;
}

.email-preview-body p:first-child {
  margin-top: 0;
}

.email-preview-body ul {
  padding-left: 24px;
}

.email-edit-panel {
  background: var(--c27-white);
  border-radius: 18px;
  padding: 58px 20px 20px;
  margin-bottom: 18px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08);
}

.email-subject-editor {
  font-size: 18px;
  border-radius: 14px;
  border: 2px solid var(--c27-grey-250);
  padding: 14px;
  margin-bottom: 18px;
}

.email-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--c27-grey-100);
  border: 1px solid var(--c27-grey-250);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 10px;
}

.email-toolbar button {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--c27-white);
  color: var(--c27-black);
  font-size: 14px;
  font-weight: 800;
}

.email-body-editor {
  min-height: 320px;
  background: var(--c27-white);
  border: 1px solid var(--c27-grey-250);
  border-radius: 0 0 14px 14px;
  padding: 16px;
  font-size: 18px;
  line-height: 1.5;
  outline: none;
  overflow-wrap: anywhere;
}

.email-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.email-copy-button,
.email-send-button {
  min-height: 58px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
}

.email-copy-button {
  background: var(--c27-grey-600);
  color: var(--c27-white);
}

.email-send-button {
  background: var(--c27-blue);
  color: var(--c27-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.email-send-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outline-indigo {
  background: var(--c27-purple);
  color: var(--c27-white);
  border: 1px solid var(--c27-purple);
}



/*************************************************************
 *
 * EMAIL EDITOR END
 *
 *************************************************************/
/* =========================================================
   BOTTOM ACTION DOCK START
   ========================================================= */

.bottom-action-dock,
.list-action-dock {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);

  z-index: 950;

  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;

  width: auto;
  max-width: calc(100vw - 28px);

  padding: 8px 18px;

  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(210,210,210,0.75);
  border-radius: 999px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 5px 18px rgba(0,0,0,0.18);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.bottom-action-dock.compact,
.list-action-dock.compact {
  transform: translateX(-50%) scale(0.92);
  opacity: 0.94;
}

.bottom-action-dock button,
.list-action-dock button {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: none !important;
  border-radius: 50% !important;

  background: transparent !important;
  color: var(--c27-black) !important;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0 !important;
  line-height: 0 !important;

  box-shadow: none !important;

  transition:
    background 0.16s ease,
    transform 0.16s ease;
}

.bottom-action-dock button.active,
.bottom-action-dock button:hover,
.bottom-action-dock button:active,
.list-action-dock button:hover,
.list-action-dock button:active {
  background: rgba(0,0,0,0.10) !important;
}

.bottom-action-dock button:active,
.list-action-dock button:active {
  transform: scale(0.94);
}

.bottom-action-dock button svg,
.list-action-dock button svg {
  width: 27px;
  height: 27px;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#cards,
#detailContent,
#editMode,
#createView,
#rsvpView,
#whatsappView,
#emailView,
#photoUploadView {
  padding-bottom: 100px;
}

@media (max-width: 430px) {
  .bottom-action-dock,
  .list-action-dock {
    bottom: calc(16px + env(safe-area-inset-bottom));
    gap: 12px;
    padding: 7px 14px;
    max-width: calc(100vw - 18px);
  }

  .bottom-action-dock button,
  .list-action-dock button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .bottom-action-dock button svg,
  .list-action-dock button svg {
    width: 25px;
    height: 25px;
  }
}

/* =========================================================
   BOTTOM ACTION DOCK END
   ========================================================= */

/* Old floating create buttons are disabled because the list action dock now owns these actions. */
#floatingCreateButtons,
.ai-assist-floating-button {
  display: none !important;
}



/* =========================================================
   FLOATING ACTION BUTTONS START
   ========================================================= */

#floatingCreateButtons {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;

  display: flex;
  align-items: center;
  gap: 14px;
}

#createEventButton,
#aiListButton {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;

  box-shadow:
    0 8px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25);

  cursor: pointer;
}

#createEventButton {
  background: var(--c27-red);
  color: white;

  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

#aiListButton {
  background: var(--c27-purple);
  color: white;
}

#aiListButton svg {
  width: 30px;
  height: 30px;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#createEventButton:hover,
#aiListButton:hover {
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  #floatingCreateButtons {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  #createEventButton,
  #aiListButton {
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
  }

  #createEventButton {
    font-size: 38px;
  }

  #aiListButton svg {
    width: 27px;
    height: 27px;
  }
}

/* =========================================================
   FLOATING ACTION BUTTONS END
   ========================================================= */


/* =========================================================
   SWIPE CARD ACTIONS START
   ========================================================= */

.swipe-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  touch-action: pan-y;
}

.swipe-card-inner {
  position: relative;
  z-index: 2;
  transition: transform .22s ease;
  will-change: transform;
}

.swipe-actions {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: 172px;
  display: grid;
  grid-template-columns: 86px 86px;
  align-items: stretch;
  background: var(--c27-black);
  border-radius: 18px;
  overflow: hidden;
}

.swipe-action-button {
  min-width: 0;
  min-height: 0;
  width: 86px;
  height: 100%;
  padding: 0 8px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.swipe-action-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swipe-edit-button {
  background: var(--c27-black);
  color: var(--c27-white);
}

.swipe-delete-button {
  background: var(--c27-red);
  color: var(--c27-white);
}

.swipe-card.swiped-open .swipe-card-inner {
  transform: translateX(-172px);
}

@media (hover: hover) and (pointer: fine) {
  .swipe-card:hover .swipe-card-inner {
    transform: translateX(-172px);
  }
}



/* =========================================================
   SWIPE CARD ACTIONS END
   ========================================================= */


/* =========================================================
   DELETE CONFIRMATION MODAL START
   ========================================================= */

#deleteConfirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.45);
  display: none;
}

#deleteConfirmModal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 3001;
  width: min(92vw, 460px);
  transform: translate(-50%, -50%);
  display: none;
  background: var(--c27-white);
  color: var(--c27-black);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.35);
}

#deleteConfirmModal h2 {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 900;
  color: var(--c27-red);
}

#deleteConfirmModal p {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.35;
}

body.delete-confirm-open #deleteConfirmOverlay,
body.delete-confirm-open #deleteConfirmModal {
  display: block;
}

.delete-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.delete-cancel-btn {
  background: var(--c27-grey-600);
}

.delete-confirm-btn {
  background: var(--c27-red);
}

/* =========================================================
   DELETE CONFIRMATION MODAL END
   ========================================================= */
/* =========================================================
   SWIPE CARD ACTIONS START
   ========================================================= */

.swipe-card {
  position: relative;
  overflow: visible;
  border-radius: 18px;
}

.swipe-card-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;

  width: 64px;

  display: flex;
  flex-direction: column;

  gap: 0;

  z-index: 1;
}

.swipe-card-actions button {
  flex: 1;

  width: 64px;

  padding: 0;
  margin: 0;

  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 3px 7px rgba(0,0,0,0.18);
}

.swipe-edit-action {
  background: var(--c27-black);
  color: var(--c27-white);

  border-radius: 16px 16px 0 0;
}

.swipe-delete-action {
  background: var(--c27-red);
  color: var(--c27-white);

  border-radius: 0 0 16px 16px;
}

.swipe-card-actions button svg {
  width: 28px;
  height: 28px;

  display: block;

  fill: none;
  stroke: var(--c27-white);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swipe-card-front {
  position: relative;
  z-index: 2;

  transition: transform .22s ease;

  will-change: transform;
  touch-action: pan-y;
}

.swipe-card.swiped-open .swipe-card-front {
  transform: translateX(-86px);
}

@media (hover: hover) and (pointer: fine) {
  .swipe-card:hover .swipe-card-front,
  .swipe-card:focus-within .swipe-card-front {
    transform: translateX(-86px);
  }
}

/* =========================================================
   SWIPE CARD ACTIONS END
   ========================================================= */





/* =========================================================
   DENSITY / READABILITY PASS START
   ========================================================= */

/* Normal copy should feel readable, not shouted. Keep headings/buttons bold. */
p,
.detail-card p,
.email-preview-body,
.whatsapp-message-text,
.email-recipient-summary,
.email-recipient-details,
.email-quota-note,
.organiser-phone,
.week-header div,
.edit-toggle-row small {
  font-weight: 400;
}

.detail-info-pill,
.edit-road-group-summary,
.edit-empty-road-groups,
.rsvp-person-name,
.copy-code-value,
.organiser-name,
.edit-toggle-row strong {
  font-weight: 600;
}

/* Softer, denser form controls across edit/create/RSVP/pickers. */
input,
textarea,
select,
.edit-field input,
.edit-field textarea,
.edit-select,
.edit-native-picker,
.edit-road-group-search,
.missing-info-row input,
.email-subject-editor,
.email-body-editor,
.whatsapp-message-editor,
.constituency-choice {
  padding: 10px 12px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  border-width: 1px;
  border-radius: 12px;
}

input:focus,
textarea:focus,
select:focus,
[contenteditable="true"]:focus {
  outline: 3px solid rgba(29,112,184,0.24);
  outline-offset: 0;
}

.edit-field {
  margin-bottom: 12px;
}

.edit-field label,
.edit-date-time-row .edit-field label,
.copy-code-label,
.email-preview-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.edit-card,
.whatsapp-editor-card,
.email-editor-card,
.detail-card {
  padding: 16px;
}

/* Status pills should read as a single action/status row, not a stack. */
.activity-pill,
.rsvp-pill,
.sent-status,
.detail-status-pills .activity-pill,
.detail-status-pills .rsvp-pill,
.detail-status-pills .sent-status {
  height: 30px;
  min-height: 30px;
  max-width: none;
  width: auto;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 700;
}

.event-bottom-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.event-bottom-row .activity-pill,
.event-bottom-row .rsvp-pill,
.event-bottom-row .sent-status {
  flex: 0 0 auto;
  white-space: nowrap;
}

.event-bottom-row::-webkit-scrollbar,
.detail-status-pills::-webkit-scrollbar {
  display: none;
}

.detail-status-pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 10px;
}

.detail-status-pills .activity-pill,
.detail-status-pills .rsvp-pill,
.detail-status-pills .sent-status {
  flex: 0 0 auto;
}

/* WhatsApp/email previews: keep the mockups, but reduce bulk. */
.whatsapp-preview {
  padding: 22px 16px;
}

.whatsapp-bubble {
  padding: 14px 16px;
}

.whatsapp-message-text,
.whatsapp-message-editor {
  font-size: 17px;
  line-height: 1.45;
}

.email-preview-card,
.email-edit-panel {
  padding: 48px 18px 18px;
}

.email-preview-subject {
  font-size: 22px;
}

.email-preview-body,
.email-body-editor {
  font-size: 17px;
  line-height: 1.45;
}

.email-toolbar {
  padding: 8px;
}

.email-toolbar button {
  min-height: 38px;
  padding: 7px 10px;
}

/* Desktop: calm the giant-webpage feeling. */
@media (min-width: 1000px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 38px;
  }

  #listView,
  #detailContent,
  #editMode,
  #createView,
  #whatsappView,
  #emailView,
  #rsvpView,
  #photoUploadView,
  #wardPickerView,
  #roadGroupPickerView {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .month-title {
    font-size: 30px;
  }

  .week-header {
    font-size: 18px;
  }

  .week-header div {
    font-size: 17px;
  }

  .event-card-main h2,
  .card h2 {
    font-size: 23px;
  }

  .detail-main-title,
  .edit-title,
  .create-title {
    font-size: 32px;
  }
}

/* Phone: compact, app-like, and with horizontal pill/status rows. */


/* =========================================================
   DENSITY / READABILITY PASS END
   ========================================================= */



/* =========================================================
   DENSITY / READABILITY PASS V2 START
   ========================================================= */

/* Smaller warning-light pills: keep them as a single horizontal strip */
.event-bottom-row,
.detail-status-pills {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.event-bottom-row::-webkit-scrollbar,
.detail-status-pills::-webkit-scrollbar {
  display: none;
}

.event-bottom-row {
  flex-wrap: nowrap;
  align-items: center;
}

.event-bottom-row .activity-pill,
.event-bottom-row .rsvp-pill,
.event-bottom-row .sent-status,
.detail-status-pills .activity-pill,
.detail-status-pills .rsvp-pill,
.detail-status-pills .sent-status {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Make ordinary copy calmer. Keep headings/buttons bold elsewhere. */
.detail-card p,
.email-preview-body,
.whatsapp-message-text,
.email-preview-from,
.email-recipient-summary,
.email-quota-note,
.email-recipient-details,
.organiser-phone,
.edit-toggle-row small {
  font-weight: 400;
}

.detail-info-pill,
.copy-code-value,
.edit-road-group-summary,
.edit-road-group-total-row,
.rsvp-person-name,
.organiser-name {
  font-weight: 500;
}

/* Less bulky form fields across edit/create/RSVP/editor screens */
input,
textarea,
select,
.edit-field input,
.edit-field textarea,
.edit-select,
.edit-native-picker,
.edit-road-group-search,
.constituency-choice,
.missing-info-row input,
.email-subject-editor,
.email-body-editor,
.whatsapp-message-editor {
  padding: 10px 12px;
  font-weight: 500;
}

.edit-card,
.detail-card,
.whatsapp-editor-card,
.email-editor-card,
.rsvp-row,
.email-preview-card,
.email-edit-panel {
  padding: 14px;
}

/* Road group signs: allow two title lines, keep stats on one line */
.edit-road-sign {
  padding: 5px;
}

.edit-road-sign-inner {
  padding: 10px;
}

.edit-road-sign-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.12;
}

.edit-road-sign-stats {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
}

.edit-road-sign-stats span {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}

/* RSVP rows: stop names being squeezed into a vertical column */
.rsvp-row {
  min-width: 0;
}

.rsvp-person-name {
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

.rsvp-actions {
  min-width: 0;
  flex-shrink: 0;
}



/* =========================================================
   DENSITY / READABILITY PASS V2 END
   ========================================================= */


/* =========================================================
   COMPACT MOBILE EVENT CARD / DETAIL POLISH V4 START
   ========================================================= */

/*
  V4 goals:
  - Event title runs across the full top of the card, with a hard two-line limit.
  - Date block moves below the title so it cannot overlap text.
  - Date box loses padding and height.
  - Time/location are pulled closer to the title and pill strip.
  - Pills are roughly 25% shorter than V3 but keep the full words visible.
  - Detail status strip uses the same compact warning-light sizing.
  - RSVP rows and road group signs stay compact and readable.
*/



/* =========================================================
   COMPACT MOBILE EVENT CARD / DETAIL POLISH V4 END
   ========================================================= */




/* edit/done state icons for preview editor bubbles */
.whatsapp-preview-wrapper:has(.whatsapp-message-editor) .whatsapp-edit-button::before,
.email-preview-wrapper:has(.email-edit-panel) .email-edit-button::before {
  content: "✓";
}

/* =========================================================
   MOBILE CONSOLIDATED CONTROLS START
   THIS IS THE ONLY MOBILE SECTION YOU SHOULD EDIT

   QUICK MANUAL ADJUSTMENTS:
   - Header height: change 54px in #topBar, #loadingScreen, #menuOverlay and #mainMenu.
   - Card spacing: change .event-card padding / gap.
   - Date size: change .event-date-block width and .event-date-number.
   - Pill lights: change .sent-status width/height.
   - RSVP position: .event-bottom-row .rsvp-pill has order:-1 so it sits first.
   ========================================================= */

@media (max-width: 720px) {

  /* PAGE / GLOBAL */
  body {
    padding: 0 16px 20px;
    font-size: 18px;
    overflow-x: hidden;
  }

  h1 {
    font-size: 22px;
  }

  button {
    min-height: 40px;
    font-size: 15px;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }

  /* TOP HEADER BAR */
  #topBar {
    height: 54px !important;
    min-height: 54px !important;
    width: calc(100% + 32px);
    margin: 0 -16px 14px -16px !important;
    padding: 0 10px !important;
    gap: 8px;
  }

  #backButton,
  #menuButton {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  #backButton {
    font-size: 28px;
  }

  #menuButton {
    font-size: 30px;
  }

  #appTitle {
    gap: 7px;
    font-size: 19px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  #headerLogo {
    height: 24px !important;
    max-width: 112px;
  }

  #headerLogo svg {
    height: 24px !important;
  }

  /* LOADING / MENU HEIGHTS MATCH HEADER */
  #loadingScreen {
    top: 54px !important;
  }

  #loadingBackground {
    padding: 34px 34px 54px;
  }

  #loadingSpinner {
    width: 56px;
    height: 56px;
    border-width: 6px;
  }

  #menuOverlay {
    top: 54px !important;
  }

  #mainMenu {
    top: 54px !important;
    width: 78vw;
    height: calc(100vh - 54px) !important;
  }

  .main-menu-option {
    min-height: 64px;
    padding: 18px 20px;
    font-size: 18px;
  }

  .main-menu-option.active {
    padding-left: 14px;
  }

  /* LIST VIEW MONTH / WEEK HEADERS */
  .month-section {
    padding: 10px 10px 10px 10px;
    border-radius: 18px;
    margin: 0 0 10px;
  }

  .month-title {
    font-size: 15px;
    margin: 0 0 10px;
  }

  .month-content {
    gap: 14px;
  }

  .week-header {
    font-size: 12px;
    margin: 0 0 2px;
  }

  .week-header div {
    font-size: 12px;
  }

/* LIST VIEW EVENT CARD */
.event-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: start;
  padding: 10px;
  border-radius: 16px;
  overflow: hidden;
}

.event-date-block {
  grid-column: 1;
  grid-row: 1;
  width: 60px;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 4px 4px;
  border-radius: 11px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-date-day,
.event-date-month {
  font-size: 10px;
  line-height: 1.1;
}

.event-date-number {
  font-size: 30px;
  line-height: .95;
}

/* lets the status bar break out underneath the date block on mobile */
.event-card-main {
  display: contents;
}

.event-card-main h2 {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
  line-height: 1.0;
  margin: 0 0 0px;
  min-width: 0;
}

.card h2 {
  font-size: 15px;
  line-height: 1;
  margin: 0 0 0px;
}

/* TIME AND LOCATION ON SEPARATE LINES */
.event-meta-row {
  grid-column: 2;
  grid-row: 1;

  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;

  align-self: end;

  font-size: 10px;
  line-height: 1;
  margin: 0px 0 0;
  min-width: 0;
}

.event-meta-row .meta-divider {
  display: none;
}

/* keeps clock + time together, pin + location together */
.event-meta-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.event-meta-line .event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.event-meta-line span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-icon svg,
.activity-pill svg,
.rsvp-pill svg,
.sent-status svg,
.event-arrow svg {
  width: 10px;
  height: 10px;
}

/* MOBILE CARD STATUS BAR — FULL WIDTH UNDER DATE + TEXT */
.event-bottom-row {
  grid-column: 1 / -1;
  grid-row: 2;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  margin-top: 0;
  padding: 6px;
  border-radius: 12px;
  overflow: hidden;
}

.event-bottom-row > * {
  flex: 1;
  justify-content: center;
}

/* FULL TEXT PILLS */
.event-bottom-row .activity-pill,
.event-bottom-row .rsvp-pill,
.event-bottom-row .sent-status {
  height: 22px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
  white-space: nowrap;

  min-width: 0;
  max-width: 100%;
}

/* RSVP normal text */
.event-bottom-row .rsvp-pill {
  order: 0;
  font-size: 8.5px;
  max-width: none;
  overflow: visible;
}

.event-bottom-row .rsvp-pill svg {
  width: 10px;
  height: 10px;
  margin-right: 0;
}

/* WhatsApp / Email / Report full pills */
.event-bottom-row .sent-status {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 8.5px;
  letter-spacing: 0.035em;
}

.event-bottom-row .sent-status::before {
  display: block;
}

.event-bottom-row .sent-status svg {
  width: 10px;
  height: 10px;
}

.event-arrow {
  right: 9px;
}

.event-arrow svg {
  width: 15px;
  height: 15px;
}

    /* EDIT / CREATE SCREENS */
  #editMode,
  #createView {
    width: 100%;
    max-width: 100%;
  }

  .edit-screen,
  .create-screen {
    width: 100%;
  }

  .edit-card {
    padding: 14px;
  }

  /* EDIT / CREATE DATE + TIME FIX */
  .edit-date-time-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
  }

  .edit-date-time-row .edit-field {
    flex: 0 0 auto;
    margin: 0;
  }

  .edit-date-time-row .edit-field:first-child {
    width: auto;
  }

  .edit-date-time-row input[type="date"],
  .edit-date-time-row input[type="time"],
  .edit-date-time-row input[type="text"] {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 8px 8px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
  }

  .edit-date-time-row input[type="date"] {
    max-width: 112px;
  }

  .edit-date-time-row input[type="time"] {
    max-width: 78px;
  }

  .edit-road-group-search {
    margin-bottom: 24px;
  }

  .edit-road-sign-stats span {
    font-size: 15px;
    min-width: 72px;
  }

  .edit-map-search-row {
    display: flex;
    gap: 0;
    margin: 0 0 10px;
    align-items: stretch;
  }

  .edit-map-search-row input {
    flex: 1;
    margin: 0;
    border-radius: 12px 0 0 12px;
    border: 1px solid var(--c27-grey-350);
    border-right: none;
    font-size: 15px;
    font-weight: 500;
    background: var(--c27-grey-50);
  }

  .edit-map-search-row button {
    width: 54px;
    min-width: 54px;
    min-height: 50px;
    padding: 0;
    margin: 0;
    border-radius: 0 12px 12px 0;
    background: var(--c27-black);
    color: var(--c27-white);
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
  }

  .edit-map-search-row button::before {
    font-size: 23px;
  }

  .edit-map-preview-wrap {
    border-radius: 16px;
    border-top: 1px solid var(--c27-grey-350);
  }

  .edit-map-preview {
    height: 320px;
  }

  /* WHATSAPP EDITOR */
  .whatsapp-template-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .whatsapp-preview {
    min-height: 300px;
    padding: 16px;
  }

  .whatsapp-bubble {
    width: 100%;
  }

  .whatsapp-message-text,
  .whatsapp-message-editor {
    font-size: 16px;
  }

  .whatsapp-send-button {
    font-size: 16px;
    min-height: 54px;
  }

  /* EMAIL EDITOR */
  .email-template-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .email-preview-subject {
    font-size: 19px;
  }

  .email-preview-body,
  .email-body-editor {
    font-size: 16px;
  }

  .email-action-row {
    grid-template-columns: 1fr;
  }

  /* DETAIL SCREEN */
  #detailContent {
    max-width: none;
  }

  .detail-status-pills {
    top: 54px;
    z-index: 100;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    margin: 0 0 12px;
    padding: 6px;
    border-radius: 12px;

    overflow: hidden;
  }

  .detail-status-pills > * {
    flex: 1;
    justify-content: center;
  }

  .detail-status-pills .activity-pill,
  .detail-status-pills .rsvp-pill,
  .detail-status-pills .sent-status {
    height: 22px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
    white-space: nowrap;
    max-width: none;
    min-width: 0;
    overflow: hidden;
  }

  .detail-status-pills svg {
    width: 10px;
    height: 10px;
  }

  .detail-main-title {
    font-size: 28px;
    line-height: 1.08;
    margin-top: 16px;
    margin-bottom: 14px;
  }

  .detail-info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .detail-info-pill {
    padding: 10px 12px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
  }

  .detail-info-pill svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }

  .detail-location-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  .detail-map {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
  }

  .detail-card {
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
  }

  .detail-card > h2 {
  margin: 0 0 14px;
  line-height: 1.1;
}

  .detail-location-card {
    padding: 8px;
    gap: 6px;
  }

  .detail-location-block + .detail-location-block {
    padding-top: 6px;
  }

  .detail-card-title {
    font-size: 16px;
    gap: 8px;
    margin-bottom: 4px;
  }

  .detail-card-title svg {
    width: 18px;
    height: 18px;
  }

  .detail-card p {
    font-size: 14px;
  }

  .detail-collapsible-card summary {
    padding: 9px 11px;
  }

  .detail-collapsible-card p {
    padding: 0 11px 11px;
  }

  .organiser-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }

  .organiser-avatar {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .organiser-label {
    font-size: 12px;
  }

  .organiser-name {
    font-size: 18px;
  }

  .organiser-phone {
    display: none;
  }

  .organiser-actions {
    grid-column: auto;
    width: auto;
    gap: 8px;
  }

  .organiser-actions .green-action-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .organiser-actions .green-action-button svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .detail-action-buttons {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 16px 0;
  }

  .detail-action-buttons button {
    min-height: 46px;
    font-size: 14px;
    border-radius: 12px;
  }

  .rsvp-detail-card h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .rsvp-row {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 13px;
  }

  .rsvp-person-name {
    font-size: 16px;
    line-height: 1.15;
  }

  .rsvp-actions {
    gap: 8px;
  }

  .checkin-label {
    margin-left: 0;
    margin-right: 0;
  }

  .checkin-label::after {
    width: 48px;
    height: 28px;
  }

  .checkin-label {
    --knob-x: 2px;
  }

  .checkin-label:has(.rsvp-check:checked) {
    --knob-x: 22px;
  }

  .checkin-label::after {
    background:
      radial-gradient(
        circle at calc(var(--knob-x) + 12px) 50%,
        white 0 10px,
        transparent 11px
      ),
      var(--c27-red);
  }

  .checkin-label:has(.rsvp-check:checked)::after {
    background:
      radial-gradient(
        circle at calc(var(--knob-x) + 12px) 50%,
        white 0 10px,
        transparent 11px
      ),
      var(--c27-green);
  }

  .rsvp-detail-card .icon-button,
  .rsvp-actions .icon-button,
  .icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .rsvp-detail-card .icon-button svg,
  .rsvp-actions .icon-button svg,
  .icon-button svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .copy-code-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .copy-code-card {
    padding: 10px;
  }

  .copy-code-value {
    font-size: 16px;
  }

}

/* =========================================================
   MOBILE CONSOLIDATED CONTROLS END
   ========================================================= */

/* =========================================================
   AI CREATE / QUERY SCREEN START
   ========================================================= */

#aiCreateView {
  position: fixed;
  top: 124px;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 900;

  display: none;
  background: var(--c27-white);

  padding: 0 20px;
  box-sizing: border-box;

  overflow: hidden;
}

.ai-create-screen {
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.ai-create-header {
  flex: 0 0 auto;
  padding: 10px 0 8px;
}

.ai-create-header .edit-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.05;
}

.ai-query-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-query-title-row p {
  margin: 4px 0 0;
  color: var(--c27-grey-700);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.ai-query-wand {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--c27-purple);
  color: var(--c27-white);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.14);
}

.ai-query-wand svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-chat-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ai-conversation {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 8px 0 18px;
  background: var(--c27-white);
}

.ai-message {
  max-width: 86%;
  padding: 14px 16px;
  border-radius: 20px;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;

  white-space: normal;
  word-break: break-word;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.10);
}

.ai-message p {
  margin: 0 0 12px;
}

.ai-message p:last-child {
  margin-bottom: 0;
}

.ai-message strong {
  font-weight: 800;
}

.ai-message-assistant {
  align-self: flex-start;
  background: var(--c27-green);
  color: var(--c27-white);
  border-bottom-left-radius: 6px;
}

.ai-message-user {
  align-self: flex-end;
  background: var(--c27-red);
  color: var(--c27-white);
  border-bottom-right-radius: 6px;
  text-align: left;
}

.ai-example-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.ai-example-list button {
  width: 100%;
  min-height: 0;
  padding: 10px 12px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);

  background: rgba(255,255,255,0.16);
  color: var(--c27-white);

  box-shadow: none;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.ai-answer-summary {
  font-size: 16px;
  line-height: 1.35;
}

.ai-answer-insights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;

  margin: 12px 0;
  padding: 10px 12px;

  border-radius: 12px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);

  font-size: 13px;
  line-height: 1.35;
}

.ai-answer-section-title {
  display: block;

  margin: 14px 0 8px;

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;

  opacity: .92;
}

.ai-answer-event-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ai-answer-event-card {
  display: block;

  padding: 10px 12px;

  border-radius: 12px;

  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.26);
}

.ai-answer-event-date {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .9;
  margin-bottom: 4px;
}

.ai-answer-event-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.ai-answer-event-meta {
  margin-top: 4px;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;

  opacity: .95;
}

.ai-answer-more,
.ai-answer-note {
  margin-top: 12px;

  font-size: 13px;
  line-height: 1.4;

  opacity: .95;
}

.ai-answer-road-groups {
  margin: 8px 0 0;
  padding-left: 20px;
}

.ai-answer-road-groups li {
  margin: 4px 0;
}

.ai-input-dock {
  flex: 0 0 auto;

  background: var(--c27-white);
  border-top: 1px solid var(--c27-grey-250);

  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  margin: 0;
}

.ai-input-shell {
  position: relative;

  display: flex;
  align-items: flex-end;

  background: var(--c27-white);

  border: 2px solid var(--c27-grey-300);
  border-radius: 24px;

  padding: 8px 52px 8px 14px;

  transition: border-color .18s ease;
}

.ai-input-shell:focus-within {
  border-color: var(--c27-red);
}

.ai-event-prompt {
  width: 100%;
  min-height: 48px;
  max-height: 130px;

  padding: 8px 0;
  margin: 0;

  border: none;
  outline: none;
  box-shadow: none;
  resize: none;

  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;

  background: transparent;
}

.ai-event-prompt:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.ai-send-button {
  position: absolute;
  right: 10px;
  bottom: 10px;

  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;

  padding: 0;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--c27-red);
  color: var(--c27-white);

  font-size: 20px;
  font-weight: 800;
  line-height: 1;

  box-shadow: none;
}

.ai-send-button:disabled {
  opacity: .65;
}

@media (max-width: 640px) {
  #aiCreateView {
    top: 124px;
    padding: 0 16px;
  }

  .ai-create-header .edit-title {
    font-size: 18px;
  }

  .ai-query-title-row p {
    display: none;
  }

  .ai-message {
    max-width: 92%;
  }

  .ai-input-dock {
    margin-left: 0;
    margin-right: 0;
  }

  .ai-input-shell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 22px;
  }
}

/* =========================================================
   AI CREATE / QUERY SCREEN END
   ========================================================= */

   
   
/* =========================================================
   MISSING INFO LIST VERSION START
   ========================================================= */

.missing-info-list {
  margin: 0 auto;
  padding: 0;
  max-width: 520px;
  list-style: none;
}

.missing-info-list li {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 10px;

  padding: 10px 12px;
  margin: 0 0 8px;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  text-transform: uppercase;
}

.missing-info-edit-button {
  margin: 18px auto 0;

  min-width: 140px;
  min-height: 54px;

  padding: 14px 12px;

  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;

  line-height: 1;

  box-sizing: border-box;
}

.missing-info-edit-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   MISSING INFO LIST VERSION END
   ========================================================= */


/* =========================================================
   AI STYLE EDIT INPUTS START
   ========================================================= */

#editMode .edit-field input,
#editMode .edit-field textarea,
#editMode .edit-select,
#editMode .edit-native-picker,
#editMode .edit-road-group-search {
  background: var(--c27-white);
  border: 2px solid var(--c27-grey-300);
  border-radius: 24px;

  padding: 13px 16px;
  margin: 0;

  box-shadow: none;
  outline: none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

#editMode .edit-field input:focus,
#editMode .edit-field textarea:focus,
#editMode .edit-select:focus,
#editMode .edit-native-picker:focus,
#editMode .edit-road-group-search:focus {
  border-color: var(--c27-red);
  outline: none;
  box-shadow: none;
}

#editMode .edit-empty-field {
  border-color: var(--c27-orange) !important;
  background: var(--c27-orange-soft);
}

#editMode .edit-empty-field:focus {
  border-color: var(--c27-red) !important;
  background: var(--c27-white);
}

/* =========================================================
   AI STYLE EDIT INPUTS END
   ========================================================= */

/* =========================================================
   LEADERBOARD SCREEN START
   ========================================================= */

#leaderboardView {
  display: none;
  max-width: 900px;
  margin: 0 auto;
}

.leaderboard-screen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-bottom: 96px;
}

.leaderboard-hero,
.leaderboard-card {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );

  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;

  padding: 18px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.leaderboard-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}

.leaderboard-icon {
  width: 66px;
  height: 66px;
  min-width: 66px;

  border-radius: 50%;

  background: var(--c27-green);
  color: var(--c27-white);

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.16);
}

.leaderboard-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leaderboard-kicker {
  color: var(--c27-green);

  font-size: 14px;
  font-weight: 800;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  margin-bottom: 6px;
}

.leaderboard-hero h1 {
  margin: 0 0 8px;

  color: var(--c27-black);

  font-size: 34px;
  font-weight: 800;
  line-height: 1.08;
}

.leaderboard-hero p {
  margin: 0;

  color: var(--c27-grey-800);

  font-size: 17px;
  font-weight: 400;
  line-height: 1.42;
}

.leaderboard-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.leaderboard-row {
  background: rgba(255,255,255,0.78);

  border: 1px solid var(--c27-grey-300);
  border-radius: 14px;

  padding: 14px;

  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 3px rgba(0,0,0,0.06);
}

.leaderboard-row:nth-child(1) {
  background: var(--c27-orange-soft);
  border-color: #efd1a2;
}

.leaderboard-row:nth-child(2),
.leaderboard-row:nth-child(3) {
  background: var(--c27-green-soft);
  border-color: #c5e7c2;
}

.leaderboard-rank {
  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: var(--c27-green);
  color: var(--c27-white);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 19px;
  font-weight: 800;
}

.leaderboard-person strong {
  display: block;

  color: var(--c27-black);

  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
}

.leaderboard-person span {
  display: block;

  margin-top: 4px;

  color: var(--c27-grey-700);

  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.leaderboard-count {
  min-width: 48px;

  color: var(--c27-green);

  font-size: 30px;
  font-weight: 900;
  line-height: 1;

  text-align: right;
}

/* =========================================================
   LEADERBOARD SCREEN END
   ========================================================= */


/* =========================================================
   ADMIN SCREEN START
   ========================================================= */

#adminView,
#userSettingsView {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.admin-screen,
.user-settings-screen {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.admin-screen h1 {
  margin: 0 0 18px;
  font-size: 34px;
  font-weight: 800;
  color: #111;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.admin-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  text-align: left;

  border: 1px solid #d8d8d8;
  border-radius: 18px;

  padding: 18px;
  margin-bottom: 18px;

  background: linear-gradient(to bottom, #ffffff, #f1f1f1);

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

  box-sizing: border-box;
  overflow-x: hidden;
}

.admin-card h2 {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 800;
}

.admin-card strong {
  display: block;
  font-size: 22px;
  color: #111;
  margin-bottom: 4px;
}

.admin-card span {
  display: block;
  font-size: 15px;
  color: #555;
}

.admin-card em {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  color: #C40F3A;
}

.admin-card.disabled {
  opacity: 0.75;
  cursor: default;
}

.admin-card input,
.admin-card select,
.admin-card button,
.user-settings-screen input,
.user-settings-screen select,
.user-settings-screen button {
  max-width: 100%;
  box-sizing: border-box;
}

.admin-user-edit-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  border-top: 1px solid #ddd;
  padding: 16px 0;

  box-sizing: border-box;
  overflow-x: hidden;
}

.admin-user-edit-row:first-child {
  border-top: none;
}

@media (max-width: 700px) {
  #adminView,
  #userSettingsView {
    padding: 0;
    overflow-x: hidden;
  }

  .admin-screen,
  .user-settings-screen {
    overflow-x: hidden;
  }

  .admin-card {
    padding: 14px;
    margin-bottom: 18px;
  }

  .admin-card button,
  .user-settings-screen button {
    width: 100%;
    min-width: 0;
  }
}

.admin-user-summary {
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.admin-user-summary::-webkit-details-marker {
  display: none;
}

.admin-user-summary::after {
  content: "⌄";
  font-size: 24px;
  font-weight: 800;
  color: #555;
  margin-left: auto;
}

.admin-user-edit-row[open] .admin-user-summary::after,
.admin-card[open] .admin-user-summary::after {
  content: "⌃";
}

.admin-user-details {
  margin-top: 16px;
}

/* =========================================================
   ADMIN SCREEN END
   ========================================================= */
/* =========================================================
   PUBLIC VIEW CSS START
   ========================================================= */

/* Hide organiser-only controls */
body.public-view #bottomDock,
body.public-view .bottom-dock,
body.public-view .card-action-bar,
body.public-view .floating-action-bar,
body.public-view .edit-button,
body.public-view .delete-button,
body.public-view .rsvp-admin-view,
body.public-view .swipe-card-actions,
body.public-view #listActionDock,
body.public-view #bottomActionDock {
  display: none !important;
}

/* Public cards should look like normal completed green event cards */
body.public-view .event-card {
  cursor: pointer;
}

body.public-view .event-card,
body.public-view .event-complete-card,
body.public-view .event-card.event-complete-card {
  background: linear-gradient(
    to bottom,
    #55bf50 0%,
    var(--c27-green) 100%
  ) !important;

  color: var(--c27-white) !important;
  border-color: var(--c27-green) !important;
}

/* Keep the white date block, just like the normal green list cards */
body.public-view .event-date-block {
  background: linear-gradient(
    to bottom,
    var(--c27-white) 0%,
    var(--c27-grey-100) 100%
  ) !important;

  color: var(--c27-green) !important;
}

body.public-view .event-date-day,
body.public-view .event-date-number,
body.public-view .event-date-month {
  color: var(--c27-green) !important;
}

body.public-view .event-arrow {
  color: var(--c27-white) !important;
}

body.public-view .event-arrow svg {
  stroke: currentColor !important;
}

/* Public RSVP button */
body.public-view .guest-rsvp-button,
body.public-view .public-rsvp-button,
body.public-view .list-rsvp-button,
body.public-view .rsvp-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 5px 10px !important;

  background: var(--c27-blue, #1D70B8) !important;
  color: #fff !important;

  border: none !important;
  border-radius: 999px !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 20 !important;
}

body.public-view .guest-rsvp-button svg,
body.public-view .public-rsvp-button svg,
body.public-view .list-rsvp-button svg,
body.public-view .rsvp-button svg {
  width: 12px !important;
  height: 12px !important;
  fill: none !important;
  stroke: #fff !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

body.public-view .guest-rsvp-button svg *,
body.public-view .public-rsvp-button svg *,
body.public-view .list-rsvp-button svg *,
body.public-view .rsvp-button svg * {
  stroke: #fff !important;
  fill: none !important;
  pointer-events: none !important;
}

body.public-view .guest-rsvp-button-detail {
  width: 100% !important;
  min-height: 44px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}

body.public-view .public-rsvp-card {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  body.public-view .guest-rsvp-button,
  body.public-view .public-rsvp-button,
  body.public-view .list-rsvp-button,
  body.public-view .rsvp-button {
    min-height: 26px !important;
    padding: 4px 9px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }

  body.public-view .guest-rsvp-button svg,
  body.public-view .public-rsvp-button svg,
  body.public-view .list-rsvp-button svg,
  body.public-view .rsvp-button svg {
    width: 11px !important;
    height: 11px !important;
  }
}

/* =========================================================
   PUBLIC VIEW CSS END
   ========================================================= */

   /* =========================================================
   LOGIN SCREEN START
   ========================================================= */

.login-screen {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 16px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-screen h1 {
  margin: 0 0 8px;
  text-align: center;

  font-size: 34px;
  font-weight: 800;
  color: var(--c27-red);
}

.login-card {
  background: #fff;

  border: 2px solid var(--c27-red);
  border-radius: 18px;

  padding: 20px;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.08);
}

.login-card h2 {
  margin: 0 0 18px;

  font-size: 22px;
  font-weight: 800;

  color: var(--c27-red);
}

.login-card .edit-field {
  margin-bottom: 14px;
}

.login-card .edit-field label {
  display: block;

  margin-bottom: 6px;

  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;

  color: #555;
}

.login-card .edit-field input {
  width: 100%;
  box-sizing: border-box;

  min-height: 48px;

  padding: 12px 14px;

  border: 2px solid var(--c27-red);
  border-radius: 12px;

  font-size: 16px;

  background: #fff;
}

.login-card .edit-field input:focus {
  outline: none;

  border-color: var(--c27-red);

  box-shadow:
    0 0 0 3px rgba(196,15,58,0.15);
}

.login-card button,
.login-screen > button {
  width: 100%;
  min-height: 48px;

  border: 0;
  border-radius: 12px;

  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;

  cursor: pointer;
}

.login-card button {
  background: var(--c27-red);
  color: white;

  margin-top: 6px;
}

.login-screen > button {
  background: white;
  color: var(--c27-red);

  border: 2px solid var(--c27-red);
}

.login-card button:active,
.login-screen > button:active {
  transform: scale(0.98);
}

/* =========================================================
   LOGIN SCREEN END
   ========================================================= */

   /* =========================================================
   ROAD GROUP ICONS START
   ========================================================= */

.edit-road-sign-stats svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road-contact-text-icon {
  display: inline-block;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  color: currentColor;
}

/* old SVG contact icon safety override */
.road-contact-icon {
  display: none !important;
}

/* =========================================================
   ROAD GROUP ICONS END
   ========================================================= */
   /* =========================================================
   WARNING LIGHT OVERRIDES START
   ========================================================= */

.sent-status.sent-off,
.sent-status.sent-no {
  background: #8c939c !important;
}

.sent-status.sent-warning {
  background: var(--c27-orange) !important;
}

.sent-status.sent-urgent {
  background: var(--c27-red) !important;
}

.sent-status.sent-yes {
  background: var(--c27-green) !important;
}

/* =========================================================
   WARNING LIGHT OVERRIDES END
   ========================================================= */

   /* =========================================================
   SAVING OVERLAY START
   ========================================================= */

#savingOverlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(255,255,255,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.saving-box {
  background: white;
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  color: var(--c27-black);
}

.saving-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 6px solid rgba(196,15,58,0.18);
  border-top-color: var(--c27-red);
  animation: savingSpin .8s linear infinite;
}

@keyframes savingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   SAVING OVERLAY END
   ========================================================= */

   

   /* =========================================================
   EDIT / CREATE MATCHING FIX
   date/time = edit style
   map search = create style
   ========================================================= */

#editMode .edit-date-time-row,
#createView .edit-date-time-row,
#createView .create-date-time-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

#editMode .edit-date-time-row .edit-field,
#createView .edit-date-time-row .edit-field,
#createView .create-date-time-row .edit-field {
  flex: 0 0 auto;
  margin: 0;
}

#editMode .edit-date-time-row input[type="date"],
#editMode .edit-date-time-row input[type="time"],
#editMode .edit-date-time-row input[type="text"],
#createView .edit-date-time-row input[type="date"],
#createView .edit-date-time-row input[type="time"],
#createView .edit-date-time-row input[type="text"],
#createView .create-date-time-row input[type="date"],
#createView .create-date-time-row input[type="time"],
#createView .create-date-time-row input[type="text"] {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

#editMode input[type="date"],
#createView input[type="date"] {
  max-width: 112px;
}

#editMode input[type="time"],
#createView input[type="time"] {
  max-width: 78px;
}


/* Map search — force edit to behave like create */

#editMode .edit-map-search-row,
#createView .edit-map-search-row,
#createView .create-map-search-row {
  width: 100%;
  margin: 0 0 10px;
  display: flex;
  align-items: stretch;
  gap: 0;
}

#editMode .edit-map-search-row input,
#createView .edit-map-search-row input,
#createView .create-map-search-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  margin: 0;
  border: 1px solid var(--c27-grey-350);
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: var(--c27-grey-50);
  color: var(--c27-grey-500);
  font-size: 16px;
  font-weight: 500;
}

#editMode .edit-map-search-row button,
#createView .edit-map-search-row button,
#createView .create-map-search-row button {
  flex: 0 0 58px;
  width: 58px;
  min-width: 58px;
  height: 54px;
  min-height: 54px;
  margin: 0;
  padding: 0;
  border-radius: 0 12px 12px 0;
  background: var(--c27-black);
  color: var(--c27-white);
  box-shadow: none;
  font-size: 0;
}

/* =========================================================
   MEDWAY CONNECT START
   ========================================================= */

#medwayConnectView,
.mc-screen,
.mc-panel,
.mc-map-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#medwayConnectView {
  display: none;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 120px;
}

.mc-screen h1 {
  margin: 0 0 10px;
  color: var(--c27-black);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.08;
}
/* =========================================================
   CONNECT HOME CARDS
   ========================================================= */

.mc-widget-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 22px;
}

.mc-nav-card,
.mc-widget {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 18px;
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 52%,
    var(--c27-grey-200) 100%
  );
  color: var(--c27-black);
  border: 1px solid var(--c27-grey-300);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.mc-nav-card:hover,
.mc-widget:hover {
  transform: translateY(-1px);
}

.mc-nav-content {
  position: absolute;
  inset: 0;
  display: block;
}

.mc-nav-title {
  position: absolute;
  top: 6%;
  left: 6%;
  right: 6%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--c27-black);
  font-size: clamp(13px, 1.45vw, 17px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-nav-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--c27-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mc-nav-icon svg,
.mc-nav-icon svg * {
  width: 100%;
  height: 100%;
  fill: currentColor !important;
  stroke: none !important;
}

.mc-nav-value {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--c27-red);
  font-size: clamp(42px, 5.4vw, 62px);
  font-weight: 950;
  line-height: 0.9;
  text-align: center;
}

.mc-nav-chevron {
  position: absolute;
  right: 6%;
  top: 53%;
  transform: translateY(-50%);
  color: var(--c27-grey-700);
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 900;
  line-height: 1;
}

.mc-nav-subtitle {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  display: block;
  margin: 0;
  color: var(--c27-grey-700);
  font-size: clamp(10px, 1.1vw, 13px);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-align: left;
}
/* =========================================================
   CONNECT SUB PAGES
   ========================================================= */

.mc-sub-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.mc-sub-header h1 {
  margin: 0;
}

.mc-sub-header button {
  min-height: 42px;
  background: var(--c27-red);
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  color: var(--c27-white);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}

/* =========================================================
   CONNECT MAP
   ========================================================= */

.mc-map-panel {
  padding: 0;
  overflow: hidden;
}

.mc-map-summary {
  padding: 16px 18px;
  background: var(--c27-white);
  border-bottom: 1px solid var(--c27-grey-300);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.mc-map-summary strong {
  color: var(--c27-red);
  font-size: 30px;
  font-weight: 900;
}

.mc-map-summary span {
  color: var(--c27-black);
  font-size: 15px;
  font-weight: 900;
}

.mc-map-summary em {
  color: var(--c27-grey-700);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.mc-real-map {
  width: 100%;
  height: 520px;
  background: var(--c27-grey-150);
}

.mc-map-pin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c27-red);
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
  flex-shrink: 0;
}

.mc-map-pin::before,
.mc-map-pin-dot {
  display: none;
}

.mc-map-popup strong,
.mc-map-popup span {
  display: block;
}

.mc-map-popup strong {
  margin-bottom: 5px;
  color: var(--c27-black);
  font-size: 15px;
  font-weight: 900;
}

.mc-map-popup span {
  color: var(--c27-grey-700);
  font-size: 13px;
  font-weight: 700;
}

.mc-map-error {
  padding: 20px;
  color: var(--c27-red);
  font-weight: 900;
}

/* =========================================================
   CONNECT EXPORT
   ========================================================= */

.mc-export-success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 52%,
    var(--c27-grey-200) 100%
  );
  border: 1px solid var(--c27-grey-300);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.mc-export-success-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.mc-export-success-text strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c27-black);
}

.mc-export-success-text span {
  font-size: 0.9rem;
  color: var(--c27-grey-700);
  font-weight: 700;
}

.mc-export-open-button,
.mc-export-open-button:link,
.mc-export-open-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 150px;
  padding: 0 22px;
  background: var(--c27-red);
  color: var(--c27-white) !important;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none !important;
}
.mc-export-preview-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;

  margin: 0 0 18px;
  padding: 16px;

  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 52%,
    var(--c27-grey-200) 100%
  );

  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.mc-export-preview-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--c27-red);
  color: var(--c27-white);

  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-export-preview-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.mc-export-preview-card strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--c27-black);
  margin-bottom: 4px;
}

.mc-export-preview-card span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c27-grey-700);
  line-height: 1.35;
}
.mc-a4-page {
  position: relative;
  min-height: 1120px;
  padding-bottom: 54px;
  box-sizing: border-box;
}

.mc-print-footer {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;

  border-top: 5px solid var(--c27-red);
  padding-top: 8px;

  color: var(--c27-grey-700);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mc-print-footer span {
  display: block;
}

.mc-nav-value-icon {
  display: flex;
  align-items: center;
  margin: 6px 0 2px;
}

.mc-nav-value-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--c27-red);
  opacity: 0.8;
}

.mc-export-card .mc-nav-content{
    height:100%;
    display:flex;
    flex-direction:column;
}

.mc-export-download{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mc-export-download svg{
    width:72px;
    height:72px;
    fill:var(--c27-red);
    opacity:.9;
}

/* =========================================================
   PDF HTML PREVIEW
   ========================================================= */

.mc-export-preview {
  width: 100%;
  max-height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  background: var(--c27-grey-100);
  border-radius: 14px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.mc-export-preview .mc-a4-pack {
  width: 900px;
  max-width: none;
  margin: 0 auto;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .mc-export-success {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mc-export-open-button,
  .mc-export-open-button:link,
  .mc-export-open-button:visited {
    width: 100%;
  }

  .mc-export-preview {
    max-height: 420px;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .mc-export-preview .mc-a4-pack {
    width: 900px;
    margin: 0;
    transform: scale(0.32);
    transform-origin: top left;
  }

}

/* =========================================================
  PRINT START
   ========================================================= */

.mc-print-actions {
  max-width: 1000px;
  margin: 0 auto 18px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.mc-a4-pack {
  max-width: 900px;
  margin: 0 auto;
  color: var(--c27-black);
}

.mc-a4-page {
  background: white;
  padding: 22px;
  margin: 0 0 24px;
  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;
}

.mc-print-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 5px solid var(--c27-red);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.mc-print-logo {
  color: var(--c27-red);
  max-width: 280px;
}

.mc-print-logo svg,
.mc-print-logo svg * {
  fill: currentColor !important;
  color: currentColor !important;
}

.mc-print-header strong {
  display: block;
  color: var(--c27-red);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}

.mc-print-header span {
  display: block;
  color: var(--c27-black);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: right;
}

.mc-print-title-block p {
  margin: 0 0 4px;
  color: var(--c27-red);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.mc-print-title-block h1 {
  margin: 0 0 6px;
  font-size: 32px;
  line-height: 1.05;
}

.mc-print-title-block span {
  color: var(--c27-grey-700);
  font-size: 13px;
  font-weight: 700;
}

.mc-print-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.mc-print-stats div {
  background: var(--c27-red-soft);
  border: 1px solid #f3bfcb;
  border-radius: 14px;
  padding: 12px;
}

.mc-print-stats strong {
  display: block;
  color: var(--c27-red);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.mc-print-stats span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.mc-a4-map {
  width: 100%;
  height: 520px;
  border: 1px solid var(--c27-grey-300);
  border-radius: 16px;
  overflow: hidden;
}

.mc-print-number-pin {
  background: var(--c27-red);
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.28);
}

.mc-print-number-pin span {
  line-height: 1;
}

.mc-print-section-title {
  margin: 0 0 14px;
  color: var(--c27-red);
  font-size: 22px;
  font-weight: 900;
}

.mc-print-walk-list {
  display: grid;
  gap: 8px;
}

.mc-print-contact {
  display: grid;
  grid-template-columns: 42px 1fr 230px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--c27-grey-300);
  border-radius: 12px;
  padding: 10px;
  break-inside: avoid;
}

.mc-print-contact-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c27-red);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

.mc-print-contact-main strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
}

.mc-print-contact-main span,
.mc-print-contact-main em {
  display: block;
  font-size: 11px;
  color: var(--c27-grey-700);
  font-style: normal;
  font-weight: 600;
}

.mc-print-contact-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
}

@page {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
  }

  #topBar,
  #menuOverlay,
  #mainMenu,

.mc-a4-pack,
.mc-a4-page {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.mc-print-header strong,
.mc-print-title-block h1,
.mc-print-stats strong,
.mc-print-section-title,
.mc-print-contact-main strong,
.mc-print-contact-number,
.mc-performance-row strong,
.mc-performance-row b,
.mc-print-call-card h2 {
  font-weight: 700 !important;
}

.mc-print-header span,
.mc-print-title-block p,
.mc-print-title-block span,
.mc-print-contact-main span,
.mc-print-contact-main em,
.mc-print-contact-checks span,
.mc-print-stats span,
.mc-performance-row span,
.mc-print-call-card p {
  font-weight: 400 !important;
}

  .no-print {
    display: none !important;
  }

  #medwayConnectView {
    display: block !important;
  }

  .mc-a4-pack {
    max-width: none !important;
    margin: 0 !important;
  }

  .mc-a4-page {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    page-break-after: always;
  }

  .mc-a4-page:last-child {
    page-break-after: auto;
  }

  .mc-a4-map,
  .mc-a4-map-img,
  img.mc-a4-map {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .mc-print-contact {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

.mc-print-logo img {
  height: 34px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
}

/* =========================================================
   CONNECT STATES
   ========================================================= */

.mc-empty {
  margin: 0;
  color: var(--c27-grey-700);
  font-size: 16px;
  font-weight: 700;
}

.mc-error-card {
  background: var(--c27-red-soft);
  border-color: var(--c27-red);
  color: var(--c27-red);
  font-weight: 800;
}

/* =========================================================
   CONNECT RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .mc-stat-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .mc-two-column {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) {

  #medwayConnectView {
    padding: 0 12px 110px;
  }

  .mc-screen h1 {
    font-size: 30px;
    margin-bottom: 8px;
  }

  /* Home cards */

  .mc-widget-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }

  .mc-nav-card {
    border-radius: 16px;
  }

  /* Dashboard */

  .mc-stat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mc-two-column {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mc-panel {
    padding: 14px;
  }

  .mc-panel h2 {
    font-size: 21px;
  }

  /* Lists */

  .mc-performance-row,
  .mc-signup-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .mc-performance-row b,
  .mc-signup-row b {
    justify-self: start;
    font-size: 22px;
  }

}
/* =========================================================
   CONNECT PANELS / STATS / LISTS
   ========================================================= */

.mc-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.mc-stat-card,
.mc-panel,
.mc-loading-card,
.mc-error-card {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 52%,
    var(--c27-grey-200) 100%
  );
  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;
  padding: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.mc-panel {
  margin-bottom: 22px;
}

.mc-panel h2 {
  margin: 0 0 14px;
  color: var(--c27-black);
  font-size: 24px;
  font-weight: 900;
}

.mc-stat-card {
  text-align: center;
}

.mc-stat-value {
  color: var(--c27-red);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.mc-stat-label {
  margin-top: 8px;
  color: var(--c27-grey-700);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.mc-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}

.mc-performance-list,
.mc-recent-list {
  display: grid;
  gap: 10px;
}

.mc-performance-row,
.mc-signup-row {
  background: var(--c27-white);
  border: 1px solid var(--c27-grey-300);
  border-radius: 14px;
  padding: 13px 14px;
  display: grid;
  align-items: center;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 3px rgba(0,0,0,0.06);
}

.mc-performance-row {
  grid-template-columns: 1fr auto;
}

.mc-signup-row {
  grid-template-columns: 1.2fr 1fr auto;
}

.mc-performance-row strong,
.mc-signup-row strong {
  display: block;
  color: var(--c27-black);
  font-size: 17px;
  font-weight: 800;
}

.mc-performance-row span,
.mc-signup-row span {
  display: block;
  margin-top: 3px;
  color: var(--c27-grey-700);
  font-size: 13px;
  font-weight: 600;
}

.mc-performance-row b {
  color: var(--c27-red);
  font-size: 24px;
  font-weight: 900;
}

.mc-signup-row b {
  color: var(--c27-green);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
/* =========================================================
   CONNECT DASHBOARD
   ========================================================= */

.mc-dashboard-screen {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.mc-dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 22px;
}

.mc-dashboard-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.mc-dashboard-stat-grid .mc-stat-card,
.mc-dashboard-two-column .mc-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .mc-dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .mc-dashboard-two-column {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .mc-dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .mc-dashboard-stat-grid .mc-stat-card {
    width: auto;
    min-width: 0;
    padding: 14px;
  }

  .mc-dashboard-two-column {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .mc-dashboard-two-column .mc-panel {
    overflow: hidden;
  }

  .mc-dashboard-two-column .mc-panel h2 {
    font-size: 22px;
    line-height: 1.1;
  }
}
.mc-a4-map-img,
img.mc-a4-map {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}

/* =========================================================
   MEDWAY CONNECT END
   ========================================================= */
/* =========================================================
   MATERIALS START
   ========================================================= */

#materialsView,
.materials-screen,
.material-editor-layout,
.material-editor-main,
.material-qr-panel,
.material-pdf-full-width,
.material-pdf-preview-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#materialsView {
  display: none;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 120px;
}

.materials-screen {
  max-width: 1100px;
  margin: 0 auto;
}

.materials-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.materials-header-row h1 {
  margin: 0;
}

.materials-add-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

.materials-add-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.materials-toolbar {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );
  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.materials-search {
  margin: 0;
  background: var(--c27-white);
  border-radius: 14px;
}

.materials-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.material-card {
  width: 100%;
  min-height: 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );
  color: var(--c27-black);
  border: 1px solid var(--c27-grey-300);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
  cursor: pointer;
}

.material-card:hover {
  transform: translateY(-1px);
}

.material-icon-bubble {
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 50%;
  color: var(--c27-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.16);
}

.material-icon-bubble svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.material-icon-green { background: var(--c27-green); }
.material-icon-blue { background: var(--c27-blue); }
.material-icon-orange { background: var(--c27-orange); }
.material-icon-purple { background: var(--c27-purple); }
.material-icon-red { background: var(--c27-red); }

.material-card-main {
  min-width: 0;
}

.material-card-main h2 {
  margin: 0 0 6px;
  color: var(--c27-black);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
}

.material-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--c27-grey-700);
  font-size: 15px;
  font-weight: 700;
}

.material-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.material-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #8c939c;
  color: var(--c27-white);
  border: 1px solid rgba(92, 100, 110, 0.28);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 2px rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.10);
}

.material-pill::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 7px;
  right: 7px;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0)
  );
  pointer-events: none;
}

.material-pill-active,
.material-pill-ready {
  background: var(--c27-green);
}

.material-arrow {
  color: var(--c27-grey-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-arrow svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.materials-loading-card,
.materials-error-card,
.materials-empty-card,
.material-edit-card,
.material-qr-card {
  background: linear-gradient(
    to bottom,
    var(--c27-grey-75) 0%,
    var(--c27-grey-150) 50%,
    var(--c27-grey-200) 100%
  );
  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;
  padding: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.materials-loading-card,
.materials-empty-card {
  color: var(--c27-grey-700);
  font-size: 18px;
  font-weight: 700;
}

.materials-error-card {
  background: var(--c27-red-soft);
  color: var(--c27-red);
  border-color: var(--c27-red);
  font-weight: 800;
}

.material-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.material-editor-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.material-edit-card {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
}

.material-edit-card .edit-field,
.material-edit-card #materialAreaControl {
  margin: 0 !important;
  padding: 0 !important;
}

.material-edit-card .edit-field label {
  display: block;
  margin: 0 0 7px;
}

.material-edit-card input,
.material-edit-card select,
.material-edit-card textarea {
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

.material-edit-card textarea {
  min-height: 112px;
  display: block;
  resize: vertical;
}

.material-generated-card .detail-card-title,
.material-qr-card .detail-card-title {
  margin-bottom: 14px;
}

.material-generated-card .detail-card-title svg,
.material-qr-card .detail-card-title svg {
  color: var(--c27-red);
}

.material-generated-grid {
  margin-bottom: 14px;
}

.material-url-card {
  margin-top: 14px;
}

.material-url-card .copy-code-value {
  font-size: 15px;
  line-height: 1.35;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.material-qr-panel {
  position: static;
  top: auto;
  align-self: start;
}

.material-qr-card {
  text-align: center;
}

.material-qr-card .detail-card-title {
  justify-content: center;
}

.material-qr-box {
  width: 100%;
  max-width: 340px;
  margin: 0 auto 14px;
  padding: 16px;
  box-sizing: border-box;
  background: var(--c27-white);
  border: 1px solid var(--c27-grey-300);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 5px rgba(0,0,0,0.08);
}

.material-qr-box img {
  width: 100%;
  height: auto;
  display: block;
}

.material-secondary-button {
  width: 100%;
  margin-top: 10px;
  min-height: 52px;
  background: var(--c27-grey-600);
  color: var(--c27-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.material-secondary-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.material-pdf-full-width {
  margin-top: 22px;
  width: 100%;
}

.material-pdf-card {
  text-align: center;
}

.material-pdf-card .detail-card-title {
  justify-content: center;
  margin-bottom: 20px;
}

.material-pdf-preview-wrap {
  width: 100%;
  margin-bottom: 14px;
  overflow-x: hidden;
}

.material-pdf-preview {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 720px !important;
  border: 0;
  border-radius: 18px;
  background: #f2f2f2;
}

.material-pdf-meta {
  margin: 14px 0 16px;
  text-align: center;
}

.material-sticky-actions {
  max-width: none;
}

.material-archive-button {
  width: 100%;
  margin: 18px 0 0;
  background: var(--c27-grey-600);
  color: var(--c27-white);
}

.material-qr-centre-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 74px;
  height: 74px;
  border-radius: 12px;
  background: #c40f3a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-qr-centre-logo-inner {
  width: 52px;
  height: 52px;
}

.material-qr-centre-logo-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.material-qr-centre-logo-inner svg * {
  fill: #fff !important;
}

@media (max-width: 860px) {
  .materials-header-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .materials-add-button {
    width: 100%;
  }

  .material-editor-layout {
    grid-template-columns: 1fr;
  }

  .material-generated-grid {
    grid-template-columns: 1fr;
  }

  .material-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 14px;
  }

  .material-arrow {
    display: none;
  }

  .material-card-main h2 {
    font-size: 22px;
  }

  .material-icon-bubble {
    width: 54px;
    height: 54px;
    min-width: 54px;
  }

  .material-icon-bubble svg {
    width: 25px;
    height: 25px;
  }

  .material-pdf-preview {
    height: 600px !important;
  }
}

@media (max-width: 520px) {
  #materialsView {
    padding-bottom: 110px;
  }

  .material-card {
    align-items: start;
  }

  .material-meta-line {
    font-size: 13px;
  }

  .material-pill {
    height: 26px;
    min-height: 26px;
    padding: 0 10px;
    font-size: 9px;
  }

  .material-qr-box {
    max-width: 280px;
  }

  .material-pdf-preview {
    height: 520px !important;
  }
}

/* =========================================================
   MATERIAL LETTER PANEL
   ========================================================= */

.material-letter-panel {
  padding: 16px;
  display: block;
}

.material-letter-panel .detail-card-title {
  margin: 0 0 14px;
}

.material-letter-panel .edit-field {
  margin: 0 0 14px !important;
  padding: 0 !important;
}

.material-letter-panel .edit-field:last-of-type {
  margin-bottom: 14px !important;
}

.material-letter-panel .edit-field label {
  display: block;
  margin: 0 0 7px;
}

.material-letter-panel input,
.material-letter-panel textarea {
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

.material-letter-panel textarea {
  min-height: 112px;
  resize: vertical;
}

.material-letter-panel #materialLetterBody {
  min-height: 112px;
}

.material-generate-letter-button {
  width: 100%;
  min-height: 52px;
  margin-top: 0;
}

.material-swipe-card .material-card {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .material-swipe-card:hover .swipe-card-front {
    transform: translateX(-86px);
  }

  .material-swipe-card:hover {
    cursor: pointer;
  }

  .material-swipe-card:hover .swipe-card-actions {
    pointer-events: auto;
  }
}

.material-swipe-card .material-card {
  width: 100%;
}

.material-pill-missing {
  background: #8c939c;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .material-swipe-card:hover .swipe-card-front {
    transform: translateX(-86px);
  }
}

.material-swipe-card .material-card {
  width: 100%;
}

.material-pill-missing {
  background: #8c939c;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .material-swipe-card:hover .swipe-card-front {
    transform: translateX(-86px);
  }
}

.mc-export-hero-icon {
  display: none;
}
/* =========================================================
   MATERIALS END
   ========================================================= */

   


   /* =========================================================
   FORCE HEADER LOGO WHITE
   ========================================================= */

.app-header svg,
.header svg,
.top-bar svg,
.logo svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.app-header svg *,
.header svg *,
.top-bar svg *,
.logo svg * {
    fill: #ffffff !important;
    stroke: none !important;
}