/* ============================================================
   LAFGroupBox — stil dosyası
   Kullanım: index.html veya App.razor içinde referans verin:
     <link rel="stylesheet" href="laf_groupbox_styles.css" />
   ============================================================ */

.laf-groupbox {
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 10px !important;
    border-radius: 8px;
    overflow: hidden;
}

.laf-groupbox-header {
    position: relative;
    z-index: 1; /* gölge alttaki içeriğin üstünde kalsın */
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--mud-palette-background-grey);
    border-radius: 0px !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
}

.laf-groupbox-header--clickable {
    cursor: pointer;
}

    .laf-groupbox-header--clickable:hover {
        background-color: var(--mud-palette-action-hover);
    }

.laf-groupbox-chevron {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
    fill: currentColor;
    transition: transform .2s ease;
}

.laf-groupbox-chevron--up {
    transform: rotate(180deg);
}

.laf-groupbox-title {
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 600;
    user-select: none;
}

/* Collapse — grid-template-rows ile auto yüksekliğe yumuşak geçiş */
.laf-groupbox-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

.laf-groupbox-collapse--open {
    grid-template-rows: 1fr;
}

.laf-groupbox-collapse__inner {
    overflow: hidden;
    min-height: 0; /* grid içinde içeriğin taşmaması için */
}

.laf-groupbox-content {
    padding: 12px !important;
    overflow: hidden !important;
}

/* Üstteki ayraç çizgisi sadece header varken görünür */
.laf-groupbox-content--with-header {
    border-top: 1px solid var(--mud-palette-divider);
}