/* ================================
   Kahlonetrics — Shared Button Styles
   Requires theme.css variables.

   Usage:
     <button class="kn-btn kn-btn--primary">Save</button>
     <a href="..." class="kn-btn kn-btn--ghost">Cancel</a>
     <button class="kn-btn kn-btn--danger kn-btn--sm">Delete</button>

   Variants: --primary | --secondary | --ghost | --danger
   Sizes:    --sm | --lg | --icon
   ================================ */

.kn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    color: var(--color-text);
    transition: background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease,
                opacity 0.2s ease;
}

.kn-btn:disabled,
.kn-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Primary (filled accent) ─────────── */
.kn-btn--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
}
.kn-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.3);
}

/* ── Secondary (subtle filled) ───────── */
.kn-btn--secondary {
    background: var(--color-tile-bg);
    color: var(--color-text);
    border-color: var(--color-tile-border);
}
.kn-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-tile-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--color-shadow);
}

/* ── Ghost (outlined, accent on hover) ── */
.kn-btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-tile-border);
}
.kn-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

/* ── Danger (red outlined) ───────────── */
.kn-btn--danger {
    background: transparent;
    color: var(--color-error);
    border-color: var(--color-error);
}
.kn-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: rgba(252, 129, 129, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(252, 129, 129, 0.2);
}

/* ── Sizes ───────────────────────────── */
.kn-btn--sm {
    padding: 6px 14px;
    font-size: 12px;
}
.kn-btn--lg {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
}
.kn-btn--icon {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    gap: 0;
}

/* ── Layout modifier: full-width (e.g. for hero submit buttons) ── */
.kn-btn--block {
    width: 100%;
    display: flex;
}

/* ============================================================
   Row-actions (kebab menu in table rows)
   ============================================================
   Compact pattern for per-row CRUD actions (Bearbeiten / Verlauf /
   Entfernen / …). The kebab trigger (⋮) is always visible; the menu
   with the actual buttons stays collapsed until clicked.

   Layout:
     <div class="kn-row-actions">
       <div class="kn-row-actions__menu">[buttons…]</div>
       <button class="kn-row-actions__trigger">⋮</button>
     </div>

   The menu absolute-positions itself to the LEFT of the trigger so it
   pops out horizontally without affecting the row's natural height,
   and so adjacent rows don't shift when one row's menu is open. JS in
   assets/row_actions.js toggles aria-expanded on the container; this
   stylesheet just maps that attribute to a display flip.
*/
.kn-row-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.kn-row-actions__trigger {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 2px 8px;
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.kn-row-actions__trigger:hover,
.kn-row-actions[aria-expanded="true"] .kn-row-actions__trigger {
    color: var(--color-accent);
    border-color: var(--color-tile-border);
    background: var(--color-surface-alt);
}

.kn-row-actions__menu {
    display: none;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 6px;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    /* Opaque surface so it covers the cells it pops out over — the ghost
       buttons inside the menu are transparent themselves, so anything less
       than fully opaque shows through to the underlying row content. */
    background: var(--color-surface);
    border: 1px solid var(--color-tile-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    /* Stack above sibling cells (incl. status badges) when expanded. */
    z-index: 20;
    /* Don't truncate buttons even if the containing td/th does. */
    white-space: nowrap;
}
.kn-row-actions[aria-expanded="true"] .kn-row-actions__menu {
    display: flex;
}