/* ====== Design tokens (Light Theme) ====== */
:root{
	--bg: #eef2f6;
	--card: #ffffff;
	--muted: #495469;
	--text: #0a0f16;
	--accent: #0fa986; /* stronger green for contrast */
	--accent-weak: rgba(15,169,104,0.20);
	--danger: #d62839;
	--outline: #cbd5e1;
	--focus: #1e63ff;
	--shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	--radius: 14px;
	--gap: 14px;
	--gap-lg: 20px;
	--fw-bold: 700;
	--fw-semibold: 600;
	--input-h: 46px;
	--btn-h: 48px;
	--btn-font: 16px;
	--maxw: 980px;
	--transition: 150ms ease;
}
/* ====== Base ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: light; }
body{
	margin: 0;
/*	background: radial-gradient(1200px 800px at 70% -10%, #eaf2ff 0%, var(--bg) 55%);*/
	background: linear-gradient(180deg, #e8edf2 0%, #f5f8fc 80%);
	color: var(--text);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

main{
	max-width: var(--maxw);
	margin: 20px auto 40px;
	padding: 0 16px;
}

/* ====== Headings & small text ====== */
h1{
	margin: 0 0 12px;
	font-weight: 700;
	letter-spacing: .2px;
	font-size: clamp(20px, 2.4vw + 10px, 30px);
}
p { margin: 8px 0; color: var(--muted); }
b { color: #16325b; }

/* ====== Buttons (unified) ====== */
.btn{
	--bgc: #f8fafc;
	--fg: var(--text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--btn-h);
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid var(--outline);
	background: var(--bgc);
	color: var(--fg);
	font-weight: var(--fw-semibold);
	font-size: var(--btn-font);
	cursor: pointer;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), opacity var(--transition);
	user-select: none;
}
.btn:hover{
	transform: translateY(-1px);
	box-shadow: var(--shadow);
	background: #eef3f8;
}
.btn:active{ transform: translateY(0); box-shadow: none; }
.btn:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled]{ opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-primary{
	--bgc: var(--accent);
	--fg: #fff;
	border-color: rgba(0,0,0,.08);
}

/* Default “Book It!” (disabled state) — light gray/white */
#save.btn-primary[disabled] {
	background: #f3f4f6;            /* soft neutral background */
	color: #9ba3b0;                 /* muted gray text */
	border-color: var(--outline);
	cursor: not-allowed;
	box-shadow: none;
	opacity: 1;                     /* ensure full opacity for clarity */
}

/* When enabled, restore green */
#save.btn-primary:not([disabled]) {
	background: var(--accent);
	color: #fff;
}
#save.btn-primary:not([disabled]):hover {
	background: #0c905a;            /* darker green on hover */
}
.btn-ghost{
	background: #fff;
	border-color: var(--outline);
}
.btn-danger{
	--bgc: var(--danger);
	--fg: #fff;
}
/* Make FullCalendar buttons inherit the unified look */
/* Replace the problematic all:unset reset with a safe explicit reset */
.fc .fc-button {
	appearance: none;
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-transform: inherit;
	line-height: normal;
	/* custom styles follow */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-h);
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--outline);
	background: #f5f8fd;
	color: var(--text);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: box-shadow var(--transition), transform var(--transition);
	text-transform: capitalize;
}
.fc .fc-button:hover{ box-shadow: var(--shadow); transform: translateY(-1px); }
.fc .fc-button:disabled{ opacity:.5; cursor:not-allowed; transform: none; box-shadow: none; }

/* ====== Collapsible "Who" panel ====== */
#who{
	position: relative;
	background: linear-gradient(180deg, #ffffff, #f7faff);
	border: 1px solid var(--outline);
	border-radius: var(--radius);
	padding: 16px;
	margin: 16px 0 var(--gap);
	box-shadow: var(--shadow);
}
#who .fields{
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: var(--gap);
	margin-top: 8px;
}
#who .fields span{ display: grid; gap: 6px; }
label{ color: #3a4b66; font-size: 13px; }
input, textarea {
	height: var(--input-h);
	font-size: 16px;
	background: #ffffff;
	border: 1px solid var(--outline);
	color: var(--text);
	border-radius: 10px;
	padding: 0 12px;
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input::placeholder, textarea::placeholder { color: #8a97ac; }
input:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(43,120,255,.18); }

/* Collapse behavior (mobile-first) */
#who.collapsed .fields,
#who.collapsed p.helper { display: none; }
#who .panel-bar{
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#who .panel-actions{ display: flex; gap: 8px; align-items: center; }
/* Compact Your Info when collapsed */
#who.collapsed{
  padding: 8px 12px;                 /* tighter card */
  border-radius: 12px;
}
#who.collapsed .panel-bar{ min-height: 40px; }
#who.collapsed h1{
  margin: 0;
  font-size: 18px;                   /* smaller heading */
  line-height: 1.1;
}
#who.collapsed .panel-actions .btn{
  height: 36px;                      /* smaller toggle */
  padding: 0 10px;
  font-size: 14px;
}
/* invalid highlight */
#who input.invalid,
#who textarea.invalid{
	border-color: #e63946 !important;
	box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}

/* gentle attention nudge */
@keyframes who-shake {
	0% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	50% { transform: translateX(4px); }
	75% { transform: translateX(-3px); }
	100% { transform: translateX(0); }
}
#who.shake{ animation: who-shake 300ms ease; }

/* “Ok!” button aligns with inputs */
#ok-btn{ height: var(--btn-h); }

/* Helper lines */
p.helper{ margin-top: 8px; }

/* ====== Controls bar (FLOAT bottom-right) ====== */
#controls{
	position: fixed;
	left: clamp(12px, 4vw, 24px);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
	z-index: 1000;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--outline);
	border-radius: 999px;
	box-shadow: var(--shadow);
	padding: 8px;
}
#controls > div{ display: flex; gap: 10px; }

/* ====== Legend (consistent with available areas) ====== */
.legend{
	position: fixed;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
	right: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,0.95); /* opaque card */
	border: 1px solid var(--outline);
	color: var(--text);
	box-shadow: var(--shadow);
	backdrop-filter: blur(6px);
	font-size: 15px;
	z-index: 9999;
}
/* Legend swatch should match .fc-available exactly */
.legend .swatch{
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--fc-bg-event-color);   /* same fill as available blocks */
  opacity: var(--fc-bg-event-opacity);
  border: 1px solid var(--accent); /* same dashed outline */
  box-shadow: none;                 /* remove inset glow */
}

/* ====== Calendar container ====== */
#calendar{
	background: var(--card);
	border: 1px solid var(--outline);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 8px;
}

/* ====== FullCalendar look & feel (light) ====== */
.fc{
	--fc-border-color: #e6edf5;
	--fc-page-bg-color: transparent;
	--fc-neutral-bg-color: #f5f8fd;
	--fc-list-event-hover-bg-color: rgba(0,0,0,.035);
	--fc-today-bg-color: rgba(255, 223, 128, 0.35); /* soft light yellow for today */
	--fc-event-bg-color: #eaf2ff;
	--fc-event-border-color: #dce8fb;
	--fc-event-text-color: #0b1220;
}
.fc .fc-toolbar.fc-header-toolbar{
	margin: 0 0 8px;
	padding: 6px 6px 2px;
	border-bottom: 1px solid var(--outline);
	background: #ffffff;
	border-radius: 12px;
}
.fc .fc-col-header-cell{
	padding: 8px 4px; background-color: rgba(255, 223, 128, 0.25); border: 0; color: #12223a; font-weight: var(--fw-bold);
}
.fc .fc-timegrid-slot{
	height: 24px; /* nice density */
}
.fc .fc-timegrid-slot-label{ color: #6a7790; }
.fc .fc-timegrid-now-indicator-line{ border-color: #ff4d4f; }
.fc .fc-timegrid-now-indicator-arrow{ border-top-color: #ff4d4f; }

/* Available blocks (your background availability rendering) */
.fc-available{
	background: var(--accent-weak) !important;
	border: 1px dashed var(--accent) !important;
}
.fc-available:hover{
	background: rgba(15,169,104,0.28) !important;
}
/* Selection outline (drag to create) */
.fc .fc-highlight{
	background: rgba(20,184,110,.18);
}

/* Busy events style */
.fc-event-title, .fc-event-main {
	font-weight: 700;
}
.fc-event { border-radius: 8px; overflow: hidden; }
.fc-event .fc-event-main{ padding: 2px 4px; }
/* ====== Responsive ====== */
@media (max-width: 860px){
	#who .fields{ grid-template-columns: 1fr; }
	.legend{ right: 6px; }
}

@media (max-width: 540px){
	body{ font-size: 15px; }
	#who{ padding: 12px; }
	#calendar{ padding: 6px; }
	.fc .fc-toolbar.fc-header-toolbar{ padding: 6px 2px 2px; }
}
/* Keep calendar toolbar on one line on iPhone 15 Pro (393px) and larger */
@media (min-width: 393px){
  .fc .fc-toolbar.fc-header-toolbar{
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;               /* no wrap */
  }
  .fc .fc-toolbar .fc-toolbar-chunk{
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;               /* no wrap per chunk */
  }
  .fc .fc-toolbar-title{
    font-size: clamp(18px, 3.2vw, 24px);  /* slightly smaller title */
    white-space: nowrap;
  }
  .fc .fc-button-group .fc-button,
  .fc .fc-button {
    height: 40px;                    /* shorter buttons */
    padding: 0 6px;                 /* narrower padding */
    font-size: 15px;                 /* still ≥16px on many DPIs, but readable */
  }
  /* Today button pill stays compact too */
  .fc .fc-today-button{
    padding: 0 8px;
  }
	.fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
		margin-left: 3px;
	}
}