/* =============================
   Base Layout & Global Styles
============================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', sans-serif;
    background: url("/table/bg.png") no-repeat center center fixed;
  background-size: cover;
}



.page-wrapper {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  position: relative; /* ensures .exit-button stays within bounds */
}

/* =============================
   Header (Clean Left-Aligned)
============================= */
header {
  background-color: #1f2937;
  color: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left-align */
  gap: 12px;
}

header img {
  width: 64px;
  height: 64px;
}

header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: normal;
}


/* =============================
   Tab Navigation
============================= */
.tab-container {
  width: 100%;
  overflow: hidden;
  background-color: #f8f8f8;
}

.tab-links {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 2px solid #ccc;
  -webkit-overflow-scrolling: touch;
}

.tab-button {
  flex-shrink: 0;
  padding: 20px 16px;
  border: none;
  background-color: #f1f1f1;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-left: 1px solid #ddd;
}

.tab-button:first-child {
  border-left: none;
}

.tab-button.active {
  background-color: #e0e0e0;
  border-bottom: 2px solid #73862F;
  font-weight: 600;
}

/* =============================
   Tab Content Container
============================= */
.tab-content-container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 15px;
  margin: 0;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.scrollable-tab-content {
  height: calc(95dvh - 160px);
  overflow-y: auto;
  padding-bottom: 40px;
}

/* =============================
   Dashboard Tab
============================= */
.dashboard-wrapper {
  background-color: #fff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.dash-heading {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.clean-summary p {
  margin: 6px 0;
  font-size: 15px;
  color: #444;
}

.breakdown-text {
  font-size: 14px;
  color: #777;
  margin: 10px 0;
}

/* =============================
   Badge Display
============================= */
.badge-label {
  font-size: 14px;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 8px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background-color: #999;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.badge[data-days="30"] { background-color: #f39c12; }
.badge[data-days="60"] { background-color: #3498db; }
.badge[data-days="90"] { background-color: #27ae60; }
.badge[data-days="365"] { background-color: #e74c3c; }
.badge[data-days="1825"] { background-color: #8e44ad; }
.badge[data-days="3650"] { background-color: #34495e; }
.badge[data-days="7300"] { background-color: #b7950b; }

.badge[title] {
  cursor: help;
}

/* =============================
   Events Tab
============================= */
.events-wrapper {
  background-color: #fff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.events-wrapper h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.event-card {
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #73862F;
}

.event-card h3,
.event-card p,
.event-card .event-meta,
.event-card .event-description {
  font-size: 14px;
  margin: 4px 0;
  color: #444;
}

.event-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #1f2937;
}

/* =============================
   Preferences Tab
============================= */
.preferences-wrapper {
  background-color: #fff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.preferences-wrapper h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.preferences-wrapper label {
  display: block;
  margin: 12px 0 4px;
  font-size: 14px;
  color: #444;
  font-weight: 500;
}

.preferences-wrapper input,
.preferences-wrapper select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  background-color: #fafafa;
}

.preferences-wrapper select[multiple] {
  height: auto;
  min-height: 100px;
}

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

.pin-settings {
  margin-top: 16px;
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed #ccc;
}

.preferences-wrapper button {
  margin-top: 20px;
  padding: 10px 16px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: #73862F;
  color: #fff;
  transition: background-color 0.3s ease;
}

.preferences-wrapper button:hover {
  background-color: #0056b3;
}

.pref-button {
  background-color: #2563eb;
  color: white;
  padding: 10px 18px;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 10px;
  cursor: pointer;
}

.pref-button:hover {
  background-color: #1d4ed8;
}

#erasePrefs {
  background-color: #e74c3c;
  margin-left: 10px;
}

#erasePrefs:hover {
  background-color: #c0392b;
}

.empty-preferences {
  text-align: center;
  margin: 30px auto;
  padding: 20px;
}

/* NFC Permissions Block */
.nfc-permission-block {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  color: #333;
  max-width: 600px;
  margin: 20px auto;
  text-align: left;
}

.nfc-permission-block h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: #222;
}

.nfc-permission-block p,
.nfc-permission-block li {
  font-size: 15px;
  margin: 10px 0;
  line-height: 1.5;
}

.nfc-permission-block h4 {
  font-size: 16px;
  margin: 20px 0 10px;
  color: #73862F;
}

.nfc-permission-block ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

.nfc-permission-block button {
  padding: 10px 20px;
  font-size: 15px;
  background-color: #73862F;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.nfc-permission-block button:hover {
  background-color: #0056b3;
}

.theme-button {
  padding: 10px 16px;
  font-size: 14px;
  background-color: #73862F;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.theme-button:hover {
  background-color: #374151;
}

/* =============================
   Meetings Tab
============================= */
.meetings-wrapper {
  background-color: #fff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.meetings-wrapper h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.meeting-card {
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #73862F;
}

.meeting-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #1f2937;
}

.meeting-card p {
  font-size: 14px;
  color: #444;
  margin: 4px 0;
}

.meeting-card .drive-button {
  display: block;
  margin-top: 18px;
  padding: 12px 16px;
  background-color: #28a745;
  color: white;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  width: 100px;
  
}


.meeting-card .drive-button:hover {
  background-color: #1e7e34;
}

/* =============================
   Phone List Tab
============================= */
.phone-card {
  background-color: #f0f8ff;
  border-left: 4px solid #28a745;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.phone-card p {
  font-size: 14px;
  color: #333;
}

.phone-card a {
  color: #73862F;
  text-decoration: none;
}

.phone-card a:hover {
  text-decoration: underline;
}

.phone-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.phone-actions button {
  padding: 10px 16px;
  font-size: 14px;
  background-color: #73862F;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.phone-actions button:hover {
  background-color: #0056b3;
}

#clearPhoneList {
  background-color: #e74c3c;
}

#clearPhoneList:hover {
  background-color: #c0392b;
}

/* =============================
   About Tab
============================= */
.about-wrapper {
  padding: 20px;
  line-height: 1.6;
  color: #333;
}

.about-wrapper h2,
.about-wrapper h3 {
  color: #1f2937;
  margin-top: 0;
}

.about-wrapper p {
  margin-bottom: 1em;
}

.about-wrapper blockquote {
  border-left: 4px solid #1f2937;
  padding-left: 15px;
  font-style: italic;
  color: #555;
  margin: 1em 0;
}

.about-wrapper a {
  color: #1f2937;
  text-decoration: underline;
}

.about-wrapper a:hover {
  text-decoration: none;
}

/* =============================
   Exit Button (PWA Only)
============================= */
.exit-button {
  position: fixed;
  top: 16px;
  right: 16px;
  background-color: #f3f4f6; /* soft gray */
  color: #1f2937;
  border: none;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 999;
  transition: background-color 0.3s ease;
}

.exit-button:hover {
  background-color: #e5e7eb;
}


.exit-button:hover {
  background-color: #1d4ed8;
}


.exit-button:hover {
  background-color: #d1d5db;
}



.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #1f2937;
  color: white;
  padding: 15px 20px;
}

.app-header img {
  width: 64px;
  height: 64px;
}

.app-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: normal;
}


.header-left,
.header-center,
.header-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On small screens, allow wrapping */
@media (max-width: 480px) {
  .app-header {
    flex-direction: column;
    gap: 10px;
  }

  .header-left, .header-center, .header-right {
    justify-content: center;
    width: 100%;
  }

  .exit-button {
    margin-top: 5px;
  }
}



/*
-----------------------   Start of Table Design
*/

.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(31, 41, 55, 0.95); /* Dark tailwind-like background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-box {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.login-box h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #1f2937;
}

.login-box input {
  width: 70%;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.login-box button {
  background-color: #1f2937;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}


.dashboard-wrapper {
  padding: 20px;
}

.table-card {
  background-color: #f9f9f9;
  border-left: 4px solid #1f2937;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 16px;
  padding: 16px;
}

.table-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #1f2937;
}

.table-card p {
  margin: 4px 0;
  font-size: 14px;
}

.table-card .actions {
  margin-top: 10px;
}

.table-card button {
  margin-right: 10px;
  padding: 8px 14px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.table-card .start-btn {
  background-color: #1f2937;
  color: white;
}

.table-card .start-btn[disabled] {
  background-color: #aaa;
  cursor: not-allowed;
}

.table-card .settings-btn {
  background-color: #e2e8f0;
  color: #333;
}

.meeting-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: #73862F;
  margin-top: 4px;
  text-align: center;
}

.end-meeting-button {
  position: absolute;
  top: 10px;
  right: 8px;
  background-color: #d9534f;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 1000;
}














html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* No page scroll! */
}

.page-wrapper {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: url("/table/bg.png") no-repeat center center fixed;
  background-size: cover;
}

/* Make .tab-container fill space under header */
.tab-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden; /* Crucial: hide overflow, push scrolling down */
}


/* Content container always fills the rest */
.tab-content-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* This prevents jumps */
  padding: 0;
  margin: 0;
}

/* The ONLY scrollable area! */
#tab-content-area, .scrollable-tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Don't set hard height! Let flex handle it */
  padding: 0;
}


/* =============================
   Attendance Tab (Theme-Aligned)
============================= */
.attendance-summary {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 22px;
  font-size: 16px;
  color: #333;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

#attendanceCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  #attendanceCards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  #attendanceCards {
    grid-template-columns: 1fr;
  }
}

.attendance-card {
  background-color: #f9f9f9;
  border-left: 4px solid #73862F;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 0;
  padding: 16px 18px 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  transition: box-shadow 0.15s;
}
.attendance-card:hover {
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
}

.attendance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.attendance-header strong {
  color: #1f2937;
  font-size: 17px;
}
.attendance-header span {
  display: flex;
  gap: 9px;
  align-items: center;
}
.attendance-header label {
  font-size: 13px;
  color: #333;
  background: #ecf4df;
  border-radius: 7px;
  padding: 3px 9px;
  font-weight: 500;
}
.attendance-header input[type=checkbox] {
  margin-right: 5px;
  accent-color: #73862F;
}
.attendance-header .att-delete {
  background-color: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 10px;
  transition: background 0.2s;
}
.attendance-header .att-delete:hover {
  background-color: #c0392b;
}
.attendance-details {
  margin-top: 10px;
  font-size: 13px;
  color: #555;
  font-family: 'Segoe UI', sans-serif;
}
.att-status {
  margin-top: 8px;
  font-size: 12.5px;
  color: #888;
  font-style: italic;
  letter-spacing: 0.03em;
}

/* For Consistency with Other Cards */
.scrollable-tab-content, .events-wrapper {
  background: none !important;
}

/* Optionally: slightly highlight flagged */
.attendance-card input.att-flagged:checked ~ label {
  background: #eaeaea !important;
}


/* =============================
   Finalize Meeting Tab
============================= */
.finalize-wrapper {
  background-color: #fff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  position: relative;
}

.finalize-wrapper h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.finalize-wrapper label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #444;
  font-weight: 500;
}

.finalize-wrapper input[type="number"],
.finalize-wrapper textarea {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #fafafa;
  box-sizing: border-box;
}

.finalize-wrapper textarea {
  min-height: 100px;
  resize: vertical;
}

.finalize-wrapper #end-session-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
  background-color: #73862F;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.finalize-wrapper #end-session-btn:hover {
  background-color: #5a6b28;
}

@media (max-width: 600px) {
  .finalize-wrapper {
    margin: 12px;
    padding: 16px;
  }

  .finalize-wrapper h2 {
    font-size: 20px;
  }

  .finalize-wrapper #end-session-btn {
    padding: 10px 0;
    font-size: 14px;
  }
}

.dashboard-message {
  background-color: #fff8f8;
  border: 1px solid #f5c2c2;
  color: #a00;
  padding: 16px;
  border-radius: 8px;
  margin: 16px;
  text-align: center;
  font-size: 16px;
}

#exit-settings-btn {
  z-index: 999;
  background-color: #f87171; /* red tone */
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

#logout-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: #6b7280; /* Tailwind grey-500 */
  color: white;
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: background-color 0.2s ease-in-out;
}

#logout-btn:hover {
  background-color: #4b5563; /* Tailwind grey-600 */
}



/* =============================
   Phone Tab – polished styling
============================= */

.phone-title {
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
  margin: 6px 0 14px;
}

.qr-card {
  max-width: 360px;
  margin: 0 auto 16px;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 16px 20px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  border: 1px solid #e5e7eb;
  text-align: center;
}

.qr-card-header {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.qr-code canvas,
.qr-code img {
  display: block;
  margin: 0 auto;
}

/* Divider between QR and list */
.section-divider {
  display: flex;
  justify-content: center;
  margin: 18px 0 14px;
}
.section-hr {
  border: 0;
  height: 1px;
  width: 100%;
  max-width: 760px;
  background: linear-gradient(to right, transparent, #e5e7eb, transparent);
}

/* Header row with Add button */
.phone-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Card grid */
.phone-list-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 0;
}

@media (max-width: 900px) {
  .phone-list-cards {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}
@media (max-width: 600px) {
  .phone-list-cards {
    grid-template-columns: 1fr;
  }
}

/* Individual phone card */
.phone-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 14px 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
  position: relative;
}

.phone-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 6px;
  background: #73862F;
}

.phone-card p {
  margin: 4px 0;
  color: #1f2937;
  font-size: 14px;
}
.phone-card p strong {
  font-size: 16px;
  color: #111827;
}

/* Theme buttons */
.btn {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.12);
}

.btn-primary {
  background-color: #73862F;
  color: #fff;
}
.btn-primary:hover {
  background-color: #5a6b28;
}

.btn-outline {
  background-color: #fff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}
.btn-outline:hover {
  background-color: #f9fafb;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
}

/* Hide QR box cleanly when not needed (edit mode) */
#phone-qr-box[hidden],
.qr-card[hidden] {
  display: none !important;
}


/* =============================
   Phone List Tab (Theme-Aligned)
============================= */
.phone-wrapper {
  background-color: #fff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* QR panel centered with soft frame */
#phone-qr-box {
  text-align: center;
  margin: 8px 0 18px;
}
#phone-qr-box p {
  margin-bottom: 10px;
  color: #444;
  font-size: 14px;
}
#phone-qr-code {
  display: inline-block;
  padding: 14px;
  border: 1px solid #e5e7eb;      /* light frame to match theme */
  border-radius: 10px;
  background: #f9fafb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Add New centered */
.phone-header {
  display: flex;
  justify-content: center;
  margin: 14px 0 8px;
}

/* Reusable button styles for theme parity */
.btn {
  padding: 10px 16px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
}
.btn-primary {
  background-color: #73862F;
  color: #fff;
}
.btn-primary:hover {
  background-color: #5a6b28;
}
.btn-outline {
  background-color: #e2e8f0;
  color: #333;
  border: 1px solid #cbd5e1;
}
.btn-outline:hover {
  background-color: #dbe3ee;
}

/* Card grid like other tabs */
.phone-list-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .phone-list-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .phone-list-cards { grid-template-columns: 1fr; }
}

/* Card style aligned with events/attendance */
.phone-card {
  background-color: #f9f9f9;
  border-left: 4px solid #73862F;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 16px;
}
.phone-card p {
  font-size: 14px;
  color: #333;
  margin: 4px 0;
}
.phone-card a {
  color: #1f2937;
  text-decoration: none;
}
.phone-card a:hover {
  text-decoration: underline;
}

/* Edit button inside card (admin only) */
.edit-phone {
  margin-top: 10px;
}


/* =============================
   QR Check-In Tab – match Phone
============================= */

/* Wrapper matches .phone-wrapper */
.phone-wrapper,
.checkin-wrapper {
  background-color: #fff;
  margin: 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Title matches .phone-title */
.checkin-title {
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
  margin: 6px 0 14px;
}

/* QR panel and frame (mirror phone IDs) */
#checkin-qr-box {
  text-align: center;
  margin: 8px 0 18px;
}
#checkin-qr-box p {
  margin-bottom: 10px;
  color: #444;
  font-size: 14px;
}
#checkin-qr-code {
  display: inline-block;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Hide QR cleanly when not needed */
#checkin-qr-box[hidden],
.qr-card[hidden] {
  display: none !important;
}

/* Milestone highlight states */
.attendance-card.milestone-today  { background-color: #f5f3ff; border-left-color: #8b5cf6; }  /* "Birthday" vibe */
.attendance-card.milestone-30     { background-color: #fef9c3; border-left-color: #f59e0b; }  /* Yellow */
.attendance-card.milestone-60     { background-color: #f3f4f6; border-left-color: #9ca3af; }  /* Silver */
.attendance-card.milestone-90     { background-color: #fff1f2; border-left-color: #7f1d1d; }  /* Maroon (light) */
.attendance-card.milestone-6m     { background-color: #dbeafe; border-left-color: #2563eb; }  /* Blue */

/* Ensure border-left picks up the milestone color */
.attendance-card { border-left: 4px solid #73862F; }


/* --- Attendance card header line to match design --- */
.attendance-card { position: relative; }
.attendance-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.att-topline {
  display: flex;
  flex-wrap: wrap;        /* wraps clean date under name on narrow screens */
  gap: 12px;
  align-items: baseline;
}
.att-name { color: #111827; font-weight: 700; }
.att-clean b { color: #1f2937; }

/* Floating red delete button in top-right */
.att-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ef4444;   /* red-500 */
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.att-delete:hover { background-color: #dc2626; } /* red-600 */

/* Flag chips row (pale green boxes) */
.att-flagset {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.att-flag {
  background: #ecf4df;         /* your theme’s soft green */
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 78px;
  min-height: 54px;
  display: flex;
  flex-direction: column;       /* checkbox on top, label below */
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}
.att-flag input {
  margin: 0 0 4px 0;
  accent-color: #73862F;        /* theme green */
  transform: scale(1.1);
}
.att-flag span {
  font-size: 13px;
  color: #1f2937;
  font-weight: 600;
}

/* Metrics line spacing to mirror example */
.att-metrics { margin-top: 6px; }
.att-duration-note { color: #4b5563; margin-top: 2px; font-size: 13px; }

/* Keep your milestone colors */
.attendance-card.milestone-today  { background-color: #f5f3ff; border-left-color: #8b5cf6; }
.attendance-card.milestone-30     { background-color: #fef9c3; border-left-color: #f59e0b; }
.attendance-card.milestone-60     { background-color: #f3f4f6; border-left-color: #9ca3af; }
.attendance-card.milestone-90     { background-color: #fff1f2; border-left-color: #7f1d1d; }
.attendance-card.milestone-6m     { background-color: #dbeafe; border-left-color: #2563eb; }


/* compact top row + actions cluster */
.attendance-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.att-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.att-toggle {
  background-color: #e5e7eb;   /* gray */
  color: #111827;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.att-toggle:hover { background-color: #d1d5db; }

/* keep delete button floating/consistent */
.att-delete {
  position: relative; /* inside .att-actions now */
  background-color: #ef4444;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.att-delete:hover { background-color: #dc2626; }

/* smaller Clean Date text */
.att-clean { font-size: 12px; color: #374151; } /* set to ~12px; say if you want 10px or 8px exactly */

/* flag set collapses by default; shown via JS slideDown */
.att-flagset { display: none; margin-top: 10px; margin-bottom: 6px; }
.flags-open .att-flagset { display: flex; } /* ensures layout if JS toggles class without slide */







/* --- Compact attendance card layout (sectioned, no gaps) --- */
.attendance-card {
  padding: 0;                 /* no interior padding */
  overflow: hidden;           /* keep section backgrounds flush */
}

/* Top area: name band + clean date row stacked with no space */
.attendance-top { margin: 0; }

.att-topline {
  display: grid;
  grid-template-columns: auto 1fr;  /* [toggle] [name] */
  grid-auto-rows: auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #eef2ff;        /* name band tint */
  /* optional: stronger tint -> #e0e7ff */
}

.att-toggle {
  background: #e5e7eb;
  color: #111827;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.att-toggle:hover { background: #d1d5db; }

.att-name {
  font-weight: 700;
  color: #111827;
  /* make the name sit on same row as toggle */
}

/* Clean Date row: centered, tiny, lightly tinted.
   Spans full width beneath the name band with NO gap. */
.att-clean {
  grid-column: 1 / -1;
  display: block;
  text-align: center;
  padding: 6px 14px;
  margin: 0;
  background: #f8fafc;        /* light slate tint for readability */
  color: #374151;
  font-size: 10px;            /* "8 or so" — bump up/down if you want */
  border-top: 1px solid #eef2ff; /* subtle seam with name band */
}

/* Flags panel (collapsed by default)—kept tight, no extra margins */
.att-flagset {
  display: none;
  padding: 10px 14px;
  margin: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.att-flagset .att-flag {
  background: #ecf4df;
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 78px;
  min-height: 54px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  user-select: none; cursor: pointer;
}
.att-flagset .att-flag input { margin: 0 0 4px 0; accent-color: #73862F; transform: scale(1.1); }
.att-flagset .att-flag span { font-size: 13px; color: #1f2937; font-weight: 600; }

/* Metrics line (milestone text) — readable, tight spacing, no gaps */
.attendance-details.att-metrics {
  padding: 12px 14px 10px;
  margin: 0;
  background: #fff;           /* keep contrast high here */
  color: #111827;
  border-top: 1px solid #e5e7eb;
}
.att-duration-note { color: #4b5563; margin-top: 2px; font-size: 13px; }

/* Bottom notification banner */
.att-status {
  padding: 12px 14px;
  margin: 0;
  background: #f1f5f9;        /* offset banner */
  color: #475569;
  font-style: italic;
  border-top: 1px solid #e5e7eb;
}

/* Optional: when flags are opened via JS (class added), show as flex */
.flags-open .att-flagset { display: flex; gap: 12px; flex-wrap: wrap; }

/* Keep your milestone highlight colors */
.attendance-card.milestone-today  { background-color: #f5f3ff; border-left-color: #8b5cf6; }
.attendance-card.milestone-30     { background-color: #fef9c3; border-left-color: #f59e0b; }
.attendance-card.milestone-60     { background-color: #f3f4f6; border-left-color: #9ca3af; }
.attendance-card.milestone-90     { background-color: #fff1f2; border-left-color: #7f1d1d; }
.attendance-card.milestone-6m     { background-color: #dbeafe; border-left-color: #2563eb; }


/* Full-width name band */
.attendance-card { padding: 0; overflow: hidden; }
.attendance-top { margin: 0; }

.att-nameband {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  width: 100%;
  background: #eef2ff;               /* band tint */
}
.att-name { font-weight: 700; color: #111827; }

.att-toggle {
  background: #e5e7eb;
  color: #111827;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.att-toggle:hover { background: #d1d5db; }

/* Clean date on its own centered row, full width */
.att-clean-row {
  width: 100%;
  text-align: center;
  padding: 6px 14px;
  margin: 0;
  background: #f8fafc;               /* light readable tint */
  color: #374151;
  font-size: 10px;                    /* “8-ish”; tell me if you want 8px exactly */
  border-top: 1px solid #e5e7eb;
}

/* Keep the rest as you already have (flags, metrics, status).
   Ensure no gaps between sections */
.att-flagset { padding: 10px 14px; margin: 0; background: #fff; border-top: 1px solid #e5e7eb; }
.attendance-details.att-metrics { padding: 12px 14px 10px; margin: 0; background: #fff; border-top: 1px solid #e5e7eb; }
.att-status { padding: 12px 14px; margin: 0; background: #f1f5f9; color: #475569; font-style: italic; border-top: 1px solid #e5e7eb; }
.flags-open .att-flagset { display: flex; gap: 12px; flex-wrap: wrap; }



/* Card: no inner gaps; sections control their own padding */
.attendance-card { padding: 0; overflow: hidden; }

/* LINE 1 — name band */
.att-nameband{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  width:100%;
  background:#eef2ff;           /* band tint; swap to #ecf4df for green */
}
.att-toggle{
  background:#e5e7eb; color:#111827; border:none;
  padding:6px 10px; border-radius:8px; font-size:14px; line-height:1; cursor:pointer;
}
.att-toggle:hover{ background:#d1d5db; }
.att-name{ font-weight:700; color:#111827; }

/* LINE 2 — centered clean date strip */
.att-clean-row{
  width:100%;
  text-align:center;
  padding:6px 14px;
  margin:0;
  background:#f8fafc;           /* light, readable */
  color:#374151;
  font-size:10px;               /* set to 8px if you want it smaller */
  border-top:1px solid #e5e7eb;
}

/* Collapsible flags (hidden by default) */
.att-flagset{
  display:none; padding:10px 14px; margin:0;
  background:#fff; border-top:1px solid #e5e7eb;
}
.flags-open .att-flagset{ display:flex; gap:12px; flex-wrap:wrap; }
.att-flag{ background:#ecf4df; border-radius:10px; padding:8px 12px; min-width:78px; min-height:54px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; }
.att-flag input{ margin:0 0 4px 0; accent-color:#73862F; transform:scale(1.1); }
.att-flag span{ font-size:13px; color:#1f2937; font-weight:600; }
.att-flag-actions{ width:100%; margin-top:6px; }
.att-delete{ background:#ef4444; color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }
.att-delete:hover{ background:#dc2626; }

/* LINE 3 — milestone line */
.attendance-details.att-metrics{
  padding:12px 14px 10px; margin:0;
  background:#fff; color:#111827;
  border-top:1px solid #e5e7eb;
}

/* LINE 4 — message banner */
.att-status{
  padding:12px 14px; margin:0;
  background:#f1f5f9; color:#475569; font-style:italic;
  border-top:1px solid #e5e7eb;
}

/* Milestone highlight colors stay */
.attendance-card.milestone-today  { background-color:#f5f3ff; border-left-color:#8b5cf6; }
.attendance-card.milestone-30     { background-color:#fef9c3; border-left-color:#f59e0b; }
.attendance-card.milestone-60     { background-color:#f3f4f6; border-left-color:#9ca3af; }
.attendance-card.milestone-90     { background-color:#fff1f2; border-left-color:#7f1d1d; }
.attendance-card.milestone-6m     { background-color:#dbeafe; border-left-color:#2563eb; }


/* Small icon next to name */
.att-icon {
  margin-right: 6px;
  font-size: 14px;
  line-height: 1;
  vertical-align: -1px;
}

/* Default name band when no milestone */
.att-nameband { background: #eef2ff; }  /* you can change this default */

/* Make the name band color match the milestone’s side color */
.attendance-card.milestone-today  .att-nameband { background-color: #ede9fe; } /* purple-100 */
.attendance-card.milestone-30     .att-nameband { background-color: #fef3c7; } /* amber-100 */
.attendance-card.milestone-60     .att-nameband { background-color: #f3f4f6; } /* gray-100  */
.attendance-card.milestone-90     .att-nameband { background-color: #fee2e2; } /* rose-200  */
.attendance-card.milestone-6m     .att-nameband { background-color: #dbeafe; } /* blue-100  */

/* Yearly “birthday”: distinct celebratory tint + (optional) side color */
.attendance-card.milestone-year   .att-nameband { background-color: #fff7ed; } /* orange-50 */
.attendance-card.milestone-year   { border-left-color: #f59e0b; }             /* amber-500 */


/* Message row: keep look, add right-side chip */
.att-status {
  display: flex;                 /* put text left, chip right */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Ensure long messages wrap nicely and don't shove the chip */
.att-status-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Small “bubble” chip for flagged */
.flag-chip {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 9999px;         /* pill/bubble */
  background: #fee2e2;           /* soft red */
  color: #991b1b;
  border: 1px solid #fecaca;
  font-weight: 600;
  white-space: nowrap;
}


/* === Milestone color map (drop-in override) ===================== */
/* Default (regular) — light grey */
.attendance-card { border-left: 4px solid #d1d5db; }      /* gray-300 */
.att-nameband { background-color: #f3f4f6; }              /* gray-100 */

/* Milestone (30/60/90/6m) — light green */
.attendance-card.milestone-30,
.attendance-card.milestone-60,
.attendance-card.milestone-90,
.attendance-card.milestone-6m {
  border-left-color: #86efac;                              /* green-300 */
}
.attendance-card.milestone-30 .att-nameband,
.attendance-card.milestone-60 .att-nameband,
.attendance-card.milestone-90 .att-nameband,
.attendance-card.milestone-6m .att-nameband {
  background-color: #d1fae5;                               /* green-100 */
}

/* Birthday (yearly) — light blue */
.attendance-card.milestone-year {
  border-left-color: #93c5fd;                              /* blue-300 */
}
.attendance-card.milestone-year .att-nameband {
  background-color: #dbeafe;                               /* blue-100 */
}

/* Day 0 has a distinct welcome color (purple) */
.attendance-card.milestone-today { border-left-color: #c4b5fd; }        /* violet-300 */
.attendance-card.milestone-today .att-nameband { background-color: #ede9fe; }  /* violet-100 */

/* --- Attendance totals card (adds a milestone pill row) --- */
.att-summary {
  background:#fff;
  border-radius:12px;
  box-shadow:0 1px 4px rgba(15,23,42,.06);
  padding:16px;
}
.att-summary .row {
  display:grid;
  grid-template-columns: max-content 1fr auto; 
  gap:10px;
  align-items:center;
  padding:8px 0;
  border-top:1px solid #f1f5f9;
}
.att-summary .row:first-child { border-top:none; }
.att-summary .ico   {font-size:18px; line-height:1; text-align:center; opacity:.9; }
.att-summary .label { color:#334155; font-weight:600; }
.att-summary .value { color:#0f172a; font-weight:700; text-align:right; }

.att-summary .muted { opacity:.65; font-weight:500; }

/* milestone pills on the right side */
.att-summary .pills {
  display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;
}
.att-summary .pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px; font-weight:700; font-size:12px;
  background:#f1f5f9; color:#0f172a; border:1px solid #e5e7eb;
}
.att-summary .pill .emoji { line-height:1; }
.att-summary .pill--bday { background:#fef9c3; border-color:#fde68a; color:#92400e; }
.att-summary .pill--m9   { background:#ede9fe; border-color:#ddd6fe; color:#5b21b6; }
.att-summary .pill--m6   { background:#dbeafe; border-color:#bfdbfe; color:#1e40af; }
.att-summary .pill--d90  { background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.att-summary .pill--d60  { background:#e0e7ff; border-color:#c7d2fe; color:#3730a3; }
.att-summary .pill--d30  { background:#ffe4e6; border-color:#fecdd3; color:#9f1239; }
.att-summary .pill--day0 { background:#f5f3ff; border-color:#e9d5ff; color:#6d28d9; }

/* accessible, visually-hidden text (used if you keep a label but want it hidden) */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}







/* -------- Milestone theme tokens -------- */
:root{
  --ms-30:#F59E0B;   /* amber */
  --ms-60:#0EA5E9;   /* sky */
  --ms-90:#10B981;   /* emerald */
  --ms-6m:#6366F1;   /* indigo */
  --ms-9m:#8B5CF6;   /* violet */
  --ms-year:#EF4444; /* red */
  --ms-day0:#64748B; /* slate */
}

/* Card spine + name band base */
.attendance-card{ border-left:6px solid #e5e7eb; }
.attendance-card .att-nameband{
  background:#f8fafc;
  padding:8px 12px;
  border-bottom:1px solid #eef2f7;
  display:flex; align-items:center; gap:8px;
}
.attendance-card .att-name{ font-weight:700; }
.attendance-card .att-icon{ color:var(--tone, #64748B); }

/* --- Per-milestone mapping (spine + name band + icon tone) --- */
.attendance-card.milestone-30   { --tone:var(--ms-30);  border-left-color:var(--ms-30); }
.attendance-card.milestone-60   { --tone:var(--ms-60);  border-left-color:var(--ms-60); }
.attendance-card.milestone-90   { --tone:var(--ms-90);  border-left-color:var(--ms-90); }
.attendance-card.milestone-6m   { --tone:var(--ms-6m);  border-left-color:var(--ms-6m); }
.attendance-card.milestone-9m   { --tone:var(--ms-9m);  border-left-color:var(--ms-9m); }
.attendance-card.milestone-year { --tone:var(--ms-year);border-left-color:var(--ms-year); }
.attendance-card.milestone-today{ --tone:var(--ms-day0);border-left-color:var(--ms-day0); }

.attendance-card.milestone-30   .att-nameband{ background:#FFF7ED; color:#7C2D12; }
.attendance-card.milestone-60   .att-nameband{ background:#F0F9FF; color:#0C4A6E; }
.attendance-card.milestone-90   .att-nameband{ background:#ECFDF5; color:#065F46; }
.attendance-card.milestone-6m   .att-nameband{ background:#EEF2FF; color:#3730A3; }
.attendance-card.milestone-9m   .att-nameband{ background:#F5F3FF; color:#5B21B6; }
.attendance-card.milestone-year .att-nameband{ background:#FEF2F2; color:#991B1B; }
.attendance-card.milestone-today .att-nameband{ background:#F8FAFC; color:#0F172A; }

/* --- Summary pills (match the same colors) --- */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:9999px; font-size:12px;
  border:1px solid transparent; background:#fff; color:#0f172a;
}
.pill .emoji{ font-size:14px; line-height:1; }

.pill--d30 { background:#FFF7ED; border-color:#F59E0B33; color:#7C2D12; }
.pill--d60 { background:#F0F9FF; border-color:#0EA5E933; color:#0C4A6E; }
.pill--d90 { background:#ECFDF5; border-color:#10B98133; color:#065F46; }
.pill--m6  { background:#EEF2FF; border-color:#6366F133; color:#3730A3; }
.pill--m9  { background:#F5F3FF; border-color:#8B5CF633; color:#5B21B6; }
.pill--bday{ background:#FEF2F2; border-color:#EF444433; color:#991B1B; }
.pill--day0{ background:#F8FAFC; border-color:#64748B33; color:#0F172A; }



/* Inline controls in the name band */
.att-nameband {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.att-nameband .left { display:flex; align-items:center; gap:10px; }
.att-nameband .right { display:flex; align-items:center; gap:8px; }

/* Icon toggle buttons */
.ico-toggle {
  appearance:none; border:0; background:transparent; padding:2px 4px;
  font-size:18px; line-height:1; cursor:pointer; opacity:.45;
  transition:transform .05s ease, opacity .15s ease, color .15s ease;
}
.ico-toggle:hover { opacity:.75; }
.ico-toggle:active { transform:scale(.96); }
.ico-toggle[aria-pressed="true"] { color:#22c55e; opacity:1; }   /* on = green */
.ico-toggle.btn-flag[aria-pressed="true"] { color:#ef4444; }     /* flag = red */

/* Delete only when flagged */
.btn-delete { display:none; appearance:none; border:0; background:transparent; font-size:18px; cursor:pointer; }
.attendance-card.is-flagged .btn-delete { display:inline-block; }

/* keep your milestone icon style */
.att-icon { margin-right:6px; }


/* ==========================================================
   ATTENDANCE — Inline Controls & Name Row (clean overrides)
   Paste this block at the very bottom of your CSS
========================================================== */

:root {
  --icon-size: 18px;
  --icon-gap: 6px;
}

/* keep cards from letting controls overflow */
#attendanceCards .attendance-card { overflow: hidden; }

/* Name band layout: more room for long names */
.att-nameband{
  box-sizing: border-box;
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-width: 0;   /* allow flex truncation */
}
.att-nameband .left{
  display: flex; align-items: center;
  gap: var(--icon-gap);      /* 📖 🗣️ closer together */
  min-width: 0;
}
.att-nameband .right{
  display: flex; align-items: center;
  gap: 6px;                  /* 🚩 🗑️ closer together */
  margin-left: auto;
}

/* Long names truncate nicely */
.att-name{
  flex: 1 1 auto; min-width: 0;
  font-weight: 700; color: #111827;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Icon toggles — clearer OFF + obvious ON with check bubble */
.ico-toggle{
  position: relative;
  appearance: none; border: 0; background: transparent;
  padding: 2px 2px;
  font-size: var(--icon-size); line-height: 1;
  cursor: pointer;
  opacity: .45;              /* OFF state looks greyed */
  transition: opacity .15s ease, transform .05s ease, color .15s ease;
}
.ico-toggle:hover { opacity: .75; }
.ico-toggle:active { transform: scale(.96); }

/* ON state: green plus a tiny check bubble */
.ico-toggle[aria-pressed="true"] { color: #16a34a; opacity: 1; }
.ico-toggle[aria-pressed="true"]::after{
  content: "✓";
  position: absolute; top: -2px; right: -4px;
  width: 14px; height: 14px; border-radius: 999px;
  font-size: 10px; line-height: 14px; text-align: center;
  background: #16a34a; color: #fff;
  box-shadow: 0 0 0 2px #fff;  /* crisp on light backgrounds */
}

/* Flag uses red when ON; also gets the check bubble color */
.btn-flag[aria-pressed="true"] { color: #ef4444; }
.btn-flag[aria-pressed="true"]::after { background: #ef4444; }

/* Milestone emoji near name stays tight */
.att-icon { margin: 0 4px 0 2px; font-size: 14px; }

/* Trash: always visible, but disabled/grey until flagged */
.btn-delete{
  appearance: none; border: 0; background: transparent;
  font-size: 18px;
  cursor: not-allowed;
  opacity: .35; filter: grayscale(1);    /* disabled style */
  transition: opacity .15s ease, transform .05s ease;
}
.attendance-card.is-flagged .btn-delete,
.attendance-card[data-flagged="1"] .btn-delete{
  cursor: pointer; opacity: 1; filter: none;  /* enabled when flagged */
}
.btn-delete:hover { transform: scale(1.02); }

/* Make sure the right-side cluster never pushes out of bounds */
.att-nameband .right > * { margin-left: 0; }
.att-nameband { min-width: 0; }


/* Flag OFF = grey (emoji needs a filter); ON = red */
.ico-toggle.btn-flag{
  color: inherit;                 /* ignore any red defaults */
  filter: grayscale(1) brightness(.75) contrast(.9);
  opacity: .55;
}
.ico-toggle.btn-flag:hover{
  filter: grayscale(1) brightness(.85) contrast(.95);
  opacity: .8;
}

/* ON state overrides the grey filter */
.ico-toggle.btn-flag[aria-pressed="true"]{
  color: #ef4444;
  filter: none;
  opacity: 1;
}

/* keep the red check bubble for ON state */
.ico-toggle.btn-flag[aria-pressed="true"]::after{
  background: #ef4444;
}