/* ============================================================
   HYPER FIELD — Fider Custom Theme
   Paste into: https://hyperfieldfeedback.xpltd.co/admin/advanced
   ============================================================ */

/* ----------------------------------------------------------
   0. CSS CUSTOM PROPERTIES
   ---------------------------------------------------------- */
:root {
  /* Backgrounds */
  --hf-bg0: #050506;
  --hf-bg1: #0a0b0c;
  --hf-bg2: #111214;
  --hf-bg3: #1a1c1f;
  --hf-bg4: #242628;

  /* Text */
  --hf-text1: #ffffff;
  --hf-text2: #e4e4e7;
  --hf-text3: #a1a1aa;

  /* Accents */
  --hf-genA: #f472b6;
  --hf-genB: #2dd4bf;
  --hf-mod: #22d3ee;
  --hf-fx: #c084fc;
  --hf-active: #00e676;
  --hf-warning: #fbbf24;

  /* Surfaces & Borders */
  --hf-border: #3f3f46;
  --hf-muted: #52525b;
  --hf-input: #141517;
  --hf-input-border: #0a0a0c;
  --hf-panel-from: #1c1d21;
  --hf-panel-to: #191a1e;
}

/* ----------------------------------------------------------
   1. BASE / BODY
   ---------------------------------------------------------- */
html, body {
  background-color: var(--hf-bg0) !important;
  color: var(--hf-text2) !important;
  font-family: 'system-ui', '-apple-system', 'BlinkMacSystemFont',
               'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif !important;
}

::selection {
  background: rgba(244, 114, 182, 0.3);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--hf-bg1); }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--hf-border); }

/* ----------------------------------------------------------
   2. HEADER / NAVIGATION
   ---------------------------------------------------------- */
.c-header {
  background-color: rgba(10, 11, 12, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hf-border) !important;
}

.c-header .c-menu-item,
.c-header .c-menu-item a,
.c-header a {
  color: var(--hf-text3) !important;
  transition: color 0.15s ease;
}

.c-header .c-menu-item:hover,
.c-header .c-menu-item a:hover,
.c-header a:hover {
  color: var(--hf-text1) !important;
}

.c-header .c-env-name,
.c-header .c-menu-item-title {
  color: var(--hf-text1) !important;
  font-weight: 600;
}

/* ----------------------------------------------------------
   3. MAIN CONTENT AREA
   ---------------------------------------------------------- */
.c-page,
.c-page .container,
#content,
main,
.page {
  background-color: var(--hf-bg0) !important;
}

/* ----------------------------------------------------------
   4. SIDEBAR / FILTERS
   ---------------------------------------------------------- */
.c-sidebar,
.sidebar {
  background-color: var(--hf-bg1) !important;
  border-color: var(--hf-border) !important;
}

/* ----------------------------------------------------------
   5. CARDS / POST LIST
   ---------------------------------------------------------- */
.c-post-list .c-list-item,
.c-post-item,
.c-idea-list .c-list-item,
.list-item {
  background: linear-gradient(to bottom, var(--hf-panel-from), var(--hf-panel-to)) !important;
  border: 1px solid rgba(69, 72, 80, 0.12) !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.2s ease;
}

.c-post-list .c-list-item:hover,
.c-post-item:hover,
.c-idea-list .c-list-item:hover,
.list-item:hover {
  border-color: rgba(244, 114, 182, 0.3) !important;
}

/* Post titles */
.c-post-list .c-list-item a,
.c-post-item .c-post-title,
.c-list-item .c-title,
.c-idea-list .c-list-item a {
  color: var(--hf-text1) !important;
  font-weight: 500;
  transition: color 0.15s ease;
}

.c-post-list .c-list-item a:hover,
.c-post-item .c-post-title:hover,
.c-idea-list .c-list-item a:hover {
  color: var(--hf-genA) !important;
}

/* Post descriptions / excerpts */
.c-post-list .c-list-item .c-description,
.c-post-item .c-description,
.c-list-item .c-description {
  color: var(--hf-text3) !important;
}

/* ----------------------------------------------------------
   6. VOTE BUTTON / COUNTER
   ---------------------------------------------------------- */
.c-vote-counter,
.c-support-counter,
button[class*="vote"],
.c-vote-button {
  background-color: var(--hf-bg3) !important;
  border: 1px solid var(--hf-border) !important;
  color: var(--hf-text2) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease;
}

.c-vote-counter:hover,
.c-support-counter:hover,
button[class*="vote"]:hover,
.c-vote-button:hover {
  border-color: var(--hf-genB) !important;
  color: var(--hf-genB) !important;
}

.c-vote-counter.m-voted,
.c-support-counter.m-voted,
.c-vote-button.m-voted {
  background: linear-gradient(135deg, var(--hf-genA), var(--hf-genB)) !important;
  border-color: transparent !important;
  color: #000 !important;
  font-weight: 600;
}

/* ----------------------------------------------------------
   7. TAGS / BADGES / STATUS LABELS
   ---------------------------------------------------------- */
.c-tag,
.c-badge,
.c-status,
.tag,
.label {
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Status colors mapped to Hyper Field palette */
.c-status-label.m-open,
.c-status.m-open {
  background-color: rgba(34, 211, 238, 0.1) !important;
  color: var(--hf-mod) !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
}

.c-status-label.m-planned,
.c-status.m-planned {
  background-color: rgba(192, 132, 252, 0.1) !important;
  color: var(--hf-fx) !important;
  border: 1px solid rgba(192, 132, 252, 0.3) !important;
}

.c-status-label.m-started,
.c-status.m-started {
  background-color: rgba(251, 191, 36, 0.1) !important;
  color: var(--hf-warning) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.c-status-label.m-completed,
.c-status.m-completed,
.c-status-label.m-done,
.c-status.m-done {
  background-color: rgba(0, 230, 118, 0.1) !important;
  color: var(--hf-active) !important;
  border: 1px solid rgba(0, 230, 118, 0.3) !important;
}

.c-status-label.m-declined,
.c-status.m-declined,
.c-status-label.m-closed,
.c-status.m-closed {
  background-color: rgba(82, 82, 91, 0.15) !important;
  color: var(--hf-text3) !important;
  border: 1px solid rgba(63, 63, 70, 0.5) !important;
}

.c-status-label.m-duplicate,
.c-status.m-duplicate {
  background-color: rgba(244, 114, 182, 0.1) !important;
  color: var(--hf-genA) !important;
  border: 1px solid rgba(244, 114, 182, 0.3) !important;
}

.c-tag {
  background-color: rgba(45, 212, 191, 0.1) !important;
  color: var(--hf-genB) !important;
  border: 1px solid rgba(45, 212, 191, 0.25) !important;
}

/* ----------------------------------------------------------
   8. BUTTONS
   ---------------------------------------------------------- */
/* Primary action */
.c-button.m-positive,
.c-button.m-primary,
button.primary,
.ui.primary.button,
.btn-primary {
  background: linear-gradient(135deg, var(--hf-genA), var(--hf-genB)) !important;
  color: #000 !important;
  border: none !important;
  font-weight: 600;
  border-radius: 6px !important;
  transition: opacity 0.15s ease;
}

.c-button.m-positive:hover,
.c-button.m-primary:hover,
button.primary:hover,
.ui.primary.button:hover,
.btn-primary:hover {
  opacity: 0.9;
}

/* Secondary / default button */
.c-button,
.c-button.m-default,
button.secondary,
.ui.button,
.btn {
  background-color: var(--hf-bg3) !important;
  color: var(--hf-text2) !important;
  border: 1px solid var(--hf-border) !important;
  border-radius: 6px !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.c-button:hover,
.c-button.m-default:hover,
button.secondary:hover,
.ui.button:hover,
.btn:hover {
  border-color: var(--hf-genA) !important;
  color: var(--hf-text1) !important;
  background-color: var(--hf-bg4) !important;
}

/* Danger / negative */
.c-button.m-danger,
.c-button.m-negative {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.c-button.m-danger:hover,
.c-button.m-negative:hover {
  background-color: rgba(239, 68, 68, 0.25) !important;
}

/* ----------------------------------------------------------
   9. FORMS / INPUTS
   ---------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select,
.c-input,
.c-textarea,
.ui.input input,
.ui.form input,
.ui.form textarea {
  background-color: var(--hf-input) !important;
  border: 1px solid var(--hf-input-border) !important;
  color: var(--hf-text1) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 2px 4px #0a0a0c !important;
  transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus,
.c-input:focus,
.c-textarea:focus,
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus {
  border-color: var(--hf-genA) !important;
  outline: none !important;
  box-shadow: inset 0 2px 4px #0a0a0c, 0 0 0 2px rgba(244, 114, 182, 0.15) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--hf-muted) !important;
}

/* ----------------------------------------------------------
   10. SINGLE POST / IDEA VIEW
   ---------------------------------------------------------- */
.c-post-header,
.c-idea-header {
  color: var(--hf-text1) !important;
}

.c-post-header h1,
.c-idea-header h1,
.c-post-show h1 {
  color: var(--hf-text1) !important;
  font-weight: 700;
}

/* ----------------------------------------------------------
   11. COMMENTS
   ---------------------------------------------------------- */
.c-comment,
.c-comment-list .c-comment-item {
  background-color: var(--hf-bg2) !important;
  border: 1px solid rgba(69, 72, 80, 0.12) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
}

.c-comment .c-name,
.c-comment-item .c-name,
.c-comment .c-author {
  color: var(--hf-genB) !important;
  font-weight: 500;
}

.c-comment .c-date,
.c-comment-item .c-date,
.c-comment .c-moment {
  color: var(--hf-muted) !important;
  font-size: 0.8rem;
}

.c-comment .c-content,
.c-comment-item .c-content,
.c-comment .c-text {
  color: var(--hf-text2) !important;
}

/* Staff/admin comment highlight */
.c-comment.m-staff,
.c-comment-item.m-staff {
  border-left: 3px solid var(--hf-active) !important;
}

/* ----------------------------------------------------------
   12. MARKDOWN RENDERED CONTENT
   ---------------------------------------------------------- */
.c-markdown h1,
.c-markdown h2,
.c-markdown h3,
.c-markdown h4 {
  color: var(--hf-text1) !important;
}

.c-markdown p {
  color: var(--hf-text2) !important;
}

.c-markdown a {
  color: var(--hf-mod) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.3);
  transition: border-color 0.15s ease;
}

.c-markdown a:hover {
  border-bottom-color: var(--hf-mod);
}

.c-markdown code {
  background-color: var(--hf-bg3) !important;
  color: var(--hf-genA) !important;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco',
               'Consolas', 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.9em;
}

.c-markdown pre {
  background-color: var(--hf-bg1) !important;
  border: 1px solid var(--hf-border) !important;
  border-radius: 6px !important;
  padding: 12px !important;
}

.c-markdown pre code {
  background-color: transparent !important;
  padding: 0;
}

.c-markdown blockquote {
  border-left: 3px solid var(--hf-fx) !important;
  background-color: rgba(192, 132, 252, 0.05) !important;
  padding: 8px 16px !important;
  color: var(--hf-text3) !important;
}

.c-markdown img {
  border-radius: 6px;
  border: 1px solid var(--hf-border);
}

/* ----------------------------------------------------------
   13. MODALS / OVERLAYS
   ---------------------------------------------------------- */
.c-modal,
.c-modal-window,
.ui.modal {
  background: linear-gradient(to bottom, var(--hf-panel-from), var(--hf-panel-to)) !important;
  border: 1px solid rgba(69, 72, 80, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  color: var(--hf-text2) !important;
}

.c-modal-dimmer,
.ui.dimmer {
  background-color: rgba(5, 5, 6, 0.8) !important;
  backdrop-filter: blur(4px);
}

.c-modal .c-modal-header,
.c-modal-window .c-modal-header,
.ui.modal > .header {
  color: var(--hf-text1) !important;
  border-bottom: 1px solid var(--hf-border) !important;
}

/* ----------------------------------------------------------
   14. FOOTER
   ---------------------------------------------------------- */
.c-footer,
footer {
  background-color: var(--hf-bg1) !important;
  border-top: 1px solid var(--hf-border) !important;
  color: var(--hf-text3) !important;
}

.c-footer a,
footer a {
  color: var(--hf-text3) !important;
  transition: color 0.15s ease;
}

.c-footer a:hover,
footer a:hover {
  color: var(--hf-text1) !important;
}

/* ----------------------------------------------------------
   15. DROPDOWN MENUS
   ---------------------------------------------------------- */
.c-dropdown,
.c-dropdown .c-dropdown-menu,
.ui.dropdown .menu {
  background-color: var(--hf-bg3) !important;
  border: 1px solid var(--hf-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.c-dropdown .c-dropdown-item,
.ui.dropdown .menu > .item {
  color: var(--hf-text2) !important;
  transition: background-color 0.1s ease;
}

.c-dropdown .c-dropdown-item:hover,
.c-dropdown .c-dropdown-item.m-selected,
.ui.dropdown .menu > .item:hover {
  background-color: var(--hf-bg4) !important;
  color: var(--hf-text1) !important;
}

/* ----------------------------------------------------------
   16. NOTIFICATIONS / TOASTS
   ---------------------------------------------------------- */
.c-notification,
.c-toast {
  background: linear-gradient(to bottom, var(--hf-panel-from), var(--hf-panel-to)) !important;
  border: 1px solid var(--hf-border) !important;
  color: var(--hf-text2) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.c-notification.m-success {
  border-left: 3px solid var(--hf-active) !important;
}

.c-notification.m-error {
  border-left: 3px solid #ef4444 !important;
}

/* ----------------------------------------------------------
   17. TABS / NAVIGATION PILLS
   ---------------------------------------------------------- */
.c-tab-nav,
.c-tabs {
  border-bottom: 1px solid var(--hf-border) !important;
}

.c-tab-nav .c-tab,
.c-tabs .c-tab {
  color: var(--hf-text3) !important;
  transition: color 0.15s ease, border-color 0.15s ease;
  border-bottom: 2px solid transparent;
}

.c-tab-nav .c-tab:hover,
.c-tabs .c-tab:hover {
  color: var(--hf-text1) !important;
}

.c-tab-nav .c-tab.m-active,
.c-tabs .c-tab.m-active {
  color: var(--hf-text1) !important;
  border-bottom-color: var(--hf-genA) !important;
}

/* ----------------------------------------------------------
   18. SEARCH
   ---------------------------------------------------------- */
.c-search-input,
input[type="search"] {
  background-color: var(--hf-input) !important;
  border: 1px solid var(--hf-input-border) !important;
  color: var(--hf-text1) !important;
}

/* ----------------------------------------------------------
   19. AVATAR / USER IMAGES
   ---------------------------------------------------------- */
.c-avatar,
.c-user-avatar {
  border-radius: 50% !important;
  border: 2px solid var(--hf-bg4) !important;
}

/* ----------------------------------------------------------
   20. EMPTY STATES / PLACEHOLDER TEXT
   ---------------------------------------------------------- */
.c-empty-state {
  color: var(--hf-text3) !important;
}

/* ----------------------------------------------------------
   21. LOADING / SPINNER
   ---------------------------------------------------------- */
.c-loading,
.c-spinner {
  border-color: var(--hf-border) !important;
  border-top-color: var(--hf-genA) !important;
}

/* ----------------------------------------------------------
   22. ADMIN PANEL OVERRIDES
   ---------------------------------------------------------- */
.c-admin-panel,
.c-admin-sidebar {
  background-color: var(--hf-bg1) !important;
  border-color: var(--hf-border) !important;
}

/* ----------------------------------------------------------
   23. LINKS (GLOBAL)
   ---------------------------------------------------------- */
a {
  color: var(--hf-mod) !important;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--hf-genB) !important;
}

/* ----------------------------------------------------------
   24. HORIZONTAL RULES / DIVIDERS
   ---------------------------------------------------------- */
hr,
.divider,
.ui.divider {
  border-color: var(--hf-border) !important;
}

/* ----------------------------------------------------------
   25. POWER BAR / RESPONSE BANNER
   ---------------------------------------------------------- */
.c-power-badge,
.c-response-bar {
  background-color: var(--hf-bg3) !important;
  border: 1px solid var(--hf-border) !important;
  color: var(--hf-text2) !important;
}

/* ----------------------------------------------------------
   26. SUBTLE POLISH
   ---------------------------------------------------------- */
/* Smooth transitions globally */
*, *::before, *::after {
  transition-property: background-color, border-color, color, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

/* Override for elements that should NOT animate (inputs during typing, etc.) */
input:focus, textarea:focus {
  transition-duration: 0s;
}

/* Remove any default white/light backgrounds Fider may inject */
.ui.segment,
.ui.segments,
.ui.card,
.ui.cards > .card,
.segment,
.card {
  background-color: var(--hf-bg2) !important;
  border: 1px solid rgba(69, 72, 80, 0.12) !important;
  box-shadow: none !important;
  color: var(--hf-text2) !important;
}

/* Tables if any appear */
table, .ui.table {
  background-color: var(--hf-bg1) !important;
  color: var(--hf-text2) !important;
  border-color: var(--hf-border) !important;
}

table th, .ui.table th {
  background-color: var(--hf-bg3) !important;
  color: var(--hf-text1) !important;
  border-color: var(--hf-border) !important;
}

table td, .ui.table td {
  border-color: var(--hf-border) !important;
}

/* ----------------------------------------------------------
   27. PRINT RESET (just in case)
   ---------------------------------------------------------- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .c-header, .c-footer { display: none !important; }
}