/*
 * File: components-buttons.css
 * Project: ABC Miet-WC Touren-Planer PWA
 *
 * Gemeinsame Button-Komponenten + Animations-Keyframes.
 * Alle Buttons erfüllen die Mindest-Touch-Target-Größe von 2.75rem
 * (Apple HIG / Material 3) für angenehme Touch-Bedienung.
 */

/* ============================================================
   GRADIENT-UTILITIES
   Einheitliche 135°-Verläufe – ersetzen die ehemals 21 inline
   linear-gradient(135deg, …)-Definitionen.
   ============================================================ */
.btn-gradient-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)); }
.btn-gradient-accent  { background: linear-gradient(135deg, var(--color-accent),  var(--color-accent-strong)); }
.btn-gradient-danger  { background: linear-gradient(135deg, var(--color-danger),  var(--color-danger-strong)); }
.btn-gradient-info    { background: linear-gradient(135deg, var(--color-info),    var(--color-info-strong)); }
.btn-gradient-dark    { background: linear-gradient(135deg, var(--color-neutral-700), var(--color-neutral-600)); }

/* ============================================================
   BUTTON-RECORD – Standard-Aktionsbutton (Detailansicht)
   ============================================================ */
.button-record {
    width: calc(50% - .5rem);
    padding: .65rem var(--space-2);
    margin: var(--space-1);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
    border: none;
    color: var(--color-text-inv);
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: filter var(--transition), transform var(--transition), box-shadow var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--touch-target);
    cursor: pointer;
}
.button-record:active   { filter: brightness(.92); transform: scale(.97); box-shadow: var(--shadow-sm); }
.button-record:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.6); }

.button-row {
    display: block;
    white-space: nowrap;
    border-bottom: var(--space-2) solid var(--color-border-strong);
    padding-bottom: .35rem;
}

.choice  { margin-right: .5%; }

/* ============================================================
   SEMANTISCHE BUTTON-VARIANTEN
   ============================================================ */
.unset {
    background: linear-gradient(135deg, var(--color-danger), var(--color-danger-strong)) !important;
    font-weight: bold;
    color: var(--color-text-inv) !important;
}
.back {
    background: var(--color-accent) !important;
    font-weight: bold;
    color: #1a1a1a !important;
}
.location {
    width: calc(100% - .5rem);
    background: linear-gradient(135deg, var(--color-info), var(--color-info-strong)) !important;
    font-weight: bold;
    font-size: var(--text-lg);
    color: var(--color-text-inv) !important;
    margin-top: .35rem;
}

/* ============================================================
   OPTION-LINK / OPTION-LINK-BACK
   Vollbreite Aktionslinks in den Optionsmenüs der Detailansicht.
   ============================================================ */
.option-link,
.option-link-back {
    padding: .55rem var(--space-2);
    border: none;
    font-weight: bold;
    font-size: var(--text-sm);
    color: var(--color-text-inv);
    cursor: pointer;
    border-radius: var(--radius-md);
    width: calc(100% - 1rem);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    box-shadow: var(--shadow-sm);
    transition: filter var(--transition), transform var(--transition);
    overflow: hidden;
    min-height: var(--touch-target);
}
.option-link      { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)); }
.option-link-back { background: linear-gradient(135deg, var(--color-danger),  var(--color-danger-strong)); }
.option-link:active,
.option-link-back:active { filter: brightness(.9); transform: scale(.98); }

.option-link-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes blink {
    50% { background-color: var(--color-red-700); }
}
@keyframes blinkborder {
    50% { border: .25rem solid var(--color-danger); }
}
@keyframes blinkborder-list {
    50% {
        border-top:    1.5rem solid var(--color-danger);
        border-right:  .25rem solid var(--color-danger);
        border-bottom: 1.5rem solid var(--color-danger);
        border-left:   .25rem solid var(--color-danger);
    }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}