/* input(2365,1): run-time error CSS1019: Unexpected token, found '@import'
input(2365,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap')' */
/* File Fortress Theme System - CSS Custom Properties */
/* This file contains all theme variable definitions for runtime theme switching */

:root {
  /* Light Theme (Default) */
  --ff-bg-primary: #ffffff;
  --ff-bg-secondary: #f8f9fa;
  --ff-bg-tertiary: #ffffff;
  --ff-bg-inverted: #1b1c1d;
  
  --ff-text-primary: #2c3e50;
  --ff-text-secondary: #6c757d;
  --ff-text-inverted: #ffffff;
  --ff-text-muted: #95a5a6;
  
  --ff-border-primary: #e1e8ed;
  --ff-border-secondary: #dee2e6;
  --ff-border-focus: #2185d0;
  
  --ff-accent-primary: #2185d0;
  --ff-accent-secondary: #1678c2;
  --ff-accent-success: #21ba45;
  --ff-accent-warning: #fbbd08;
  --ff-accent-orange: #f2711c;
  --ff-accent-danger: #db2828;
  
  --ff-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --ff-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  
  /* Status backgrounds */
  --info-bg: #e8f4f8;
  --info-text: #1e70bf;
  --success-bg: #e8f5e9;
  --success-text: #1b5e20;
  --warning-bg: #fff3e0;
  --warning-text: #e65100;
  
  --ff-gradient-primary: linear-gradient(135deg, #2185d0 0%, #1678c2 100%);
  --ff-gradient-secondary: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  
  /* Spacing */
  --ff-spacing-xs: 0.25rem;
  --ff-spacing-sm: 0.5rem;
  --ff-spacing-md: 1rem;
  --ff-spacing-lg: 1.5rem;
  --ff-spacing-xl: 2rem;
  --ff-spacing-xxl: 3rem;
  
  /* Border Radius */
  --ff-radius-sm: 0.25rem;
  --ff-radius-md: 0.5rem;
  --ff-radius-lg: 0.75rem;
  --ff-radius-xl: 1rem;
  
  /* Transitions */
  --ff-transition-fast: 0.15s ease;
  --ff-transition-normal: 0.3s ease;
  --ff-transition-slow: 0.5s ease;
  
  /* Code/Terminal Colors (Light Theme) */
  --code-bg: #f5f5f5;
  --code-text: #2c3e50;
  --terminal-bg: #2d2d2d;
  --terminal-text: #f8f8f2;
  --terminal-command: #50fa7b;
}

/* Dark Theme */
[data-theme="dark"] {
  --ff-bg-primary: #1a1a1a;
  --ff-bg-secondary: #2d2d2d;
  --ff-bg-tertiary: #3a3a3a;
  --ff-bg-inverted: #ffffff;
  
  --ff-text-primary: #ffffff;
  --ff-text-secondary: #b3b3b3;
  --ff-text-inverted: #2c3e50;
  --ff-text-muted: #808080;
  
  --ff-border-primary: #404040;
  --ff-border-secondary: #4a4a4a;
  --ff-border-focus: #4a9eff;
  
  --ff-accent-primary: #4a9eff;
  --ff-accent-secondary: #357abd;
  --ff-accent-success: #4caf50;
  --ff-accent-warning: #ff9800;
  --ff-accent-orange: #ff9800;
  --ff-accent-danger: #f44336;
  
  --ff-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ff-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  
  /* Status backgrounds */
  --info-bg: #1a3a52;
  --info-text: #64b5f6;
  --success-bg: #1b3a1f;
  --success-text: #81c784;
  --warning-bg: #3d2e1a;
  --warning-text: #ffb74d;
  
  --ff-gradient-primary: linear-gradient(135deg, #4a9eff 0%, #357abd 100%);
  --ff-gradient-secondary: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  
  /* Code/Terminal Colors (Dark Theme) */
  --code-bg: #2d2d2d;
  --code-text: #f8f8f2;
  --terminal-bg: #1a1a1a;
  --terminal-text: #f8f8f2;
  --terminal-command: #50fa7b;
}

/* Auto Theme (System Preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ff-bg-primary: #1a1a1a;
    --ff-bg-secondary: #2d2d2d;
    --ff-bg-tertiary: #3a3a3a;
    --ff-bg-inverted: #ffffff;
    
    --ff-text-primary: #ffffff;
    --ff-text-secondary: #b3b3b3;
    --ff-text-inverted: #2c3e50;
    --ff-text-muted: #808080;
    
    --ff-border-primary: #404040;
    --ff-border-secondary: #4a4a4a;
    --ff-border-focus: #4a9eff;
    
    --ff-accent-primary: #4a9eff;
    --ff-accent-secondary: #357abd;
    --ff-accent-success: #4caf50;
    --ff-accent-warning: #ff9800;
    --ff-accent-orange: #ff9800;
    --ff-accent-danger: #f44336;
    
    --ff-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --ff-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    
    /* Status backgrounds */
    --info-bg: #1a3a52;
    --info-text: #64b5f6;
    --success-bg: #1b3a1f;
    --success-text: #81c784;
    --warning-bg: #3d2e1a;
    --warning-text: #ffb74d;
    
    --ff-gradient-primary: linear-gradient(135deg, #4a9eff 0%, #357abd 100%);
    --ff-gradient-secondary: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
    
    /* Code/Terminal Colors (Auto Dark) */
    --code-bg: #2d2d2d;
    --code-text: #f8f8f2;
    --terminal-bg: #1a1a1a;
    --terminal-text: #f8f8f2;
    --terminal-command: #50fa7b;
  }
}

/* Theme Transition - Only for specific properties that should animate */
body,
.ui.segment,
.ui.card,
.ui.button,
.ui.dropdown .menu,
.ui.form .field input,
.theme-bg,
.theme-text,
.theme-border {
  transition: background-color var(--ff-transition-normal),
              color var(--ff-transition-normal),
              border-color var(--ff-transition-normal),
              box-shadow var(--ff-transition-normal);
}


/* File Fortress Theme System - Base Element Styles */
/* This file contains base HTML element theming */

/* ============================================
   UNIVERSAL TEXT THEMING
   Catch all text elements with broad selectors
   
   IMPORTANT: We intentionally avoid using !important
   on color properties to allow theme variables to 
   cascade naturally. This ensures dark theme works
   properly across all pages without targeting
   individual elements.
   
   Only use !important for:
   - Background colors (to override Fomantic UI)
   - Borders (to override Fomantic UI)
   - Structural properties (spacing, layout)
   ============================================ */

/* Apply theme variables to body */
body {
  background-color: var(--ff-bg-primary);
  color: var(--ff-text-primary);
}

/* All headings (h1-h6) */
h1, h2, h3, h4, h5, h6 {
  color: var(--ff-text-primary);
}

/* All paragraphs */
p {
  color: var(--ff-text-secondary);
}

/* All list items */
ul, ol, li {
  color: var(--ff-text-secondary);
}

/* All divs with text (catch-all for content) */
div {
  color: var(--ff-text-secondary);
}

/* All spans */
span {
  color: inherit;
}

/* Strong and bold text */
strong, b {
  color: var(--ff-text-primary);
}

/* Emphasis and italic text */
em, i:not([class*="icon"]) {
  color: var(--ff-text-secondary);
}

/* Small text */
small {
  color: var(--ff-text-muted);
}

/* Theme-aware links */
a {
  color: var(--ff-accent-primary);
}

a:hover {
  color: var(--ff-accent-secondary);
}

/* Theme-aware code blocks */
code {
  background-color: var(--code-bg) !important;
  color: var(--ff-accent-primary) !important;
  padding: 0.2em 0.4em;
  border-radius: var(--ff-radius-sm);
  border: 1px solid var(--ff-border-primary);
}

pre {
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
  border: 1px solid var(--ff-border-primary) !important;
  border-radius: var(--ff-radius-md);
  padding: 1rem;
}

pre code {
  background-color: transparent !important;
  border: none !important;
  padding: 0;
}


/* File Fortress Theme System - Fomantic UI Component Overrides */
/* This file contains systematic overrides for Fomantic UI components */
/* Organized by component type for maintainability */

/* ============================================
   NAVIGATION & MENU
   ============================================ */

/* Theme-aware navigation */
.ui.inverted.menu {
  background-color: var(--ff-bg-inverted) !important;
}

.ui.inverted.menu .item {
  color: var(--ff-text-inverted) !important;
}

.ui.inverted.menu .item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Vertical menu (documentation sidebar) */
.ui.vertical.menu {
  background-color: var(--ff-bg-tertiary) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.vertical.menu .item {
  color: var(--ff-text-primary) !important;
  background-color: transparent !important;
  border-top: 1px solid var(--ff-border-primary) !important;
}

.ui.vertical.menu .item:hover {
  background-color: var(--ff-bg-secondary) !important;
}

.ui.vertical.menu .item.active {
  color: var(--ff-accent-primary) !important;
  background-color: var(--ff-bg-secondary) !important;
  font-weight: 600;
}

.ui.vertical.menu .header.item {
  color: var(--ff-text-primary) !important;
  background-color: var(--ff-bg-secondary) !important;
  font-weight: 700;
}

.ui.vertical.menu .divider {
  border-top: 1px solid var(--ff-border-primary) !important;
}

/* ============================================
   FOOTER
   ============================================ */

/* Theme-aware footer */
.ui.inverted.vertical.footer.segment {
  background-color: var(--ff-bg-inverted) !important;
}

.ui.inverted.vertical.footer.segment .ui.inverted.header {
  color: var(--ff-text-inverted) !important;
}

.ui.inverted.vertical.footer.segment .ui.inverted.link.list .item {
  color: var(--ff-text-inverted) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Theme-aware buttons */
.ui.primary.button {
  background: var(--ff-gradient-primary) !important;
  color: white !important;
}

.ui.primary.button:hover {
  background: var(--ff-accent-secondary) !important;
}

.ui.secondary.button {
  background-color: var(--ff-bg-secondary) !important;
  color: var(--ff-text-primary) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.secondary.button:hover {
  background-color: var(--ff-border-primary) !important;
}

/* ============================================
   SEGMENTS
   ============================================ */

/* Theme-aware segments */
.ui.segment {
  background-color: var(--ff-bg-tertiary) !important;
  border: 1px solid var(--ff-border-primary) !important;
  box-shadow: var(--ff-shadow-sm) !important;
}

.ui.segment p {
  color: var(--ff-text-secondary);
}

.ui.basic.segment p {
  color: var(--ff-text-secondary);
}

/* Code segments (used in documentation) */
.ui.code.segment {
  background-color: var(--code-bg) !important;
  color: var(--code-text);
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.code.segment code {
  color: var(--ff-accent-primary);
}

/* ============================================
   CARDS
   ============================================ */

/* Theme-aware cards */
.ui.card,
.ui.cards > .card {
  background-color: var(--ff-bg-tertiary) !important;
  border: 1px solid var(--ff-border-primary) !important;
  box-shadow: var(--ff-shadow-sm) !important;
}

.ui.card > .content,
.ui.cards > .card > .content {
  color: var(--ff-text-primary) !important;
  background-color: transparent !important;
  border-top: 1px solid var(--ff-border-primary) !important;
}

.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
  border-top: none !important;
}

.ui.card > .extra.content,
.ui.cards > .card > .extra.content {
  color: var(--ff-text-secondary) !important;
  background-color: var(--ff-bg-secondary) !important;
  border-top: 1px solid var(--ff-border-primary) !important;
}

.ui.card .meta,
.ui.cards > .card .meta {
  color: var(--ff-text-secondary) !important;
}

.ui.card > .content > .header,
.ui.cards > .card > .content > .header {
  color: var(--ff-text-primary) !important;
}

.ui.card > .content > .description,
.ui.cards > .card > .content > .description {
  color: var(--ff-text-secondary) !important;
}

/* Also handle cards with icons in headers */
.ui.card > .content .header i.icon,
.ui.cards > .card > .content .header i.icon {
  color: inherit !important;
}

/* Cards container */
.ui.cards {
  background-color: transparent !important;
}

/* ============================================
   ITEMS (Device Lists, etc.)
   ============================================ */

/* Theme-aware items */
.ui.items > .item {
  padding: 1.5rem 0 !important;
  border-top: 1px solid var(--ff-border-primary) !important;
}

.ui.items > .item:first-child {
  border-top: none !important;
}

.ui.items .item .content {
  color: var(--ff-text-primary) !important;
}

.ui.items .item .content > .header,
.ui.items .item .content > a.header {
  color: var(--ff-text-primary) !important;
}

.ui.items .item .content > a.header:hover {
  color: var(--ff-accent-primary) !important;
}

.ui.items .item .meta {
  color: var(--ff-text-secondary) !important;
  margin-top: 0.75rem !important;
}

.ui.items .item .meta span {
  color: var(--ff-text-secondary) !important;
}

.ui.items .item .meta i.icon {
  color: var(--ff-text-secondary) !important;
}

.ui.items .item .description {
  color: var(--ff-text-secondary) !important;
  margin-top: 0.75rem !important;
}

.ui.items .item .extra {
  color: var(--ff-text-secondary) !important;
  margin-top: 0.75rem !important;
}

/* Divided items */
.ui.divided.items > .item {
  border-top: 1px solid var(--ff-border-primary) !important;
}

/* ============================================
   HEADERS
   ============================================ */

/* Theme-aware headers */
.ui.header {
  color: var(--ff-text-primary);
}

.ui.header .sub.header {
  color: var(--ff-text-secondary);
}

/* ============================================
   LISTS
   ============================================ */

/* Theme-aware list items */
.ui.list .item .header {
  color: var(--ff-text-primary);
}

.ui.list .item .description {
  color: var(--ff-text-secondary);
}

.ui.list .item .content .header {
  color: var(--ff-text-primary);
}

.ui.list .item .content .description {
  color: var(--ff-text-secondary);
}

/* Fix spacing for list items with icons and content */
.ui.list .item {
  padding: 0.5rem 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

.ui.list .item .icon {
  margin-top: 0.2rem !important;
  flex-shrink: 0 !important;
}

.ui.list .item .content {
  flex: 1 !important;
  line-height: 1.6 !important;
  color: var(--ff-text-primary);
}

/* Theme-aware bulleted lists */
.ui.bulleted.list .item {
  color: var(--ff-text-secondary);
}

/* Theme-aware text */
.ui.text {
  color: var(--ff-text-primary);
}

/* ============================================
   LABELS & BADGES
   ============================================ */

/* Theme-aware labels and badges */
.ui.label {
  background-color: var(--ff-bg-tertiary) !important;
  color: var(--ff-text-primary) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.label.blue {
  background-color: var(--ff-accent-primary) !important;
  color: white !important;
  border-color: var(--ff-accent-primary) !important;
}

.ui.label.green {
  background-color: var(--ff-accent-success) !important;
  color: white !important;
  border-color: var(--ff-accent-success) !important;
}

.ui.label.orange {
  background-color: var(--ff-accent-warning) !important;
  color: white !important;
  border-color: var(--ff-accent-warning) !important;
}

.ui.label.red {
  background-color: var(--ff-accent-danger) !important;
  color: white !important;
  border-color: var(--ff-accent-danger) !important;
}

/* ============================================
   MESSAGES & ALERTS
   ============================================ */

/* Theme-aware messages/alerts */
.ui.message {
  background-color: var(--ff-bg-tertiary) !important;
  color: var(--ff-text-primary);
  border: 1px solid var(--ff-border-primary) !important;
  box-shadow: var(--ff-shadow-sm) !important;
}

.ui.message .header {
  color: var(--ff-text-primary);
}

.ui.info.message {
  background-color: var(--info-bg) !important;
  border-color: var(--ff-accent-primary) !important;
  color: var(--info-text);
}

.ui.info.message .header {
  color: var(--info-text);
}

.ui.success.message {
  background-color: var(--success-bg) !important;
  border-color: var(--ff-accent-success) !important;
  color: var(--success-text);
}

.ui.success.message .header {
  color: var(--success-text);
}

.ui.warning.message {
  background-color: var(--warning-bg) !important;
  border-color: var(--ff-accent-warning) !important;
  color: var(--warning-text);
}

.ui.warning.message .header {
  color: var(--warning-text);
}

.ui.error.message {
  background-color: rgba(219, 40, 40, 0.1) !important;
  border-color: var(--ff-accent-danger) !important;
  color: var(--ff-text-primary);
}

.ui.error.message .header {
  color: var(--ff-text-primary);
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

/* Theme-aware form elements */
.ui.form .field input {
  background-color: var(--ff-bg-tertiary) !important;
  color: var(--ff-text-primary) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.form .field input:focus {
  border-color: var(--ff-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(33, 133, 208, 0.1) !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */

/* Theme-aware dropdowns */
.ui.dropdown .menu {
  background-color: var(--ff-bg-tertiary) !important;
  border: 1px solid var(--ff-border-primary) !important;
  box-shadow: var(--ff-shadow-md) !important;
}

.ui.dropdown .menu .item {
  color: var(--ff-text-primary) !important;
}

.ui.dropdown .menu .item:hover {
  background-color: var(--ff-bg-secondary) !important;
}

/* Dropdowns inside inverted menus (navigation bar) */
.ui.inverted.menu .ui.dropdown .menu {
  background-color: var(--ff-bg-inverted) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.inverted.menu .ui.dropdown .menu .item {
  color: var(--ff-text-inverted) !important;
  border-top: 1px solid var(--ff-border-primary) !important;
  transition: background-color var(--ff-transition-fast), color var(--ff-transition-fast);
}

.ui.inverted.menu .ui.dropdown .menu .item:first-child {
  border-top: none !important;
}

.ui.inverted.menu .ui.dropdown .menu .item:hover {
  background-color: var(--ff-bg-secondary) !important;
  color: var(--ff-text-primary) !important;
}

.ui.inverted.menu .ui.dropdown .menu .divider {
  border-top: 1px solid var(--ff-border-primary) !important;
  margin: 0.5rem 0 !important;
}

.ui.inverted.menu .ui.dropdown .menu .header {
  color: var(--ff-text-inverted) !important;
  opacity: 0.7;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85em;
  padding: 0.75rem 1rem 0.5rem !important;
}

/* ============================================
   TABLES
   ============================================ */

/* Theme-aware tables */
.ui.table {
  background-color: var(--ff-bg-tertiary) !important;
  border: 1px solid var(--ff-border-primary) !important;
  color: var(--ff-text-primary) !important;
}

.ui.table thead th {
  background-color: var(--ff-bg-secondary) !important;
  color: var(--ff-text-primary) !important;
  border-bottom: 1px solid var(--ff-border-primary) !important;
}

.ui.table tbody tr {
  border-top: 1px solid var(--ff-border-primary) !important;
}

.ui.table tbody tr td {
  color: var(--ff-text-secondary) !important;
  border-top: 1px solid var(--ff-border-primary) !important;
}

.ui.table tbody tr:hover {
  background-color: var(--ff-bg-secondary) !important;
}

/* Celled tables */
.ui.celled.table tr td,
.ui.celled.table tr th {
  border-left: 1px solid var(--ff-border-primary) !important;
}

/* Striped tables */
.ui.striped.table tbody tr:nth-child(2n) {
  background-color: var(--ff-bg-secondary) !important;
}

/* Table code elements */
.ui.table code {
  background-color: var(--code-bg) !important;
  color: var(--ff-accent-primary) !important;
  padding: 0.2em 0.4em;
  border-radius: var(--ff-radius-sm);
  border: 1px solid var(--ff-border-primary) !important;
}

/* ============================================
   ACCORDIONS
   ============================================ */

/* Theme-aware accordions */
.ui.accordion .title {
  color: var(--ff-text-primary);
  background-color: var(--ff-bg-tertiary) !important;
}

.ui.accordion .title:hover {
  background-color: var(--ff-bg-secondary) !important;
}

.ui.accordion .active.title {
  color: var(--ff-text-primary);
  background-color: var(--ff-bg-secondary) !important;
}

.ui.accordion .content {
  color: var(--ff-text-secondary);
  background-color: var(--ff-bg-primary) !important;
}

.ui.accordion .active.content {
  background-color: var(--ff-bg-primary) !important;
}

/* Styled accordion (with borders) */
.ui.styled.accordion {
  background-color: var(--ff-bg-tertiary) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.styled.accordion .title {
  color: var(--ff-text-primary) !important;
  background-color: var(--ff-bg-secondary) !important;
  border-top: 1px solid var(--ff-border-primary) !important;
}

.ui.styled.accordion .title:hover {
  background-color: var(--ff-bg-tertiary) !important;
}

.ui.styled.accordion .active.title {
  color: var(--ff-text-primary) !important;
  background-color: var(--ff-bg-primary) !important;
}

.ui.styled.accordion .content {
  color: var(--ff-text-secondary) !important;
  background-color: var(--ff-bg-primary) !important;
}

.ui.styled.accordion .accordion .title {
  border-top: 1px solid var(--ff-border-primary) !important;
}

/* Accordion inside vertical menu (documentation sidebar) */
.ui.vertical.menu .ui.accordion .title {
  color: var(--ff-text-primary);
  background-color: transparent !important;
}

.ui.vertical.menu .ui.accordion .title:hover {
  background-color: var(--ff-bg-secondary) !important;
}

.ui.vertical.menu .ui.accordion .content {
  background-color: transparent !important;
}

.ui.vertical.menu .ui.accordion .content .menu {
  background-color: transparent !important;
}

.ui.vertical.menu .ui.accordion .content .menu .item {
  color: var(--ff-text-secondary) !important;
  background-color: transparent !important;
  border: none !important;
}

.ui.vertical.menu .ui.accordion .content .menu .item:hover {
  color: var(--ff-text-primary) !important;
  background-color: var(--ff-bg-secondary) !important;
}

.ui.vertical.menu .ui.accordion .content .menu .item.active {
  color: var(--ff-accent-primary) !important;
  background-color: var(--ff-bg-secondary) !important;
}

/* ============================================
   STEPS
   ============================================ */

/* Theme-aware steps */
.ui.steps {
  background-color: transparent !important;
  border: none !important;
}

.ui.steps .step {
  background-color: var(--ff-bg-tertiary) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.steps .step .title {
  color: var(--ff-text-primary) !important;
}

.ui.steps .step .description {
  color: var(--ff-text-secondary) !important;
}

.ui.steps .step.active {
  background-color: var(--ff-bg-secondary) !important;
}

.ui.steps .step.active .title {
  color: var(--ff-accent-primary) !important;
}

/* Ordered steps - theme the numbers */
.ui.ordered.steps .step:before {
  background-color: var(--ff-bg-secondary) !important;
  color: var(--ff-text-primary) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.ui.ordered.steps .step.active:before {
  background-color: var(--ff-accent-primary) !important;
  color: var(--ff-text-inverted) !important;
  border-color: var(--ff-accent-primary) !important;
}

.ui.ordered.steps .step.completed:before {
  background-color: var(--ff-accent-success) !important;
  color: var(--ff-text-inverted) !important;
  border-color: var(--ff-accent-success) !important;
}

/* Step arrows/connectors */
.ui.steps .step:after {
  background-color: var(--ff-bg-tertiary) !important;
  border-right: 1px solid var(--ff-border-primary) !important;
  border-bottom: 1px solid var(--ff-border-primary) !important;
}

.ui.steps .step.active:after {
  background-color: var(--ff-bg-secondary) !important;
}

/* ============================================
   STATISTICS (Pricing, Metrics, etc.)
   ============================================ */

/* Theme-aware statistics */
.ui.statistic .value {
  color: var(--ff-text-primary);
}

.ui.statistic .label {
  color: var(--ff-text-secondary);
}

.ui.statistics .statistic .value {
  color: var(--ff-text-primary);
}

.ui.statistics .statistic .label {
  color: var(--ff-text-secondary);
}

/* Colored statistics - ensure visibility in dark mode */
.ui.statistic.red .value,
.ui.red.statistic .value {
  color: var(--ff-accent-danger);
}

.ui.statistic.orange .value,
.ui.orange.statistic .value {
  color: var(--ff-accent-orange);
}

.ui.statistic.yellow .value,
.ui.yellow.statistic .value {
  color: var(--ff-accent-warning);
}

.ui.statistic.olive .value,
.ui.olive.statistic .value {
  color: var(--ff-accent-success);
}

.ui.statistic.green .value,
.ui.green.statistic .value {
  color: var(--ff-accent-success);
}

.ui.statistic.teal .value,
.ui.teal.statistic .value {
  color: #00b5ad;
}

.ui.statistic.blue .value,
.ui.blue.statistic .value {
  color: var(--ff-accent-primary);
}

.ui.statistic.violet .value,
.ui.violet.statistic .value {
  color: #6435c9;
}

.ui.statistic.purple .value,
.ui.purple.statistic .value {
  color: #a333c8;
}

.ui.statistic.pink .value,
.ui.pink.statistic .value {
  color: #e03997;
}

.ui.statistic.brown .value,
.ui.brown.statistic .value {
  color: #a5673f;
}

.ui.statistic.grey .value,
.ui.grey.statistic .value {
  color: var(--ff-text-secondary);
}


/* File Fortress Theme System - Custom Components & Utilities */
/* This file contains custom components, theme bulb, and utility classes */

/* ============================================
   THEME BULB COMPONENT
   ============================================ */

/* Theme Bulb Icon Styles */
.theme-bulb-light::before {
  content: "💡";
  opacity: 0.5; /* Dimmed when in light mode */
}

.theme-bulb-dark::before {
  content: "💡";
  opacity: 1; /* Bright when in dark mode */
}

/* ============================================
   CODE & TERMINAL DISPLAYS
   ============================================ */

/* Code input display - for registration codes, etc. */
.code-input-display {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

/* Terminal display - for command examples */
.terminal-display {
  background-color: var(--terminal-bg) !important;
  color: var(--terminal-text) !important;
  padding: 1.5rem;
  border-radius: var(--ff-radius-md);
  border: 1px solid var(--ff-border-primary);
  font-family: 'Courier New', Courier, monospace;
}

/* Terminal command text */
.terminal-command {
  color: var(--terminal-command) !important;
  font-size: 1.2em;
  font-family: 'Courier New', Courier, monospace;
}

/* ============================================
   PROFESSIONAL HOMEPAGE COMPONENTS
   ============================================ */

/* Hero section */
.hero-section {
  background: var(--ff-gradient-secondary);
  padding: var(--ff-spacing-xxl) 0;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,0,0,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(#grid)"/></svg>');
  opacity: 0.3;
}

.hero-section .ui.container {
  position: relative;
  z-index: 1;
}

/* Feature cards */
.feature-card {
  background: var(--ff-bg-tertiary);
  border: 1px solid var(--ff-border-primary);
  border-radius: var(--ff-radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--ff-shadow-sm);
  transition: all var(--ff-transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ff-shadow-lg);
  border-color: var(--ff-accent-primary);
}

.feature-card .ui.icon.header {
  color: var(--ff-accent-primary);
  margin-bottom: 0;
}

.feature-card .ui.icon.header i.icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.feature-card .ui.icon.header .content {
  margin-top: 0;
}

.feature-card .ui.icon.header .content .header {
  margin-bottom: 0.5rem;
}

.feature-card .ui.icon.header .content .sub.header {
  margin-top: 0;
  opacity: 0.8;
}

/* Stats section */
.stats-section {
  background: var(--ff-gradient-primary);
  color: white;
  padding: var(--ff-spacing-xxl) 0;
}

.stats-item {
  text-align: center;
  padding: var(--ff-spacing-lg);
}

.stats-item .number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--ff-spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.stats-item .number i.icon {
  font-size: 3.5rem !important;
  margin: 0 !important;
  color: white !important;
}

/* Individual icon colors for commitment section */
.stats-item .number i.shield.alternate.icon {
  color: #4caf50 !important; /* Green for security/privacy */
}

.stats-item .number i.code.branch.icon {
  color: #ff9800 !important; /* Orange for development */
}

.stats-item .number i.comments.icon {
  color: #9c27b0 !important; /* Purple for user interaction */
}

.stats-item .number i.rocket.icon {
  color: #f44336 !important; /* Red/coral for active development */
}

.stats-item .label {
  font-size: 1.2rem;
  font-weight: 600;
  color: white !important;
  margin-bottom: 0.5rem;
}

.stats-item p {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.95rem !important;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* CTA section */
.cta-section {
  background: var(--ff-gradient-secondary);
  padding: var(--ff-spacing-xxl) 0;
  text-align: center;
}

.cta-section .ui.header {
  margin-bottom: var(--ff-spacing-lg);
}

.cta-section .ui.buttons {
  margin-top: var(--ff-spacing-lg);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media only screen and (max-width: 767px) {
  .hero-section {
    padding: 3rem 0 2rem 0;
  }
  
  .hero-section .ui.header.massive .content span {
    font-size: 2.5rem !important;
  }
  
  .hero-section .sub.header {
    font-size: 1.1rem !important;
  }
  
  .hero-section p {
    font-size: 1.1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .hero-section .ui.buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-section .ui.buttons .or {
    margin: 1rem 0;
  }
  
  .feature-card {
    padding: 2rem 1.5rem;
    min-height: 240px;
  }
  
  .feature-card .ui.icon.header i.icon {
    font-size: 2.5rem;
  }
  
  .feature-card .ui.icon.header .content .header {
    font-size: 1.3rem;
  }
  
  .stats-item .number {
    font-size: 2.5rem;
  }
  
  .stats-item .number i.icon {
    font-size: 3rem !important;
  }
  
  .process-step {
    padding: 1.5rem 1rem;
    min-height: 180px;
  }
  
  .step-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
  }
  
  .step-icon i.icon {
    font-size: 1.5rem;
  }
  
  .step-title {
    font-size: 1.1rem;
  }
  
  .step-description {
    font-size: 0.9rem;
  }
}

/* ============================================
   THEME UTILITY CLASSES
   Use these classes for easy theme integration
   ============================================ */

/* Background utilities */
.theme-bg-primary {
  background-color: var(--ff-bg-primary) !important;
}

.theme-bg-secondary {
  background-color: var(--ff-bg-secondary) !important;
}

.theme-bg-tertiary {
  background-color: var(--ff-bg-tertiary) !important;
}

.theme-bg-inverted {
  background-color: var(--ff-bg-inverted) !important;
}

/* Text color utilities */
.theme-text-primary {
  color: var(--ff-text-primary) !important;
}

.theme-text-secondary {
  color: var(--ff-text-secondary) !important;
}

.theme-text-inverted {
  color: var(--ff-text-inverted) !important;
}

.theme-text-muted {
  color: var(--ff-text-muted) !important;
}

/* Border utilities */
.theme-border-primary {
  border-color: var(--ff-border-primary) !important;
}

.theme-border-secondary {
  border-color: var(--ff-border-secondary) !important;
}

.theme-border-focus {
  border-color: var(--ff-border-focus) !important;
}

/* Shadow utilities */
.theme-shadow-sm {
  box-shadow: var(--ff-shadow-sm) !important;
}

.theme-shadow-md {
  box-shadow: var(--ff-shadow-md) !important;
}

.theme-shadow-lg {
  box-shadow: var(--ff-shadow-lg) !important;
}

/* Accent color utilities */
.theme-accent-primary {
  color: var(--ff-accent-primary) !important;
}

.theme-accent-secondary {
  color: var(--ff-accent-secondary) !important;
}

.theme-accent-success {
  color: var(--ff-accent-success) !important;
}

.theme-accent-warning {
  color: var(--ff-accent-warning) !important;
}

.theme-accent-danger {
  color: var(--ff-accent-danger) !important;
}

/* Background accent utilities */
.theme-bg-accent-primary {
  background-color: var(--ff-accent-primary) !important;
}

.theme-bg-accent-success {
  background-color: var(--ff-accent-success) !important;
}

.theme-bg-accent-warning {
  background-color: var(--ff-accent-warning) !important;
}

.theme-bg-accent-danger {
  background-color: var(--ff-accent-danger) !important;
}

/* Combined utilities for common patterns */
.theme-card {
  background-color: var(--ff-bg-tertiary) !important;
  border: 1px solid var(--ff-border-primary) !important;
  box-shadow: var(--ff-shadow-sm) !important;
  color: var(--ff-text-primary) !important;
}

.theme-input {
  background-color: var(--ff-bg-tertiary) !important;
  color: var(--ff-text-primary) !important;
  border: 1px solid var(--ff-border-primary) !important;
}

.theme-input:focus {
  border-color: var(--ff-border-focus) !important;
}

.theme-panel {
  background-color: var(--ff-bg-secondary) !important;
  border: 1px solid var(--ff-border-primary) !important;
  color: var(--ff-text-primary) !important;
}

/* Gradient utilities */
.theme-gradient-primary {
  background: var(--ff-gradient-primary) !important;
}

.theme-gradient-secondary {
  background: var(--ff-gradient-secondary) !important;
}


/* Download Button Styling */
.download-button {
    position: relative;
    z-index: 2;
}

.download-button .menu {
    min-width: 220px;
}

.download-button .menu .item {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--ff-border-primary);
}

.download-button .menu .item:last-child {
    border-bottom: none;
}

.download-button .menu .item:hover {
    background-color: var(--ff-bg-secondary) !important;
}

.download-button .menu .item .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.download-button .menu .item .content .header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--ff-text-primary);
}

.download-button .menu .item .content .header i {
    font-size: 16px;
    width: 16px;
    text-align: center;
}

.download-button .menu .item .content .description {
    font-size: 0.85em;
    color: var(--ff-text-secondary);
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
}

/* Improve dropdown button appearance */
.download-button.ui.button {
    padding-right: 2.5em !important;
}

.download-button.ui.button:after {
    content: '\f0d7';
    font-family: 'Icons';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
}

/* Platform-specific icon colors (more specific overrides for dropdown menu icons) */
.download-button .menu .item .content .header .windows.icon {
    color: #0078d4 !important;
}

.download-button .menu .item .content .header .apple.icon {
    color: #000000 !important;
}

.download-button .menu .item .content .header .linux.icon {
    color: #FFA726 !important;
}

/* Dashboard Wizard Styles */
.ff-wizard-container {
    padding: 2rem;
}

.ff-wizard-steps {
    margin: 2rem 0 !important;
}

.ff-wizard-steps .step {
    cursor: default !important;
}

.ff-wizard-steps .step.completed .icon {
    color: var(--ff-accent-success) !important;
}

.ff-wizard-content {
    min-height: 400px;
    padding: 2rem 1rem;
}

.ff-wizard-step-content {
    max-width: 800px;
    margin: 0 auto;
}

.ff-wizard-navigation {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
}

/* Terminal-like code display for wizard */
.ff-wizard-terminal-display {
    font-family: 'Courier New', Courier, monospace;
}

.ff-wizard-step-content code {
    font-family: 'Courier New', Courier, monospace;
}

/* Turnstile widget styling */
.cf-turnstile {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  border-radius: 0.28571429rem;
}

/* Lightweight Authentication Pages - Using Fomantic UI */
.auth-container {
    min-height: 100vh;
    background: var(--ff-bg-secondary);
    padding: 2rem 0;
}

/* Clean auth card using Fomantic UI segment */
.auth-card.ui.segment {
    background: var(--ff-bg-tertiary) !important;
    border: 1px solid var(--ff-border-primary) !important;
    border-radius: 0.5rem !important;
    padding: 3rem !important;
    margin: 1rem auto !important;
    max-width: 500px !important;
    box-shadow: 0 2px 12px rgba(34, 36, 38, 0.08) !important;
}

/* Professional header using Fomantic UI */
.auth-header.ui.header {
    color: var(--ff-accent-primary) !important;
    margin-bottom: 2rem !important;
}

.auth-header.ui.header .content {
    color: var(--ff-accent-primary) !important;
}

.auth-header.ui.header .sub.header {
    color: var(--ff-text-secondary) !important;
    margin-top: 0.5rem !important;
}

/* Logo styling */
.auth-logo .ui.image {
    max-height: 80px !important;
    margin: 0 auto 2rem auto !important;
}

/* Enhanced form using Fomantic UI */
.auth-form.ui.form .field {
    margin-bottom: 1.5rem !important;
}

.auth-form.ui.form .field > label {
    color: var(--ff-accent-primary) !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.auth-form.ui.form .field input {
    border-radius: 0.5rem !important;
    border: 2px solid var(--ff-border-primary) !important;
    padding: 0.875rem 1rem 0.875rem 3rem !important;
    font-size: 1rem !important;
    transition: border-color 0.2s ease !important;
}

.auth-form.ui.form .field input:focus {
    border-color: var(--ff-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(33, 133, 208, 0.1) !important;
}

.auth-form.ui.form .field input:hover {
    border-color: var(--ff-accent-secondary) !important;
}

/* Icon positioning */
.auth-form.ui.form .field .ui.left.icon.input i.icon {
    color: var(--ff-accent-primary) !important;
    left: 1rem !important;
}

.auth-form.ui.form .field.focused .ui.left.icon.input i.icon {
    color: var(--ff-accent-secondary) !important;
}

/* Enhanced checkbox using Fomantic UI */
.auth-form.ui.form .ui.checkbox {
    margin: 1.5rem 0 !important;
}

.auth-form.ui.form .ui.checkbox input:checked ~ label:before {
    background: var(--ff-accent-primary) !important;
    border-color: var(--ff-accent-primary) !important;
}

.auth-form.ui.form .ui.checkbox input:focus ~ label:before {
    border-color: var(--ff-accent-primary) !important;
}

.auth-form.ui.form .ui.checkbox label {
    color: var(--ff-text-primary) !important;
}

.auth-form.ui.form .ui.checkbox label a {
    color: var(--ff-accent-primary) !important;
    font-weight: 500 !important;
}

.auth-form.ui.form .ui.checkbox label a:hover {
    color: var(--ff-accent-secondary) !important;
}

/* Professional button using Fomantic UI */
.auth-form.ui.form .ui.primary.button {
    background: var(--ff-accent-primary) !important;
    border-radius: 0.5rem !important;
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
    transition: all 0.2s ease !important;
}

.auth-form.ui.form .ui.primary.button:hover {
    background: var(--ff-accent-secondary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 133, 208, 0.3) !important;
}

/* Error message using Fomantic UI */
.auth-form.ui.form .ui.error.message {
    border-radius: 0.5rem !important;
    margin-top: 1rem !important;
}

/* Footer message using Fomantic UI */
.auth-footer.ui.message {
    background: rgba(33, 133, 208, 0.05) !important;
    border: 1px solid rgba(33, 133, 208, 0.1) !important;
    border-radius: 0.5rem !important;
    margin-top: 2rem !important;
    position: relative !important;
}

.auth-footer.ui.message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--ff-accent-primary);
    border-radius: 1px;
}

.auth-footer.ui.message a {
    color: var(--ff-accent-primary) !important;
    font-weight: 600 !important;
}

.auth-footer.ui.message a:hover {
    color: var(--ff-accent-secondary) !important;
}

/* Turnstile styling using Fomantic UI */
.cf-turnstile {
    border-radius: 0.28571429rem !important;
    margin: 1rem 0 !important;
    box-shadow: 0 1px 3px rgba(34, 36, 38, 0.1) !important;
}

/* Form validation states using Fomantic UI */
.auth-form.ui.form .field.error input {
    border-color: var(--ff-accent-danger) !important;
    box-shadow: 0 0 0 3px rgba(219, 40, 40, 0.1) !important;
}

.auth-form.ui.form .field.error .ui.left.icon.input i.icon {
    color: var(--ff-accent-danger) !important;
}

.auth-form.ui.form .field.success input {
    border-color: var(--ff-accent-success) !important;
    box-shadow: 0 0 0 3px rgba(33, 186, 69, 0.1) !important;
}

.auth-form.ui.form .field.success .ui.left.icon.input i.icon {
    color: var(--ff-accent-success) !important;
}

/* Responsive design using Fomantic UI breakpoints */
@media only screen and (max-width: 767px) {
    .auth-card.ui.segment {
        padding: 2rem !important;
        margin: 0.5rem !important;
        border-radius: 0.5rem !important;
    }
    
    .auth-header.ui.header {
        font-size: 1.8rem !important;
    }
    
    .auth-logo .ui.image {
        max-height: 60px !important;
    }
    
    .auth-form.ui.form .field input {
        padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    }
}

/* Simple hover effects for better UX */
.auth-form.ui.form .field:hover input {
    border-color: var(--ff-accent-secondary) !important;
}

.auth-form.ui.form .field.focused {
    transform: none !important; /* Remove transform for performance */
}

/* Password strength indicator using Fomantic UI */
.password-strength.ui.message {
    margin-top: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    border-radius: 0.28571429rem !important;
}

.password-strength.weak {
    background: rgba(219, 40, 40, 0.1) !important;
    color: var(--ff-accent-danger) !important;
    border: 1px solid rgba(219, 40, 40, 0.2) !important;
}

.password-strength.fair {
    background: rgba(242, 113, 28, 0.1) !important;
    color: var(--ff-accent-orange) !important;
    border: 1px solid rgba(242, 113, 28, 0.2) !important;
}

.password-strength.good {
    background: rgba(251, 189, 8, 0.1) !important;
    color: var(--ff-accent-warning) !important;
    border: 1px solid rgba(251, 189, 8, 0.2) !important;
}

.password-strength.strong {
    background: rgba(33, 186, 69, 0.1) !important;
    color: var(--ff-accent-success) !important;
    border: 1px solid rgba(33, 186, 69, 0.2) !important;
}

/* Account menu styling */
.account-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
}

.account-menu .account-name {
    font-weight: 500;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu .menu {
    min-width: 12rem;
}

.account-menu-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0.5rem 0;
    font-family: inherit;
    cursor: pointer;
}

.account-menu-button:hover,
.account-menu-button:focus {
    color: var(--ff-accent-danger);
}

.account-menu-button i.icon {
    margin: 0 !important;
}

/* Professional Layout Enhancements */
.main-content {
    min-height: calc(100vh - 200px);
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Enhanced focus styles for accessibility */
a:focus,
button:focus,
input:focus,
.ui.button:focus {
    outline: 2px solid var(--ff-border-focus);
    outline-offset: 2px;
}

/* Professional loading states */
.ui.loading.button {
    position: relative;
    overflow: hidden;
}

.ui.loading.button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Professional hover effects */
.ui.button:hover {
    transform: translateY(-1px);
    box-shadow: var(--ff-shadow-md);
}

.ui.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ff-shadow-lg);
}

/* Professional form styling */
.ui.form .field input:focus {
    border-color: var(--ff-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(33, 133, 208, 0.1) !important;
}

/* Professional message styling */
.ui.message {
    border-radius: var(--ff-radius-md);
    box-shadow: var(--ff-shadow-sm);
}

.ui.message.info {
    background-color: rgba(33, 133, 208, 0.1);
    border: 1px solid rgba(33, 133, 208, 0.2);
    color: var(--ff-text-primary);
}

.ui.message.success {
    background-color: rgba(33, 186, 69, 0.1);
    border: 1px solid rgba(33, 186, 69, 0.2);
    color: var(--ff-text-primary);
}

.ui.message.warning {
    background-color: rgba(251, 189, 8, 0.1);
    border: 1px solid rgba(251, 189, 8, 0.2);
    color: var(--ff-text-primary);
}

.ui.message.error {
    background-color: rgba(219, 40, 40, 0.1);
    border: 1px solid rgba(219, 40, 40, 0.2);
    color: var(--ff-text-primary);
}

/* Professional table styling */
.ui.table {
    border-radius: var(--ff-radius-md);
    box-shadow: var(--ff-shadow-sm);
}

.ui.table thead th {
    background-color: var(--ff-bg-secondary);
    color: var(--ff-text-primary);
    font-weight: 600;
}

/* Professional modal styling */
.ui.modal {
    border-radius: var(--ff-radius-lg);
    box-shadow: var(--ff-shadow-lg);
}

.ui.modal > .header {
    background-color: var(--ff-bg-secondary);
    color: var(--ff-text-primary);
    border-bottom: 1px solid var(--ff-border-primary);
}

/* Professional progress bar styling */
.ui.progress .bar {
    background: var(--ff-gradient-primary);
}

/* Professional breadcrumb styling */
.ui.breadcrumb {
    background-color: var(--ff-bg-secondary);
    border-radius: var(--ff-radius-md);
    padding: 0.5rem 1rem;
}

.ui.breadcrumb .section {
    color: var(--ff-text-secondary);
}

.ui.breadcrumb .section.active {
    color: var(--ff-text-primary);
    font-weight: 600;
}

/* Professional pagination styling */
.ui.pagination.menu {
    border-radius: var(--ff-radius-md);
    box-shadow: var(--ff-shadow-sm);
}

.ui.pagination.menu .item {
    color: var(--ff-text-primary);
}

.ui.pagination.menu .item.active {
    background-color: var(--ff-accent-primary);
    color: white;
}

/* Professional sidebar styling */
.ui.sidebar {
    background-color: var(--ff-bg-tertiary);
    border-right: 1px solid var(--ff-border-primary);
}

.ui.sidebar .menu .item {
    color: var(--ff-text-primary);
}

.ui.sidebar .menu .item:hover {
    background-color: var(--ff-bg-secondary);
}

.ui.sidebar .menu .item.active {
    background-color: var(--ff-accent-primary);
    color: white;
}

/* Professional accordion styling */
.ui.accordion .title {
    background-color: var(--ff-bg-secondary);
    color: var(--ff-text-primary);
    border: 1px solid var(--ff-border-primary);
}

.ui.accordion .title:hover {
    background-color: var(--ff-border-primary);
}

.ui.accordion .title.active {
    background-color: var(--ff-accent-primary);
    color: white;
}

.ui.accordion .content {
    background-color: var(--ff-bg-tertiary);
    border: 1px solid var(--ff-border-primary);
    border-top: none;
}

/* Professional tab styling */
.ui.tabular.menu {
    border-bottom: 2px solid var(--ff-border-primary);
}

.ui.tabular.menu .item {
    color: var(--ff-text-secondary);
}

.ui.tabular.menu .item:hover {
    color: var(--ff-text-primary);
}

.ui.tabular.menu .item.active {
    color: var(--ff-accent-primary);
    border-bottom-color: var(--ff-accent-primary);
}

/* Professional rating styling */
.ui.rating .icon {
    color: var(--ff-accent-warning);
}

/* Professional divider styling */
.ui.divider {
    border-color: var(--ff-border-primary);
}

/* Professional label styling */
.ui.label {
    background-color: var(--ff-bg-secondary);
    color: var(--ff-text-primary);
    border: 1px solid var(--ff-border-primary);
}

.ui.label.primary {
    background-color: var(--ff-accent-primary);
    color: white;
}

.ui.label.success {
    background-color: var(--ff-accent-success);
    color: white;
}

.ui.label.warning {
    background-color: var(--ff-accent-warning);
    color: white;
}

.ui.label.error {
    background-color: var(--ff-accent-danger);
    color: white;
}

/* Professional placeholder styling */
.ui.placeholder {
    background-color: var(--ff-bg-secondary);
    border: 1px solid var(--ff-border-primary);
    border-radius: var(--ff-radius-md);
}

/* Professional rail styling */
.ui.rail {
    background-color: var(--ff-bg-tertiary);
    border: 1px solid var(--ff-border-primary);
    border-radius: var(--ff-radius-md);
}

/* Professional sticky styling */
.ui.sticky {
    background-color: var(--ff-bg-tertiary);
    border: 1px solid var(--ff-border-primary);
    border-radius: var(--ff-radius-md);
    box-shadow: var(--ff-shadow-sm);
}

/* Professional visibility utilities */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* Professional text utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--ff-text-muted);
}

.text-primary {
    color: var(--ff-text-primary);
}

.text-secondary {
    color: var(--ff-text-secondary);
}

/* Professional spacing utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--ff-spacing-xs) !important; }
.m-2 { margin: var(--ff-spacing-sm) !important; }
.m-3 { margin: var(--ff-spacing-md) !important; }
.m-4 { margin: var(--ff-spacing-lg) !important; }
.m-5 { margin: var(--ff-spacing-xl) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--ff-spacing-xs) !important; }
.p-2 { padding: var(--ff-spacing-sm) !important; }
.p-3 { padding: var(--ff-spacing-md) !important; }
.p-4 { padding: var(--ff-spacing-lg) !important; }
.p-5 { padding: var(--ff-spacing-xl) !important; }

/* Professional border utilities */
.border { border: 1px solid var(--ff-border-primary) !important; }
.border-top { border-top: 1px solid var(--ff-border-primary) !important; }
.border-bottom { border-bottom: 1px solid var(--ff-border-primary) !important; }
.border-left { border-left: 1px solid var(--ff-border-primary) !important; }
.border-right { border-right: 1px solid var(--ff-border-primary) !important; }

/* Professional shadow utilities */
.shadow-sm { box-shadow: var(--ff-shadow-sm) !important; }
.shadow-md { box-shadow: var(--ff-shadow-md) !important; }
.shadow-lg { box-shadow: var(--ff-shadow-lg) !important; }

/* Professional radius utilities */
.rounded { border-radius: var(--ff-radius-md) !important; }
.rounded-sm { border-radius: var(--ff-radius-sm) !important; }
.rounded-lg { border-radius: var(--ff-radius-lg) !important; }
.rounded-xl { border-radius: var(--ff-radius-xl) !important; }

/* Professional background utilities */
.bg-primary { background-color: var(--ff-bg-primary) !important; }
.bg-secondary { background-color: var(--ff-bg-secondary) !important; }
.bg-tertiary { background-color: var(--ff-bg-tertiary) !important; }

/* Professional gradient utilities */
.gradient-primary { background: var(--ff-gradient-primary) !important; }
.gradient-secondary { background: var(--ff-gradient-secondary) !important; }

/* Professional animation utilities */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

.slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Professional responsive utilities */
@media only screen and (max-width: 767px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
}

@media only screen and (min-width: 768px) {
    .desktop-hidden {
        display: none !important;
    }
}

/* Professional print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
body {
    background: var(--ff-bg-primary) !important;
    color: var(--ff-text-primary) !important;
}
    
    .ui.button {
        border: 1px solid var(--ff-border-primary) !important;
        background: var(--ff-bg-primary) !important;
        color: var(--ff-text-primary) !important;
    }
}

/* Process steps styling for How It Works section */
.process-step {
    background: var(--ff-bg-tertiary);
    border: 1px solid var(--ff-border-primary);
    border-radius: var(--ff-radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all var(--ff-transition-normal);
    min-height: 200px;
}

.process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--ff-shadow-md);
    border-color: var(--ff-accent-primary);
}

.step-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    background: var(--ff-accent-primary);
    flex-shrink: 0;
}

.step-icon i.icon {
    color: white;
    font-size: 2rem;
    margin: 0;
}

.step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.step-title {
    color: var(--ff-text-primary);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-top: 0;
}

.step-description {
    color: var(--ff-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Section heading overrides for consistent spacing - MUST be last to override Fomantic UI */
.custom-section-heading {
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
    color: var(--ff-text-primary) !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
}

.custom-stats-heading {
    color: white !important;
}

/* Trust indicators styling */
.trust-indicators {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ff-border-primary);
}

.trust-indicators .ui.mini.statistics {
    justify-content: center;
}

.trust-indicators .statistic {
    text-align: center;
}

.trust-indicators .statistic .value {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.trust-indicators .statistic .value i.icon {
    font-size: 2.5rem !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.trust-indicators .statistic .label {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--ff-text-secondary);
}

/* Modern Typography Enhancements */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Info Banner Styling */
.info-banner {
    background: linear-gradient(135deg, #2185d0 0%, #1678c2 100%);
    padding: 1rem 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(33, 133, 208, 0.2);
    position: relative;
    overflow: hidden;
}

.info-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.info-banner p {
    position: relative;
    z-index: 1;
    color: white;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Enhanced Hero Section */
.hero-section {
    background: linear-gradient(180deg, var(--ff-bg-primary) 0%, var(--ff-bg-secondary) 100%);
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(33, 133, 208, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(33, 186, 69, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.hero-title-gradient {
    background: linear-gradient(135deg, #2185d0 0%, #1678c2 50%, #0e5a8a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 3.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.hero-subtitle {
    color: var(--ff-text-secondary);
    font-size: 1.5rem;
    margin-top: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hero-description-bold {
    font-size: 1.5rem;
    color: var(--ff-text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hero-description {
    font-size: 1.3rem;
    color: var(--ff-text-secondary);
    line-height: 1.7;
    font-weight: 400;
}

/* Enhanced Feature Cards */
.feature-card {
    background: var(--ff-bg-tertiary);
    border: 1px solid var(--ff-border-primary);
    border-radius: var(--ff-radius-lg);
    padding: 2.5rem 2rem;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ff-gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(33, 133, 208, 0.15);
    border-color: var(--ff-accent-primary);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

/* Animated Icons */
.feature-card i.icon {
    transition: transform 0.3s ease;
}

.feature-card:hover i.icon {
    transform: scale(1.1) rotate(5deg);
}

/* Enhanced Buttons */
.ui.primary.button,
.ui.primary.huge.button {
    background: linear-gradient(135deg, #2185d0 0%, #1678c2 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(33, 133, 208, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.ui.primary.button:hover,
.ui.primary.huge.button:hover {
    background: linear-gradient(135deg, #1678c2 0%, #0e5a8a 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(33, 133, 208, 0.4) !important;
}

.ui.secondary.button,
.ui.secondary.huge.button {
    background: white !important;
    border: 2px solid var(--ff-accent-primary) !important;
    color: var(--ff-accent-primary) !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ui.secondary.button:hover,
.ui.secondary.huge.button:hover {
    background: var(--ff-accent-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(33, 133, 208, 0.3) !important;
}

/* Enhanced Section Headings */
.custom-section-heading {
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
    color: var(--ff-text-primary) !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

/* Glassmorphism Effect for Special Sections */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--ff-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Animated Gradient Background for Stats Section */
.stats-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    position: relative;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(33, 133, 208, 0.9) 0%, rgba(22, 120, 194, 0.95) 100%);
}

.stats-section > * {
    position: relative;
    z-index: 1;
}

/* Enhanced Stats Items */
.stats-item {
    text-align: center;
    padding: 2rem 1rem;
    transition: transform 0.3s ease;
}

.stats-item:hover {
    transform: translateY(-5px);
}

.stats-item .number {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.stats-item .label {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.stats-item p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Image Container Enhancements */
.image-container {
    position: relative;
    border-radius: var(--ff-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.image-container:hover {
    transform: scale(1.02);
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Enhanced CTA Section */
.cta-section {
    background: linear-gradient(180deg, var(--ff-bg-primary) 0%, var(--ff-bg-secondary) 100%);
    position: relative;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 50%, rgba(33, 133, 208, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(33, 186, 69, 0.08) 0%, transparent 50%);
    pointer-events: none;
}
/* FileFortress Icon Color Scheme */

/* Primary Feature Icons */
.cloud.icon { color: #4FC3F7; } /* Light blue for cloud services */
.lock.icon { color: #66BB6A; } /* Green for security */
.search.icon { color: #FFA726; } /* Orange for search functionality */
.shield.icon, .shield.alternate.icon { color: #42A5F5; } /* Blue for security/admin */
.key.icon { color: #FFC107; } /* Amber for keys/authentication */

/* Navigation & Action Icons */
.home.icon { color: #5C6BC0; } /* Indigo for home */
.dashboard.icon { color: #26A69A; } /* Teal for dashboard */
.sign.in.icon { color: #66BB6A; } /* Green for login */
.sign.out.icon { color: #EF5350; } /* Red for logout */
.user.icon, .user.plus.icon { color: #7E57C2; } /* Purple for users */
.settings.icon, .cog.icon { color: #78909C; } /* Blue gray for settings */

/* Documentation & Help Icons */
.book.icon { color: #5D4037; } /* Brown for documentation */
.terminal.icon { color: #424242; } /* Dark gray for terminal */
.code.icon { color: #FF7043; } /* Deep orange for code */
.list.icon { color: #8D6E63; } /* Brown for lists */
.play.icon { color: #66BB6A; } /* Green for examples/play */

/* Communication Icons */
.comment.icon, .comments.icon { color: #29B6F6; } /* Light blue for comments */
.comment.outline.icon { color: #90CAF9; } /* Lighter blue for comment outlines */
.mail.icon, .envelope.icon { color: #FF7043; } /* Deep orange for email */
.phone.icon { color: #66BB6A; } /* Green for phone */
.bell.icon { color: #FF9800; } /* Orange for notifications */
.inbox.icon { color: #42A5F5; } /* Blue for inbox */

/* Status & State Icons */
.check.icon, .check.circle.icon { color: #66BB6A; } /* Green for success */
.times.icon, .times.circle.icon, .close.icon { color: #EF5350; } /* Red for errors/close */
.warning.icon, .warning.circle.icon { color: #FFA726; } /* Orange for warnings */
.exclamation.triangle.icon { color: #EF5350; } /* Red for error triangles */
.info.icon, .info.circle.icon { color: #42A5F5; } /* Blue for information */
.question.icon, .question.circle.icon { color: #AB47BC; } /* Purple for questions */
.circle.outline.icon { color: #90A4AE; } /* Blue gray for circle outlines */

/* File & Download Icons */
.download.icon { color: #66BB6A; } /* Green for downloads */
.upload.icon { color: #5C6BC0; } /* Indigo for uploads */
.copy.icon { color: #26A69A; } /* Teal for copy actions */
.archive.icon { color: #8D6E63; } /* Brown for archive */
.database.icon { color: #455A64; } /* Blue gray for database */

/* Platform & Service Icons */
.windows.icon { color: #0078D4; } /* Microsoft blue */
.apple.icon { color: #000000; } /* Apple black */
.linux.icon { color: #FFA726; } /* Orange for Linux */
.google.drive.icon { color: #4285F4; } /* Google blue */
.dropbox.icon { color: #0061FF; } /* Dropbox blue */
.microsoft.icon { color: #0078D4; } /* Microsoft blue */

/* Brand icon definitions - Using Font Awesome 5 Free Brands font codes */
/* These icons need the brand-icons font to be loaded by Fomantic UI */
i.icon.windows:before { content: "\f17a"; }
i.icon.apple:before { content: "\f179"; }  
i.icon.linux:before { content: "\f17c"; }

/* Progress & Timeline Icons */
.calendar.icon { color: #8E24AA; } /* Purple for calendar */
.clock.icon { color: #FF7043; } /* Deep orange for time */
.rocket.icon { color: #FF5722; } /* Deep orange for launch/speed */
.chart.line.icon { color: #00ACC1; } /* Cyan for charts */

/* Social & External Icons */
.twitter.icon { color: #1DA1F2; } /* Twitter blue */
.linkedin.icon { color: #0077B5; } /* LinkedIn blue */
.external.icon { color: #78909C; } /* Blue gray for external links */

/* Special Action Icons */
.plus.icon { color: #66BB6A; } /* Green for add actions */
.edit.icon { color: #FFA726; } /* Orange for edit */
.eye.icon { color: #42A5F5; } /* Blue for view */
.eye.slash.icon { color: #EF5350; } /* Red for privacy/hidden */
.reply.icon { color: #26A69A; } /* Teal for reply */
.send.icon { color: #66BB6A; } /* Green for send */
.undo.icon { color: #FF7043; } /* Deep orange for undo */

/* Special Feature Icons */
.linkify.icon { color: #7E57C2; } /* Purple for connections */
.users.icon { color: #8E24AA; } /* Purple for team/users */
.heart.icon { color: #E91E63; } /* Pink for favorites/heart */
.balance.scale.icon { color: #795548; } /* Brown for balance/legal */
.certificate.icon { color: #FF9800; } /* Orange for certificates */
.flask.icon { color: #9C27B0; } /* Purple for experiments/alpha */

/* Dropdown & Navigation Helper Icons */
.dropdown.icon { color: #90A4AE; } /* Light blue gray for dropdowns */
.arrow.right.icon, .arrow.left.icon { color: #607D8B; } /* Blue gray for arrows */

/* Bug & Development Icons */
.bug.icon { color: #F44336; } /* Red for bugs */
.lightbulb.icon { color: #FFD54F; } /* Yellow for ideas */

/* Tech & System Icons */
.computer.icon { color: #607D8B; } /* Blue gray for computers */
.desktop.icon { color: #455A64; } /* Dark blue gray for desktop */
.globe.icon { color: #4CAF50; } /* Green for global/web */

/* Special States */
.large.icon { font-size: 1.5em !important; }
.huge.icon { font-size: 2em !important; }

/* Utility Classes for Manual Overrides */
.icon.red { color: #EF5350 !important; }
.icon.green { color: #66BB6A !important; }
.icon.blue { color: #42A5F5 !important; }
.icon.orange { color: #FFA726 !important; }
.icon.purple { color: #7E57C2 !important; }
.icon.teal { color: #26A69A !important; }
.icon.yellow { color: #FFD54F !important; }
.icon.pink { color: #E91E63 !important; }
.icon.brown { color: #8D6E63 !important; }
.icon.gray { color: #78909C !important; }

/* Button Icon Overrides - Ensure icons are white in colored buttons */
/* But exclude icons inside dropdown menus */
.ui.button > .icon,
.ui.button > i.icon {
    color: #FFFFFF !important;
}

/* Specific button type overrides */
.ui.red.button .icon,
.ui.red.button i.icon,
.ui.primary.button .icon,
.ui.primary.button i.icon,
.ui.teal.button .icon,
.ui.teal.button i.icon,
.ui.blue.button .icon,
.ui.blue.button i.icon,
.ui.green.button .icon,
.ui.green.button i.icon,
.ui.orange.button .icon,
.ui.orange.button i.icon,
.ui.purple.button .icon,
.ui.purple.button i.icon {
    color: #FFFFFF !important;
}

/* Ensure button text is also white in colored buttons */
.ui.red.button,
.ui.primary.button,
.ui.teal.button,
.ui.blue.button,
.ui.green.button,
.ui.orange.button,
.ui.purple.button {
    color: #FFFFFF !important;
}

/* Override for inverted menu buttons (like logout in header) */
.ui.inverted.menu .ui.button .icon,
.ui.inverted.menu .ui.button i.icon {
    color: #FFFFFF !important;
}

.ui.inverted.menu .ui.button {
    color: #FFFFFF !important;
}

/* Feature Icon Container (used on Features page) */
.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #e8f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.feature-icon i {
    font-size: 2rem;
    color: var(--primary-color);
}