/* ── EKM Ticker Admin — Shared Theme ── */
/* Light mode is default. Dark mode activates when html[data-theme="dark"]. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Light theme (default) ─────────────────────────────────────────────────── */
:root {
  --bg:          #f4f6f9;
  --bg2:         #eaecf0;
  --surface:     #ffffff;
  --surface2:    #f8f9fb;
  --border:      #d0d5dd;
  --border-hi:   #9aa4b2;
  --text:        #111827;
  --text-mid:    #374151;
  --text-dim:    #6b7280;
  --text-xdim:   #9ca3af;

  --accent:      #1d4ed8;
  --accent-hover:#1e40af;
  --accent-dim:  #dbeafe;
  --accent-text: #ffffff;

  --alert:       #dc2626;
  --alert-bg:    #fef2f2;
  --alert-bdr:   #fca5a5;
  --alert-text:  #991b1b;

  --caution:     #d97706;
  --caution-bg:  #fffbeb;
  --caution-bdr: #fcd34d;
  --caution-text:#92400e;

  --info:        #2563eb;
  --info-bg:     #eff6ff;
  --info-bdr:    #93c5fd;
  --info-text:   #1e40af;

  --success:     #16a34a;
  --success-bg:  #f0fdf4;
  --success-bdr: #86efac;
  --success-text:#15803d;

  --error:       #dc2626;
  --error-bg:    #fef2f2;
  --error-bdr:   #fca5a5;

  --admin:       #7c3aed;
  --admin-bg:    #f5f3ff;
  --admin-bdr:   #c4b5fd;
  --admin-text:  #5b21b6;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 32px rgba(0,0,0,0.10);

  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
}

/* ── Dark theme ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:          #0d0f12;
  --bg2:         #0a0c0f;
  --surface:     #141720;
  --surface2:    #1a1e28;
  --border:      #2a3040;
  --border-hi:   #3d4a60;
  --text:        #e8edf5;
  --text-mid:    #a0aec0;
  --text-dim:    #64748b;
  --text-xdim:   #475569;

  --accent:      #3b82f6;
  --accent-hover:#2563eb;
  --accent-dim:  #1e3a5f;
  --accent-text: #ffffff;

  --alert:       #f87171;
  --alert-bg:    #2a0f0f;
  --alert-bdr:   #7f1d1d;
  --alert-text:  #fca5a5;

  --caution:     #fbbf24;
  --caution-bg:  #2a1f00;
  --caution-bdr: #78350f;
  --caution-text:#fcd34d;

  --info:        #60a5fa;
  --info-bg:     #0f1e2a;
  --info-bdr:    #1e3a5f;
  --info-text:   #93c5fd;

  --success:     #34d399;
  --success-bg:  #0f2a1a;
  --success-bdr: #166534;
  --success-text:#6ee7b7;

  --error:       #f87171;
  --error-bg:    #2a0f0f;
  --error-bdr:   #7f1d1d;

  --admin:       #a78bfa;
  --admin-bg:    #1e1433;
  --admin-bdr:   #3d2a6e;
  --admin-text:  #c4b5fd;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 32px rgba(0,0,0,0.6);
}

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { transition: background 0.2s, color 0.2s; }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--sans);
  font-size:   14px;
  line-height: 1.5;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
header {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  padding:       0 32px;
  height:        58px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  box-shadow:    var(--shadow-sm);
  position:      sticky;
  top:           0;
  z-index:       10;
}

main {
  flex: 1;
  max-width: 820px;
  width:     100%;
  margin:    0 auto;
  padding:   36px 24px;
  display:   flex;
  flex-direction: column;
  gap: 24px;
}

main.wide { max-width: 1040px; }

footer {
  border-top:  1px solid var(--border);
  background:  var(--surface);
  padding:     14px 32px;
  display:     flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size:   10px;
  color:       var(--text-dim);
}

/* ── Header elements ───────────────────────────────────────────────────────── */
.header-left  { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; align-items: center; gap: 10px; }

.logo-mark {
  width: 32px; height: 32px;
  background:    var(--accent);
  border-radius: 6px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--mono);
  font-size:     12px;
  font-weight:   700;
  color:         #fff;
  flex-shrink:   0;
}

.header-title { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; }
.header-sub   { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

.user-chip {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 20px;
  padding:       5px 12px 5px 8px;
}
.user-avatar {
  width: 22px; height: 22px;
  background:    var(--accent);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     10px;
  font-weight:   700;
  color:         #fff;
  font-family:   var(--mono);
}
.user-chip-name { font-size: 12px; font-weight: 600; color: var(--text); }
.user-chip-role { font-size: 10px; color: var(--text-dim); font-family: var(--mono); }

/* ── Theme toggle ──────────────────────────────────────────────────────────── */
.theme-toggle {
  width: 32px; height: 32px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 6px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  font-size:     15px;
  transition:    all 0.15s;
  flex-shrink:   0;
}
.theme-toggle:hover { border-color: var(--border-hi); background: var(--bg2); }

/* ── Nav buttons ───────────────────────────────────────────────────────────── */
.nav-btn {
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   500;
  color:         var(--text-mid);
  text-decoration: none;
  padding:       6px 12px;
  border:        1px solid var(--border);
  border-radius: 6px;
  background:    var(--surface);
  cursor:        pointer;
  transition:    all 0.15s;
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
}
.nav-btn:hover    { border-color: var(--border-hi); color: var(--text); background: var(--surface2); }
.nav-btn.primary  { background: var(--accent); color: #fff; border-color: var(--accent); }
.nav-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ── Section labels ────────────────────────────────────────────────────────── */
.section-label {
  font-family:     var(--mono);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  2px;
  text-transform:  uppercase;
  color:           var(--text-dim);
  margin-bottom:   10px;
  display:         block;
}

/* ── Panels / cards ────────────────────────────────────────────────────────── */
.panel {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 10px;
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
}
.panel-header {
  padding:       14px 18px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  background:    var(--surface2);
}
.panel-body { padding: 20px 18px; display: flex; flex-direction: column; gap: 18px; }

/* ── Status dot ────────────────────────────────────────────────────────────── */
.status-pill { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--mono); color: var(--text-dim); }
.status-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 5px var(--success); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 9px;
  border-radius: 20px;
  font-family:   var(--mono);
  font-size:     10px;
  font-weight:   700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border:        1px solid transparent;
}
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.badge.alert    { background: var(--alert-bg);   color: var(--alert-text);   border-color: var(--alert-bdr); }
.badge.caution  { background: var(--caution-bg); color: var(--caution-text); border-color: var(--caution-bdr); }
.badge.info     { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-bdr); }
.badge.clear    { background: var(--bg2);        color: var(--text-dim);     border-color: var(--border); }
.badge.active   { background: var(--success-bg); color: var(--success-text); border-color: var(--success-bdr); }
.badge.inactive { background: var(--bg2);        color: var(--text-dim);     border-color: var(--border); }
.badge.admin    { background: var(--admin-bg);   color: var(--admin-text);   border-color: var(--admin-bdr); }
.badge.operator { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-bdr); }

/* ── Form elements ─────────────────────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-family:   var(--mono);
  font-size:     10px;
  font-weight:   700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:         var(--text-dim);
  display:       block;
}
input[type="text"],
input[type="password"],
textarea,
select {
  width:         100%;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 7px;
  color:         var(--text);
  font-family:   var(--sans);
  font-size:     13px;
  padding:       9px 11px;
  outline:       none;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-dim);
}
input::placeholder, textarea::placeholder { color: var(--text-xdim); }
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
select option { background: var(--surface); color: var(--text); }

.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
button {
  font-family:   var(--sans);
  font-size:     13px;
  font-weight:   600;
  border:        none;
  border-radius: 7px;
  cursor:        pointer;
  padding:       9px 18px;
  transition:    all 0.15s;
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary.full { width: 100%; justify-content: center; }

.btn-secondary { background: var(--surface); color: var(--text-mid); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border-hi); color: var(--text); background: var(--surface2); }

.btn-danger { background: var(--surface); color: var(--error); border: 1px solid var(--error-bdr); }
.btn-danger:hover { background: var(--error-bg); }

.btn-sm { padding: 5px 11px; font-size: 11px; border-radius: 5px; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  font-family:   var(--mono);
  font-size:     9px;
  font-weight:   700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:         var(--text-dim);
  padding:       10px 14px;
  text-align:    left;
  border-bottom: 2px solid var(--border);
  background:    var(--surface2);
  white-space:   nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text-mid); vertical-align: middle; }
td.strong { color: var(--text); font-weight: 500; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }
.mono-cell { font-family: var(--mono); font-size: 11px; }
.empty-td  { text-align: center; color: var(--text-dim); font-family: var(--mono); font-size: 11px; padding: 28px !important; }

/* ── Priority selector ─────────────────────────────────────────────────────── */
.priority-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.priority-option { position: relative; }
.priority-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.priority-label {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           6px;
  padding:       14px 10px;
  border:        2px solid var(--border);
  border-radius: 8px;
  cursor:        pointer;
  transition:    all 0.15s;
  user-select:   none;
  background:    var(--surface);
}
.priority-label:hover { border-color: var(--border-hi); background: var(--surface2); }
.pri-icon { font-size: 20px; line-height: 1; }
.pri-name { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-mid); }
.pri-desc { font-size: 11px; color: var(--text-dim); text-align: center; line-height: 1.3; }

input[value="alert"]:checked   ~ .priority-label { border-color: var(--alert-bdr);   background: var(--alert-bg); }
input[value="alert"]:checked   ~ .priority-label .pri-name { color: var(--alert-text); }
input[value="caution"]:checked ~ .priority-label { border-color: var(--caution-bdr); background: var(--caution-bg); }
input[value="caution"]:checked ~ .priority-label .pri-name { color: var(--caution-text); }
input[value="info"]:checked    ~ .priority-label { border-color: var(--info-bdr);    background: var(--info-bg); }
input[value="info"]:checked    ~ .priority-label .pri-name { color: var(--info-text); }

/* ── Preview bar ───────────────────────────────────────────────────────────── */
.preview-bar {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: 7px;
  padding:       10px 14px;
  font-family:   var(--mono);
  font-size:     12px;
  min-height:    42px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  overflow:      hidden;
}
.preview-ts    { color: var(--text-dim); white-space: nowrap; }
.preview-sep   { color: var(--text-xdim); }
.preview-msg   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.preview-msg.alert   { color: var(--alert-text); }
.preview-msg.caution { color: var(--caution-text); }
.preview-msg.info    { color: var(--info-text); }
.preview-empty { color: var(--text-xdim); font-style: italic; font-weight: 400; }

/* ── Action row ────────────────────────────────────────────────────────────── */
.action-row { display: flex; gap: 10px; }
.action-row .btn-primary { flex: 1; justify-content: center; padding: 11px; font-size: 14px; }

/* ── Current status display ────────────────────────────────────────────────── */
.current-body  { padding: 18px; min-height: 68px; display: flex; align-items: center; }
.current-empty { color: var(--text-dim); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.current-empty::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--text-xdim); display:inline-block; flex-shrink:0; }
.current-msg   { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.current-text  { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; }
.current-meta  { font-size: 11px; color: var(--text-dim); font-family: var(--mono); }

/* ── Char counter ──────────────────────────────────────────────────────────── */
.char-count      { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.char-count.warn { color: var(--caution); }

/* ── Feedback messages ─────────────────────────────────────────────────────── */
.msg-box { padding: 10px 14px; border-radius: 7px; font-size: 12px; font-weight: 500; display: none; }
.msg-box.error   { background: var(--error-bg);   border: 1px solid var(--error-bdr);   color: var(--error);         display: block; }
.msg-box.success { background: var(--success-bg); border: 1px solid var(--success-bdr); color: var(--success-text);  display: block; }

/* ── Audit action colours ──────────────────────────────────────────────────── */
.audit-action { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.audit-action.MESSAGE_POSTED       { color: var(--success); }
.audit-action.TICKER_CLEARED       { color: var(--text-dim); }
.audit-action.LOGIN_SUCCESS        { color: var(--info-text); }
.audit-action.LOGIN_FAILED         { color: var(--error); }
.audit-action.LOGOUT               { color: var(--text-dim); }
.audit-action.USER_CREATED         { color: var(--admin-text); }
.audit-action.USER_UPDATED         { color: var(--caution-text); }
.audit-action.USER_DELETED         { color: var(--error); }
.audit-action.PASSWORD_CHANGED_SELF{ color: var(--caution-text); }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.show { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); }
.modal-header { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--surface2); }
.modal-title  { font-size: 14px; font-weight: 600; color: var(--text); }
.modal-close  { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; }
.modal-close:hover { color: var(--text); background: var(--bg2); }
.modal-body   { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface2); }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); padding: 0 24px; }
.tab  { font-size: 13px; font-weight: 500; padding: 14px 16px; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap; }
.tab:hover  { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Filter row ────────────────────────────────────────────────────────────── */
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-row select, .filter-row input { width: auto; min-width: 160px; }

/* ── Detail cell ───────────────────────────────────────────────────────────── */
.detail-cell { font-family: var(--mono); font-size: 10px; color: var(--text-dim); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
#toast {
  position:   fixed;
  bottom:     28px;
  left:       50%;
  transform:  translateX(-50%) translateY(16px);
  background: var(--surface);
  border:     1px solid var(--border);
  border-radius: 8px;
  padding:    12px 20px;
  font-size:  13px;
  font-weight: 500;
  display:    flex;
  align-items: center;
  gap:        10px;
  opacity:    0;
  pointer-events: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  z-index:    100;
  color:      var(--text);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.success { border-color: var(--success-bdr); }
#toast.success .ti { color: var(--success); }
#toast.error   { border-color: var(--error-bdr); }
#toast.error   .ti { color: var(--error); }

/* ── Theme toggle script helper ────────────────────────────────────────────── */
/* Prevents flash of wrong theme on load */
html { visibility: hidden; }
html.ready { visibility: visible; }