/* سامانهٔ تعمیرگاه — یک برگهٔ سبک برای همهٔ صفحه‌ها. موبایل‌اول: پیشخوان و مکانیک با گوشی کار می‌کنند. */
@import url('../fonts/vazirmatn.css');

:root {
    --brand: #E10613;
    --brand-soft: #fdecee;
    --ink: #0D0D0D;
    --ink-2: #555555;
    --line: #e2e2e4;
    --bg: #f4f4f5;
    --surface: #fff;
    --ok: #0f8a4a;
    --ok-soft: #e7f5ee;
    --warn: #a35f00;
    --warn-soft: #fff5e0;
    --danger: #9f1a14;
    --danger-soft: #fdecea;
    --field: #c7cbd4;
    --radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Vazirmatn, system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.7; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 18px 0 8px; }
h2 { font-size: 17px; margin: 0 0 10px; }
.muted { color: var(--ink-2); }
.hint { color: var(--ink-2); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px 80px; }
.narrow { max-width: 420px; }

.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.top .inner { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.top .brand { font-weight: 700; color: var(--ink); }
.top .spacer { flex: 1; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a { padding: 6px 10px; border-radius: 8px; color: var(--ink-2); }
.top nav a.on { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.top nav a:hover { text-decoration: none; background: var(--bg); }
.linkbtn { background: none; border: 0; font: inherit; color: var(--ink-2); cursor: pointer; padding: 4px 0; }
.linkbtn:hover { color: var(--danger); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.banner { border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.danger { background: var(--danger-soft); color: var(--danger); }

.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12.5px; background: var(--bg); color: var(--ink-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.btn:hover { text-decoration: none; border-color: var(--ink-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.danger { color: var(--danger); border-color: #e9b8b4; }
.btn.small { padding: 4px 10px; font-size: 13px; }

label { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 4px; }
input[type=text], input[type=tel], input[type=password], input[type=number], input[type=search], input:not([type]), select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--field); border-radius: 10px; font: inherit; background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.field { margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 14px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checks label { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--ink); font-size: 14px; }
.errors { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; }
.errors ul { margin: 0; padding-inline-start: 18px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.table-wrap { overflow-x: auto; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.tile b { display: block; }
.tile.soon { opacity: .65; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 600px) {
    input, select, textarea { font-size: 16px !important; }   /* آیفون زیر ۱۶px با هر لمس زوم می‌کند */
    h1 { font-size: 19px; }
}
.tile { display:block; color: inherit; text-decoration: none; } a.tile:hover { border-color: var(--accent, #2563eb); }
.tile .hint { display:block; margin-top:4px; }
.stack > * + * { margin-top: 12px; }
.lines td input, .lines td select { width: 100%; min-width: 70px; }
.sug { position: relative; } .sug .list { position:absolute; inset-inline:0; top:100%; z-index:20; background:var(--surface); border:1px solid var(--line); border-radius:8px; max-height:240px; overflow:auto; }
.sug .list div { padding:8px 10px; cursor:pointer; } .sug .list div:hover { background: rgba(0,0,0,.05); }
.right { text-align: left; } .tot td { font-weight:700; }

/* هویت موتوریا: قرمز #E10613، مشکی #0D0D0D، سفید — فقط تم روشن */
.top { border-bottom: 3px solid var(--brand); }
.brand-mark { height: 22px; width: auto; vertical-align: middle; margin-inline-end: 8px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ——— چیدمان پنل‌ها: منوی کشویی مشکی سمت راست (الگوی ادمین موتوریا) ——— */
.shell { display: flex; min-height: 100vh; }
aside.sidebar {
    /* همیشه مشکی (قرمز موتوریا فقط برای مورد فعال) */
    --sb-bg: #0D0D0D; --sb-hover: #1E1E1E; --sb-line: #262626; --sb-ink: #d0d0d3; --sb-ink-2: #9a9a9f; --sb-ink-3: #6b6b70;
    width: 252px; flex: 0 0 252px; background: var(--sb-bg); color: var(--sb-ink);
    position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column;
}
.sb-brand { padding: 16px 16px 12px; border-bottom: 1px solid var(--sb-line); }
.sb-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.sb-logo:hover { text-decoration: none; }
.sb-logo img { max-height: 40px; max-width: 96px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.sb-logo img.motoria { height: 24px; width: auto; }
.sb-logo b { font-size: 14.5px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
aside.sidebar nav { flex: 1; min-height: 0; padding: 8px 10px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
aside.sidebar nav:hover { scrollbar-color: rgba(255,255,255,.22) transparent; }
.group-label { color: var(--sb-ink-3); font-size: 11px; font-weight: 600; padding: 14px 10px 6px; }
aside.sidebar nav a { display: flex; align-items: center; gap: 10px; color: var(--sb-ink-2); padding: 9px 10px; border-radius: 8px; font-size: 13.5px; margin-bottom: 2px; text-decoration: none; }
aside.sidebar nav a .ic { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .8; }
aside.sidebar nav a:hover { background: var(--sb-hover); color: #fff; }
aside.sidebar nav a.on { background: rgba(225, 6, 19, .2); color: #ff6b73; font-weight: 600; }
aside.sidebar nav a.on .ic { opacity: 1; }
.sb-foot { padding: 12px 14px 16px; border-top: 1px solid var(--sb-line); }
.sb-foot .who { color: var(--sb-ink-2); font-size: 12.5px; margin-bottom: 8px; overflow-wrap: anywhere; }
.sb-foot form { margin: 0; }
.sb-btn { width: 100%; background: transparent; border: 1px solid var(--sb-line); color: var(--sb-ink); border-radius: 8px; padding: 8px; font: inherit; cursor: pointer; }
.sb-btn:hover { background: var(--sb-hover); }
main.content { flex: 1; min-width: 0; }
.shell .wrap { max-width: 1080px; margin: 0 auto; padding: 22px 22px 64px; }
.mbar, .menu-backdrop { display: none; }

@media (max-width: 860px) {
    aside.sidebar { position: fixed; right: 0; left: auto; top: 0; height: 100vh; height: 100dvh; z-index: 30; transform: translateX(105%); transition: transform .2s; width: min(82vw, 300px); }
    body.menu-open aside.sidebar { transform: translateX(0); box-shadow: -8px 0 30px rgba(0,0,0,.4); }
    .menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 25; }
    body.menu-open .menu-backdrop { display: block; }
    body.menu-open { overflow: hidden; }
    .mbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; background: #0D0D0D; color: #fff; padding: 8px 12px; border-bottom: 3px solid var(--brand); }
    .menu-toggle { background: transparent; border: 0; color: #fff; padding: 6px; cursor: pointer; display: flex; }
    .mtitle { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .shell .wrap { padding: 14px 12px 64px; }
    input, select, textarea { font-size: 16px !important; }   /* کمتر از ۱۶px آیفون با هر لمس زوم می‌کند */
}
@media (max-width: 700px) {
    main.content table, main.content table tbody, main.content table tr, main.content table td { display: block; width: 100%; }
    main.content table thead { display: none; }
    main.content table tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--surface); }
    main.content table td { border: 0; padding: 4px 0; }
    main.content table td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 12px; color: var(--ink-2); }
    main.content .table-wrap { border: 0; padding: 0; background: transparent; box-shadow: none; }
    main.content .lines tr { padding: 8px 10px; }
    .form-grid { grid-template-columns: 1fr !important; }
}

/* مودال ساخت سریع و کادر پلاک (مشترک همهٔ فرم‌ها) */
dialog.qc { border: 0; border-radius: 14px; padding: 18px; width: min(560px, 94vw); max-height: 92vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); color: var(--ink); background: var(--surface); }
dialog.qc::backdrop { background: rgba(0,0,0,.5); }
.plate { display: flex; align-items: center; gap: 6px; background: #f7f7f8; border: 2px solid var(--ink); border-radius: 8px; padding: 6px 10px; width: fit-content; }
.plate input { width: 5.5em; text-align: center; letter-spacing: 3px; font-weight: 700; border: 0; background: transparent; padding: 4px; }
.plate input:first-child { width: 3.8em; }

/* صفتِ hidden باید همیشه پنهان کند، حتی روی عنصرهایی که display صریح دارند (مثل .row) */
[hidden] { display: none !important; }