/* ============================================================
   Avartis Nova – Standart Kart Bileşenleri  (av-card-*)
   Bootstrap .card sınıflarıyla çakışmaz.
   Değişkenler: general-variables.css
   ============================================================ */

/* ── 1. av-card-header  ─────────────────────────────────────
   Kullanım: ikon + başlık içeren kart üst bandı
   <div class="av-card-header">
       <i class="mdi mdi-..."></i>
       <span>Başlık</span>
   </div>
   ─────────────────────────────────────────────────────────── */
.av-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: calc(var(--bs-card-border-radius, 0.375rem) - 1px)
                   calc(var(--bs-card-border-radius, 0.375rem) - 1px) 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #343a40;
}

.av-card-header > i {
    font-size: 18px;
    color: var(--av-inner-btn-bg, #2b697d);
}

/* ── 1b. av-card-header — sol/sağ bölümlü varyant  ─────────
   Kullanım: sol tarafta ikon+başlık, sağ tarafta aksiyon (select, buton)
   <div class="av-card-header">
       <div class="av-card-header-left">
           <i class="mdi mdi-..."></i>
           <div>
               <p class="av-card-section-title">Başlık</p>
               <p class="av-card-section-subtitle">Alt başlık</p>
           </div>
       </div>
       <div class="av-card-header-right">...</div>
   </div>
   ─────────────────────────────────────────────────────────── */
.av-card-header:has(.av-card-header-left) {
    justify-content: space-between;
    flex-wrap: wrap;
}

.av-card-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #343a40;
    flex: 1;
    min-width: 0;
}

.av-card-header-left > i {
    font-size: 20px;
    color: var(--av-inner-btn-bg, #2b697d);
    flex-shrink: 0;
}

/* ── 2. av-card-subtitle  ───────────────────────────────────
   Kullanım: kart içinde açıklama/alt başlık satırı
   <p class="av-card-subtitle">Açıklama metni</p>
   ─────────────────────────────────────────────────────────── */
.av-card-subtitle {
    font-size: 12px;
    color: #868e96;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── 3. av-card-section-header  ─────────────────────────────
   Kullanım: ikon + başlık + alt başlık içeren bölüm başlığı
   (kart yerine .appointments gibi bir wrapper içinde)
   <div class="av-card-section-header">
       <i class="mdi mdi-..."></i>
       <div>
           <p class="av-card-section-title">Başlık</p>
           <p class="av-card-section-subtitle">Alt başlık</p>
       </div>
   </div>
   ─────────────────────────────────────────────────────────── */
.av-card-section-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 0 16px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.av-card-section-header > i {
    font-size: 22px;
    color: var(--av-inner-btn-bg, #2b697d);
    margin-top: 1px;
    flex-shrink: 0;
}

.av-card-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #343a40;
    margin: 0 0 3px;
}

.av-card-section-subtitle {
    font-size: 12px;
    color: #868e96;
    margin: 0;
    line-height: 1.4;
}

/* ── 4. av-card-legend-bar  ─────────────────────────────────
   Kullanım: renk belirteçli açıklama bandı (takvim vb.)
   <div class="av-card-legend-bar">
       <div class="av-card-legend-group">
           <span class="av-card-legend-label">Randevu Tipleri:</span>
           <span class="av-card-legend-chip" style="background:#d97706;">
               <span class="av-dot"></span> Online
           </span>
       </div>
       <div class="av-card-legend-divider"></div>
       <div class="av-card-legend-group">...</div>
   </div>
   ─────────────────────────────────────────────────────────── */
.av-card-legend-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 10px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #e9ecef;
    font-size: 12px;
}

.av-card-legend-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.av-card-legend-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #adb5bd;
    margin-right: 2px;
}

.av-card-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
}

.av-card-legend-chip .av-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.av-card-legend-divider {
    width: 1px;
    height: 18px;
    background: #e9ecef;
}

/* ── 5. av-card-body  ───────────────────────────────────────
   Kullanım: Bootstrap .card-body yerine padding'li gövde
   (özellikle takvim gibi tam genişlik içerikler için)
   <div class="av-card-body">...</div>
   ─────────────────────────────────────────────────────────── */
.av-card-body {
    padding: 20px;
}