/* ==========================================================================
   REVOnet Theme — revonet-theme.css   v1.0.0 Brand Blue Edition
   © Newdeal Deluxe IKE 2026
   --------------------------------------------------------------------------
   STRATEGY: CSS-only visual rebrand. NO layout/structural changes.
            We override default HumHub colors, fonts, borders, shadows
            without touching the DOM tree.

   This means:
     ✓ Brand color → blue #3B82F6
     ✓ Typography → Inter font, modern weights
     ✓ Cards/buttons → softer, modern radius+shadows
     ✗ NO repositioning of nav/sidebar/widgets
     ✗ NO hiding of HumHub elements
     ✗ NO DOM injection

   Safe to enable/disable — won't break anything if disabled.
   ========================================================================== */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 0. DESIGN TOKENS                                                      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root {
  /* Brand */
  --rn-brand:        #3B82F6;
  --rn-brand-dark:   #2563EB;
  --rn-brand-darker: #1D4ED8;
  --rn-brand-light:  #60A5FA;
  --rn-brand-50:     #EFF6FF;
  --rn-brand-100:    #DBEAFE;
  --rn-brand-200:    #BFDBFE;
  --rn-brand-glow:   rgba(59, 130, 246, .14);

  /* Multi-color accents */
  --rn-c-cyan:    #06B6D4;
  --rn-c-green:   #10B981;
  --rn-c-amber:   #F59E0B;
  --rn-c-purple:  #8B5CF6;
  --rn-c-pink:    #EC4899;
  --rn-c-red:     #EF4444;

  /* Neutrals */
  --rn-canvas:    #F8F9FB;
  --rn-surface:   #FFFFFF;
  --rn-surface-2: #F4F4F6;
  --rn-text-1:    #111827;
  --rn-text-2:    #374151;
  --rn-text-3:    #6B7280;
  --rn-text-muted:#9CA3AF;
  --rn-border:    #E5E7EB;
  --rn-border-2:  #D1D5DB;
  --rn-border-soft: #F3F4F6;

  /* Status */
  --rn-success:   #10B981;
  --rn-success-bg:#ECFDF5;
  --rn-warning:   #F59E0B;
  --rn-warning-bg:#FFFBEB;
  --rn-danger:    #EF4444;
  --rn-danger-bg: #FEF2F2;

  /* Shadows */
  --rn-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --rn-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --rn-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);

  /* Radii */
  --rn-r-xs: 4px;
  --rn-r-sm: 8px;
  --rn-r-md: 10px;
  --rn-r-lg: 14px;
  --rn-r-full: 9999px;

  --rn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rn-t: 180ms;
  --rn-ease: cubic-bezier(.4, 0, .2, 1);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 1. TYPOGRAPHY                                                         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

html {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--rn-font) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--rn-text-1) !important;
  background: var(--rn-canvas) !important;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rn-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--rn-text-1) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 2. LINKS & BRAND COLOR APPLICATION                                    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

a {
  color: var(--rn-brand);
}
a:hover {
  color: var(--rn-brand-dark);
}

/* Bootstrap text-info / text-primary mapped to brand */
.text-primary, .text-info {
  color: var(--rn-brand) !important;
}

/* Backgrounds */
.bg-primary, .bg-info {
  background-color: var(--rn-brand) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 3. PANELS & CARDS                                                     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.panel {
  border: 1px solid var(--rn-border) !important;
  border-radius: var(--rn-r-lg) !important;
  box-shadow: var(--rn-shadow-xs) !important;
  background: var(--rn-surface) !important;
  margin-bottom: 14px !important;
}
.panel-default > .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--rn-border-soft) !important;
  border-radius: var(--rn-r-lg) var(--rn-r-lg) 0 0 !important;
  padding: 14px 18px !important;
  color: var(--rn-text-1) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.panel-body { padding: 16px 18px !important; }
.panel-footer {
  background: transparent !important;
  border-top: 1px solid var(--rn-border-soft) !important;
  padding: 10px 18px !important;
  border-radius: 0 0 var(--rn-r-lg) var(--rn-r-lg) !important;
}

/* Stream entries (posts) */
.s2_stream-entry,
.wallEntry,
.stream-entry,
.well {
  background: var(--rn-surface) !important;
  border: 1px solid var(--rn-border) !important;
  border-radius: var(--rn-r-lg) !important;
  box-shadow: var(--rn-shadow-xs) !important;
  margin-bottom: 14px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 4. BUTTONS                                                            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.btn {
  font-family: var(--rn-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: var(--rn-r-md) !important;
  transition: all var(--rn-t) var(--rn-ease) !important;
  border: 1px solid transparent !important;
  letter-spacing: -0.005em;
}

.btn-primary,
.btn-info {
  background-color: var(--rn-brand) !important;
  border-color: var(--rn-brand) !important;
  color: #FFFFFF !important;
  box-shadow: var(--rn-shadow-xs) !important;
}
.btn-primary:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-info:focus,
.btn-primary:active,
.btn-info:active {
  background-color: var(--rn-brand-dark) !important;
  border-color: var(--rn-brand-dark) !important;
  box-shadow: 0 4px 10px rgba(59, 130, 246, .25) !important;
  color: #FFFFFF !important;
}

.btn-default {
  background: var(--rn-surface) !important;
  color: var(--rn-text-2) !important;
  border-color: var(--rn-border) !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--rn-surface-2) !important;
  color: var(--rn-text-1) !important;
  border-color: var(--rn-border-2) !important;
}

.btn-success {
  background: var(--rn-success) !important;
  border-color: var(--rn-success) !important;
  color: white !important;
}
.btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

.btn-danger {
  background: var(--rn-danger) !important;
  border-color: var(--rn-danger) !important;
  color: white !important;
}
.btn-danger:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 5. FORMS                                                              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.form-control,
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=tel],
input[type=url],
textarea,
select {
  background: var(--rn-surface) !important;
  border: 1px solid var(--rn-border) !important;
  border-radius: var(--rn-r-md) !important;
  padding: 8px 12px !important;
  font-family: var(--rn-font) !important;
  font-size: 13.5px !important;
  color: var(--rn-text-1) !important;
  transition: all var(--rn-t) var(--rn-ease) !important;
  box-shadow: none !important;
}
.form-control:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=search]:focus,
textarea:focus,
select:focus {
  border-color: var(--rn-brand) !important;
  box-shadow: 0 0 0 3px var(--rn-brand-glow) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--rn-text-muted) !important; }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 6. NAVIGATION (HumHub default top menu — change blue)                 ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Top navigation */
.navbar-static-top,
#topbar-first {
  background: var(--rn-surface) !important;
  border-bottom: 1px solid var(--rn-border) !important;
  box-shadow: var(--rn-shadow-xs) !important;
}

#topbar-first .nav > li > a,
#topbar-first .navbar-nav > li > a,
.nav-pills > li > a {
  color: var(--rn-text-2) !important;
  font-weight: 500 !important;
  border-radius: var(--rn-r-sm) !important;
  transition: all var(--rn-t) var(--rn-ease) !important;
}
#topbar-first .nav > li > a:hover,
#topbar-first .navbar-nav > li > a:hover {
  background: var(--rn-surface-2) !important;
  color: var(--rn-text-1) !important;
}
#topbar-first .nav > li.active > a,
#topbar-first .navbar-nav > li.active > a {
  background: var(--rn-brand-50) !important;
  color: var(--rn-brand-darker) !important;
  font-weight: 600 !important;
}

/* Pill nav (also used in some HumHub views) */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--rn-brand) !important;
  color: white !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 7. TABS                                                               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.nav-tabs { border-bottom: 1px solid var(--rn-border) !important; }
.nav-tabs > li > a {
  border: none !important;
  color: var(--rn-text-2) !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
  background: transparent !important;
  color: var(--rn-brand) !important;
  border: none !important;
  border-bottom: 2px solid var(--rn-brand) !important;
  font-weight: 600 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 8. SIDEBAR / NAVIGATION PANELS                                        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Left navigation links (HumHub default left sidebar) */
.layout-nav-container .nav-pills > li > a,
.layout-nav .nav > li > a {
  border-radius: var(--rn-r-sm) !important;
  font-weight: 500 !important;
  color: var(--rn-text-2) !important;
}
.layout-nav-container .nav-pills > li > a:hover,
.layout-nav .nav > li > a:hover {
  background: var(--rn-surface-2) !important;
  color: var(--rn-text-1) !important;
}
.layout-nav-container .nav-pills > li.active > a,
.layout-nav .nav > li.active > a {
  background: var(--rn-brand-50) !important;
  color: var(--rn-brand-darker) !important;
  font-weight: 600 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 9. DROPDOWNS                                                          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.dropdown-menu {
  border: 1px solid var(--rn-border) !important;
  border-radius: var(--rn-r-md) !important;
  box-shadow: var(--rn-shadow-md) !important;
  padding: 6px !important;
  margin-top: 4px !important;
}
.dropdown-menu > li > a {
  padding: 8px 12px !important;
  border-radius: var(--rn-r-sm) !important;
  color: var(--rn-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--rn-surface-2) !important;
  color: var(--rn-text-1) !important;
}
.dropdown-menu > li.active > a,
.dropdown-menu > .active > a {
  background: var(--rn-brand-50) !important;
  color: var(--rn-brand-darker) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 10. BADGES & LABELS                                                   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.badge, .label {
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: var(--rn-r-sm) !important;
  letter-spacing: 0.01em;
}
.badge-primary, .label-primary {
  background: var(--rn-brand-50) !important;
  color: var(--rn-brand-dark) !important;
}
.badge-success, .label-success {
  background: var(--rn-success-bg) !important;
  color: var(--rn-success) !important;
}
.badge-warning, .label-warning {
  background: var(--rn-warning-bg) !important;
  color: var(--rn-warning) !important;
}
.badge-danger, .label-danger {
  background: var(--rn-danger-bg) !important;
  color: var(--rn-danger) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 11. TABLES                                                            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.table {
  background: var(--rn-surface) !important;
  border-radius: var(--rn-r-lg);
  border-collapse: separate;
  border-spacing: 0;
}
.table > thead > tr > th {
  font-weight: 600 !important;
  color: var(--rn-text-2) !important;
  border-bottom: 1px solid var(--rn-border) !important;
  background: var(--rn-surface-2) !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--rn-border-soft) !important;
  padding: 10px 14px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 12. MODALS                                                            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.modal-content {
  border: 1px solid var(--rn-border) !important;
  border-radius: var(--rn-r-lg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
.modal-header {
  border-bottom: 1px solid var(--rn-border-soft) !important;
  padding: 16px 20px !important;
}
.modal-body { padding: 20px !important; }
.modal-footer {
  border-top: 1px solid var(--rn-border-soft) !important;
  padding: 12px 20px !important;
}
.modal-title {
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 13. STREAM POST DETAILS                                               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.user-display-name a,
.author-name {
  font-weight: 600 !important;
  color: var(--rn-text-1) !important;
  letter-spacing: -0.01em;
}

/* Like / comment / share buttons in stream */
.btn-like,
.btn-comment,
.btn-share,
.stream-action {
  background: transparent !important;
  border: none !important;
  color: var(--rn-text-2) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 7px 11px !important;
  border-radius: var(--rn-r-sm) !important;
  transition: all var(--rn-t) !important;
}
.btn-like:hover,
.btn-comment:hover,
.btn-share:hover {
  background: var(--rn-surface-2) !important;
  color: var(--rn-text-1) !important;
}
.btn-like.active,
.btn-like.liked {
  color: var(--rn-danger) !important;
}

/* Comments */
.comment {
  background: var(--rn-surface-2) !important;
  border-radius: var(--rn-r-md) !important;
  border: none !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 14. ALERTS / NOTIFICATIONS                                            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.alert {
  border: 1px solid transparent !important;
  border-radius: var(--rn-r-md) !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
}
.alert-info {
  background: var(--rn-brand-50) !important;
  border-color: var(--rn-brand-200) !important;
  color: var(--rn-brand-darker) !important;
}
.alert-success {
  background: var(--rn-success-bg) !important;
  border-color: #BBF7D0 !important;
  color: #065F46 !important;
}
.alert-warning {
  background: var(--rn-warning-bg) !important;
  border-color: #FDE68A !important;
  color: #92400E !important;
}
.alert-danger {
  background: var(--rn-danger-bg) !important;
  border-color: #FECACA !important;
  color: #991B1B !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 15. PAGINATION                                                        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.pagination > li > a,
.pagination > li > span {
  color: var(--rn-text-2) !important;
  border-color: var(--rn-border) !important;
  font-weight: 500 !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--rn-brand) !important;
  border-color: var(--rn-brand) !important;
  color: white !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 16. PROGRESS BARS                                                     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.progress {
  background: var(--rn-surface-2) !important;
  border-radius: var(--rn-r-full) !important;
  height: 6px !important;
  box-shadow: none !important;
}
.progress-bar {
  background: var(--rn-brand) !important;
  border-radius: var(--rn-r-full) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 17. TOOLTIPS / POPOVERS                                               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.tooltip-inner,
.popover {
  border-radius: var(--rn-r-md) !important;
  font-family: var(--rn-font) !important;
  font-size: 12px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 18. NOTIFICATION DROPDOWN (HumHub specific)                           ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.notification-list-entry,
.notification-entry {
  border-bottom: 1px solid var(--rn-border-soft) !important;
  padding: 10px 14px !important;
  transition: background var(--rn-t) !important;
}
.notification-list-entry:hover,
.notification-entry:hover {
  background: var(--rn-surface-2) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 19. AVATAR ENHANCEMENTS                                               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.user-image-default,
.img-rounded {
  border-radius: 50% !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 20. END                                                               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
