:root {
  --brand:#003366; --bg:#f7f7f7; --border:#ddd; --danger:#b00020; --ok:#0a7a0a; --text:#222; --card:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff}
header{background:var(--brand);color:#fff;padding:10px 16px;}
main{padding:16px;max-width:1100px;margin:0 auto}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
button{padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-weight:600}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
/**.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:3px}
.grid.full{grid-template-columns:1fr}
.grid .span-2{grid-column:1 / -1} */
input,select,textarea{width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:16px}
.long-field{width:500px} .mid-field{width:280px} .where-multiline{width:600px;resize:vertical;line-height:1.35;white-space:pre-wrap}
/*---------------------------*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/Roboto-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/static/fonts/Roboto-Bold.woff2') format('woff2');
}

body {
  font-family: 'Roboto', sans-serif;
}




/*---------------------------*/
/* header visuals */
.logo{display:block;margin:8px auto 6px;max-width:240px;height:auto}
header{position:relative}
.ek-mark{position:absolute;left:12px;top:8px;width:36px;height:auto;opacity:.9}

/* controls layout */
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.controls .grow{flex:1}
button.secondary{background:#e9eef8;border-color:#c5d2ee}
button.danger{background:#fee;border-color:#f6c;color:#900}
label.notify input{width:260px}
/*---------------------------*/

.vspacer{margin-top:12px}
.mb2{margin-bottom:20px;}
.pl2{padding-left:20px;}

.form-divider {
  border: none;
  height: 2px;
  background-color: #ccc; /* light grey */
  margin: 25px 0;
}
.section-divider {
  height: 8px;
  background-color: #f0f0f0;
  margin: 25px 0;
  border-radius: 4px;
}
.align-save {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Instead of style="display:none" */
.hidden { display: none !important; }
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.error qrErr{display:none;}
.savemode{margin-left:auto;display:flex;align-items:center;gap:6px;}
h3{margin:0;font-size:16px;}

.img-preview-wrap { margin-top: 6px; }
.img-preview { max-width: 120px; height: auto; border: 1px solid #ddd; border-radius: 4px; }
.divider{
  width: 100%;
  height: 3px;
  background-color: #ddd;
  margin: 20px 0;
}
/*.grid-background {
  background-color: #efeeebe2;
  padding: 3px 10px;
}

.grid .visibility-field {
  grid-column: 2;   /* Put in field column */
  max-width: 300px; /* Match Title width */
} */
.tag-label {
  margin-top: 12px;
  display:block;
}
/* Header logo centered */
.logo {
  display: block;
 margin-left 50px;
 padding:8px 40px;
  max-width: 250px;
  height: auto;
}

/* EK symbol bar above event list */
.events-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px 0;
}
header .ek-symbol {
  height: 20px; /* scales to suit; adjust as needed */
  width: auto;
}

/* --- Event Card Layout (fixed overlap) --- */
/* --- Final Two-Column Event Layout --- */
.event {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 20px 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.leftcol, .rightcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Inputs and selects uniform size */
.event input, .event select {
  width: 250px;
  height: 30px;
  padding: 5px;
  font-size: 15px;
  margin-bottom:10px;
}

/* Textareas */
.event textarea {
  width: 250px;
  height: 80px;
  resize: vertical;
}

.event textarea[name="note[]"] {
  width: 300px;
  height: 80px;
}

/* Head and buttons */
.event .head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.event .btn-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Optional subtle divider */
hr.section-divider {
  grid-column: 1 / -1;
  border: none;
  height: 2px;
  background: #e5e5e5;
  margin-top: 20px;
}
/* --- widen right column fields --- */
.rightcol input,
.rightcol textarea {
  width: 420px;      /* wider text and textarea boxes */
}

.rightcol textarea[name="note[]"] {
  width: 460px;      /* notes slightly larger still */
  height: 100px;     /* extra depth for readability */
}
/* make Topic field wider */
.event input[name="topic[]"] {
  width: 370px;
}
/* shift Series field slightly left */
.rightcol label:has(input[name="series[]"]) {
  margin-left: -30px;
}
.rightcol input[name="series[]"] {
  width: 520px;   /* increase as needed */
}