@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
    color-scheme: light;
    --bg: #f3efe6;
    --bg-2: #ebe4d6;
    --ink: #1c2a24;
    --muted: #5d6b63;
    --line: #d5cbb8;
    --card: rgba(255, 252, 246, 0.92);
    --surface: #ffffff;
    --surface-2: #f7f2e8;
    --topbar: rgba(255, 252, 246, 0.8);
    --accent: #0f6b5c;
    --accent-soft: rgba(15, 107, 92, 0.08);
    --accent-2: #c45c26;
    --ok: #1f7a4c;
    --no: #a33b3b;
    --warn: #9a6b12;
    --shadow: 0 18px 40px rgba(28, 42, 36, 0.08);
    --radius: 18px;
    --font: "Vazirmatn", "Tahoma", sans-serif;
    --exact-bg: #f3fbf6;
    --suggest-bg: #f5f9ff;
    --badge-pending-bg: #fff3cd;
    --badge-pending-ink: #7a5b00;
    --badge-ok-bg: #d8f3e3;
    --badge-ok-ink: #146c43;
    --badge-no-bg: #f8d7da;
    --badge-no-ink: #842029;
    --badge-propose-bg: #ddeeff;
    --badge-propose-ink: #084298;
    --alert-ok-bg: #d8f3e3;
    --alert-ok-ink: #146c43;
    --alert-ok-line: #b7e4c7;
    --alert-err-bg: #f8d7da;
    --alert-err-ink: #842029;
    --alert-err-line: #f1aeb5;
    --alert-info-bg: #e7f1ff;
    --alert-info-ink: #084298;
    --alert-info-line: #b6d4fe;
    --dash: rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] {
    --bg: #0f1614;
    --bg-2: #15201c;
    --ink: #e8efe9;
    --muted: #9aaca2;
    --line: #2a3a34;
    --card: rgba(22, 32, 28, 0.94);
    --surface: #1a2621;
    --surface-2: #203029;
    --topbar: rgba(14, 22, 19, 0.88);
    --accent: #3cbc9f;
    --accent-soft: rgba(60, 188, 159, 0.14);
    --accent-2: #e08a4f;
    --ok: #49c48a;
    --no: #e07272;
    --warn: #d4a63a;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    --exact-bg: rgba(31, 122, 76, 0.16);
    --suggest-bg: rgba(60, 120, 200, 0.16);
    --badge-pending-bg: rgba(212, 166, 58, 0.2);
    --badge-pending-ink: #f0d48a;
    --badge-ok-bg: rgba(73, 196, 138, 0.18);
    --badge-ok-ink: #8ee0b4;
    --badge-no-bg: rgba(224, 114, 114, 0.18);
    --badge-no-ink: #f0a0a0;
    --badge-propose-bg: rgba(90, 150, 230, 0.18);
    --badge-propose-ink: #a8c8f0;
    --alert-ok-bg: rgba(73, 196, 138, 0.16);
    --alert-ok-ink: #8ee0b4;
    --alert-ok-line: rgba(73, 196, 138, 0.35);
    --alert-err-bg: rgba(224, 114, 114, 0.16);
    --alert-err-ink: #f0a0a0;
    --alert-err-line: rgba(224, 114, 114, 0.35);
    --alert-info-bg: rgba(90, 150, 230, 0.16);
    --alert-info-ink: #a8c8f0;
    --alert-info-line: rgba(90, 150, 230, 0.35);
    --dash: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 10%, rgba(15, 107, 92, 0.12), transparent 35%),
        radial-gradient(circle at 90% 0%, rgba(196, 92, 38, 0.12), transparent 30%),
        linear-gradient(160deg, var(--bg), var(--bg-2));
    min-height: 100vh;
    transition: background .25s ease, color .2s ease;
}
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 15% 10%, rgba(60, 188, 159, 0.1), transparent 35%),
        radial-gradient(circle at 90% 0%, rgba(224, 138, 79, 0.08), transparent 30%),
        linear-gradient(160deg, var(--bg), var(--bg-2));
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--topbar);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}
.brand a {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink);
    text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: .75rem; }
.nav a {
    color: var(--muted);
    font-weight: 600;
    padding: .35rem .55rem;
    border-radius: 999px;
}
.nav a.active, .nav a:hover {
    color: var(--accent);
    background: var(--accent-soft);
    text-decoration: none;
}
.userbox { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.theme-toggle {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 10px;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }
.notif-dot {
    background: var(--accent-2);
    color: #fff;
    min-width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
}

.container {
    width: min(1100px, calc(100% - 2rem));
    margin: 1.5rem auto 2rem;
    flex: 1;
}
.footer {
    text-align: center;
    color: var(--muted);
    padding: 1.5rem;
    font-size: .9rem;
}

.hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}
.hero-copy, .panel, .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hero-copy { padding: 2rem; }
.hero-copy h1 {
    margin: 0 0 .75rem;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.25;
}
.hero-copy p { color: var(--muted); margin: 0 0 1.25rem; line-height: 1.8; }
.hero-side {
    padding: 1.5rem;
    background:
        linear-gradient(145deg, rgba(15,107,92,.92), rgba(28,42,36,.88)),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #fff;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.hero-side h2 { margin: 0 0 .5rem; font-size: 1.4rem; }
.hero-side p { margin: 0; opacity: .9; line-height: 1.7; }

.panel { padding: 1.25rem; margin-bottom: 1.25rem; }
.panel h2, .panel h3 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stat {
    padding: 1rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.stat strong { display: block; font-size: 1.6rem; margin-top: .35rem; }

label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .92rem; }
.form-row { margin-bottom: 1rem; }
.form-row input, .form-row select, .form-row textarea {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    font: inherit;
    color: var(--ink);
}
.form-row textarea { min-height: 90px; resize: vertical; }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    border-radius: 12px;
    padding: .7rem 1.1rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn-secondary { background: #2f3d37; }
html[data-theme="dark"] .btn-secondary { background: #3d524a; }
.btn-danger { background: var(--no); }
.btn-warn { background: var(--accent-2); }
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
.btn-sm { padding: .4rem .7rem; font-size: .85rem; border-radius: 10px; }

.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: 14px;
    overflow: hidden;
}
th, td {
    padding: .85rem .75rem;
    border-bottom: 1px solid var(--line);
    text-align: right;
    vertical-align: top;
}
th { background: var(--surface-2); font-size: .9rem; }
tr:last-child td { border-bottom: none; }

.badge {
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.badge-pending { background: var(--badge-pending-bg); color: var(--badge-pending-ink); }
.badge-ok { background: var(--badge-ok-bg); color: var(--badge-ok-ink); }
.badge-no { background: var(--badge-no-bg); color: var(--badge-no-ink); }
.badge-propose { background: var(--badge-propose-bg); color: var(--badge-propose-ink); }

.alert {
    padding: .9rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.alert-success { background: var(--alert-ok-bg); color: var(--alert-ok-ink); border-color: var(--alert-ok-line); }
.alert-error { background: var(--alert-err-bg); color: var(--alert-err-ink); border-color: var(--alert-err-line); }
.alert-info { background: var(--alert-info-bg); color: var(--alert-info-ink); border-color: var(--alert-info-line); }

.match-list { display: grid; gap: .75rem; }
.match-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.match-item.exact { border-color: rgba(31,122,76,.35); background: var(--exact-bg); }
.match-item.suggested { border-color: rgba(8,66,152,.25); background: var(--suggest-bg); }
.muted { color: var(--muted); }
.stack { display: grid; gap: .35rem; }

.auth-box {
    width: min(460px, 100%);
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.datetime-jalali {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: .5rem;
}
.datetime-jalali input,
input.jalali-date {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    font: inherit;
    color: var(--ink);
}
input.jalali-date { letter-spacing: .02em; cursor: pointer; }

/* تقویم شمسی روی دارک مود */
html[data-theme="dark"] .jdp-container,
html[data-theme="dark"] jdp-container {
    --jdp-background: #1a2621;
    --jdp-forecolor: #e8efe9;
    color-scheme: dark;
}

.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .55rem;
}
.perm-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 500;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    margin: 0;
}
.perm-item input { width: auto; }
.perm-edit { margin-bottom: .4rem; }
.perm-edit summary { list-style: none; cursor: pointer; display: inline-flex; }
.perm-edit-form {
    margin-top: .6rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.exclude-filter { margin-bottom: .65rem; }
.exclude-list {
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: .75rem;
}
.exclude-group { margin-bottom: 1rem; }
.exclude-group:last-child { margin-bottom: 0; }
.exclude-group-title { display: block; margin-bottom: .5rem; }
.exclude-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .4rem 0;
    margin: 0;
    font-weight: 500;
    border-bottom: 1px dashed var(--dash);
}
.exclude-item:last-child { border-bottom: none; }
.exclude-item input { width: auto; margin-top: .2rem; }
.exclude-item small { display: block; }

@media (max-width: 860px) {
    .hero, .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .topbar { flex-direction: column; align-items: stretch; }
    .userbox { justify-content: space-between; }
    .match-item { flex-direction: column; align-items: stretch; }
    .datetime-jalali { grid-template-columns: 1fr; }
}