html, body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: 'Roboto', sans-serif;
    overscroll-behavior: none;
}

html, body {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* z-index: DxWindow(auto) < TopBar(2000) < Menu(10003) < DxPopup(10100+) < Mesaj(11100) */
:root {
    --stus-topbar-height: 60px;
    --stus-z-topbar: 2000;
    --stus-z-sidebar-overlay: 10001;
    --stus-z-sidebar: 10002;
    --stus-z-brand-menu: 10003;
    --stus-z-popup-base: 10100;
    --stus-z-message: 11100;
}

#page {
    padding: 0;
    margin: 0;
}

.main-loginpage {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.main-page-contanier {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #f1f5f9;
    position: relative;
}

.main-page-brand-area {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    z-index: var(--stus-z-brand-menu);
    pointer-events: none;
}

    .main-page-brand-area > * {
        pointer-events: auto;
    }

    .main-page-brand-area.is-blocked > * {
        pointer-events: none;
        opacity: 0.45;
    }

.main-page-brand-text {
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.main-page-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.main-page-body {
    flex: 1; /* Header'dan arta kalan tüm yüksekliği kapla */
    display: flex;
    flex-direction: column; /* İçindeki StusLayout'u flex kurallarına göre diz */
    overflow-y: auto; /* Sadece bu alan kaydırılabilir olsun */
}

    .main-page-body > * {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

.main-page-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: var(--stus-z-sidebar);
    /* Sihirli Tuş logo mavisi (#41A9E0): açıktan koyuya */
    background-image: linear-gradient(180deg, #2B9AD4 0%, #1578AD 35%, #0A4A6E 72%, #041C2E 100%);
    transition: width 0.3s ease;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    padding-top: 70px;
    white-space: nowrap;
}

    .main-page-sidebar.open {
        width: 300px;
    }

    .main-page-sidebar.closed {
        width: 0px;
    }


.main-page-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 20px;
    flex-shrink: 0;
    z-index: var(--stus-z-topbar);
    position: relative;
}

.main-page-top-bar-combo {
    width: 250px;
    max-width: 100%;
    flex-shrink: 0;
}

.main-page-open-windows-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    color: #212529;
    text-align: left;
    cursor: pointer;
}

.main-page-open-windows-btn:hover {
    border-color: #86b7fe;
}

.main-page-open-windows-btn-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-page-open-windows-btn-count {
    flex: 0 0 auto;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 6px;
    border-radius: 999px;
    background: #0d6efd;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4rem;
    text-align: center;
}

.main-page-open-windows-popup .dxbl-popup-content {
    padding: 0;
}

.main-page-open-windows-empty {
    padding: 1rem;
    color: #6c757d;
}

.main-page-open-windows-list {
    display: flex;
    flex-direction: column;
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.main-page-open-windows-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
    color: #212529;
    text-align: left;
    cursor: pointer;
}

.main-page-open-windows-item:last-child {
    border-bottom: 0;
}

.main-page-open-windows-item:hover {
    background: #f1f5f9;
}

.main-page-open-windows-item.is-active {
    background: #0d6efd;
    color: #fff;
}

.main-page-open-windows-item.is-active .main-page-open-windows-item-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.main-page-open-windows-item-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-page-open-windows-item-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e9ecef;
    color: #6c757d;
    font-size: 0.75rem;
}

    /* Mobilde top-bar icerigi sigmazsa alt satira tasinir ve yukseklik genisler */
    .main-page-top-bar.is-mobil {
        flex-wrap: wrap;
        height: auto;
        min-height: 60px;
        row-gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

        .main-page-top-bar.is-mobil .main-page-top-bar-combo {
            flex: 1 1 100%;
            width: 100%;
            order: 3;
        }

.main-page-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Arkada şık bir karartı oluşturur */
    z-index: var(--stus-z-sidebar-overlay);
    cursor: pointer;
}

/* StusList popup */
dxbl-popup:has(.stus-list-wrapper) .dxbl-popup-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.stus-list-wrapper {
    min-height: 200px;
    height: 100%;
    width: 100%;
    background: #fff;
}

.stus-list-loading,
.stus-list-loading .dxbl-loading-panel {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.stus-list-loading-content {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stus-list-header {
    flex-shrink: 0;
    background-color: #f8fafc;
}

.stus-list-export .dxbl-btn {
    min-width: auto;
}

.stus-list-title {
    font-size: 1rem;
    color: #1e293b;
}

.stus-list-grid-container {
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

.stus-list-grid-placeholder {
    height: 100%;
    min-height: 0;
}

.stus-list-footer {
    flex-shrink: 0;
}

/* Grid hucre metinleri okunakli olsun (secili satirda tema beyaz yazi birakiyordu) */
.stus-list-grid {
    height: 100%;
    width: 100%;
    min-height: 0;
    min-width: 0;
    flex: 1 1 0;
    --dxbl-grid-row-color: #1e293b;
    --dxbl-grid-selected-row-bg: #dbeafe;
    --dxbl-grid-selected-row-color: #1e293b;
    --dxbl-grid-focus-row-bg: #eff6ff;
    --dxbl-grid-focus-row-color: #1e293b;
}

    .stus-list-grid td,
    .stus-list-grid .dxbl-grid-cell-display-text,
    .stus-list-grid .dxbl-grid-data-cell,
    .stus-list-grid .dxbl-grid-data-row > td {
        color: #1e293b !important;
    }

    .stus-list-grid .dxbl-grid-selected-row > td,
    .stus-list-grid tr.dxbl-grid-selected-row > td,
    .stus-list-grid .dxbl-grid-focused-row > td,
    .stus-list-grid tr.dxbl-grid-focused-row > td {
        background-color: #dbeafe !important;
        color: #1e293b !important;
    }

        .stus-list-grid .dxbl-grid-selected-row > td *,
        .stus-list-grid .dxbl-grid-focused-row > td * {
            color: #1e293b !important;
        }

    .stus-list-grid .dxbl-grid-header-row > td,
    .stus-list-grid .dxbl-grid-header-row > th {
        color: #334155 !important;
        font-weight: 600;
    }

/*.h-100 {
    height: 100% !important;
}

.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-center {
    justify-content: center !important;
}*/
/* Bekleme göstergesi: logo şablonu tam görünsün (varsayılan 24px kapsayıcı logoyu kırpıyor). */
.dxbl-wait-indicator.dxbl-wait-indicator-template {
    width: 48px !important;
    height: 48px !important;
}

/* Marka fontu: Fredoka SemiBold (yerelden servis edilir; logo/intro yazıları için). */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/fredoka600.ttf') format('truetype');
    font-display: swap;
}

/* Üst bar marka yazısı Fredoka ile. */
.main-page-brand-text {
    font-family: 'Fredoka', 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}