/* pramlee.cc admin — minimal, internal-tool styling.
   Reuses the public site's four inks (no accent colour) so it still feels
   like the same project, but does not import main.css wholesale — this is
   a login screen and a stub dashboard, not a themed page. English only:
   the bilingual requirement in 1-MASTER-OVERVIEW.md describes the public
   site, and nobody but YAZID uses this. Flagged in case that's wrong. */

:root{
  --white:#FFFFFF;
  --platinum:#D0D8DC;
  --dim:#61686B;
  --eerie:#1A1F21;
  --sans:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--eerie);
  font-family:var(--sans);
  color:var(--eerie);
  padding:1.5rem;
}

.card{
  width:100%;
  max-width:26rem;
  background:var(--white);
  border-radius:4px;
  padding:2.5rem;
}

.wordmark{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 1.5rem;
}

h1{
  font-size:1.5rem;
  font-weight:600;
  margin:0 0 .5rem;
}

p.sub{
  color:var(--dim);
  margin:0 0 1.75rem;
  font-size:.9rem;
  line-height:1.5;
}

label{
  display:block;
  font-size:.8rem;
  font-weight:600;
  margin:0 0 .35rem;
}

input[type=text],input[type=password]{
  width:100%;
  padding:.65rem .75rem;
  border:1px solid var(--platinum);
  border-radius:3px;
  font-size:1rem;
  font-family:var(--sans);
  margin-bottom:1.1rem;
}

input[type=text]:focus,input[type=password]:focus{
  outline:2px solid var(--eerie);
  outline-offset:1px;
  border-color:var(--eerie);
}

button{
  width:100%;
  padding:.75rem;
  background:var(--eerie);
  color:var(--white);
  border:none;
  border-radius:3px;
  font-size:1rem;
  font-family:var(--sans);
  font-weight:600;
  cursor:pointer;
}

button:hover{background:#000}

.error{
  background:#fdecec;
  border:1px solid #e2a5a5;
  color:#7a1f1f;
  padding:.7rem .9rem;
  border-radius:3px;
  font-size:.88rem;
  margin-bottom:1.25rem;
}

.notice{
  background:#eef3f2;
  border:1px solid var(--platinum);
  color:var(--eerie);
  padding:.7rem .9rem;
  border-radius:3px;
  font-size:.88rem;
  margin-bottom:1.25rem;
}

.fine{
  font-size:.78rem;
  color:var(--dim);
  margin-top:1.5rem;
  line-height:1.5;
}

a{color:var(--eerie)}

.dash dl{margin:1.5rem 0 0}
.dash dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-top:.9rem}
.dash dd{margin:.15rem 0 0;font-size:.95rem}
.logout{display:inline-block;margin-top:2rem;font-size:.85rem}

/* ---------------------------------------------------------------------
   Phase 4+ : record admin (people, and every record type after it).
   Extends the tokens/card above rather than replacing them. */

.card.wide{max-width:64rem;text-align:left}

.pagehead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.pagehead h1{margin:0}
.subhead{font-size:1.1rem;margin:2rem 0 .75rem}

.button{
  display:inline-block;background:var(--eerie);color:var(--white);
  padding:.55rem .9rem;border-radius:3px;text-decoration:none;
  font-size:.85rem;font-weight:600;border:none;cursor:pointer;
}
.button:hover{background:#000}
.button.ghost{background:transparent;color:var(--eerie);border:1px solid var(--platinum)}
.button.ghost:hover{background:#f4f6f6}

table{width:100%;border-collapse:collapse;margin-bottom:1rem;font-size:.92rem}
th,td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--platinum)}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}

.tag{display:inline-block;padding:.15rem .55rem;border-radius:99px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tag-draft{background:#f2ede0;color:#7a5d1f}
.tag-published{background:#e3f2ea;color:#1f6a41}

.rowactions{display:flex;gap:.75rem;align-items:center;white-space:nowrap}
.rowactions form{display:inline;margin:0}
.linklike{background:none;border:none;padding:0;font:inherit;color:var(--eerie);text-decoration:underline;cursor:pointer}
.linklike.danger{color:#a33}

fieldset{border:1px solid var(--platinum);border-radius:4px;padding:1rem 1.25rem 1.25rem;margin:0 0 1.25rem}
legend{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);padding:0 .4rem}

.radiorow{display:flex;gap:1.25rem;margin-bottom:1rem;font-size:.92rem}
.radiorow label{display:flex;align-items:center;gap:.35rem;font-weight:400;margin:0}
.radiorow input{margin:0}

.checkline{display:flex;align-items:center;gap:.5rem;font-weight:400;margin-bottom:.4rem}
.checkline input{margin:0}

.bilingual-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:700px){.bilingual-pair{grid-template-columns:1fr}}

textarea{
  width:100%;padding:.65rem .75rem;border:1px solid var(--platinum);
  border-radius:3px;font-size:.95rem;font-family:var(--sans);resize:vertical;
}
input[type=date],input[type=number]{
  width:100%;padding:.6rem .7rem;border:1px solid var(--platinum);
  border-radius:3px;font-size:.95rem;font-family:var(--sans);margin-bottom:1rem;
}

.fieldnote{font-size:.78rem;color:var(--dim);margin:-.5rem 0 1rem;line-height:1.5}

.formactions{margin-top:1.5rem}
.publishform{margin-top:1rem;padding-top:1.25rem;border-top:1px solid var(--platinum)}
.publishform .button{background:#1f6a41}
.publishform .button:hover{background:#154a2d}
code{background:#f2f2f2;padding:.1em .3em;border-radius:2px;font-size:.85em}