/* ============================================================
   GLOBAL TARİH & SAAT SEÇİCİ — datetime-picker.css
   ------------------------------------------------------------
   Sistemdeki tüm <input type="date|time|datetime-local"> alanları
   datetime-picker.js tarafından otomatik olarak bu bileşene
   dönüştürülür. Sayfa başına ayrı stil yazmaya gerek yoktur.

   Yapı (JS tarafından üretilir):
     input.dtp-native   → gizli, ISO değeri taşır (name/id burada)
     input[data-dtp]    → görünen alan; özgün class/style'ı devralır
     .dtp-pop           → body'ye eklenen, position:fixed açılır panel

   Renkler açık/koyu tema sözleşmesine (--bg-*, --text-*, --border-*)
   bağlıdır; token yoksa açık tema değerlerine düşer. Böylece hem
   acente panelinde hem admin panelinde tek dosya yeterlidir.
   ============================================================ */

:root {
    --dtp-surface:   var(--bg-elevated, #ffffff);
    --dtp-inset:     var(--bg-inset, #f8fafc);
    --dtp-hover:     var(--bg-hover, #f1f5f9);
    --dtp-line:      var(--border-1, #e2e8f0);
    --dtp-line-soft: var(--border-2, #f1f5f9);
    --dtp-ink:       var(--text-1, #0f172a);
    --dtp-ink-2:     var(--text-2, #334155);
    --dtp-mute:      var(--text-3, #64748b);
    --dtp-accent:    #2563eb;
    --dtp-accent-2:  #3b82f6;
    --dtp-on-accent: #ffffff;
    --dtp-weekend:   #e11d48;
    --dtp-shadow:    0 24px 48px -18px rgba(15, 23, 42, .32), 0 4px 12px -4px rgba(15, 23, 42, .10);
    --dtp-ring:      rgba(37, 99, 235, .16);
}

[data-theme="dark"] {
    --dtp-accent:    #4d7fe8;
    --dtp-accent-2:  #6591ec;
    --dtp-weekend:   #f2708d;
    --dtp-shadow:    0 28px 56px -18px rgba(0, 0, 0, .78), 0 6px 16px -6px rgba(0, 0, 0, .55);
    --dtp-ring:      rgba(77, 127, 232, .26);
}

/* ── Alanın kendisi ─────────────────────────────────────────── */

/* ISO değeri taşıyan özgün input: görünmez ama odaklanabilir
   (required doğrulama balonunun konumlanabilmesi için gerekli). */
input.dtp-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: -1px 0 0 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1;
}

/* Görünen alan — özgün class'ları devraldığı için çerçeve/dolgu
   sayfanın kendi stilinden gelir; burada yalnızca ikon ve rakam
   hizası eklenir. */
input[data-dtp] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: .01em;
    cursor: pointer;
    /* Sayfaların kendi `background:` kısayolları ikon katmanını silmesin diye
       ikon bildirimleri !important; renk/çerçeve yine sayfadan gelir. */
    background-repeat: no-repeat !important;
    background-position: right .62rem center !important;
    background-size: 15px 15px !important;
    padding-right: 2.05rem;
}

input[data-dtp="date"], input[data-dtp="datetime"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") !important;
}
input[data-dtp="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E") !important;
}
[data-theme="dark"] input[data-dtp="date"],
[data-theme="dark"] input[data-dtp="datetime"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") !important;
}
[data-theme="dark"] input[data-dtp="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E") !important;
}

/* Klavyeyle yazarken imleç metin imleci olur */
input[data-dtp]:focus { cursor: text; }
/* Geçersiz yazım — alan terk edilene kadar uyarır */
input[data-dtp].dtp-bad { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .13) !important; }
input[data-dtp][readonly] { cursor: pointer; }
input[data-dtp]:disabled { cursor: not-allowed; opacity: .62; }

/* ── Açılır panel ───────────────────────────────────────────── */

.dtp-pop {
    position: fixed;
    z-index: 2147483000;           /* modal / drawer / offcanvas üstünde */
    display: flex;
    align-items: stretch;
    width: max-content;
    background: var(--dtp-surface);
    border: 1px solid var(--dtp-line);
    border-radius: 16px;
    box-shadow: var(--dtp-shadow);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    color: var(--dtp-ink);
    overflow: hidden;
    transform-origin: top center;
    animation: dtp-in .16s cubic-bezier(.16, .84, .44, 1);
    -webkit-user-select: none;
    user-select: none;
}
.dtp-pop.dtp-up { transform-origin: bottom center; }
.dtp-pop.dtp-closing { animation: dtp-out .11s ease-in forwards; }

@keyframes dtp-in  { from { opacity: 0; transform: translateY(-6px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes dtp-out { to   { opacity: 0; transform: translateY(-4px) scale(.985); } }
.dtp-pop.dtp-up  { animation-name: dtp-in-up; }
@keyframes dtp-in-up { from { opacity: 0; transform: translateY(6px) scale(.975); } to { opacity: 1; transform: none; } }

/* Panelin üst kenarındaki ince ışık — yüzeyi zeminden ayırır */
.dtp-pop::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    pointer-events: none;
}
[data-theme="dark"] .dtp-pop::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
}

/* ── Takvim tarafı ──────────────────────────────────────────── */

.dtp-cal { position: relative; width: 296px; padding: 12px 12px 4px; }

.dtp-head {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 10px;
}
.dtp-title {
    flex: 1; display: flex; align-items: center; gap: 5px;
    min-width: 0;
}
.dtp-t {
    border: 0; background: transparent;
    font: inherit; font-weight: 700; font-size: 13.5px;
    color: var(--dtp-ink);
    padding: 5px 9px; border-radius: 9px;
    cursor: pointer; transition: background .13s, color .13s;
    white-space: nowrap;
}
.dtp-t:hover { background: var(--dtp-hover); }
.dtp-t.on { background: var(--dtp-accent); color: var(--dtp-on-accent); }
.dtp-t small { font-weight: 600; opacity: .55; font-size: 11px; margin-left: 1px; }

.dtp-nav {
    width: 28px; height: 28px; flex: 0 0 28px;
    display: grid; place-items: center;
    border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: var(--dtp-mute);
    cursor: pointer; transition: background .13s, color .13s, border-color .13s;
}
.dtp-nav:hover { background: var(--dtp-hover); color: var(--dtp-ink); border-color: var(--dtp-line); }
.dtp-nav:disabled { opacity: .3; cursor: default; background: transparent; border-color: transparent; }
.dtp-nav svg { width: 15px; height: 15px; }

.dtp-wd {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 3px;
}
.dtp-wd span {
    text-align: center;
    font-size: 10px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dtp-mute);
    padding-bottom: 6px;
}
.dtp-wd span.we { color: var(--dtp-weekend); opacity: .8; }

.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.dtp-day {
    position: relative;
    height: 36px;
    border: 0; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--dtp-ink-2);
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, color .12s, transform .12s;
}
.dtp-day:hover:not(:disabled) { background: var(--dtp-hover); color: var(--dtp-ink); }
.dtp-day.we { color: var(--dtp-weekend); }
.dtp-day.out { opacity: .32; font-weight: 500; }
.dtp-day:disabled { opacity: .22; cursor: default; text-decoration: line-through; }

/* Bugün: rakamın altında minik nokta */
.dtp-day.today::after {
    content: ""; position: absolute; left: 50%; bottom: 5px;
    width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: var(--dtp-accent);
}
.dtp-day.sel {
    background: var(--dtp-accent); color: var(--dtp-on-accent);
    box-shadow: 0 4px 10px -3px var(--dtp-ring);
    animation: dtp-pick .22s cubic-bezier(.2, 1.5, .5, 1);
}
.dtp-day.sel.we { color: var(--dtp-on-accent); }
.dtp-day.sel::after { background: var(--dtp-on-accent); opacity: .9; }
.dtp-day.kb:not(.sel) { box-shadow: inset 0 0 0 1.5px var(--dtp-accent); color: var(--dtp-ink); }
@keyframes dtp-pick { 0% { transform: scale(.82); } 100% { transform: scale(1); } }

/* Ay / yıl seçim katmanı — takvimin üstünde açılır */
.dtp-pane {
    position: absolute; inset: 44px 12px 4px;
    background: var(--dtp-surface);
    display: grid; gap: 4px;
    animation: dtp-fade .14s ease;
    overflow: auto;
    scrollbar-width: thin;
}
.dtp-pane.m { grid-template-columns: repeat(3, 1fr); align-content: start; }
.dtp-pane.y { grid-template-columns: repeat(4, 1fr); align-content: start; padding-bottom: 2px; }
@keyframes dtp-fade { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

.dtp-pane button {
    border: 0; background: transparent;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--dtp-ink-2);
    padding: 9px 4px; border-radius: 9px;
    cursor: pointer; transition: background .12s, color .12s;
}
.dtp-pane button:hover { background: var(--dtp-hover); color: var(--dtp-ink); }
.dtp-pane button.sel { background: var(--dtp-accent); color: var(--dtp-on-accent); }
.dtp-pane button:disabled { opacity: .25; cursor: default; }

/* ── Saat tarafı ────────────────────────────────────────────── */

.dtp-time {
    display: flex; flex-direction: column;
    width: 148px;
    border-left: 1px solid var(--dtp-line-soft);
    background: var(--dtp-inset);
}
.dtp-pop.only-time .dtp-time { border-left: 0; background: var(--dtp-surface); }

.dtp-clock {
    display: flex; align-items: baseline; justify-content: center; gap: 1px;
    padding: 13px 0 11px;
    font-size: 25px; font-weight: 700; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--dtp-ink);
    border-bottom: 1px solid var(--dtp-line-soft);
}
.dtp-clock i { font-style: normal; color: var(--dtp-mute); font-weight: 600; padding: 0 1px; }
.dtp-clock b { font-weight: 700; transition: color .12s; }
.dtp-clock b.act { color: var(--dtp-accent); }

.dtp-cols { position: relative; display: flex; flex: 1; min-height: 0; }
/* Seçim bandı — iki kolonu da kesen yatay vurgu */
.dtp-cols::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 30px; margin-top: -15px;
    background: var(--dtp-hover);
    border-top: 1px solid var(--dtp-line-soft);
    border-bottom: 1px solid var(--dtp-line-soft);
    pointer-events: none;
}
.dtp-col {
    position: relative; z-index: 1;
    flex: 1; min-width: 0;
    height: 186px; overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    padding: 78px 0;              /* ilk/son öğe de banda hizalanabilsin */
    text-align: center;
}
.dtp-col::-webkit-scrollbar { width: 0; height: 0; }
.dtp-col + .dtp-col { border-left: 1px solid var(--dtp-line-soft); }

.dtp-tc {
    display: block; width: 100%;
    border: 0; background: transparent;
    font: inherit; font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--dtp-mute);
    height: 30px; line-height: 30px;
    scroll-snap-align: center;
    cursor: pointer;
    transition: color .12s, transform .12s;
}
.dtp-tc:hover { color: var(--dtp-ink); }
.dtp-tc.sel { color: var(--dtp-accent); font-weight: 800; transform: scale(1.14); }

.dtp-tlab {
    display: flex; border-bottom: 1px solid var(--dtp-line-soft);
}
.dtp-tlab span {
    flex: 1; text-align: center; padding: 7px 0 6px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--dtp-mute);
}
.dtp-tlab span + span { border-left: 1px solid var(--dtp-line-soft); }

/* ── Alt bar ────────────────────────────────────────────────── */

.dtp-foot {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--dtp-line-soft);
    background: var(--dtp-surface);
}
.dtp-pop > .dtp-wrap { display: flex; flex-direction: column; }
.dtp-row { display: flex; }

.dtp-btn {
    border: 1px solid transparent; background: transparent;
    font: inherit; font-size: 12px; font-weight: 650;
    color: var(--dtp-mute);
    padding: 6px 11px; border-radius: 9px;
    cursor: pointer; transition: background .13s, color .13s, border-color .13s;
}
.dtp-btn:hover { background: var(--dtp-hover); color: var(--dtp-ink); border-color: var(--dtp-line); }
.dtp-btn.pri {
    background: var(--dtp-accent); color: var(--dtp-on-accent);
    border-color: var(--dtp-accent);
    box-shadow: 0 3px 8px -3px var(--dtp-ring);
}
.dtp-btn.pri:hover { background: var(--dtp-accent-2); border-color: var(--dtp-accent-2); color: var(--dtp-on-accent); }
.dtp-btn.dgr:hover { color: #ef4444; border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .07); }
.dtp-sp { margin-left: auto; }

/* ── Küçük ekran: alttan açılan yaprak ──────────────────────── */

@media (max-width: 480px) {
    .dtp-pop {
        left: 8px !important; right: 8px !important;
        top: auto !important; bottom: 8px !important;
        width: auto !important;
        flex-direction: column;
        animation-name: dtp-sheet;
    }
    .dtp-cal { width: auto; }
    .dtp-time { width: auto; border-left: 0; border-top: 1px solid var(--dtp-line-soft); }
    .dtp-col { height: 156px; padding: 63px 0; }
    .dtp-row { flex-direction: column; }
    @keyframes dtp-sheet { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
    .dtp-pop, .dtp-pane, .dtp-day.sel { animation: none !important; }
    .dtp-day, .dtp-tc, .dtp-btn, .dtp-t, .dtp-nav { transition: none !important; }
}
