/* ============================================================
   TED Laser — Shared Design System
   ted.css — import in every page before page-specific styles
   ============================================================ */

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

/* ── Design Tokens ── */
:root {
  /* Typefaces */
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Background layers */
  --bg:    #f5f3ef;
  --card:  #ffffff;
  --card2: #f0ede8;

  /* Borders */
  --border:  #e2ddd6;
  --border2: #c8c3b8;

  /* Text */
  --ink: #1a1917;
  --t2:  #5a5650;
  --t3:  #9a9690;

  /* Accent — teal */
  --accent:   #0d9488;
  --accent-h: #0f766e;
  --abg:      rgba(13,148,136,.07);
  --ab:       rgba(13,148,136,.20);

  /* Blue (secondary) */
  --blue:   #2563eb;
  --blue-h: #1d4ed8;
  --bbg:    rgba(37,99,235,.07);
  --bb:     rgba(37,99,235,.20);

  /* Status */
  --green: #047857;  --gbg: #ecfdf5; --gb: #6ee7b7;
  --amber: #b45309;  --ambg:#fffbeb; --amb:#fde68a;
  --red:   #b91c1c;  --rbg: #fff1f2; --rb: #fca5a5;

  /* Dark rail/topbar */
  --rail:         #1a1e2e;
  --rail2:        #222740;
  --rail-t:       #dde1f0;
  --rail-t2:      #7880a0;
  --rail-accent:  #2dd4bf;
  --rail-accent-bg: rgba(45,212,191,.12);
  --rail-border:  rgba(255,255,255,.08);

  /* Radii */
  --r:  10px;
  --r2:  7px;
  --r3:  4px;

  /* Shadows */
  --sh:  0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --sh2: 0 4px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ── Base ── */
html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Shared Topbar ── */
.ted-topbar {
  height: 52px;
  background: var(--rail);
  border-bottom: 2.5px solid var(--accent);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.ted-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.ted-topbar-logo {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--rail-accent);
  letter-spacing: .5px;
}
.ted-topbar-sep {
  color: var(--rail-t2);
  font-size: 12px;
}
.ted-topbar-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--rail-t2);
  letter-spacing: .2px;
}
.ted-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ted-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ted-topbar-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--rail-t);
}
.ted-topbar-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--rail-accent);
  background: var(--rail-accent-bg);
  border: 1px solid rgba(45,212,191,.25);
  border-radius: 99px;
  padding: 2px 8px;
}
.ted-topbar-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--rail-t2);
  background: transparent;
  border: 1px solid var(--rail-border);
  border-radius: var(--r2);
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ted-topbar-btn:hover {
  color: var(--rail-t);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}

/* ── Shared Card ── */
.ted-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
}

/* ── Shared Buttons ── */
.btn { display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--r2);font-size:12px;font-weight:700;font-family:var(--font);cursor:pointer;border:1.5px solid transparent;transition:all .15s;text-decoration:none; }
.btn-p { background:var(--accent);color:#fff;border-color:var(--accent); }
.btn-p:hover { background:var(--accent-h);border-color:var(--accent-h); }
.btn-g { background:var(--card);color:var(--t2);border-color:var(--border); }
.btn-g:hover { border-color:var(--border2);color:var(--ink); }
.btn-ghost { background:transparent;color:var(--t2);border-color:transparent; }
.btn-ghost:hover { background:var(--card2); }
.btn-sm { padding:5px 10px;font-size:11px; }
.btn-xs { padding:3px 8px;font-size:10px; }

/* ── Shared Status Badges ── */
.ted-badge { display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.3px; }
.ted-badge-green  { background:var(--gbg);  color:var(--green); border:1px solid var(--gb); }
.ted-badge-amber  { background:var(--ambg); color:var(--amber); border:1px solid var(--amb); }
.ted-badge-red    { background:var(--rbg);  color:var(--red);   border:1px solid var(--rb); }
.ted-badge-blue   { background:var(--bbg);  color:var(--blue);  border:1px solid var(--bb); }
.ted-badge-dim    { background:var(--card2);color:var(--t3);    border:1px solid var(--border); }

/* ── Notification Bell ────────────────────────────────────── */
.notif-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--rail-border);transition:all .15s;}
.notif-bell:hover{background:rgba(255,255,255,.08);}
.notif-bell svg{width:16px;height:16px;stroke:var(--rail-t2);fill:none;stroke-width:2;stroke-linecap:round;}
.notif-badge{position:absolute;top:4px;right:4px;width:8px;height:8px;
  background:#b91c1c;border-radius:50%;border:1.5px solid var(--rail);display:none;}
.notif-badge.show{display:block;}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:320px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh2);z-index:500;display:none;max-height:400px;overflow-y:auto;}
.notif-panel.open{display:block;}
.notif-wrap{position:relative;}
.notif-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;}
.notif-item:hover{background:var(--card2);}
.notif-item.unread{background:#f0fdfb;}
.notif-item:last-child{border-bottom:none;}
.notif-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.notif-msg{font-size:11px;color:var(--t2);line-height:1.4;}
.notif-time{font-size:10px;color:var(--t3);margin-top:3px;}
.notif-empty{padding:24px;text-align:center;font-size:12px;color:var(--t3);}
.notif-head{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.notif-head-title{font-size:12px;font-weight:700;color:var(--ink);}
.notif-mark-all{font-size:11px;color:var(--accent);cursor:pointer;font-weight:600;}