:root {
    --brand: #0e7490;
    --brand-dark: #155e75;
    --ink: #1f2937;
    --muted: #6b7280;
    --border: #d1d5db;
    --bg: #f3f4f6;
    --card: #ffffff;
    --danger: #b91c1c;
    --success: #15803d;
    --warn: #b45309;
    --info: #1d4ed8;
    --blue: #2563eb;
    --orange: #ea580c;
    --green: #16a34a;
    --grey: #6b7280;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}

html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea {
    font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px;
}

@media (min-width: 700px) {
    .container { padding: 20px 24px 60px; }
}

h1 { font-size: 1.35rem; margin: 0 0 14px; }
h2 { font-size: 1.05rem; margin: 0; }

.muted { color: var(--muted); }
.pre-wrap { white-space: pre-wrap; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head h1 { margin: 0; }
.btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.section-title { margin: 22px 0 12px; display: flex; align-items: center; gap: 10px; }
.section-title--small { font-size: .95rem; }
.result-count { margin: 10px 0; color: var(--muted); font-size: .92rem; }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    margin-bottom: 14px;
}
.card-narrow { max-width: 620px; }

.btn {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--muted);
    color: #fff;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
    text-align: center;
}
.btn:hover { filter: brightness(.94); }
.btn-primary { background: var(--brand); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--border); }
.btn-whatsapp { background: #25d366; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.btn-whatsapp .wa-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.first-violation-notice { margin: 6px 0; padding: 12px 14px; border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: var(--radius); background: var(--bg); color: var(--ink); line-height: 1.55; }
.btn-danger { background: var(--danger); }
.btn-ghost { background: transparent; color: var(--brand-dark); border-color: var(--border); }
.btn-sm { padding: 5px 10px; font-size: .85rem; }
.btn-lg { padding: 13px 18px; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; }

.alert { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; transition: opacity .4s; }
.alert-success { background: #dcfce7; color: var(--success); border: 1px solid #86efac; }
.alert-error { background: #fee2e2; color: var(--danger); border: 1px solid #fca5a5; }
.alert-warning { background: #fef3c7; color: var(--warn); border: 1px solid #fcd34d; }
.alert-info { background: #dbeafe; color: var(--info); border: 1px solid #93c5fd; }
.alert-fade { opacity: 0; }
.alert-close { border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: inherit; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; color: #fff; white-space: nowrap; }
.badge-red { background: var(--danger); }
.badge-orange { background: var(--orange); }
.badge-blue { background: var(--blue); }
.badge-green { background: var(--green); }
.badge-grey { background: var(--grey); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
th { background: #f9fafb; font-weight: 600; color: var(--muted); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f9fafb; }
tr.clickable { cursor: pointer; }
tr.row-muted { opacity: .6; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stats--small { margin-bottom: 6px; gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; text-align: center; }
.stat__num { font-size: 1.7rem; font-weight: 700; color: var(--brand-dark); }
.stat__lbl { font-size: .82rem; color: var(--muted); margin-top: 2px; }

.filter-grid { display: grid; gap: 12px; }
@media (min-width: 700px) {
    .filter-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
}
.filter-actions { display: flex; gap: 8px; align-self: end; }

.filter-search-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filter-search-row .field { flex: 1 1 320px; margin-bottom: 0; }
.filter-advanced { margin-top: 12px; }
.filter-advanced[hidden] { display: none; }

.results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.results-head .result-count { margin: 0; }
#violationsResults.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.col-check { width: 36px; text-align: center; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.field-label { font-size: .85rem; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
input, select, textarea {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
    color: var(--ink);
    width: 100%;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #0e749088; border-color: var(--brand); }
input[type="checkbox"], input[type="radio"] {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--brand);
    cursor: pointer;
}
.input-group { display: flex; gap: 8px; align-items: end; }
.input-group input { flex: 1; }
.field--check { justify-content: end; }
.check-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.check-row:hover { border-color: #94a3b8; background: #f8fafc; }
.check-row:focus-within { outline: 2px solid #0e749088; border-color: var(--brand); }
.check-row:has(input:checked) { border-color: var(--brand); background: #e5f3f8; }
.scope-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.scope-toggle {
    border: 1px solid #c7c9d6;
    background: #fff;
    color: #1f2233;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.scope-toggle:hover {
    background: #f2f4ff;
}
.check-row[style*="display: none"] input[type="checkbox"] {
    pointer-events: none;
}
.check-row > span:not(.vtype-icon) { flex: 1 1 auto; min-width: 0; }
.check-row input[type="checkbox"],
.check-row input[type="radio"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; }
.radio-stack { display: grid; gap: 6px; }
/* Same stacking as radio-stack, for a group that allows more than one pick. */
.check-stack { display: grid; gap: 6px; }
/* Keeps consecutive advice notes visually separate now that a violation can
   carry several, on the view page, the shared page and the edit form. */
.advice-note + .advice-note { margin-top: 8px; }
.field-sub { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.field-sub.is-disabled { opacity: .5; }
.field-label { font-weight: 600; color: var(--ink); }
.vtype-grid { display: grid; gap: 8px; padding: 10px; background: #f7fafb; border: 1px solid var(--border); border-radius: 8px; }
.vtype-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
@media (min-width: 700px) { .vtype-grid { grid-template-columns: repeat(2, 1fr); } }

.vehicle-type { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vehicle-type__option {
    position: relative;
    display: flex;
    /* Icon beside the wording rather than above it, which roughly halves the
       height of these cards. Flex row also flips automatically in Arabic, so the
       icon sits on the correct side without a separate RTL rule. */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    cursor: pointer;
    /* Start, not centre: a long wording that wraps should read from the same
       edge as the single-line case. */
    text-align: start;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.vehicle-type__option:hover { border-color: #94a3b8; }
.vehicle-type__option input { position: absolute; opacity: 0; pointer-events: none; }
.vehicle-type__img { width: 60px; height: 36px; object-fit: contain; }
.vehicle-type__label { font-weight: 700; color: var(--ink); font-size: .9rem; }
.vehicle-type__option.is-selected { border-color: var(--brand); background: #e5f3f8; }
.vehicle-type__option.is-selected .vehicle-type__label { color: var(--brand-dark); }
.vehicle-type-select .vehicle-type__option { padding: 6px; gap: 8px; }
.vt-branch[hidden] { display: none; }
@media (min-width: 700px) { .vehicle-type__img { width: 74px; height: 44px; } }

.delivery-company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 10px;
    background: #f7fafb;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.delivery-company-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 8px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.delivery-company-card:hover { border-color: #94a3b8; }
.delivery-company-card input { position: absolute; opacity: 0; pointer-events: none; }
.delivery-company-card__logo { width: 64px; height: 36px; object-fit: contain; }
.delivery-company-card__fallback {
    width: 64px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--brand-dark);
    background: var(--brand-soft, #e5f3f8);
    border-radius: 6px;
}
.delivery-company-card__name { font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.delivery-company-card.is-selected { border-color: var(--brand); background: #e5f3f8; }
.delivery-company-card.is-selected .delivery-company-card__name { color: var(--brand-dark); }

.field-help { font-size: .8rem; color: var(--danger); min-height: 1em; }
.grid-2 { display: grid; gap: 0 16px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* A field whose caption sits beside its control on one row instead of stacked
   above it. Saves a label's worth of height per field, which is most of the
   space in the Vehicle Plate, Vehicle Details and Date/Time cards.
   The fixed-width caption also lines every input up into one tidy column.
   Below 700px it falls back to stacked, so a phone is not left with a 150px
   caption squeezing the input. */
.field--inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.field--inline > label { flex: 0 0 auto; width: 150px; margin: 0; }
.field--inline > input,
.field--inline > select,
.field--inline > textarea { flex: 1 1 auto; min-width: 0; }
/* Help text is full-width in a stacked field, so it has to claim its own row here
   or it would squeeze in beside the control. flex-wrap: wrap above is what
   actually lets a 100% basis start a new line; without it they keep nowrap and
   overflow. */
.field--inline > .field-help,
.field--inline > details { flex: 0 0 100%; }
@media (max-width: 699px) {
    .field--inline { flex-direction: column; align-items: stretch; gap: 4px; }
    .field--inline > label { width: auto; }
}
.form-actions { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn[disabled], .btn.is-blocked { opacity: .55; filter: grayscale(.35); cursor: not-allowed; pointer-events: none; }
.save-gate-hint { color: var(--muted); margin-top: 6px; }

.app-nav { background: var(--brand-dark); color: #fff; }
.app-nav__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.app-nav__brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; flex: 1; }
.app-nav__actions { display: flex; align-items: center; gap: 8px; }
.hamburger { display: flex; flex-direction: column; gap: 4px; background: transparent; border: 0; padding: 6px; cursor: pointer; }
.hamburger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.lang-switch { color: #fff; background: rgba(255, 255, 255, .15); border-radius: 999px; padding: 4px 6px; text-decoration: none; font-size: .85rem; display: inline-flex; align-items: center; }
.lang-select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; font: inherit; font-size: .85rem; padding: 4px 8px; border-radius: 999px; cursor: pointer; }
.lang-select:hover { background: rgba(255, 255, 255, .15); }
.lang-select option { color: #0f172a; background: #fff; }
.auth-body .lang-select { color: var(--brand-dark, #0f172a); }
.auth-body .lang-select option { color: #0f172a; }
.nav-cta { background: #fff; color: var(--brand-dark); border-radius: 999px; padding: 6px 14px; text-decoration: none; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.nav-cta:hover { background: #e0f2f8; }
.bell { position: relative; color: #fff; text-decoration: none; margin-inline-start: 4px; }
.bell-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-weight: 700; }
.bell-count { position: absolute; top: -6px; inset-inline-end: -6px; background: var(--danger); color: #fff; border-radius: 999px; font-size: .7rem; padding: 1px 5px; }
.app-nav__menu { display: none; flex-direction: column; gap: 0; padding: 0 10px 12px; }
.app-nav__menu.is-open { display: flex; }
@media (min-width: 900px) {
    .hamburger { display: none; }
    .app-nav__menu { display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 0 20px; flex-wrap: wrap; }
}
.nav-link { color: #fff; text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: .95rem; }
.nav-link:hover, .nav-link.is-active { background: rgba(255, 255, 255, .15); }
.dropdown { position: relative; }
.dropdown__toggle { color: #fff; padding: 8px 10px; border-radius: 8px; font-size: .95rem; cursor: pointer; list-style: none; }
.dropdown__toggle::-webkit-details-marker { display: none; }
.dropdown__toggle:hover { background: rgba(255, 255, 255, .15); }
.dropdown__menu { display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 6px; min-width: 210px; margin-inline-start: 6px; }
@media (min-width: 900px) {
    .dropdown__menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 50; }
}
.dropdown__link { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 6px; font-size: .93rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dropdown__link:hover, .dropdown__link.is-active { background: #e5f3f8; color: var(--brand-dark); }
.nav-spacer { flex: 1; }
.nav-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 4px; }
.nav-user__name { font-weight: 600; font-size: .92rem; }
.nav-user__role { font-size: .8rem; opacity: .8; }
.nav-user .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.nav-user .btn-ghost:hover { background: rgba(255, 255, 255, .16); }

.detail-grid { display: grid; gap: 4px 20px; }
@media (min-width: 700px) { .detail-grid { grid-template-columns: 1fr 1fr; } }
.detail-item { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.detail-label { font-size: .8rem; color: var(--muted); }
.detail-value { font-size: 1rem; }

.detail-share { padding: 6px 0; }
.detail-share__row { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.detail-share__qr { flex: 0 0 auto; display: block; width: 318px; height: 318px; min-width: 318px; min-height: 318px; background: #fff; image-rendering: pixelated; }

.sys-no-card { text-align: center; background: var(--brand-dark); color: #fff; border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.sys-no-card__lbl { font-size: .8rem; opacity: .9; }
.sys-no-card__num { font-size: 1.7rem; font-weight: 700; letter-spacing: 1px; }

.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: .85rem; background: var(--card); }
.chip-link { text-decoration: none; color: var(--brand-dark); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.photo-item img { width: 100%; height: 130px; object-fit: cover; display: block; }
.photo-card { position: relative; margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.photo-card__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photo-card__open img { width: 100%; height: 130px; object-fit: cover; display: block; }
.photo-card__meta { font-size: .75rem; color: var(--muted); padding: 6px 8px; border-top: 1px solid var(--border); background: #fafbfc; }
.photo-card__del { position: absolute; top: 6px; inset-inline-end: 6px; }
.photo-card__del .btn { padding: 2px 8px; line-height: 1.2; }
.photo-buttons { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.photo-buttons .btn { cursor: pointer; }
.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.file-input-hidden:focus-visible + .photo-buttons .btn,
.photo-buttons .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-preview:empty { display: none; }
.photo-thumb { width: 76px; height: 76px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #f2f5f7; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.edit-panel { display: inline-block; }
.edit-panel summary { list-style: none; cursor: pointer; }
.edit-panel .edit-panel__body { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fafafa; min-width: 260px; }

.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.close-form { gap: 6px; }
.close-note { width: 140px; padding: 5px 8px; font-size: .85rem; }

.offender-heading { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.offender-plate { font-size: 2rem; font-weight: 800; letter-spacing: 2px; color: var(--brand-dark); }
.offender-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .95rem; }

.alert-card { }
.alert-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert-card__no { font-weight: 700; }
.alert-card__title { font-weight: 700; margin-top: 6px; }
.alert-card__grid { display: grid; gap: 2px 18px; margin-top: 6px; font-size: .93rem; }
@media (min-width: 700px) { .alert-card__grid { grid-template-columns: 1fr 1fr; } }
.alert-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }

.action-card { }
.action-card__head { display: flex; gap: 10px; align-items: center; }
.action-card__body { margin-top: 6px; font-size: .93rem; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.color-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); vertical-align: middle; }

.pagination { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0 8px; }
.pagination a { text-decoration: none; color: var(--brand-dark); font-weight: 700; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
.pagination a:hover { background: #e5f3f8; }
.pagination { flex-wrap: wrap; row-gap: 8px; }
.pagination .page-current { color: #fff; font-weight: 700; padding: 4px 10px; border: 1px solid var(--brand); border-radius: 6px; background: var(--brand); }
.pagination .page-gap { color: var(--muted); }
.pagination__info { color: var(--muted); font-size: .85rem; }

.lookup-hint { font-size: .85rem; margin-top: -6px; min-height: 1.2em; color: var(--brand-dark); }

.log-json { font-size: .75rem; color: var(--muted); margin: 4px 0 0; max-width: 520px; }

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-brand { text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--brand-dark); margin-bottom: 16px; }

.print-only { display: none; }

@media print {
    body { background: #fff; }
    .app-nav, .no-print, .btn, .pagination, .alert, .filter-card { display: none !important; }
    .container { max-width: 100%; padding: 0; }
    .card { box-shadow: none; border: 0; padding: 0; }
    .print-sheet { font-family: inherit; }
    .print-sheet table td.key { font-weight: 600; background: #f5f5f5; width: 34%; }
}

.vtype-icon { display: inline-flex; width: var(--vtype-icon-size, 44px); height: var(--vtype-icon-size, 44px); color: var(--brand-dark); flex: none; }
.vtype-icon svg { width: 100%; height: 100%; }
.vtype-icon { color: var(--brand-dark); }
/* The base size is the app-wide --vtype-icon-size (default 44px), adjustable
   from the Violation Types page. The violation form cards get a slightly
   larger icon so the shape is easy to recognise at a glance. */
.vtype-grid .vtype-icon { width: calc(var(--vtype-icon-size, 44px) * 1.25); height: calc(var(--vtype-icon-size, 44px) * 1.25); }
.ico-cell .vtype-icon { color: var(--brand-dark); vertical-align: middle; }
/* Violation-type option cards on the form (LTR / English default).
   Order in the markup is <input> -> .vtype-icon -> label text, and flex-start
   keeps that order from the left. justify-content: flex-start pins the whole
   row to the start edge (never centred); align-items: center centers it
   vertically; gap clears the space between checkbox, icon and wording. */
.vtype-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
}
/* Neither the checkbox nor the 44px icon may be squeezed when the wording is
   long and wraps. flex: 0 0 auto on the checkbox and flex: none on the icon
   already forbid shrinking; this makes that explicit and future-proof. */
.vtype-item input[type="checkbox"],
.vtype-item .vtype-icon { flex-shrink: 0; }
/* RTL (Arabic): same row order but flowing from right to left. flex-start in
   RTL puts the checkbox on the right and the wording on the left edge of the
   row's inner blocks; text-align right keeps any wrapped wording aligned to
   the right. Triggers on either <html dir="rtl"> or a .rtl class. */
html[dir="rtl"] .vtype-item,
.rtl .vtype-item {
    justify-content: flex-start;
    text-align: right;
}

.color-cell .color-swatch { width: 28px; height: 28px; }
.logo-cell .brand-logo { width: 44px; height: 32px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
.logo-cell .company-logo { width: 44px; height: 32px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px; }

.reorder-cell { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.drag-handle { cursor: grab; color: var(--muted); font-size: 1rem; letter-spacing: -2px; user-select: none; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.order-input { width: 3.4em; padding: 3px 4px; text-align: center; }
table.sortable-table tbody tr.is-dragging { opacity: .45; }
table.sortable-table tbody tr.dragover { box-shadow: inset 0 2px 0 var(--brand-dark); }
.order-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #f7fbfd; }
.order-save-bar[hidden] { display: none; }
.order-save-bar__msg { font-size: .9rem; color: var(--brand-dark); }
.order-save-bar__actions { display: flex; gap: 8px; }

.combo { position: relative; }
.combo input { padding-inline-end: 38px; }
.combo-clear {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    background: #eef2f4;
    border-radius: 50%;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    visibility: hidden;
    padding: 0;
}
.combo-panel {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 60;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
    max-height: 280px;
    overflow-y: auto;
}
.combo-panel.is-open { display: block; }
.combo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
}
.combo-row:hover, .combo-row.is-active { background: #e5f3f8; }
.combo-empty { padding: 12px; color: var(--muted); font-size: .9rem; }
.cb-icon-wrap { display: inline-flex; width: 26px; height: 26px; flex: none; align-items: center; justify-content: center; }
.cb-icon { width: 100%; height: 100%; color: var(--muted); }
.cb-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); display: inline-block; }
.cb-swatch--none { background: repeating-conic-gradient(#d8dde0 0 25%, #fff 0 50%); background-size: 8px 8px; }
.cb-logo { max-width: 26px; max-height: 26px; object-fit: contain; }
.flag-logo { width: 26px; height: 20px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }

body.no-scroll { overflow: hidden; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 15, 20, .94);
    display: grid;
    place-items: center;
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
    max-width: 94vw;
    max-height: 86vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__stage img {
    max-width: 100%;
    max-height: 86vh;
    transform-origin: center;
    transition: transform .12s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox__btn {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .25); }
.lightbox__close { top: 14px; inset-inline-end: 14px; font-size: 1.5rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__prev { inset-inline-start: 14px; }
.lightbox__next { inset-inline-end: 14px; }
.lightbox__controls {
    position: absolute;
    bottom: 16px;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.lightbox__controls .btn { background: rgba(255, 255, 255, .92); color: #111; border: 0; }
.lightbox__status { min-width: 3.2em; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
.lightbox__counter { color: #fff; opacity: .85; font-variant-numeric: tabular-nums; font-size: .9rem; }

.audio-recorder__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.audio-recorder__timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.audio-recorder__state { font-size: .85rem; }
.audio-recorder__list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.audio-recorder__item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.audio-recorder__item audio { max-width: 220px; height: 32px; }
.audio-recorder__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.audio-list { display: flex; flex-direction: column; gap: 8px; }
.audio-player-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.audio-player-row audio { max-width: 260px; }
.audio-player-row__meta { font-size: .85rem; color: var(--muted); }
.audio-player-row__del { margin-inline-start: auto; }

.shared-body { background: var(--bg, #f3f4f6); }
.shared-note { background: var(--accent, #1d4ed8); color: #fff; padding: 8px 16px; font-size: .9rem; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.shared-note__text { text-align: center; }
.shared-lang-select { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font: inherit; font-size: .85rem; padding: 4px 10px; cursor: pointer; }
.shared-lang-select:hover { background: rgba(255, 255, 255, .28); }
.shared-lang-select option { color: #0f172a; background: #fff; }
.share-wrap { padding-block: 24px; }

.subsection-title { font-size: 1rem; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border, #e2e8f0); }
.field-hint { font-size: .85rem; color: var(--muted, #65748c); margin: -4px 0 10px; }
.pd-preview { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-preview img { max-height: 48px; border: 1px solid var(--border, #e2e8f0); border-radius: 4px; background: #fff; }
.field .range-wrap { display: flex; align-items: center; gap: 10px; }
.field .range-wrap input[type=range] { flex: 1; min-width: 0; }
.field .range-value { font-weight: 600; color: var(--text-strong, #0f172a); min-width: 3.2em; text-align: right; }

.icon-size-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icon-size-control label { font-weight: 600; margin: 0; }
.icon-size-control input[type=range] { width: 160px; }
.icon-size-control .range-value { font-weight: 600; color: var(--text-strong, #0f172a); min-width: 3.4em; text-align: right; }

.pd-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pd-stage { position: relative; margin: 8px 0 4px; }
.pd-canvas {
    position: relative;
    background: #fff;
    border: 1px solid var(--border, #cbd5e1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    overflow: hidden;
    touch-action: none;
}
.pd-block {
    position: absolute;
    border: 1px dashed rgba(29, 78, 216, .55);
    background: rgba(29, 78, 216, .06);
    border-radius: 3px;
    cursor: grab;
    box-sizing: border-box;
    z-index: 2;
}
.pd-block:active { cursor: grabbing; }
.pd-block--header { border-color: rgba(16, 185, 129, .6); background: rgba(16, 185, 129, .08); }
.pd-block--logo { border-color: rgba(245, 158, 11, .6); background: rgba(245, 158, 11, .08); }
.pd-block--qr { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .08); }
.pd-block--details { border-color: rgba(29, 78, 216, .6); background: rgba(29, 78, 216, .06); }
.pd-block--photos { border-color: rgba(6, 182, 212, .6); background: rgba(6, 182, 212, .08); }
.pd-block--signature { border-color: rgba(244, 63, 94, .6); background: rgba(244, 63, 94, .08); }
.pd-block__label {
    position: absolute;
    top: 2px;
    inset-inline-start: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(15, 23, 42, .75);
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
}
.pd-block__edit { position: absolute; inset: 20px 4px 4px; }
.pd-block--text:not(.pd-block--header) .pd-block__edit textarea {
    width: 100%;
    height: 100%;
    resize: none;
    font-size: 11px;
    padding: 4px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 3px;
    background: #fff;
    text-align: center;
}
.pd-block__del {
    position: absolute;
    top: 1px;
    inset-inline-end: 1px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(220, 38, 38, .9);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s;
    z-index: 3;
}
.pd-block:hover .pd-block__del { opacity: 1; }
.pd-block.is-selected { outline: 2px solid #2563eb; z-index: 3; }
.pd-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #2563eb;
    border-radius: 2px;
    z-index: 4;
    opacity: 0;
    transition: opacity .12s;
    touch-action: none;
}
.pd-block:hover .pd-handle,
.pd-block.is-selected .pd-handle { opacity: 1; }
.pd-handle--nw { top: -5px; inset-inline-start: -5px; cursor: nwse-resize; }
.pd-handle--n  { top: -5px; inset-inline-start: calc(50% - 5px); cursor: ns-resize; }
.pd-handle--ne { top: -5px; inset-inline-end: -5px; cursor: nesw-resize; }
.pd-handle--e  { top: calc(50% - 5px); inset-inline-end: -5px; cursor: ew-resize; }
.pd-handle--se { bottom: -5px; inset-inline-end: -5px; cursor: nwse-resize; }
.pd-handle--s  { bottom: -5px; inset-inline-start: calc(50% - 5px); cursor: ns-resize; }
.pd-handle--sw { bottom: -5px; inset-inline-start: -5px; cursor: nesw-resize; }
.pd-handle--w  { top: calc(50% - 5px); inset-inline-start: -5px; cursor: ew-resize; }
.pd-props {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    background: #f8fafc;
}
.pd-props__head { font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.pd-props__grid { display: grid; gap: 8px 12px; }
@media (min-width: 700px) {
    .pd-props__grid { grid-template-columns: repeat(4, 1fr); }
}
.pd-prop { display: flex; flex-direction: column; gap: 2px; }
.pd-prop label { font-size: .78rem; color: var(--muted, #65748c); font-weight: 600; }
.pd-prop input[type="number"], .pd-prop select { padding: 6px 8px; font-size: .9rem; }
.pd-prop--check { flex-direction: row; align-items: center; gap: 8px; }
.pd-prop--check input { width: auto; }
/* Bluetooth thermal receipt (RawBT) */
.thermal-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.thermal-tools .btn-lg { width: 100%; max-width: 360px; }
.thermal-status { min-height: 1.2em; font-size: .9rem; color: var(--muted, #65748c); }
.thermal-status--error { color: var(--danger, #b91c1c); }
.thermal-preview-wrap { margin-top: 10px; }
.thermal-preview {
    display: block;
    width: 384px;
    max-width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
}

.plate-suggest-wrap { position: relative; }
.plate-suggest__row { flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; width: 100%; }
.plate-suggest__plate { font-weight: 700; }
.plate-suggest__meta { font-size: .8rem; color: var(--muted); }