/* ========== Theme tokens (tweak here) ========== */
:root {
  /* Base button styling */
  --btn-bg:        #424242;  
  --btn-text:      #ffffff;  
  --btn-dim:       #8b94a7;  
  --btn-accent:    #8d8d8d;  
  --btn-radius:    8px;
  
  /* Base colors as RGB values for programmatic rgba generation */
  --color-link-rgb:   255, 46, 106;    /* Pink base */
  --color-popup-rgb:  37, 132, 50;     /* Green base */  
  --color-submit-rgb: 37, 90, 132;     /* Blue base */
  --color-file-rgb:   141, 126, 19;    /* Yellow base */
  
  /* Alpha values for consistent transparency levels */
  --alpha-bg:     0.15;
  --alpha-hover-35:  0.35;
  --alpha-hover-45:  0.45;
  --alpha-accent: 1.0;
  
  /* Generated button colors using programmatic rgba */
  --btn-link-bg:      rgba(var(--color-link-rgb), var(--alpha-bg));         
  --btn-link-hover:   rgba(var(--color-link-rgb), var(--alpha-hover-35));      
  --btn-link-accent:  rgba(var(--color-link-rgb), var(--alpha-accent));
    
  --btn-popup-bg:     rgba(var(--color-popup-rgb), var(--alpha-bg)); 
  --btn-popup-hover:  rgba(var(--color-popup-rgb), var(--alpha-hover-45)); 
  --btn-popup-accent: rgba(var(--color-popup-rgb), var(--alpha-accent));
    
  --btn-submit-bg:    rgba(var(--color-submit-rgb), var(--alpha-bg));       
  --btn-submit-hover: rgba(var(--color-submit-rgb), var(--alpha-hover-45));   
  --btn-submit-accent:rgba(var(--color-submit-rgb), var(--alpha-accent));
    
  --btn-file-bg:      rgba(var(--color-file-rgb), var(--alpha-bg));    
  --btn-file-hover:   rgba(var(--color-file-rgb), var(--alpha-hover-45));    
  --btn-file-accent:  rgba(var(--color-file-rgb), var(--alpha-accent));
}

/* ========== Standardized Button System ========== */
/* Base .btn class applies to all button elements */

button.btn, 
input[type="submit"].btn, 
a.btn,
.btn {
    display: inline-block;
    height: 40px;
    padding: 0 12px;
    /*margin: 0.25rem;*/
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-accent);
    color: var(--btn-text);
    text-align: center;
    text-decoration: none;
    border-radius: var(--btn-radius);
    cursor: pointer;  
    font: inherit;              
    vertical-align: middle;    
    line-height: 40px;           
    box-sizing: border-box; 
    align-items: center;
    gap: 10px;
    transition: background .15s ease, color .15s ease, transform .05s ease;
    white-space: nowrap;
    font-size: 0.8rem;
}

/* Specific vertical alignment for anchor buttons */
a.btn {
    display: inline-flex;
    align-items: center;
    line-height: normal;
}

/* Icon styling within buttons */
.btn i.fa-solid,
a.btn i.fa-solid {
    color: var(--btn-accent);
    font-size: 1rem;               
    width: 1.25rem;               
    text-align: center;
}

.btn .badge {
  display: inline-block;
  margin-left: .5em;
  padding: .1em .55em;
  border-radius: 0.2rem;
  font-size: .85em;
  background: var(--btn-accent);
  color: var(--btn-text);
  margin-left:8px;
}

/* ========== Button Variants ========== */

/* Pink buttons (btn-link) */
button.btn.btn-link, 
input[type="submit"].btn.btn-link, 
a.btn.btn-link,
.btn.btn-link {
    background-color: var(--btn-link-bg);
    border-color: var(--btn-link-accent);
    color: var(--btn-text);
}

/* Pink buttons (btn-link) subtle variant */
button.btn.btn-link.btn-subtle, 
input[type="submit"].btn.btn-link.btn-subtle, 
a.btn.btn-link.btn-subtle,
.btn.btn-link.btn-subtle {
    background-color: transparent;
    border-color: transparent;
    color: var(--btn-dim);
}

/* Pink buttons (btn-link) subtle hover */
button.btn.btn-link.btn-subtle:hover, 
input[type="submit"].btn.btn-link.btn-subtle:hover, 
a.btn.btn-link.btn-subtle:hover,
.btn.btn-link.btn-subtle:hover {
    background-color: var(--btn-link-bg);
    color: var(--btn-text);
}

.btn.btn-link .badge {
    background-color: var(--btn-link-accent);
}
.btn.btn-link.btn-subtle .badge {
    color: var(--btn-dim);
    background-color: var(--btn-bg);
}

.btn.btn-link i.fa-solid {
    color: var(--btn-link-accent);
}
.btn.btn-link.btn-subtle i.fa-solid {
    color: var(--btn-dim);
}


button.btn.btn-link:hover, 
input[type="submit"].btn.btn-link:hover, 
a.btn.btn-link:hover,
.btn.btn-link:hover,
button.btn.btn-link[aria-current="page"], 
input[type="submit"].btn.btn-link[aria-current="page"], 
a.btn.btn-link[aria-current="page"],
.btn.btn-link[aria-current="page"] {
    background-color: var(--btn-link-hover);
}


.btn.btn-link.btn-subtle:hover i.fa-solid {
    color: var(--btn-link-accent);
}

.btn.btn-link.btn-subtle:hover .badge {
    color: var(--btn-text);
    background-color: var(--btn-link-accent);
}

/* aria-current="page" state for subtle link buttons */
button.btn.btn-link.btn-subtle[aria-current="page"], 
input[type="submit"].btn.btn-link.btn-subtle[aria-current="page"], 
a.btn.btn-link.btn-subtle[aria-current="page"],
.btn.btn-link.btn-subtle[aria-current="page"] {
    background-color: var(--btn-link-bg);
    color: var(--btn-text);
}

.btn.btn-link.btn-subtle[aria-current="page"] i.fa-solid,
.btn.btn-link.btn-subtle[aria-current="page"] i.fa-regular {
    color: var(--btn-link-accent);
}

.btn.btn-link.btn-subtle[aria-current="page"] .badge {
    color: var(--btn-text);
    background-color: var(--btn-link-accent);
}






button.btn.btn-popup, 
input[type="submit"].btn.btn-popup, 
a.btn.btn-popup,
.btn.btn-popup {
    background-color: var(--btn-popup-bg);
    border-color: var(--btn-popup-accent);
    color: var(--btn-text);
}


button.btn.btn-popup.btn-subtle, 
input[type="submit"].btn.btn-popup.btn-subtle, 
a.btn.btn-popup.btn-subtle,
.btn.btn-popup.btn-subtle {
    background-color: transparent;
    border-color: transparent;
    color: var(--btn-dim);
}


button.btn.btn-popup.btn-subtle:hover, 
input[type="submit"].btn.btn-popup.btn-subtle:hover, 
a.btn.btn-popup.btn-subtle:hover,
.btn.btn-popup.btn-subtle:hover {
    background-color: var(--btn-popup-bg);
    color: var(--btn-text);
}

.btn.btn-popup .badge {
    background-color: var(--btn-popup-accent);
}
.btn.btn-popup.btn-subtle .badge {
    color: var(--btn-dim);
    background-color: var(--btn-bg);
}

.btn.btn-popup i.fa-solid {
    color: var(--btn-popup-accent);
}
.btn.btn-popup.btn-subtle i.fa-solid {
    color: var(--btn-dim);
}

button.btn.btn-popup:hover, 
input[type="submit"].btn.btn-popup:hover, 
a.btn.btn-popup:hover,
.btn.btn-popup:hover,
button.btn.btn-popup[aria-current="page"], 
input[type="submit"].btn.btn-popup[aria-current="page"], 
a.btn.btn-popup[aria-current="page"],
.btn.btn-popup[aria-current="page"] {
    background-color: var(--btn-popup-hover);
    color: var(--btn-text);
}

.btn.btn-popup.btn-subtle:hover i.fa-solid {
    color: var(--btn-popup-accent);
}

.btn.btn-popup.btn-subtle:hover .badge {
    color: var(--btn-text);
    background-color: var(--btn-popup-accent);
}

/* aria-current="page" state for subtle popup buttons */
button.btn.btn-popup.btn-subtle[aria-current="page"], 
input[type="submit"].btn.btn-popup.btn-subtle[aria-current="page"], 
a.btn.btn-popup.btn-subtle[aria-current="page"],
.btn.btn-popup.btn-subtle[aria-current="page"] {
    background-color: var(--btn-popup-bg);
    color: var(--btn-text);
}

.btn.btn-popup.btn-subtle[aria-current="page"] i.fa-solid,
.btn.btn-popup.btn-subtle[aria-current="page"] i.fa-regular {
    color: var(--btn-popup-accent);
}

.btn.btn-popup.btn-subtle[aria-current="page"] .badge {
    color: var(--btn-text);
    background-color: var(--btn-popup-accent);
}






/* Submit button styling (default blue) */
button.btn:not(.btn-link):not(.btn-popup), 
input[type="submit"].btn:not(.btn-link):not(.btn-popup) {
    background-color: var(--btn-submit-bg);
    border-color: var(--btn-submit-accent);
    color: var(--btn-text);
}

button.btn:not(.btn-link):not(.btn-popup):hover, 
input[type="submit"].btn:not(.btn-link):not(.btn-popup):hover {
    background-color: var(--btn-submit-hover);
}

/* File upload button styling */
label.btn {
    background-color: var(--btn-file-bg);
    border-color: var(--btn-file-accent);
    color: var(--btn-text);
}

label.btn:hover {
    background-color: var(--btn-file-hover);
}


.button_group {
     display: flex; gap: 0.5rem; align-items: center;
}

.button_group > .nav-options { margin-top:1.3rem}