/* ==========================================================================
   تكسي سوريا 4.17 — «⚠️ بلّغ عن الخريطة» (mapreport.js) — الألوان كلها var(--ts-…)
   بيتحمّل من Layouts/TaxiApp.html (f:asset.css). RTL (inset-inline-*).
   ========================================================================== */

/* زر صغير فوق الخريطة بلوحة السائق — جنب زر SOS */
.ts417-mapbtn {
    display: inline-grid;
    place-items: center;
    min-width: 46px;
    height: 46px;
    padding: 0 10px;
    border: 2px solid #fff;
    border-radius: var(--ts-radius-pill, 999px);
    background: var(--ts-warn, #E09A00);
    color: #1b1b1b;
    font: 900 1.15rem/1 var(--ts-font-display, system-ui);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
    cursor: pointer;
}
.ts417-mapbtn:hover, .ts417-mapbtn:focus-visible { filter: brightness(1.06); outline: 3px solid var(--ts-focus, #C6952E); outline-offset: 2px; }
.ts417-mapbtn--drv { position: absolute; z-index: 800; inset-block-end: 14px; inset-inline-start: 76px; }

/* الورقة */
.ts417-modal .ts-modal__card { max-width: 480px; }
.ts417 { display: grid; gap: 10px; text-align: start; }
.ts417__intro { margin: 0; color: var(--ts-muted); font-size: .92rem; line-height: 1.6; }
.ts417__kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ts417__kind {
    display: grid; place-items: center; gap: 6px;
    min-height: 78px; padding: 10px 6px;
    border: 2px solid var(--ts-border, rgba(0, 0, 0, .12));
    border-radius: 14px;
    background: var(--ts-surface2, #f6f6f6);
    color: var(--ts-text, #222);
    font: 700 .9rem/1.2 var(--ts-font, system-ui);
    cursor: pointer;
}
.ts417__kind-ico { font-size: 1.6rem; line-height: 1; }
.ts417__kind.is-on { border-color: var(--ts-gold, #C6952E); background: var(--ts-gold-soft, rgba(198, 149, 46, .14)); }
.ts417__kind:focus-visible { outline: 3px solid var(--ts-focus, #C6952E); outline-offset: 2px; }
.ts417__note {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: 10px 12px; border: 1.5px solid var(--ts-border, rgba(0, 0, 0, .15)); border-radius: 12px;
    background: var(--ts-surface, #fff); color: var(--ts-text, #222);
    font: 500 .95rem/1.5 var(--ts-font, system-ui);
}
.ts417__photo {
    display: inline-flex; align-items: center; gap: 8px; justify-self: start;
    padding: 8px 14px; border: 1.5px dashed var(--ts-border, rgba(0, 0, 0, .25)); border-radius: 999px;
    color: var(--ts-text, #222); font: 700 .9rem/1 var(--ts-font, system-ui); cursor: pointer;
}
.ts417__photo.is-on { border-style: solid; border-color: var(--ts-ok, #2E7D32); }
.ts417__pos { margin: 0; color: var(--ts-muted); font-size: .85rem; }
.ts417__pos.is-bad { color: var(--ts-danger, #C62828); }
.ts417__err { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(198, 40, 40, .1); color: var(--ts-danger, #C62828); font-size: .9rem; }
.ts417__empty { margin: 6px 0; color: var(--ts-muted); font-size: .9rem; }

/* بلاغاتي */
.ts417__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ts417__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--ts-surface2, #f6f6f6); }
.ts417__item-ico { font-size: 1.3rem; line-height: 1; }
.ts417__item-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ts417__item-body b { font-size: .92rem; }
.ts417__item-body small { color: var(--ts-muted); font-size: .8rem; overflow-wrap: anywhere; }
.ts417__st { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--ts-surface, #fff); font: 700 .78rem/1.4 var(--ts-font, system-ui); border: 1px solid var(--ts-border, rgba(0, 0, 0, .12)); }
.ts417__item.is-fixed .ts417__st { background: rgba(46, 125, 50, .14); color: var(--ts-ok, #2E7D32); }
.ts417__item.is-rejected .ts417__st { background: rgba(198, 40, 40, .12); color: var(--ts-danger, #C62828); }
.ts417__item.is-new .ts417__st { background: var(--ts-gold-soft, rgba(198, 149, 46, .14)); }

/* بطاقة الرحلة الجارية: الزر صغير بالصف */
.ts-drv-btn--mapreport { font-size: 1.05rem; }

@media (max-width: 420px) {
    .ts417__kinds { grid-template-columns: 1fr 1fr; }
    .ts417__kind:last-child { grid-column: 1 / -1; }
}