/*
 * Nord-Fusion Theme for Pleroma-FE
 * Matches zsh (powerlevel10k), tmux, and doom emacs (doom-palenight) themes
 *
 * Color Palette:
 * - Darker BG (custom): #1e222a
 * - Nord BG: #2E3440
 * - Nord BG Light: #3B4252
 * - Nord BG Lighter: #434C5E
 * - Nord BG Lightest: #4C566A (comments)
 * - Nord FG: #D8DEE9
 * - Nord FG Bright: #E5E9F0
 * - Nord FG Brightest: #ECEFF4
 * - Nord Frost (blues/cyans): #8FBCBB, #88C0D0, #81A1C1, #5E81AC
 * - Nord Red: #BF616A
 * - Nord Orange: #D08770
 * - Nord Yellow: #EBCB8B
 * - Nord Green: #A3BE8C
 * - Nord Purple (accent): #CBA6F7
 */

:root {
  /* Base colors */
  --bg: #1e222a;                    /* Darker background */
  --fg: #D8DEE9;                    /* Foreground text */
  --text: #D8DEE9;                  /* Main text color */
  --lightBg: #2E3440;               /* Light background */
  --lightText: #E5E9F0;             /* Light text */
  --faint: #4C566A;                 /* Faint text (comments) */
  --faintLink: #81A1C1;             /* Faint links */

  /* Links and accents - COOL TONES PRIORITY */
  --link: #88C0D0;                  /* Links - cyan (cool tone) */
  --accent: #CBA6F7;                /* Purple accent (cool tone) */
  --cBlue: #88C0D0;                 /* Cyan blue */
  --cRed: #BF616A;                  /* Red */
  --cGreen: #A3BE8C;                /* Green */
  --cOrange: #D08770;               /* Orange - RESERVED for rare/special elements only */
  --cYellow: #EBCB8B;               /* Yellow */

  /* Panel colors */
  --panel: #2E3440;                 /* Panel background */
  --panelText: #D8DEE9;             /* Panel text */
  --panelFaint: #4C566A;            /* Panel faint text */
  --panelLink: #88C0D0;             /* Panel links */
  --panelHighlight: #3B4252;        /* Panel highlight */

  /* Buttons */
  --btn: #3B4252;                   /* Button background */
  --btnText: #D8DEE9;               /* Button text */
  --btnPanelText: #D8DEE9;          /* Button panel text */
  --btnToggled: #CBA6F7;            /* Toggled button (purple) */
  --btnToggledText: #1e222a;        /* Toggled button text */
  --btnDisabled: #2E3440;           /* Disabled button */
  --btnDisabledText: #4C566A;       /* Disabled button text */
  --btnPressedText: #CBA6F7;        /* Pressed button text */

  /* Input fields */
  --input: #2E3440;                 /* Input background */
  --inputText: #D8DEE9;             /* Input text */
  --inputPanelText: #D8DEE9;        /* Input panel text */

  /* Alerts and warnings - COOL TONES for frequent, WARM for rare */
  --alertError: #BF616A;            /* Error color (warm - infrequent) */
  --alertErrorText: #ECEFF4;        /* Error text */
  --alertWarning: #D08770;          /* Warning color (ORANGE - infrequent warnings) */
  --alertWarningText: #1e222a;      /* Warning text */
  --alertSuccess: #88C0D0;          /* Success color (cyan - cool tone) */
  --alertSuccessText: #1e222a;      /* Success text */
  --alertNeutral: #81A1C1;          /* Neutral alert (cool blue) */
  --alertNeutralText: #1e222a;      /* Neutral text */

  /* Badges */
  --badgeNotification: #CBA6F7;     /* Notification badge (purple) */
  --badgeNotificationText: #1e222a; /* Notification badge text */

  /* Borders and dividers */
  --border: #3B4252;                /* Border color */
  --borderHighlight: #CBA6F7;       /* Highlighted border (purple) */

  /* Topbar */
  --topBar: #2E3440;                /* Top bar background */
  --topBarText: #D8DEE9;            /* Top bar text */
  --topBarLink: #88C0D0;            /* Top bar links */

  /* Post colors - COOL TONES */
  --postLink: #88C0D0;              /* Post links (cyan - cool) */
  --postFaintLink: #81A1C1;         /* Faint post links (blue - cool) */
  --postGreentext: #8FBCBB;         /* Greentext (frost teal - cool) */
  --postCyantext: #88C0D0;          /* Cyantext (cyan - cool) */

  /* Icons */
  --icon: #D8DEE9;                  /* Icon color */
  --poll: #2E3440;                  /* Poll background */
  --pollText: #D8DEE9;              /* Poll text */

  /* Popover/dropdown menus */
  --popover: #2E3440;               /* Popover background */
  --popoverText: #D8DEE9;           /* Popover text */
  --popoverLightText: #E5E9F0;      /* Popover light text */
  --popoverLink: #88C0D0;           /* Popover links */
  --popoverIcon: #D8DEE9;           /* Popover icons */

  /* Selected menu items */
  --selectedMenu: #CBA6F7;          /* Selected menu item (purple) */
  --selectedMenuText: #1e222a;      /* Selected menu text */
  --selectedMenuPopover: #3B4252;   /* Selected menu in popover */
  --selectedMenuPopoverText: #ECEFF4; /* Selected menu popover text */
  --selectedMenuPopoverIcon: #ECEFF4; /* Selected menu popover icon */

  /* Highlights and selections */
  --highlight: #CBA6F7;             /* Highlight color (purple) */
  --highlightText: #1e222a;         /* Highlight text */
  --highlightLink: #5E81AC;         /* Highlight link */
  --highlightFaintText: #2E3440;    /* Faint highlight text */

  /* Chat colors */
  --chatBg: #2E3440;                /* Chat background */
  --chatMessageIncomingBg: #3B4252; /* Incoming message */
  --chatMessageIncomingText: #D8DEE9; /* Incoming text */
  --chatMessageOutgoingBg: #CBA6F7; /* Outgoing message (purple) */
  --chatMessageOutgoingText: #1e222a; /* Outgoing text */
  --chatMessageOutgoingBorder: #CBA6F7; /* Outgoing border */
  --chatMessageOutgoingLink: #5E81AC; /* Outgoing link */

  /* Shadows */
  --shadow: rgba(0, 0, 0, 0.5);
  --panelShadow: 0px 1px 5px rgba(0, 0, 0, 0.6);
  --avatarShadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  --popupShadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
  --avatarStatusShadow: 0px 0px 4px rgba(203, 166, 247, 0.5);
  --inputShadow: 0px 0px 2px #000 inset;

  /* Opacity levels */
  --bgOpacity: 1;
  --panelOpacity: 1;
  --linkOpacity: 1;

  /* Radius values */
  --roundness: 4px;
  --panelRadius: 10px;
  --avatarRadius: 4px;
  --avatarAltRadius: 10px;
  --attachmentRadius: 10px;
  --chatMessageRadius: 10px;
  --buttonRadius: 4px;
  --inputRadius: 4px;
  --checkboxRadius: 2px;
  --tooltipRadius: 5px;

  /* Fonts */
  --interfaceFont: sans-serif;
  --postFont: sans-serif;
  --postCodeFont: monospace;

  /* Emoji size */
  --emoji-size: 32px;

  /* Post line height */
  --post-line-height: 1.4;
}

/* Additional styling for Nord-Fusion feel */
body {
  background-color: #1e222a;
  color: #D8DEE9;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #CBA6F7 #2E3440;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #2E3440;
}

*::-webkit-scrollbar-thumb {
  background: #CBA6F7;
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #b896e7;
}

/* Selection */
::selection {
  background-color: #CBA6F7;
  color: #1e222a;
}

::-moz-selection {
  background-color: #CBA6F7;
  color: #1e222a;
}

/* Links - COOL CYAN unvisited, DARKER PURPLE visited, LAVENDER on hover */
a,
a:link {
  color: #88C0D0 !important;  /* Bright cyan for unvisited links */
}

a:visited {
  color: #B896E7 !important;  /* Darker purple for visited links */
}

a:hover,
a:active {
  color: #D4C5F9 !important;  /* Lighter lavender on hover */
  text-decoration: underline;
}

/* Status/post content links specifically */
.status-content a,
.RichContent a {
  color: #88C0D0 !important;  /* Bright cyan for unvisited */
}

.status-content a:visited,
.RichContent a:visited {
  color: #B896E7 !important;  /* Darker purple for visited */
}

.status-content a:hover,
.RichContent a:hover {
  color: #D4C5F9 !important;  /* Lighter lavender on hover */
}

/* External links */
.external-link,
a[rel*="noopener"] {
  color: #88C0D0 !important;  /* Bright cyan for unvisited */
}

.external-link:visited,
a[rel*="noopener"]:visited {
  color: #B896E7 !important;  /* Darker purple for visited */
}

.external-link:hover,
a[rel*="noopener"]:hover {
  color: #D4C5F9 !important;  /* Lighter lavender on hover */
}

/* Focus states with purple accent */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #CBA6F7;
  outline-offset: 2px;
}

/* Button hover effects */
button:hover:not(:disabled) {
  filter: brightness(1.2);
  border-color: #CBA6F7;
}

button:active:not(:disabled) {
  filter: brightness(0.9);
}

/* Status borders for compact view */
.Status {
  border-color: #3B4252 !important;
}

.Status:hover {
  border-color: #CBA6F7 !important;
}

/* Enhanced notification styling */
.Notifications {
  background-color: #1e222a;
}

.Notification {
  border-color: #3B4252 !important;
}

.Notification:hover {
  background-color: #2E3440;
}

/* Post actions (like, boost, etc.) - COOL TONES */
.button-icon.icon-retweet:hover {
  color: #8FBCBB !important;        /* Boost - frost teal (cool) */
}

.button-icon.icon-reply:hover {
  color: #88C0D0 !important;        /* Reply - cyan (cool) */
}

.button-icon.icon-star:hover {
  color: #CBA6F7 !important;        /* Favorite - purple (cool) */
}

/* User card styling */
.user-card {
  background-color: #2E3440;
  border-color: #3B4252;
}

/* Mention styling */
.MentionLink {
  color: #88C0D0;
}

.MentionLink:hover {
  color: #CBA6F7;
  text-decoration: underline;
}

/* Code blocks */
pre, code {
  background-color: #2E3440 !important;
  border: 1px solid #3B4252;
  color: #ECEFF4 !important;
}

/* Quoted posts */
.quote-card {
  background-color: #2E3440;
  border-left: 3px solid #CBA6F7 !important;
}

/* Status poll styling */
.poll .option-result-label {
  color: #ECEFF4;
}

.poll .result-fill {
  background-color: #CBA6F7 !important;
}

/* Media attachments */
.Attachment {
  border-color: #3B4252 !important;
}

/* Enhance shadows for depth */
.panel {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.floating-panel {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* Status card (link previews) */
.link-preview-card {
  background-color: #2E3440;
  border-color: #3B4252;
}

.link-preview-card:hover {
  border-color: #CBA6F7;
  background-color: #3B4252;
}

/* Tab styling */
.tab-switcher .tabs .tab {
  border-bottom-color: transparent;
}

.tab-switcher .tabs .tab.active {
  border-bottom-color: #CBA6F7;
  color: #CBA6F7;
}

/* Timeline header */
.timeline-heading {
  background-color: #2E3440;
  border-bottom-color: #3B4252;
}

/* Profile header enhancements */
.user-profile {
  background-color: #2E3440;
}

.user-profile .panel-heading {
  background-color: #3B4252;
  border-bottom-color: #CBA6F7;
}

/* Navigation bar */
.nav-bar {
  background-color: #2E3440;
  border-bottom: 1px solid #3B4252;
}

.nav-bar .button-default:hover {
  background-color: #3B4252;
  color: #CBA6F7;
}

/* Search bar */
.search-bar-input {
  background-color: #2E3440 !important;
  border-color: #3B4252 !important;
  color: #D8DEE9 !important;
}

.search-bar-input:focus {
  border-color: #CBA6F7 !important;
}

/* Floating compose button */
.floating-chat-button {
  background-color: #CBA6F7 !important;
  color: #1e222a !important;
}

.floating-chat-button:hover {
  background-color: #b896e7 !important;
}

/* Settings page enhancements */
.setting-item {
  border-bottom-color: #3B4252;
}

/* Emoji picker */
.EmojiPicker {
  background-color: #2E3440;
  border-color: #3B4252;
}

/* Autocomplete dropdown */
.Autocomplete {
  background-color: #2E3440;
  border-color: #3B4252;
}

.Autocomplete .items .item.highlighted {
  background-color: #CBA6F7;
  color: #1e222a;
}

/* Modal dialogs */
.modal-view {
  background-color: rgba(30, 34, 42, 0.95);
}

.modal-view .panel {
  background-color: #2E3440;
  border-color: #CBA6F7;
}

/* Notifications */
.notification-unseen {
  background-color: rgba(203, 166, 247, 0.1);
  border-left: 3px solid #CBA6F7 !important;
}

/* User tags/badges */
.badge,
.staff {
  background-color: #CBA6F7 !important;
  color: #1e222a !important;
}

/* Follow button states - COOL TONES */
.follow-button.pressed {
  background-color: #88C0D0 !important;  /* Following - cyan (cool) */
  color: #1e222a !important;
}

.follow-button:hover:not(.pressed) {
  background-color: #CBA6F7 !important;  /* Hover - purple (cool) */
  color: #1e222a !important;
}

/* React button (emoji reactions) */
.reaction-button {
  border-color: #3B4252;
}

.reaction-button:hover {
  background-color: #CBA6F7;
  border-color: #CBA6F7;
  color: #1e222a;
}

/* Thread lines */
.conversation-status .status-body::before {
  border-left-color: #CBA6F7;
}

/* Enhance contrast for better readability */
.faint {
  color: #4C566A;
}

strong, b {
  color: #ECEFF4;
  font-weight: 600;
}

/* DateTime - COOL TONES */
.timeago {
  color: #5E81AC;                   /* Darker blue (cool) */
}

.timeago:hover {
  color: #88C0D0;                   /* Cyan on hover (cool) */
}

/* User popover card */
.user-popover {
  background-color: #2E3440 !important;
  border-color: #CBA6F7 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

/* Status actions counter */
.stats .stat-count {
  color: #CBA6F7;
  font-weight: bold;
}

/* Enhance muted/hidden content */
.muted {
  opacity: 0.5;
}

.muted:hover {
  opacity: 0.8;
}

/* Add subtle purple glow to avatars on hover */
.Avatar:hover .avatar {
  box-shadow: 0 0 8px rgba(203, 166, 247, 0.6);
}

/* Premium/supporter badge glow */
.supporter-badge {
  text-shadow: 0 0 4px #CBA6F7;
}

/* ============================================
   ORANGE RESERVED FOR RARE/SPECIAL ELEMENTS
   ============================================ */

/* Warning banners and alerts (infrequent) */
.alert.warning,
.alert-warning {
  background-color: #D08770 !important;
  border-color: #D08770 !important;
  color: #1e222a !important;
}

/* Destructive actions (delete, block, etc.) - RARE actions */
.button-default.danger,
button.danger,
.btn-danger {
  background-color: #D08770 !important;
  color: #1e222a !important;
  border-color: #D08770 !important;
}

.button-default.danger:hover,
button.danger:hover,
.btn-danger:hover {
  background-color: #BF616A !important;
  border-color: #BF616A !important;
}

/* Report/flag content (infrequent action) */
.button-icon.icon-flag:hover,
.icon-flag:hover {
  color: #D08770 !important;
}

/* Mute/block indicators (rare) */
.blocked-indicator,
.muted-indicator {
  color: #D08770 !important;
}

/* Account deletion warnings */
.deletion-warning,
.warning-banner {
  border-left: 4px solid #D08770 !important;
  background-color: rgba(208, 135, 112, 0.1);
}

/* Moderation actions (admin/mod only - infrequent) */
.mod-action,
.admin-action {
  border-color: #D08770 !important;
}

/* Content warnings for sensitive content */
.status-content-warning {
  background-color: rgba(208, 135, 112, 0.15);
  border-left: 3px solid #D08770;
}

/* ============================================
   COOL TONES FOR COMMON INTERACTIVE ELEMENTS
   ============================================ */

/* Success messages use cool cyan instead of warm green */
.alert.success,
.alert-success,
.success-message {
  background-color: #88C0D0 !important;
  border-color: #88C0D0 !important;
  color: #1e222a !important;
}

/* Info messages use cool blue */
.alert.info,
.alert-info {
  background-color: #81A1C1 !important;
  border-color: #81A1C1 !important;
  color: #1e222a !important;
}

/* Primary actions use purple (cool) */
.button-default.primary,
button.primary,
.btn-primary {
  background-color: #CBA6F7 !important;
  color: #1e222a !important;
  border-color: #CBA6F7 !important;
}

/* Secondary actions use cyan (cool) */
.button-default.secondary,
button.secondary,
.btn-secondary {
  background-color: #88C0D0 !important;
  color: #1e222a !important;
  border-color: #88C0D0 !important;
}

/* Loading indicators use cool tones */
.spinner,
.loading-indicator {
  border-color: #CBA6F7 !important;
  border-top-color: transparent !important;
}

/* Progress bars use cool gradient */
.progress-bar {
  background: linear-gradient(90deg, #5E81AC, #88C0D0, #CBA6F7) !important;
}

/* Hashtags use cool cyan */
.HashtagLink {
  color: #88C0D0 !important;
}

.HashtagLink:hover {
  color: #CBA6F7 !important;
}

/* Verified badges use cool teal */
.verified-badge,
.verified-icon {
  color: #8FBCBB !important;
}

/* Online status indicators use cool colors */
.user-status-online {
  background-color: #8FBCBB !important;
}

.user-status-away {
  background-color: #5E81AC !important;
}

.user-status-busy {
  background-color: #BF616A !important;
}

/* Bookmark action uses cool purple */
.button-icon.icon-bookmark:hover {
  color: #CBA6F7 !important;
}

/* Share action uses cool cyan */
.button-icon.icon-share:hover,
.button-icon.icon-share-alt:hover {
  color: #88C0D0 !important;
}

/* Pin action uses cool teal */
.button-icon.icon-thumbtack:hover {
  color: #8FBCBB !important;
}

/* More options menu uses cool tones */
.button-icon.icon-ellipsis-h:hover,
.button-icon.icon-ellipsis-v:hover {
  color: #81A1C1 !important;
}

/* Compose button (frequently used) uses bold purple */
.new-status-button,
.compose-button {
  background-color: #CBA6F7 !important;
  color: #1e222a !important;
}

/* Filter/search active state uses cool cyan */
.filter-active,
.search-active {
  border-bottom: 2px solid #88C0D0 !important;
  color: #88C0D0 !important;
}

/* Unread indicators use cool purple */
.unread-indicator,
.notification-dot {
  background-color: #CBA6F7 !important;
}

/* Counter badges use cool tones */
.counter-badge {
  background-color: #5E81AC !important;
  color: #ECEFF4 !important;
}

/* Media attachment counts */
.media-count {
  color: #88C0D0 !important;
}

/* Poll votes use cool gradient */
.poll-option:hover {
  background-color: rgba(136, 192, 208, 0.1) !important;
}

.poll-option.voted {
  border-left: 3px solid #CBA6F7 !important;
}