/* site.css - ANME Event PA (test site)
   Goals:
   - Light/dark supports system preference by default
   - User can override via toggle (stored in localStorage)
   - Keep styles tidy and scoped
*/

/* 1) Theme variables
   Default: dark-ish (because admin tools look better that way)
   When [data-theme="light"] is set, we swap variables.
*/
:root{
  --bg: #31333a;
  --card: #474b56;
  --text: #e8ebf1;
  --muted: #b7c0d1;
  --border: rgba(255,255,255,.10);
  --shadow: rgba(0,0,0,.25);

  --blue: #0e76bc;
  --ring: rgba(14,118,188,.35);

  --header-h: 64px;
}

/* Light mode variables */
html[data-theme="light"]{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #141827;
  --muted: #4a5568;
  --border: rgba(15,23,42,.12);
  --shadow: rgba(15,23,42,.10);

  --ring: rgba(14,118,188,.22);
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Skip link for accessibility */
.skip-link{
  position:absolute;
  left:-999px;
  top:8px;
  background: var(--card);
  color: var(--text);
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:10px;
}
.skip-link:focus{ left:8px; z-index:9999; }

.wrap{
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-row{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color: var(--text);
}

.brand-logo{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.brand-logo img{
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.brand-text{ line-height: 1.05; }
.brand-name{ font-weight: 800; display:block; }
.brand-sub{ color: var(--muted); font-size: .9rem; display:block; }

.header-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.icon-btn{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: .45rem .6rem;
  cursor:pointer;
  box-shadow: 0 8px 18px var(--shadow);
}
.icon-btn:hover{ filter: brightness(1.03); }
.icon-btn:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--ring), 0 8px 18px var(--shadow);
}

.site-main{ padding: 1.25rem 0 2rem; }

.hero{
  padding: 1rem 0 1.25rem;
}
.hero p{ color: var(--muted); margin: .4rem 0 0; }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 10px 30px var(--shadow);
}

.site-footer{
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 1rem 0;
  color: var(--muted);
}

/* Off-canvas menu */
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 80;
}

.menu-panel{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 92vw);
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 30px var(--shadow);
  transform: translateX(102%);
  transition: transform .18s ease;
  z-index: 90;

  display:flex;
  flex-direction:column;
}

.menu-head{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
}

.menu-nav{
  padding: .75rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.menu-link{
  display:block;
  padding: .7rem .8rem;
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
  border: 1px solid transparent;
}
.menu-link:hover{
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}

.menu-foot{
  margin-top:auto;
  padding: .8rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

/* Menu open state (JS adds this class to <html>) */
html.menu-open .menu-backdrop{
  opacity: 1;
  pointer-events: auto;
}
html.menu-open .menu-panel{
  transform: translateX(0);
}


/* Sponsor dashboard layout */

.muted{ color: var(--muted); margin: .25rem 0 0; }

.sponsor-head-row{
  display:flex;
  align-items:center;
  gap: 1rem;
}
.sponsor-logo{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sponsor-logo img{
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.sponsor-name{
  margin: 0;
}

.meetings-grid{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: 1fr; /* One meeting per row */
  gap: 1rem;
}

.meeting-head{
  display:flex;
  gap: .75rem;
  align-items:center;
  margin-bottom: .75rem;
}
.badge{
  font-weight: 800;
  padding: .35rem .6rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  white-space: nowrap;
}
.meeting-title{
  margin: 0;
  font-size: 1.05rem;
}

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem; }
.chip{
  display:inline-flex;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  font-size: .9rem;
}

.divider{
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.attendee .divider{
  margin: .75rem 0;
  opacity: .6;
}

.section-title{
  margin: 0 0 .5rem;
}

.form-row{
  display:flex;
  gap: .75rem;
  align-items:flex-start;
  margin: .65rem 0;
  flex-wrap: wrap;
}
.form-row.tight{ margin-top: .35rem; }
.form-row label{
  min-width: 160px;
  font-weight: 700;
}
label.small{ min-width: 90px; font-weight: 700; }

.grow{ flex: 1 1 260px; }

.input, .select, .textarea{
  width: 100%;
  padding: .65rem .7rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text);
}
.input:focus, .select:focus, .textarea:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
}

.textarea{
  min-height: 90px;
  margin-top: .45rem;
  resize: vertical;
}

.hint{
  color: var(--muted);
  font-size: .9rem;
  margin-top: .35rem;
}

.checkline{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-weight: 700;
}

.actions{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  margin-top: .75rem;
}

.btn{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: .55rem .75rem;
  cursor:pointer;
  box-shadow: 0 8px 18px var(--shadow);
  font-weight: 800;
}
.btn:hover{ filter: brightness(1.03); }
.btn.primary{
  background: var(--blue);
  border-color: transparent;
  color: #fff;
}

/* Utility */
.is-hidden{ display:none !important; }

/* Make form rows stack label above input when space is tight */
@media (max-width: 700px){
  .form-row label{
    min-width: 100%;
  }
}


.attendee{
  padding-top: .25rem;
}


/* Make form controls less ridiculously wide on desktop */
.grow{
  flex: 1 1 260px;
  max-width: 720px; /* <- adjust this until it "feels right" */
}

/* If the meeting card is narrower (mobile), let inputs go full width */
@media (max-width: 700px){
  .grow{ max-width: none; }
}


.attendee-title{
  margin: .25rem 0 .5rem;
  font-size: .95rem;
  color: var(--muted);
  font-weight: 800;
}


/* Let textareas breathe a bit more than single-line fields */
.textarea{
  max-width: 820px;
}


/* Meeting selector bar (tabs) */
.meeting-bar{
  padding: .75rem;
}

.meeting-tabs{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.meeting-tab{
  appearance:none;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: .45rem .75rem;
  cursor:pointer;
  font-weight: 800;
}

.meeting-tab:hover{
  filter: brightness(1.03);
}

.meeting-tab.is-active{
  background: var(--blue);
  border-color: transparent;
  color: #fff;
}


/* Tab "dirty" indicator */
.meeting-tab.is-dirty{
  position: relative;
  padding-right: 1.25rem;
}
.meeting-tab.is-dirty::after{
  content: "";
  position: absolute;
  right: .55rem;
  top: 50%;
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #ffcc00;
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}

/* Modal */
.ep-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 200;
  padding: 1rem;
}

.ep-modal-card{
  width: min(520px, 95vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 50px var(--shadow);
  padding: 1rem;
}

.ep-modal-card h3{
  margin: 0 0 .5rem;
}

.ep-modal-actions{
  margin-top: 1rem;
  display:flex;
  gap: .6rem;
  justify-content:flex-end;
}


/* Toast 
.ep-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .6rem .85rem;
  border-radius: 999px;
  box-shadow: 0 14px 40px var(--shadow);
  z-index: 250;
  font-weight: 800;
}*/

/* Toast message */
.ep-toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .6rem .9rem;
  border-radius: 999px;
  box-shadow: 0 14px 40px var(--shadow);
  z-index: 300;
  font-weight: 800;
}