/* ============================================================
   Plan Defteri — Ortak UI bileşenleri (pd-ui.js ile birlikte)
   Toast, onay modalı, spinner, buton yükleme, boş durum, skeleton.
   Tüm animasyonlar transform/opacity üzerinden; reduced-motion'da kapalı.
   Katmanlar: maskot 1035 < FAB 1060 < onay modalı 1075 < toast 1090.
   ============================================================ */

/* ---------------- Toast ---------------- */

.pd-toast-region {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: 16px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.pd-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    color: var(--pd-text);
    border-radius: var(--pd-r-lg);
    border-left: 4px solid var(--pd-purple);
    box-shadow: var(--pd-shadow-3);
    padding: 12px 14px;
    font-family: var(--pd-font);
    font-size: 0.9rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity var(--pd-dur) var(--pd-ease),
                transform var(--pd-dur) var(--pd-ease);
}

.pd-toast.pd-toast--in {
    opacity: 1;
    transform: translateX(0);
}

.pd-toast.pd-toast--out {
    opacity: 0;
    transform: translateX(24px);
}

.pd-toast__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--pd-r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 1px;
}

.pd-toast__body { flex: 1 1 auto; min-width: 0; }

.pd-toast__title {
    font-weight: 600;
    margin-bottom: 2px;
}

.pd-toast__msg { color: var(--pd-text-secondary); white-space: pre-line; }
.pd-toast__title + .pd-toast__msg { font-size: 0.85rem; }

.pd-toast__close {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 2px 4px;
    margin: -2px -4px 0 0;
    color: var(--pd-text-muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--pd-r-sm);
    transition: color var(--pd-dur-fast) var(--pd-ease);
}
.pd-toast__close:hover { color: var(--pd-text); }

.pd-toast--success { border-left-color: var(--pd-success); }
.pd-toast--success .pd-toast__icon { background: var(--pd-success-soft); color: var(--pd-success); }
.pd-toast--error   { border-left-color: var(--pd-danger); }
.pd-toast--error   .pd-toast__icon { background: var(--pd-danger-soft); color: var(--pd-danger); }
/* Hata anında ikon yerine şaşkın Neti (karakter anı) */
.pd-toast--error .pd-toast__icon:has(.pd-toast__neti) { background: transparent; }
.pd-toast__neti {
    width: 34px;
    height: 34px;
    object-fit: contain;
    animation: pd-neti-oops 0.5s var(--pd-ease);
}
@keyframes pd-neti-oops {
    0%   { transform: rotate(0) scale(0.7); opacity: 0; }
    50%  { transform: rotate(-8deg) scale(1.08); opacity: 1; }
    100% { transform: rotate(0) scale(1); }
}
.pd-toast--warning { border-left-color: var(--pd-warning); }
.pd-toast--warning .pd-toast__icon { background: var(--pd-warning-soft); color: var(--pd-warning-text); }
.pd-toast--info    { border-left-color: var(--pd-purple); }
.pd-toast--info    .pd-toast__icon { background: var(--pd-purple-soft); color: var(--pd-purple); }

@media (max-width: 576px) {
    /* Mobilde alttan girer; maskot sol-altta olduğundan sağa yaslı kalır. */
    .pd-toast-region {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        width: min(340px, calc(100vw - 84px));
    }
    .pd-toast { transform: translateY(16px); }
    .pd-toast.pd-toast--in { transform: translateY(0); }
    .pd-toast.pd-toast--out { opacity: 0; transform: translateY(16px); }
}

/* ---------------- Onay modalı ---------------- */

.pd-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1075;
    background: rgba(26, 26, 26, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity var(--pd-dur) var(--pd-ease);
}
.pd-confirm-overlay.pd-confirm--in { opacity: 1; }

.pd-confirm {
    background: #ffffff;
    border-radius: var(--pd-r-lg);
    box-shadow: var(--pd-shadow-3);
    width: min(420px, 100%);
    padding: 22px;
    font-family: var(--pd-font);
    transform: translateY(14px) scale(0.98);
    transition: transform var(--pd-dur) var(--pd-ease);
}
.pd-confirm-overlay.pd-confirm--in .pd-confirm { transform: translateY(0) scale(1); }

.pd-confirm__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pd-confirm__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--pd-r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pd-purple-soft);
    color: var(--pd-purple);
    font-size: 1rem;
}
.pd-confirm--danger .pd-confirm__icon { background: var(--pd-danger-soft); color: var(--pd-danger); }

.pd-confirm__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pd-text);
    margin: 0;
}

.pd-confirm__msg {
    color: var(--pd-text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 18px;
    white-space: pre-line; /* eski confirm() metinlerindeki \n satırları korunur */
}

.pd-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.pd-confirm__btn {
    font-family: var(--pd-font);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--pd-r-md);
    padding: 9px 18px;
    border: none;
    cursor: pointer;
    transition: transform var(--pd-dur-fast) var(--pd-ease),
                box-shadow var(--pd-dur-fast) var(--pd-ease),
                opacity var(--pd-dur-fast) var(--pd-ease);
}
.pd-confirm__btn:hover { transform: translateY(-1px); }
.pd-confirm__btn:active { transform: translateY(0) scale(0.98); }

.pd-confirm__btn--cancel {
    background: var(--pd-cream);
    color: var(--pd-text-secondary);
    border: 1px solid #E8EAED;
}
.pd-confirm__btn--cancel:hover { color: var(--pd-text); }

.pd-confirm__btn--ok {
    background: var(--pd-purple);
    color: #fff;
    box-shadow: var(--pd-shadow-1);
}
.pd-confirm__btn--ok:hover { box-shadow: var(--pd-shadow-2); }
.pd-confirm--danger .pd-confirm__btn--ok { background: var(--pd-danger); }

/* ---------------- Marka spinner'ı ---------------- */

.pd-spinner {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--pd-purple-soft);
    border-top-color: var(--pd-purple);
    border-right-color: var(--pd-orange);
    animation: pd-spin 0.8s linear infinite;
    vertical-align: middle;
}
.pd-spinner--sm { width: 18px; height: 18px; border-width: 2px; }

@keyframes pd-spin {
    to { transform: rotate(360deg); }
}

/* Ana panel yüklemeleri: düz spinner yerine Neti'nin mikro-hareketi —
   hafif sallanma + gözlükte kayan parıltı ("gözlük parlatma").
   Yalnızca transform/opacity; görsel yüklenemezse alt spinner devrede kalır. */
.pd-loading-neti {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 58px;
}
.pd-loading-neti img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: pd-neti-bob 1.6s ease-in-out infinite;
}
.pd-loading-neti::after {
    /* gözlük camında soldan sağa süzülen parıltı */
    content: '';
    position: absolute;
    top: 40%;
    left: 22%;
    width: 13px;
    height: 5px;
    border-radius: var(--pd-r-pill);
    background: rgba(255, 255, 255, 0.95);
    opacity: 0;
    transform: translateX(0) rotate(-18deg);
    animation: pd-neti-glint 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pd-neti-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes pd-neti-glint {
    0%, 50%  { opacity: 0; transform: translateX(0) rotate(-18deg); }
    62%      { opacity: 0.9; }
    78%, 100% { opacity: 0; transform: translateX(24px) rotate(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pd-loading-neti img, .pd-loading-neti::after { animation: none; }
    .pd-loading-neti::after { opacity: 0; }
}

/* Buton içi yükleme durumu (PDUI.btnLoading ile) */
.pd-btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}
.pd-btn-loading .pd-btn-loading__spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    animation: pd-spin 0.8s linear infinite;
    margin-right: 0.45em;
    vertical-align: -0.15em;
}

/* ---------------- Boş durum ---------------- */

.pd-empty {
    text-align: center;
    padding: 40px 20px;
    font-family: var(--pd-font);
}

.pd-empty__img {
    width: 96px;
    height: auto;
    margin-bottom: 14px;
    user-select: none;
    -webkit-user-drag: none;
}

.pd-empty__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pd-text);
    margin: 0 0 6px;
}

.pd-empty__text {
    font-size: 0.9rem;
    color: var(--pd-text-secondary);
    line-height: 1.55;
    max-width: 380px;
    margin: 0 auto 16px;
}

.pd-empty__cta { margin-top: 4px; }

/* ---------------- Skeleton (generate_program'daki shimmer genelleştirildi) ---------------- */

.pd-skeleton {
    position: relative;
    overflow: hidden;
    background: #eef0f2;
    border-radius: var(--pd-r-sm);
    color: transparent !important;
}
.pd-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: pd-shimmer 1.4s var(--pd-ease) infinite;
}

@keyframes pd-shimmer {
    to { transform: translateX(100%); }
}

/* ---------------- Liste girişi vurgusu (yeni eklenen öğe) ---------------- */

.pd-enter {
    animation: pd-enter var(--pd-dur-slow) var(--pd-ease);
}
.pd-enter-highlight {
    animation: pd-enter var(--pd-dur-slow) var(--pd-ease),
               pd-highlight 1.6s var(--pd-ease);
}

@keyframes pd-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pd-highlight {
    0%   { box-shadow: inset 0 0 0 999px var(--pd-purple-soft); }
    100% { box-shadow: inset 0 0 0 999px rgba(142, 68, 173, 0); }
}

/* ---------------- Bootstrap tooltip marka teması ---------------- */

.tooltip .tooltip-inner {
    background: var(--pd-ink);
    color: #fff;
    font-family: var(--pd-font);
    font-size: 0.78rem;
    border-radius: var(--pd-r-sm);
    padding: 5px 10px;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--pd-ink); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--pd-ink); }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--pd-ink); }
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--pd-ink); }

/* ---------------- Sayfa girişi (page_transitions.css'in hafif halefi) ---------------- */

main#main-content {
    animation: pd-page-in var(--pd-dur) var(--pd-ease);
}

@keyframes pd-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- Marka yüzey dili (Bootstrap üstü ince katman) ---------------- */

/* Buton: ortak köşe + basma hissi (yalnızca transform/opacity) */
.btn {
    border-radius: var(--pd-r-md);
    transition: transform var(--pd-dur-fast) var(--pd-ease),
                box-shadow var(--pd-dur-fast) var(--pd-ease),
                background-color var(--pd-dur-fast) var(--pd-ease),
                border-color var(--pd-dur-fast) var(--pd-ease),
                color var(--pd-dur-fast) var(--pd-ease);
}
.btn:not(:disabled):active { transform: scale(0.97); }

/* Kart ve input yüzeyleri ortak köşe ölçeğine oturur */
.card { border-radius: var(--pd-r-lg); }
.form-control, .form-select { border-radius: var(--pd-r-md); }

/* Native kontroller marka rengini kullanır (date/time picker'lar native kalır) */
:root { accent-color: var(--pd-purple); }
input[type="date"], input[type="time"], input[type="datetime-local"] {
    color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--pd-dur-fast) var(--pd-ease);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
    .pd-toast,
    .pd-confirm-overlay,
    .pd-confirm,
    .pd-confirm__btn { transition: none; }
    .pd-enter,
    .pd-enter-highlight,
    main#main-content { animation: none; }
    .pd-skeleton::after { animation-duration: 2.5s; }
}
