/* ========================================================= */
/* BASE: gælder både <a> og <button>                          */
/* ========================================================= */
.href-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: normal;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
    transition: all 0.15s ease-in-out;
    background: transparent; /* gør <button> pænere */
}

    /* Focus ring (Bootstrap-ish default) */
    .href-btn:focus,
    .href-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    /* Active klik føles lækkert */
    .href-btn:active {
        transform: translateY(1px);
    }

    /* Disabled */
    .href-btn:disabled,
    .href-btn.disabled {
        opacity: 0.55;
        pointer-events: none;
        cursor: not-allowed;
    }


/* ========================================================= */
/* LARGE PURPLE (Primary action)                              */
/* ========================================================= */
.href-large-purple {
    padding: 10px 18px;
    font-size: 16px;
    background: #6f42c1;
    border: 2px solid #6f42c1;
    color: #fff;
}

    .href-large-purple:hover {
        background: #5e35b1;
        border-color: #5e35b1;
        color: #fff;
    }

    .href-large-purple:focus,
    .href-large-purple:focus-visible {
        box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
    }


/* ========================================================= */
/* MEDIUM OUTLINE (btn-sm feeling)                            */
/* ========================================================= */
.href-medium-blue,
.href-medium-red {
    padding: 6px 14px;
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    background: transparent;
}

/* Blue */
.href-medium-blue {
    border-color: #0d6efd;
    color: #0d6efd;
}

    .href-medium-blue:hover {
        background: #0d6efd;
        color: #fff;
    }

/* Red */
.href-medium-red {
    border-color: #dc3545;
    color: #dc3545;
}

    .href-medium-red:hover {
        background: #dc3545;
        color: #fff;
    }

    .href-medium-red:focus,
    .href-medium-red:focus-visible {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }


/* ========================================================= */
/* LARGE GRAY GLASS (Light blur variant)                      */
/* Secondary / Luk / Annuller                                */
/* ========================================================= */
.href-large-gray-glass {
    padding: 10px 18px;
    font-size: 16px;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(200,200,200,0.6);
    color: #333;
}

    .href-large-gray-glass:hover {
        background: rgba(255,255,255,0.75);
        border-color: rgba(180,180,180,0.8);
        color: #000;
    }

    .href-large-gray-glass:focus,
    .href-large-gray-glass:focus-visible {
        box-shadow: 0 0 0 0.2rem rgba(150,150,150,0.25);
    }


/* ========================================================= */
/* LARGE GRAY DARK GLASS (Dark admin layout)                  */
/* ========================================================= */
.href-large-gray-dark-glass {
    padding: 10px 18px;
    font-size: 16px;
    background: rgba(40,40,40,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
}

    .href-large-gray-dark-glass:hover {
        background: rgba(40,40,40,0.75);
        border-color: rgba(255,255,255,0.15);
        color: #fff;
    }

    .href-large-gray-dark-glass:focus,
    .href-large-gray-dark-glass:focus-visible {
        box-shadow: 0 0 0 0.2rem rgba(200,200,200,0.25);
    }


/* ========================================================= */
/* MEDIUM GRAY GLASS (Subtle list action)                     */
/* ========================================================= */
.href-medium-gray-glass {
    padding: 6px 14px;
    font-size: 14px;
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(160,160,160,0.5);
    color: #444;
}

    .href-medium-gray-glass:hover {
        background: rgba(255,255,255,0.65);
        color: #000;
    }


/* ========================================================= */
/* LARGE SOFT GRAY (No blur fallback)                         */
/* Bruges hvis backdrop-filter ikke ønskes                    */
/* ========================================================= */
.href-large-gray-soft {
    padding: 10px 18px;
    font-size: 16px;
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    color: #495057;
}

    .href-large-gray-soft:hover {
        background: #e9ecef;
        border-color: #ced4da;
    }


/* Optional subtle premium hover */
.href-large-gray-glass:hover,
.href-large-gray-dark-glass:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}



/* ========================================================= */
/* EKSEMPLER PÅ BRUG                                          */
/* ========================================================= */

/*
PRIMARY

<a href="/Admin/Contingent/Create" class="href-btn href-large-purple">
  Opret kontingent
</a>

<button type="submit" class="href-btn href-large-purple">
  Opret kontingent
</button>


EDIT / DELETE

<a href="/Admin/Contingent/Edit/5" class="href-btn href-medium-blue">
  Rediger
</a>

<a href="/Admin/Contingent/Delete/5" class="href-btn href-medium-red">
  Slet
</a>


SECONDARY / LUK / ANNULLER

<a href="#" class="href-btn href-large-gray-glass">
  Luk
</a>

<button type="button" class="href-btn href-medium-gray-glass">
  Annuller
</button>


DARK ADMIN VARIANT

<a href="#" class="href-btn href-large-gray-dark-glass">
  Luk
</a>


FALLBACK UDEN BLUR

<a href="#" class="href-btn href-large-gray-soft">
  Tilbage
</a>

*/