/* assets/css/style.css */
/* Cores definidas em light.css ou dark.css */

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  /* overflow: hidden; Removed to allow scrolling on mobile modals */
  /* App-like feel */
  transition:
    background-color 0.3s,
    color 0.3s;
}

a {
  text-decoration: none;
  color: inherit;
}

.app-container {
  display: flex;
  height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  transition: background-color 0.3s;
}

.logo {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.logo h2 {
  margin: 0;
  font-size: 1.25rem;
  background: linear-gradient(to right, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.menu {
  flex: 1;
  padding: 1rem;
}

.menu-label {
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0em;
  color: var(--text-secondary);
  margin: 1.5rem 0 0.5rem 0.75rem;
  font-weight: 600;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem;
  border-radius: 8px;
  color: var(--text-secondary);
  transition: all 0.2s;
  font-size: 0.9rem;
}

.menu-item:hover {
  background: rgba(56, 189, 248, 0.1);
  color: var(--accent);
}

.menu-item.active {
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent);
  font-weight: 700;
  padding-left: 1.2rem; /* Visual shift */
}

.menu-item i {
  width: 20px;
  text-align: center;
}

.logout {
  margin-top: auto;
  color: #ef4444;
}

.logout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.top-bar {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  background: var(--topbar-bg);
  position: relative; /* Ensure stacking context */
  z-index: 200; /* Above main-nav (z-index: 100) and content-wrapper */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-badge.no-connection {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

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

/* Cards & Elements */
.card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  transition: background-color 0.3s;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    background-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: 0.2s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* COLLAPSED STATE */
.app-container.collapsed .sidebar {
  width: 80px;
}

.app-container.collapsed .menu-label,
.app-container.collapsed .menu-item span {
  display: none;
}

.app-container.collapsed .menu-item {
  justify-content: center;
  padding: 0.75rem 0;
}

.app-container.collapsed .menu-item i {
  width: auto;
  /* Allow icon to take natural width or specific size if needed */
  font-size: 1.2rem;
}

.app-container.collapsed .logo {
  justify-content: center;
  padding: 0;
  gap: 0;
  position: relative;
  /* For possible absolute positioning of toggle if needed, or flex */
}

/* Adjust toggle button position in collapsed mode if necessary, 
   though flex-center in .logo handles it if they are siblings. 
   But usually, we want the logo to be the main thing and toggle maybe below or same line.
   In this design, logo_mobile.png is the logo. The toggle button needs to remain visible.
*/
.app-container.collapsed .logo img {
  /* If logo_mobile is small icon */
  max-width: 40px;
}

/* Fix toggle button alignment/spacing */
#sidebar-toggle {
  margin-left: auto;
  /* Push to right in expanded mode */
}

.app-container.collapsed #sidebar-toggle {
  margin-left: 0;
  position: static;
  display: block;
  margin-top: 5px;
}

/* Let's refine the collapsed logo area */
.app-container.collapsed .logo {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: auto;
  padding-top: 20px;
  padding-bottom: 5px;
}

.app-container.collapsed #sidebar-toggle {
  display: block;
  /* Ensure it's visible */
  margin: 0;
}

/* Tooltip Styles */
.custom-tooltip {
  position: fixed;
  background: #1e293b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  pointer-events: none;
  z-index: 9999;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  opacity: 0;
  animation: tooltipFadeIn 0.2s forwards;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-badge.active-connection {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge.no-connection {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* MOBILE RESPONSIVE STYLES */
@media (max-width: 768px) {
  .app-container {
    position: relative;
  }

  /* Sidebar Drawer */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 260px;
    z-index: 10000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
  }

  .app-container.mobile-open .sidebar {
    transform: translateX(0);
  }

  /* Mobile Backdrop Overlay */
  .app-container.mobile-open::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    backdrop-filter: blur(2px);
  }

  /* Mobile Toggle Button */
  .mobile-nav-toggle {
    display: block !important;
  }

  /* Content - Full Width */
  .main-content {
    margin-left: 0 !important;
    width: 100%;
    padding-top: var(--header-height);
  }

  /* Ensure collapsed logic doesn't break mobile */
  .app-container.collapsed .sidebar {
    width: 260px;
    transform: translateX(-100%);
  }

  /* Logic: if both collapsed and mobile-open? 
       mobile-open should win. CSS Specificity: .app-container.mobile-open .sidebar 
       vs .app-container.collapsed .sidebar.
       They have equal specificity (2 classes + 1 tag). Order matters.
       So define mobile-open AFTER collapsed logic inside media query.
    */

  .app-container.mobile-open .sidebar {
    transform: translateX(0) !important;
  }

  .top-bar {
    padding: 0 1rem;
    flex-wrap: nowrap;
    height: var(--header-height);
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    background: var(--topbar-bg);
  }

  .top-bar .user-info {
    display: block;
    font-size: 0.8rem;
  }

  .mobile-top-logo {
    display: block !important;
    height: 30px;
    width: auto;
    margin-right: auto;
  }

  .table-responsive {
    overflow-x: auto;
    display: block;
    width: 100%;
  }

  .login-card {
    margin: 1rem;
    width: auto;
  }
}

textarea#userMessage {
  font-size: 20px;
  line-height: 35px;
  min-height: 100px !important;
}

/* Menu Labels - Fieldset Look */
.menu-item-wrapper {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin: 15px 0 10px 0; /* Space for the label on top */
  padding: 2px;
}

.menu-item-wrapper .menu-item {
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
}

.menu-item-label {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0 8px;
  background: var(--bg-card); /* Matches background to 'cut' the border */
  white-space: nowrap;
  line-height: 18px;
  border-radius: 4px;
  z-index: 10;
}

/* DESTAQUE Styles */
.menu-item-wrapper.badge-destaque {
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.1);
}

.menu-item-wrapper.badge-destaque .menu-item-label {
  color: #f59e0b;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* NOVO Styles */
.menu-item-wrapper.badge-novo {
  border-color: #10b981;
}

.menu-item-wrapper.badge-novo .menu-item-label {
  color: #10b981;
  background: var(--bg-card);
}

/* Collapsed Sidebar Adjustment */
.app-container.collapsed .menu-item-wrapper {
  border: none;
  margin: 0;
  padding: 0;
}
.app-container.collapsed .menu-item-label {
  display: none;
}

/* ========================================= */
/* FLOATING CATEGORY MENU (Desktop vs Mobile) */
/* ========================================= */

.category-group {
  position: relative;
  cursor: pointer;
  /* No overflow handling or specific positioning here to allow JS Portal */
}

/* Base Category Children Style (Hidden by default) */
.category-children {
  display: none;
}

/* PORTAL STYLING (The wrapper injected into BODY) */
.floating-menu-portal {
  position: fixed;
  z-index: 99999; /* High Z-index to float above everything */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
  padding: 10px;
  display: none;
  min-width: 220px;
  animation: fadeInMenu 0.2s ease-out;
}

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

.floating-menu-portal .menu-item {
  font-size: 0.9rem;
  padding: 10px 20px;
}

/* DESKTOP STYLES (> 768px) */
@media (min-width: 769px) {
  /* Hover effects for the category toggle */
  .category-group:hover .category-toggle {
    background: rgba(56, 189, 248, 0.1);
    color: var(--accent);
  }

  /* Hide the caret on desktop as it doesn't expand down */
  .category-caret {
    display: none;
  }
}

/* MOBILE STYLES (<= 768px) */
@media (max-width: 768px) {
  /* Mobile Accordion Style - Override Portal Logic (JS safeguards this too) */
  .category-children {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: 15px; /* Indent children */
    display: none; /* Hidden by default */
  }

  /* JS Toggles this class */
  .category-children.show {
    display: block;
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .category-caret {
    display: inline-block; /* Show caret on mobile */
    transition: transform 0.3s;
  }
}

/* Coming Soon State */
.menu-item.coming-soon {
  opacity: 0.6;
  cursor: not-allowed;
  background: transparent !important;
}

.menu-item.coming-soon:hover {
  color: var(--text-secondary) !important;
  background: transparent !important;
}

.menu-item.coming-soon i {
  opacity: 0.5;
}

.library-controls {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px;
}
.control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-group {
  flex: 1;
  position: relative;
  min-width: 200px;
}
.search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-secondary);
}
.search-group input {
  padding-left: 35px;
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
}
.filter-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}
.filter-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.prompt-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  position: relative;
}
.prompt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border-color: var(--accent);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}
.card-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  word-break: break-word;
}
.fav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-secondary);
  transition: 0.2s;
}
.fav-btn:hover,
.fav-btn.active {
  color: #f59e0b;
  transform: scale(1.1);
}

.card-content {
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-family: monospace;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
}
.tag {
  font-size: 0.7rem;
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  padding: 2px 8px;
  border-radius: 4px;
}

.card-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
  margin-top: auto;
}

.action-btn {
  flex: 1;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  transition: 0.2s;
}
.action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.delete-btn:hover {
  border-color: #ef4444;
}

/* FAQ Accordion Styles */
.faq-section {
  max-width: 800px;
  margin: 0 auto 2rem auto;
}

.faq-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item:hover {
  border-color: var(--accent);
}

.faq-question {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-primary);
  background: transparent;
  user-select: none;
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.02);
}

.faq-question i {
  transition: transform 0.3s;
  color: var(--text-secondary);
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: rgba(0, 0, 0, 0.1);
}

.faq-answer-content {
  padding: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.6;
  border-top: 1px solid var(--border-color);
}

.faq-answer-content a {
  color: var(--accent);
  text-decoration: underline;
}

.faq-video-container {
  margin-top: 1rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Modals */
.custom-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 600px;
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.modal-header,
.modal-footer {
  padding: 20px;
}
.modal-header {
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  margin: 0;
}
.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
}
.modal-footer {
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.empty-state-icon {
  font-size: 3rem;
  color: var(--border-color);
  margin-bottom: 20px;
}

.history-item {
  background: rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
}
.history-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.library-pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.page-link {
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
}
.page-link.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Responsive */
@media (max-width: 768px) {
  .library-controls {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Support Page Layout */
.support-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.support-container .card.support-card {
  flex: 1; /* Form takes available space, but typically smaller */
  max-width: 400px; /* Limit form width on desktop */
  position: sticky; /* Keep form visible while scrolling FAQ if long */
  top: calc(var(--header-height) + 2rem);
  margin-bottom: 0;
}

.support-container .faq-section {
  flex: 2; /* FAQ takes more space */
  max-width: none; /* Reset max-width from previous unique block */
  margin: 0; /* Reset margin */
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .support-container {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  .support-container .card.support-card {
    max-width: none; /* Full width on mobile */
    order: 1; /* Form first (top) */
    position: static; /* Remove sticky on mobile */
  }

  .support-container .faq-section {
    order: 2; /* FAQ second (bottom) */
  }
}

/* Tutorial Toggles (Connections Page) */
.tutorial-toggles {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.tutorial-btn {
  flex: 1;
  min-width: 250px;
  max-width: 400px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s;
  user-select: none;
  color: var(--text-secondary);
}

.tutorial-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.tutorial-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 5px 20px rgba(56, 189, 248, 0.3);
}

.tutorial-content {
  display: none;
  animation: fadeIn 0.4s ease;
}

.tutorial-content.active {
  display: block;
}

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

.video-wrapper {
  flex: 1;
  min-width: 300px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

/* Pulse Animation */
@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
    border-color: var(--accent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
    border-color: var(--accent);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
    border-color: var(--accent);
    transform: scale(1);
  }
}

.pulse-animation {
  animation: pulse-border 2s infinite;
}

/* Maintenance Notification Bar */
.maintenance-notification-bar {
  background-color: #ef4444;
  color: #ffffff;
  text-align: center;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 100;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .maintenance-notification-bar {
    font-size: 0.85rem;
    padding: 10px;
  }
}