/*
  Ajuste l'échelle globale de l'UI tablette.
  Objectif: rendre le texte et les composants plus lisibles quand l'UI est rendue trop petite.

  Pour modifier l'intensité: changez uniquement --tablet-ui-scale.
*/

/* Hide debug badge from cached JS (belt-and-suspenders) */
#custom-job-tabs-badge {
  display: none !important;
}

html {
  --tablet-ui-scale: 1.22;
  font-size: calc(var(--tablet-ui-scale) * (1vh + 1vw) / 2) !important;
}

/* Mobile: height is dynamic (taller than 1000px), so use vw only to keep
   font-size independent of iframe height.  1vw = 10px (width always 1000px). */
html.mobile-panel {
  font-size: calc(var(--tablet-ui-scale) * 1vw) !important;
}

/* ═══ Mobile: native .tablet-frame with bezel/shadow/buttons ═══ */
/* Identical look to PC: black bezel (padding) + silver ring (border) + rounded corners */

html.mobile-panel .tablet-frame {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: unset !important;
  /* Black bezel created by padding (background-color:#000 from base CSS shows through) */
  padding: 1.8% !important;
  box-sizing: border-box !important;
  /* Silver ring: use border instead of box-shadow (shadow would be clipped by iframe overflow) */
  border: 0.35em solid #d3cde4 !important;
  box-shadow: none !important;
  /* Keep base border-radius (1.875rem) from upstream CSS */
}

/* Screen fills 100% of the padded area */
html.mobile-panel .tablet-frame .tablet-content {
  width: 100% !important;
  height: 100% !important;
}

html.mobile-panel .tablet-frame .tablet-content > div {
  width: 100% !important;
  height: 100% !important;
}

/* ═══ Performance: GPU compositing & layout containment ═══ */

/* Promote major containers to their own GPU layers */
.tablet-container {
  contain: style !important;
}

/* Sidebar: own layer for smooth scrolling */
.sidebar,
.left-side {
  will-change: scroll-position !important;
}

/* Tab container: contain style for fast tab switching */
.tab-container {
  contain: style !important;
}

/* Individual tab-wrapper: avoid style recalc on siblings when switching */
.tab-container .tab-wrapper {
  contain: style !important;
}

/* Pages / views inside apps: avoid full-tree repaint on navigation */
.police-container main,
.ambulance-container main,
.police-container .main-container,
.ambulance-container .main-container,
.police-tab-container {
  contain: style !important;
}

/* Reduce animation jank: disable slow transitions on elements that change often */
.tab-container .tab-wrapper .tab {
  transition: background-color 0.15s ease-in-out !important;
  /* cut transition from .2s → .15s, drop unneeded properties */
}

/* Leaflet map: GPU layer for smooth pan/zoom */
.leaflet-container {
  will-change: transform !important;
}

/* ═══ Reduce repaints on frequently updated elements ═══ */

/* Clock / status bar: prevent full repaint when time updates */
.tablet-container .status-bar,
.tablet-container .lock-screen .time {
  contain: style !important;
}

/* ═══ Mobile performance: reduce transitions and animations ═══ */

/* On mobile, transition: all is very expensive. Replace with specific properties. */
html.mobile-panel .sidebar .items .item {
  transition: background-color 0.15s ease-in-out !important;
}

html.mobile-panel .tab-container .tab-wrapper .tab {
  transition: background-color 0.1s ease-in-out !important;
}

/* Disable costly backdrop-filter on mobile (saves GPU compositing layers) */
html.mobile-panel .leaflet-popup-content-wrapper {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   Fix hardcoded light-mode colors that are invisible on dark backgrounds.
   Uses direct color values with !important as failsafe.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global: force dark backgrounds on all major containers ── */
[data-theme=dark] .app-container {
  background-color: #000 !important;
}
[data-theme=dark] .app-container .app-content {
  background-color: #000 !important;
}
[data-theme=dark] .app-container .app-content > div {
  background-color: #000 !important;
}
[data-theme=dark] .police-container {
  background-color: #000 !important;
}
[data-theme=dark] .ambulance-container {
  background-color: #000 !important;
}
[data-theme=dark] .police-container main,
[data-theme=dark] .ambulance-container main {
  background-color: #000 !important;
}
[data-theme=dark] .police-container .main-container,
[data-theme=dark] .ambulance-container .main-container {
  background-color: #000 !important;
}
[data-theme=dark] .police-container .policepage-container,
[data-theme=dark] .ambulance-container .policepage-container {
  background-color: #000 !important;
}
[data-theme=dark] .police-container .policepage-container .main,
[data-theme=dark] .ambulance-container .policepage-container .main {
  background-color: #000 !important;
}
[data-theme=dark] .police-container .policepage-container.absolute {
  background-color: #000 !important;
}
[data-theme=dark] .ambulance-container .policepage-container.absolute {
  background-color: #000 !important;
}
[data-theme=dark] .police-container .grid-container,
[data-theme=dark] .ambulance-container .grid-container {
  background-color: #000 !important;
  border-color: #333 !important;
}
[data-theme=dark] .police-container .grid-item,
[data-theme=dark] .ambulance-container .grid-item {
  background-color: #141414 !important;
  border-color: #333 !important;
}
[data-theme=dark] .police-container .modal-container .modal-content,
[data-theme=dark] .ambulance-container .modal-container .modal-content {
  background-color: #000 !important;
  border-color: #333 !important;
}

/* ── Pages: menotte, facture, amende, coma, parametre, vente ── */
[data-theme=dark] .police-container .main .page,
[data-theme=dark] .ambulance-container .main .page {
  background-color: #000 !important;
  border-color: #333 !important;
}
[data-theme=dark] .police-container .main .page .top,
[data-theme=dark] .ambulance-container .main .page .top {
  border-color: rgba(150,150,150,.2) !important;
  color: #f2f2f7 !important;
}

/* ── Items list (profils, fiches, infractions…) ── */
[data-theme=dark] .police-container .items .item,
[data-theme=dark] .ambulance-container .items .item {
  background-color: #141414 !important;
  border-color: #333 !important;
}
[data-theme=dark] .police-container .items .item .info .name,
[data-theme=dark] .ambulance-container .items .item .info .name {
  color: #f2f2f7 !important;
}
[data-theme=dark] .police-container .items .item .info .subtitle,
[data-theme=dark] .police-container .items .item .info .text,
[data-theme=dark] .ambulance-container .items .item .info .subtitle,
[data-theme=dark] .ambulance-container .items .item .info .text {
  color: #6f6f6f !important;
}
[data-theme=dark] .police-container .items .no-results,
[data-theme=dark] .ambulance-container .items .no-results {
  color: #f2f2f7 !important;
}

/* ── Tab container & tab icons (facture, vente, parametre, coma…) ── */
[data-theme=dark] .tab-container {
  background-color: #000 !important;
}
[data-theme=dark] .tab-container .tab-wrapper .tab {
  background-color: #141414 !important;
  border-color: #333 !important;
}
[data-theme=dark] .tab-container .tab-wrapper .tab .tab-content svg {
  color: #f2f2f7 !important;
}
[data-theme=dark] .tab-container .tab-wrapper .tab .tab-content .title {
  color: #f2f2f7 !important;
}
[data-theme=dark] .tab-container .tab-wrapper .tab svg {
  color: #6f6f6f !important;
}

/* ── Searchbox (champ de recherche profils, factures…) ── */
[data-theme=dark] .police-container .searchbox,
[data-theme=dark] .ambulance-container .searchbox,
[data-theme=dark] .police-container .grid-item .searchbox,
[data-theme=dark] .ambulance-container .grid-item .searchbox {
  color: #6f6f6f !important;
  border-color: #333 !important;
}
[data-theme=dark] .police-container .searchbox input,
[data-theme=dark] .ambulance-container .searchbox input,
[data-theme=dark] .police-container .grid-item .searchbox input,
[data-theme=dark] .ambulance-container .grid-item .searchbox input {
  color: #f2f2f7 !important;
}
[data-theme=dark] .police-container .searchbox input::placeholder,
[data-theme=dark] .ambulance-container .searchbox input::placeholder,
[data-theme=dark] .police-container .grid-item .searchbox input::placeholder,
[data-theme=dark] .ambulance-container .grid-item .searchbox input::placeholder {
  color: #6f6f6f !important;
}

/* ── Search filter buttons SVG ── */
[data-theme=dark] .police-container .search-container .buttons svg,
[data-theme=dark] .ambulance-container .search-container .buttons svg {
  color: #6f6f6f !important;
  border-color: #333 !important;
}

/* ── Sidebar items: force white text/icons ── */
[data-theme=dark] .sidebar .items .item,
[data-theme=dark] .ambulance-sidebar .items .item {
  color: #f2f2f7 !important;
}
[data-theme=dark] .sidebar .items .item svg,
[data-theme=dark] .ambulance-sidebar .items .item svg {
  color: #f2f2f7 !important;
}
/* Icônes PNG custom métier (facture, vente, parametre, coma, menotte) */
[data-theme=dark] .sidebar .items .custom-job-menu-item img {
  filter: brightness(0) invert(1) !important;
}
[data-theme=dark] .sidebar .items .item[data-active=true],
[data-theme=dark] .ambulance-sidebar .items .item[data-active=true] {
  background-color: #333 !important;
}

/* ── Police & Ambulance chat messages: hardcoded #0f1419 ── */
[data-theme=dark] .police-container .message-body .message {
  color: #f2f2f7 !important;
}
[data-theme=dark] .ambulance-container .message-body .message {
  color: #f2f2f7 !important;
}
[data-theme=dark] .police-container .message .date,
[data-theme=dark] .police-container .message .user,
[data-theme=dark] .ambulance-container .message .date,
[data-theme=dark] .ambulance-container .message .user {
  color: #6f6f6f !important;
}

/* ── Form inputs/textareas ── */
[data-theme=dark] .police-container input,
[data-theme=dark] .police-container textarea,
[data-theme=dark] .police-container select,
[data-theme=dark] .ambulance-container input,
[data-theme=dark] .ambulance-container textarea,
[data-theme=dark] .ambulance-container select {
  color: #f2f2f7 !important;
  background-color: #141414 !important;
  border-color: #333 !important;
}

/* ── Filters panel ── */
[data-theme=dark] .police-container .search-container .filters,
[data-theme=dark] .ambulance-container .search-container .filters {
  background-color: #000 !important;
  border-color: #333 !important;
}
[data-theme=dark] .police-container .search-container .filters .filters-content section .title,
[data-theme=dark] .ambulance-container .search-container .filters .filters-content section .title {
  color: #f2f2f7 !important;
}

/* ── Modal header ── */
[data-theme=dark] .police-container .modal-header .title,
[data-theme=dark] .ambulance-container .modal-header .title {
  color: #f2f2f7 !important;
}

/* ── Drop indicator ── */
[data-theme=dark] .police-container .drop-indicator,
[data-theme=dark] .ambulance-container .drop-indicator {
  color: #999 !important;
  border-color: #444 !important;
}

/* ── Police/Ambulance header bar ── */
[data-theme=dark] .police-header,
[data-theme=dark] .ambulance-header {
  border-color: rgba(150,150,150,.2) !important;
}

/* ── Control-centre & volume slider SVG icons ── */
[data-theme=dark] .control-centre .control-centre-body .sliders .slider svg {
  color: rgba(255, 255, 255, 0.5) !important;
}
[data-theme=dark] .volume-master-wrapper .volume-master svg {
  color: rgba(255, 255, 255, 0.5) !important;
}
[data-theme=dark] .volume-master-wrapper .volume-master input {
  background-color: #333 !important;
}

/* ── Virtual keyboard ── */
[data-theme=dark] .hg-theme-default {
  background-color: #1c1c1e !important;
}
[data-theme=dark] .hg-theme-default .hg-button {
  background: #2c2c2e !important;
  border-color: #3a3a3c !important;
  color: #f2f2f7 !important;
}
[data-theme=dark] .hg-theme-default .hg-button:active,
[data-theme=dark] .hg-theme-default .hg-button.hg-activeButton {
  background: #48484a !important;
}
[data-theme=dark] .hg-theme-default .hg-button.hg-functionBtn {
  background: #3a3a3c !important;
}
[data-theme=dark] .hg-candidate-box {
  background: #1c1c1e !important;
  color: #f2f2f7 !important;
}

/* ── CodeMirror / EasyMDE text editor ── */
[data-theme=dark] .CodeMirror {
  color: #f2f2f7 !important;
  background: #1c1c1e !important;
}
[data-theme=dark] .CodeMirror-cursor {
  border-left-color: #f2f2f7 !important;
}
[data-theme=dark] .CodeMirror-gutters {
  background-color: #1c1c1e !important;
  border-right-color: #3a3a3c !important;
}
[data-theme=dark] .CodeMirror-gutter-filler {
  background-color: #1c1c1e !important;
}
[data-theme=dark] .CodeMirror-linenumber {
  color: #636366 !important;
}
[data-theme=dark] .CodeMirror-focused .CodeMirror-selected,
[data-theme=dark] .CodeMirror .CodeMirror-selected {
  background: #3a3a3c !important;
}
[data-theme=dark] .editor-toolbar {
  border-color: #3a3a3c !important;
  background: #1c1c1e !important;
}
[data-theme=dark] .editor-toolbar a {
  color: #f2f2f7 !important;
}
[data-theme=dark] .editor-toolbar a.active,
[data-theme=dark] .editor-toolbar a:hover {
  background: #2c2c2e !important;
  border-color: #48484a !important;
}
[data-theme=dark] .EasyMDEContainer .CodeMirror-fullscreen {
  background: #1c1c1e !important;
}
[data-theme=dark] .editor-toolbar.fullscreen {
  background: #1c1c1e !important;
}

/* ── Settings: avatar gradient ── */
[data-theme=dark] .settings-container .profile .avatar {
  background: linear-gradient(180deg, #444, #222) !important;
}

/* ── Settings: category title contrast ── */
[data-theme=dark] .settings-container .category-title {
  color: #aeaeb2 !important;
}

/* ── Menottes: profiles list view ── */
[data-theme=dark] .menotte-profiles-container {
  background: #000 !important;
}
[data-theme=dark] .menotte-profiles-container .header-section {
  background: #000 !important;
}
[data-theme=dark] .menotte-profiles-container .header-title {
  color: #f2f2f7 !important;
}
[data-theme=dark] .menotte-profiles-container .search-input {
  background: #1c1c1e !important;
  border-color: #333 !important;
  color: #f2f2f7 !important;
}
[data-theme=dark] .menotte-profiles-container .search-input:focus {
  background: #2c2c2e !important;
  border-color: #555 !important;
}
[data-theme=dark] .menotte-profiles-container .search-input::placeholder {
  color: #6f6f6f !important;
}
[data-theme=dark] .menotte-profiles-container .search-wrapper svg {
  color: #6f6f6f !important;
}
[data-theme=dark] .menotte-profiles-container .profile-row {
  background: #141414 !important;
}
[data-theme=dark] .menotte-profiles-container .profile-row:hover {
  background: #1c1c1e !important;
}
[data-theme=dark] .menotte-profiles-container .profile-name {
  color: #f2f2f7 !important;
}
[data-theme=dark] .menotte-profiles-container .profile-meta {
  color: #6f6f6f !important;
}
[data-theme=dark] .menotte-profiles-container .profile-avatar {
  background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%) !important;
}
[data-theme=dark] .menotte-profiles-container .profile-avatar svg {
  color: #6f6f6f !important;
}
[data-theme=dark] .menotte-profiles-container .loading-msg,
[data-theme=dark] .menotte-profiles-container .empty-msg {
  color: #6f6f6f !important;
}

/* ── Menottes: toolbar flottante (bas de page, fiche profil) ── */
[data-theme=dark] .custom-menotte-toolbar {
  background: rgba(20,20,20,0.95) !important;
  border-color: #333 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
[data-theme=dark] .custom-menotte-toolbar .title {
  color: #f2f2f7 !important;
}
[data-theme=dark] .custom-menotte-toolbar input {
  background: #1c1c1e !important;
  border-color: #333 !important;
  color: #f2f2f7 !important;
}
[data-theme=dark] .custom-menotte-toolbar button {
  background: #f2f2f7 !important;
  color: #000 !important;
}
[data-theme=dark] .custom-menotte-toolbar button.secondary {
  background: rgba(255,255,255,0.12) !important;
  color: #f2f2f7 !important;
}
[data-theme=dark] .custom-menotte-toolbar button.red { background: #c62828 !important; color: #fff !important; }
[data-theme=dark] .custom-menotte-toolbar button.green { background: #2e7d32 !important; color: #fff !important; }
[data-theme=dark] .custom-menotte-toolbar .status { color: rgba(255,255,255,0.6) !important; }
[data-theme=dark] .custom-menotte-toolbar .status.error { color: #ef5350 !important; }
[data-theme=dark] .custom-menotte-toolbar .status.ok { color: #66bb6a !important; }

/* ── Menottes: boutons inline (dans fiche profil) ── */
[data-theme=dark] .custom-menotte-inline {
  background: rgba(20,20,20,0.95) !important;
  border-color: #333 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4) !important;
}
[data-theme=dark] .custom-menotte-inline .label {
  color: #f2f2f7 !important;
}
[data-theme=dark] .custom-menotte-inline .state {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.6) !important;
}
[data-theme=dark] .custom-menotte-inline .state.on {
  background: rgba(198,40,40,0.2) !important;
  color: #ef5350 !important;
  border-color: rgba(198,40,40,0.35) !important;
}
[data-theme=dark] .custom-menotte-inline .state.off {
  background: rgba(46,125,50,0.2) !important;
  color: #66bb6a !important;
  border-color: rgba(46,125,50,0.35) !important;
}
[data-theme=dark] .custom-menotte-inline button {
  background: #f2f2f7 !important;
  color: #000 !important;
}
[data-theme=dark] .custom-menotte-inline button.red { background: #c62828 !important; color: #fff !important; }
[data-theme=dark] .custom-menotte-inline button.green { background: #2e7d32 !important; color: #fff !important; }

/* ── Coma: profiles list view ── */
[data-theme=dark] .coma-profiles-container {
  background: #000 !important;
}
[data-theme=dark] .coma-profiles-container .header-section {
  background: #000 !important;
}
[data-theme=dark] .coma-profiles-container .header-title {
  color: #f2f2f7 !important;
}
[data-theme=dark] .coma-profiles-container .search-input {
  background: #1c1c1e !important;
  border-color: #333 !important;
  color: #f2f2f7 !important;
}
[data-theme=dark] .coma-profiles-container .search-input:focus {
  background: #2c2c2e !important;
  border-color: #555 !important;
}
[data-theme=dark] .coma-profiles-container .search-input::placeholder {
  color: #6f6f6f !important;
}
[data-theme=dark] .coma-profiles-container .search-wrapper svg {
  color: #6f6f6f !important;
}
[data-theme=dark] .coma-profiles-container .profile-row {
  background: #141414 !important;
}
[data-theme=dark] .coma-profiles-container .profile-row:hover {
  background: #1c1c1e !important;
}
[data-theme=dark] .coma-profiles-container .profile-name {
  color: #f2f2f7 !important;
}
[data-theme=dark] .coma-profiles-container .profile-meta {
  color: #6f6f6f !important;
}
[data-theme=dark] .coma-profiles-container .profile-avatar {
  background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%) !important;
}
[data-theme=dark] .coma-profiles-container .profile-avatar svg {
  color: #6f6f6f !important;
}
[data-theme=dark] .coma-profiles-container .loading-msg,
[data-theme=dark] .coma-profiles-container .empty-msg {
  color: #6f6f6f !important;
}

/* ── Standalone modal (overlay métier) ── */
[data-theme=dark] .custom-job-standalone .shell {
  background: #000 !important;
}
[data-theme=dark] .custom-job-standalone .side {
  background: rgba(255,255,255,0.03) !important;
  border-color: #333 !important;
}
[data-theme=dark] .custom-job-standalone .side .title {
  color: #f2f2f7 !important;
}
[data-theme=dark] .custom-job-standalone .side .btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: #333 !important;
  color: #f2f2f7 !important;
}
[data-theme=dark] .custom-job-standalone .side .btn[data-active="true"] {
  background: rgba(255,255,255,0.12) !important;
}
[data-theme=dark] .custom-job-standalone .side .close {
  background: #f2f2f7 !important;
  color: #000 !important;
  border-color: #f2f2f7 !important;
}

/* ── Searchbox métier (facture, amende, employé, vente) ── */
[data-theme=dark] .custom-job-tabs-root .custom-job-factures-infra .searchbox {
  background: #1c1c1e !important;
  border-color: #333 !important;
}
[data-theme=dark] .custom-job-tabs-root .custom-job-factures-infra .searchbox svg {
  color: #6f6f6f !important;
  fill: #6f6f6f !important;
}
[data-theme=dark] .custom-job-tabs-root .custom-job-factures-infra .searchbox .search-input {
  color: #f2f2f7 !important;
}
[data-theme=dark] .custom-job-tabs-root .custom-job-factures-infra .searchbox .search-input::placeholder {
  color: #6f6f6f !important;
}

/* ── Chat custom métier (cjchat-police) ── */
/* Panneau droit: fond sombre */
[data-theme=dark] .cjchat-police .cjc-right {
  background-color: #000 !important;
}
[data-theme=dark] .cjchat-police .cjc-right .chatroom .top {
  border-color: #333 !important;
}
/* Messages: texte lisible */
[data-theme=dark] .cjchat-police .cjc-right .message-body .message {
  color: #f2f2f7 !important;
}
[data-theme=dark] .cjchat-police .cjc-right .message-body .message .user,
[data-theme=dark] .cjchat-police .cjc-right .message-body .message .date {
  color: #6f6f6f !important;
}
[data-theme=dark] .cjchat-police .cjc-right .message-body .message.other .content {
  background-color: #1c1c1e !important;
  color: #f2f2f7 !important;
}
/* Footer: input sombre */
[data-theme=dark] .cjchat-police .cjc-right .chat-footer input {
  background-color: #1c1c1e !important;
  border-color: #333 !important;
  color: #f2f2f7 !important;
}
[data-theme=dark] .cjchat-police .cjc-right .chat-footer .button {
  background-color: #1c1c1e !important;
}
[data-theme=dark] .cjchat-police .cjc-right .chat-footer .button svg {
  color: #f2f2f7 !important;
}
/* Panneau gauche: searchbox */
[data-theme=dark] .cjchat-police .cjc-left .searchbox {
  border-color: #333 !important;
  color: #6f6f6f !important;
}
[data-theme=dark] .cjchat-police .cjc-left .searchbox svg {
  fill: #6f6f6f !important;
}
[data-theme=dark] .cjchat-police .cjc-left .searchbox input {
  color: #f2f2f7 !important;
}
[data-theme=dark] .cjchat-police .cjc-left .searchbox input::placeholder {
  color: #6f6f6f !important;
}
/* Attachments overlay */
[data-theme=dark] .cjchat-police .cjc-right .attachments .attachment img,
[data-theme=dark] .cjchat-police .cjc-right .attachments .attachment video {
  box-shadow: 0 0 .25rem .1rem #333 !important;
}

/* ── Chat natif React (police/ambulance) : panneau droit ── */
[data-theme=dark] .police-container .main.chat .chats.room,
[data-theme=dark] .police-container .main.chat .chats.active,
[data-theme=dark] .police-container .main.bulletins .chats.room,
[data-theme=dark] .police-container .main.bulletins .chats.active,
[data-theme=dark] .ambulance-container .main.chat .chats.room,
[data-theme=dark] .ambulance-container .main.chat .chats.active {
  background-color: #000 !important;
}
[data-theme=dark] .police-container .chat-container .chat-footer input,
[data-theme=dark] .ambulance-container .chat-container .chat-footer input {
  background-color: #1c1c1e !important;
  border-color: #333 !important;
  color: #f2f2f7 !important;
}
[data-theme=dark] .police-container .message-body .message.other .content,
[data-theme=dark] .ambulance-container .message-body .message.other .content {
  background-color: #1c1c1e !important;
  color: #f2f2f7 !important;
}

/* The iframe is always 1000×1000px (the tablet's native resolution).
   On mobile it's scaled down via transform:scale(). The media queries below
   DON'T match because the iframe is always 1000px wide, so --tablet-ui-scale
   stays at 1.22 and that's correct — the scale transform handles readability. */
@media (max-width: 768px) {
  html {
    --tablet-ui-scale: 1.22;
  }
}

@media (max-width: 480px) {
  html {
    --tablet-ui-scale: 1.22;
  }

  /* Very small screens: even more aggressive optimizations */
  .tablet-container button,
  .tablet-container .btn,
  .tablet-container [role="button"] {
    min-height: 2.6rem !important;
    font-size: 1rem !important;
  }

  .police-container .left-side,
  .police-container .sidebar {
    max-height: none !important;
    overflow-y: auto !important;
  }

  .ambulance-container .left-side,
  .ambulance-container .sidebar {
    max-height: 3.5rem !important;
  }

  .police-container .tab-container .tab-wrapper,
  .ambulance-container .tab-container .tab-wrapper {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.95rem !important;
    min-height: 2.4rem !important;
  }

  .police-container .main-container,
  .ambulance-container .main-container {
    font-size: 0.95rem !important;
    padding: 0.4rem !important;
  }
}

@media (min-aspect-ratio: 21/9) {
  html {
    font-size: calc(var(--tablet-ui-scale) * (1vh + 0.5vw) / 2) !important;
  }
}

/*
  Dispatch (Police) – rendre la popup + panneau détails plus lisibles.
  La tablette force souvent data-small=true sur les popups d'alarmes.
*/

/* Leaflet popup: enlever les contraintes de largeur */
.leaflet-popup.alarm-popup .leaflet-popup-content-wrapper,
.leaflet-popup.alarm-popup .leaflet-popup-content {
  max-width: none !important;
}

.leaflet-popup.alarm-popup .leaflet-popup-content {
  width: auto !important;
  margin: 0.35rem 0.45rem !important;
}

/* Popup d'alarme dispatch (carte) */
.dispatch-wrapper[data-small="true"] {
  width: clamp(20rem, 32vw, 34rem) !important;
  min-width: 20rem !important;
}

.dispatch-wrapper[data-small="true"] .dispatch-content .title {
  font-size: 1.15em !important;
}

.dispatch-wrapper[data-small="true"] .dispatch-content .description {
  font-size: 0.95em !important;
  line-height: 1.25 !important;
}

.dispatch-wrapper[data-small="true"] .dispatch-controls .button {
  font-size: 0.9em !important;
}

/* Panneau détails à droite (dispatch map) */
.police-container main .main-container .policepage-container .main.dispatch .map-wrapper .right-panel .content {
  min-width: clamp(22rem, 28vw, 34rem) !important;
  max-height: 75vh !important;
}

/*
  Police – tabs (Dispatch / Menotte / etc.)
  Dans l'UI d'origine, certains serveurs attendent une liste verticale.
  Le CSS upstream force un scroll horizontal (overflow-x:auto) ce qui met les onglets "à droite".
*/
.police-container .tab-container {
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: none !important;
  padding-right: 0 !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

.police-container .left-side,
.police-container .sidebar {
  overflow-y: auto !important;
  max-height: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

.police-container .tab-container:has(.tab-wrapper) {
  min-height: 0 !important;
  padding-top: 0 !important;
}

.police-container .tab-container .tab-wrapper {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: .25rem .5rem !important;
}

.police-container .tab-container .tab-wrapper[data-active=true] {
  padding: .25rem .5rem !important;
}

/*
  Mobile – empêcher le décalage/zoom quand le clavier virtuel apparaît.
*/
html, body {
  overflow-x: hidden !important;
  overscroll-behavior: none !important;
  max-width: 100% !important;
}

/* Force all top-level containers to respect viewport width */
.tablet-container,
#root,
#app {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/*
  Mobile icon fix — applied via .mobile-panel class injected by JS.
  @media(max-width:768px) does NOT match inside the 1000px iframe,
  so we use html.mobile-panel instead.
*/
html.mobile-panel .tab-container .tab-wrapper {
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

/* Force tab-content to ensure icon + title row stays aligned */
html.mobile-panel .tab-container .tab-wrapper .tab .tab-content {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  overflow: visible !important;
}

/* Scale tab content SVG icons (inside .tab-content only, not close button) */
html.mobile-panel .tab-container .tab-wrapper .tab .tab-content svg {
  width: 1.2em !important;
  height: 1.2em !important;
  min-width: 1.2em !important;
  min-height: 1.2em !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* Sidebar navigation item icons (police pages: Dispatch, CNI, etc.) */
html.mobile-panel .sidebar .items .item svg {
  width: 1.2em !important;
  height: 1.2em !important;
  min-width: 1.2em !important;
  min-height: 1.2em !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* Police sidebar itself: ensure items stay visible */
html.mobile-panel .police-container .sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: none !important;
  height: 100% !important;
}

html.mobile-panel .police-container .sidebar .items {
  overflow-y: auto !important;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  width: 100% !important;
}

html.mobile-panel .police-container .sidebar .items .item {
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.3rem !important;
  min-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
}

/* ═══ Mobile sidebar fixes (applied via JS class, NOT @media) ═══ */

/* --- Ambulance: horizontal sidebar at top --- */
html.mobile-panel .ambulance-container {
  flex-direction: column !important;
}

html.mobile-panel .ambulance-container .left-side,
html.mobile-panel .ambulance-container .sidebar,
html.mobile-panel .ambulance-container .ambulance-sidebar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-height: 4rem !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  border-right: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html.mobile-panel .ambulance-container .tab-container {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

html.mobile-panel .ambulance-container .tab-container .tab-wrapper {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 0.5rem 0.6rem !important;
  font-size: 0.95rem !important;
  min-height: 2.2rem !important;
}

/* --- Police + all service apps: vertical scrollable sidebar --- */
/* Note: all métier apps (Agent Immobilier, Concessionnaire, etc.) reuse .police-container */
/* Base CSS already sets: main { display:flex } .sidebar { width:20% } .main-container { width:100% }
   We only override widths and overflow — no flex-direction changes needed. */

html.mobile-panel .police-container .sidebar {
  width: 30% !important;
  min-width: 10rem !important;
  max-width: 15rem !important;
  flex-shrink: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  max-height: none !important;
  z-index: 2 !important;
  background-color: var(--police-bg, #f8f8f8) !important;
}

/* Hide the bottom gradient pseudo-element on mobile (interferes with scroll) */
html.mobile-panel .police-container .sidebar::after {
  display: none !important;
}

html.mobile-panel .police-container .main-container {
  width: auto !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Ambulance main */
html.mobile-panel .ambulance-container main {
  flex: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ═══ Job apps + hospital in ambulance-container: vertical sidebar ═══ */
html.mobile-panel .ambulance-container.job-app-sidebar .left-side,
html.mobile-panel .ambulance-container.job-app-sidebar .sidebar,
html.mobile-panel .ambulance-container.job-app-sidebar .ambulance-sidebar {
  flex-direction: column !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 30% !important;
  min-width: 10rem !important;
  max-width: 15rem !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(0,0,0,0.1) !important;
  -webkit-overflow-scrolling: touch !important;
}

html.mobile-panel .ambulance-container.job-app-sidebar .sidebar::after,
html.mobile-panel .ambulance-container.job-app-sidebar .ambulance-sidebar::after {
  display: none !important;
}

html.mobile-panel .ambulance-container.job-app-sidebar .tab-container,
html.mobile-panel .ambulance-container.job-app-sidebar .items {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.mobile-panel .ambulance-container.job-app-sidebar main {
  flex-direction: row !important;
}

html.mobile-panel .ambulance-container.job-app-sidebar .main-container {
  width: auto !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* --- Common app sidebar dimensions (police/ambulance) --- */
html.mobile-panel .police-container .left-side,
html.mobile-panel .police-container .sidebar,
html.mobile-panel .police-container nav,
html.mobile-panel .ambulance-container .left-side,
html.mobile-panel .ambulance-container .sidebar {
  min-width: 10rem !important;
}

@media (max-width: 768px) {
  html, body {
    position: fixed !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
  }

  #root {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: manipulation !important;
  }

  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  input, textarea, select {
    font-size: max(1em, 16px) !important;
    touch-action: manipulation !important;
  }

  /* ===== MOBILE APP OPTIMIZATION ===== */

  /* Tablet container: use full viewport */
  .tablet-container {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* Home screen app grid: bigger icons and text */
  .tablet-container .home-container .app-grid,
  .tablet-container .home-container .dock {
    gap: 1rem !important;
  }

  .tablet-container .home-container .app-grid .app-icon,
  .tablet-container .home-container .dock .app-icon {
    min-width: 3.8rem !important;
    min-height: 3.8rem !important;
    width: 3.8rem !important;
    height: 3.8rem !important;
  }

  .tablet-container .home-container .app-grid .app-icon img,
  .tablet-container .home-container .dock .app-icon img {
    width: 100% !important;
    height: 100% !important;
  }

  .tablet-container .home-container .app-grid .app-label,
  .tablet-container .home-container .dock .app-label {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
  }

  /* App sidebar / left-side navigation */
  .police-container .left-side,
  .police-container .sidebar,
  .police-container nav,
  .ambulance-container .left-side,
  .ambulance-container .sidebar {
    min-width: 8rem !important;
    width: 28% !important;
    max-width: 10rem !important;
  }

  /* Tab wrappers inside apps */
  .police-container .tab-container .tab-wrapper,
  .ambulance-container .tab-container .tab-wrapper {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.9rem !important;
    min-height: 2.2rem !important;
  }

  /* Main content area in apps */
  .police-container main,
  .ambulance-container main,
  .app-canister {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Buttons inside apps: bigger touch targets */
  .tablet-container button,
  .tablet-container .btn,
  .tablet-container [role="button"] {
    min-height: 2.4rem !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(139,92,246,0.2) !important;
  }

  /* Text readability inside apps */
  .police-container .main-container,
  .ambulance-container .main-container,
  .app-canister .content {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Form inputs inside apps */
  .tablet-container input[type="text"],
  .tablet-container input[type="number"],
  .tablet-container input[type="search"],
  .tablet-container textarea,
  .tablet-container select {
    min-height: 2.4rem !important;
    padding: 0.4rem 0.6rem !important;
  }

  /* Dispatch/map panels */
  .dispatch-wrapper {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Settings/Notes apps */
  .tablet-container .settings-container,
  .tablet-container .notes-container {
    padding: 0.6rem !important;
  }

  /* Scrollable lists inside apps */
  .tablet-container .list-container,
  .tablet-container .chat-container,
  .tablet-container .messages-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Service apps mobile */
  .ambulance-container {
    flex-direction: column !important;
  }

  .ambulance-container .left-side,
  .ambulance-container .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: 4rem !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    border-right: none !important;
  }

  .ambulance-container .tab-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ambulance-container .tab-container .tab-wrapper {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Police mobile: sidebar verticale scrollable (accès complet à Jail/Logs/Phone) */
  .police-container {
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .police-container .left-side,
  .police-container .sidebar {
    width: clamp(8rem, 28%, 10rem) !important;
    min-width: 8rem !important;
    max-width: 10rem !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    max-height: none !important;
    border-right: 1px solid rgba(0,0,0,0.1) !important;
    border-bottom: none !important;
  }

  .police-container .tab-container {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-right: 0.35rem !important;
    padding-bottom: 0.75rem !important;
    scrollbar-width: thin !important;
  }

  .police-container .tab-container .tab-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    flex-shrink: 0 !important;
  }

  .police-container main,
  .ambulance-container main {
    flex: 1 !important;
    width: 100% !important;
    overflow-y: auto !important;
  }

  /* ===== SETUP / LANGUAGE SELECTOR ===== */

  /* Setup container: use full height */
  .setup-container {
    border-radius: 0 !important;
  }

  .setup-container .setup-wrapper {
    padding-top: 3rem !important;
    gap: 1rem !important;
  }

  .setup-container .setup-wrapper .content .title {
    font-size: 1.8rem !important;
  }

  .setup-container .setup-wrapper .content .subtitle {
    font-size: 1.1rem !important;
    width: 92% !important;
    margin-top: 0.8rem !important;
  }

  .setup-container .setup-wrapper .content .description {
    font-size: 0.9rem !important;
    width: 92% !important;
  }

  .setup-container .setup-wrapper .titleContainer {
    font-size: 2rem !important;
  }

  .setup-container .setup-wrapper .titleContainer.small {
    font-size: 1.3rem !important;
  }

  /* Language items: much bigger for touch */
  .setup-container .setup-wrapper .setup-chooseLanguage {
    gap: 1rem !important;
  }

  .setup-container .setup-wrapper .setup-chooseLanguage .languages {
    gap: 0.6rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 2rem !important;
  }

  .setup-container .setup-wrapper .setup-chooseLanguage .languages .item {
    width: 90% !important;
    padding: 0.8rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 0.5rem !important;
    min-height: 2.6rem !important;
  }

  .setup-container .setup-wrapper .setup-chooseLanguage .languages .item .label {
    font-size: 1rem !important;
  }

  .setup-container .setup-wrapper .setup-chooseLanguage .languages .item svg {
    font-size: 1.2rem !important;
  }

  /* Setup buttons */
  .setup-container .setup-wrapper .button {
    font-size: 1rem !important;
    padding: 0.8rem 2rem !important;
    margin-top: 3rem !important;
    border-radius: 0.7rem !important;
  }

  .setup-container .setup-wrapper .highlight {
    font-size: 0.9rem !important;
  }

  /* Appearance mode selector */
  .setup-container .setup-wrapper .setup-appearance .modes {
    gap: 1.2rem !important;
    font-size: 0.95rem !important;
  }

  .setup-container .setup-wrapper .setup-appearance .modes .mode img {
    width: 8rem !important;
  }

  /* ===== ENHANCED TEXT & TABS FOR ALL APPS ===== */

  /* General text size boost for all app content */
  .tablet-container .main-container,
  .tablet-container .app-canister,
  .tablet-container .content-area,
  .tablet-container main {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Tab wrappers: bigger, bolder for touch */
  .police-container .tab-container .tab-wrapper,
  .ambulance-container .tab-container .tab-wrapper {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.95rem !important;
    min-height: 2.4rem !important;
    font-weight: 600 !important;
  }

  /* All headings inside apps */
  .tablet-container h1,
  .tablet-container .page-title {
    font-size: 1.5rem !important;
  }

  .tablet-container h2 {
    font-size: 1.25rem !important;
  }

  .tablet-container h3 {
    font-size: 1.1rem !important;
  }

  /* List items in apps (registrations, dispatch entries, etc.) */
  .tablet-container .list-item,
  .tablet-container .item-row,
  .tablet-container tr td,
  .tablet-container .entry {
    font-size: 0.9rem !important;
    padding: 0.4rem 0.35rem !important;
  }

  /* Buttons inside apps: bigger */
  .tablet-container button,
  .tablet-container .btn,
  .tablet-container [role="button"] {
    min-height: 2.4rem !important;
    font-size: 0.9rem !important;
  }

  /* Form inputs */
  .tablet-container input[type="text"],
  .tablet-container input[type="number"],
  .tablet-container input[type="search"],
  .tablet-container textarea,
  .tablet-container select {
    min-height: 2.4rem !important;
    font-size: 0.95rem !important;
    padding: 0.4rem 0.6rem !important;
  }

  /* Settings app: sections and labels */
  .tablet-container .settings-container .setting-label,
  .tablet-container .settings-container .section-title {
    font-size: 1.05rem !important;
  }

  .tablet-container .settings-container .setting-description,
  .tablet-container .settings-container .setting-value {
    font-size: 0.9rem !important;
  }
}