:root {
    --bs-primary: #393168;
    --bs-primary-rgb: 57, 49, 104;
     --bs-info-rgb: 196,191,243;
     --gray-purple: #DADAE7;
     --light-bg: #EAEAF1;
     --yellow-bg: #FFBA33;
     --dark-purple: #2B2749;
     --medium-purple: #4B418A;
}

 body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     background-color: var(--light-bg);
 }

.edit-link {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.edit-link:hover {
  text-decoration: underline;
}

/* SM indikator */
.sm-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 600;
  cursor: help;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  margin-left: 0.5rem;
}

.sm-indicator:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.sm-indicator.sm-no {
  color: white;
  background: linear-gradient(135deg, #fd7e14, #ffc107);
}

.sm-indicator.sm-sharing-on {
  background: linear-gradient(135deg, #0E7F5C, #1ba87e);
  color: #fff;
}
.sm-indicator.sm-sharing-off {
  background: linear-gradient(135deg, #dc3545, #ff6b6b);
  color: #fff;
}
.sm-indicator.sm-sharing-scheduled {
  background: linear-gradient(135deg, #FFBA33, #FFD36B);
  color: #5C3D00;
}

.sm-indicator.sm-sharing-searching {
  background: linear-gradient(135deg, #FFE6A3, #FFD36B);
  color: #5C3D00;
}

@keyframes sm-pulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sm-indicator {
  animation: sm-pulse 450ms ease-out 1;
}

@keyframes sm-glow-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 168, 126, 0); }
  50% { box-shadow: 0 0 14px 4px rgba(27, 168, 126, 0.45); }
}
@keyframes sm-glow-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
  50% { box-shadow: 0 0 14px 4px rgba(220, 53, 69, 0.45); }
}
@keyframes sm-glow-yellow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 186, 51, 0); }
  50% { box-shadow: 0 0 14px 4px rgba(255, 186, 51, 0.45); }
}
@keyframes sm-glow-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0); }
  50% { box-shadow: 0 0 14px 4px rgba(253, 126, 20, 0.45); }
}

.sm-indicator.sm-sharing-on {
  animation: sm-pulse 450ms ease-out 1, sm-glow-green 3600ms ease-in-out infinite 150ms;
}
.sm-indicator.sm-sharing-off {
  animation: sm-pulse 450ms ease-out 1, sm-glow-red 3600ms ease-in-out infinite 150ms;
}
.sm-indicator.sm-sharing-scheduled {
  animation: sm-pulse 450ms ease-out 1, sm-glow-yellow 3600ms ease-in-out infinite 150ms;
}

.sm-indicator.sm-sharing-searching {
  animation: sm-pulse 450ms ease-out 1, sm-glow-yellow 3600ms ease-in-out infinite 150ms;
}

.sm-indicator.sm-no {
  animation: sm-pulse 450ms ease-out 1, sm-glow-amber 3600ms ease-in-out infinite 150ms;
}


.loader {
    border: 8px solid #cacaca;
    border-radius: 50%;
    border-top: 8px solid var(--bs-primary);
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    display: none;
    aspect-ratio: 1;
}

.loader.htmx-request {
    display: block;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.dashboard-content {
  margin-top: 60px;
}

#chart-cont {
    width: 100%;
    overflow-y: auto;
    object-fit: cover;
}

.settings-text {
    font-size: 1rem !important;
}

@media (min-width: 768px) {
    .settings-text {
        font-size: 1.25rem !important;
    }
}

 .dark-purple {
     color: #393168;
 }

.switch-display {
    width: 2em;
	background-position: left center;
	border-radius: 2em;
	transition: background-position .15s ease-in-out;
    margin-top: .25em;
    background-color: #797979;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff' /%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
}

 .btn-group-time .btn {
     border-radius: 120px;
     width: 5rem;
     color: var(--bs-primary);
     margin-inline: 1rem ;
     font-size: 12px;
     font-weight: 700;
 }

 .btn-group-time .btn:first-child {
     margin: 0 0 0 0.5rem;
 }
 .btn-group-time .btn:last-child {
     margin: 0 0.5rem 0 0;
 }

 .btn-group-time .btn.active {
    background-color: var(--bs-primary);
     color: white;
     border-color: var(--bs-primary);
 }

.center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

@media (max-width: 576px) {
    .center-icon {
        transform: translate(-50%, -50%) scale(0.9);
        top: 50%; left: 50%;
        margin-top: 0;
    }
}

.energy-value {
    font-size: 44px;
    margin-bottom: 0;
}
/* For screens less than xl (i.e., below 1200px) */
@media (max-width: 1199.98px) {
    .energy-value {
      font-size: 32px !important;
    }
  }

 @media (max-width: 992px) {
     .energy-value {
         font-size: 44px !important;
     }
 }

 @media (max-width: 576px) {
     .energy-value {
         font-size: 20px !important;
     }
 }

.donut-row { gap: 16px; }
.donut-container {
    height: 240px;
    width: 240px;
    position: relative;
}
.donut-container canvas { width: 100% !important; height: 100% !important; display: block; }

 @media (max-width: 576px) {
    .donut-row { flex-direction: row; align-items: center; gap: 12px; }
    .donut-container {
        height: 160px;
        width: 160px;
    }
    .donut-stats { margin-left: auto !important; }
 }

 @media (max-width: 460px) {
     .donut-container {
        margin-top: 6px;
     }
 }

 .stat-card,
 .chart-card,
 .info-card {
     padding: 20px 24px;
     border: none;
     height: 153px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

/* Ranking cards should contain content and not use fixed chart height */
.ranking-card {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    overflow: hidden;
}
.ranking-card li { overflow-wrap: anywhere; word-break: break-word; }
.ranking-card .right-metrics { flex-shrink: 0; }

/* Leaderboard toggle style to match app visuals */
.leaderboard-toggle .btn {
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    color: var(--bs-primary);
    border-color: #CFC8F2;
    background: #fff;
}
.leaderboard-toggle .btn.active, .leaderboard-toggle .btn:active {
    color: #4E3CC3;
    background: var(--yellow-bg);
    border-color: var(--yellow-bg);
}

 /* Reduce chart card padding further on mobile */
 @media (max-width: 768px) {
     .chart-card {
         padding: 16px 20px;
     }
 }

 .stat-card-sharing {
     padding: 1rem 0 0 2rem;
     border: none;
     height: 153px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .banner-card{
     height: 380px;
     overflow: hidden;
     position:relative;
 }

 .banner-vector {visibility: hidden}

 @media (min-width: 1200px) {
     .banner-vector {
         z-index: 50;
         position: absolute;
         top: 4.5rem;
         left: 22rem;
         visibility: visible;
     }
 }

 .banner-headline {
     z-index: 50;
     position: absolute;
     top: 2rem;
     left: 3rem;
     font-size: 48px;
     font-weight: 600;
 }

 .copy-button {
     z-index: 50;
     position: absolute;
     bottom: 5rem;
     left: 3rem;
     font-size: 24px !important;
     width: 15rem !important;
 }
 @media (max-width: 574px) {
     .copy-button {
         bottom: 1.5rem !important;
     }
 }

 @media (min-width: 993px) {
     .banner-image {
         transform: translate(2rem, -14rem) scale(1.1) !important;
     }
 }

 @media (max-width: 768px) {
     .banner-image {
         transform: translateY(-1rem) scale(1.2) !important;
     }
 }

 @media (max-width: 574px) {
     .banner-image {
         transform: scale(2.5) translateY(-2rem) !important;
     }
 }

 .legend {
     display: flex;
     margin-bottom: 15px;
     font-weight: 600;
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-size: 13px;
 }
 .legend-item {
     display: flex;
     align-items: center;
     margin: 0 15px;
 }
 .legend-color {
     width: 20px;
     height: 3px;
     margin-right: 8px;
 }
 .central {
     background-color: #5E35B1;
 }
 .shared {
     background-color: var(--yellow-bg);
 }

 .user-type {
     font-size: 9px;
     border-radius: 100px;
     padding: 5px 10px;
     margin-bottom: auto;
     margin-top: auto;
     height: fit-content;
 }

 .new-message {
     font-size: 9px;
     font-weight: 700;
     border-radius: 4px;
     padding: 5px 10px;
     margin-bottom: auto;
     margin-top: auto;
     height: fit-content;
     background-color: #FFECC7;
     color: #B37A09;
 }

/* Mobile tweaks for notify messages */
@media (max-width: 576px) {
  .message .d-flex.justify-content-between { flex-direction: column; align-items: flex-start; gap: 8px; }
  .message .message-time { font-size: 12px; }
  .message .new-message { order: 2; }
}

.unread-messages-count {
    color: var(--dark-purple);
    background-color: var(--yellow-bg);
    border-radius: 80%;
    font-size: 13px;
    font-weight: 800;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(0, -2px);
}

.message {
    margin: 5px 0 5px 0;
    padding: 15px;
    align-items: center;
    border-radius: 4px;
    font-size: 16px;
}

.message-time {
    color: rgba(43, 39, 73, 0.64);
    font-weight: 500;
    font-size: 13px;
}

.button {
    background-color: transparent;
    color: var(--bs-primary);
    font-size: 16px;
    font-weight: 600;
    border: 2px solid var(--bs-primary);
    border-radius: 50px;
    padding: 10px 20px;
    width: fit-content;
}

.table-item{
    padding: 1rem 0 !important;
    font-size: 16px;
}


.table-horizontal-lines {
  border-collapse: collapse;
  width: 100%;
}

.table-horizontal-lines thead tr th {
  border-bottom: 1px solid #D4D4E2;
  border-top: none;
  font-weight: 600;
  background: #fff;
}

.table-horizontal-lines tbody tr {
  border-bottom: 1px solid #D4D4E2;
}

.table-horizontal-lines tbody tr:last-child {
  border-bottom: none;
}

.table-horizontal-lines td {
  border: none !important;
  background: #fff;
}

/* EAN Manager */
.ean-inline-form .ean-name-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(75,65,138,0.18);
}
.ean-inline-form .filled-button {
    background: var(--yellow-bg);
    color: var(--dark-purple);
    border: none;
}

/* Figma-like pill input and link actions */
.pill-input {
    border: 1px solid #E4E3ED;
    background: #F7F7FA;
    border-radius: 999px;
}
.pill-input-field {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 12px;
}
.pill-input-field:focus {
    outline: none !important;
    box-shadow: none !important;
}
.rect-input {
    border: 1px solid #E4E3ED;
    background: #F7F7FA;
    border-radius: 8px; /* more rectangular */
}
.rect-input-field {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 12px;
}
.rect-input-field:focus { outline: none !important; box-shadow: none !important; }

/* Search input with icon (used in Group Users EAN search) */
.search-input .rect-input-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B418A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 36px;
}

/* EAN label chips */
.ean-tag {
  background: #EDECF3;
  color: #4B418A;
  border: 1px solid #D4D4E2;
  font-weight: 600;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-block;
}

/* Accent color for EAN checkboxes */
.ean-check .form-check-input { accent-color: var(--bs-primary); }

/* Prevent long EANs/labels from overflowing in modal */
.ean-check .form-check-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Masked icon that inherits text color */
.icon-arrows { width: 16px; height: 16px; display: inline-block; background-color: currentColor; -webkit-mask: url('../images/arrows_clockwise.svg') no-repeat center / contain; mask: url('../images/arrows_clockwise.svg') no-repeat center / contain; }

/* Centered expand/collapse link */
.link-toggle { background: transparent; border: none; color: var(--bs-primary); font-weight: 600; text-decoration: underline; }
.link-toggle:focus { outline: none; }

/* Upravit button style: light outline, purple icon/text */
.btn-edit {
  background: #fff;
  border: 1px solid #CFC8F2;
  color: #4E3CC3;
  border-radius: 12px;
  padding: 6px 14px;
  font-weight: 600;
}
.btn-edit:hover { background: #F7F7FA; border-color: #B8AEEA; color: #4E3CC3; }
.btn-edit .gear-mask { width: 16px; height: 16px; display: inline-block; background-color: currentColor; -webkit-mask: url('../images/gear_default.svg') no-repeat center / contain; mask: url('../images/gear_default.svg') no-repeat center / contain; }

/* Wider modal on large screens */
/* Wider modal container */
.modal-xl { max-width: 95%; }
@media (min-width: 1200px) { .modal-xl { max-width: 1000px; } }
@media (min-width: 1440px) { .modal-xl { max-width: 1180px; } }
.link-action {
    background: transparent;
    border: none;
    color: #4E3CC3;
    text-decoration: underline;
    font-weight: 600;
    padding: 4px 8px;
}
.link-action:hover { color: #392f9b; }

/* Table spacing closer to Figma */
.table-eans thead th { background: #fff; padding-top: 14px; padding-bottom: 14px; }
.table-eans tbody td { padding-top: 14px; padding-bottom: 14px; }

/* Icon sizing helpers used in EAN manager */
.icon-16 { width: 16px; height: 16px; }

/* Group card visuals: stronger separation */
.group-card {
  background: #fff;
  border: 1px solid #E4E3ED;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(43,39,73,0.06);
}
.group-title {
  font-size: 22px;
  font-weight: 700;
}
.manager-header[role="button"] { cursor: pointer; }
.manager-header[role="button"]:hover { background: #F7F7FA; }
.header-controls form .rect-input-field { padding: 6px 10px; }

/* EAN Manager responsive tweaks mirror sharing header */
@media (max-width: 576px) {
  .back-link { margin-left: auto; }
  .back-link img { width: 18px; height: 18px; }
  .back-link span { margin: 0 0 0 .5rem !important; font-size: 14px; }
}

/* Collapsible chevron rotation */
.toggle-group .chev { width: 16px; height: 16px; transition: transform .2s ease; }
.group-card .collapse.show + .table-responsive .chev { transform: rotate(90deg); }

/* Platby table - allow horizontal scroll container on small screens */
@media (max-width: 576px) {
  .table-horizontal-lines { min-width: 560px; }
}

::placeholder {
    color: #aaa;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.filled-button{
    background: var(--yellow-bg);
    border: none;
    color: var(--dark-purple);
    font-weight: 600;
    font-size: 16px;
    border-radius: 50px;
    min-width: fit-content;
    padding: 15px 30px;
    margin: 1.5rem auto 0 auto;
    text-decoration: none;
}

/* Remove auto-centering margin for modal footer buttons */
.modal-footer .filled-button { margin: 0 0 0 8px; }
.modal-footer .button { margin: 0; }

.current-period {
    background: #FFECC7;
    color: #845B0B;
    padding: 6px;
    border-radius: 4px;
    font-weight: bold;
    margin: 0 0 0.5rem 1.5rem
}

/* Visual consistency for sharing cards */
.automatic-card .filled-button,
.card .filled-button {
    padding: 10px 30px;
}
.automatic-card .alert-info {
    border-radius: 4px;
}

.settings-card {
    padding: 2.5rem 3rem 3rem 3rem;
    margin-bottom: 5rem;
    border: none;
}

/* Responsive chart overlay */
.chart-overlay {
    display: none;
    position: absolute;
    padding: 1rem;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}
.chart-overlay .overlay-box {
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
}
.chart-overlay .overlay-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
}
.chart-overlay .overlay-text {
    font-size: 14px;
    overflow-wrap: anywhere;
    word-break: normal;
}
@media (max-width: 576px) {
    .chart-overlay .overlay-box {
        max-width: 100%;
    }
    .chart-overlay .overlay-title { font-size: 15px; }
    .chart-overlay .overlay-text { font-size: 13px; }
}

/* Tighter donut card spacing */
.chart-card .donut-stats { margin-left: auto; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 576px) {
    .chart-card { padding-top: 12px; }
}

.icon-yellow {
    filter: brightness(0) saturate(100%) invert(76%) sepia(52%) saturate(638%) hue-rotate(358deg) brightness(101%) contrast(101%);
}

/* Slightly brighten dim icons on dark navbar */
.icon-bright {
    filter: brightness(2) saturate(1);
}

.modal-container {
    z-index: 40;
    display: none;
    position: fixed !important;
    top: 0; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    justify-content: center !important;
    align-items: center !important;
    padding-bottom: 12rem !important;
}

 .modal-content {
     background: white;
     padding: 2rem 2.5rem 2rem 2.5rem;
     border-radius: 8px;
 }

 /* Limit width only for custom overlay modals, not Bootstrap modals */
 .modal-container .modal-content {
     max-width: 584px;
 }

 .modal-header {
     font-weight: 600;
     font-size: 26px !important;
 }

 .modal-subheader {
     font-weight: 600;
     font-size: 20px !important;
     color: var(--bs-primary);
 }

 .modal-text {
     font-size: 14px !important;
     font-weight: 500;
     color: var(--dark-purple);
 }

.hidden-input {
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 2;
}

.settings-border {
    border-bottom: 1px solid #E4E3ED;
}

.settings-category {
    color: var(--medium-purple);
    font-weight: 500;
    width: 40%
}

.settings-adjust {
   color: #4E3CC3;
   text-decoration: underline;
   font-weight: 600;
}

.settings-text {
    font-weight: bold;
    font-size: 16px !important;
    align-content: end;
    width: 60%;
}

.w-70 {
    width: 70% !important;
}

.sharing-border {
    background-color: #EDECF3;
    border: dashed 2px #BDC3E5;
}

.sharing-type {
    margin-top: 1.5rem;
    color: var(--medium-purple);
    font-size: 28px;
    font-weight: 600
}

.sharing-card {
    padding: 2.5rem 3rem 3rem 3rem;
    margin-bottom: 5rem;
    margin-top: 2.5rem;
    border: none;
}

#consumption_images,
#panel_images,
#battery_images {
  display: flex;
  justify-content: center;
}

.consumption-option,
.option‐tile {
  padding: 1rem;
  margin: 0.4rem;
}

form label.form-label.fw-bold {
  padding-bottom: 0.5rem;
}

#custom_consumption_checkbox,
#custom_panel_checkbox,
#custom_battery_checkbox {
  margin-top: 0.5rem;
}

.consumption-option img,
.option‐tile img {
  margin-bottom: 0.5rem;
}

#consumption_input_wrapper,
#panel_input_wrapper,
#battery_input_wrapper {
  padding-top: 1rem;
}


.list-group .list-group-item a img {
  width: 1.25rem;
  height: auto;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* Responsive Settings Layout */
.settings-header {
    position: relative;
    z-index: 3;
}

.settings-sidebar {
    position: sticky;
    top: 80px;
}

@media (max-width: 767.98px) {
    .settings-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 80%;
        max-width: 320px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1050;
        padding: 1.25rem;
        overflow-y: auto;
    }

    body.settings-drawer-open .settings-sidebar {
        transform: translateX(0);
    }

    /* Backdrop element (added in settings header) */
    .settings-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    body.settings-drawer-open .settings-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Prevent background scroll when drawer open */
    body.settings-drawer-open {
        overflow: hidden;
    }
}

/* Settings content spacing on mobile */
@media (max-width: 767.98px) {
    .settings-card {
        padding: 1.25rem 1rem 1.5rem 1rem;
        margin-bottom: 2rem;
    }
    .settings-category { width: 45%; }
    .settings-text { width: 55%; font-size: 15px !important; }
    .w-70 { width: 100% !important; }

    /* Left-align value with label inside the left block on mobile */
    .settings-card .d-flex.justify-content-between .w-70 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .settings-card .settings-text { width: auto; }
    .settings-card .settings-category { width: auto; }
}

/* Detail outline button (white background, purple border/text) */
.btn-outline-detail {
  background: #fff;
  border: 1px solid #CFC8F2;
  color: #4E3CC3;
  border-radius: 12px;
  padding: 8px 18px;
  font-weight: 700;
}
.btn-outline-detail:hover { background: #F7F7FA; border-color: #B8AEEA; color: #4E3CC3; }

/* Add this CSS to your overview.jinja or main CSS file */

/* Unpaid transaction indicator styling */
.unpaid-transaction-indicator {
    background-color: #dc3545;  /* Red background */
    color: white;
    font-weight: bold;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: help;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
}

.unpaid-transaction-indicator:hover {
    background-color: #c82333;  /* Darker red on hover */
    transform: scale(1.1);
    transition: all 0.2s ease;
}