/* =====================================================================
   Güzellik Salonu Yönetim Paneli - Premium Tema (Açık & Ferah Spa Teması)
   Krem/fildişi zemin + şampanya altın ve pudra gül kurusu vurgular
   Tailwind CSS CDN üzerine özel katman olarak kullanılır.
   ===================================================================== */

:root {
    /* Zemin tonları: krem / fildişi */
    --cream-50:  #fefcfa;
    --cream-100: #faf3ee;
    --cream-200: #f3e6dd;
    --cream-300: #ead7cb;

    /* Metin tonları: koyu kahve / antrasit (kremde yüksek okunabilirlik) */
    --ink-900: #322520;
    --ink-700: #5c4b44;
    --ink-500: #8a766d;
    --ink-300: #bcaa9f;

    --gold-300: #e8d4a8;
    --gold-400: #d9bc84;
    --gold-500: #c9a66b;
    --gold-600: #b08d4f;
    --gold-700: #93702f;
    --rose-300: #f0d9dd;
    --rose-400: #dda9b3;
    --rose-500: #c98da0;
    --rose-600: #b06f85;
    --rose-700: #955a6d;

    /* Geriye dönük uyumluluk: eski koyu tema değişken adları artık açık temaya işaret eder */
    --text-primary: var(--ink-900);
    --text-muted: var(--ink-500);
    --text-faint: var(--ink-300);

    /* Marka gradyanı: şampanya altın -> pudra gül kurusu (rose-gold), güzellik salonu kimliği */
    --brand-gradient: linear-gradient(135deg, #d9a94f 0%, #cf8f78 50%, #bd7690 100%);
    --brand-shadow: 0 8px 22px rgba(189, 118, 144, 0.30);

    --status-pending-bg: #fdf0cf;
    --status-pending-border: #d9a521;
    --status-pending-text: #8a6a14;

    --status-confirmed-bg: #e7f3e6;
    --status-confirmed-border: #6fae7f;
    --status-confirmed-text: #336b45;

    --status-completed-bg: #e6eefd;
    --status-completed-border: #6a97e8;
    --status-completed-text: #2c53a8;

    --status-cancelled-bg: #f6e9e8;
    --status-cancelled-border: #cf8686;
    --status-cancelled-text: #9c4444;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--gold-500) var(--cream-200);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--cream-200); }
*::-webkit-scrollbar-thumb { background: var(--gold-500); border-radius: 8px; }

body {
    background:
        radial-gradient(circle at 10% 8%, rgba(217, 169, 79, 0.12), transparent 40%),
        radial-gradient(circle at 90% 15%, rgba(201, 141, 160, 0.14), transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(217, 169, 79, 0.06), transparent 50%),
        linear-gradient(160deg, var(--cream-50) 0%, var(--cream-100) 55%, var(--cream-200) 100%);
    color: var(--ink-900);
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    min-height: 100vh;
}

.font-display {
    font-family: 'Playfair Display', 'Georgia', serif;
}

/* ---------------------------------------------------------------
   Cam/kart yardımcı sınıflar (açık temada: beyaza yakın, yumuşak gölgeli)
   --------------------------------------------------------------- */
.glass-panel {
    background: rgba(255, 253, 250, 0.72);
    border: 1px solid rgba(189, 118, 144, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(150, 100, 80, 0.10);
    border-radius: 1.25rem;
}

.glass-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(189, 118, 144, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 1rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.glass-card:hover {
    transform: translateY(-2px);
    border-color: rgba(189, 118, 144, 0.4);
    box-shadow: 0 12px 26px rgba(150, 100, 80, 0.16);
}

.gold-gradient-text {
    background: linear-gradient(120deg, var(--gold-700) 0%, var(--gold-600) 45%, var(--rose-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.btn-gold {
    background: var(--brand-gradient);
    color: #fff9f2;
    font-weight: 600;
    border-radius: 0.85rem;
    box-shadow: var(--brand-shadow);
    transition: filter .15s ease, transform .15s ease;
}
.btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0); }

.btn-ghost {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(189, 118, 144, 0.28);
    color: var(--ink-900);
    border-radius: 0.85rem;
    transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover {
    background: rgba(217, 169, 79, 0.12);
    border-color: var(--gold-600);
}

.btn-danger-soft {
    background: rgba(207, 134, 134, 0.12);
    border: 1px solid rgba(207, 134, 134, 0.45);
    color: #9c4444;
    border-radius: 0.85rem;
    transition: background .15s ease;
}
.btn-danger-soft:hover { background: rgba(207, 134, 134, 0.22); }

/* ---------------------------------------------------------------
   Giriş Ekranı
   --------------------------------------------------------------- */
.login-bg {
    background:
        radial-gradient(circle at 20% 20%, rgba(217, 169, 79, 0.16), transparent 42%),
        radial-gradient(circle at 80% 70%, rgba(201, 141, 160, 0.18), transparent 48%),
        linear-gradient(160deg, var(--cream-50), var(--cream-100) 55%, var(--cream-200));
}

.input-premium {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(189, 118, 144, 0.25);
    color: var(--ink-900);
    border-radius: 0.75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-premium:focus {
    outline: none;
    border-color: var(--gold-600);
    box-shadow: 0 0 0 3px rgba(217, 169, 79, 0.18);
}
.input-premium::placeholder { color: var(--ink-300); }

/* ---------------------------------------------------------------
   Üst Bar / Kenar Çubuğu
   --------------------------------------------------------------- */
.topbar {
    background: rgba(255, 253, 250, 0.82);
    border-bottom: 1px solid rgba(189, 118, 144, 0.16);
    backdrop-filter: blur(16px);
    position: relative;
}
.topbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500), var(--rose-500), var(--gold-500), transparent);
    opacity: 0.7;
}

.nav-link {
    color: var(--ink-500);
    border-radius: 0.65rem;
    transition: background .15s ease, color .15s ease;
}
.nav-link:hover, .nav-link.active {
    background: rgba(217, 169, 79, 0.14);
    color: var(--gold-700);
}

/* ---------------------------------------------------------------
   Zaman Çizelgesi (Timeline)
   --------------------------------------------------------------- */
.timeline-wrap {
    position: relative;
}

.timeline-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    min-height: 92px;
    border-bottom: 1px dashed rgba(189, 118, 144, 0.18);
}

.timeline-hour-label {
    color: var(--gold-700);
    font-weight: 600;
    font-size: 0.85rem;
    padding-top: 0.35rem;
    text-align: right;
    padding-right: 1rem;
    border-right: 1px solid rgba(189, 118, 144, 0.18);
}

.timeline-slot {
    position: relative;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-content: flex-start;
    cursor: pointer;
    transition: background .15s ease;
    border-radius: 0.5rem;
}
.timeline-slot:hover { background: rgba(217, 169, 79, 0.09); }
.timeline-slot.has-appointments { cursor: default; }

.appointment-card {
    width: 100%;
    max-width: 340px;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.appointment-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(150, 100, 80, 0.18);
}

/* ---------------------------------------------------------------
   Mobil Ajanda Listesi (telefon: uzun saatlik ızgara yerine sade liste)
   --------------------------------------------------------------- */
.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.agenda-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.65);
    border-left: 4px solid;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.agenda-item:active { transform: scale(0.99); }
.agenda-item:hover { background: rgba(255, 255, 255, 0.9); }
.agenda-item.status-pending   { border-left-color: var(--status-pending-border); }
.agenda-item.status-confirmed { border-left-color: var(--status-confirmed-border); }
.agenda-item.status-completed { border-left-color: var(--status-completed-border); }
.agenda-item.status-cancelled { border-left-color: var(--status-cancelled-border); }

.agenda-time {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-700);
    min-width: 44px;
    flex-shrink: 0;
}
.agenda-main { flex: 1; min-width: 0; }
.agenda-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-service {
    font-size: 0.76rem;
    color: var(--ink-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-chevron { color: var(--ink-300); font-size: 1rem; flex-shrink: 0; }
.agenda-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ink-300);
}
.agenda-empty .agenda-empty-icon { font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.7; color: var(--rose-500); }

.status-pending    { background: var(--status-pending-bg);   border-color: var(--status-pending-border);   color: var(--status-pending-text); }
.status-confirmed  { background: var(--status-confirmed-bg); border-color: var(--status-confirmed-border); color: var(--status-confirmed-text); }
.status-completed  { background: var(--status-completed-bg); border-color: var(--status-completed-border); color: var(--status-completed-text); }
.status-cancelled  { background: var(--status-cancelled-bg); border-color: var(--status-cancelled-border); color: var(--status-cancelled-text); }

.status-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.status-pending .status-dot   { background: var(--status-pending-border); }
.status-confirmed .status-dot { background: var(--status-confirmed-border); }
.status-completed .status-dot { background: var(--status-completed-border); }
.status-cancelled .status-dot { background: var(--status-cancelled-border); }

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid;
}

/* ---------------------------------------------------------------
   Modal
   --------------------------------------------------------------- */
.modal-overlay {
    background: rgba(50, 37, 32, 0.45);
    backdrop-filter: blur(4px);
}

.modal-box {
    background: linear-gradient(165deg, #ffffff, var(--cream-100) 130%);
    border: 1px solid rgba(189, 118, 144, 0.22);
    box-shadow: 0 24px 60px rgba(80, 50, 45, 0.28);
}

/* Personel filtresi: tek kompakt dropdown (önceki çip satırının yerine) */
.staff-filter-bar {
    flex-wrap: wrap;
}
.staff-filter-select {
    max-width: 220px;
    font-weight: 500;
    cursor: pointer;
}
@media (max-width: 480px) {
    .staff-filter-select { max-width: none; flex: 1; }
}

/* Görünüm anahtarı (Gün / Ay) */
.view-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(189, 118, 144, 0.25);
    border-radius: 0.85rem;
    padding: 3px;
    gap: 2px;
}
.view-toggle-btn {
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    border-radius: 0.65rem;
    color: var(--ink-500);
    transition: all .15s ease;
    white-space: nowrap;
}
.view-toggle-btn.active {
    background: var(--brand-gradient);
    color: #fff9f2;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   Ödeme Yöntemi Butonları (Nakit / POS / Havale-IBAN)
   --------------------------------------------------------------- */
.payment-method-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.payment-method-btn {
    flex: 1 1 0;
    min-width: 100px;
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 0.75rem;
    border: 1px solid rgba(189, 118, 144, 0.28);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-700);
    transition: all .15s ease;
    white-space: nowrap;
}
.payment-method-btn:hover {
    border-color: var(--gold-500);
    background: rgba(255, 255, 255, 0.85);
}
.payment-method-btn.active {
    background: var(--brand-gradient);
    color: #fff9f2;
    border-color: transparent;
    box-shadow: var(--brand-shadow);
}

/* ---------------------------------------------------------------
   Günlük Gelir Özeti Kartı (sadece Yönetici/Patron)
   --------------------------------------------------------------- */
.revenue-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.revenue-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(189, 118, 144, 0.14);
    text-align: center;
}
.revenue-stat-icon { font-size: 1.15rem; line-height: 1; }
.revenue-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-500);
}
.revenue-stat-amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-900);
}
@media (max-width: 480px) {
    .revenue-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
    .revenue-stat { padding: 0.5rem 0.25rem; }
    .revenue-stat-amount { font-size: 0.78rem; }
    .revenue-stat-label { font-size: 0.58rem; }
    .payment-method-btn { font-size: 0.75rem; padding: 0.55rem 0.5rem; min-width: 0; }
}

/* Toast bildirim */
.toast-premium {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(189, 118, 144, 0.3);
    box-shadow: 0 10px 30px rgba(80, 50, 45, 0.22);
}

/* ---------------------------------------------------------------
   Aylık Takvim Görünümü
   --------------------------------------------------------------- */
.calendar-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.calendar-weekday {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-300);
    padding-bottom: 0.25rem;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}
.calendar-cell {
    position: relative;
    min-height: 78px;
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(189, 118, 144, 0.16);
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.calendar-cell:hover {
    border-color: rgba(217, 169, 79, 0.6);
    background: rgba(217, 169, 79, 0.10);
}
.calendar-cell.other-month { opacity: 0.4; }
.calendar-cell.is-today {
    border-color: var(--rose-600);
    box-shadow: 0 0 0 1px rgba(176, 111, 133, 0.4) inset;
    background: rgba(240, 217, 221, 0.35);
}
.calendar-cell.is-selected {
    background: linear-gradient(160deg, rgba(217,169,79,0.18), rgba(201,141,160,0.16));
    border-color: var(--gold-600);
}
.calendar-day-num {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-900);
}
.calendar-cell.is-today .calendar-day-num { color: var(--rose-700); }
.calendar-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: auto;
    padding-top: 0.4rem;
}
.calendar-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.calendar-more { font-size: 0.6rem; color: var(--ink-300); }
.calendar-count-badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(217, 169, 79, 0.22);
    color: var(--gold-700);
    line-height: 1.4;
}
.month-nav-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    border: 1px solid rgba(189, 118, 144, 0.3);
    color: var(--ink-900);
    background: rgba(255, 255, 255, 0.6);
    transition: all .15s ease;
}
.month-nav-btn:hover { background: rgba(217, 169, 79, 0.16); border-color: var(--gold-600); }

/* ---------------------------------------------------------------
   Mobilde/tablette tablo -> kart dönüşümü (staff.php / services.php)
   Eşik 680px iken 681-820px arasında tablo kabına sığmayıp "Düzenle /
   Pasife Al" sütunu taşıyordu; bu yüzden 900px altında kart görünümü
   kullanılıyor.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    .responsive-table thead { display: none; }
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
        display: block;
        width: 100%;
    }
    .responsive-table tr {
        margin-bottom: 0.85rem;
        border: 1px solid rgba(189, 118, 144, 0.2);
        border-radius: 0.85rem;
        padding: 0.5rem 0.85rem;
        background: rgba(255, 255, 255, 0.55);
    }
    .responsive-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.55rem 0 !important;
        border-bottom: 1px dashed rgba(189, 118, 144, 0.16) !important;
        text-align: right !important;
    }
    .responsive-table td:last-child { border-bottom: none !important; }
    .responsive-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--ink-300);
        text-align: left;
        flex-shrink: 0;
    }
    .responsive-table td.cell-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .responsive-table td.cell-actions::before { display: none; }
}

/* Basit fade/scale animasyon */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.97) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-in { animation: fadeInScale .18s ease-out; }

/* Responsive: küçük ekranlarda saat sütunu daralt */
@media (max-width: 640px) {
    .timeline-row { grid-template-columns: 52px 1fr; }
    .timeline-hour-label { font-size: 0.68rem; padding-right: 0.4rem; }
    .appointment-card { max-width: 100%; }
    .modal-box { padding: 1.25rem !important; border-radius: 1rem; }
    .calendar-cell { min-height: 56px; padding: 0.35rem; border-radius: 0.55rem; }
    .calendar-day-num { font-size: 0.72rem; }
    .calendar-dot { width: 5px; height: 5px; }
    .calendar-count-badge { font-size: 0.55rem; padding: 0 4px; top: 0.25rem; right: 0.25rem; }
    .calendar-header-row, .calendar-grid { gap: 0.25rem; }
    .calendar-weekday { font-size: 0.58rem; }
    .view-toggle-btn { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .calendar-cell { min-height: 46px; }
    .calendar-day-num { font-size: 0.65rem; }
}

/* ---------------------------------------------------------------
   Hızlı İşlem Modalı (Randevu Sonucu) + Ödeme Türü Modalı
   Zaman çizelgesinde bir randevuya tıklanınca açılan iki adımlı akış.
   --------------------------------------------------------------- */

/* Randevu özeti kutusu (saat, müşteri, hizmet, personel, tutar) */
.quick-summary {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(189, 118, 144, 0.22);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}
.quick-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.quick-summary-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-700);
}
.quick-summary-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink-900);
    line-height: 1.3;
}
.quick-summary-service {
    font-size: 0.85rem;
    color: var(--ink-500);
    margin-top: 0.1rem;
}
.quick-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(189, 118, 144, 0.28);
    font-size: 0.8rem;
    color: var(--ink-700);
}
.quick-summary-price {
    font-weight: 700;
    color: var(--ink-900);
}

/* Tamamlandı / Tamamlanamadı butonları */
.quick-action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.1rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all .15s ease;
    text-align: center;
}
.quick-action-btn:disabled { opacity: 0.55; cursor: wait; }
.quick-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff9f2;
}
.quick-action-btn.is-done {
    background: var(--status-confirmed-bg);
    border-color: var(--status-confirmed-border);
    color: var(--status-confirmed-text);
}
.quick-action-btn.is-done .quick-action-icon { background: var(--status-confirmed-border); }
.quick-action-btn.is-done:hover:not(:disabled) {
    background: #d9ecd8;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(111, 174, 127, 0.28);
}
.quick-action-btn.is-failed {
    background: var(--status-cancelled-bg);
    border-color: var(--status-cancelled-border);
    color: var(--status-cancelled-text);
}
.quick-action-btn.is-failed .quick-action-icon { background: var(--status-cancelled-border); }
.quick-action-btn.is-failed:hover:not(:disabled) {
    background: #f0dad8;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(207, 134, 134, 0.28);
}

/* Ödeme türü butonları (Nakit / POS / Havale-IBAN) */
.quick-pay-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.quick-pay-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.1rem 0.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(189, 118, 144, 0.28);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-700);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: all .15s ease;
}
.quick-pay-icon { font-size: 1.5rem; line-height: 1; }
.quick-pay-btn:hover:not(:disabled) {
    border-color: var(--gold-500);
    background: rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
    box-shadow: var(--brand-shadow);
}
.quick-pay-btn:disabled { opacity: 0.55; cursor: wait; }
.quick-pay-btn.active {
    background: var(--brand-gradient);
    color: #fff9f2;
    border-color: transparent;
    box-shadow: var(--brand-shadow);
}

@media (max-width: 480px) {
    .quick-action-group { grid-template-columns: 1fr; }
    .quick-action-btn { flex-direction: row; padding: 0.9rem 1rem; justify-content: flex-start; gap: 0.7rem; }
    .quick-pay-group { grid-template-columns: 1fr; }
    .quick-pay-btn { flex-direction: row; justify-content: flex-start; gap: 0.7rem; padding: 0.85rem 1rem; }
    .quick-pay-icon { font-size: 1.25rem; }
}

/* =====================================================================
   FORM IZGARALARI (mobilde otomatik sadelesir)
   Tailwind'in grid-cols-* siniflarinin yerine kullanilir; boylece
   dar ekranda kac sutuna duseceklerini tek yerden yonetebiliyoruz.
   ===================================================================== */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* =====================================================================
   MOBIL UYUMLULUK (telefon oncelikli duzenlemeler)
   Panel telefonda yogun kullanildigi icin bu bolum ekranin dusey alanini
   korumaya ve dokunma hedeflerini buyutmeye odaklanir.
   ===================================================================== */

/* ---- 1) Ust bar: 3 satira yayilmak yerine 2 kompakt satir ----
   Satir 1: logo + baslik ............ cikis butonu
   Satir 2: yatay kaydirilabilir menu seridi                        */
@media (max-width: 767px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.3rem 0.6rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.4rem !important;
    }
    .topbar-brand { grid-column: 1; grid-row: 1; min-width: 0; gap: 0.6rem !important; }
    .topbar-user  { grid-column: 2; grid-row: 1; }

    .topbar-logo {
        width: 2.15rem !important;
        height: 2.15rem !important;
        font-size: 0.95rem !important;
        flex-shrink: 0;
    }
    .topbar-title { font-size: 1rem !important; }
    .topbar-subtitle { font-size: 0.65rem !important; }
    .topbar-user a { width: 2.15rem !important; height: 2.15rem !important; }

    /* Menu: alt alta sarmak yerine tek satirda yatay kaydirilir */
    .topbar-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.15rem !important;
        margin: 0 -0.25rem;
        padding: 0 0.25rem 0.1rem;
        scrollbar-width: none;
    }
    .topbar-nav::-webkit-scrollbar { display: none; }
    .topbar-nav .nav-link {
        white-space: nowrap;
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 640px) {
    /* ---- 2) Sayfa govdesi: panel araligi ve kenar boslugu ---- */
    .page-main {
        padding-top: 0.85rem !important;
        padding-bottom: 0.85rem !important;
    }
    .page-main > * + * { margin-top: 0.8rem !important; }

    /* ---- 3) Tarih / gorunum kontrol paneli ----
       Satir 1: [Gun|Ay] [Bugun] [Yarin]
       Satir 2: tarih secici (tam genislik)
       Satir 3: "19 Eylul 2026 Cumartesi"                          */
    .panel-controls { padding: 0.7rem !important; gap: 0.5rem !important; }
    .panel-controls > div:first-child { gap: 0.5rem !important; width: 100%; }
    #dayControls { gap: 0.5rem !important; }
    #datePicker { flex: 1 1 100%; min-width: 0; }
    #btnToday, #btnTomorrow { padding: 0.5rem 0.85rem !important; }
    #selectedDateLabel {
        width: 100%;
        margin-left: 0 !important;
        font-size: 0.95rem !important;
    }

    /* ---- 4) "Yeni Randevu": sabit, basparmakla ulasilabilir buton ----
       Kontrol panelinden cikarilip sag alt koseye sabitlenir.          */
    .fab-add {
        position: fixed !important;
        right: 1rem;
        bottom: 1rem;
        z-index: 45;
        padding: 0.8rem 1.15rem !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 26px rgba(189, 118, 144, 0.45) !important;
    }
    /* Bildirimler sabit butonun altinda kalmasin */
    #toastContainer {
        bottom: 5rem !important;
        right: 1rem !important;
        left: 1rem !important;
    }

    /* ---- 5) Personel filtresi ve durum lejanti: daha az dikey alan ---- */
    .staff-filter-bar { padding: 0.6rem 0.75rem !important; }
    .status-legend { gap: 0.35rem !important; }
    .status-legend .badge-pill { font-size: 0.65rem; padding: 0.12rem 0.5rem; }

    /* ---- 6) Liste sayfalarinin baslik satiri (Personel / Hizmetler) ----
       Baslik ve "+ Yeni ..." butonu yan yana sigmadigindan alt alta gecer. */
    .page-head {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.6rem;
    }
    .page-head h2 { font-size: 1.4rem !important; }
    .page-head .btn-gold { width: 100%; text-align: center; }

    /* ---- 7) Form alanlari ----
       iOS Safari, 16px'ten kucuk yazili bir alana dokunuldugunda sayfayi
       otomatik yakinlastirir; bunu onlemek icin alanlar 16px'e sabitlenir. */
    .input-premium,
    .modal-box input,
    .modal-box select,
    .modal-box textarea {
        font-size: 16px !important;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }
    /* Yukaridaki kural kontrol cubugundaki kucuk alanlari da buyutmesin diye
       tarih secicinin dolgusu geri alinir (yazi boyutu 16px kalir). */
    #datePicker { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

    .form-grid-2 { grid-template-columns: 1fr; gap: 0.75rem; }
    .form-grid-3 { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .form-grid-2 > .span-full-sm,
    .form-grid-3 > .span-full-sm { grid-column: 1 / -1; }

    /* ---- 8) Modal: baslik ustte, kaydet/vazgec altta sabit ----
       Uzun formlarda kaydirirken hem baslik hem de Kaydet butonu
       ekranda kalir; asagiya kadar inmek gerekmez.                    */
    .modal-box {
        padding: 0.9rem !important;
        border-radius: 1.1rem;
        max-height: 92vh !important;
    }
    .modal-head {
        position: sticky;
        top: -0.9rem;
        z-index: 3;
        margin: -0.9rem -0.9rem 0.75rem !important;
        padding: 0.9rem 0.9rem 0.6rem;
        background: linear-gradient(180deg, #ffffff 70%, rgba(255, 255, 255, 0.92));
        border-bottom: 1px solid rgba(189, 118, 144, 0.16);
        border-radius: 1.1rem 1.1rem 0 0;
    }
    .modal-actions {
        position: sticky;
        bottom: -0.9rem;
        z-index: 3;
        flex-wrap: wrap;
        margin: 0.25rem -0.9rem -0.9rem !important;
        padding: 0.7rem 0.9rem 0.9rem !important;
        background: linear-gradient(0deg, #ffffff 70%, rgba(255, 255, 255, 0.92));
        border-top: 1px solid rgba(189, 118, 144, 0.16);
        gap: 0.5rem !important;
    }
    /* Masaustunde butonlari saga iten bosluk mobilde gereksiz */
    .modal-actions > .flex-1 { display: none; }
    .modal-actions .btn-gold { flex: 1 1 auto; order: 2; }
    .modal-actions .btn-ghost { flex: 0 0 auto; order: 1; }
    .modal-actions .btn-danger-soft { order: 3; flex: 1 0 100%; }

    /* ---- 9) Hizli islem / odeme pencerelerinin alt butonlari ---- */
    .quick-foot { gap: 0.5rem !important; }
    .quick-foot button {
        flex: 1 1 0;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* ---- 10) Ajanda satirlari: daha rahat dokunma hedefi ---- */
    .agenda-item { padding: 0.8rem 0.9rem; }
    .agenda-name { font-size: 0.92rem; }
}

/* ---------------------------------------------------------------
   Mobil duzeltmeler (yukaridaki bloga ek)
   --------------------------------------------------------------- */
@media (max-width: 640px) {
    /* backdrop-filter, icindeki position:fixed ogeler icin yeni bir
       konumlandirma baglami olusturur; bu yuzden ".fab-add" butonu
       ekranin degil panelin sag altina yapisiyordu. Mobilde bulanikligi
       kaldiriyoruz (performans acisindan da avantajli).                */
    .glass-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 253, 250, 0.92);
    }

    /* Bugun / Yarin / tarih secici, ust satirdaki Gun-Ay anahtariyla ayni
       satiri paylassin diye ara kapsayici duzlestirilir:
       Satir 1: [Gun|Ay] [Bugun] [Yarin]   Satir 2: [tarih]   Satir 3: [etiket] */
    #dayControls { display: contents; }
}

@media (max-width: 480px) {
    /* Formdaki odeme yontemi butonlari: "min-width: 0" ile esit genislige
       sikistiklarindan "Havale / IBAN" yazisi tasiyordu. Dar ekranda metnin
       iki satira inmesine izin veriyoruz.                                  */
    .payment-method-btn {
        white-space: normal;
        line-height: 1.25;
    }
}

/* ---------------------------------------------------------------
   Gelir Raporu: Personel Bazında Kazanç Listesi
   Her satır: renk noktası + ad, tutar, pay çubuğu, işlem sayısı / yüzde
   --------------------------------------------------------------- */
.staff-revenue-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.staff-revenue-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.staff-revenue-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.staff-revenue-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-900);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.staff-revenue-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.staff-revenue-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-900);
    white-space: nowrap;
}
.staff-revenue-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(189, 118, 144, 0.14);
    overflow: hidden;
}
.staff-revenue-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--brand-gradient);
    transition: width .3s ease;
}
.staff-revenue-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--ink-500);
}

/* ---------------------------------------------------------------
   Gelir Raporu: Gün Gün Dağılım (aylık görünüm)
   Satırlar tıklanabilir; o günün detayına geçer.
   --------------------------------------------------------------- */
.day-revenue-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.day-revenue-row {
    display: grid;
    grid-template-columns: 74px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
}
.day-revenue-row:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(189, 118, 144, 0.25);
}
.day-revenue-date {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.day-revenue-date strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-900);
}
.day-revenue-date small {
    font-size: 0.68rem;
    color: var(--ink-300);
}
.day-revenue-bar {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(189, 118, 144, 0.12);
    overflow: hidden;
}
.day-revenue-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--brand-gradient);
}
.day-revenue-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-900);
    white-space: nowrap;
}
.day-revenue-amount small {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--ink-300);
}
.day-revenue-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(189, 118, 144, 0.28);
    font-size: 0.75rem;
    color: var(--ink-500);
}
.day-revenue-footer strong { color: var(--ink-900); }

@media (max-width: 640px) {
    .day-revenue-row {
        grid-template-columns: 58px 1fr auto;
        gap: 0.5rem;
        padding: 0.45rem 0.35rem;
    }
    .day-revenue-amount { font-size: 0.78rem; }
    .staff-revenue-amount { font-size: 0.92rem; }
    .day-revenue-footer { flex-direction: column; gap: 0.25rem; }

    /* Gelir sayfasindaki ay gezinme kontrolleri de dokunmaya uygun kalsin */
    #revMonthControls { gap: 0.4rem !important; }
}