/* =============================================================
   EchoBoard — custom design layer on top of Bootstrap 5.
   Heavily customized so it doesn't look like stock Bootstrap.
   ============================================================= */

:root {
  --eb-accent: #5B4BFF;
  --eb-bg: #F5F6FA;
  --eb-surface: #FFFFFF;
  --eb-border: #E7E9F2;
  --eb-text: #171A26;
  --eb-text-2: #6B7185;
  --eb-radius: 14px;
  --eb-shadow: 0 1px 2px rgba(23, 26, 38, .04), 0 4px 16px rgba(23, 26, 38, .04);
  --eb-sidebar-w: 248px;
}

[data-bs-theme="dark"] {
  --eb-bg: #101218;
  --eb-surface: #181B24;
  --eb-border: #262B38;
  --eb-text: #ECEEF5;
  --eb-text-2: #9AA1B5;
  --eb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --bs-body-bg: #101218;
}

html { scroll-behavior: smooth; }
body {
  background: var(--eb-bg);
  color: var(--eb-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--eb-accent); }
.x-small { font-size: .75rem; }
.w-fit { width: fit-content; }
.border-y { border-top: 1px solid var(--eb-border); border-bottom: 1px solid var(--eb-border); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-accent) 30%, transparent); }
.eb-btn-primary {
  background: var(--eb-accent); color: #fff; border: 1px solid var(--eb-accent);
  padding: .45rem 1rem;
}
.eb-btn-primary:hover { background: color-mix(in srgb, var(--eb-accent) 85%, #000); color: #fff; }
.eb-btn-outline {
  background: transparent; color: var(--eb-text);
  border: 1px solid var(--eb-border); padding: .45rem 1rem;
}
.eb-btn-outline:hover { background: var(--eb-surface); border-color: var(--eb-accent); color: var(--eb-text); }
.eb-btn-ghost {
  background: transparent; color: var(--eb-text-2); border: none;
  padding: .4rem .6rem; display: inline-flex; align-items: center; gap: .25rem;
}
.eb-btn-ghost:hover { background: color-mix(in srgb, var(--eb-text) 7%, transparent); color: var(--eb-text); }

/* ---------- Cards ---------- */
.eb-card, .card {
  background: var(--eb-surface);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow);
}
.eb-card-danger { border-color: color-mix(in srgb, #EF4444 35%, var(--eb-border)); }
.eb-alert { border-radius: 12px; border: none; box-shadow: var(--eb-shadow); }
.eb-modal { border: 1px solid var(--eb-border); border-radius: 16px; background: var(--eb-surface); }
.modal-content { background: var(--eb-surface); color: var(--eb-text); border: 1px solid var(--eb-border); border-radius: 16px; }
.btn-close { filter: none; }
[data-bs-theme="dark"] .btn-close { filter: invert(1); }

/* ---------- Admin shell ---------- */
.eb-admin-body { background: var(--eb-bg); }
.eb-shell { display: flex; min-height: 100vh; }
.eb-sidebar {
  width: var(--eb-sidebar-w); flex-shrink: 0; padding: 1rem .75rem;
  background: var(--eb-surface); border-right: 1px solid var(--eb-border);
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.eb-brand { padding: .5rem .75rem 1rem; font-weight: 700; color: var(--eb-text); text-decoration: none; }
.eb-side-link {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem;
  border-radius: 10px; color: var(--eb-text-2); text-decoration: none;
  font-size: .9rem; font-weight: 500;
}
.eb-side-link i { font-size: 1.05rem; }
.eb-side-link:hover { background: color-mix(in srgb, var(--eb-accent) 8%, transparent); color: var(--eb-text); }
.eb-side-link.active { background: var(--eb-accent); color: #fff; }
.eb-side-divider { height: 1px; background: var(--eb-border); margin: .75rem .5rem; }

.eb-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.eb-topbar {
  background: var(--eb-surface); border-bottom: 1px solid var(--eb-border);
  padding: .65rem 1.25rem; position: sticky; top: 0; z-index: 100;
}
.eb-content { padding: 1.5rem 1.25rem 3rem; max-width: 1400px; width: 100%; margin: 0 auto; }

.eb-user-btn { border: 1px solid var(--eb-border); background: var(--eb-surface); border-radius: 999px; padding: .2rem .6rem .2rem .25rem; }
.eb-menu { border: 1px solid var(--eb-border); border-radius: 12px; box-shadow: var(--eb-shadow); }
.dropdown-menu { background: var(--eb-surface); border-color: var(--eb-border); }
.dropdown-item { color: var(--eb-text); border-radius: 8px; }
.dropdown-item:hover { background: color-mix(in srgb, var(--eb-accent) 8%, transparent); }

.eb-global-search { position: relative; min-width: 260px; }
.eb-global-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--eb-text-2); }
.eb-global-search input { padding-left: 2.1rem; border-radius: 10px; background: var(--eb-bg); border-color: var(--eb-border); color: var(--eb-text); }

.eb-search { position: relative; }
.eb-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--eb-text-2); z-index: 5; }
.eb-search input { padding-left: 2.2rem; }

/* ---------- Inputs ---------- */
.eb-input, .form-control, .form-select { border-radius: 10px; border-color: var(--eb-border); }
.eb-input:focus, .form-control:focus, .form-select:focus {
  border-color: var(--eb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-accent) 20%, transparent);
  background: var(--eb-surface); color: var(--eb-text);
}
.form-control, .form-select { background: var(--eb-surface); color: var(--eb-text); }
.form-control::placeholder { color: var(--eb-text-2); }
.form-label { font-weight: 600; font-size: .875rem; color: var(--eb-text); }
.form-check-input:checked { background-color: var(--eb-accent); border-color: var(--eb-accent); }
.form-check-input { background-color: var(--eb-bg); border-color: var(--eb-border); }
.form-control-color { border-radius: 10px; }

.eb-choice { border: 1.5px solid var(--eb-border); border-radius: 12px; padding: .75rem; cursor: pointer; text-align: center; font-size: .85rem; transition: .15s; }
.eb-choice:hover { border-color: var(--eb-accent); }
.eb-choice input { display: none; }
.eb-choice:has(input:checked) { border-color: var(--eb-accent); background: color-mix(in srgb, var(--eb-accent) 8%, transparent); }

/* ---------- Stat cards ---------- */
.eb-stat-card .card-body { padding: 1rem; }
.eb-stat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.eb-stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.eb-stat-label { font-size: .78rem; color: var(--eb-text-2); }

/* ---------- Tables ---------- */
.eb-table { --bs-table-bg: transparent; }
.eb-table th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--eb-text-2); font-weight: 600; border-bottom-color: var(--eb-border) !important; padding: .75rem 1rem;
}
.eb-table td { border-bottom: 1px solid var(--eb-border); padding: .75rem 1rem; }
.eb-table tbody tr:hover { background: color-mix(in srgb, var(--eb-accent) 4%, transparent); }

/* ---------- Badges / chips ---------- */
.eb-status-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.eb-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 500;
  padding: .18rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--eb-text) 8%, transparent);
  color: var(--eb-text-2); text-decoration: none;
}
.eb-chip-hover:hover { filter: brightness(.95); }
.eb-chip-success { background: #10B9811a; color: #10B981; }
.eb-chip-official { background: var(--eb-accent); color: #fff; }
.eb-chip-internal { background: #F59E0B1a; color: #B45309; }
.eb-priority { font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; }
.eb-priority-low { background: #94A3B81a; color: #64748B; }
.eb-priority-medium { background: #3B82F61a; color: #3B82F6; }
.eb-priority-high { background: #F59E0B1a; color: #D97706; }
.eb-priority-urgent { background: #EF44441a; color: #EF4444; }

.eb-tag {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem;
  padding: .35rem .7rem; border-radius: 999px; background: var(--eb-bg);
  border: 1px solid var(--eb-border); color: var(--eb-text);
}
.btn-close-x { width: .5rem; height: .5rem; padding: 0; opacity: .45; }

/* ---------- Vote button ---------- */
.eb-vote-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: .45rem .6rem; border-radius: 12px;
  background: var(--eb-bg); border: 1px solid var(--eb-border);
  color: var(--eb-text); font-weight: 700; font-size: .95rem; line-height: 1.1;
  transition: .12s; cursor: pointer;
}
.eb-vote-btn i { font-size: 1rem; }
.eb-vote-btn:hover { border-color: var(--eb-accent); color: var(--eb-accent); }
.eb-vote-btn.voted { background: var(--eb-accent); border-color: var(--eb-accent); color: #fff; }
.eb-vote-btn.static { cursor: default; flex-direction: row; gap: .3rem; padding: .3rem .6rem; }
.eb-vote-btn-inline { flex-direction: row; gap: .3rem; min-width: 0; padding: .3rem .65rem; }
.eb-vote-btn:disabled { opacity: .6; cursor: wait; }

/* ---------- Feedback cards ---------- */
.eb-feedback-card { transition: .15s; }
.eb-feedback-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--eb-accent) 45%, var(--eb-border)); }
.eb-card-title { color: var(--eb-text); }
.eb-card-title:hover { color: var(--eb-accent); }
.eb-card-desc { line-height: 1.45; }
.min-w-0 { min-width: 0; }

/* ---------- Comments ---------- */
.eb-comment { background: var(--eb-bg); border-radius: 12px; padding: .85rem 1rem; }
.eb-comment-internal { background: #F59E0B12; border: 1px dashed #F59E0B66; }
.eb-comment-official { border: 1px solid color-mix(in srgb, var(--eb-accent) 40%, var(--eb-border)); }
.eb-prose { line-height: 1.65; color: var(--eb-text); overflow-wrap: anywhere; }

.eb-attachment {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem;
  padding: .4rem .7rem; border-radius: 10px; border: 1px solid var(--eb-border);
  background: var(--eb-bg); color: var(--eb-text); text-decoration: none;
}
.eb-attachment:hover { border-color: var(--eb-accent); }

/* ---------- Avatars ---------- */
.eb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px; color: #fff;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.eb-avatar-sm { width: 24px; height: 24px; font-size: .65rem; }
.eb-avatar-lg { width: 56px; height: 56px; font-size: 1.2rem; }
.eb-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--eb-accent); color: #fff; font-weight: 800;
}
.eb-logo-img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.eb-notif-dot { background: #EF4444; font-size: .65rem; }

/* ---------- Charts (pure CSS) ---------- */
.eb-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.eb-chart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.eb-chart-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; transition: opacity .15s; }
.eb-chart-col:hover .eb-chart-bar { opacity: 1; }
.eb-chart-axis { display: flex; justify-content: space-between; }
.eb-donut { width: 120px; height: 120px; border-radius: 999px; position: relative; flex-shrink: 0; }
.eb-donut-hole {
  position: absolute; inset: 22px; background: var(--eb-surface);
  border-radius: 999px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.eb-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ---------- Roadmap ---------- */
.eb-roadmap-col { background: color-mix(in srgb, var(--eb-text) 4%, transparent); border-radius: var(--eb-radius); }
.eb-roadmap-card { cursor: grab; }
.eb-roadmap-card:active { cursor: grabbing; }
.eb-roadmap-card.dragging { opacity: .5; }
[data-dropzone].drag-over { outline: 2px dashed var(--eb-accent); outline-offset: 4px; border-radius: 12px; }

/* ---------- Activity ---------- */
.eb-activity { display: grid; gap: .75rem; }
.eb-activity-item { display: flex; gap: .6rem; align-items: flex-start; }
.eb-unread { border-left: 3px solid var(--eb-accent); }

/* ---------- Tabs / pagination ---------- */
.eb-tabs .nav-link { border: none; color: var(--eb-text-2); font-weight: 600; border-radius: 10px 10px 0 0; }
.eb-tabs .nav-link.active { color: var(--eb-accent); border-bottom: 2px solid var(--eb-accent); background: transparent; }
.eb-pagination .page-link { border: none; border-radius: 8px !important; margin: 0 2px; color: var(--eb-text); background: var(--eb-surface); }
.eb-pagination .page-item.active .page-link { background: var(--eb-accent); color: #fff; }

/* ---------- Auth ---------- */
.eb-auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.eb-auth-wrap { width: 100%; max-width: 440px; }
.eb-auth-brand { text-align: center; margin-bottom: 1.25rem; color: var(--eb-text); }
.eb-auth-card { border-radius: 18px; }

/* ---------- Site / portal ---------- */
.eb-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--eb-accent) 7%, var(--eb-bg)) 0%, var(--eb-bg) 100%); }
.eb-hero-search { position: relative; }
.eb-hero-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--eb-text-2); }
.eb-hero-search input { padding: .8rem .8rem .8rem 2.6rem; border-radius: 12px; border: 1px solid var(--eb-border); }
.eb-hero-search .btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.eb-portal-nav, .eb-site-nav {
  background: color-mix(in srgb, var(--eb-surface) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--eb-border);
}
.eb-portal-link { color: var(--eb-text-2); font-weight: 500; padding: .35rem .65rem; border-radius: 8px; }
.eb-portal-link:hover { color: var(--eb-text); background: color-mix(in srgb, var(--eb-text) 6%, transparent); }
.eb-site-link { color: var(--eb-text-2); text-decoration: none; font-size: .9rem; }
.eb-site-link:hover { color: var(--eb-text); }
.eb-portal-footer, .eb-site-footer { border-top: 1px solid var(--eb-border); padding: 2rem 0; color: var(--eb-text-2); background: var(--eb-surface); }
.eb-cover { width: 100%; height: 170px; object-fit: cover; border-radius: var(--eb-radius) var(--eb-radius) 0 0; }
.eb-sticky { position: sticky; top: 90px; }

.eb-preview-card { max-width: 560px; margin-left: auto; }
.eb-step-num {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--eb-accent); color: #fff; font-weight: 700; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.eb-plan-featured { border-color: var(--eb-accent); position: relative; }
.eb-plan-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--eb-accent); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .2rem .75rem; border-radius: 999px;
}
.eb-accordion .accordion-item { background: var(--eb-surface); border-color: var(--eb-border); border-radius: 12px !important; margin-bottom: .5rem; overflow: hidden; }
.eb-accordion .accordion-button { background: var(--eb-surface); color: var(--eb-text); font-weight: 600; }
.eb-accordion .accordion-button:not(.collapsed) { color: var(--eb-accent); box-shadow: none; }
.eb-timeline { max-width: 720px; margin: 0 auto; display: grid; gap: 1.5rem; }
.eb-timeline-item { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--eb-border); }
.eb-timeline-item:last-child { border-left-color: transparent; }
.eb-timeline-item::before {
  content: ""; position: absolute; left: -6px; top: 1.5rem;
  width: 10px; height: 10px; border-radius: 999px; background: var(--eb-accent);
}
.eb-thanks {
  font-size: .85rem; color: var(--eb-text-2);
  background: color-mix(in srgb, var(--eb-accent) 7%, transparent);
  border-radius: 10px; padding: .6rem .9rem;
}
.eb-similar { background: #F59E0B12; border: 1px solid #F59E0B44; border-radius: 12px; padding: .85rem 1rem; }
.eb-similar-item {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem;
  border-radius: 8px; background: var(--eb-surface); font-size: .85rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .eb-sidebar-canvas { width: 265px; background: var(--eb-surface); }
  .eb-content { padding: 1rem .9rem 3rem; }
  .eb-hero-search .btn { padding: .45rem .8rem; }
  .eb-vote-btn { min-width: 46px; } /* one-hand friendly */
}

/* ---------- Toast ---------- */
.eb-toast-stack { position: fixed; bottom: 1rem; right: 1rem; z-index: 2000; display: grid; gap: .5rem; }
.eb-toast {
  background: var(--eb-surface); color: var(--eb-text);
  border: 1px solid var(--eb-border); border-radius: 12px;
  box-shadow: var(--eb-shadow); padding: .75rem 1rem; font-size: .875rem;
  display: flex; align-items: center; gap: .5rem; min-width: 240px;
}