/* TICEHUB brand tokens + base UI. Colors sampled from the official TICE logo.
   Single source of truth — restyle the app by editing the :root vars below. */
:root {
  --tice-blue:    #226192; /* primary  (wordmark) */
  --tice-blue-d:  #1b5078; /* primary hover */
  --tice-navy:    #183862; /* headers / dark surfaces */
  --tice-orange:  #F5831F; /* accent only */
  --tice-orange-d:#dd7212;

  --tice-ink:     #1B2733;
  --tice-slate:   #5A6B7B;
  --tice-line:    #E2E8F0;
  --tice-bg:      #F7F9FC;
  --tice-surface: #FFFFFF;
  --tice-success: #1E8E5A;
  --tice-warning: #B7791F;

  --radius: 12px;
  --shadow: 0 1px 3px rgba(24,56,98,.08), 0 4px 16px rgba(24,56,98,.06);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--tice-ink);
  background: var(--tice-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tice-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--tice-navy); margin: 0 0 .5em; }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: .02em; }
h2 { font-size: 1.25rem; font-weight: 600; }
.muted { color: var(--tice-slate); }
.small { font-size: .85rem; }

/* ---- top bar ---- */
.topbar {
  background: var(--tice-navy);
  color: #fff;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1.25rem;
}
.topbar img.logo { height: 30px; width: auto; display: block; }
.topbar .spacer { flex: 1; }
.topbar nav a { color: #cdd9e6; margin: 0 .5rem; font-size: .92rem; }
.topbar nav a:hover, .topbar nav a.active { color: #fff; text-decoration: none; }
.topbar .who { color: #aebfd0; font-size: .85rem; }
.topbar .who a { color: var(--tice-orange); }

/* ---- layout ---- */
.wrap { max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem; }
.center-page {
  min-height: calc(100vh - 52px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.card {
  background: var(--tice-surface);
  border: 1px solid var(--tice-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}
.card.narrow { max-width: 420px; width: 100%; text-align: center; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; cursor: pointer;
  padding: .65rem 1.1rem; border-radius: 8px; border: 1px solid transparent;
  background: var(--tice-blue); color: #fff; text-decoration: none;
}
.btn:hover { background: var(--tice-blue-d); text-decoration: none; }
.btn.accent { background: var(--tice-orange); }
.btn.accent:hover { background: var(--tice-orange-d); }
.btn.ghost { background: #fff; color: var(--tice-blue); border-color: var(--tice-line); }
.btn.ghost:hover { background: #f1f5f9; }
.btn.danger { background: #fff; color: #b42318; border-color: #f3c6c0; }
.btn.block { width: 100%; }

/* Google sign-in button */
.btn-google {
  display: inline-flex; align-items: center; gap: .65rem; width: 100%;
  justify-content: center; padding: .7rem 1rem; font-weight: 600;
  background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: 8px;
  cursor: pointer; font-family: var(--font);
}
.btn-google:hover { background: #f8faff; box-shadow: var(--shadow); }
.btn-google svg { width: 18px; height: 18px; }

/* ---- badges / pills ---- */
.pill {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
.pill.ok      { background: #e6f4ed; color: var(--tice-success); }
.pill.warn    { background: #fdf3e3; color: var(--tice-warning); }
.pill.admin   { background: #e7eef6; color: var(--tice-blue); }
.dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:var(--tice-orange); }

/* ---- tables / forms ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--tice-line); }
th { color: var(--tice-slate); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
input[type=email], input[type=text] {
  font: inherit; padding: .55rem .65rem; border: 1px solid var(--tice-line);
  border-radius: 8px; width: 100%;
}
input:focus { outline: 2px solid var(--tice-orange); outline-offset: 1px; }
label.chk { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; font-size:.95rem; }

.flash { padding:.7rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.92rem; }
.flash.err { background:#fdecea; color:#b42318; border:1px solid #f3c6c0; }
.flash.ok  { background:#e6f4ed; color:#0f6b43; border:1px solid #bfe3cf; }
hr { border:0; border-top:1px solid var(--tice-line); margin:1.5rem 0; }
footer.foot { text-align:center; color:var(--tice-slate); font-size:.8rem; padding:2rem 1rem; }