/* ═══════════════════════════════════════════
   PU-Connect Design System — Global Tokens
   ═══════════════════════════════════════════ */

/* ── Light mode (default) ── */
:root {
  --bg:          #F9FAFB;
  --surface:     #FFFFFF;
  --surface-2:   #F3F4F6;
  --border:      #E5E7EB;
  --border-2:    #D1D5DB;
  --text:        #0D0F14;
  --text-2:      #6B7280;
  --accent:      #c9a030;
  --accent-hi:   #b8891f;
  --accent-dim:  #fdf3d0;
  --accent-glow: rgba(201,160,48,.18);
  --danger:      #EF4444;
  --danger-dim:  #FEE2E2;
  --warn:        #F59E0B;
  --warn-dim:    #FEF3C7;

  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:      0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);

  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  --nav-h:       58px;
  --bot-h:       72px;
  --sidebar-w:   240px;

  /* ── Responsive layout ── */
  --page-max:    960px;
  --page-pad:    clamp(.75rem, 4vw, 1.25rem);
  --gap-sm:      clamp(.5rem,  2vw, .85rem);
  --gap-md:      clamp(.75rem, 3vw, 1.25rem);

  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-display:'Inter', system-ui, sans-serif;

  --ease-out:    cubic-bezier(.2, 0, 0, 1);
}

/* ── Dark mode (system preference) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0F1117;
    --surface:     #1A1D27;
    --surface-2:   #22263A;
    --border:      #2E3348;
    --border-2:    #3D4260;
    --text:        #F0F2F8;
    --text-2:      #8B92A5;
    --accent:      #e8c96a;
    --accent-hi:   #d4b050;
    --accent-dim:  rgba(232,201,106,.12);
    --accent-glow: rgba(232,201,106,.18);
    --danger:      #F87171;
    --danger-dim:  #450A0A;
    --warn:        #FBBF24;
    --warn-dim:    #451A03;

    --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
    --shadow:      0 4px 16px rgba(0,0,0,.45);
    --shadow-lg:   0 12px 40px rgba(0,0,0,.55);
  }
}

/* ── Dark mode (manual toggle) ── */
[data-theme="dark"] {
  --bg:          #0F1117;
  --surface:     #1A1D27;
  --surface-2:   #22263A;
  --border:      #2E3348;
  --border-2:    #3D4260;
  --text:        #F0F2F8;
  --text-2:      #8B92A5;
  --accent:      #e8c96a;
  --accent-hi:   #d4b050;
  --accent-dim:  rgba(232,201,106,.12);
  --accent-glow: rgba(232,201,106,.18);
  --danger:      #F87171;
  --danger-dim:  #450A0A;
  --warn:        #FBBF24;
  --warn-dim:    #451A03;

  --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
  --shadow:      0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.55);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Typography scale ── */
.t-xs   { font-size: .72rem; }
.t-sm   { font-size: .82rem; }
.t-base { font-size: .92rem; }
.t-md   { font-size: 1rem;   }
.t-lg   { font-size: 1.15rem; font-weight: 600; }
.t-xl   { font-size: 1.4rem;  font-weight: 700; }
.t-2xl  { font-size: 1.8rem;  font-weight: 800; letter-spacing: -.5px; }
.t-3xl  { font-size: 2.4rem;  font-weight: 800; letter-spacing: -.8px; }
.t-muted { color: var(--text-2); }

/* ═══════════════════════════════════════════
   Verified badge — Rosette style with radiating spines
   ═══════════════════════════════════════════ */
.pu-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* 12 radiating spines (rosette) via conic gradient */
  background: repeating-conic-gradient(
    from 0deg,
    #0b5da4 0deg, #3b9eff 7deg, #0b5da4 14deg,
    #0b5da4 30deg
  );
}

/* Center circle — covers inner portion of spines, creating the rosette look */
.pu-verified::before {
  content: '';
  position: absolute;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  background: linear-gradient(135deg, #0b5da4 0%, #00f2fe 50%, #1172b3 100%);
  z-index: 1;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.2),
    0 0 0 1.5px rgba(255,255,255,0.15);
  pointer-events: none;
}

/* Checkmark icon */
.pu-verified svg {
  display: block;
  width: 65%;
  height: 65%;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  position: relative;
  z-index: 2;
}

.pu-verified:hover {
  transform: scale(1.12);
}

/* ── Dark mode ── */
[data-theme="dark"] .pu-verified {
  background: repeating-conic-gradient(
    from 0deg,
    #1a6bc4 0deg, #5bb8ff 7deg, #1a6bc4 14deg,
    #1a6bc4 30deg
  );
  box-shadow:
    0 1px 3px rgba(0,0,0,.35),
    0 0 0 1px rgba(79,172,254,.2);
}

[data-theme="dark"] .pu-verified::before {
  background: linear-gradient(135deg, #1a6bc4 0%, #00f2fe 50%, #1a7bc4 100%);
}

[data-theme="dark"] .pu-verified:hover {
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 0 0 2px rgba(79,172,254,.35);
}

/* ── Light mode ── */
[data-theme="light"] .pu-verified {
  box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 0 0 1px rgba(79,172,254,.25);
}

[data-theme="light"] .pu-verified:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.2),
    0 0 0 2px rgba(79,172,254,.4);
}

/* ── Sizes ── */
.pu-verified-sm { width: 14px; height: 14px; }
.pu-verified-lg { width: 22px; height: 22px; }
.pu-verified-sm svg { stroke-width: 2.5; }
.pu-verified-lg svg { stroke-width: 3; }

/* Responsive sizes for different viewports */
@media (max-width: 380px) {
  .pu-verified-sm { width: 12px; height: 12px; }
  .pu-verified-lg { width: 18px; height: 18px; }
}

/* ── Gold badge variant (staff / admin) ── */
.pu-verified-gold {
  background: repeating-conic-gradient(
    from 0deg,
    #c9a030 0deg, #e8c96a 7deg, #c9a030 14deg,
    #c9a030 30deg
  );
}

.pu-verified-gold::before {
  background: linear-gradient(135deg, #c9a030 0%, #e8c96a 50%, #d4a830 100%);
}

[data-theme="dark"] .pu-verified-gold {
  background: repeating-conic-gradient(
    from 0deg,
    #d4a830 0deg, #f0d878 7deg, #d4a830 14deg,
    #d4a830 30deg
  );
  box-shadow:
    0 1px 3px rgba(0,0,0,.35),
    0 0 0 1px rgba(232,201,106,.2);
}

[data-theme="dark"] .pu-verified-gold::before {
  background: linear-gradient(135deg, #d4a830 0%, #f0d878 50%, #c9a030 100%);
}

[data-theme="dark"] .pu-verified-gold:hover {
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 0 0 2px rgba(232,201,106,.35);
}

[data-theme="light"] .pu-verified-gold {
  box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 0 0 1px rgba(232,201,106,.25);
}

[data-theme="light"] .pu-verified-gold:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.2),
    0 0 0 2px rgba(232,201,106,.4);
}

/* ── Utility buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .62rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  transition: all .18s var(--ease-out);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-hi);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-ghost {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--border-2);
  background: var(--border);
}

.btn-danger {
  background: var(--danger-dim);
  color: var(--danger);
}
.btn-danger:hover { opacity: .85; }

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: all .18s var(--ease-out);
}
.btn-icon:hover { color: var(--text); background: var(--border); }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ── Form inputs ── */
.input {
  width: 100%;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .68rem .9rem;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .9rem;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.input::placeholder { color: var(--text-2); }
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border-radius: var(--radius-full);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2px;
}
.badge-green  { background: var(--accent-dim);  color: var(--accent); }
.badge-warn   { background: var(--warn-dim);    color: var(--warn); }
.badge-danger { background: var(--danger-dim);  color: var(--danger); }
.badge-muted  { background: var(--surface-2);   color: var(--text-2); }

/* ── Divider ── */
.divider { height: 1px; background: var(--border); }

/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Skeleton loader ── */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

/* ══════════════════════════════════════════
   Notification bell dot
   ══════════════════════════════════════════ */
.notif-dot {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  border: 2px solid var(--surface);
  line-height: 1;
}

/* Bell button wrapper needs relative positioning for dot */
#notifBtn { position: relative; }

/* ══════════════════════════════════════════
   Notification panel dropdown
   ══════════════════════════════════════════ */
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 1rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.notif-panel.np-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.np-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem .7rem;
  border-bottom: 1px solid var(--border);
}
.np-heading {
  font-size: .9rem;
  font-weight: 700;
}
.np-mark-all {
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-sans);
}
.np-mark-all:hover { opacity: .75; }

.np-list {
  max-height: 360px;
  overflow-y: auto;
}

.np-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: .85rem;
  color: var(--text-2);
}

.np-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background .14s;
  position: relative;
}
.np-item:last-child { border-bottom: none; }
.np-item:hover { background: var(--surface-2); }
.np-item.np-unread { background: var(--accent-dim); }
.np-item.np-unread:hover { background: var(--surface-2); }

.np-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}
.np-icon.message { background: var(--accent-dim); color: var(--accent); border-color: transparent; }
.np-icon.system  { background: var(--warn-dim);   color: var(--warn);   border-color: transparent; }

.np-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.np-title {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-content {
  font-size: .78rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-time {
  font-size: .7rem;
  color: var(--text-2);
  opacity: .7;
}

.np-badge {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: .35rem;
}

/* ══════════════════════════════════════════
   Global responsive overrides
   Single source of truth — override per-page
   tokens at known breakpoints so every page
   inherits fluid sizing without hardcoding.
   ══════════════════════════════════════════ */

/* Fluid font-size base: 14px → 16px over 320–768px */
html { font-size: clamp(14px, 0.875rem + 0.5vw, 16px); }

/* Tighten nav on small phones */
@media (max-width: 380px) {
  :root {
    --nav-h: 52px;
    --bot-h: 64px;
  }
}

/* Tablet: wider sidebar */
@media (min-width: 768px) and (max-width: 959px) {
  :root { --sidebar-w: 220px; }
}

/* Desktop: sidebar always visible */
@media (min-width: 960px) {
  :root { --page-pad: clamp(1rem, 2vw, 1.5rem); }
}

/* Inputs: prevent iOS zoom (font-size < 16px triggers it) */
@media (max-width: 767px) {
  .input, input, textarea, select {
    font-size: max(.9rem, 16px) !important;
  }
}

/* Safe-area-aware bottom padding for scrollable pages */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app-main {
    padding-bottom: calc(var(--bot-h) + 16px + env(safe-area-inset-bottom));
  }
}