/* RLD-PD Terminal — green-phosphor CRT aesthetic */

:root {
  --bg:        #050807;
  --bg-2:      #0a120c;
  --fg:        #4ade80;   /* primary terminal green */
  --fg-dim:    #2c8f4d;
  --fg-bright: #86efac;
  --amber:     #fbbf24;
  --red:       #ef4444;
  --blue:      #60a5fa;
  --line:      #1a2620;
  --glow:      0 0 6px rgba(74,222,128,0.35);
  --font:      'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* respect HTML hidden attr even when display rules apply later */
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 14px; line-height: 1.55; }
body {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, rgba(20,40,30,0.4) 0%, var(--bg) 80%);
  text-shadow: var(--glow);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fg-bright); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

::selection { background: var(--fg); color: var(--bg); text-shadow: none; }

/* Frame ----------------------------------------------------------- */
.frame {
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.8em;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.85em;
}
.bar-bottom { border-top: 1px solid var(--line); border-bottom: 0; }
.bar .tag { color: var(--fg-bright); font-weight: 600; }
.bar .ver { color: var(--fg-dim); }
.bar .spacer { flex: 1; }
.bar .usr { color: var(--amber); }
.bar .status { color: var(--fg-bright); letter-spacing: 0.1em; }
.dot.online { color: var(--fg-bright); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
.bar .hint { color: var(--fg-dim); }
.bar .hint a { color: var(--fg-dim); }
.bar .hint a:hover { color: var(--fg-bright); }
.bar .sep { color: var(--fg-dim); opacity: 0.5; }
.bar kbd {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 0 0.3em;
  border-radius: 2px;
  color: var(--fg-bright);
  font-size: 0.9em;
}

.screen {
  flex: 1;
  padding: 1.2em 1.4em;
}

/* Welcome + menu -------------------------------------------------- */
.welcome { margin-bottom: 1em; }
.welcome p { margin: 0.15em 0; }
.prompt { color: var(--fg-bright); margin-right: 0.4em; }
.warn { color: var(--amber); }
.err { color: var(--red); border-left: 2px solid var(--red); padding-left: 0.5em; margin: 0.4em 0; }
.ok { color: var(--fg-bright); border-left: 2px solid var(--fg); padding-left: 0.5em; margin: 0.4em 0; }
.muted { color: var(--fg-dim); }

.menu-box {
  border: 1px solid var(--line);
  margin: 1.2em 0;
  background: linear-gradient(0deg, rgba(20,40,30,0.15) 0%, transparent 100%);
}
.menu-title {
  padding: 0.3em 1em;
  border-bottom: 1px solid var(--line);
  color: var(--fg-bright);
  font-weight: 600;
  letter-spacing: 0.2em;
}
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { border-bottom: 1px dotted var(--line); }
.menu li:last-child { border-bottom: 0; }
.menu a {
  display: flex;
  padding: 0.6em 1em;
  color: var(--fg);
  gap: 0.6em;
}
.menu a:hover { background: rgba(74,222,128,0.06); color: var(--fg-bright); text-decoration: none; }
.menu .num { color: var(--fg-bright); width: 3em; }
.menu .label { flex: 1; text-transform: lowercase; }
.menu .meta { color: var(--fg-dim); font-size: 0.85em; }

.prompt-row { margin-top: 1em; }
.caret { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }

/* Forms ----------------------------------------------------------- */
h1 { color: var(--fg-bright); font-weight: 600; margin: 0.2em 0 0.8em; font-size: 1.3em; text-transform: lowercase; letter-spacing: 0.04em; }
h2 { color: var(--fg-bright); font-weight: 500; font-size: 1em; margin: 1.5em 0 0.4em; text-transform: lowercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--line); padding-bottom: 0.2em; }

.row { margin: 0.6em 0; }
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
.row label { display: block; color: var(--fg-dim); margin-bottom: 0.2em; font-size: 0.85em; }
.row .req { color: var(--amber); }
input[type=text], input[type=password], input[type=datetime-local], select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg-bright);
  padding: 0.5em 0.6em;
  font-family: inherit;
  font-size: inherit;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--fg); border-color: var(--fg); }
.mono { font-family: var(--font); letter-spacing: 0.05em; }
textarea { resize: vertical; min-height: 4em; }
.check { display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; }

button, .btn {
  background: var(--bg);
  border: 1px solid var(--fg);
  color: var(--fg-bright);
  padding: 0.5em 1em;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  letter-spacing: 0.05em;
  display: inline-block;
  text-decoration: none;
}
button:hover, .btn:hover { background: rgba(74,222,128,0.1); text-decoration: none; }
button.primary, .btn.primary { background: rgba(74,222,128,0.1); }
button.link { border: 0; background: transparent; color: var(--fg-dim); padding: 0; }
button.link:hover { color: var(--fg-bright); background: transparent; }
button.danger { border-color: var(--red); color: var(--red); }
button.danger:hover { background: rgba(239,68,68,0.1); }

.badge.kind-user, .badge.kind-role { color: var(--blue); border-color: var(--blue); }
.badge.kind-case, .badge.kind-bolo { color: var(--fg-bright); border-color: var(--fg); }
.badge.kind-announcement { color: var(--amber); border-color: var(--amber); }
.badge.kind-auth { color: var(--fg-dim); }

.actions { display: flex; gap: 0.6em; margin-top: 1em; }

/* Tables / grids ------------------------------------------------- */
.toolbar { display: flex; gap: 0.6em; align-items: center; margin: 0.6em 0 1em; flex-wrap: wrap; }
.toolbar .filters { display: flex; gap: 0.4em; align-items: center; flex-wrap: wrap; flex: 1; }
.toolbar .filters input[type=text] { width: auto; min-width: 18em; }
.toolbar .filters select { width: auto; }

table.grid { width: 100%; border-collapse: collapse; margin: 0.6em 0; }
table.grid th { text-align: left; color: var(--fg-bright); border-bottom: 1px solid var(--line); padding: 0.4em 0.6em; font-weight: 500; letter-spacing: 0.06em; text-transform: lowercase; }
table.grid td { padding: 0.45em 0.6em; border-bottom: 1px dotted var(--line); }
table.grid tr:hover td { background: rgba(74,222,128,0.04); cursor: pointer; }
table.grid tr.inactive td { opacity: 0.5; }
table.grid tr.total td { border-top: 1px solid var(--fg-dim); border-bottom: 0; }

.badge {
  display: inline-block;
  padding: 0.05em 0.5em;
  border: 1px solid var(--fg-dim);
  border-radius: 2px;
  font-size: 0.8em;
  letter-spacing: 0.05em;
}
.badge.st-open          { color: var(--fg-bright); border-color: var(--fg); }
.badge.st-submitted     { color: var(--amber); border-color: var(--amber); border-style: dashed; }
.badge.st-pending       { color: var(--amber); border-color: var(--amber); }
.badge.st-pending_court { color: var(--amber); border-color: var(--amber); }
.badge.st-in_court      { color: var(--blue); border-color: var(--blue); }
.badge.st-signed        { color: var(--fg-bright); border-color: var(--fg); }
.badge.st-executed      { color: var(--blue); border-color: var(--blue); }
.badge.st-denied        { color: var(--red); border-color: var(--red); }
.badge.st-recalled      { color: var(--fg-dim); border-style: dashed; }
.badge.st-expired       { color: var(--fg-dim); border-style: dashed; }
.badge.st-closed        { color: var(--fg-dim); }
.badge.st-dismissed     { color: var(--fg-dim); border-style: dashed; }

/* Docs ---------------------------------------------------------- */
.doc-list { list-style: none; padding: 0; margin: 0.5em 0; }
.doc-list li { padding: 0.4em 0; border-bottom: 1px dotted var(--line); }
.doc-body h1, .doc-body h2, .doc-body h3 { color: var(--fg-bright); border-bottom: 1px dotted var(--line); padding-bottom: 0.2em; margin-top: 1.2em; }
.doc-body code { background: var(--bg-2); padding: 0.1em 0.3em; border-radius: 2px; color: var(--amber); }
.doc-body pre { background: var(--bg-2); border-left: 3px solid var(--fg); padding: 0.8em 1em; overflow-x: auto; }
.doc-body pre code { background: transparent; color: var(--fg-bright); padding: 0; }
.doc-body blockquote { border-left: 3px solid var(--fg-dim); margin: 0.6em 0; padding: 0.2em 0 0.2em 1em; color: var(--fg-bright); }
.doc-body table { border-collapse: collapse; margin: 0.8em 0; }
.doc-body th, .doc-body td { border: 1px solid var(--line); padding: 0.4em 0.7em; }
.doc-body th { background: var(--bg-2); color: var(--fg-bright); }
.doc-body ul, .doc-body ol { padding-left: 1.6em; }

/* Inbox filter chips (cases list) ------------------------------- */
.inbox-chips { display: flex; gap: 0.4em; flex-wrap: wrap; margin: 0.4em 0 0.8em; }
.chip {
  display: inline-block;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  padding: 0.2em 0.7em;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.chip:hover { color: var(--fg-bright); border-color: var(--fg-dim); text-decoration: none; }
.chip.active { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.chip.active:hover { color: var(--bg); }

pre.sqlblock {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--fg);
  padding: 0.8em 1em;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.85em;
  max-height: 24em;
  overflow: auto;
  user-select: all;
}

/* Verdict box -------------------------------------------------- */
.verdict-box {
  border: 1px solid var(--amber);
  border-left-width: 4px;
  padding: 0.6em 1em;
  margin: 1em 0;
  background: linear-gradient(0deg, rgba(251,191,36,0.05) 0%, transparent 100%);
}
.verdict-box h2 { margin-top: 0; border: 0; padding: 0; color: var(--amber); }

/* Case detail ---------------------------------------------------- */
.case-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: 1em; flex-wrap: wrap; }
.case-header h1 { margin: 0; }
.status-box { display: flex; gap: 0.6em; align-items: center; flex-wrap: wrap; }
.status-form { display: flex; gap: 0.3em; }
.notes { background: var(--bg-2); padding: 0.8em 1em; border-left: 2px solid var(--fg); }
.notes p:first-child { margin-top: 0; } .notes p:last-child { margin-bottom: 0; }

.timeline { list-style: none; padding: 0; margin: 0.6em 0; }
.timeline li { border-left: 2px solid var(--line); padding: 0.5em 0 0.5em 1em; margin-left: 0.4em; position: relative; }
.timeline li::before { content: '●'; position: absolute; left: -0.45em; top: 0.5em; color: var(--fg); font-size: 0.7em; background: var(--bg); padding: 0 0.1em; }
.timeline .ts { color: var(--fg-dim); margin-right: 0.8em; font-size: 0.85em; }
.timeline .kind { color: var(--amber); margin-right: 0.6em; text-transform: uppercase; font-size: 0.75em; }
.timeline .kind-status_change { color: var(--blue); }
.timeline .kind-note { color: var(--fg-bright); }
.timeline .kind-created { color: var(--fg-bright); }
.timeline .author { color: var(--fg); }
.timeline .content { margin-top: 0.2em; }
.comment-form { margin-top: 1em; }

/* Charge picker -------------------------------------------------- */
.charge-list { border: 1px solid var(--line); max-height: 18em; overflow-y: auto; margin-top: 0.4em; }
.charge-item { display: flex; align-items: center; padding: 0.3em 0.6em; gap: 0.5em; border-bottom: 1px dotted var(--line); cursor: pointer; }
.charge-item:hover { background: rgba(74,222,128,0.06); }
.charge-item input { width: auto; margin: 0; }
.charge-class { color: var(--amber); width: 8em; font-size: 0.85em; }
.charge-name { flex: 1; }
.charge-meta { color: var(--fg-dim); font-size: 0.8em; }

/* Login screen --------------------------------------------------- */
.login-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.login-frame {
  border: 1px solid var(--fg);
  padding: 1.6em 2em;
  background: linear-gradient(0deg, rgba(20,40,30,0.15) 0%, transparent 100%);
  max-width: 480px;
  width: 100%;
}
.login-frame pre.ascii { color: var(--fg-bright); margin: 0 0 1em; font-size: 0.85em; line-height: 1.2; }
.login-frame pre.ascii-foot { color: var(--fg-dim); font-size: 0.75em; margin-top: 1.5em; }
.login-frame button { width: 100%; margin-top: 1em; }

/* Boot screen ---------------------------------------------------- */
#bootscreen {
  position: fixed; inset: 0; background: var(--bg); z-index: 9999; padding: 2em;
  font-family: var(--font); color: var(--fg); opacity: 1; transition: opacity 0.3s;
}
#bootscreen.gone { opacity: 0; pointer-events: none; }
#bootlog { margin: 0; white-space: pre-wrap; font-size: 0.95em; }

/* Palette -------------------------------------------------------- */
#palette-overlay {
  position: fixed; inset: 0; background: rgba(5,8,7,0.85); z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.palette {
  background: var(--bg-2); border: 1px solid var(--fg); width: 560px; max-width: 92vw;
  box-shadow: 0 0 30px rgba(74,222,128,0.2);
}
#palette-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 0.8em 1em; background: transparent; color: var(--fg-bright); font-family: var(--font); font-size: 1.05em; }
#palette-input:focus { outline: none; }
#palette-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
#palette-list li { padding: 0.5em 1em; cursor: pointer; }
#palette-list li.active, #palette-list li:hover { background: rgba(74,222,128,0.1); color: var(--fg-bright); }
.palette-hint { padding: 0.4em 1em; border-top: 1px solid var(--line); color: var(--fg-dim); font-size: 0.8em; }
.palette-hint kbd { background: var(--bg); border: 1px solid var(--line); padding: 0 0.3em; border-radius: 2px; }

/* BOLOs / announcements --------------------------------------- */
.bolo-list { list-style: none; padding: 0; margin: 0; }
.bolo { border: 1px solid var(--line); border-left-width: 4px; padding: 0.7em 1em; margin: 0.5em 0; }
.bolo.sev-critical { border-left-color: var(--red); }
.bolo.sev-high     { border-left-color: var(--amber); }
.bolo.sev-medium   { border-left-color: var(--fg); }
.bolo.sev-low      { border-left-color: var(--fg-dim); }
.bolo.expired      { opacity: 0.55; border-left-style: dashed; }
.bolo-head { display: flex; gap: 0.5em; align-items: center; margin-bottom: 0.3em; flex-wrap: wrap; }
.bolo-line { font-size: 0.92em; margin: 0.15em 0; }
.bolo-line .lbl { color: var(--fg-dim); margin-right: 0.4em; }
.bolo-actions { margin-top: 0.5em; display: flex; gap: 0.4em; }
.sev-badge.sev-critical { color: var(--red); border-color: var(--red); }
.sev-badge.sev-high     { color: var(--amber); border-color: var(--amber); }
.sev-badge.sev-medium   { color: var(--fg-bright); border-color: var(--fg); }
.sev-badge.sev-low      { color: var(--fg-dim); }

.post-form { border: 1px dotted var(--line); padding: 0.5em 1em; margin-bottom: 1em; }
.post-form summary { color: var(--fg-bright); padding: 0.2em 0; }
.announce { border: 1px solid var(--line); padding: 0.7em 1em; margin: 0.6em 0; }
.announce.pinned { border-color: var(--amber); border-left-width: 4px; }
.announce header { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.4em; flex-wrap: wrap; }

/* Roles --------------------------------------------------------- */
.role-card { border: 1px solid var(--line); padding: 1em 1.2em; margin: 1em 0; }
.role-card h2 { display: flex; align-items: center; gap: 0.5em; border-bottom: 0; margin-top: 0; padding-bottom: 0; }
.perms-grid { max-width: 600px; }
.perms-grid th { text-transform: uppercase; font-size: 0.75em; }
.perms-grid td { text-align: center; }
.perms-grid td:first-child { text-align: left; color: var(--fg-bright); }
.perms-grid input[type=checkbox] { width: auto; transform: scale(1.2); cursor: pointer; }
.meta-edit { margin-top: 0.5em; }
.meta-edit summary { color: var(--fg-dim); }
.inline-form-block { display: flex; gap: 0.4em; margin-top: 0.4em; }
.inline-form-block input[type=text] { flex: 1; }

/* Misc ----------------------------------------------------------- */
.inline-form { display: inline-flex; gap: 0.3em; margin: 0.2em 0; }
.inline-form input { width: 10em; }
.actions-cell { display: flex; gap: 0.4em; flex-wrap: wrap; align-items: center; }
details summary { cursor: pointer; color: var(--fg-dim); }
details[open] summary { color: var(--fg-bright); }

/* Locked / read-only role display ------------------------------- */
.locked-banner {
  border: 1px dashed var(--amber);
  background: rgba(251,191,36,0.06);
  color: var(--amber);
  padding: 0.5em 0.8em;
  margin: 0.4em 0 0.6em;
  font-size: 0.9em;
}
.locked-banner strong { letter-spacing: 0.15em; margin-right: 0.5em; }
.locked-banner a { color: var(--amber); text-decoration: underline; }
.perms-grid.is-locked td { opacity: 0.7; cursor: not-allowed; }
.perm-cell { display: inline-block; min-width: 1.4em; text-align: center; font-weight: 600; }
.perm-cell.perm-on  { color: var(--fg-bright); }
.perm-cell.perm-off { color: var(--fg-dim); opacity: 0.4; }

/* Cleanup panel --------------------------------------------------- */
.cleanup-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  padding: 0.8em 1em;
  margin: 0.8em 0;
  background: linear-gradient(0deg, rgba(239,68,68,0.04) 0%, transparent 100%);
}
.cleanup-card h2 { margin-top: 0; border: 0; padding: 0; color: var(--red); }
.cleanup-card .count { color: var(--fg-bright); font-weight: 600; }
.cleanup-card form { display: flex; gap: 0.5em; align-items: center; margin-top: 0.6em; flex-wrap: wrap; }
.cleanup-card input[type=text] { width: 10em; }
.cleanup-warn {
  border: 1px solid var(--red);
  color: var(--red);
  padding: 0.6em 0.9em;
  margin-bottom: 1em;
  background: rgba(239,68,68,0.05);
}

/* Mobile --------------------------------------------------------- */
@media (max-width: 720px) {
  .row.two { grid-template-columns: 1fr; }
  table.grid { font-size: 0.85em; }
  table.grid th, table.grid td { padding: 0.3em 0.4em; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .filters input[type=text] { min-width: 0; width: 100%; }
}