/* Baseline: inherit Bootstrap's default text color */
#proc_btn i,
#needs_btn i,
#wait_btn i,
#trash_btn i,
#subscribe_btn i,
#unsubscribe_btn i {
    color: inherit !important;
    transition: color 0.2s ease;
}

/* Reveal color on hover/focus (even when outline buttons flip to dark on hover) */
#proc_btn:hover i,
#proc_btn:focus-visible i {
    color: var(--bs-primary) !important;
}

#needs_btn:hover i,
#needs_btn:focus-visible i {
    color: var(--bs-secondary) !important;
}

#wait_btn:hover i,
#wait_btn:focus-visible i {
    color: var(--bs-warning) !important;
}

#trash_btn:hover i,
#trash_btn:focus-visible i {
    color: var(--bs-danger) !important;
}

#subscribe_btn:hover i,
#subscribe_btn:focus-visible i {
    color: var(--bs-primary) !important;
}

#unsubscribe_btn:hover i,
#unsubscribe_btn:focus-visible i {
    color: var(--bs-danger) !important;
}

/* Persist color when selected (btn-dark applied by your R logic) */
#proc_btn.btn-dark i {
    color: var(--bs-success) !important;
}

#needs_btn.btn-dark i {
    color: var(--bs-secondary) !important;
}

#wait_btn.btn-dark i {
    color: var(--bs-warning) !important;
}

#trash_btn.btn-dark i {
    color: var(--bs-danger) !important;
}

#subscribe_btn.btn-dark i {
    color: var(--bs-success) !important;
}

#unsubscribe_btn.btn-dark i {
    color: var(--bs-danger) !important;
}

/* Keep selected dark buttons from dimming on hover/active (Minty/iOS) */
.move-btn.btn-dark,
.sub-btn.btn-dark {
    opacity: 1 !important;
}

.move-btn.btn-dark:hover,
.move-btn.btn-dark:focus-visible,
.move-btn.btn-dark:active,
.sub-btn.btn-dark:hover,
.sub-btn.btn-dark:focus-visible,
.sub-btn.btn-dark:active {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
    color: #fff !important;
    opacity: 1 !important;
    -webkit-tap-highlight-color: transparent;
    /* iOS tap flash */
}




 #subscribe_btn,
 #unsubscribe_btn {
     font-size: clamp(0.8rem, 2.5vw, 1rem);
 }

 .square-btn {
     aspect-ratio: 1 / 1;
     /* makes them perfectly square */
     min-width: 0;
     /* ensures flex can shrink evenly */
     font-size: clamp(0.7rem, 3vw, 0.85rem);
     /* responsive! */
     line-height: 1.2;
     /* keeps multi-line labels tidy */
     white-space: normal;
     /* allow wrapping */
 }

 .square-btn i {
     display: block;
     font-size: 1.4rem;
     margin-bottom: 0.4rem;
 }

 .action-grid-4 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* equal widths */
     gap: .5rem;
     height: 100%;
     align-items: center;
     /* center children vertically */

 }

 .action-grid-4 .btn.square-btn {
     aspect-ratio: 1 / 1;
     /* ✅ enforce perfect square */
     height: auto;
     /* ✅ let aspect ratio control height */
 }

 .action-grid-4 .btn {
     height: 90%;
     /* each button fills the row height */
 }

 .subscription-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* 4 equal columns */
     gap: .5rem;
     width: 90%;
     margin: 0 auto;
     align-items: center;
     /* vertical centering */
 }

 .grid-span-2 {
     grid-column: span 2;
 }

 .subscription-grid .btn {
     height: 90%;
 }

 /* optional row fill */

 .action-grid-2 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: .5rem;
     align-items: start;
     /* instead of center or stretch */
 }