/* CORESAA Manager — styled to sit alongside coresa.univie.ac.at */

:root {
  --accent: #d25353;
  --accent-dark: #a83e3e;
  --ink: #1e1e1e;
  --dim: #6b6b6b;
  --line: #e2e0dd;
  --bg: #faf9f7;
  --card: #ffffff;
  --ok: #2f7d54;
  --warn: #a8761f;
  --err: #b23b3b;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

/* ---- chrome ---------------------------------------------------------- */

.site-header {
  background: #fff;
  border-bottom: 3px solid var(--accent);
}

.site-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-title { font-size: 21px; font-weight: 700; letter-spacing: .04em; }
.site-subtitle { font-size: 12.5px; color: var(--dim); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.site-nav .who { color: var(--dim); border-left: 1px solid var(--line); padding-left: 18px; }
.site-nav .logout { color: var(--accent); }

main { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
.narrow { max-width: 420px; margin: 60px auto; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 18px 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--dim);
}

/* ---- layout ---------------------------------------------------------- */

.page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.page-title { font-size: 25px; margin: 0; font-weight: 650; }

.layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.card__title { font-size: 15px; margin: 0 0 12px; font-weight: 650; letter-spacing: .01em; }

/* Deletion is the one irreversible thing in here. It looks different from
   everything else, sits at the bottom of the sidebar rather than among the
   ordinary actions, and asks you to type the code before it will do anything. */
.card--danger { border-color: #e8c9c9; background: #fdf7f7; }
.card--danger .card__title { color: var(--err); }
.delete-form label { margin-bottom: 12px; }
.btn--danger { border-color: var(--err); color: var(--err); background: #fff; }
.btn--danger:hover { background: var(--err); border-color: var(--err); color: #fff; }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14px;
}
.notice--err { border-left-color: var(--err); color: var(--err); }
.hint { color: var(--dim); font-size: 13.5px; margin: 6px 0; }
.dim { color: var(--dim); }
.err { color: var(--err); }

/* ---- forms ----------------------------------------------------------- */

label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 10px; }

input[type=text], input[type=password], input[type=file], input[type=date],
input[type=number], select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.stack { display: flex; flex-direction: column; gap: 4px; }
.upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }

/* The code the interview is about to get. Shown, not typed: the student
   knows it is Chilean, only the server knows it is the seventh. */
.code-preview {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--accent);
}

.table--corpora input[type=text] { max-width: 220px; }
.table--corpora input[type=number] { max-width: 110px; }
.table--corpora td { padding-right: 14px; }

.manual-code { margin: 4px 0 12px; }
.manual-code summary { font-size: 13px; color: var(--dim); cursor: pointer; }
.upload-grid .wide, .wide { grid-column: 1 / -1; }
.inline { display: inline; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--ghost { padding: 5px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.alert { padding: 10px 12px; border-radius: 6px; background: #fdf5e6; border: 1px solid #e8d9b8; font-size: 14px; }
.alert--error { background: #fdeaea; border-color: #f0c9c9; color: var(--err); }

/* ---- progress -------------------------------------------------------- */

.progress { margin-top: 14px; }
.progress__bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
.progress__text { font-size: 12.5px; color: var(--dim); margin-top: 6px; }

/* ---- tables ---------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  font-weight: 600;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }

/* ---- the audit trail ------------------------------------------------- */

/* Long log tables are read by scanning one column at a time, so the date and
   the person stay narrow and unwrapped and the detail takes what is left. */
.table--log { table-layout: auto; font-size: 13.5px; }
.table--log td { vertical-align: top; }
.nowrap { white-space: nowrap; }

.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; }
.filter-form .actions { margin-top: 4px; }

.pager {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* The log is wide on a phone; let it scroll rather than crush the columns. */
@media (max-width: 700px) {
  .table--log { display: block; overflow-x: auto; white-space: nowrap; }
}

.tag {
  font-size: 11px;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
}

/* ---- status badges --------------------------------------------------- */

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  background: #eee;
  color: #444;
  white-space: nowrap;
}

.badge--new             { background: #eeeceb; color: #5a5a5a; }
.badge--asr_queued,
.badge--annotate_queued { background: #eef1f7; color: #46587d; }
.badge--asr_running,
.badge--annotate_running{ background: #fdf3e2; color: var(--warn); }
.badge--asr_failed,
.badge--annotate_failed { background: #fdeaea; color: var(--err); }
.badge--correcting      { background: #fdeeee; color: var(--accent-dark); }
.badge--review          { background: #f2ecfa; color: #6a4b9c; }
.badge--published       { background: #e9f5ee; color: var(--ok); }
.badge--revising        { background: #e6f0f4; color: #2c6478; }

.badge--changed { animation: pulse 1.2s ease; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(210, 83, 83, .5); }
  100% { box-shadow: 0 0 0 10px rgba(210, 83, 83, 0); }
}

/* ---- interview page -------------------------------------------------- */

.files { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.files li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.files li:last-child { border-bottom: none; }
.files li span:first-child { flex: 1; }
.files a { color: var(--accent); }

.meta { margin: 0; font-size: 13.5px; }
.meta dt { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-top: 10px; }
.meta dd { margin: 2px 0 0; }

.audio { width: 100%; margin-top: 16px; }

.job { border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 14px; }
.job:last-child { border-bottom: none; }
.job summary { cursor: pointer; }
.log {
  background: #f6f5f3;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.45;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- login options --------------------------------------------------- */

.btn--block { display: flex; justify-content: center; width: 100%; }

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--dim);
  font-size: 12.5px;
}
.or::before, .or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---- account handout ------------------------------------------------- */

.narrow--flush { margin-top: 0; }

.card--handout { border-color: var(--accent); }

.handout { margin: 0; font-size: 14px; }
.handout dt {
  color: var(--dim);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 12px;
}
.handout dd { margin: 2px 0 0; }
.handout .mono {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 15px;
  background: #f6f5f3;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 9px;
  display: inline-block;
  user-select: all;
}

/* ---- user table ------------------------------------------------------ */

.row--off td { opacity: .55; }

/* The role picker sits inside a table cell, so it has to stop being a
   full-width block the way every other select on the site is. */
.role-form { display: flex; gap: 6px; align-items: center; }
.role-form select { width: auto; min-width: 132px; margin-top: 0; }

/* Long explanatory cells in the roles table read better than they wrap. */
.table--roles td { vertical-align: top; padding-right: 14px; }
.table--roles td:last-child { max-width: 46ch; }
.table--users td { vertical-align: middle; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.site-nav a.who { color: var(--dim); text-decoration: none; }
.site-nav a.who:hover { color: var(--accent); }

/* ---- worker configuration block --------------------------------------- */

pre.config {
  background: #f6f5f3;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  user-select: all;
}

/* ---- server-unreachable banner ---------------------------------------- */

.server-banner {
  background: #b23b3b;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 20px;
  text-align: center;
}