/* ==========================================================================
   Pulse Portal — Front Theme for Bootstrap 5.3
   Custom CSS layer that sits ON TOP of Bootstrap 5.3 CDN.
   ==========================================================================
   Table of Contents:
   1.  Root Variables / CSS Custom Properties
   2.  Typography
   3.  Navbar / Header
   4.  Hero Search Section
   5.  Action Cards
   6.  Ticket Status Badges
   7.  Ticket Timeline
   8.  Service Catalog Cards
   9.  Announcement Banner
   10. Approval Cards
   11. Asset Cards
   12. Help Center
   13. Login Page
   14. Soft Buttons
   15. Avatar Component
   16. Page Headers
   17. Empty States
   18. Utilities
   19. Tables
   20. Forms
   21. Sidebar Account
   22. Footer
   ========================================================================== */


/* ==========================================================================
   1. ROOT VARIABLES / CSS CUSTOM PROPERTIES
   Override these per-customer for easy white-label branding.
   ========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --pulse-primary:          #19C4C4;
  --pulse-primary-rgb:      25, 196, 196;
  --pulse-primary-dark:     #111827;
  --pulse-primary-dark-rgb: 17, 24, 39;
  --pulse-primary-light:    #E8FBFB;

  --pulse-secondary:        #77838f;
  --pulse-secondary-rgb:    119, 131, 143;

  --pulse-success:          #00c9a7;
  --pulse-success-rgb:      0, 201, 167;

  --pulse-info:             #00dffc;
  --pulse-info-rgb:         0, 223, 252;

  --pulse-warning:          #ffc107;
  --pulse-warning-rgb:      255, 193, 7;

  --pulse-danger:           #de4437;
  --pulse-danger-rgb:       222, 68, 55;

  --pulse-dark:             #1e2022;
  --pulse-dark-rgb:         30, 32, 34;

  --pulse-white:            #fff;
  --pulse-white-rgb:        255, 255, 255;

  /* ---- Grays ---- */
  --pulse-gray-100:         #f9fafc;
  --pulse-gray-200:         #f8fafd;
  --pulse-gray-300:         #e7eaf3;
  --pulse-gray-400:         #bdc5d1;
  --pulse-gray-500:         #97a4af;
  --pulse-gray-600:         #8c98a4;
  --pulse-gray-700:         #77838f;
  --pulse-gray-900:         #1e2022;

  /* ---- Surfaces ---- */
  --pulse-body-bg:          #f8fafd;
  --pulse-card-bg:          #fff;
  --pulse-card-border:      rgba(231, 234, 243, .7);
  --pulse-card-shadow:      0 .375rem .75rem rgba(140, 152, 164, .075);
  --pulse-card-shadow-lg:   0 .75rem 1.5rem rgba(140, 152, 164, .175);

  /* ---- Typography ---- */
  --pulse-font-family:      'Open Sans', sans-serif;
  --pulse-font-size-base:   .9375rem;    /* 15px */
  --pulse-line-height-base: 1.6;

  --pulse-heading-color:    var(--pulse-dark);
  --pulse-body-color:       #677788;
  --pulse-link-color:       var(--pulse-primary);
  --pulse-link-hover-color: var(--pulse-primary-dark);

  /* ---- Spacing ---- */
  --pulse-section-padding-y: 4rem;

  /* ---- Border radius ---- */
  --pulse-border-radius:    .3125rem;   /* 5px */
  --pulse-border-radius-lg: .5rem;
  --pulse-border-radius-xl: .75rem;
  --pulse-border-radius-pill: 50rem;

  /* ---- Transitions ---- */
  --pulse-transition-timing: .3s ease;
}


/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

body {
  font-family: var(--pulse-font-family);
  font-size: var(--pulse-font-size-base);
  line-height: var(--pulse-line-height-base);
  color: var(--pulse-body-color);
  background-color: var(--pulse-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--pulse-heading-color);
  font-weight: 600;
  letter-spacing: -.02em;
}

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }

a {
  color: var(--pulse-link-color);
  text-decoration: none;
  transition: color var(--pulse-transition-timing);
}

a:hover {
  color: var(--pulse-link-hover-color);
  text-decoration: none;
}

/* Weight utilities */
.fw-300, .font-weight-light   { font-weight: 300 !important; }
.fw-500, .font-weight-medium  { font-weight: 500 !important; }
.fw-600, .font-weight-semi-bold { font-weight: 600 !important; }
.fw-700, .font-weight-bold    { font-weight: 700 !important; }

/* Display sizes for hero text */
.display-4 { letter-spacing: -.03em; }
.display-5 { letter-spacing: -.025em; }

p.lead {
  color: var(--pulse-gray-600);
  font-weight: 400;
}


/* ==========================================================================
   3. NAVBAR / HEADER
   ========================================================================== */

.navbar-portal {
  background-color: var(--pulse-white);
  box-shadow: 0 1px 10px rgba(140, 152, 164, .125);
  padding-top: .5rem;
  padding-bottom: .5rem;
  z-index: 1030;
  transition: box-shadow var(--pulse-transition-timing);
}

.navbar-portal .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  color: var(--pulse-heading-color);
}

.navbar-portal .navbar-brand:hover,
.navbar-portal .navbar-brand:focus {
  color: var(--pulse-heading-color);
}

.navbar-portal .navbar-brand img {
  max-height: 36px;
  width: auto;
}

/* Nav links */
.navbar-portal .nav-link {
  color: var(--pulse-gray-700);
  font-size: .875rem;
  font-weight: 500;
  padding: .75rem 1rem;
  position: relative;
  transition: color var(--pulse-transition-timing);
}

.navbar-portal .nav-link:hover {
  color: var(--pulse-primary);
}

.navbar-portal .nav-link.active {
  color: var(--pulse-primary);
}

.navbar-portal .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -.5rem;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background-color: var(--pulse-primary);
  border-radius: var(--pulse-border-radius-pill);
}

/* "Novo Ticket" CTA button in navbar */
.navbar-portal .btn-novo-ticket {
  background-color: var(--pulse-primary);
  color: var(--pulse-white);
  border: none;
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem 1.25rem;
  border-radius: var(--pulse-border-radius);
  transition: background-color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.navbar-portal .btn-novo-ticket:hover {
  background-color: var(--pulse-primary-dark);
  box-shadow: 0 4px 11px rgba(var(--pulse-primary-rgb), .35);
  color: var(--pulse-white);
}

/* User avatar dropdown */
.navbar-portal .nav-avatar {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  color: var(--pulse-heading-color);
}

.navbar-portal .nav-avatar:hover,
.navbar-portal .nav-avatar:focus {
  color: var(--pulse-primary);
}

.navbar-portal .nav-avatar-btn {
  box-shadow: none !important;
}

.navbar-portal .nav-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pulse-gray-300);
}

.navbar-portal .nav-avatar .dropdown-toggle::after {
  margin-left: .35rem;
}

/* Dropdown menus */
.navbar-portal .dropdown-menu {
  border: none;
  box-shadow: 0 .5rem 1.5rem rgba(140, 152, 164, .175);
  border-radius: var(--pulse-border-radius-lg);
  padding: .5rem 0;
  min-width: 14rem;
  animation: navDropdownFadeIn .25s ease;
}

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

.navbar-portal .dropdown-item {
  font-size: .875rem;
  padding: .5rem 1.25rem;
  color: var(--pulse-gray-700);
  transition: background-color .15s ease, color .15s ease;
}

.navbar-portal .dropdown-item:hover {
  background-color: rgba(var(--pulse-primary-rgb), .06);
  color: var(--pulse-primary);
}

.navbar-portal .dropdown-item.active,
.navbar-portal .dropdown-item:active {
  background-color: rgba(var(--pulse-primary-rgb), .1);
  color: var(--pulse-primary);
}

.navbar-portal .dropdown-divider {
  border-color: var(--pulse-gray-300);
  opacity: .6;
}

/* Mobile hamburger */
.navbar-portal .navbar-toggler {
  border: none;
  padding: .25rem .5rem;
  font-size: 1.25rem;
  color: var(--pulse-gray-700);
}

.navbar-portal .navbar-toggler:focus {
  box-shadow: none;
}

/* Responsive: stack nav on mobile */
@media (max-width: 991.98px) {
  .navbar-portal .navbar-collapse {
    background-color: var(--pulse-white);
    padding: 1rem 0;
    margin-top: .5rem;
    border-top: 1px solid var(--pulse-gray-300);
  }

  .navbar-portal .nav-link.active::after {
    display: none;
  }

  .navbar-portal .nav-link.active {
    background-color: rgba(var(--pulse-primary-rgb), .06);
    border-radius: var(--pulse-border-radius);
  }

  .navbar-portal .btn-novo-ticket {
    width: 100%;
    margin-top: .5rem;
  }
}


/* ==========================================================================
   4. HERO SEARCH SECTION
   ========================================================================== */

.hero-search {
  position: relative;
  background: linear-gradient(150deg, var(--pulse-primary) 0%, var(--pulse-primary-dark) 100%);
  padding: 6rem 0 8rem;
  overflow: hidden;
  color: var(--pulse-white);
}

.hero-search::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}

.hero-search .hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--pulse-white);
  letter-spacing: -.03em;
  margin-bottom: 1.5rem;
  position: relative;
}

.hero-search .hero-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 2rem;
  font-weight: 400;
  position: relative;
}

/* Large pill search */
.hero-search-form {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.hero-search-input {
  width: 100%;
  padding: 1rem 3.5rem 1rem 1.75rem;
  font-size: 1.0625rem;
  border: none;
  border-radius: var(--pulse-border-radius-pill);
  background-color: var(--pulse-white);
  color: var(--pulse-dark);
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .15);
  transition: box-shadow var(--pulse-transition-timing);
}

.hero-search-input::placeholder {
  color: var(--pulse-gray-500);
}

.hero-search-input:focus {
  outline: none;
  box-shadow: 0 .5rem 2.5rem rgba(0, 0, 0, .2),
              0 0 0 .2rem rgba(var(--pulse-primary-rgb), .25);
}

.hero-search-btn {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: var(--pulse-primary);
  color: var(--pulse-white);
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--pulse-transition-timing),
              transform var(--pulse-transition-timing);
}

.hero-search-btn:hover {
  background-color: var(--pulse-primary-dark);
  transform: translateY(-50%) scale(1.05);
}

/* Search suggestion tags */
.hero-search-tags {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  position: relative;
}

.hero-search-tags .tag {
  display: inline-block;
  padding: .3rem .85rem;
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  background-color: rgba(255, 255, 255, .15);
  border-radius: var(--pulse-border-radius-pill);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.search-preview-dropdown {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    box-shadow: 0 14px 30px rgba(18, 38, 63, .12);
    overflow: hidden;
}

.search-preview-item {
    display: block;
    padding: .85rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.search-preview-item:last-child {
    border-bottom: 0;
}

.search-preview-item:hover {
    background: #f8fafd;
}

.search-preview-type {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pulse-primary, #19C4C4);
}

.search-preview-title {
    color: #1e2022;
    font-weight: 600;
    font-size: .9rem;
    margin-top: .1rem;
}

.search-preview-meta,
.search-preview-empty {
    color: #677788;
    font-size: .76rem;
    margin-top: .2rem;
}

.search-preview-empty {
    padding: .9rem 1rem;
}

.hero-search-tags .tag:hover {
  background-color: rgba(255, 255, 255, .3);
  color: var(--pulse-white);
}

/* Wave SVG divider at bottom */
.hero-search .wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.hero-search .wave-divider svg {
  display: block;
  width: 100%;
  height: 80px;
}

.hero-search .wave-divider svg path {
  fill: var(--pulse-body-bg);
}

@media (max-width: 767.98px) {
  .hero-search {
    padding: 4rem 0 6rem;
  }

  .hero-search .hero-title {
    font-size: 1.75rem;
  }

  .hero-search-input {
    padding: .875rem 3rem .875rem 1.25rem;
    font-size: .9375rem;
  }
}


/* ==========================================================================
   5. ACTION CARDS
   ========================================================================== */

.action-cards {
  margin-top: -3rem;
  position: relative;
  z-index: 10;
}

.action-card {
  background-color: var(--pulse-card-bg);
  border: 1px solid var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
  cursor: pointer;
  height: 100%;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--pulse-card-shadow-lg);
}

.action-card .action-card-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.action-card .action-card-icon.icon-primary {
  background-color: rgba(var(--pulse-primary-rgb), .1);
  color: var(--pulse-primary);
}

.action-card .action-card-icon.icon-success {
  background-color: rgba(var(--pulse-success-rgb), .1);
  color: var(--pulse-success);
}

.action-card .action-card-icon.icon-warning {
  background-color: rgba(var(--pulse-warning-rgb), .1);
  color: var(--pulse-warning);
}

.action-card .action-card-icon.icon-info {
  background-color: rgba(var(--pulse-info-rgb), .1);
  color: var(--pulse-info);
}

.action-card .action-card-icon.icon-danger {
  background-color: rgba(var(--pulse-danger-rgb), .1);
  color: var(--pulse-danger);
}

.action-card .action-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .5rem;
}

.action-card .action-card-desc {
  font-size: .875rem;
  color: var(--pulse-gray-600);
  margin-bottom: 0;
  line-height: 1.5;
}

/* Responsive grid: 4 -> 2 -> 1 */
@media (max-width: 991.98px) and (min-width: 576px) {
  .action-cards .col-action {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  .action-cards .col-action {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ==========================================================================
   6. TICKET STATUS BADGES
   ========================================================================== */

/* --- Status badges --- */
.badge-status-open {
  background-color: rgba(var(--pulse-primary-rgb), .12);
  color: var(--pulse-primary);
  font-weight: 600;
  font-size: .75rem;
  padding: .35em .75em;
  border-radius: var(--pulse-border-radius);
}

.badge-status-pending {
  background-color: rgba(var(--pulse-warning-rgb), .15);
  color: #d39e00;
  font-weight: 600;
  font-size: .75rem;
  padding: .35em .75em;
  border-radius: var(--pulse-border-radius);
}

.badge-status-in-progress {
  background-color: rgba(var(--pulse-info-rgb), .12);
  color: #00b8d4;
  font-weight: 600;
  font-size: .75rem;
  padding: .35em .75em;
  border-radius: var(--pulse-border-radius);
}

.badge-status-resolved {
  background-color: rgba(var(--pulse-success-rgb), .12);
  color: var(--pulse-success);
  font-weight: 600;
  font-size: .75rem;
  padding: .35em .75em;
  border-radius: var(--pulse-border-radius);
}

.badge-status-closed {
  background-color: rgba(var(--pulse-secondary-rgb), .12);
  color: var(--pulse-secondary);
  font-weight: 600;
  font-size: .75rem;
  padding: .35em .75em;
  border-radius: var(--pulse-border-radius);
}

/* --- Priority badges --- */
.badge-priority-low {
  background-color: rgba(var(--pulse-success-rgb), .1);
  color: var(--pulse-success);
  font-weight: 600;
  font-size: .7rem;
  padding: .3em .65em;
  border-radius: var(--pulse-border-radius);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.badge-priority-medium {
  background-color: rgba(var(--pulse-warning-rgb), .12);
  color: #d39e00;
  font-weight: 600;
  font-size: .7rem;
  padding: .3em .65em;
  border-radius: var(--pulse-border-radius);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.badge-priority-high {
  background-color: rgba(255, 152, 0, .12);
  color: #e68900;
  font-weight: 600;
  font-size: .7rem;
  padding: .3em .65em;
  border-radius: var(--pulse-border-radius);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.badge-priority-critical {
  background-color: rgba(var(--pulse-danger-rgb), .1);
  color: var(--pulse-danger);
  font-weight: 600;
  font-size: .7rem;
  padding: .3em .65em;
  border-radius: var(--pulse-border-radius);
  text-transform: uppercase;
  letter-spacing: .03em;
}


/* ==========================================================================
   7. TICKET TIMELINE
   ========================================================================== */

.ticket-timeline {
  position: relative;
  padding-left: 2rem;
}

.ticket-detail-layout {
  --bs-gutter-x: 1.25rem;
}

.ticket-timeline .timeline-message {
  position: relative;
  margin-bottom: 1rem;
}

.ticket-timeline .timeline-message:last-child {
  margin-bottom: 0;
}

.ticket-timeline .timeline-message::before {
  content: '';
  position: absolute;
  left: -1.45rem;
  top: .7rem;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--pulse-white);
  border: 2px solid rgba(var(--pulse-primary-rgb), .9);
  box-shadow: 0 0 0 4px rgba(var(--pulse-primary-rgb), .12);
  z-index: 1;
}

.ticket-timeline .timeline-message .card {
  margin-bottom: 0;
  border: 1px solid rgba(var(--pulse-primary-rgb), .08);
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.ticket-timeline .timeline-system-message {
  margin: .75rem 0;
  padding-left: .4rem;
}

.portal-ticket-message-body {
  color: var(--pulse-heading-color);
  font-family: var(--pulse-font-family);
  font-size: .9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.portal-ticket-message-body :where(p, div, span, font, table, td, th, li, blockquote, strong, em, b, i, u) {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.portal-ticket-message-body > *:first-child {
  margin-top: 0;
}

.portal-ticket-message-body > *:last-child {
  margin-bottom: 0;
}

.portal-ticket-message-body p,
.portal-ticket-message-body ul,
.portal-ticket-message-body ol,
.portal-ticket-message-body blockquote {
  margin-bottom: .9rem;
}

.portal-ticket-message-body img {
  max-width: 100%;
  height: auto;
}

.portal-ticket-message-body table {
  max-width: 100%;
}

.portal-ticket-signature {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--pulse-gray-300);
  white-space: pre-line;
}

/* Vertical left line */
.ticket-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.175rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(var(--pulse-primary-rgb), .22) 0%, rgba(var(--pulse-primary-rgb), .12) 100%);
}

.portal-ticket-message-card .card-header {
  border-bottom-color: rgba(var(--pulse-primary-rgb), .08);
}

.portal-reply-card {
  border: 1px solid rgba(var(--pulse-primary-rgb), .12);
  border-radius: 1rem;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}

.portal-reply-card .card-header {
  border-bottom-color: rgba(var(--pulse-primary-rgb), .08);
  background: linear-gradient(180deg, rgba(var(--pulse-primary-rgb), .05) 0%, rgba(255, 255, 255, .98) 100%) !important;
}

.portal-reply-card textarea.form-control {
  min-height: 9rem;
  border-color: rgba(var(--pulse-primary-rgb), .16);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.portal-reply-card textarea.form-control:focus {
  border-color: rgba(var(--pulse-primary-rgb), .45);
  box-shadow: 0 0 0 .18rem rgba(var(--pulse-primary-rgb), .12);
}

.ticket-detail-sidebar-col {
  position: relative;
}

.portal-ticket-sidebar-card {
  border: 1px solid rgba(var(--pulse-primary-rgb), .1);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(var(--pulse-primary-rgb), .03) 0%, rgba(255, 255, 255, .98) 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.portal-ticket-sidebar-card .card-header {
  border-bottom-color: rgba(var(--pulse-primary-rgb), .08);
}

@media (min-width: 992px) {
  .portal-ticket-sidebar-card {
    position: sticky;
    top: 6.5rem;
  }
}

/* Single timeline entry */
.timeline-entry {
  position: relative;
  padding-bottom: 1.5rem;
}

.timeline-entry:last-child {
  padding-bottom: 0;
}

/* Dot on timeline */
.timeline-entry::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: .25rem;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: var(--pulse-primary);
  border: 2px solid var(--pulse-white);
  box-shadow: 0 0 0 2px var(--pulse-primary);
  z-index: 1;
}

/* Message bubble */
.timeline-bubble {
  background-color: var(--pulse-card-bg);
  border: 1px solid var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  padding: 1rem 1.25rem;
  margin-left: .75rem;
  position: relative;
  box-shadow: var(--pulse-card-shadow);
}

/* Alternating background for readability */
.timeline-entry:nth-child(even) .timeline-bubble {
  background-color: var(--pulse-gray-100);
}

/* Bubble header: author + timestamp */
.timeline-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.timeline-bubble-author {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.timeline-bubble-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.timeline-bubble-author .author-name {
  font-weight: 600;
  color: var(--pulse-heading-color);
  font-size: .875rem;
}

.timeline-bubble-author .author-role {
  font-size: .75rem;
  color: var(--pulse-gray-600);
}

.timeline-bubble-time {
  font-size: .75rem;
  color: var(--pulse-gray-500);
  white-space: nowrap;
}

.timeline-bubble-body {
  font-size: .9rem;
  color: var(--pulse-body-color);
  line-height: 1.65;
}

.timeline-bubble-body p:last-child {
  margin-bottom: 0;
}

/* Attachments inside bubble */
.timeline-bubble-attachments {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--pulse-gray-300);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.timeline-attachment {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  font-size: .8rem;
  color: var(--pulse-primary);
  background-color: rgba(var(--pulse-primary-rgb), .06);
  border-radius: var(--pulse-border-radius);
  text-decoration: none;
  transition: background-color .2s ease;
}

.timeline-attachment:hover {
  background-color: rgba(var(--pulse-primary-rgb), .12);
  color: var(--pulse-primary-dark);
}

/* System messages (status changes) */
.timeline-entry-system {
  padding-left: 0;
  text-align: center;
}

.timeline-entry-system::before {
  width: .5rem;
  height: .5rem;
  background-color: var(--pulse-gray-400);
  box-shadow: 0 0 0 2px var(--pulse-gray-400);
}

.timeline-system-msg {
  display: inline-block;
  font-size: .8rem;
  color: var(--pulse-gray-600);
  background-color: var(--pulse-gray-200);
  padding: .3rem 1rem;
  border-radius: var(--pulse-border-radius-pill);
  margin-left: .75rem;
}

.timeline-system-msg strong {
  color: var(--pulse-heading-color);
}

.timeline-system-msg .system-time {
  color: var(--pulse-gray-500);
  font-size: .75rem;
  margin-left: .5rem;
}


/* ==========================================================================
   8. SERVICE CATALOG CARDS
   ========================================================================== */

.service-card {
  background-color: var(--pulse-card-bg);
  border: 1px solid var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  overflow: hidden;
  transition: transform var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pulse-card-shadow-lg);
}

/* Colored icon area on top */
.service-card-icon-area {
  padding: 2rem;
  text-align: center;
  position: relative;
}

.service-card-icon-area.bg-primary-soft {
  background-color: rgba(var(--pulse-primary-rgb), .08);
}

.service-card-icon-area.bg-success-soft {
  background-color: rgba(var(--pulse-success-rgb), .08);
}

.service-card-icon-area.bg-warning-soft {
  background-color: rgba(var(--pulse-warning-rgb), .08);
}

.service-card-icon-area.bg-info-soft {
  background-color: rgba(var(--pulse-info-rgb), .08);
}

.service-card-icon-area.bg-danger-soft {
  background-color: rgba(var(--pulse-danger-rgb), .08);
}

.service-card-icon-area i,
.service-card-icon-area .service-icon {
  font-size: 2.5rem;
}

/* Category ribbon */
.service-card-category {
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .2rem .6rem;
  border-radius: var(--pulse-border-radius);
  background-color: rgba(255, 255, 255, .85);
  color: var(--pulse-gray-700);
}

.service-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .5rem;
}

.service-card-desc {
  font-size: .875rem;
  color: var(--pulse-gray-600);
  line-height: 1.5;
  flex: 1;
}

/* Bottom section: estimated time + cost */
.service-card-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--pulse-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.service-card-meta {
  display: flex;
  gap: 1rem;
  font-size: .8rem;
  color: var(--pulse-gray-600);
}

.service-card-meta i {
  margin-right: .25rem;
  color: var(--pulse-gray-500);
}

.service-card-footer .btn-pedir {
  font-size: .8125rem;
  font-weight: 600;
  padding: .4rem 1rem;
  border-radius: var(--pulse-border-radius);
  background-color: var(--pulse-primary);
  color: var(--pulse-white);
  border: none;
  white-space: nowrap;
  transition: background-color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.service-card-footer .btn-pedir:hover {
  background-color: var(--pulse-primary-dark);
  box-shadow: 0 4px 11px rgba(var(--pulse-primary-rgb), .35);
}


/* ==========================================================================
   9. ANNOUNCEMENT BANNER
   ========================================================================== */

.announcement-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--pulse-border-radius-lg);
  margin-bottom: 1.5rem;
  position: relative;
  font-size: .9rem;
}

.announcement-banner .announcement-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.announcement-banner .announcement-body {
  flex: 1;
}

.announcement-banner .announcement-title {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .25rem;
}

.announcement-banner .announcement-text {
  font-size: .85rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.announcement-banner .btn-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-size: .65rem;
  opacity: .5;
}

.announcement-banner .btn-close:hover {
  opacity: 1;
}

/* Severity: info */
.announcement-banner-info {
  background-color: rgba(var(--pulse-primary-rgb), .08);
  border: 1px solid rgba(var(--pulse-primary-rgb), .15);
  color: var(--pulse-dark);
}

.announcement-banner-info .announcement-icon {
  color: var(--pulse-primary);
}

.announcement-banner-info .announcement-title {
  color: var(--pulse-primary);
}

/* Severity: warning */
.announcement-banner-warning {
  background-color: rgba(var(--pulse-warning-rgb), .1);
  border: 1px solid rgba(var(--pulse-warning-rgb), .2);
  color: var(--pulse-dark);
}

.announcement-banner-warning .announcement-icon {
  color: var(--pulse-warning);
}

.announcement-banner-warning .announcement-title {
  color: #d39e00;
}

/* Severity: critical */
.announcement-banner-critical {
  background-color: rgba(var(--pulse-danger-rgb), .08);
  border: 1px solid rgba(var(--pulse-danger-rgb), .15);
  color: var(--pulse-dark);
}

.announcement-banner-critical .announcement-icon {
  color: var(--pulse-danger);
}

.announcement-banner-critical .announcement-title {
  color: var(--pulse-danger);
}

/* Severity: maintenance */
.announcement-banner-maintenance {
  background-color: rgba(var(--pulse-secondary-rgb), .08);
  border: 1px solid rgba(var(--pulse-secondary-rgb), .15);
  color: var(--pulse-dark);
}

.announcement-banner-maintenance .announcement-icon {
  color: var(--pulse-secondary);
}

.announcement-banner-maintenance .announcement-title {
  color: var(--pulse-gray-700);
}

/* Full-width variant */
.announcement-banner-full {
  border-radius: 0;
  margin-bottom: 0;
}


/* ==========================================================================
   10. APPROVAL CARDS
   ========================================================================== */

.approval-card {
  background-color: var(--pulse-card-bg);
  border: 1px solid var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--pulse-transition-timing);
}

.approval-card:hover {
  box-shadow: var(--pulse-card-shadow);
}

.approval-card-header {
  padding: 1.25rem 1.25rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.approval-card-summary {
  flex: 1;
}

.approval-card-summary .approval-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .25rem;
}

.approval-card-summary .approval-desc {
  font-size: .85rem;
  color: var(--pulse-gray-600);
  margin-bottom: 0;
}

.approval-card-status {
  flex-shrink: 0;
}

/* Requester info */
.approval-card-requester {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .85rem;
  color: var(--pulse-gray-600);
}

.approval-card-requester img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.approval-card-requester .requester-name {
  font-weight: 600;
  color: var(--pulse-heading-color);
}

.approval-card-requester .requester-date {
  margin-left: auto;
  font-size: .8rem;
  color: var(--pulse-gray-500);
}

/* Action buttons */
.approval-card-actions {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--pulse-card-border);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.approval-card-actions .btn-approve {
  background-color: var(--pulse-success);
  color: var(--pulse-white);
  border: none;
  font-size: .8125rem;
  font-weight: 600;
  padding: .45rem 1.25rem;
  border-radius: var(--pulse-border-radius);
  transition: background-color .2s ease, box-shadow .2s ease;
}

.approval-card-actions .btn-approve:hover {
  background-color: #00b396;
  box-shadow: 0 4px 11px rgba(var(--pulse-success-rgb), .35);
}

.approval-card-actions .btn-reject {
  background-color: rgba(var(--pulse-danger-rgb), .1);
  color: var(--pulse-danger);
  border: none;
  font-size: .8125rem;
  font-weight: 600;
  padding: .45rem 1.25rem;
  border-radius: var(--pulse-border-radius);
  transition: background-color .2s ease, color .2s ease;
}

.approval-card-actions .btn-reject:hover {
  background-color: var(--pulse-danger);
  color: var(--pulse-white);
}

/* Expandable comment area */
.approval-card-comment {
  padding: 0 1.25rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
}

.approval-card-comment.open {
  max-height: 200px;
  padding: .75rem 1.25rem 1rem;
}

.approval-card-comment textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--pulse-gray-300);
  border-radius: var(--pulse-border-radius);
  padding: .5rem .75rem;
  font-size: .85rem;
  resize: vertical;
  color: var(--pulse-dark);
  transition: border-color .2s ease;
}

.approval-card-comment textarea:focus {
  outline: none;
  border-color: var(--pulse-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--pulse-primary-rgb), .15);
}

.approval-card-actions .btn-toggle-comment {
  margin-left: auto;
  font-size: .8rem;
  color: var(--pulse-gray-600);
  background: none;
  border: none;
  padding: .25rem .5rem;
  cursor: pointer;
  transition: color .2s ease;
}

.approval-card-actions .btn-toggle-comment:hover {
  color: var(--pulse-primary);
}


/* ==========================================================================
   11. ASSET CARDS
   ========================================================================== */

.asset-card {
  background-color: var(--pulse-card-bg);
  border: 1px solid var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: box-shadow var(--pulse-transition-timing),
              transform var(--pulse-transition-timing);
}

.asset-card:hover {
  box-shadow: var(--pulse-card-shadow);
  transform: translateY(-2px);
}

.asset-card-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pulse-border-radius-lg);
  font-size: 1.25rem;
  flex-shrink: 0;
  background-color: rgba(var(--pulse-primary-rgb), .08);
  color: var(--pulse-primary);
}

.asset-card-body {
  flex: 1;
  min-width: 0;
}

.asset-card-name {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-card-type {
  font-size: .8rem;
  color: var(--pulse-gray-600);
}

.asset-card-meta {
  text-align: right;
  flex-shrink: 0;
}

/* Status dot indicator */
.asset-status-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}

.asset-status-dot.online  { background-color: var(--pulse-success); }
.asset-status-dot.offline { background-color: var(--pulse-gray-400); }
.asset-status-dot.warning { background-color: var(--pulse-warning); }
.asset-status-dot.error   { background-color: var(--pulse-danger); }

.asset-card-status {
  font-size: .8rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .15rem;
}

.asset-card-heartbeat {
  font-size: .75rem;
  color: var(--pulse-gray-500);
}


/* ==========================================================================
   12. HELP CENTER
   ========================================================================== */

/* Category cards */
.help-category-card {
  background-color: var(--pulse-card-bg);
  border: 1px solid var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
  cursor: pointer;
  height: 100%;
}

.help-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pulse-card-shadow-lg);
}

.help-category-card .category-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pulse-border-radius-lg);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  background-color: rgba(var(--pulse-primary-rgb), .08);
  color: var(--pulse-primary);
}

.help-category-card .category-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .25rem;
}

.help-category-card .category-count {
  font-size: .8rem;
  color: var(--pulse-gray-500);
}

/* Article list items */
.help-article-item {
  display: block;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--pulse-card-border);
  transition: background-color .15s ease;
  color: inherit;
  text-decoration: none;
}

.help-article-item:first-child {
  border-radius: var(--pulse-border-radius-lg) var(--pulse-border-radius-lg) 0 0;
}

.help-article-item:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--pulse-border-radius-lg) var(--pulse-border-radius-lg);
}

.help-article-item:hover {
  background-color: rgba(var(--pulse-primary-rgb), .03);
  color: inherit;
}

.help-article-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .25rem;
  transition: color .15s ease;
}

.help-article-item:hover .help-article-title {
  color: var(--pulse-primary);
}

.help-article-excerpt {
  font-size: .85rem;
  color: var(--pulse-gray-600);
  margin-bottom: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.help-article-meta {
  font-size: .75rem;
  color: var(--pulse-gray-500);
}

.help-article-meta i {
  margin-right: .2rem;
}

/* Article detail */
.article-content {
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--pulse-body-color);
}

.article-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.375rem;
}

.article-content h3 {
  margin-top: 1.5rem;
  margin-bottom: .75rem;
  font-size: 1.125rem;
}

.article-content p {
  margin-bottom: 1rem;
}

.article-content ul,
.article-content ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.article-content img {
  max-width: 100%;
  border-radius: var(--pulse-border-radius-lg);
  margin: 1rem 0;
}

.article-content code {
  background-color: rgba(var(--pulse-primary-rgb), .06);
  color: var(--pulse-danger);
  padding: .15rem .4rem;
  border-radius: var(--pulse-border-radius);
  font-size: .85em;
}

.article-content pre {
  background-color: var(--pulse-dark);
  color: #e9ecef;
  padding: 1.25rem;
  border-radius: var(--pulse-border-radius-lg);
  overflow-x: auto;
  margin: 1rem 0;
}

.article-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* Table of contents sidebar */
.article-toc {
  position: sticky;
  top: 5rem;
}

.article-toc .toc-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pulse-gray-500);
  margin-bottom: .75rem;
}

.article-toc .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--pulse-gray-300);
}

.article-toc .toc-list li {
  padding-left: 1rem;
}

.article-toc .toc-list a {
  display: block;
  padding: .3rem 0;
  font-size: .8125rem;
  color: var(--pulse-gray-600);
  text-decoration: none;
  transition: color .15s ease;
  border-left: 2px solid transparent;
  margin-left: -1.125rem;
  padding-left: 1rem;
}

.article-toc .toc-list a:hover {
  color: var(--pulse-primary);
}

.article-toc .toc-list a.active {
  color: var(--pulse-primary);
  border-left-color: var(--pulse-primary);
  font-weight: 600;
}

/* Search highlighting */
.search-highlight,
mark.highlight {
  background-color: rgba(var(--pulse-warning-rgb), .3);
  color: inherit;
  padding: .05rem .15rem;
  border-radius: 2px;
}


/* ==========================================================================
   13. LOGIN PAGE
   ========================================================================== */

.login-page {
  min-height: 100vh;
  display: flex;
  background:
    radial-gradient(circle at 85% 12%, rgba(var(--pulse-primary-rgb), .06), transparent 26%),
    linear-gradient(180deg, #f9fbfd 0%, #eef3f7 100%);
}

/* Left panel: branding / gradient */
.login-left {
  flex: 0 0 42%;
  background: linear-gradient(150deg, var(--pulse-primary) 0%, var(--pulse-primary-dark) 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 4rem 4.5rem;
  color: var(--pulse-white);
  position: relative;
  overflow: hidden;
}

.login-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.1) 0%, transparent 50%);
  pointer-events: none;
}

.login-left-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 29rem;
  margin: 0 auto;
}

.login-kicker {
  display: inline-flex;
  align-items: center;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.login-logo-wrap {
  min-height: 5rem;
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.login-left .login-logo {
  max-height: 4.4rem;
  max-width: 15rem;
  object-fit: contain;
}

.login-logo-badge {
  width: 4.9rem;
  height: 4.9rem;
  border-radius: 1.5rem;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .14);
}

.login-logo-badge span {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--pulse-white);
}

.login-brand-copy {
  max-width: 25rem;
}

.login-left .login-welcome {
  font-size: clamp(2rem, 2.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: .9rem;
  letter-spacing: -.03em;
}

.login-left .login-welcome-sub {
  font-size: 1.04rem;
  line-height: 1.75;
  color: rgba(255,255,255,.8);
  max-width: 24rem;
}

/* Decorative shapes */
.login-left .login-shape-1 {
  position: absolute;
  top: -11%;
  right: -8%;
  width: 22rem;
  height: 22rem;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}

.login-left .login-shape-2 {
  position: absolute;
  bottom: -13%;
  left: -7%;
  width: 15rem;
  height: 15rem;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}

.login-illustration-wrap {
  margin-top: 3.2rem;
}

.login-illustration {
  max-height: 17.5rem;
  opacity: .95;
}

/* Right panel: form */
.login-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 3.25rem;
}

.login-form-shell {
  width: 100%;
  max-width: 35rem;
}

.login-form-card {
  width: 100%;
  max-width: 35rem;
  background-color: var(--pulse-white);
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 1.6rem;
  padding: 3rem 2.75rem 2.4rem;
  box-shadow:
    0 1.2rem 3rem rgba(15, 23, 42, .08),
    0 .35rem .85rem rgba(15, 23, 42, .04);
}

.login-form-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .78rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--pulse-primary-rgb), .16), rgba(17, 24, 39, .04));
  border: 1px solid rgba(var(--pulse-primary-rgb), .18);
  color: var(--pulse-heading-color);
  box-shadow: 0 .35rem .9rem rgba(var(--pulse-primary-rgb), .08);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.login-form-card .login-form-title {
  font-size: clamp(1.9rem, 2vw, 2.35rem);
  font-weight: 700;
  color: var(--pulse-heading-color);
  letter-spacing: -.03em;
  margin-bottom: .45rem;
}

.login-form-card .login-form-subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pulse-gray-600);
  margin-bottom: 2.15rem;
}

.login-form-card .form-label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .55rem;
}

.login-input-group {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .06);
}

.login-input-group .input-group-text {
  border: none;
  padding: .82rem .95rem;
}

.login-input-group .form-control {
  border: none;
}

.login-form-card .form-control {
  padding: .85rem 1rem;
  border-color: var(--pulse-gray-300);
  border-radius: 1rem;
  font-size: .96rem;
}

.login-form-card .form-control:focus {
  border-color: transparent;
  box-shadow: none;
}

.login-input-group:focus-within {
  box-shadow:
    0 0 0 1px rgba(var(--pulse-primary-rgb), .38),
    0 0 0 .28rem rgba(var(--pulse-primary-rgb), .12);
}

.login-form-card .btn-login {
  width: 100%;
  padding: .95rem 1.1rem;
  font-size: .9375rem;
  font-weight: 600;
  background-color: var(--pulse-primary);
  border: 1px solid var(--pulse-primary);
  border-radius: 1rem;
  color: var(--pulse-white);
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              border-color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing),
              transform var(--pulse-transition-timing);
}

.login-form-card .btn-login:hover {
  background-color: var(--pulse-white);
  color: var(--pulse-primary);
  border-color: var(--pulse-primary);
  box-shadow: 0 .9rem 1.9rem rgba(var(--pulse-primary-rgb), .18);
  transform: translateY(-1px);
}

.login-form-card .form-check-label {
  font-size: .85rem;
  color: var(--pulse-gray-600);
}

.login-form-card .login-forgot {
  font-size: .85rem;
  color: var(--pulse-primary);
}

.login-form-card .login-forgot:hover {
  color: var(--pulse-primary-dark);
}

.login-support-note {
  text-align: center;
  margin-top: 1.35rem;
  color: var(--pulse-gray-600);
  font-size: .87rem;
}

/* Responsive: stack on mobile */
@media (max-width: 991.98px) {
  .login-page {
    flex-direction: column;
  }

  .login-left {
    flex: 0 0 auto;
    padding: 2.6rem 2rem 2.2rem;
    min-height: auto;
  }

  .login-left-content,
  .login-brand-copy,
  .login-left .login-welcome-sub {
    max-width: none;
  }

  .login-illustration-wrap {
    margin-top: 1.8rem;
  }

  .login-illustration {
    max-height: 11rem;
  }

  .login-right {
    padding: 1.8rem 1rem 2rem;
  }

  .login-form-card {
    max-width: 100%;
    padding: 2rem 1.2rem 1.5rem;
    border-radius: 1.2rem;
  }
}


/* ==========================================================================
   14. SOFT BUTTONS (Front signature style)
   ========================================================================== */

.btn-soft-primary {
  background-color: rgba(var(--pulse-primary-rgb), .1);
  color: var(--pulse-primary);
  border: none;
  font-weight: 600;
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.btn-soft-primary:hover,
.btn-soft-primary:focus {
  background-color: var(--pulse-primary);
  color: var(--pulse-white);
  box-shadow: 0 4px 11px rgba(var(--pulse-primary-rgb), .35);
}

.btn-soft-primary:active {
  background-color: var(--pulse-primary-dark);
  color: var(--pulse-white);
}

.btn-soft-success {
  background-color: rgba(var(--pulse-success-rgb), .1);
  color: var(--pulse-success);
  border: none;
  font-weight: 600;
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.btn-soft-success:hover,
.btn-soft-success:focus {
  background-color: var(--pulse-success);
  color: var(--pulse-white);
  box-shadow: 0 4px 11px rgba(var(--pulse-success-rgb), .35);
}

.btn-soft-success:active {
  background-color: #00b396;
  color: var(--pulse-white);
}

.btn-soft-danger {
  background-color: rgba(var(--pulse-danger-rgb), .1);
  color: var(--pulse-danger);
  border: none;
  font-weight: 600;
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.btn-soft-danger:hover,
.btn-soft-danger:focus {
  background-color: var(--pulse-danger);
  color: var(--pulse-white);
  box-shadow: 0 4px 11px rgba(var(--pulse-danger-rgb), .35);
}

.btn-soft-danger:active {
  background-color: #c9372b;
  color: var(--pulse-white);
}

.btn-soft-warning {
  background-color: rgba(var(--pulse-warning-rgb), .1);
  color: #d39e00;
  border: none;
  font-weight: 600;
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.btn-soft-warning:hover,
.btn-soft-warning:focus {
  background-color: var(--pulse-warning);
  color: var(--pulse-dark);
  box-shadow: 0 4px 11px rgba(var(--pulse-warning-rgb), .35);
}

.btn-soft-warning:active {
  background-color: #e0a800;
  color: var(--pulse-dark);
}

.btn-soft-info {
  background-color: rgba(var(--pulse-info-rgb), .1);
  color: #00b8d4;
  border: none;
  font-weight: 600;
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.btn-soft-info:hover,
.btn-soft-info:focus {
  background-color: var(--pulse-info);
  color: var(--pulse-dark);
  box-shadow: 0 4px 11px rgba(var(--pulse-info-rgb), .35);
}

.btn-soft-info:active {
  background-color: #00c4e0;
  color: var(--pulse-dark);
}

.btn-soft-secondary {
  background-color: rgba(var(--pulse-secondary-rgb), .1);
  color: var(--pulse-secondary);
  border: none;
  font-weight: 600;
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.btn-soft-secondary:hover,
.btn-soft-secondary:focus {
  background-color: var(--pulse-secondary);
  color: var(--pulse-white);
  box-shadow: 0 4px 11px rgba(var(--pulse-secondary-rgb), .35);
}

.btn-soft-secondary:active {
  background-color: #677380;
  color: var(--pulse-white);
}

.btn-soft-dark {
  background-color: rgba(var(--pulse-dark-rgb), .08);
  color: var(--pulse-dark);
  border: none;
  font-weight: 600;
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.btn-soft-dark:hover,
.btn-soft-dark:focus {
  background-color: var(--pulse-dark);
  color: var(--pulse-white);
  box-shadow: 0 4px 11px rgba(var(--pulse-dark-rgb), .35);
}

/* Icon-only soft button variant */
.btn-soft-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .875rem;
}


/* ==========================================================================
   15. AVATAR COMPONENT
   ========================================================================== */

.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Initials fallback */
.avatar-initials {
  font-weight: 600;
  color: var(--pulse-white);
  background-color: var(--pulse-primary);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Sizes */
.avatar-xs {
  width: 24px;
  height: 24px;
  font-size: .6rem;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: .7rem;
}

.avatar-md {
  width: 40px;
  height: 40px;
  font-size: .8rem;
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 1rem;
}

.avatar-xl {
  width: 80px;
  height: 80px;
  font-size: 1.25rem;
}

.avatar-xxl {
  width: 120px;
  height: 120px;
  font-size: 1.75rem;
}

/* Status dot indicator */
.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  border: 2px solid var(--pulse-white);
}

.avatar-status-online  { background-color: var(--pulse-success); }
.avatar-status-offline { background-color: var(--pulse-gray-400); }
.avatar-status-busy    { background-color: var(--pulse-danger); }
.avatar-status-away    { background-color: var(--pulse-warning); }

/* Avatar group (stacked) */
.avatar-group {
  display: inline-flex;
  flex-direction: row-reverse;
}

.avatar-group .avatar {
  border: 2px solid var(--pulse-white);
  margin-left: -.5rem;
}

.avatar-group .avatar:last-child {
  margin-left: 0;
}

.avatar-group .avatar-more {
  background-color: var(--pulse-gray-300);
  color: var(--pulse-gray-700);
  font-weight: 600;
}


/* ==========================================================================
   16. PAGE HEADERS
   ========================================================================== */

.page-header {
  background-color: var(--pulse-white);
  border-bottom: 1px solid var(--pulse-card-border);
  padding: 1.5rem 0;
  margin-bottom: 2rem;
}

.page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pulse-heading-color);
  margin-bottom: 0;
}

.page-header-subtitle {
  font-size: .875rem;
  color: var(--pulse-gray-600);
  margin-bottom: 0;
  margin-top: .15rem;
}

.page-header .breadcrumb {
  font-size: .8125rem;
  margin-bottom: .5rem;
  padding: 0;
  background: transparent;
}

.page-header .breadcrumb-item a {
  color: var(--pulse-gray-600);
}

.page-header .breadcrumb-item a:hover {
  color: var(--pulse-primary);
}

.page-header .breadcrumb-item.active {
  color: var(--pulse-gray-500);
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
  color: var(--pulse-gray-400);
}

.page-header-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}


/* ==========================================================================
   17. EMPTY STATES
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state-icon {
  font-size: 4rem;
  color: var(--pulse-gray-400);
  margin-bottom: 1.5rem;
  opacity: .6;
}

.empty-state-icon img,
.empty-state-icon svg {
  max-width: 180px;
  height: auto;
  opacity: .7;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .5rem;
}

.empty-state-desc {
  font-size: .9rem;
  color: var(--pulse-gray-600);
  max-width: 400px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.empty-state .btn {
  font-weight: 600;
}


/* ==========================================================================
   18. UTILITIES
   ========================================================================== */

/* --- Soft background tints (10% opacity) --- */
.bg-soft-primary {
  background-color: rgba(var(--pulse-primary-rgb), .1) !important;
}

.bg-soft-success {
  background-color: rgba(var(--pulse-success-rgb), .1) !important;
}

.bg-soft-danger {
  background-color: rgba(var(--pulse-danger-rgb), .1) !important;
}

.bg-soft-warning {
  background-color: rgba(var(--pulse-warning-rgb), .1) !important;
}

.bg-soft-info {
  background-color: rgba(var(--pulse-info-rgb), .1) !important;
}

.bg-soft-secondary {
  background-color: rgba(var(--pulse-secondary-rgb), .1) !important;
}

.bg-soft-dark {
  background-color: rgba(var(--pulse-dark-rgb), .08) !important;
}

/* --- Text cap (uppercase section labels, Front signature) --- */
.text-cap {
  display: block;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--pulse-gray-500);
  margin-bottom: .75rem;
}

/* --- Transition 3D hover --- */
.transition-3d-hover {
  transition: transform var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.transition-3d-hover:hover,
.transition-3d-hover:focus {
  transform: translateY(-5px);
  box-shadow: var(--pulse-card-shadow-lg);
}

/* --- Gradient overlays --- */
.gradient-overlay {
  position: relative;
  overflow: hidden;
}

.gradient-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.gradient-overlay > * {
  position: relative;
  z-index: 2;
}

.gradient-overlay-primary::before {
  background: linear-gradient(150deg, rgba(var(--pulse-primary-rgb), .85) 0%, rgba(var(--pulse-primary-dark-rgb), .9) 100%);
}

.gradient-overlay-dark::before {
  background: linear-gradient(150deg, rgba(var(--pulse-dark-rgb), .7) 0%, rgba(var(--pulse-dark-rgb), .9) 100%);
}

/* --- SVG divider positioning helpers --- */
.svg-divider-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  line-height: 0;
  overflow: hidden;
}

.svg-divider-top {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  line-height: 0;
  overflow: hidden;
  transform: rotate(180deg);
}

.svg-divider-bottom svg,
.svg-divider-top svg {
  display: block;
  width: 100%;
}

/* --- Misc utilities --- */
.text-primary   { color: var(--pulse-primary) !important; }
.text-success   { color: var(--pulse-success) !important; }
.text-info      { color: var(--pulse-info) !important; }
.text-warning   { color: var(--pulse-warning) !important; }
.text-danger    { color: var(--pulse-danger) !important; }
.text-secondary { color: var(--pulse-secondary) !important; }
.text-body      { color: var(--pulse-body-color) !important; }
.text-heading   { color: var(--pulse-heading-color) !important; }

.border-primary { border-color: var(--pulse-primary) !important; }
.border-soft    { border-color: var(--pulse-card-border) !important; }

.rounded-pill { border-radius: var(--pulse-border-radius-pill) !important; }
.rounded-lg   { border-radius: var(--pulse-border-radius-lg) !important; }
.rounded-xl   { border-radius: var(--pulse-border-radius-xl) !important; }

.shadow-soft    { box-shadow: var(--pulse-card-shadow) !important; }
.shadow-soft-lg { box-shadow: var(--pulse-card-shadow-lg) !important; }

/* Section spacing */
.section-py {
  padding-top: var(--pulse-section-padding-y);
  padding-bottom: var(--pulse-section-padding-y);
}

/* Divider line */
.divider {
  border-top: 1px solid var(--pulse-gray-300);
  opacity: .6;
}

/* Truncate text */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card base override */
.card {
  border-color: var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  box-shadow: var(--pulse-card-shadow);
}

.card-header {
  background-color: transparent;
  border-bottom-color: var(--pulse-card-border);
  padding: 1rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background-color: transparent;
  border-top-color: var(--pulse-card-border);
}


/* ==========================================================================
   19. TABLES (for ticket lists)
   ========================================================================== */

.table-portal {
  --bs-table-bg: var(--pulse-card-bg);
  --bs-table-hover-bg: rgba(var(--pulse-primary-rgb), .025);
  border-collapse: separate;
  border-spacing: 0;
}

.table-portal thead th {
  background-color: var(--pulse-gray-200);
  color: var(--pulse-gray-700);
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--pulse-gray-300);
  border-top: none;
  white-space: nowrap;
}

.table-portal thead th:first-child {
  border-radius: var(--pulse-border-radius-lg) 0 0 0;
}

.table-portal thead th:last-child {
  border-radius: 0 var(--pulse-border-radius-lg) 0 0;
}

.table-portal tbody td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--pulse-card-border);
  vertical-align: middle;
  font-size: .9rem;
  color: var(--pulse-body-color);
}

.table-portal tbody tr {
  transition: background-color .15s ease;
}

.table-portal tbody tr:hover {
  background-color: rgba(var(--pulse-primary-rgb), .025);
}

/* Clickable rows */
.table-portal tbody tr.clickable-row {
  cursor: pointer;
}

.table-portal tbody tr.clickable-row:hover {
  background-color: rgba(var(--pulse-primary-rgb), .04);
}

/* Ticket ID column */
.table-portal .ticket-id {
  font-weight: 600;
  color: var(--pulse-primary);
  font-size: .85rem;
}

/* Subject column */
.table-portal .ticket-subject {
  font-weight: 500;
  color: var(--pulse-heading-color);
}

/* Sort indicators */
.table-portal .sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.5rem;
}

.table-portal .sortable::after {
  content: '\2195';
  position: absolute;
  right: .5rem;
  opacity: .3;
  font-size: .7rem;
}

.table-portal .sortable.asc::after {
  content: '\2191';
  opacity: .8;
  color: var(--pulse-primary);
}

.table-portal .sortable.desc::after {
  content: '\2193';
  opacity: .8;
  color: var(--pulse-primary);
}

/* Responsive wrapper */
.table-portal-wrapper {
  background-color: var(--pulse-card-bg);
  border: 1px solid var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  overflow: hidden;
  box-shadow: var(--pulse-card-shadow);
}

.table-portal-wrapper .table-portal {
  margin-bottom: 0;
}

/* Table toolbar (search, filters, bulk actions) */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--pulse-card-border);
  flex-wrap: wrap;
}

.table-toolbar .table-search {
  max-width: 280px;
}

.table-toolbar .table-filters {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Pagination override */
.table-portal-wrapper .pagination {
  padding: .75rem 1rem;
  margin-bottom: 0;
  border-top: 1px solid var(--pulse-card-border);
}

.table-portal-wrapper .page-link {
  border: none;
  color: var(--pulse-gray-700);
  font-size: .85rem;
  padding: .4rem .75rem;
  border-radius: var(--pulse-border-radius);
  margin: 0 .125rem;
  transition: background-color .15s ease, color .15s ease;
}

.table-portal-wrapper .page-link:hover {
  background-color: rgba(var(--pulse-primary-rgb), .08);
  color: var(--pulse-primary);
}

.table-portal-wrapper .page-item.active .page-link {
  background-color: var(--pulse-primary);
  color: var(--pulse-white);
}

.table-portal-wrapper .page-item.disabled .page-link {
  color: var(--pulse-gray-400);
  background-color: transparent;
}


/* ==========================================================================
   20. FORMS
   ========================================================================== */

/* Base form control overrides */
.form-control,
.form-select {
  border-color: var(--pulse-gray-300);
  color: var(--pulse-dark);
  font-size: .9rem;
  border-radius: var(--pulse-border-radius);
  padding: .5rem .875rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pulse-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--pulse-primary-rgb), .15);
}

.form-control::placeholder {
  color: var(--pulse-gray-500);
}

/* Labels */
.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .35rem;
}

/* Large pill search input */
.form-control-pill {
  border-radius: var(--pulse-border-radius-pill);
  padding: .75rem 1.5rem;
  font-size: 1rem;
}

.form-control-pill-lg {
  border-radius: var(--pulse-border-radius-pill);
  padding: 1rem 1.75rem;
  font-size: 1.0625rem;
}

/* Floating labels support */
.form-floating > .form-control {
  padding: 1.375rem .875rem .625rem;
  height: 3.25rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--pulse-primary);
  font-size: .75rem;
}

.form-floating > label {
  color: var(--pulse-gray-500);
  padding: .875rem .875rem;
}

/* Checkboxes and radios */
.form-check-input:checked {
  background-color: var(--pulse-primary);
  border-color: var(--pulse-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--pulse-primary-rgb), .15);
  border-color: var(--pulse-primary);
}

.form-check-label {
  font-size: .875rem;
  color: var(--pulse-body-color);
}

/* Switch */
.form-switch .form-check-input:checked {
  background-color: var(--pulse-primary);
  border-color: var(--pulse-primary);
}

/* File upload area (drag and drop style) */
.file-upload-area {
  border: 2px dashed var(--pulse-gray-400);
  border-radius: var(--pulse-border-radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
  background-color: var(--pulse-gray-100);
}

.file-upload-area:hover,
.file-upload-area.dragover {
  border-color: var(--pulse-primary);
  background-color: rgba(var(--pulse-primary-rgb), .04);
}

.file-upload-area .upload-icon {
  font-size: 2rem;
  color: var(--pulse-gray-400);
  margin-bottom: .75rem;
  transition: color .2s ease;
}

.file-upload-area:hover .upload-icon {
  color: var(--pulse-primary);
}

.file-upload-area .upload-text {
  font-size: .9rem;
  color: var(--pulse-gray-600);
}

.file-upload-area .upload-text strong {
  color: var(--pulse-primary);
  cursor: pointer;
}

.file-upload-area .upload-hint {
  font-size: .8rem;
  color: var(--pulse-gray-500);
  margin-top: .35rem;
}

/* Upload file preview list */
.file-upload-list {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
}

.file-upload-list-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background-color: var(--pulse-gray-200);
  border-radius: var(--pulse-border-radius);
  margin-bottom: .35rem;
  font-size: .85rem;
}

.file-upload-list-item .file-name {
  flex: 1;
  color: var(--pulse-heading-color);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-upload-list-item .file-size {
  font-size: .75rem;
  color: var(--pulse-gray-500);
  flex-shrink: 0;
}

.file-upload-list-item .file-remove {
  color: var(--pulse-gray-500);
  cursor: pointer;
  border: none;
  background: none;
  padding: .15rem .35rem;
  line-height: 1;
  transition: color .15s ease;
}

.file-upload-list-item .file-remove:hover {
  color: var(--pulse-danger);
}

/* Input group overrides */
.input-group .form-control:focus {
  z-index: 3;
}

.input-group-text {
  background-color: var(--pulse-gray-200);
  border-color: var(--pulse-gray-300);
  color: var(--pulse-gray-600);
}

/* Textarea auto-resize helper */
.form-control-auto {
  resize: none;
  overflow: hidden;
}

/* Validation states */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--pulse-success);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--pulse-success-rgb), .15);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--pulse-danger);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--pulse-danger-rgb), .15);
}

.invalid-feedback {
  font-size: .8rem;
}

.valid-feedback {
  font-size: .8rem;
  color: var(--pulse-success);
}


/* ==========================================================================
   21. SIDEBAR ACCOUNT (ticket detail, profile)
   ========================================================================== */

.sidebar-account {
  background-color: var(--pulse-card-bg);
  border: 1px solid var(--pulse-card-border);
  border-radius: var(--pulse-border-radius-lg);
  overflow: hidden;
  box-shadow: var(--pulse-card-shadow);
}

/* User info area */
.sidebar-account-header {
  padding: 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--pulse-card-border);
}

.sidebar-account-header .avatar {
  margin-bottom: .75rem;
}

.sidebar-account-header .user-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pulse-heading-color);
  margin-bottom: .15rem;
}

.sidebar-account-header .user-email {
  font-size: .8125rem;
  color: var(--pulse-gray-600);
}

/* Navigation links */
.sidebar-account-nav {
  padding: .5rem 0;
}

.sidebar-account-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--pulse-gray-700);
  border-left: 3px solid transparent;
  transition: background-color .15s ease,
              color .15s ease,
              border-color .15s ease;
}

.sidebar-account-nav .nav-link i {
  width: 1.25rem;
  text-align: center;
  font-size: .9rem;
  color: var(--pulse-gray-500);
  transition: color .15s ease;
}

.sidebar-account-nav .nav-link:hover {
  background-color: rgba(var(--pulse-primary-rgb), .04);
  color: var(--pulse-primary);
}

.sidebar-account-nav .nav-link:hover i {
  color: var(--pulse-primary);
}

.sidebar-account-nav .nav-link.active {
  color: var(--pulse-primary);
  background-color: rgba(var(--pulse-primary-rgb), .06);
  border-left-color: var(--pulse-primary);
  font-weight: 600;
}

.sidebar-account-nav .nav-link.active i {
  color: var(--pulse-primary);
}

/* Nav section divider */
.sidebar-account-nav .nav-divider {
  height: 1px;
  background-color: var(--pulse-gray-300);
  margin: .5rem 1.5rem;
  opacity: .6;
}

/* Badge count on nav item */
.sidebar-account-nav .nav-badge {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 600;
  background-color: rgba(var(--pulse-primary-rgb), .1);
  color: var(--pulse-primary);
  padding: .15rem .5rem;
  border-radius: var(--pulse-border-radius-pill);
}

/* Sidebar ticket details variant */
.sidebar-ticket-details {
  padding: 1.25rem;
}

.sidebar-ticket-details .detail-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pulse-gray-500);
  margin-bottom: .25rem;
}

.sidebar-ticket-details .detail-value {
  font-size: .875rem;
  color: var(--pulse-heading-color);
  margin-bottom: 1rem;
}

.sidebar-ticket-details .detail-value:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   22. FOOTER
   ========================================================================== */

.footer-portal {
  background-color: var(--pulse-white);
  border-top: 1px solid var(--pulse-card-border);
  padding: 1.5rem 0;
  margin-top: 3rem;
}

.footer-portal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}

.footer-portal .footer-copyright {
  font-size: .8125rem;
  color: var(--pulse-gray-600);
}

.footer-portal .footer-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-portal .footer-links a {
  font-size: .8125rem;
  color: var(--pulse-gray-600);
  text-decoration: none;
  transition: color .15s ease;
}

.footer-portal .footer-links a:hover {
  color: var(--pulse-primary);
}

.footer-portal .footer-powered {
  font-size: .75rem;
  color: var(--pulse-gray-500);
}

@media (max-width: 767.98px) {
  .footer-portal-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-portal .footer-links {
    justify-content: center;
  }
}


/* ==========================================================================
   BOOTSTRAP 5.3 OVERRIDES & INTEGRATION
   Overrides to make Bootstrap's default components match the Front theme.
   ========================================================================== */

/* Primary button */
.btn-primary {
  --bs-btn-color: var(--pulse-white);
  --bs-btn-bg: var(--pulse-primary);
  --bs-btn-border-color: var(--pulse-primary);
  --bs-btn-hover-color: var(--pulse-primary);
  --bs-btn-hover-bg: var(--pulse-white);
  --bs-btn-hover-border-color: var(--pulse-primary);
  --bs-btn-active-color: var(--pulse-white);
  --bs-btn-active-bg: var(--pulse-primary-dark);
  --bs-btn-active-border-color: var(--pulse-primary-dark);
  --bs-btn-disabled-bg: var(--pulse-primary);
  --bs-btn-disabled-border-color: var(--pulse-primary);
  font-weight: 600;
  transition: background-color var(--pulse-transition-timing),
              color var(--pulse-transition-timing),
              border-color var(--pulse-transition-timing),
              box-shadow var(--pulse-transition-timing);
}

.btn-primary:hover {
  box-shadow: 0 4px 11px rgba(var(--pulse-primary-rgb), .25);
}

/* Outline primary */
.btn-outline-primary {
  --bs-btn-color: var(--pulse-primary);
  --bs-btn-border-color: var(--pulse-primary);
  --bs-btn-hover-bg: var(--pulse-primary);
  --bs-btn-hover-border-color: var(--pulse-primary);
  --bs-btn-active-bg: var(--pulse-primary-dark);
  --bs-btn-active-border-color: var(--pulse-primary-dark);
  font-weight: 600;
}

/* Success button */
.btn-success {
  --bs-btn-bg: var(--pulse-success);
  --bs-btn-border-color: var(--pulse-success);
  --bs-btn-hover-bg: #00b396;
  --bs-btn-hover-border-color: #00b396;
  font-weight: 600;
}

/* Danger button */
.btn-danger {
  --bs-btn-bg: var(--pulse-danger);
  --bs-btn-border-color: var(--pulse-danger);
  --bs-btn-hover-bg: #c9372b;
  --bs-btn-hover-border-color: #c9372b;
  font-weight: 600;
}

/* General button refinement */
.btn {
  border-radius: var(--pulse-border-radius);
  font-size: .875rem;
  padding: .5rem 1rem;
  transition: all var(--pulse-transition-timing);
}

.btn-sm {
  font-size: .8125rem;
  padding: .35rem .75rem;
}

.btn-lg {
  font-size: 1rem;
  padding: .75rem 1.5rem;
}

/* Badge overrides */
.badge {
  font-weight: 600;
  font-size: .75rem;
  padding: .35em .65em;
  border-radius: var(--pulse-border-radius);
}

.bg-primary   { background-color: var(--pulse-primary) !important; }
.bg-success   { background-color: var(--pulse-success) !important; }
.bg-info      { background-color: var(--pulse-info) !important; }
.bg-warning   { background-color: var(--pulse-warning) !important; }
.bg-danger    { background-color: var(--pulse-danger) !important; }
.bg-secondary { background-color: var(--pulse-secondary) !important; }
.bg-dark      { background-color: var(--pulse-dark) !important; }

/* Modal overrides */
.modal-content {
  border: none;
  border-radius: var(--pulse-border-radius-xl);
  box-shadow: 0 .5rem 2rem rgba(var(--pulse-dark-rgb), .15);
}

.modal-header {
  border-bottom-color: var(--pulse-card-border);
  padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
  font-weight: 600;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  border-top-color: var(--pulse-card-border);
  padding: 1rem 1.5rem;
}

/* Alert overrides */
.alert {
  border-radius: var(--pulse-border-radius-lg);
  border: none;
  font-size: .9rem;
}

.alert-primary   { background-color: rgba(var(--pulse-primary-rgb), .1); color: var(--pulse-primary); }
.alert-success   { background-color: rgba(var(--pulse-success-rgb), .1); color: var(--pulse-success); }
.alert-danger    { background-color: rgba(var(--pulse-danger-rgb), .1); color: var(--pulse-danger); }
.alert-warning   { background-color: rgba(var(--pulse-warning-rgb), .1); color: #d39e00; }
.alert-info      { background-color: rgba(var(--pulse-info-rgb), .1); color: #00b8d4; }

/* Tooltip */
.tooltip-inner {
  border-radius: var(--pulse-border-radius);
  font-size: .8rem;
  padding: .35rem .65rem;
}

/* Dropdown */
.dropdown-menu {
  border: none;
  box-shadow: 0 .5rem 1.5rem rgba(140, 152, 164, .175);
  border-radius: var(--pulse-border-radius-lg);
  padding: .5rem 0;
  animation: dropdownFadeIn .2s ease;
}

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

.dropdown-item {
  font-size: .875rem;
  padding: .45rem 1.25rem;
  transition: background-color .15s ease, color .15s ease;
}

.dropdown-item:hover {
  background-color: rgba(var(--pulse-primary-rgb), .06);
  color: var(--pulse-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: rgba(var(--pulse-primary-rgb), .1);
  color: var(--pulse-primary);
}

/* Nav tabs / pills overrides */
.nav-tabs {
  border-bottom-color: var(--pulse-gray-300);
}

.nav-tabs .nav-link {
  color: var(--pulse-gray-600);
  font-weight: 500;
  font-size: .875rem;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .75rem 1rem;
  transition: color .15s ease, border-color .15s ease;
}

.nav-tabs .nav-link:hover {
  color: var(--pulse-primary);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--pulse-primary);
  border-bottom-color: var(--pulse-primary);
  background-color: transparent;
}

.nav-pills .nav-link {
  color: var(--pulse-gray-700);
  font-weight: 500;
  font-size: .875rem;
  border-radius: var(--pulse-border-radius);
  padding: .5rem 1rem;
  transition: all .15s ease;
}

.nav-pills .nav-link:hover {
  background-color: rgba(var(--pulse-primary-rgb), .06);
  color: var(--pulse-primary);
}

.nav-pills .nav-link.active {
  background-color: var(--pulse-primary);
  color: var(--pulse-white);
}

/* Progress bar */
.progress {
  border-radius: var(--pulse-border-radius-pill);
  height: .5rem;
  background-color: var(--pulse-gray-300);
}

.progress-bar {
  background-color: var(--pulse-primary);
  border-radius: var(--pulse-border-radius-pill);
}

/* Toast */
.toast {
  border: none;
  border-radius: var(--pulse-border-radius-lg);
  box-shadow: 0 .5rem 1.5rem rgba(var(--pulse-dark-rgb), .15);
}

/* List group */
.list-group-item {
  border-color: var(--pulse-card-border);
  padding: .75rem 1.25rem;
  color: var(--pulse-body-color);
  transition: background-color .15s ease;
}

.list-group-item:hover {
  background-color: rgba(var(--pulse-primary-rgb), .025);
}

.list-group-item.active {
  background-color: var(--pulse-primary);
  border-color: var(--pulse-primary);
}

/* Offcanvas */
.offcanvas {
  box-shadow: 0 .5rem 2rem rgba(var(--pulse-dark-rgb), .15);
}

.offcanvas-header {
  border-bottom: 1px solid var(--pulse-card-border);
}

/* Spinner */
.spinner-border {
  color: var(--pulse-primary);
}

/* Accordion */
.accordion-button {
  font-weight: 600;
  color: var(--pulse-heading-color);
  font-size: .9375rem;
}

.accordion-button:not(.collapsed) {
  color: var(--pulse-primary);
  background-color: rgba(var(--pulse-primary-rgb), .04);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: rgba(var(--pulse-primary-rgb), .25);
  box-shadow: 0 0 0 .2rem rgba(var(--pulse-primary-rgb), .15);
}

.accordion-item {
  border-color: var(--pulse-card-border);
}


/* ==========================================================================
   SCROLLBAR STYLING (Webkit)
   ========================================================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--pulse-gray-400);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--pulse-gray-500);
}


/* ==========================================================================
   ANIMATIONS & TRANSITIONS
   ========================================================================== */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

.animate-fade-in-up {
  animation: fadeInUp .5s ease forwards;
}

.animate-fade-in {
  animation: fadeIn .4s ease forwards;
}

.animate-slide-in-left {
  animation: slideInLeft .4s ease forwards;
}

/* Staggered animation delay helpers */
.animate-delay-1 { animation-delay: .1s; }
.animate-delay-2 { animation-delay: .2s; }
.animate-delay-3 { animation-delay: .3s; }
.animate-delay-4 { animation-delay: .4s; }
.animate-delay-5 { animation-delay: .5s; }

/* Skeleton loading placeholder */
.skeleton {
  background: linear-gradient(90deg,
    var(--pulse-gray-300) 25%,
    var(--pulse-gray-200) 50%,
    var(--pulse-gray-300) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease infinite;
  border-radius: var(--pulse-border-radius);
}

@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: .875rem;
  margin-bottom: .5rem;
}

.skeleton-title {
  height: 1.25rem;
  width: 60%;
  margin-bottom: .75rem;
}

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}


/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .navbar-portal,
  .footer-portal,
  .sidebar-account,
  .hero-search,
  .btn-novo-ticket,
  .page-header-actions {
    display: none !important;
  }

  body {
    background-color: #fff;
    color: #000;
    font-size: 12pt;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .badge-status-open,
  .badge-status-pending,
  .badge-status-in-progress,
  .badge-status-resolved,
  .badge-status-closed {
    border: 1px solid currentColor;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #666;
  }

  .timeline-bubble {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}