/* Durgotsav registration — classic web-app styling */

* { box-sizing: border-box; }

:root {
  --label-w: 170px;   /* label column */
  --gutter: 16px;     /* panel side padding */
  --ctl-w: 420px;     /* full-width controls */
  --ctl-h: 32px;      /* single-line control height */
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #e8e9eb;
  color: #333;
  font: 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a { color: #1a5fa8; }
a:hover { color: #0d3f73; }

.hidden { display: none !important; }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 16px; }
.wrap.wide { max-width: 1200px; }

/* ---- Top bar ---- */
.topbar {
  background: #fff;
  border-top: 4px solid #bd2e35;
  border-bottom: 1px solid #c4c7ca;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand { display: block; line-height: 0; flex: none; }
.brand img { display: block; height: 56px; width: auto; }
.event-label { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.3; }
.event-name { color: #bd2e35; font-size: 16px; font-weight: bold; letter-spacing: -0.2px; white-space: nowrap; }
.event-sub { color: #777; font-size: 12px; }

/* ---- Page heading ---- */
.page-head { padding: 22px 0 14px; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: bold; color: #222; letter-spacing: -0.3px; }
.page-head p { margin: 4px 0 0; color: #666; }

/* ---- Panel ---- */
.panel {
  background: #fff;
  border: 1px solid #c4c7ca;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  margin-bottom: 16px;
}

.section-title {
  background: #f4f5f6;
  border-top: 1px solid #dfe1e3;
  border-bottom: 1px solid #dfe1e3;
  color: #555;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.6px;
  padding: 7px 16px;
  text-transform: uppercase;
}
.panel > .section-title:first-child { border-top: 0; border-radius: 3px 3px 0 0; }
.section-note { margin: 12px var(--gutter) 0 calc(var(--gutter) + var(--label-w)); color: #777; }

/* ---- Form rows: label column + control column ---- */
.frow { display: flex; align-items: flex-start; padding: 9px var(--gutter); }
.frow + .frow { border-top: 1px dotted #e3e5e7; }
.section-title + .frow, .section-note + .frow { padding-top: 14px; }
.frow:last-child { padding-bottom: 14px; }

.flabel {
  flex: 0 0 var(--label-w);
  padding: calc((var(--ctl-h) - 20px) / 2) 14px 0 0;
  line-height: 20px;
  color: #444;
  font-weight: bold;
  text-align: right;
}
.flabel em { color: #c0392b; font-style: normal; }
.fcontrol { flex: 1; min-width: 0; }
.fhelp { display: block; margin-top: 3px; color: #888; font-size: 12px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  width: 100%;
  max-width: var(--ctl-w);
  height: var(--ctl-h);
  padding: 0 8px;
  border: 1px solid #b4b8bc;
  border-top-color: #a2a6aa;
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  color: #222;
  font: inherit;
  font-size: 13px;
}
input.short, select.short { max-width: 140px; }
textarea { height: auto; min-height: 96px; padding: 6px 8px; line-height: 1.45; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #5b9bd5;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 4px rgba(91, 155, 213, 0.6);
}
::placeholder { color: #aaa; }

.choices { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--ctl-h); column-gap: 20px; }
.choices label { display: inline-flex; align-items: center; height: var(--ctl-h); white-space: nowrap; cursor: pointer; }
.choices input { margin: 0 6px 0 0; }

/* ---- Team member rows ---- */
.members { max-width: var(--ctl-w); }
.member { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.member [data-f="name"] { flex: 1 1 auto; min-width: 0; }
.member [data-f="course"] { flex: 0 0 110px; }
.member [data-f="sem"] { flex: 0 0 68px; }
.btn-icon {
  flex: 0 0 var(--ctl-h);
  width: var(--ctl-h);
  height: var(--ctl-h);
  padding: 0;
  color: #8a2a22;
  font-size: 17px;
  line-height: 1;
}
.btn-icon:disabled { color: #aaa; }
#addMember { margin-top: 2px; }

/* ---- Events table ---- */
.events-table { width: 100%; max-width: var(--ctl-w); border: 1px solid #c9ccd0; border-collapse: separate; border-spacing: 0; border-radius: 2px; }
.events-table th {
  background: #fafafa;
  border-bottom: 1px solid #dfe1e3;
  color: #777;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 10px;
  text-align: left;
  text-transform: uppercase;
}
.events-table td { border-bottom: 1px solid #eef0f1; padding: 0 10px; height: var(--ctl-h); vertical-align: middle; }
.events-table tr:last-child td { border-bottom: 0; }
.events-table th.chk, .events-table td.chk { width: 30px; padding-right: 0; }
.events-table td.chk input { display: block; margin: 0; }
.events-table td.type, .events-table th.type { color: #888; width: 80px; }
.events-table label { display: flex; align-items: center; height: var(--ctl-h); cursor: pointer; }
.events-table tbody tr:hover td { background: #fbfaf3; }
.events-table tr.selected td { background: #fff8dc; }
.events-table td.avail, .events-table th.avail { width: 76px; text-align: right; white-space: nowrap; }
.events-table td.avail { color: #3c6b26; }
.events-table tr.unavailable td { color: #aaa; background: #fafafa; }
.events-table tr.unavailable label { cursor: default; }
.events-table tr.unavailable td.avail { color: #a5463d; }
.events-table tbody tr.unavailable:hover td { background: #fafafa; }
.muted-cell { color: #999; padding: 8px 10px !important; }

/* ---- Buttons ---- */
.form-actions {
  background: #f4f5f6;
  border-top: 1px solid #dfe1e3;
  border-radius: 0 0 3px 3px;
  padding: 12px var(--gutter) 12px calc(var(--gutter) + var(--label-w));
  color: #777;
}
.form-actions a { margin-left: 4px; }

.btn {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #a9adb1;
  border-bottom-color: #93979b;
  border-radius: 3px;
  background: linear-gradient(#fdfdfd, #e7e8e9);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.06);
  color: #333;
  cursor: pointer;
  font: bold 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
}
.btn:hover { background: linear-gradient(#fff, #dfe0e2); }
.btn:active { background: #dcdee0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); }

.btn-primary {
  border-color: #8f1f25;
  border-bottom-color: #74191e;
  background: linear-gradient(#c9393f, #a8272d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.btn-primary:hover { background: linear-gradient(#d24046, #b02a30); }
.btn-primary:active { background: #9a2329; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* ---- Flash messages ---- */
.flash { border: 1px solid; border-radius: 3px; margin-bottom: 16px; padding: 10px 14px; }
.flash ul { margin: 4px 0 0; padding-left: 20px; }
.flash-error { background: #fbeaea; border-color: #e3b5b2; color: #8a2a22; }
.flash-success { background: #eaf5e4; border-color: #b9d8a8; color: #3c6b26; }

/* ---- Confirmation ---- */
.receipt { padding: 22px 16px 20px; text-align: center; }
.receipt-label { color: #777; font-size: 11px; font-weight: bold; letter-spacing: 0.6px; text-transform: uppercase; }
.receipt-id {
  display: inline-block;
  margin: 8px 0 10px;
  padding: 6px 16px;
  border: 1px dashed #b4b8bc;
  background: #fafafa;
  color: #222;
  font: bold 26px/1.2 Menlo, Consolas, "Courier New", monospace;
  letter-spacing: 1px;
}
.receipt p { margin: 0; color: #666; }
.panel .form-actions.center { padding-left: 16px; text-align: center; }

/* ---- Footer ---- */
.footer { padding: 6px 0 28px; color: #888; font-size: 12px; text-align: center; }

/* ---- Admin ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #dfe1e3; background: #f4f5f6; }
.toolbar input, .toolbar select { flex: 1; min-width: 180px; max-width: 320px; }
.stats { padding: 8px 16px; border-bottom: 1px solid #dfe1e3; color: #666; }
.stats span { margin-right: 16px; white-space: nowrap; }
.stats b { color: #222; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { background: #fafafa; border-bottom: 1px solid #dfe1e3; color: #666; padding: 7px 10px; text-align: left; white-space: nowrap; }
.data-table td { border-bottom: 1px solid #eef0f1; padding: 7px 10px; vertical-align: top; }
.data-table tbody tr:nth-child(even) td { background: #fbfbfb; }
.data-table td.members { white-space: pre-line; min-width: 160px; }
.btn-small { padding: 2px 8px; font-size: 11px; }

/* ---- Admin: event settings ---- */
.admin-events td { vertical-align: middle; font-size: 13px; }
.admin-events .num { text-align: right; white-space: nowrap; }
.admin-events .nowrap { white-space: nowrap; }
.admin-events input.limit { width: 86px; height: 28px; margin-right: 4px; }
.admin-events .btn-small { padding: 3px 10px; font-size: 12px; }
.state { display: inline-block; min-width: 54px; margin-right: 6px; font-weight: bold; }
.state.open { color: #3c6b26; }
.state.closed { color: #a5463d; }
.state.full { color: #9a6a00; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding-left: var(--gutter); }
.admin-actions .btn { margin-left: 4px; }
input[type="number"] {
  padding: 0 6px;
  border: 1px solid #b4b8bc;
  border-top-color: #a2a6aa;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  font: inherit;
}
input[type="number"]:focus { outline: none; border-color: #5b9bd5; box-shadow: 0 0 4px rgba(91, 155, 213, 0.6); }

/* ---- Inside an iframe on the university site: its own header is already there ---- */
.embedded body { background: transparent; }
.embedded .topbar { display: none; }
.embedded .page-head { padding-top: 4px; }

/* ---- Small screens ---- */
@media (max-width: 600px) {
  .brand img { height: 40px; }
  .event-name { font-size: 14px; }
  .event-sub { font-size: 11px; }
  .page-head h1 { font-size: 19px; }
  .frow { display: block; }
  .section-note { margin-left: var(--gutter); }
  .events-table { max-width: none; }
  .members { max-width: none; }
  .member { flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px dotted #e3e5e7; }
  .member [data-f="name"] { flex-basis: 100%; }
  .member [data-f="course"] { flex: 1 1 0; min-width: 0; }
  .member [data-f="sem"] { flex: 0 0 84px; }
  .btn-icon { flex-basis: 40px; width: 40px; height: 40px; }
  .flabel { display: block; padding: 0 0 4px; line-height: 1.4; text-align: left; }
  input[type="text"], input[type="email"], input[type="tel"], select { max-width: none; height: 40px; font-size: 16px; }
  input.short, select.short { max-width: none; }
  textarea { font-size: 16px; }
  .form-actions { padding-left: 16px; }
  .choices label { display: inline-block; margin-bottom: 4px; }
}