/* FlareShift UI skin (aligned to FlareSync look + improved UX) */
:root{
  --bg:#111111;
  --surface:#121212;
  --card:#1e1e1e;
  --card2:#252525;
  --border:#333333;
  --border2:#444444;

  --text:#f5f5f5;
  --muted:#c7c7c7;

  --accent:#aa9450;
  --accentHover:#c5ad5f;
  --accentText:#111111;

  --ok:#22c55e;
  --danger:#ef4444;

  --radius:12px;
  --radiusSm:8px;
  --pill:999px;
}

*{box-sizing:border-box}
html,body{height:100%}

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

a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accentHover)}
code{
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
}

/* Layout */
.container{
  max-width: 1100px;
  margin:0 auto;
  padding: 20px 14px;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  background: rgba(17,17,17,0.98);
  border-bottom: 1px solid var(--border);
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand a{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--text);
}
.nav{display:flex; align-items:center; gap: 14px; flex-wrap: wrap}
.nav a{color: var(--muted); font-weight: 750}
.nav a:hover{color: var(--accent)}

/* Typography */
h1{margin:0 0 8px 0; font-size: 28px; font-weight: 900}
h2{margin:0 0 10px 0; font-size: 18px; font-weight: 850}
.muted{color: var(--muted); font-size: 13px}
.pill{
  display:inline-block;
  padding: 2px 8px;
  border-radius: var(--pill);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #2b2b2b;
  color: var(--muted);
  white-space: nowrap;
}

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.card.soft{background: var(--card2);}
hr.sep{border:none; border-top:1px solid var(--border); margin: 18px 0}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 16px;
  border-radius: var(--pill);
  border: 1px solid var(--border);
  background: #2b2b2b;
  color: var(--text);
  font-weight: 850;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{background:#303030; border-color:#3a3a3a; color: var(--text)}
.btn.primary{
  background: var(--accent);
  color: var(--accentText);
  border: none;
}
.btn.primary:hover{background: var(--accentHover); color: var(--accentText)}
.btn.secondary{
  background:#2b2b2b;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.danger{
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.35);
  color: #ffb3b3;
}
.btn.danger:hover{background: rgba(239,68,68,0.18)}
.btn.block{width: 100%}

/* Forms */
.form{
  display:grid;
  gap: 10px;
  max-width: 520px;
}
.form.wide{max-width: 760px}
.form label{
  display:grid;
  gap: 6px;
  font-weight: 650;
  color: var(--text);
}

input, select, textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radiusSm);
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
input::placeholder, textarea::placeholder{color:#777}
textarea{resize:vertical; min-height: 90px}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--accent);
}

/* Login / auth */
.auth-wrap{
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 0 6px 0;
}
.auth-card{padding: 22px 24px}
.auth-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.err{margin-top: 12px; font-size: 13px; color: #ffb3b3}

/* Flash messages */
.flash-wrap{display:grid; gap: 10px; margin: 12px 0}
.flash{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.flash.success{border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08)}
.flash.error{border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08)}

/* Tables */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table th{
  text-align:left;
  font-size: 12px;
  color: var(--muted);
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background: rgba(255,255,255,0.03)}

/* Utility rows */
.row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.right{display:flex; align-items:center; justify-content:flex-end; gap: 10px; flex-wrap: wrap}

/* Filters */
.filters{
  display:flex;
  align-items:flex-end;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin: 14px 0;
}
.filters label{display:grid; gap:6px; font-weight: 650}
.filters input, .filters select{min-width: 170px}

/* Calendar controls */
.cal-tools{
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.cal-arrows{
  display:flex;
  gap:10px;
}
.btn.arrow{
  padding: 0;
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

/* Calendar */
.calendar{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-grid{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-dow{
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-weight: 800;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cal-dow:nth-child(7){border-right:none}
.day-cell{
  min-height: 120px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 10px 12px 10px;
}
.day-today{
  background: rgba(170,148,80,0.10);
  box-shadow: inset 0 0 0 2px rgba(170,148,80,0.45);
}
.day-today .day-num{
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: rgba(170,148,80,0.18);
  color: var(--accent);
}
.day-cell:nth-child(7n){border-right:none}
.day-num{font-weight: 900; font-size: 13px; color: var(--text); opacity: 0.9}
.day-muted .day-num{opacity: 0.45}
.day-events{display:grid; gap: 6px; margin-top: 8px}
.event-pill{
  display:block;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  padding: 8px 9px;
  color: var(--text);
}
.event-pill:hover{border-color: rgba(170,148,80,0.65); border-left-color: var(--city, rgba(170,148,80,0.65)); background: rgba(170,148,80,0.08)}
.event-pill .time{color: var(--accent); font-weight: 900; font-size: 12px}
.event-pill .title{font-weight: 850; font-size: 13px; margin-top: 2px}
.event-pill .meta{color: var(--muted); font-size: 12px; margin-top: 2px}

/* Footer */
.footer{
  border-top: 1px solid var(--border);
  margin-top: 30px;
  padding: 18px 0;
  color: var(--muted);
  font-size: 12px;
}



/* ----------------------------
   City colour-coding
   ---------------------------- */
:root{
  --city-toronto: #94a3b8;
  --city-ottawa: #fb923c;
  --city-montreal: #60a5fa;
  --city-quebec-city: #c084fc;
  --city-winnipeg: #2dd4bf;
  --city-calgary: #f87171;
  --city-edmonton: #a78bfa;
  --city-vancouver: #4ade80;
}

.event-pill{ border-left-width: 4px; }
.event-pill{ border-left-color: var(--city, var(--border)); }
.event-pill .time{ display:flex; align-items:center; gap:8px; }
.event-pill .time::before{
  content:"";
  width:8px; height:8px;
  border-radius: 999px;
  background: var(--city, var(--accent));
  opacity: 0.95;
}

/* map cities to CSS variables */
.event-pill.city-toronto, .city-dot.city-toronto{ --city: var(--city-toronto); }
.event-pill.city-ottawa, .city-dot.city-ottawa{ --city: var(--city-ottawa); }
.event-pill.city-montreal, .city-dot.city-montreal{ --city: var(--city-montreal); }
.event-pill.city-quebec-city, .city-dot.city-quebec-city{ --city: var(--city-quebec-city); }
.event-pill.city-winnipeg, .city-dot.city-winnipeg{ --city: var(--city-winnipeg); }
.event-pill.city-calgary, .city-dot.city-calgary{ --city: var(--city-calgary); }
.event-pill.city-edmonton, .city-dot.city-edmonton{ --city: var(--city-edmonton); }
.event-pill.city-vancouver, .city-dot.city-vancouver{ --city: var(--city-vancouver); }

.city-dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius: 999px;
  margin-right: 8px;
  background: var(--city, var(--muted));
  vertical-align: middle;
}


.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;}