/*────────────────────────────────────────────────────────────
  admin.css — Full Styles (Nav, Gallery, Reviews + Mobile Fixes)
────────────────────────────────────────────────────────────*/

/*──────── Fonts ────────*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Montserrat:wght@400;600&display=swap');

/*──────── Variables ────*/
:root {
  --bg: #f9f5e3;
  --fg: #333;
  --accent-pink: #d291bc;
  --accent-gold: #f1c40f;
  --highlight-yellow: #ffeaa7;
  --card-bg: #fff;
  --shadow: rgba(0,0,0,0.1);
  --radius: 12px;
  --transition: 0.3s;
  --font-sans: 'Montserrat', sans-serif;
  --font-serif: 'Playfair Display', serif;
}

/*──────── Global ───────*/
*,
*::before,
*::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}

/*──────── Top Nav ──────*/
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-gold));
  padding: 0.5rem 1rem;
  position: sticky; top: 0; z-index: 100;
}
.logo {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: #fff; margin: 0;
}
.burger-btn {
  display: none;
  background: transparent; border: none;
  font-size: 1.6rem; color: #fff;
  cursor: pointer; padding: 0.25rem;
}
.nav-links {
  display: flex; gap: 0.5rem;
  overflow-x: auto; scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links button {
  flex:0 0 auto;
  background: transparent; border: none;
  color: rgba(255,255,255,0.85);
  padding: 0.5rem 0.75rem; border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.nav-links button.active,
.nav-links button:hover {
  background: rgba(255,255,255,0.3); color: #fff;
}
.theme-btn {
  font-size:1.2rem;
  background: rgba(255,255,255,0.3);
  border:none; border-radius:6px;
  color:#fff; padding:0.4rem 0.6rem;
  transition:background var(--transition);
}
.theme-btn:hover { background:rgba(255,255,255,0.5); }
.main { padding:1.5rem; margin-top:1rem; }

/*──────── Gallery ──────*/
.gallery-header {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--highlight-yellow);
  padding:1rem 1.5rem; border-radius:var(--radius);
  box-shadow:4px 4px 12px var(--shadow);
}
.gallery-header h2 {
  margin:0; font-family:var(--font-sans);
  font-size:1.6rem; color:var(--accent-pink);
}
#uploadBtn {
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent-pink),var(--accent-gold));
  color:#fff; border:none; padding:0.5rem 1rem; border-radius:var(--radius);
  transition:filter var(--transition); z-index:1;
}
#uploadBtn:hover { filter:brightness(1.1); }

.gallery-view {
  display:flex; gap:1.5rem; margin-top:1rem;
}
.gallery-list {
  flex:3;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:1rem;
}
.gallery-item {
  position:relative;
  background:var(--card-bg);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:4px 4px 12px var(--shadow);
  transition:transform var(--transition),box-shadow var(--transition);
}
.gallery-item:hover {
  transform:translateY(-4px);
  box-shadow:6px 6px 18px var(--shadow);
}
.gallery-item img {
  width:100%; height:100px; object-fit:cover;
}
.gallery-item .delete-btn {
  position:absolute; top:0.4rem; right:0.4rem;
  background:var(--accent-gold); color:var(--fg);
  width:1.4rem; height:1.4rem; border:none;
  border-radius:50%; font-size:1rem; opacity:0.8;
  transition:opacity var(--transition); z-index:2;
}
.gallery-item .delete-btn:hover { opacity:1; }

.details-panel {
  flex:2; max-width:360px;
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:4px 4px 16px var(--shadow);
  padding:1.25rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:opacity var(--transition);
}
.details-panel.hidden { display:none; opacity:0; }
.details-panel h3 {
  margin-top:0;
  font-family:var(--font-sans);
  color:var(--accent-pink);
}
.details-panel label {
  display:block; font-size:0.9rem; color:var(--fg);
  margin-bottom:0.5rem;
}
.details-panel input,
.details-panel textarea {
  width:100%; padding:0.5rem;
  border:1px solid var(--shadow);
  border-radius:8px;
  font-family:var(--font-sans);
  margin-top:0.25rem;
}
.details-panel textarea { resize:vertical; min-height:80px; }
.details-panel .btn-row {
  display:flex; gap:0.75rem; margin-top:0.5rem;
}
.details-panel .btn-row button {
  flex:1;
  background:linear-gradient(135deg,var(--accent-pink),var(--accent-gold));
  color:#fff; border:none; padding:0.5rem; border-radius:8px;
  transition:filter var(--transition);
}
.details-panel .btn-row button:hover { filter:brightness(1.1); }

/*──────── Reviews ───────*/
#admin-reviews { font-family:var(--font-sans); }
#admin-reviews h2 {
  margin-bottom:0.75rem; color:var(--accent-pink);
}
.bulk-actions {
  display:flex; gap:0.5rem; margin-bottom:1rem;
}
.bulk-actions button {
  background:linear-gradient(135deg,var(--accent-pink),var(--accent-gold));
  color:#fff; border:none; padding:0.5rem 1rem;
  border-radius:var(--radius); transition:filter var(--transition);
}
.bulk-actions button:hover { filter:brightness(1.1); }

#admin-reviews table {
  width:100%; border-collapse:collapse;
  table-layout:fixed;
}
#admin-reviews th,
#admin-reviews td {
  padding:0.4rem; border-bottom:1px solid var(--shadow);
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
  font-size:0.85rem;
}
#admin-reviews .review-select {
  transform:scale(1.2);
}
#admin-reviews .comment-cell {
  background:var(--highlight-yellow);
  border-radius:6px; padding:0.4rem; cursor:pointer;
  transition:background var(--transition);
  word-break:break-word; white-space:normal;
  font-size:0.85rem;
}
#admin-reviews .comment-cell:hover {
  background:#ffe0a3;
}
#admin-reviews .approve,
#admin-reviews .delete {
  background:transparent; border:none;
  font-weight:600; color:var(--accent-pink);
  padding:0.25rem 0.5rem; font-size:0.85rem;
  transition:color var(--transition);
}
#admin-reviews .approve:hover { color:var(--accent-gold); }
#admin-reviews .delete:hover  { color:#e74a3b; }

/*──────── Mobile Fixes ───*/
@media (max-width: 768px) {
  /* burger/button nav */
  .burger-btn { display:block; }
  .nav-links {
    display:none; flex-direction:column;
    background:rgba(0,0,0,0.8); /* dark backdrop */
    position:absolute; top:100%; left:0; right:0;
    padding:0.5rem 1rem; box-shadow:0 4px 8px rgba(0,0,0,0.2);
    z-index:99;
  }
  .top-nav.nav-open .nav-links { display:flex; }
  .nav-links button {
    width:100%; text-align:left; margin:0.25rem 0;
    color:#fff;
  }

  /* gallery stacks */
  .gallery-view { flex-direction:column; }
  .gallery-list {
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  }
  .gallery-item img { height:80px; }

  /* reviews table → scroll-free small cards */
  #admin-reviews table,
  #admin-reviews thead,
  #admin-reviews tbody,
  #admin-reviews th,
  #admin-reviews td,
  #admin-reviews tr {
    display:block;
  }
  #admin-reviews thead tr { position:absolute; top:-9999px; left:-9999px; }
  #admin-reviews tr {
    margin-bottom:0.75rem; padding:0.5rem;
    border:1px solid var(--shadow); border-radius:var(--radius);
    background:#fff;
  }
  #admin-reviews td {
    padding-left:50%; position:relative; white-space:normal;
  }
  #admin-reviews td:before {
    position:absolute; top:0.5rem; left:0.75rem;
    width:45%; padding-right:0.5rem;
    font-weight:bold; white-space:nowrap;
  }
  #admin-reviews td:nth-of-type(1):before { content:"Select"; }
  #admin-reviews td:nth-of-type(2):before { content:"Date"; }
  #admin-reviews td:nth-of-type(3):before { content:"Names"; }
  #admin-reviews td:nth-of-type(4):before { content:"Rating"; }
  #admin-reviews td:nth-of-type(5):before { content:"Comment"; }
  #admin-reviews td:nth-of-type(6):before { content:"Approved?"; }
  #admin-reviews td:nth-of-type(7):before { content:"Actions"; }
}
@media screen and (max-width: 768px) {
  #admin-reviews .comment-cell::before {
    content: "Comment:";
    display: block;
    font-weight: bold;
    color: var(--accent-pink);
    font-size: 0.8rem;
    line-height: 1.1;
    margin-bottom: 0.1rem;
    margin-top: -0.4rem; /* 👈 Pull it upward slightly */
  }

  #admin-reviews .comment-cell {
    background: #fff3ce;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    word-break: break-word;
    white-space: normal;
  }

  #admin-reviews table td {
    vertical-align: top;
  }
}
/*────────────────────────────────────────────
  Bookings Section
────────────────────────────────────────────*/
#bookingsTableUp,
#bookingsTablePast {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 4px 4px 12px var(--shadow);
  overflow: hidden;
}

#bookingsTableUp th,
#bookingsTablePast th,
#bookingsTableUp td,
#bookingsTablePast td {
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--shadow);
  text-align: left;
}

#bookingsTableUp th,
#bookingsTablePast th {
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-gold));
  color: #fff;
  font-weight: 600;
}

#bookingsTableUp td a,
#bookingsTablePast td a {
  color: var(--accent-pink);
  text-decoration: underline;
}

#bookingsTableUp select,
#bookingsTablePast select {
  padding: 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--shadow);
  font-size: 0.8rem;
}

#bookingsTableUp button,
#bookingsTablePast button {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold));
  color: #fff;
  cursor: pointer;
  transition: filter 0.2s;
}

#bookingsTableUp button:hover,
#bookingsTablePast button:hover {
  filter: brightness(1.1);
}

.text-success {
  color: var(--accent-gold);
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  #bookingsTableUp,
  #bookingsTablePast {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  #bookingsTableUp table,
  #bookingsTablePast table {
    min-width: 600px; /* Ensures table doesn't squish */
  }

  #bookingsTableUp th,
  #bookingsTablePast th,
  #bookingsTableUp td,
  #bookingsTablePast td {
    font-size: 0.75rem;
    padding: 0.5rem;
    white-space: nowrap;
  }

  #bookingsTableUp button,
  #bookingsTablePast button {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  #bookingsTableUp select,
  #bookingsTablePast select {
    font-size: 0.75rem;
    padding: 0.2rem;
  }
}

/*────────────────────────────────────────────
  Availability Section
────────────────────────────────────────────*/
/*────────────────────────────────────────────
  Availability Manager — Full Styling
────────────────────────────────────────────*/
.av-controls {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.av-controls label {
  font-weight: 600;
  font-size: 0.9rem;
}
.av-controls input[type="date"] {
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--shadow);
  font-size: 0.85rem;
}
.av-controls button {
  padding: 0.4rem 0.8rem;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold));
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
}
.av-controls button:hover {
  filter: brightness(1.1);
}
.help-text {
  font-size: 0.8rem;
  color: #666;
}

.av-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  background: var(--card-bg);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 4px 4px 12px var(--shadow);
}
.day-header {
  font-weight: bold;
  text-align: center;
  font-size: 0.9rem;
  color: var(--accent-pink);
}
.date-sub {
  font-size: 0.75rem;
  color: #999;
  margin-top: 0.25rem;
}
.time-cell {
  font-weight: bold;
  text-align: right;
  padding-right: 0.5rem;
  font-size: 0.8rem;
  color: var(--fg);
}
.av-tile {
  text-align: center;
  padding: 0.4rem;
  border-radius: 6px;
  background: #eee;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
}
.av-tile.active {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-pink));
  color: #fff;
  font-weight: bold;
}
.av-tile:hover {
  background: var(--highlight-yellow);
}
.av-tile.past-date {
  background: #eee;
  color: #999;
  font-style: italic;
  pointer-events: none;
  text-align: center;
}
.av-tile.today {
  border: 2px solid var(--accent-gold);
}
.av-tile.override-active {
  outline: 2px dashed var(--accent-pink);
}

.av-actions {
  margin-top: 1rem;
}
.av-actions button {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold));
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 0.2s;
}
.av-actions button:hover {
  filter: brightness(1.1);
}

.av-legend {
  margin-top: 1rem;
  font-size: 0.85rem;
  display: flex;
  gap: 1.5rem;
}
.av-legend .legend {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  border-radius: 4px;
}
.legend.past { background: #eee; }
.legend.override { outline: 2px dashed var(--accent-pink); }
.legend.today { border: 2px solid var(--accent-gold); }

/*** AVAILABILTY SECTION THAT NEEDS WORK*/

@media screen and (max-width: 1024px) {
  .av-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 0.8rem;
    gap: 0.4rem;
  }

  .av-grid header {
    font-size: 0.8rem;
  }

  .av-tile {
    font-size: 0.7rem;
    padding: 0.3rem;
  }

  .time-cell {
    font-size: 0.75rem;
    text-align: center;
    padding-right: 0;
  }

  #saveAvailability {
    font-size: 0.85rem;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .av-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .av-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .av-grid header {
    font-size: 0.75rem;
  }

  .av-tile {
    font-size: 0.65rem;
  }

  #saveAvailability {
    font-size: 0.8rem;
  }
}
/* default: hide mobile override, show desktop grid */
.av-mobile-container { display: none; }

/* on small screens: hide grid, show mobile override */
@media (max-width: 600px) {
  .av-grid-container  { display: none; }
  .av-mobile-container {
    display: block;
    margin: 1rem 0;
  }
  #mobileDaySelect {
    width: 100%;
    padding: .5rem;
    border-radius: 6px;
    border: 1px solid var(--shadow);
    margin-bottom: .5rem;
  }
  #avMobileList {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .av-mobile-tile {
    flex: 1 1 45%;
    padding: .5rem;
    background: #eee;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    font-size: .85rem;
  }
  .av-mobile-tile.active {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-pink));
    color: #fff;
  }
  .av-mobile-tile.disabled {
    background: var(--clr-disabled);
    color: #999;
    cursor: not-allowed;
  }
}

/* 1) Always allow horizontal scroll on the grid container */
.av-grid-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 2) Make each column at least 80px wide, then flex-fill */
.av-grid {
  display: grid;  
  grid-template-columns: repeat(8, minmax(80px, 1fr));
  gap: 0.5rem;
}

/* 3) On tablets, show 4 columns */
@media (max-width: 1024px) {
  .av-grid {
    grid-template-columns: repeat(4, minmax(80px, 1fr));
  }
}

/* 4) On small phones, show 2 columns */
@media (max-width: 600px) {
  .av-grid {
    grid-template-columns: repeat(2, minmax(80px, 1fr));
  }
}

/* 5) Extra-narrow: one column */
@media (max-width: 400px) {
  .av-grid {
    grid-template-columns: repeat(1, minmax(80px, 1fr));
  }
}

/*** AVAILABILTY SECTION THAT NEEDS WORK*/



/*────────────────────────────────────────────
  Invoices Section
────────────────────────────────────────────*/
.invoice-form {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 4px 4px 12px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.invoice-form h2 {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  color: var(--accent-pink);
  margin-bottom: 0.5rem;
}

.invoice-form label {
  font-size: 0.9rem;
  color: var(--fg);
  display: block;
  margin-bottom: 0.5rem;
}

.invoice-form input,
.invoice-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--shadow);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  margin-top: 0.25rem;
}

.invoice-form table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.invoice-form th,
.invoice-form td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--shadow);
  font-size: 0.85rem;
}

.item-row input {
  width: 100%;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--shadow);
}

.removeItem {
  background: var(--accent-gold);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

#addItem {
  margin-top: 0.5rem;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold));
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 0.2s;
}

#addItem:hover {
  filter: brightness(1.1);
}

.btn-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.btn-row button {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold));
  color: #fff;
  cursor: pointer;
  transition: filter 0.2s;
}

.btn-row button:hover {
  filter: brightness(1.1);
}

/* Mobile */
@media (max-width: 768px) {
  .invoice-form {
    padding: 1rem;
  }

  .invoice-form table,
  .invoice-form thead,
  .invoice-form tbody,
  .invoice-form th,
  .invoice-form td,
  .invoice-form tr {
    display: block;
  }

  .invoice-form tr {
    margin-bottom: 1rem;
  }

  .invoice-form td {
    padding-left: 50%;
    position: relative;
  }

  .invoice-form td:before {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    width: 45%;
    font-weight: bold;
    color: var(--accent-pink);
  }

  .btn-row {
    flex-direction: column;
  }
}
/*────────────────────────────────────────────
  Email Center
────────────────────────────────────────────*/
.email-center {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 4px 4px 12px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.email-center h2 {
  font-size: 1.5rem;
  color: var(--accent-pink);
}

.email-center label {
  font-size: 0.9rem;
  color: var(--fg);
  display: block;
}

.email-center input,
.email-center textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--shadow);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  margin-top: 0.25rem;
}

#sendCustomEmail {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold));
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 0.2s;
}

#sendCustomEmail:hover {
  filter: brightness(1.1);
}

.email-center h3 {
  margin-top: 2rem;
  font-size: 1.2rem;
  color: var(--accent-pink);
}

.email-center table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.email-center th,
.email-center td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--shadow);
  font-size: 0.85rem;
}

/* Mobile */
@media (max-width: 768px) {
  .email-center {
    padding: 1rem;
  }

  .email-center table,
  .email-center thead,
  .email-center tbody,
  .email-center th,
  .email-center td,
  .email-center tr {
    display: block;
  }

  .email-center tr {
    margin-bottom: 1rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 2px 2px 8px var(--shadow);
    padding: 0.5rem;
  }

  .email-center td {
    padding-left: 50%;
    position: relative;
    white-space: normal;
    font-size: 0.75rem;
  }

  .email-center td:before {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    width: 45%;
    font-weight: bold;
    color: var(--accent-pink);
  }

  .email-center td:nth-of-type(1):before { content: "To"; }
  .email-center td:nth-of-type(2):before { content: "Subject"; }
  .email-center td:nth-of-type(3):before { content: "Event"; }
  .email-center td:nth-of-type(4):before { content: "Timestamp"; }
}
/*────────────────────────────────────────────
  Analytics Dashboard
────────────────────────────────────────────*/
#viewContainer h2.gradient-bg {
  font-size: 1.6rem;
  font-weight: bold;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 4px 4px 12px var(--shadow);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.card h3 {
  font-size: 1.2rem;
  color: var(--accent-pink);
  margin-bottom: 0.75rem;
}

.card table {
  width: 100%;
  border-collapse: collapse;
}

.card th,
.card td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--shadow);
  font-size: 0.85rem;
  text-align: left;
}

.card th {
  background: var(--highlight-yellow);
  font-weight: 600;
}

.card td strong {
  color: var(--accent-pink);
}

.btn-row {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.btn-row button {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold));
  color: #fff;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 0.2s;
}

.btn-row button:hover {
  filter: brightness(1.1);
}

/* Heatmap cell */
.views-cell {
  font-weight: bold;
  border-radius: 6px;
  padding: 0.4rem;
  color: var(--fg);
  transition: background 0.2s;
}

/* Realtime Feed */
#feedStream {
  list-style: none;
  padding-left: 0;
  font-size: 0.85rem;
}

#feedStream li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--shadow);
}

#feedStream li strong {
  color: var(--accent-pink);
}

/* Chart canvas */
canvas {
  width: 100% !important;
  height: 200px !important;
}

/* Mobile */
@media (max-width: 768px) {
  .card {
    padding: 1rem;
  }

  .card table,
  .card thead,
  .card tbody,
  .card th,
  .card td,
  .card tr {
    display: block;
  }

  .card tr {
    margin-bottom: 1rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 2px 2px 8px var(--shadow);
    padding: 0.5rem;
  }

  .card td {
    padding-left: 50%;
    position: relative;
    white-space: normal;
    font-size: 0.75rem;
  }

  .card td:before {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    width: 45%;
    font-weight: bold;
    color: var(--accent-pink);
  }

  #topPagesBody td:nth-of-type(1):before { content: "Page"; }
  #topPagesBody td:nth-of-type(2):before { content: "Views"; }

  #referrerBody td:nth-of-type(1):before { content: "Source"; }
  #referrerBody td:nth-of-type(2):before { content: "Views"; }

  #geoStatsBody td:nth-of-type(1):before { content: "Country"; }
  #geoStatsBody td:nth-of-type(2):before { content: "City"; }
  #geoStatsBody td:nth-of-type(3):before { content: "Views"; }
}
.av-tile.past-date {
  background: #eee;
  color: #999;
  font-style: italic;
  pointer-events: none;
  text-align: center;
}
.av-tile.past-date {
  background: #eee;
  color: #999;
  font-style: italic;
  pointer-events: none;
  text-align: center;
}

.av-tile.today {
  border: 2px solid var(--accent-gold);
}

.av-tile.override-active {
  outline: 2px dashed var(--accent-pink);
}

.av-legend {
  margin-top: 1rem;
  font-size: 0.85rem;
  display: flex;
  gap: 1.5rem;
}
.av-legend .legend {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  border-radius: 4px;
}
.legend.past { background: #eee; }
.legend.override { outline: 2px dashed var(--accent-pink); }
.legend.today { border: 2px solid var(--accent-gold); }


:root[data-theme='light'] {
  --bg: #fff;
  --fg: #333;
  /* other light‐mode vars */
}

:root[data-theme='dark'] {
  --bg: #222;
  --fg: #eee;
  /* other dark‐mode overrides */
}

body {
  background: var(--bg);
  color: var(--fg);
}#map {
  width: 100%;
  height: 300px;
}