/*
 * DOS next-gen UI bilesenleri (next-gen.md B2).
 *
 * themes.css'teki --dos-* / --brand-* token'larini tuketir;
 * themes.css'ten (partials.tenant-style) SONRA yuklenmelidir.
 *
 * Yalnizca .dos-* onekli class'lar icerir — mevcut BS3 / style.css /
 * style-red.css selektorlerine DOKUNMAZ. Eski sayfalar etkilenmez;
 * yeni/elden gecen sayfalar bu class'lari kullanir.
 *
 * Kullanim ornekleri: docs/nextgen-ui.md
 */

/* ============================== Kart ============================== */

.dos-card {
    background: #fff;
    border: 1px solid var(--dos-border);
    border-radius: var(--dos-radius-lg);
    box-shadow: var(--dos-shadow-sm);
    margin-bottom: var(--dos-space-4);
}
.dos-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dos-space-2);
    padding: var(--dos-space-3) var(--dos-space-4);
    border-bottom: 1px solid var(--dos-border);
}
.dos-card-title {
    margin: 0;
    font-size: var(--dos-font-size-lg);
    font-weight: 600;
    color: var(--dos-text);
}
.dos-card-body {
    padding: var(--dos-space-4);
}
.dos-card-footer {
    padding: var(--dos-space-3) var(--dos-space-4);
    border-top: 1px solid var(--dos-border);
    background: var(--dos-bg-muted);
    border-radius: 0 0 var(--dos-radius-lg) var(--dos-radius-lg);
}

/* ============================== Badge ============================== */

.dos-badge {
    display: inline-block;
    padding: 2px var(--dos-space-2);
    font-size: var(--dos-font-size-sm);
    font-weight: 600;
    line-height: 1.5;
    border-radius: 10px;
    color: #fff;
    white-space: nowrap;
    vertical-align: middle;
}
.dos-badge-primary { background: var(--brand-primary); }
.dos-badge-success { background: var(--dos-success); }
.dos-badge-warning { background: var(--dos-warning); }
.dos-badge-danger  { background: var(--dos-danger); }
.dos-badge-info    { background: var(--dos-info); }
.dos-badge-muted   { background: var(--dos-text-muted); }

/* =========================== Bos durum ============================ */

.dos-empty-state {
    padding: var(--dos-space-6) var(--dos-space-4);
    text-align: center;
    color: var(--dos-text-muted);
}
.dos-empty-state-icon {
    font-size: 40px;
    margin-bottom: var(--dos-space-3);
    opacity: 0.45;
}
.dos-empty-state-title {
    margin: 0 0 var(--dos-space-1);
    font-size: var(--dos-font-size-lg);
    font-weight: 600;
    color: var(--dos-text);
}
.dos-empty-state-text {
    margin: 0 0 var(--dos-space-3);
    font-size: var(--dos-font-size);
}

/* ============================= Spinner ============================= */

.dos-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--dos-border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: dos-spin 0.7s linear infinite;
    vertical-align: middle;
}
.dos-spinner-sm { width: 13px; height: 13px; }
.dos-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.dos-spinner-label {
    margin-left: var(--dos-space-2);
    color: var(--dos-text-muted);
    vertical-align: middle;
}
@keyframes dos-spin {
    to { transform: rotate(360deg); }
}

/* Buton loading durumu (BS3 .btn uzerine JS ile eklenir: dosBtnLoading) */
.dos-btn-loading {
    pointer-events: none;
    opacity: 0.65;
}
.dos-btn-loading .dos-spinner {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    margin-right: var(--dos-space-1);
}

/* ========================= Tablo / liste (B3) ========================= */
/*
 * Mevcut .responsive-table sarmalayicisina EKLENEN opt-in class'lar;
 * class verilmeyen tablolarda sifir etki. Ornek:
 *   <div class="responsive-table dos-table-sticky dos-table-hover dos-table-compact">
 */

/* Satir hover (BS3 .table-hover kullanmayan tablolar icin) */
.dos-table-hover > .table > tbody > tr:hover > td,
.dos-table-hover > .table > tbody > tr:hover > th {
    background-color: var(--dos-bg-muted);
}

/* Sticky baslik: sarmalayici dikey scroll kabi olur.
 * Yukseklik --dos-table-max-height ile sayfa bazinda ezilebilir. */
.dos-table-sticky {
    overflow: auto;
    max-height: var(--dos-table-max-height, 60vh);
}
.dos-table-sticky > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    /* border-collapse sticky'de kenarligi kaydirir; alt cizgi golgeyle korunur */
    box-shadow: 0 1px 0 var(--dos-border);
}

/* Yogunluk */
.dos-table-compact > .table > thead > tr > th,
.dos-table-compact > .table > tbody > tr > td,
.dos-table-compact > .table > tbody > tr > th,
.dos-table-compact > .table > tfoot > tr > td {
    padding: var(--dos-space-1) var(--dos-space-2);
}
.dos-table-comfort > .table > thead > tr > th,
.dos-table-comfort > .table > tbody > tr > td,
.dos-table-comfort > .table > tbody > tr > th,
.dos-table-comfort > .table > tfoot > tr > td {
    padding: var(--dos-space-3) var(--dos-space-4);
}

/* Mobil blok modunda (style.css ≤800px) sticky/scroll kabi devre disi */
@media only screen and (max-width: 800px) {
    .dos-table-sticky {
        max-height: none;
        overflow: visible;
    }
    .dos-table-sticky > .table > thead > tr > th {
        position: static;
        box-shadow: none;
    }
}

/* ============================== Toast ============================== */

/* Modal (1050) ve custom-alert (1060) ustunde kalmali. */
.dos-toast-container {
    position: fixed;
    top: var(--dos-space-4);
    right: var(--dos-space-4);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--dos-space-2);
    max-width: 340px;
}
.dos-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--dos-space-2);
    padding: var(--dos-space-3) var(--dos-space-4);
    border-radius: var(--dos-radius);
    border-left: 3px solid var(--dos-info);
    background: #fff;
    color: var(--dos-text);
    box-shadow: var(--dos-shadow);
    font-size: var(--dos-font-size);
    cursor: pointer;
    animation: dos-toast-in var(--dos-transition);
}
.dos-toast-success { border-left-color: var(--dos-success); }
.dos-toast-warning { border-left-color: var(--dos-warning); }
.dos-toast-danger  { border-left-color: var(--dos-danger); }
.dos-toast-info    { border-left-color: var(--dos-info); }
.dos-toast.dos-toast-out {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}
@keyframes dos-toast-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================== Bilgi listesi (key/value) ============================== */

/* /me profil sayfasindaki pf-info deseninin genel hali (docs/nextgen-ui.md). */
.dos-info { display: flex; flex-direction: column; }
.dos-info .dos-row {
    display: flex;
    justify-content: space-between;
    gap: var(--dos-space-4);
    padding: 11px 2px;
    border-bottom: 1px solid #f0f3f7;
    font-size: 14px;
}
.dos-info .dos-row:last-child { border-bottom: 0; }
.dos-info .dos-key { color: #7b8a99; font-weight: 600; flex: 0 0 auto; }
.dos-info .dos-val { color: var(--dos-text); text-align: right; word-break: break-word; }
@media (max-width: 600px) {
    .dos-info .dos-row { flex-direction: column; gap: 2px; }
    .dos-info .dos-val { text-align: left; }
}

/* Yumusak durum rozeti (pf-status'un geneli; dolgulu .dos-badge'in soft alternatifi) */
.dos-pill { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.dos-pill-success { background: #e8f8f0; color: #18a058; }
.dos-pill-info    { background: #e7f2fd; color: #2d8cf0; }
.dos-pill-warning { background: #fff6ec; color: #e67e22; }
.dos-pill-danger  { background: #fdecec; color: #e74c3c; }
.dos-pill-default { background: #eef1f6; color: #7b8a99; }