/* ============================================
   UTM MANAGER — GLOBAL DESIGN SYSTEM (v1)
   Theme: Purple + Lime + Charcoal (11/12)
=============================================== */


:root {
  /* ===== BRAND COLORS (Primary) ===== */
  --utm-primary:        #7C3AED;   /* Main Purple */
  --utm-primary-dark:   #4C1D95;   /* Darker Purple */
  --utm-primary-light:  #C4B5FD;   /* Light Purple for subtle backgrounds */

  /* ===== ACCENT COLORS (Lime) ===== */
  --utm-accent:         #4ADE80;   /* Lime Accent */
  --utm-accent-dark:    #22C55E;   /* Dark Lime (Success CTA) */
  --utm-accent-light:   #BBF7D0;   /* Light Lime highlight */

  /* ===== NEUTRALS ===== */
  --utm-charcoal:       #1F2937;   /* Sidebar / dark surface */
  --utm-gray-dark:      #374151;   /* Text, table headers */
  --utm-gray:           #6B7280;   /* Secondary text */
  --utm-gray-light:     #D1D5DB;   /* Borders */
  --utm-bg:             #F9FAFB;   /* Page background */
  --utm-surface:        #FFFFFF;   /* Cards, main panels */

  /* ===== TEXT COLORS ===== */
  --utm-text-dark:      #111827;   /* Main text */
  --utm-text:           #1F2937;   /* Regular text */
  --utm-text-light:     #6B7280;   /* Muted text */
  --utm-text-invert:    #FFFFFF;   /* On dark surfaces */

  /* ===== FEEDBACK COLORS ===== */
  --utm-success:        #22C55E;
  --utm-warning:        #FBBF24;
  --utm-error:          #EF4444;

  /* ===== BORDERS / SHADOWS ===== */
  --utm-border:         #E5E7EB;
  --utm-shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --utm-shadow-md:      0 4px 6px rgba(0,0,0,0.08);

  /* ===== RADIUS / SPACING ===== */
  --utm-radius-sm:      4px;
  --utm-radius:         8px;
  --utm-radius-lg:      12px;

  --utm-spacing-sm:     6px;
  --utm-spacing:        12px;
  --utm-spacing-lg:     20px;
}


/* ===============================
   GENERIC UTILITY CLASSES
================================= */
.utm-disabled { opacity: 0.6; cursor: not-allowed; }
.utm-lock { margin-left: 6px; color: var(--utm-gray); }


/* ===============================
   CTA BUTTON
================================= */
.cta-button {
  background: var(--utm-primary);
  color: var(--utm-text-invert);
  padding: 12px 20px;
  border-radius: var(--utm-radius);
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.cta-button:hover { background: var(--utm-primary-dark); }


/* ===============================
   PRICING PAGE
================================= */
.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.pricing-container h1 { 
  margin-bottom: 10px; 
  color: var(--utm-text-dark); 
}
.pricing-container p.subtitle { 
  color: var(--utm-text-light); 
  margin-bottom: 40px; 
}

.billing-toggle { margin-bottom: 30px; }
.billing-toggle button {
  padding: 10px 20px;
  border: 1px solid var(--utm-border);
  background: var(--utm-surface);
  cursor: pointer;
  margin: 0 5px;
  border-radius: var(--utm-radius-sm);
  font-weight: bold;
}
.billing-toggle button.active {
  background: var(--utm-primary);
  color: var(--utm-text-invert);
  border-color: var(--utm-primary);
}

.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.plan-card {
  background: var(--utm-surface);
  border: 1px solid var(--utm-border);
  border-radius: var(--utm-radius-lg);
  padding: 24px;
  flex: 1;
  min-width: 280px;
  max-width: 320px;
  box-shadow: var(--utm-shadow-sm);
  position: relative;
}
.plan-card.popular {
  border: 2px solid var(--utm-primary);
  box-shadow: var(--utm-shadow-md);
  background: var(--utm-primary-light);
}
.plan-card.popular::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--utm-primary);
  color: var(--utm-text-invert);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
  border-radius: var(--utm-radius-sm);
}

.plan-title { 
  font-size: 20px; 
  margin-bottom: 10px; 
  color: var(--utm-text-dark); 
}
.plan-price { 
  font-size: 26px; 
  font-weight: bold; 
  margin-bottom: 16px; 
}
.plan-price span { 
  font-size: 14px; 
  color: var(--utm-text-light); 
}

.feature-list { list-style: none; padding: 0; text-align: left; margin: 20px 0; }
.feature-list li { margin: 8px 0; font-size: 15px; }
.feature-list li::before { content: "✔️"; margin-right: 8px; color: var(--utm-success); }
.feature-list li.unavailable::before { content: "❌"; color: var(--utm-error); }
.feature-list li.unavailable { color: var(--utm-gray); }

@media (max-width: 768px) {
  .pricing-grid { flex-direction: column; align-items: center; }
}

.custom-contact { 
  margin-top: 40px; 
  font-size: 14px; 
  color: var(--utm-text-light); 
}
.custom-contact a { 
  color: var(--utm-primary); 
  text-decoration: underline; 
}


/* ===============================
   FEATURE COMPARISON TABLE
================================= */
.feature-compare { margin-top: 60px; }
.feature-compare h2 { 
  margin-bottom: 20px; 
  color: var(--utm-text-dark); 
}
.feature-table-wrapper { overflow-x: auto; }
.feature-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.feature-table thead { background: var(--utm-primary-light); }
.feature-table th, .feature-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--utm-border);
}
.feature-table td:first-child, 
.feature-table th:first-child { text-align: left; }


/* ===============================
   TOGGLE SWITCH
================================= */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { display: none; }
.slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--utm-gray-light);
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute; content: "";
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background-color: var(--utm-surface);
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider { background-color: var(--utm-primary); }
input:checked + .slider:before { transform: translateX(26px); }


/* ===============================
   DASHBOARD LAYOUT
================================= */
.utm-dashboard-wrapper {
  display: flex;
  flex-wrap: nowrap;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  background-color: var(--utm-bg);
  font-family: sans-serif;
}
.utm-content-area { 
  flex: 1; 
  padding: 2rem; 
  overflow-y: auto; 
}

@media (max-width: 768px) {
  .utm-dashboard-wrapper { flex-direction: column; }
  .utm-sidebar {
    position: fixed; top: 0; left: -250px;
    height: 100%; width: 250px;
    background-color: var(--utm-charcoal);
    padding-top: 3.5rem;
    transition: left 0.3s ease-in-out;
    z-index: 1000;
  }
  .utm-sidebar.open { left: 0; }
  .utm-content-area { padding: 1rem; }
  .utm-sidebar-toggle { display: block; }
}

/* Elementor fix */
.elementor-widget-shortcode > .elementor-widget-container { display: contents; }

/* Full-width enforcement */
.utm-dashboard-page,
.utm-dashboard-page * {
  max-width: 100vw !important;
  width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}


/* ===============================
   TOP NAV
================================= */
.utm-dashboard-topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--utm-surface);
  border-bottom: 1px solid var(--utm-border);
  padding: 10px 32px 10px 20px;
  font-family: sans-serif;
  flex-wrap: wrap;
}
.utm-dashboard-topnav a {
  color: var(--utm-primary);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--utm-radius-sm);
  font-weight: 500;
  transition: background-color 0.3s ease;
}
.utm-dashboard-topnav a:hover { background-color: var(--utm-primary-light); }

.utm-nav-left .utm-logo {
  font-weight: bold;
  font-size: 18px;
  color: var(--utm-primary);
  text-decoration: none;
}
.utm-nav-center .utm-promo, 
.utm-nav-center .utm-cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--utm-primary);
  white-space: nowrap;
}
.utm-cta {
  padding: 6px 12px;
  background-color: var(--utm-primary);
  color: white;
  border-radius: var(--utm-radius-sm);
  text-decoration: none;
  margin-left: 15px;
  font-size: 13px;
}
.utm-cta:hover { background-color: var(--utm-primary-dark); }

.utm-nav-right { 
  display: flex; 
  align-items: center; 
  gap: 16px; 
  position: relative; 
}

.utm-user-dropdown { position: relative; cursor: pointer; }
.utm-user-name { font-weight: bold; color: var(--utm-text); font-size: 14px; }

.utm-dropdown-menu {
  display: none;
  position: absolute;
  top: 110%; right: 0;
  background: var(--utm-surface);
  box-shadow: var(--utm-shadow-md);
  border: 1px solid var(--utm-border);
  border-radius: var(--utm-radius-sm);
  min-width: 140px;
  z-index: 999;
}
.utm-dropdown-menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: var(--utm-primary);
  font-size: 13px;
  border-bottom: 1px solid var(--utm-border);
}
.utm-dropdown-menu a:hover { background-color: var(--utm-bg); }
.utm-user-dropdown:hover .utm-dropdown-menu { display: block; }

@media (max-width: 768px) {
  .utm-dashboard-topnav { flex-direction: column; align-items: flex-start; }
  .utm-nav-right { flex-direction: column; align-items: flex-start; margin-top: 10px; gap: 10px; }
  .utm-nav-center { margin: 10px 0; }
}


/* ===============================
   RESOURCES LANDING
================================= */
.utm-resources-landing { 
  max-width: 800px; 
  margin: auto; 
  padding: 2rem; 
  font-family: system-ui, sans-serif; 
}
.utm-resource-block { 
  border-bottom: 1px solid var(--utm-border); 
  padding: 1.5rem 0; 
}
.utm-resource-block h2 { 
  font-size: 1.5rem; 
  margin-bottom: 0.5rem; 
}
.utm-resource-block p { 
  font-size: 1rem; 
  margin-bottom: 1rem; 
}
.utm-btn { 
  display: inline-block; 
  background-color: var(--utm-accent); 
  color: var(--utm-text-dark); 
  padding: 0.6rem 1.2rem; 
  border-radius: var(--utm-radius-sm); 
  text-decoration: none; 
}
.utm-btn:hover { background-color: var(--utm-accent-dark); }


/* ===============================
   TEMPLATE LIBRARY
================================= */
#utm-template-library { max-width: 1000px; margin: 0 auto; padding: 20px; }
.utm-filter-bar-wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.utm-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; flex-grow: 1; min-width: 0; }
.utm-template-actions-header { flex-shrink: 0; margin-left: auto; }
.utm-template-actions-header .cta-button { white-space: nowrap; }

.utm-template-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.utm-template-card {
  border: 1px solid var(--utm-border);
  padding: 15px;
  border-radius: var(--utm-radius-lg);
  background: var(--utm-surface);
  transition: box-shadow 0.2s;
}
.utm-template-card:hover { box-shadow: var(--utm-shadow-md); }
.utm-template-card h3 { margin-top: 0; color: var(--utm-primary); }
.utm-template-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.utm-template-actions .btn { padding: 6px 12px; border: none; cursor: pointer; font-size: 0.9rem; background: var(--utm-primary); color: white; border-radius: var(--utm-radius-sm); }


/* ===============================
   MODALS & TOASTS
================================= */
.utm-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.utm-modal {
  background: var(--utm-surface);
  color: var(--utm-text);
  border-radius: var(--utm-radius-lg);
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--utm-shadow-md);
  padding: 20px;
  border: 1px solid var(--utm-border);
  text-align: center;
}
.utm-modal-close {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 24px;
  color: var(--utm-primary);
  background: none;
  border: none;
  cursor: pointer;
}
.utm-modal-body { padding-top: 10px; }

#utm-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--utm-charcoal);
  color: var(--utm-text-invert);
  padding: 14px 20px;
  border-radius: var(--utm-radius);
  font-size: 15px;
  z-index: 10000;
  box-shadow: var(--utm-shadow-md);
  display: none;
  animation: fadeInOut 3s ease forwards;
}

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(20px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(20px); }
  
}


/* =======================================================
   UTM MANAGER – DASHBOARD + SIDEBAR + MODALS + NAV
   ALL CSS EXTRACTED FROM PHP + THEME VARIABLES APPLIED
   ======================================================= */

/* -------------------------------
   ORGANIZATION SWITCHER MODAL
--------------------------------- */
#utm-org-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.utm-org-modal-content {
  background: var(--utm-surface);
  width: 95%;
  max-width: 500px;
  margin: 80px auto;
  padding: 24px;
  border-radius: var(--utm-radius);
  box-shadow: var(--utm-shadow-md);
  position: relative;
  color: var(--utm-text);
}

.utm-org-modal-content h3 {
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--utm-text-dark);
}

.utm-org-list table {
  width: 100%;
  border-collapse: collapse;
}

.utm-org-list td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--utm-gray-light);
  font-size: 16px;
  color: var(--utm-text);
}

.utm-org-list td:last-child {
  text-align: right;
}

.utm-org-modal-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--utm-primary);
}

.utm-switch-org-modal-btn {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--utm-radius-sm);
  background: var(--utm-primary);
  color: var(--utm-text-invert);
  border: none;
  cursor: pointer;
}

.utm-switch-org-modal-btn:hover {
  background: var(--utm-primary-dark);
}

.utm-org-cancel-btn {
  background: var(--utm-gray-light);
  color: var(--utm-text);
  padding: 6px 14px;
  border: none;
  border-radius: var(--utm-radius-sm);
  font-size: 14px;
  cursor: pointer;
}

.utm-org-cancel-btn:hover {
  background: var(--utm-gray);
}


/* -------------------------------
   GLOBAL TOAST
--------------------------------- */
#utm-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--utm-charcoal);
  color: var(--utm-text-invert);
  padding: 14px 20px;
  border-radius: var(--utm-radius-sm);
  font-size: 15px;
  z-index: 10000;
  display: none;
  box-shadow: var(--utm-shadow-md);
  animation: fadeInOut 3s ease forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(20px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(20px); }
}


/* -------------------------------
   BETA BANNER
--------------------------------- */
.utm-beta-banner {
  background-color: var(--utm-warning);
  color: var(--utm-text-dark);
  text-align: center;
  font-size: 15px;
  padding: 10px;
  border-bottom: 1px solid var(--utm-gray-light);
  font-weight: 500;
}

.utm-beta-banner a {
  color: var(--utm-text-dark);
  font-weight: bold;
  text-decoration: underline;
}


/* -------------------------------
   DASHBOARD LAYOUT
--------------------------------- */
.utm-dashboard-wrapper {
  display: flex;
  min-height: 100vh;
  background: var(--utm-bg);
  overflow: hidden;
}

.utm-content-area {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .utm-content-area {
    padding: 1rem;
  }
}

/* -------------------------------
   SIDEBAR
--------------------------------- */
.utm-sidebar {
  width: 260px;
  background-color: var(--utm-surface);
  color: var(--utm-text);
  padding: 1.5rem;
  border-right: 1px solid var(--utm-gray-light);
}

.utm-sidebar .logo {
  font-size: 20px;
  font-weight: bold;
  color: var(--utm-primary);
  margin-bottom: 20px;
}

/* Base link style */
.utm-sidebar nav a,
.submenu-label,
.utm-sidebar .submenu a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 16px !important;
  margin: 6px 0;
  border-radius: var(--utm-radius-sm);
  font-size: 15px;
  color: var(--utm-text);
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
}

/* Hover + active */
.utm-sidebar nav a:hover,
.utm-sidebar nav a.active,
.utm-sidebar .submenu a:hover,
.utm-sidebar .submenu a.active {
  background-color: var(--utm-primary-light);
  border-left: 4px solid var(--utm-primary);
  color: var(--utm-primary);
}

/* Icons inherit color */
.utm-sidebar nav a i,
.submenu-label i {
  width: 18px;
  height: 18px;
  color: inherit;
}

/* Submenu handling */
.submenu-container {
  margin-bottom: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--utm-gray-light);
}

.submenu {
  display: none;
  padding-left: 1rem;
}

.submenu-container.open .submenu {
  display: block;
}

/* Section label */
.section-label {
  font-size: 13px;
  color: var(--utm-gray);
  margin: 20px 0 6px;
  padding-left: 10px;
  text-transform: uppercase;
}

/* External link indicator */
.external-link {
  position: relative;
  padding-right: 32px !important;
}

.external-link .ext {
  position: absolute;
  right: 10px;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--utm-accent-light);
  color: var(--utm-accent-dark);
}

/* Mobile */
@media (max-width: 768px) {
  .utm-sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    height: 100%;
    z-index: 1000;
    transition: left .25s ease;
  }
  .utm-sidebar.open {
    left: 0;
  }
  .utm-sidebar-toggle {
    display: block;
  }
}

.utm-sidebar-toggle {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 26px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--utm-primary);
}


/* -------------------------------
   TOP NAV
--------------------------------- */
.utm-dashboard-topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 28px;
  background: var(--utm-surface);
  border-bottom: 1px solid var(--utm-gray-light);
}

.utm-dashboard-topnav a {
  color: var(--utm-primary);
  text-decoration: none;
  padding: 6px 12px;
}

.utm-dashboard-topnav a:hover {
  background: var(--utm-primary-light);
  border-radius: var(--utm-radius-sm);
}

.utm-logo {
  font-size: 18px;
  font-weight: bold;
  color: var(--utm-primary);
}

.utm-cta {
  background: var(--utm-primary);
  color: var(--utm-text-invert);
  padding: 6px 12px;
  border-radius: var(--utm-radius-sm);
  text-decoration: none;
}

.utm-cta:hover {
  background: var(--utm-primary-dark);
}

.utm-user-dropdown { position: relative; cursor: pointer; }
.utm-user-name { font-weight: bold; color: var(--utm-text); }
.utm-org-label { color: var(--utm-gray-dark); }

.utm-dropdown-menu {
  display: none;
  position: absolute;
  top: 110%; right: 0;
  background: var(--utm-surface);
  border-radius: var(--utm-radius-sm);
  box-shadow: var(--utm-shadow-md);
  border: 1px solid var(--utm-gray-light);
  z-index: 50;
}

.utm-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--utm-gray-light);
}

.utm-user-dropdown:hover .utm-dropdown-menu {
  display: block;
}

.utm-beta-banner {
  background-color: var(--utm-primary-dark);
  color: var(--utm-accent-light);
  text-align: center;
  font-size: 15px;
  padding: 10px;
  font-weight: 500;
  border-bottom: 1px solid var(--utm-primary-light);
}
.utm-beta-banner a {
  color: var(--utm-accent-light);
  font-weight: 600;
  text-decoration: underline;
}
#utm-org-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  display: none;
}

.utm-org-modal-content {
  background: var(--utm-surface);
  width: 95%;
  max-width: 480px;
  margin: 80px auto;
  padding: 24px;
  border-radius: var(--utm-radius-lg);
  box-shadow: var(--utm-shadow-md);
  position: relative;
}

.utm-org-modal-content h3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--utm-text-dark);
}

.utm-org-list table {
  width: 100%;
  border-collapse: collapse;
}

.utm-org-list td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--utm-border);
  font-size: 16px;
  color: var(--utm-text);
}

.utm-org-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--utm-gray);
}

.utm-switch-org-modal-btn {
  background: var(--utm-primary);
  color: var(--utm-text-invert);
  border: none;
  padding: 6px 14px;
  border-radius: var(--utm-radius-sm);
  cursor: pointer;
  transition: background .2s;
}
.utm-switch-org-modal-btn:hover {
  background: var(--utm-primary-dark);
}

.utm-org-cancel-btn {
  background: var(--utm-gray-light);
  color: var(--utm-text-dark);
  padding: 6px 14px;
  border: none;
  border-radius: var(--utm-radius-sm);
  cursor: pointer;
  transition: background .2s;
}
.utm-org-cancel-btn:hover {
  background: var(--utm-gray);
  color: var(--utm-text-invert);
}
#utm-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--utm-charcoal);
  color: var(--utm-text-invert);
  padding: 14px 20px;
  border-radius: var(--utm-radius);
  font-size: 15px;
  box-shadow: var(--utm-shadow-md);
  z-index: 10000;
  display: none;
  animation: fadeInOut 3s ease forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(20px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(20px); }
}
.utm-sidebar {
  width: 260px;
  background: var(--utm-charcoal);
  color: var(--utm-text-invert);
  padding: 1.5rem;
}

/* Base link style */
.utm-sidebar nav a,
.utm-sidebar .submenu a,
.submenu-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--utm-spacing) 16px;
  margin: 4px 0;
  border-radius: var(--utm-radius-sm);
  color: var(--utm-text-invert);
  text-decoration: none;
  font-size: 15px;
  transition: all .18s ease;
  border-left: 4px solid transparent;
}

/* Hover */
.utm-sidebar nav a:hover,
.utm-sidebar .submenu a:hover,
.submenu-label:hover {
  background: rgba(255,255,255,0.09);
  color: var(--utm-accent-light);
  border-left-color: var(--utm-accent);
}

/* Active */
.utm-sidebar nav a.active,
.utm-sidebar .submenu a.active,
.submenu-label.active {
  background: rgba(255,255,255,0.18);
  color: var(--utm-accent-light);
  border-left-color: var(--utm-primary);
  font-weight: 600;
}

.utm-sidebar i {
  width: 18px;
  height: 18px;
  color: inherit;
}

/* Submenu */
.submenu {
  display: none;
  padding-left: 1rem;
}
.submenu-container.open .submenu {
  display: block;
}

/* Section label */
.section-label {
  font-size: 12px;
  color: var(--utm-text-light);
  opacity: 0.75;
  margin: 20px 0 8px;
  text-transform: uppercase;
}

/* Divider */
.sidebar-separator {
  height: 1px;
  background: rgba(255,255,255,0.3);
  margin: 14px 0 10px;
}

/* External link layout adjustments */
.utm-sidebar .external-link {
  position: relative;
  padding-right: 34px !important;
}
.utm-sidebar .external-link .ext {
  position: absolute;
  right: 10px;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}
.utm-sidebar .opens-new {
  margin-left: auto;
  font-size: 11px;
  opacity: 0;
  transition: opacity .15s;
}
.utm-sidebar .external-link:hover .opens-new {
  opacity: 0.7;
}

/* Badge (e.g. "New") */
.utm-sidebar .badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--utm-primary-light);
  color: var(--utm-primary-dark);
}
.utm-dashboard-topnav {
  background: var(--utm-primary);
  color: var(--utm-text-invert);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--utm-shadow-sm);
}

.utm-dashboard-topnav a {
  color: var(--utm-text-invert);
  text-decoration: none;
  margin: 0 10px;
}

.utm-dashboard-topnav .utm-cta {
  background: var(--utm-accent);
  padding: 6px 14px;
  border-radius: var(--utm-radius-sm);
  color: var(--utm-text-dark);
  font-weight: 600;
}
.utm-dashboard-topnav .utm-cta:hover {
  background: var(--utm-accent-dark);
}
/* =========================
   UTM BUTTON SYSTEM (v1)
   ========================= */

.utm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-size: 14px;
  font-weight: 600;

  padding: 8px 14px;
  border-radius: var(--utm-radius-sm);
  border: none;
  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;

  font-family: inherit;
}

/* Disabled state */
.utm-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


.utm-btn-primary {
  background: var(--utm-primary);
  color: var(--utm-text-invert);
}

.utm-btn-primary:hover {
  background: var(--utm-primary-dark);
}
.utm-btn-accent {
  background: var(--utm-accent);
  color: var(--utm-text-dark);
}

.utm-btn-accent:hover {
  background: var(--utm-accent-dark);
}
.utm-btn-outline {
  background: transparent;
  border: 2px solid var(--utm-primary);
  color: var(--utm-primary);
}

.utm-btn-outline:hover {
  background: var(--utm-primary-light);
  color: var(--utm-primary-dark);
  border-color: var(--utm-primary-dark);
}
.utm-btn-danger {
  background: var(--utm-error);
  color: var(--utm-text-invert);
}

.utm-btn-danger:hover {
  background: #b91c1c; /* darker red */
}
.utm-btn-subtle {
  background: var(--utm-gray-light);
  color: var(--utm-text-dark);
}

.utm-btn-subtle:hover {
  background: var(--utm-gray);
  color: var(--utm-text-invert);
}
.utm-btn i {
  width: 16px;
  height: 16px;
  color: inherit;
}