/*
|--------------------------------------------------------------------------
| HL Kom Lager - einheitliche Bedienoberfläche
|--------------------------------------------------------------------------
*/

:root {
    --hl-ui-primary: #0b73b9;
    --hl-ui-primary-hover: #075f9c;
    --hl-ui-primary-soft: #edf7fd;

    --hl-ui-text: #172033;
    --hl-ui-muted: #64748b;

    --hl-ui-border: #d8e4ee;
    --hl-ui-border-hover: #a9c6dc;

    --hl-ui-danger: #b42318;
    --hl-ui-danger-soft: #fff5f4;

    --hl-ui-radius: 12px;
    --hl-ui-shadow: 0 4px 12px rgba(15, 56, 92, .08);
}


/*
|--------------------------------------------------------------------------
| Filament Buttons
|--------------------------------------------------------------------------
*/

.fi-btn {
    min-height: 42px !important;
    padding: 0.62rem 1rem !important;

    border-radius: var(--hl-ui-radius) !important;
    border-width: 1px !important;
    border-style: solid !important;

    font-size: .9rem !important;
    font-weight: 650 !important;

    line-height: 1.15 !important;

    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease !important;
}

.fi-btn:hover {
    transform: translateY(-1px);
}

.fi-btn:active {
    transform: translateY(0);
}


/*
|--------------------------------------------------------------------------
| Primary
|--------------------------------------------------------------------------
*/

.fi-btn.fi-color-primary,
.fi-btn-color-primary {
    color: #ffffff !important;
    background: var(--hl-ui-primary) !important;
    border-color: var(--hl-ui-primary) !important;

    box-shadow:
        0 4px 10px rgba(11, 115, 185, .18) !important;
}

.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover {
    background: var(--hl-ui-primary-hover) !important;
    border-color: var(--hl-ui-primary-hover) !important;

    box-shadow:
        0 6px 14px rgba(11, 115, 185, .24) !important;
}


/*
|--------------------------------------------------------------------------
| Gray / Secondary
|--------------------------------------------------------------------------
*/

.fi-btn.fi-color-gray,
.fi-btn-color-gray {
    color: #334155 !important;
    background: #ffffff !important;
    border-color: var(--hl-ui-border) !important;

    box-shadow: 0 2px 6px rgba(15, 56, 92, .05) !important;
}

.fi-btn.fi-color-gray:hover,
.fi-btn-color-gray:hover {
    color: var(--hl-ui-primary-hover) !important;
    background: #f8fbfd !important;
    border-color: var(--hl-ui-border-hover) !important;
}


/*
|--------------------------------------------------------------------------
| Danger
|--------------------------------------------------------------------------
*/

.fi-btn.fi-color-danger,
.fi-btn-color-danger {
    color: var(--hl-ui-danger) !important;
    background: var(--hl-ui-danger-soft) !important;
    border-color: #efc5c1 !important;

    box-shadow: none !important;
}

.fi-btn.fi-color-danger:hover,
.fi-btn-color-danger:hover {
    color: #8f1d14 !important;
    background: #ffebe9 !important;
    border-color: #e9a9a3 !important;
}


/*
|--------------------------------------------------------------------------
| Icons in Buttons
|--------------------------------------------------------------------------
*/

.fi-btn svg {
    width: 18px !important;
    height: 18px !important;
}


/*
|--------------------------------------------------------------------------
| Header Actions
|--------------------------------------------------------------------------
*/

.fi-header-actions {
    gap: .65rem !important;
}


/*
|--------------------------------------------------------------------------
| Table Actions
|--------------------------------------------------------------------------
*/

.fi-ta-actions {
    gap: .35rem !important;
}


/*
|--------------------------------------------------------------------------
| Quick Actions
|--------------------------------------------------------------------------
*/

.hl-action-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.hl-action-card {
    display: flex;
    align-items: center;

    min-height: 96px;

    padding: 16px;

    gap: 13px;

    color: var(--hl-ui-text) !important;
    text-decoration: none !important;

    background: #ffffff;

    border:
        1px solid
        var(--hl-ui-border);

    border-radius: 15px;

    box-shadow:
        0 2px 8px
        rgba(15, 56, 92, .04);

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.hl-action-card:hover {
    transform: translateY(-2px);

    background: #fbfdff;

    border-color:
        var(--hl-ui-border-hover);

    box-shadow:
        0 9px 22px
        rgba(15, 56, 92, .10);
}

.hl-action-card--primary {
    border-color: #aed3e9;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f3faff 100%
        );
}

.hl-action-icon {
    display: flex;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    align-items: center;
    justify-content: center;

    color: var(--hl-ui-primary);

    background:
        var(--hl-ui-primary-soft);

    border-radius: 12px;
}

.hl-action-icon svg {
    width: 24px;
    height: 24px;
}

.hl-action-text {
    min-width: 0;
}

.hl-action-title {
    display: block;

    color: var(--hl-ui-text);

    font-size: .94rem;
    font-weight: 720;

    line-height: 1.25;
}

.hl-action-description {
    display: block;

    margin-top: 4px;

    color: var(--hl-ui-muted);

    font-size: .76rem;

    line-height: 1.35;
}


/*
|--------------------------------------------------------------------------
| Bereichstrenner
|--------------------------------------------------------------------------
*/

.hl-action-divider {
    margin:
        1.1rem 0 .85rem;

    border-top:
        1px solid #e5edf4;
}

.hl-action-secondary-title {
    margin-bottom: .75rem;

    color: #64748b;

    font-size: .75rem;
    font-weight: 700;

    letter-spacing: .04em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Form Controls
|--------------------------------------------------------------------------
*/

.fi-input-wrp,
.fi-select-input {
    border-radius: 11px !important;
}


/*
|--------------------------------------------------------------------------
| Tabs
|--------------------------------------------------------------------------
*/

.fi-tabs-item {
    border-radius: 10px !important;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {
    .hl-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hl-action-grid {
        grid-template-columns: 1fr;
    }

    .hl-action-card {
        min-height: 82px;
        padding: 13px;
    }

    .hl-action-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .fi-btn {
        min-height: 44px !important;
    }

    .fi-header-actions {
        width: 100%;
    }

    .fi-header-actions .fi-btn {
        justify-content: center;
    }
}