textarea.form-control.is-invalid,
.was-validated textarea.form-control:invalid {
    background-image: none;
}

/* Remove step buttons on input-type="number" */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

html {
    overscroll-behavior: none;
}

/* ── Tipografi sistemi ───────────────────────────────
   Üç aile, üç ayrı iş:
     display (Space Grotesk)    → başlıklar, KPI rakamları
     ui      (Google Sans Flex) → gövde, form, tablo, navigasyon
     mono    (JetBrains Mono)   → veri: saat, tutar, sayaç, kimlik

   Google Sans Flex'in base/index.html'de talep edilen eksenleri:
     opsz 6..144 · wght 1..1000 · wdth 75..125 · slnt -10..0 · ROND 0..100
   GRAD ekseni bu ailede YOK; font URL'i 400 döner, ayarı da etkisizdir.

   Kural: kayıtlı eksenler CSS property'siyle verilir (wght → font-weight,
   wdth → font-stretch) ki miras alınabilsinler. font-variation-settings
   yalnız opsz + ROND taşır — bu property miras alınırken BİRLEŞMEZ,
   tümüyle değiştirilir, o yüzden her rol kendi ön ayarını yazar. */
:root {
    --font-display: "Space Grotesk", "Google Sans Flex", sans-serif;
    --font-ui: "Google Sans Flex", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Bootstrap komponentleri de aynı gövde ailesini kullansın */
    --bs-body-font-family: var(--font-ui);

    /* Varyasyon ön ayarları — düşük opsz = küçük punto için çizilmiş
       (açık, sağlam formlar), yüksek ROND = yumuşak uçlar. */
    --fv-body: "opsz" 18, "ROND" 20;    /* gövde: nötr, hafif yumuşak */
    --fv-micro: "opsz" 9, "ROND" 0;     /* micro etiket: keskin, küçük puntoda okunur */
    --fv-quiet: "opsz" 13, "ROND" 45;   /* yardımcı metin: yumuşak, geri planda */
}

body {
    font-family: var(--font-ui);
    font-weight: 400;
    font-stretch: 100%;
    font-variation-settings: var(--fv-body);

    background-color: #f4f4f4;
    overscroll-behavior: none;
}

/* Panel başlıkları — display ailesi arayüz ailesinden net ayrışsın.
   Sadece admin kabuğu içinde: pazarlama sayfalarının kendi ölçeği var. */
.admin-main :is(h1, h2, h3, h4, h5, h6, .modal-title):not(.app-eyebrow, .app-metric, .app-data),
.app-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-stretch: 100%;
    font-variation-settings: normal;
    letter-spacing: -0.02em;
}

/* KPI / büyük rakam. tabular-nums: stats sayfasında değerler JS ile
   güncelleniyor, rakam genişliği sabit kalmalı ki karo zıplamasın. */
.app-metric {
    font-family: var(--font-display);
    font-weight: 700;
    font-variation-settings: normal;
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

/* Başlık üstü küçük kicker — mono aile, geniş harf aralığı. */
.app-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--bs-secondary);
}

/* Satır içi veri: saat, tutar, telefon, sayaç. */
.app-data {
    font-family: var(--font-mono);
    font-size: 0.86em;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Başlık altı açıklama satırı. */
.app-lead {
    font-family: var(--font-ui);
    font-weight: 350;
    font-stretch: 98%;
    font-variation-settings: var(--fv-quiet);
    font-size: 0.95rem;
    line-height: 1.5;
    color: #6b7280;
}

/* ── Ortak tasarım token'ları (panel geneli) ─────────
   Tekrarlayan komponentler sabit hex yerine bunları kullanır.
   Marka mavisi --bs-primary (#2563eb) main.css'te tanımlı. */
:root {
    /* Pastel stat-card / KPI karo arka planları (tek kanonik set) */
    --tile-blue: #f0f7ff;
    --tile-green: #f0fdf4;
    --tile-red: #fff5f5;
    --tile-yellow: #fefef2;

    /* Kart gölgeleri */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* Kart köşe yarıçapı (rounded-4 ile uyumlu) */
    --radius-card: 1rem;
}

#mainNav {
    font-size: 14px;
    position: sticky;
    width: 100%;
    top: 0;

    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;

    z-index: 1040;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-decoration: none;
    font-size: 18px;
}

.svgbtn {
    background: transparent;
    padding: 0;
    border: 0;
    color: #434343;
}

.svgbtn:hover {
    background-color: gainsboro;
    color: #000000;
}

.borderless-input {
    border: none;
    outline: none;
}

.alert-pop-up {
    position: fixed;
    top: 20px;
    right: 20px;
    opacity: 0;
    pointer-events: none;
    /* tıklamaları engellesin */
    transition: opacity 0.5s ease-in-out;
    z-index: 9999;
}

.alert-pop-up.show {
    opacity: 1;
    pointer-events: auto;
}

.bg-blue-subtle {
    background-color: rgb(210, 232.8, 255)
}

;

.modal-backdrop {
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-header .btn-close {
    order: -1;
    margin-left: 0;
    margin-right: 15px;
    background-size: contain;
    background-position: center;
    opacity: 1;
    width: 0.6em;
    height: 0.6em;
}

.modal-header {
    padding: 24px 16px 24px 16px;
    justify-content: flex-start;
}

.modal-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.modal-content {
    border-radius: 20px;
}

textarea {
    resize: none;
}

.s-card {
    padding: 12px;
    background-color: #fff;
}

.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .bi {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--bs-gray);
    pointer-events: none;
    z-index: 5;
}

.input-icon-wrapper .form-control {
    padding-left: 2.8rem;
    /* İkonun genişliğine göre padding */
}

/* (.has-toggle) for show password icon */
.input-icon-wrapper.has-toggle .form-control.is-invalid,
.input-icon-wrapper.has-toggle .form-control.is-valid {
    background-image: none;
    padding-right: 2.8rem;
}

.customer-card {
    border: none;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.25s ease;
    /* overflow: hidden; */
}

.customer-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12);
}

.customer-card .card-body {
    padding: 16px 18px 14px;
}

.customer-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f2f5;
}

.customer-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1d21;
    word-break: break-all;
    line-height: 1.3;
}

.customer-card-name .gender-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer-card-name .gender-icon.female {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
}

.customer-card-name .gender-icon.male {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}

.customer-card-name .gender-icon img {
    width: 15px;
    height: 15px;
}

.customer-card-meta {
    font-size: 0.75rem;
    color: #8c929a;
    margin-top: 2px;
}

.customer-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.customer-card-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.customer-card-field.full-width {
    grid-column: 1 / -1;
}

.customer-card-field-label {
    font-size: 0.68rem;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 1px;
}

.customer-card-field-value {
    font-size: 0.83rem;
    color: #374151;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-card-field-value.allow-wrap {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.form-control,
.form-select {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #9db9f6;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}

/* Tablo başlıkları da micro etiket rolünde — .app-label ile aynı ses. */
.custom-table-header th {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;

    color: #6c757d;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    font-stretch: 106%;
    font-variation-settings: var(--fv-micro);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 0 !important;
    text-align: inherit;
}

/* ── Kanonik tablo çerçevesi ──────────────────────────
   Yuvarlak köşeli, kenarlıklı tablo kabı. Tek implementasyon
   (eski .demand-table-wrapper / pricing tablosu yerine). */
.table-wrapper {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.table-wrapper .table {
    margin-bottom: 0;
}

/* ── Boş durum (empty state) ortak komponenti ────────
   İkon + başlık + yardımcı metin için tek kanonik boş durum. */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #94a3b8;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.5;
}

/* ── Stat mini-cards ─────────────────────────────── */
.stat-card {
    border-radius: 1rem;
    border: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.stat-icon-circle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    margin-top: -4px;
}

/* ── Squared icon badge ──────────────────────────── */
.squared-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

/* ── Appointment badge component ─────────────────── */
/* Template renkleri (blue/warning/danger/info/secondary) daha satüre 300-level
   dolgu + koyu metin → dolgu tonuyla net ayırt edilir, border yok. */
:root {
    --appointment-badge-blue-bg: #93c5fd;       --appointment-badge-blue-color: #1e3a8a;
    --appointment-badge-warning-bg: #fcd34d;    --appointment-badge-warning-color: #78350f;
    --appointment-badge-danger-bg: #fca5a5;     --appointment-badge-danger-color: #7f1d1d;
    --appointment-badge-info-bg: #67e8f9;       --appointment-badge-info-color: #155e75;
    --appointment-badge-secondary-bg: #cbd5e1;  --appointment-badge-secondary-color: #1e293b;

    --appointment-badge-closed-bg: #1f2937;     --appointment-badge-closed-color: #f8fafc;
    --appointment-badge-empty-bg: #f1f5f9;      --appointment-badge-empty-color: #475569;
    --appointment-badge-demand-bg: #ede9fe;     --appointment-badge-demand-color: #5b21b6;
    --appointment-badge-full-bg: #d1fae5;       --appointment-badge-full-color: #065f46;
    --appointment-badge-entry-bg: #e0e7ff;      --appointment-badge-entry-color: #3730a3;
}

/* ── Appointment badge component ─────────────────── */
/* One component drives both appointment-template badges and block-state badges. */
:where([class*="appointment-badge"]) {
    display: inline-flex;
    align-items: center;
    padding: 0.32em 0.65em;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 6px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Template colors */
.appointment-badge-blue      { background: var(--appointment-badge-blue-bg); color: var(--appointment-badge-blue-color); }
.appointment-badge-warning   { background: var(--appointment-badge-warning-bg); color: var(--appointment-badge-warning-color); }
.appointment-badge-danger    { background: var(--appointment-badge-danger-bg); color: var(--appointment-badge-danger-color); }
.appointment-badge-info      { background: var(--appointment-badge-info-bg); color: var(--appointment-badge-info-color); }
.appointment-badge-secondary { background: var(--appointment-badge-secondary-bg); color: var(--appointment-badge-secondary-color); }

/* Block-state badges */
.appointment-badge-closed { background: var(--appointment-badge-closed-bg); color: var(--appointment-badge-closed-color); }
.appointment-badge-empty  { background: var(--appointment-badge-empty-bg); color: var(--appointment-badge-empty-color); }
.appointment-badge-demand { background: var(--appointment-badge-demand-bg); color: var(--appointment-badge-demand-color); }
.appointment-badge-full   { background: var(--appointment-badge-full-bg); color: var(--appointment-badge-full-color); }
.appointment-badge-entry  { background: var(--appointment-badge-entry-bg); color: var(--appointment-badge-entry-color); }

.appointment-badge-fixed-60 { min-width: 60px; justify-content: center; }

/* ── Soft durum rozetleri (panel geneli ortak) ───────
   Bootstrap .badge ile birlikte kullanılır: <span class="badge badge-soft-info">.
   Durum/etiket pill'leri için tek kanonik yumuşak renk seti. */
.badge-soft-info      { background-color: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; font-weight: 500; }
.badge-soft-success   { background-color: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; font-weight: 500; }
.badge-soft-warning   { background-color: #fffbeb; color: #b45309; border: 1px solid #fde68a; font-weight: 500; }
.badge-soft-danger    { background-color: #fef2f2; color: #be123c; border: 1px solid #fecdd3; font-weight: 500; }
.badge-soft-secondary { background-color: #f8fafc; color: #475569; border: 1px solid #e2e8f0; font-weight: 500; }
.badge-soft-purple    { background-color: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; font-weight: 500; }

/* ── Tarih ileri/geri stepper butonu (ortak) ─────────
   Kanonik büyük yuvarlak chevron stepper; küçük svgbtn yerine. */
.date-stepper-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

/* Micro etiket rolü: dar punto, geniş wdth + keskin ROND ile okunur kalır. */
.app-label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 550;
    font-stretch: 106%;
    font-variation-settings: var(--fv-micro);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-secondary);
}

/* Yardımcı metin: app-label'ın tam karşıtı — ince, hafif dar, yumuşak
   uçlu. Etiket "keskin ve yukarıda", ipucu "yumuşak ve geride" okunur. */
.form-text {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 350;
    font-stretch: 96%;
    font-variation-settings: var(--fv-quiet);
    line-height: 1.45;
    color: #8a919b;
}

/* ── Section card (manage + demand_select + block_content ortak) ── */
.section-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    background-color: #fff;
    transition: box-shadow 0.2s ease;
}

.section-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ── Bekleyen talep kartı + durum noktası (clinic + manage ortak) ── */
@keyframes demandPulse {
    0% { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075), 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70% { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075), 0 0 0 12px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075), 0 0 0 0 rgba(37, 99, 235, 0); }
}

.active-demand-card,
.stat-card.active-demand {
    animation: demandPulse 2s infinite;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    background-color: #e8f2ff !important;
}

@keyframes ping {
    0% { transform: scale(0.8); opacity: 0.8; }
    80% { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

.status-dot-ping {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #2563eb;
    border-radius: 50%;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    background-color: #2563eb;
    border-radius: 50%;
}

/* ── Yorum komponenti (randevu al sayfası listesi + hasta özeti) ──
   Tek yorumun görünümü tek yerde tanımlı; sayfalar sadece kabı kurar. */
.review-item {
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid #eef0f3;
}

.review-item:last-child {
    border-bottom: 0;
    padding-bottom: 0.25rem;
}

.review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.review-who {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.review-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
}

.review-author {
    font-family: var(--font-ui);
    font-weight: 500;
    font-variation-settings: var(--fv-body);
    font-size: 0.9rem;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-p {
    font-family: var(--font-ui);
    font-weight: 350;
    font-stretch: 98%;
    font-variation-settings: var(--fv-quiet);
    font-size: 0.9rem;
    line-height: 1.55;
    color: #475569;
    word-break: break-word;
    margin: 0;
}

/* Uzun yorumlar kartı şişirmesin: 3 satırda kırp, "Devamını oku" açsın. */
.comment-p.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Tersiyer/ghost: yorumun kendisiyle yarışmayan, çerçevesiz metin butonu. */
.review-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    font-variation-settings: var(--fv-micro);
    cursor: pointer;
}

.review-more-btn:hover {
    text-decoration: underline;
}

.review-more-btn i {
    font-size: 0.7rem;
}

.review-date {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #94a3b8;
    margin-top: 0.4rem;
}

.reviews-empty {
    font-family: var(--font-ui);
    font-weight: 350;
    font-variation-settings: var(--fv-quiet);
    font-size: 0.9rem;
    color: #64748b;
}

/* Tersiyer/ghost sil: yorumun kendisiyle yarışmasın. */
.review-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: #94a3b8;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    font-variation-settings: var(--fv-micro);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.review-delete-btn:hover {
    color: #b02a37;
}

.review-delete-btn i {
    font-size: 0.75rem;
}

/* Tek yorum kart içinde duruyorsa liste ayracı ve dış boşluk gereksiz. */
.review-item.review-item-single {
    padding: 0;
    border-bottom: 0;
}

.review-item-single .review-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.review-item-single .review-date {
    margin-top: 0;
}

/* ── Tonal (yumuşak nötr) buton ──────────────────────
   btn-outline-secondary'nin yerine geçen kanonik yardımcı aksiyon butonu:
   ana aksiyonla (btn-primary / btn-success) yan yana dururken çerçeve
   ağırlığıyla yarışmaz, dolgusu hafif nötr kalır.
   Kullanım: <button class="btn btn-tonal">…</button> */
.btn.btn-tonal {
    background-color: #f1f5f9;
    border: 1px solid #e6ebf1;
    color: #334155;
    font-weight: 500;
    box-shadow: none;
}

.btn.btn-tonal:hover,
.btn.btn-tonal:focus-visible {
    background-color: #e6ebf1;
    border-color: #d7dee7;
    color: #1e293b;
}

.btn.btn-tonal:active,
.btn.btn-tonal.show {
    background-color: #dde4ec;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn.btn-tonal:disabled {
    background-color: #f6f8fa;
    border-color: #edf1f5;
    color: #94a3b8;
}