/* ============================================================
   MedTrack — geniş iOS uyumu (eski sürümler + en yeni)
   Strateji: önce her cihazda çalışan sabit renkler/yedekler;
   modern özellikler (color-mix, aspect-ratio, gap, grid) yalnızca
   @supports ile, destekleyen tarayıcılarda iyileştirme olarak.
   Eski iOS için -webkit- flex prefiksleri de eklenmiştir.
   ============================================================ */

:root {
    --mt-accent: #4f8cff;
    --mt-accent-hover: #3f7bef;
    --mt-accent-2: #6ee7b7;
    --mt-green: #22c55e;
    --mt-warn: #f59e0b;
}

/* ============ DARK = PURE BLACK ============ */
[data-bs-theme="dark"] {
    --bs-body-bg: #000000;
    --bs-body-color: #f2f2f4;
    --bs-border-color: #1c1c1e;
    --mt-card-bg: #0c0c0e;
    --mt-card-border: #1f1f22;
    --mt-elev: #161618;
    --mt-muted: #8a8a90;
    --bs-secondary-color: #8a8a90;

    /* Solid (opak) renkler — yaşlı kullanıcılar için yüksek kontrast.
       Yarı saydam değerler yok; her şey net görünür. */
    --mt-navbar-bg: #000000;
    --mt-accent-focus: #4f8cff;          /* odak halkası: tam accent */
    --mt-now-glow: rgba(34, 197, 94, 0); /* parıltı kapalı, yerine kalın kenar */
    --mt-overdue-bg: #f59e0b;            /* dolu turuncu rozet */
    --mt-overdue-text: #000000;          /* turuncu üstüne siyah yazı */
    --mt-overdue-border: #f59e0b;
    --mt-strike: #8a8a90;                /* opak üstü çizili */
    --mt-late-border: #f59e0b;           /* belirgin turuncu kenar */
    --mt-warn-text: #fbbf24;             /* koyu zeminde okunur sıcak sarı */
    --mt-cell-1: #1f2a3f;
    --mt-cell-2: #2a3f63;
    --mt-cell-3: #355488;
}

/* ============ LIGHT ============ */
[data-bs-theme="light"] {
    --bs-body-bg: #f5f6f8;
    --bs-body-color: #16171a;
    --bs-border-color: #e4e6ea;
    --mt-card-bg: #ffffff;
    --mt-card-border: #e7e9ee;
    --mt-elev: #eef0f4;
    --mt-muted: #6b7280;

    /* Solid (opak) renkler — yüksek kontrast */
    --mt-navbar-bg: #f5f6f8;
    --mt-accent-focus: #4f8cff;
    --mt-now-glow: rgba(34, 197, 94, 0);
    --mt-overdue-bg: #f59e0b;
    --mt-overdue-text: #000000;
    --mt-overdue-border: #f59e0b;
    --mt-strike: #6b7280;
    --mt-late-border: #b45309;           /* light temada koyu turuncu kenar */
    --mt-warn-text: #b45309;             /* beyaz zeminde okunur koyu turuncu */
    --mt-cell-1: #d7e3fb;
    --mt-cell-2: #aec6f7;
    --mt-cell-3: #86aaf3;
}

/* ---- Tipografi / iOS davranışı ---- */
html {
    -webkit-text-size-adjust: 100%;   /* iOS yatay çevrimde yazı büyütmesin */
    text-size-adjust: 100%;
}
html, body { height: 100%; }
body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size: 16px;
}
main { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; flex: 1 0 auto; }
.container-xxl { max-width: 720px; }

/* Çentikli iPhone'larda güvenli alan boşlukları (viewport-fit=cover ile) */
.mt-navbar .container-xxl {
    padding-left: calc(.75rem + env(safe-area-inset-left));
    padding-right: calc(.75rem + env(safe-area-inset-right));
}
.mt-footer { padding-bottom: env(safe-area-inset-bottom); }

/* iOS dokunma vurgusunu yumuşat */
a, button, label, .mt-med, .mt-cell { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* ---- Navbar ---- */
.mt-navbar {
    background: var(--mt-navbar-bg);
    border-bottom: 1px solid var(--mt-card-border);
}
/* Bulanıklık yalnızca destekleyen cihazlarda; desteklemeyende
   yukarıdaki opak arkaplan okunabilirliği korur. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mt-navbar {
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
}
.mt-navbar .navbar-brand { color: var(--bs-body-color); font-size: 1.05rem; }
.mt-navbar .navbar-brand i { color: var(--mt-accent); }

.mt-navbtn {
    color: var(--bs-body-color);
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    -webkit-transition: background .15s ease, border-color .15s ease;
    transition: background .15s ease, border-color .15s ease;
    /* Rahat dokunma alanı */
    min-height: 40px;
    min-width: 40px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.mt-navbtn:hover { background: var(--mt-elev); color: var(--bs-body-color); }
.mt-navbtn.active {
    background: var(--mt-elev);
    border-color: var(--mt-card-border);
    color: var(--mt-accent);
}

/* ---- Cards ---- */
.mt-card {
    background: var(--mt-card-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: 16px;
    overflow: hidden;
}

/* ---- Day header ---- */
.mt-day-head .fw-semibold { font-size: 1.05rem; }

/* ---- Progress ---- */
.mt-progressbar {
    height: 10px;
    border-radius: 999px;
    background: var(--mt-elev);
}
.mt-progressbar .progress-bar {
    border-radius: 999px;
    background: var(--mt-green);
    -webkit-transition: width .35s cubic-bezier(.22,.61,.36,1);
    transition: width .35s cubic-bezier(.22,.61,.36,1);
}

/* ---- Slot ---- */
.mt-slot-title {
    color: var(--mt-muted);
    letter-spacing: .08em;
    font-weight: 700;
    margin-bottom: .6rem;
    padding-left: .25rem;
}

/* ---- Med rows (checklist) ---- */
.mt-med {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: .95rem 1.1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--mt-card-border);
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: background .12s ease;
    transition: background .12s ease;
    min-height: 56px;   /* rahat dokunma hedefi */
}
.mt-med:last-child { border-bottom: 0; }
.mt-med:active { background: var(--mt-elev); }
.mt-med input { position: absolute; opacity: 0; pointer-events: none; }

/* flex-gap yedeği: eski iOS gap desteklemez → margin */
.mt-med-box { margin-right: .9rem; }
.mt-med .mt-late-icon { margin-left: auto; }
@supports (gap: 1px) {
    .mt-med { gap: .9rem; }
    .mt-med-box { margin-right: 0; }
}

.mt-med-box {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 9px;
    border: 2px solid var(--mt-card-border);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: transparent;
    -webkit-transition: all .18s cubic-bezier(.22,.61,.36,1);
    transition: all .18s cubic-bezier(.22,.61,.36,1);
    font-size: 1.05rem;
}
.mt-med-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 0;
}
.mt-med-name {
    font-size: 1.05rem;
    -webkit-transition: color .15s ease;
    transition: color .15s ease;
}
.mt-med-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-accent);
    white-space: nowrap;
    margin-left: .35rem;
    vertical-align: baseline;
}
.mt-med-time i { font-size: 12px; }
.mt-med.is-taken .mt-med-time { color: var(--mt-muted); }
.mt-med-brand {
    font-size: 15px;
    color: var(--mt-muted);
    line-height: 1.25;
}
.mt-med.is-taken .mt-med-box {
    background: var(--mt-green);
    border-color: var(--mt-green);
    color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.mt-med.is-taken .mt-med-name {
    color: var(--mt-muted);
    text-decoration: line-through;
    -webkit-text-decoration-color: var(--mt-strike);
    text-decoration-color: var(--mt-strike);
}
@-webkit-keyframes mt-pop { 0%{-webkit-transform:scale(.7)} 60%{-webkit-transform:scale(1.12)} 100%{-webkit-transform:scale(1)} }
@keyframes mt-pop { 0%{transform:scale(.7)} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }
.mt-med.is-taken .mt-med-box i { -webkit-animation: mt-pop .25s ease; animation: mt-pop .25s ease; }

/* ---- Meds management rows ---- */
.mt-med-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--mt-card-border);
}
.mt-med-row:last-child { border-bottom: 0; }
.mt-med-row.is-inactive { opacity: .55; }
.mt-med-row form { margin: 0; }
/* gap yedeği */
.mt-med-row .d-flex.gap-1 > * { margin-left: .25rem; }
.mt-med-row .d-flex.gap-1 > *:first-child { margin-left: 0; }
@supports (gap: 1px) {
    .mt-med-row .d-flex.gap-1 > * { margin-left: 0; }
}
.mt-badge {
    background: var(--mt-elev);
    color: var(--mt-muted);
    font-weight: 600;
}

/* ---- Forms ---- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: var(--mt-elev);
    border-color: var(--mt-card-border);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: var(--mt-elev);
    border-color: var(--mt-accent);
    color: var(--bs-body-color);
    -webkit-box-shadow: 0 0 0 .2rem var(--mt-accent-focus);
    box-shadow: 0 0 0 .2rem var(--mt-accent-focus);
}
/* iOS'ta input zoom'unu önle: 16px taban */
.form-control, .form-select { font-size: 16px; }
.btn-primary {
    --bs-btn-bg: var(--mt-accent);
    --bs-btn-border-color: var(--mt-accent);
    --bs-btn-hover-bg: var(--mt-accent-hover);
    --bs-btn-hover-border-color: var(--mt-accent-hover);
    --bs-btn-active-bg: var(--mt-accent-hover);
    /* Bootstrap CSS değişkeni desteklenmeyen çok eski sürümler için sabit yedek */
    background-color: var(--mt-accent);
    border-color: var(--mt-accent);
}

/* ---- Login ---- */
.mt-login {
    min-height: 100vh;
    min-height: -webkit-fill-available;   /* iOS adres çubuğu yüksekliği */
    padding: 2rem 1rem;
}
.mt-login-card {
    width: 100%;
    max-width: 360px;
    background: var(--mt-card-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: 20px;
    padding: 2rem 1.75rem;
}
.mt-login-logo {
    width: 64px; height: 64px;
    margin: 0 auto;
    border-radius: 18px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 1.9rem; color: #fff;
    background: var(--mt-accent);
    background: -webkit-linear-gradient(315deg, var(--mt-accent), var(--mt-accent-2));
    background: linear-gradient(135deg, var(--mt-accent), var(--mt-accent-2));
}

/* ---- Stats ---- */
.mt-stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }

/* ---- Heatmap ---- */
.mt-heatmap {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}
/* CSS grid desteklemeyen çok eski iOS (≤9) için flex yedeği */
@supports not (display: grid) {
    .mt-heatmap {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .mt-heatmap .mt-cell { width: 9%; margin: 0.5%; }
}
.mt-cell {
    border-radius: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    font-size: 15px;
    text-decoration: none;
    color: var(--mt-muted);
    border: 1px solid var(--mt-card-border);
    background: var(--mt-elev);
    -webkit-transition: -webkit-transform .1s ease;
    transition: transform .1s ease;
    position: relative;
}
/* aspect-ratio yedeği: eski iOS desteklemez → padding-hack ile kare hücre */
.mt-cell::before { content: ""; display: block; padding-top: 100%; }
.mt-cell > span {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
@supports (aspect-ratio: 1) {
    .mt-cell { aspect-ratio: 1; }
    .mt-cell::before { display: none; }
    .mt-cell > span { position: static; display: block; }
}
.mt-cell:hover { -webkit-transform: scale(1.08); transform: scale(1.08); color: var(--bs-body-color); }
.mt-cell.mt-l0 { background: var(--mt-elev); }
.mt-cell.mt-l1 { background: var(--mt-cell-1); color: #fff; }
.mt-cell.mt-l2 { background: var(--mt-cell-2); color: #fff; }
.mt-cell.mt-l3 { background: var(--mt-cell-3); color: #fff; }
.mt-cell.mt-l4 { background: var(--mt-green); color: #fff; }

/* ---- Footer ---- */
.mt-footer { -webkit-flex-shrink: 0; flex-shrink: 0; }

/* ---- Modal dark ---- */
[data-bs-theme="dark"] .modal-content.mt-card { background: var(--mt-card-bg); }

/* ---- O anki öğün vurgusu ---- */
.mt-slot.is-now .mt-card {
    border-color: var(--mt-green);
    /* Solid, belirgin yeşil çerçeve (parıltı yerine) */
    -webkit-box-shadow: 0 0 0 2px var(--mt-green);
    box-shadow: 0 0 0 2px var(--mt-green);
}
.mt-slot.is-now .mt-slot-title { color: var(--mt-green); }

.mt-slot.is-overdue .mt-slot-title { color: var(--mt-warn-text); }

/* Öğün rozetleri */
.mt-slot-tag {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: .1rem .55rem;
    border-radius: 999px;
    line-height: 1.3;
}
.mt-tag-now {
    background: var(--mt-green);
    color: #fff;
}
.mt-tag-overdue {
    background: var(--mt-overdue-bg);
    color: var(--mt-overdue-text);
    border: 1px solid var(--mt-overdue-border);
    font-weight: 700;
}

/* Vakti geçmiş, alınmamış ilaç */
.mt-med.is-late .mt-med-name { color: var(--mt-warn-text); font-weight: 700; }
.mt-med.is-late .mt-med-box { border-color: var(--mt-late-border); border-width: 3px; }
.mt-late-icon { color: var(--mt-warn-text); font-size: 1.05rem; }

/* "ALMADIN" rozeti — solid, dikkat çekici */
.mt-late-badge {
    flex: 0 0 auto;
    background: var(--mt-warn);
    color: #000000;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .04em;
    padding: .2rem .5rem;
    border-radius: 8px;
    white-space: nowrap;
}
/* İşaret kaldırıldığında (is-late yoksa) rozet gizlensin */
.mt-med:not(.is-late) .mt-late-badge { display: none; }

/* ---- En küçük yazı tabanı: 15px ---- */
.small, small,
.form-text,
.badge,
.mt-badge,
.text-secondary.small,
.form-label.small { font-size: 15px !important; }
.mt-footer small { font-size: 15px; }
