/* =============================
   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 */

