/* ============ التراكر — ستايل واحد لكل الصفحات ============ */

:root {
    --bg: #f5f5f8;
    --card: #ffffff;
    --ink: #1b1b23;
    --ink-soft: #6b6b7b;
    --line: #e6e6ee;
    --brand: #6d5efc;
    --brand-soft: #efedff;

    --work: #3b82f6;
    --ticket: #f59e0b;
    --meeting: #8b5cf6;
    --personal: #ec4899;
    --danger: #ef4444;
    --ok: #10b981;

    --radius: 16px;
    --shadow: 0 1px 2px rgba(16, 16, 40, .06), 0 8px 24px rgba(16, 16, 40, .05);
    --tabbar-h: 64px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f0f16;
        --card: #191922;
        --ink: #f0f0f5;
        --ink-soft: #9a9aae;
        --line: #2a2a38;
        --brand: #8b7dff;
        --brand-soft: #241f4d;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .25);
    }
}

* { box-sizing: border-box; }

/* لازم تسبق أي display: grid على العناصر المخفية */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", "Noto Kufi Arabic", "Cairo", Tahoma, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

/* ---------------- الهيدر ---------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }

.brand-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--personal));
}

.today-chip {
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-btn {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    font-size: 16px;
}

.page { max-width: 720px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }

/* ---------------- الهيرو ---------------- */

.hero {
    display: flex; align-items: center; gap: 16px;
    padding: 18px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--brand), #a855f7);
    color: #fff;
    box-shadow: var(--shadow);
}

.hero h1 { margin: 0; font-size: 20px; }
.hero p { margin: 4px 0 0; opacity: .9; font-size: 13px; }
.hero-text { flex: 1; }

.ring {
    --pct: 0;
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,.25) 0);
    flex: none;
}

.ring::after {
    content: "";
    position: absolute; inset: 6px;
    border-radius: 50%;
    background: var(--brand);
    background: linear-gradient(135deg, var(--brand), #a855f7);
}

.ring span { position: relative; z-index: 1; font-weight: 700; font-size: 16px; }
.ring small { font-size: 10px; opacity: .8; }

/* ---------------- البانرات ---------------- */

.banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    font-size: 13px;
}

.banner button {
    margin-inline-start: auto;
    border: 0; border-radius: 10px;
    padding: 7px 14px;
    background: var(--brand); color: #fff;
    font: inherit; font-weight: 600;
    cursor: pointer;
}

.banner.warn { background: color-mix(in srgb, var(--ticket) 15%, var(--card)); border-color: var(--ticket); }
.banner.static { display: block; }

/* ---------------- الإضافة السريعة ---------------- */

.quick-add {
    display: flex; gap: 8px;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.quick-add input {
    flex: 1; min-width: 0;
    border: 0; background: transparent;
    color: inherit; font: inherit;
    padding: 8px;
    outline: none;
}

.quick-add select {
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--bg); color: inherit; font: inherit; font-size: 13px;
    padding: 6px;
}

.quick-add button {
    border: 0; border-radius: 10px;
    padding: 8px 16px;
    background: var(--brand); color: #fff;
    font: inherit; font-weight: 600;
    cursor: pointer;
}

/* ---------------- المجموعات ---------------- */

.group { display: grid; gap: 8px; }

.group > h2, .group > summary > h2 {
    margin: 4px 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-soft);
    display: flex; align-items: center; gap: 8px;
}

.group > h2 small { font-weight: 400; font-size: 12px; }
.group > h2 .count { margin-inline-start: auto; font-weight: 600; font-size: 12px; }
.group.danger > h2 { color: var(--danger); }
.group.muted { opacity: .85; }

details.group > summary { list-style: none; cursor: pointer; }
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary > h2::after { content: "▾"; margin-inline-start: auto; }

.today-badge {
    font-style: normal; font-size: 11px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--brand); color: #fff;
}

.day.is-today > h2 { color: var(--brand); }
.day-empty { margin: 0 4px; font-size: 13px; color: var(--ink-soft); }

/* ---------------- صف التاسك ---------------- */

.row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-inline-start: 4px solid var(--work);
}

.row.ticket   { border-inline-start-color: var(--ticket); }
.row.meeting  { border-inline-start-color: var(--meeting); }
.row.personal { border-inline-start-color: var(--personal); }
.row.late     { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

.row.done { opacity: .5; }
.row.done .row-title { text-decoration: line-through; }

.check {
    flex: none;
    width: 26px; height: 26px;
    margin-top: 2px;
    border-radius: 9px;
    border: 2px solid var(--line);
    background: transparent;
    cursor: pointer;
    display: grid; place-items: center;
    transition: transform .12s ease, background .12s ease;
}

.check:active { transform: scale(.88); }

.check::after {
    content: "✓";
    font-size: 15px; font-weight: 700;
    color: #fff;
    opacity: 0;
    transition: opacity .12s ease;
}

.row.done .check { background: var(--ok); border-color: var(--ok); }
.row.done .check::after { opacity: 1; }

.row-body { flex: 1; min-width: 0; }
.row-title { display: block; font-weight: 600; word-break: break-word; }

.row-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.chip {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    white-space: nowrap;
}

.row.work    .chip.kind { background: color-mix(in srgb, var(--work) 15%, transparent);    color: var(--work);    border-color: transparent; }
.row.ticket  .chip.kind { background: color-mix(in srgb, var(--ticket) 18%, transparent);  color: var(--ticket);  border-color: transparent; }
.row.meeting .chip.kind { background: color-mix(in srgb, var(--meeting) 15%, transparent); color: var(--meeting); border-color: transparent; }
.row.personal .chip.kind { background: color-mix(in srgb, var(--personal) 15%, transparent); color: var(--personal); border-color: transparent; }

.chip.prio.p2 { background: color-mix(in srgb, var(--ticket) 18%, transparent); color: var(--ticket); border-color: transparent; }
.chip.prio.p3 { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); border-color: transparent; }

.row-time { flex: none; text-align: center; display: grid; gap: 2px; min-width: 62px; }
.row-time strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.row-time small { font-size: 10px; color: var(--ink-soft); }
.row-time .late-text { color: var(--danger); }
.row-time .allday { opacity: .6; }

.row-date-hint { margin: -4px 8px 4px; font-size: 11px; color: var(--danger); }

/* ---------------- صف الإدارة ---------------- */

.manage-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-inline-start: 4px solid var(--work);
}

.manage-row.ticket   { border-inline-start-color: var(--ticket); }
.manage-row.meeting  { border-inline-start-color: var(--meeting); }
.manage-row.personal { border-inline-start-color: var(--personal); }
.manage-row.done { opacity: .5; }
.manage-row.done .manage-title { text-decoration: line-through; }

.manage-main { flex: 1; min-width: 0; }
.manage-title { display: block; font-weight: 600; }
.manage-arrow { color: var(--ink-soft); font-size: 20px; transform: scaleX(-1); }

/* ---------------- الفلاتر ---------------- */

.filters { display: grid; gap: 10px; }

.filters input[type="search"] {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--card);
    color: inherit; font: inherit;
}

.pills { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
}

.pill b { opacity: .55; font-weight: 600; }
.pill.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill.on b { opacity: .8; }

.switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.hidden-submit { position: absolute; left: -9999px; }

/* ---------------- الفورم ---------------- */

.form { display: grid; gap: 14px; }

.field { display: grid; gap: 6px; }
.field > span, .field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field em { font-style: normal; font-weight: 400; opacity: .7; }

.field input, .field select, .field textarea {
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    color: inherit;
    font: inherit;
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
    outline-offset: 1px;
}

.field textarea { resize: vertical; }

fieldset.field { border: 0; padding: 0; margin: 0; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.block { display: grid; gap: 14px; }
.block[hidden] { display: none; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }

.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }

.seg-opt span {
    display: block;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    font-size: 13px;
    cursor: pointer;
}

.seg-opt input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg-opt.ticket input:checked + span   { background: var(--ticket); border-color: var(--ticket); }
.seg-opt.meeting input:checked + span  { background: var(--meeting); border-color: var(--meeting); }
.seg-opt.personal input:checked + span { background: var(--personal); border-color: var(--personal); }

.days { display: flex; flex-wrap: wrap; gap: 6px; }
.day-opt { position: relative; }
.day-opt input { position: absolute; opacity: 0; pointer-events: none; }

.day-opt span {
    display: block;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    font-size: 13px;
    cursor: pointer;
}

.day-opt input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }

.hint { font-size: 12px; color: var(--ink-soft); }
.hint.streak { padding: 10px 14px; background: var(--card); border-radius: 12px; border: 1px solid var(--line); }
.err { font-size: 12px; color: var(--danger); }

.validation-summary:empty { display: none; }
.validation-summary ul { margin: 0; padding-inline-start: 18px; color: var(--danger); font-size: 13px; }

.form-actions, .page-actions { display: flex; gap: 10px; align-items: center; }

button.primary, .primary {
    border: 0; border-radius: 12px;
    padding: 12px 24px;
    background: var(--brand); color: #fff;
    font: inherit; font-weight: 600;
    cursor: pointer;
}

.nav-btn, button.ghost {
    display: inline-block;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 18px;
    background: var(--card); color: inherit;
    font: inherit;
    cursor: pointer;
}

button.ghost.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
button.small { padding: 6px 12px; font-size: 12px; }

.danger-zone { display: flex; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------------- الإعدادات ---------------- */

.settings-row, .device {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.settings-row > div, .device > div { flex: 1; min-width: 0; }
.settings-row strong, .device strong { display: block; font-size: 14px; }
.settings-row small, .device small { display: block; }
.devices { display: grid; gap: 8px; }

.info-list { margin: 0; padding-inline-start: 20px; font-size: 14px; display: grid; gap: 6px; }
.info-list.ordered { line-height: 1.7; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.stat {
    padding: 14px; text-align: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}

.stat b { display: block; font-size: 22px; }
.stat span { font-size: 11px; color: var(--ink-soft); }

code { background: var(--card); padding: 1px 5px; border-radius: 5px; font-size: 12px; }

/* ---------------- الفاضي ---------------- */

.empty { text-align: center; padding: 40px 16px; display: grid; gap: 10px; justify-items: center; }
.empty-emoji { font-size: 44px; }
.empty p { margin: 0; color: var(--ink-soft); }

/* ---------------- التنقل السفلي ---------------- */

.tabbar {
    position: fixed;
    inset-inline: 0; bottom: 0;
    z-index: 30;
    display: flex;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}

.tabbar a {
    flex: 1;
    display: grid; place-items: center; gap: 1px;
    font-size: 11px;
    color: var(--ink-soft);
    padding-top: 8px;
}

.tabbar a span { font-size: 19px; line-height: 1; }
.tabbar a.on { color: var(--brand); font-weight: 600; }
.tabbar a.add span { color: var(--brand); font-size: 22px; }

.week-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13px; font-weight: 600;
}

/* ---------------- التوست ---------------- */

.toast {
    position: fixed;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
    inset-inline: 20px;
    z-index: 40;
    margin: 0 auto;
    max-width: 320px;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--ink); color: var(--bg);
    text-align: center; font-size: 13px;
    box-shadow: var(--shadow);
    animation: pop .18s ease;
}

@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

/* ---------------- صفحة كود الدخول ---------------- */

.unlock-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; }

.unlock-card {
    display: grid; gap: 14px;
    width: 100%; max-width: 300px;
    padding: 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.unlock-card h1 { margin: 0; font-size: 19px; }

.unlock-card input {
    padding: 12px; border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg); color: inherit; font: inherit;
    text-align: center;
}

.unlock-card button {
    padding: 12px; border: 0; border-radius: 12px;
    background: var(--brand); color: #fff;
    font: inherit; font-weight: 600; cursor: pointer;
}

@media (max-width: 380px) {
    .row2 { grid-template-columns: 1fr; }
    .today-chip { display: none; }
}