:root {
--tkrvue-sidebar-bg: #f4f4f4;
--tkrvue-sidebar-hover-bg: #e8eefb;
--tkrvue-sidebar-active-bg: #dbeafe;
--tkrvue-selection-bg: #dbeafe;
--tkrvue-selection-text: #1f2937;
--tkrvue-selection-border: color-mix(in srgb, var(--tkrvue-selection-bg) 65%, var(--tkrvue-selection-text));
--tkrvue-header-bg: #f4f4f4;
--tkrvue-layer-bg: #ffffff;
--tkrvue-layer-surface-bg: #f8fafc;
--tkrvue-layer-section-bg: #ffffff;
--tkrvue-topbar-panel-bg: #eaf4ff;
--tkrvue-topbar-panel-text: #1f2937;
--tkrvue-text: #2d2f36;
--tkrvue-sidebar-text: #2d2f36;
--tkrvue-header-text: #1f2937;
--tkrvue-layer-text: #2d2f36;
--tkrvue-muted: #64748b;
--tkrvue-border: #d6dbe6;
--tkrvue-input-bg: #ffffff;
--tkrvue-input-text: #1f2937;
--tkrvue-readonly-bg: #e5e7eb;
--tkrvue-readonly-text: #475569;
--tkrvue-readonly-border: #cbd5e1;
--tkrvue-active-text: #1d4ed8;
--tkrvue-accent: #316da5;
--tkrvue-tab-accent: #316da5;
--tkrvue-map-control-accent: #316da5;
--tkrvue-map-control-surface: rgba(255, 255, 255, 0.97);
--tkrvue-map-control-surface-solid: #ffffff;
--tkrvue-map-control-surface-hover: color-mix(in srgb, var(--tkrvue-map-control-accent) 10%, #ffffff);
--tkrvue-map-control-foreground: var(--tkrvue-map-control-accent);
--tkrvue-map-control-content: #172033;
--tkrvue-map-control-muted: #64748b;
--tkrvue-map-control-border: rgba(15, 23, 42, 0.22);
--tkrvue-map-control-field: #ffffff;
--tkrvue-map-control-field-border: rgba(59, 92, 128, 0.22);
--tkrvue-map-control-shadow: 0 3px 12px rgba(15, 23, 42, 0.2);
--tkrvue-map-control-error: #b42318;
--tkrvue-map-control-error-bg: #fff1f0;
--tkrvue-status-success-bg: #f0fdf4;
--tkrvue-status-success-border: #86efac;
--tkrvue-status-success-text: #166534;
--tkrvue-status-error-bg: #fef2f2;
--tkrvue-status-error-border: #fecaca;
--tkrvue-status-error-text: #991b1b;
--tkrvue-status-info-bg: #eff6ff;
--tkrvue-status-info-border: #bfdbfe;
--tkrvue-status-info-text: #1e40af;
--tkrvue-status-warning-bg: #fffbeb;
--tkrvue-status-warning-border: #fcd34d;
--tkrvue-status-warning-text: #92400e;
--tkrvue-message-bg: #eef0d5;
--tkrvue-message-text: #333333;
--tkrvue-map-tooltip-bg: #ffffff;
--tkrvue-map-tooltip-surface: #f8fafc;
--tkrvue-map-tooltip-text: #1f2937;
--tkrvue-map-tooltip-muted: #64748b;
--tkrvue-map-tooltip-border: #cbd5e1;
--tkrvue-map-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
--tkrvue-map-tooltip-gradient-start: rgba(255, 255, 255, 0.99);
--tkrvue-map-tooltip-gradient-end: rgba(248, 250, 252, 0.98);
--tkrvue-map-close-size: clamp(24px, calc(var(--tkrvue-font-size-effective) + 12px), 30px);
--tkrvue-map-close-icon-size: clamp(11px, calc(var(--tkrvue-font-size-effective) - 1px), 16px);
--tkrvue-device-tracker-bg: #E6D6FF;
--tkrvue-device-tracker-text: #553A78;
--tkrvue-device-gsm-bg: #EED9B6;
--tkrvue-device-gsm-text: #6B4F1D;
--tkrvue-device-beacon-bg: #FFF1A8;
--tkrvue-device-beacon-text: #6F5D00;
--tkrvue-device-smartphone-bg: #EED9B6;
--tkrvue-device-smartphone-text: #6B4F1D;
--tkrvue-device-computer-bg: #D7F0F2;
--tkrvue-device-computer-text: #155E68;
--tkrvue-device-default-bg: #EFDECD;
--tkrvue-device-default-text: #5F4A3A;
--tkrvue-font-family: Arial, sans-serif;
--tkrvue-font-size: 14px;
--tkrvue-font-size-max: 20px;
--tkrvue-font-size-effective: min(var(--tkrvue-font-size), var(--tkrvue-font-size-max));
--tkrvue-font-size-xs: max(10px, calc(var(--tkrvue-font-size-effective) - 3px));
--tkrvue-font-size-sm: max(11px, calc(var(--tkrvue-font-size-effective) - 2px));
--tkrvue-font-size-md: var(--tkrvue-font-size-effective);
--tkrvue-font-size-lg: calc(var(--tkrvue-font-size-effective) + 1px);
--tkrvue-font-size-title: calc(var(--tkrvue-font-size-effective) + 2px);
}
@media (max-width: 1200px) {
:root {
--tkrvue-font-size-max: 18px;
}
}
@media (max-width: 900px) {
:root {
--tkrvue-font-size-max: 17px;
}
}
@media (max-width: 700px) {
:root {
--tkrvue-font-size-max: 16px;
}
}
@media (max-width: 480px) {
:root {
--tkrvue-font-size-max: 15px;
}
}
:root[data-theme="dark"] {
--tkrvue-selection-bg: #334155;
--tkrvue-selection-text: #f8fafc;
--tkrvue-text: #e5edf7;
--tkrvue-sidebar-text: #e5edf7;
--tkrvue-header-text: #f8fafc;
--tkrvue-layer-text: #e5edf7;
--tkrvue-muted: #a8b3c4;
--tkrvue-border: #334155;
--tkrvue-input-bg: #111827;
--tkrvue-input-text: #e5edf7;
--tkrvue-readonly-bg: #273244;
--tkrvue-readonly-text: #cbd5e1;
--tkrvue-readonly-border: #475569;
--tkrvue-active-text: #bfdbfe;
--tkrvue-accent: #60a5fa;
--tkrvue-status-success-bg: #052e1a;
--tkrvue-status-success-border: #22c55e;
--tkrvue-status-success-text: #bbf7d0;
--tkrvue-status-error-bg: #3b0a0a;
--tkrvue-status-error-border: #ef4444;
--tkrvue-status-error-text: #fecaca;
--tkrvue-status-info-bg: #0b2447;
--tkrvue-status-info-border: #3b82f6;
--tkrvue-status-info-text: #dbeafe;
--tkrvue-status-warning-bg: #332600;
--tkrvue-status-warning-border: #f59e0b;
--tkrvue-status-warning-text: #fde68a;
--tkrvue-message-bg: #1f2937;
--tkrvue-message-text: #e5edf7;
--tkrvue-map-tooltip-bg: #172235;
--tkrvue-map-tooltip-surface: #1e293b;
--tkrvue-map-tooltip-text: #f8fafc;
--tkrvue-map-tooltip-muted: #94a3b8;
--tkrvue-map-tooltip-border: rgba(255, 255, 255, 0.16);
--tkrvue-map-tooltip-shadow: 0 18px 45px rgba(15, 23, 42, 0.38);
--tkrvue-map-tooltip-gradient-start: rgba(15, 23, 42, 0.97);
--tkrvue-map-tooltip-gradient-end: rgba(30, 41, 59, 0.95);
}
:root[data-message-style="bootstrap"] {
--tkrvue-status-success-bg: #d1e7dd;
--tkrvue-status-success-border: #badbcc;
--tkrvue-status-success-text: #0f5132;
--tkrvue-status-error-bg: #f8d7da;
--tkrvue-status-error-border: #f5c2c7;
--tkrvue-status-error-text: #842029;
--tkrvue-status-info-bg: #cff4fc;
--tkrvue-status-info-border: #b6effb;
--tkrvue-status-info-text: #055160;
--tkrvue-status-warning-bg: #fff3cd;
--tkrvue-status-warning-border: #ffecb5;
--tkrvue-status-warning-text: #664d03;
}
html,body { margin:0; height:100%; }
body { display:flex; flex-direction:column; font-family:var(--tkrvue-font-family); font-size: var(--tkrvue-font-size-effective); color: var(--tkrvue-text); }
body.tkrvue-app-booting {
overflow: hidden;
cursor: progress;
}
body.tkrvue-app-restoring-layer {
cursor: progress;
}
body.tkrvue-app-restoring-layer :is(#topbar, #sidebar, #splitter, #map, #viewLayer) {
pointer-events: none !important;
user-select: none;
}
.app-boot-loader {
position: fixed;
inset: 0;
z-index: 12000;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 24px;
background: color-mix(in srgb, var(--tkrvue-header-bg) 76%, transparent);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.16s ease, visibility 0.16s ease;
}
body.tkrvue-app-booting .app-boot-loader {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.app-boot-loader-card {
display: flex;
align-items: center;
gap: 12px;
width: min(420px, calc(100vw - 48px));
min-height: 58px;
box-sizing: border-box;
padding: 14px 16px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.22);
cursor: default;
}
.app-boot-loader-copy {
display: grid;
flex: 1 1 auto;
min-width: 0;
gap: 3px;
line-height: 1.3;
}
.app-boot-loader-copy strong {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-lg);
}
.app-boot-loader-copy span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-md);
overflow-wrap: anywhere;
}
.app-boot-loader-spinner {
width: 24px;
height: 24px;
}
.app-boot-loader.is-slow .app-boot-loader-card {
border-color: var(--tkrvue-status-warning-border);
}
.app-boot-loader.is-slow .app-boot-loader-copy span {
color: var(--tkrvue-status-warning-text);
}
.app-boot-loader.is-error .app-boot-loader-card {
border-color: var(--tkrvue-status-error-border);
}
.app-boot-loader.is-error .app-boot-loader-spinner {
display: none;
}
.app-boot-loader.is-error .app-boot-loader-copy span {
color: var(--tkrvue-status-error-text);
}
body.tkrvue-network-offline {
overflow: hidden;
cursor: not-allowed;
}
.network-offline-overlay {
position: fixed;
inset: 0;
z-index: 12500;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 24px;
background: color-mix(in srgb, var(--tkrvue-header-bg) 82%, transparent);
backdrop-filter: blur(4px);
pointer-events: auto;
}
.network-offline-card {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 13px;
width: min(520px, calc(100vw - 48px));
box-sizing: border-box;
padding: 17px 18px;
border: 2px solid var(--tkrvue-status-error-border);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.32);
cursor: default;
}
.network-offline-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 2px solid var(--tkrvue-status-error-border);
border-radius: 50%;
background: var(--tkrvue-status-error-bg);
color: var(--tkrvue-status-error-text);
font-size: 24px;
font-weight: 900;
line-height: 1;
}
.network-offline-copy {
display: grid;
gap: 4px;
min-width: 0;
line-height: 1.35;
}
.network-offline-copy strong {
color: var(--tkrvue-status-error-text);
font-size: var(--tkrvue-font-size-lg);
}
.network-offline-copy span,
.network-offline-copy small {
color: var(--tkrvue-layer-text);
overflow-wrap: anywhere;
}
.network-offline-copy small {
color: var(--tkrvue-muted);
}
html[data-map-theme="dark"] #map,
html[data-map-theme="dark"] #map .leaflet-map-pane,
html[data-map-theme="dark"] #map .leaflet-tile-pane {
background-color: var(--tkrvue-dark-map-underlay, #111c2b);
}
html[data-map-theme="dark"] #map .leaflet-layer.tkrvue-dark-map-tiles {
filter: invert(90%) hue-rotate(180deg) brightness(78%) contrast(92%) saturate(72%);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
html[data-map-theme="dark"] #map .leaflet-layer.tkrvue-dark-map-tiles .leaflet-tile {
/* Chromium arrondit les contours fractionnaires au pixel entier, puis
* cumule deux bords voisins. Sans contour, le raccord conserve la même
* finesse que sur le fond clair. */
outline: none;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 160ms ease;
}
html[data-map-theme="dark"] #map {
--tkrvue-dark-map-underlay: #111c2b;
--tkrvue-map-control-surface: rgba(18, 32, 49, 0.95);
--tkrvue-map-control-surface-solid: #172235;
--tkrvue-map-control-surface-hover: #213a57;
--tkrvue-map-control-foreground: #8bc8f5;
--tkrvue-map-control-content: #f4f8fc;
--tkrvue-map-control-muted: #b4c2d3;
--tkrvue-map-control-border: rgba(139, 200, 245, 0.42);
--tkrvue-map-control-field: #101c2c;
--tkrvue-map-control-field-border: rgba(148, 197, 233, 0.34);
--tkrvue-map-control-shadow: 0 4px 16px rgba(0, 0, 0, 0.48);
--tkrvue-map-control-error: #fecaca;
--tkrvue-map-control-error-bg: rgba(127, 29, 29, 0.78);
}
html[data-context-help="hidden"] .context-help-box {
display: none !important;
}
.app-boot-retry {
flex: 0 0 auto;
align-self: center;
}
@media (max-width: 520px) {
.app-boot-loader-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
}
.app-boot-retry {
grid-column: 2;
justify-self: start;
}
}
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--tkrvue-accent) !important;
}
/* Bandeau en haut */
#topbar {
background: var(--tkrvue-header-bg); /* même que sidebar */
color: var(--tkrvue-header-text);
padding: 10px;
border-bottom: 2px solid var(--tkrvue-border);
}
#titleBlock {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.app-identity-name {
color: var(--tkrvue-header-text);
font-size: 22px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: min(34vw, 520px);
}
/* Contenu principal : sidebar + splitter + carte */
#main {
flex:1;
display:flex;
min-height:0;
}
#sidebar {
width:250px;
min-width:120px;
flex: 0 0 auto;
display:flex;
flex-direction:column;
background: var(--tkrvue-sidebar-bg);
color: var(--tkrvue-sidebar-text);
padding:0 10px 10px;
box-sizing:border-box;
border-right:2px solid var(--tkrvue-border);
box-shadow: 2px 0 8px rgba(0,0,0,0.05);
overflow:hidden;
transition: width 0.2s ease;
}
.sidebar-menu-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--tkrvue-sidebar-text) 30%, transparent) transparent;
}
.sidebar-organization-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 50px;
max-height: 66px;
padding: 5px 4px 6px;
margin-bottom: 4px;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-sidebar-text) 16%, transparent);
}
.sidebar-organization-logo img {
display: block;
max-width: 88%;
max-height: 54px;
object-fit: contain;
}
.sidebar-organization-logo-trigger {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 54px;
margin: 0;
padding: 0;
border: 0;
border-radius: 14px;
background: transparent;
color: inherit;
font: inherit;
}
@media (min-width: 901px) {
.sidebar-organization-logo-trigger:not(:disabled) {
cursor: zoom-in;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sidebar-organization-logo-trigger:not(:disabled):hover {
background: color-mix(in srgb, var(--tkrvue-accent) 9%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tkrvue-accent) 20%, transparent);
transform: scale(1.035);
}
.sidebar-organization-logo-trigger:not(:disabled):focus-visible {
outline: 3px solid color-mix(in srgb, var(--tkrvue-accent) 40%, transparent);
outline-offset: 2px;
}
}
body.tkrvue-organization-logo-preview-open {
overflow: hidden;
}
.tkrvue-organization-logo-preview {
position: fixed;
inset: 0;
z-index: 39000;
pointer-events: none;
font-family: var(--tkrvue-font-family);
}
.tkrvue-organization-logo-preview.is-open,
.tkrvue-organization-logo-preview.is-closing {
pointer-events: auto;
}
.tkrvue-organization-logo-preview-backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(circle at center, color-mix(in srgb, var(--tkrvue-accent) 10%, transparent), transparent 48%),
rgba(15, 23, 42, 0.68);
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
opacity: 0;
transition: opacity 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
.tkrvue-organization-logo-preview.is-open .tkrvue-organization-logo-preview-backdrop {
opacity: 1;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.tkrvue-organization-logo-preview-card {
position: fixed;
left: var(--logo-preview-start-left);
top: var(--logo-preview-start-top);
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
align-items: center;
justify-items: center;
width: var(--logo-preview-start-width);
height: var(--logo-preview-start-height);
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: visible;
border: 1px solid transparent;
border-radius: 50%;
background: transparent;
box-shadow: none;
transform: translate(0, 0) scale(1);
transform-origin: center;
transition:
left 0.38s cubic-bezier(0.16, 1, 0.3, 1),
top 0.38s cubic-bezier(0.16, 1, 0.3, 1),
width 0.38s cubic-bezier(0.16, 1, 0.3, 1),
height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
padding 0.38s cubic-bezier(0.16, 1, 0.3, 1),
border-radius 0.38s ease,
border-color 0.25s ease,
background-color 0.25s ease,
box-shadow 0.38s ease,
transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.tkrvue-organization-logo-preview-card::before {
content: "";
position: absolute;
inset: -12px;
z-index: -1;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 38%, transparent);
border-radius: inherit;
opacity: 0;
transform: scale(0.94);
}
.tkrvue-organization-logo-preview.is-open .tkrvue-organization-logo-preview-card {
left: 50%;
top: 50%;
width: var(--logo-preview-target-width);
height: var(--logo-preview-target-height);
padding: clamp(18px, 3vw, 28px);
border-color: color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
border-radius: clamp(22px, 4vw, 36px);
background: color-mix(in srgb, var(--tkrvue-layer-bg) 94%, transparent);
box-shadow:
0 34px 80px rgba(2, 8, 23, 0.42),
0 0 0 8px color-mix(in srgb, var(--tkrvue-accent) 8%, transparent);
transform: translate(-50%, -50%) scale(1);
}
.tkrvue-organization-logo-preview.is-open .tkrvue-organization-logo-preview-card::before {
animation: tkrvue-organization-logo-preview-aura 1.8s ease-in-out 0.2s both;
}
.tkrvue-organization-logo-preview-card > img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: contain;
filter: drop-shadow(0 12px 22px rgba(15, 23, 42, 0.16));
}
.tkrvue-organization-logo-preview-card figcaption {
align-self: end;
max-width: 100%;
padding-top: 10px;
overflow: hidden;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-lg);
font-weight: 700;
line-height: 1.25;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s ease 0.18s, transform 0.28s ease 0.18s;
}
.tkrvue-organization-logo-preview.is-open .tkrvue-organization-logo-preview-card figcaption {
opacity: 1;
transform: translateY(0);
}
.tkrvue-organization-logo-preview-close.tkrvue-close-button {
position: absolute;
top: 12px;
right: 12px;
opacity: 0;
transform: scale(0.72) rotate(-10deg);
transition: opacity 0.2s ease 0.18s, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}
.tkrvue-organization-logo-preview.is-open .tkrvue-organization-logo-preview-close {
opacity: 1;
transform: scale(1) rotate(0);
}
@keyframes tkrvue-organization-logo-preview-aura {
0% { opacity: 0; transform: scale(0.94); }
45% { opacity: 0.72; transform: scale(1.025); }
100% { opacity: 0.18; transform: scale(1); }
}
@media (max-width: 900px) {
.sidebar-organization-logo-trigger {
pointer-events: none;
}
.tkrvue-organization-logo-preview {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.sidebar-organization-logo-trigger,
.tkrvue-organization-logo-preview-backdrop,
.tkrvue-organization-logo-preview-card,
.tkrvue-organization-logo-preview-card::before,
.tkrvue-organization-logo-preview-card figcaption,
.tkrvue-organization-logo-preview-close.tkrvue-close-button {
animation: none !important;
transition: none !important;
}
}
.sidebar-menu-scroll::-webkit-scrollbar {
width: 6px;
}
.sidebar-menu-scroll::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-menu-scroll::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--tkrvue-sidebar-text) 24%, transparent);
border-radius: 999px;
}
.sidebar-menu-scroll::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--tkrvue-sidebar-text) 38%, transparent);
}
#splitter {
display: none;
}
#map-container {
flex:1 1 auto;
display:flex;
position: relative;
min-width: 0;
min-height: 0;
height: 100%;
overflow: hidden;
z-index: 1;
}
#map {
flex:1;
}
.resizing {
user-select:none;
}
/*Boite de dialog message*/
#globalMessage {
display: block;
position: fixed;
top: 10px;
left: 10px; /* 🔥 ancré à gauche */
width: auto; /* 🔥 plus 100% */
z-index: 9999;
pointer-events: none;
}
/* boîte message */
#globalMessage .msg-content {
max-width: none;
width: auto;
padding: 8px 10px;
position: relative; /* ?? nécessaire pour la croix et la flèche */
background: var(--tkrvue-message-bg);
color: var(--tkrvue-message-text);
border-radius: 8px;
min-width: 300px;
min-height: 120px;
/* modifiable */
resize: both;
max-height: none;
overflow: hidden; /* 🔥 important */
display: flex; /* 🔥 AJOUT */
flex-direction: column; /* 🔥 AJOUT */
min-height: 80px;
pointer-events: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: 1px solid #ccc;
cursor: default;
}
#globalMessage .msg-content.expanded {
max-height: none;
}
/* flèche (corrigée couleur + position) */
#globalMessage .msg-content::before {
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border-width: 8px;
border-style: solid;
border-color: transparent transparent var(--tkrvue-message-bg) transparent;
}
#globalMessage.dragging {
pointer-events: none;
}
/* header cliquable */
.msg-header {
flex-shrink: 0;
flex-wrap: nowrap;
align-items: center;
display: flex;
justify-content: space-between;
cursor: move;
margin-bottom: 8px;
border-bottom: 1px solid rgba(0,0,0,0.1); /* 🔥 séparation légère */
}
.msg-actions-left,
.msg-actions-right {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0; /* 🔥 empêche compression */
}
#msgBody {
flex: 1;
overflow: auto; /* 🔥 scroll ici uniquement */
display: flex;
flex-direction: column;
min-height: 0; /* 🔥 CRITIQUE */
}
/* Fermeture du message : le gabarit et l'icone viennent du composant TrackerVue. */
.msg-close {
position: relative;
}
.msg-close .msg-count {
position: absolute;
top: -7px;
right: -7px;
display: inline-flex;
min-width: 17px;
height: 17px;
align-items: center;
justify-content: center;
padding: 0 4px;
border-radius: 999px;
background: var(--tkrvue-danger, #dc2626);
color: #fff;
font-size: 9px;
font-weight: 800;
line-height: 1;
box-sizing: border-box;
}
/* hover */
.msg-content:hover {
background: var(--tkrvue-message-bg);
}
.hidden {
display: none !important;
}
.topbar-user-actions {
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
}
.user-role-badge {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 190px;
padding: 3px 7px;
border: 1px solid rgba(37,99,235,0.28);
border-radius: 999px;
background: rgba(37,99,235,0.10);
color: var(--tkrvue-header-text);
font-size: 11px;
font-weight: 700;
font-family: inherit;
line-height: 1.15;
white-space: nowrap;
cursor: help;
appearance: none;
}
.user-role-badge:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 72%, transparent);
outline-offset: 2px;
}
.user-role-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
min-width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(37,99,235,0.16);
color: #1d4ed8;
font-size: 10px;
line-height: 1;
}
.user-role-badge-icon svg,
.superadmin-key-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.user-role-badge-label {
overflow: hidden;
text-overflow: ellipsis;
}
.user-role-superadmin-premium {
border-color: rgba(124,58,237,0.38);
background: rgba(124,58,237,0.12);
color: #6d28d9;
}
.user-role-superadmin-premium .user-role-badge-icon {
background: transparent;
color: #b45309;
box-shadow: none;
}
.user-role-superadmin {
border-color: rgba(6,95,70,0.48);
background: rgba(6,95,70,0.14);
}
.user-role-superadmin .user-role-badge-icon {
background: rgba(6,95,70,0.16);
color: #065f46;
box-shadow: none;
}
.user-role-admin {
border-color: rgba(5,150,105,0.32);
background: rgba(5,150,105,0.11);
}
.user-role-admin .user-role-badge-icon {
background: rgba(5,150,105,0.16);
color: #047857;
}
.user-role-editor {
border-color: rgba(245,158,11,0.35);
background: rgba(245,158,11,0.12);
}
.user-role-editor .user-role-badge-icon {
background: rgba(245,158,11,0.18);
color: #b45309;
}
:root[data-theme="dark"] .user-role-badge {
border-color: rgba(147,197,253,0.34);
background: rgba(37,99,235,0.18);
color: var(--tkrvue-header-text);
}
:root[data-theme="dark"] .user-role-badge-icon {
background: rgba(147,197,253,0.16);
color: #bfdbfe;
}
:root[data-theme="dark"] .user-role-superadmin-premium {
border-color: rgba(196,181,253,0.42);
background: rgba(124,58,237,0.22);
color: #ddd6fe;
}
:root[data-theme="dark"] .user-role-superadmin-premium .user-role-badge-icon {
background: transparent;
color: #fde68a;
box-shadow: none;
}
:root[data-theme="dark"] .user-role-superadmin {
border-color: rgba(52,211,153,0.46);
background: rgba(6,95,70,0.28);
}
:root[data-theme="dark"] .user-role-superadmin .user-role-badge-icon {
background: rgba(52,211,153,0.16);
color: #6ee7b7;
box-shadow: none;
}
.preferences-menu-wrap {
position: relative;
display: inline-flex;
}
.topbar-icon-button {
width: 36px;
min-width: 36px;
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-header-text);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
}
.topbar-icon-button:hover {
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-accent);
}
.tkrvue-mobile-refresh {
display: inline-flex;
}
.tkrvue-mobile-refresh svg,
.primary-scope-trigger-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.tkrvue-open-new-tab {
color: var(--tkrvue-accent);
}
.tkrvue-open-new-tab svg,
.preferences-open-new-tab svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.preferences-open-new-tab,
.preferences-open-new-tab-separator {
display: none !important;
}
#logoutButton {
margin-left: 2px;
color: #dc2626;
border-color: rgba(220,38,38,0.55);
}
#logoutButton svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
#logoutButton:hover {
background: #fee2e2;
color: #b91c1c;
border-color: #ef4444;
}
:root[data-theme="dark"] #logoutButton:hover {
background: rgba(127,29,29,0.72);
color: #fecaca;
border-color: #f87171;
}
.preferences-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 2200;
min-width: 310px;
border: 3px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-sidebar-bg);
color: var(--tkrvue-sidebar-text);
box-shadow: 0 12px 28px rgba(15,23,42,0.22);
padding: 8px;
}
:root[data-theme="dark"] .preferences-menu {
border-color: rgba(255,255,255,0.78);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 18px 42px rgba(0,0,0,0.42);
}
.preferences-title {
font-size: 12px;
color: var(--tkrvue-sidebar-text);
opacity: 0.72;
padding: 4px 6px 7px;
}
.preferences-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.preferences-panel-header .preferences-title {
flex: 1 1 auto;
min-width: 0;
}
.preferences-title-spaced {
margin-top: 8px;
padding-top: 9px;
border-top: 1px solid var(--tkrvue-border);
}
.preferences-separator {
height: 1px;
margin: 10px 2px;
background: linear-gradient(90deg, transparent, var(--tkrvue-border), transparent);
}
.preferences-menu button:not(.tkrvue-close-button) {
width: 100%;
min-height: 30px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--tkrvue-sidebar-text);
text-align: left;
cursor: pointer;
padding: 0 8px;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.preferences-account-security {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 8px !important;
}
#accountSecurityButton.preferences-account-security {
min-height: 54px;
padding: 8px 10px !important;
border: 1px solid var(--tkrvue-border) !important;
background: var(--tkrvue-sidebar-bg);
}
#accountSecurityButton.preferences-account-security:hover,
#accountSecurityButton.preferences-account-security:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-sidebar-bg));
border-color: var(--tkrvue-accent) !important;
}
.preferences-account-security-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
.preferences-account-security-icon svg,
.preferences-account-security-chevron svg {
width: 18px;
height: 18px;
}
.preferences-account-security-copy {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.preferences-account-security-copy strong {
color: var(--tkrvue-topbar-panel-text);
font-weight: 600;
}
.preferences-account-security-copy small {
color: color-mix(in srgb, var(--tkrvue-topbar-panel-text) 70%, transparent);
}
.preferences-account-security-chevron {
display: inline-flex;
flex: 0 0 18px;
color: var(--tkrvue-accent);
}
.account-security-overlay {
position: fixed;
inset: 0;
z-index: 5000;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(15,23,42,0.48);
box-sizing: border-box;
}
.account-security-overlay.hidden { display: none; }
.account-security-dialog {
width: min(680px, 100%);
max-height: min(760px, calc(100vh - 36px));
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
box-shadow: 0 24px 64px rgba(15,23,42,0.32);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
isolation: isolate;
}
.account-security-header {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 58px;
padding: 16px 18px;
border-bottom: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-header-bg);
box-sizing: border-box;
flex: 0 0 auto;
}
.account-security-header > div { display: grid; gap: 3px; }
.account-security-header strong { font-size: var(--tkrvue-font-size-lg); line-height: 1.2; }
.account-security-header small { color: var(--tkrvue-muted); line-height: 1.35; }
.account-security-close { flex: 0 0 auto; }
.account-security-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--tkrvue-layer-bg); }
.account-security-content { display: grid; gap: 14px; padding: 18px; }
.account-security-status { margin: 14px 18px 0; padding: 10px 12px; border-radius: 7px; background: var(--tkrvue-info-bg); color: var(--tkrvue-layer-text); }
.account-security-status.error { background: #fee2e2; color: #991b1b; }
.account-security-status.success { background: #dcfce7; color: #166534; }
.account-security-status.warning { background: var(--tkrvue-status-warning-bg); color: var(--tkrvue-status-warning-text); }
.account-security-section { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--tkrvue-border); border-radius: 9px; background: var(--tkrvue-layer-surface-bg); }
.account-security-section h3 { margin: 0; font-size: var(--tkrvue-font-size-lg); }
.account-security-section p { margin: 0; color: var(--tkrvue-muted); line-height: 1.4; }
.account-security-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.account-security-section-heading > div { display: grid; gap: 7px; min-width: 0; }
.account-revoke-others { flex: 0 0 auto; white-space: nowrap; }
.account-session-groups { display: grid; gap: 11px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.account-session-group { display: grid; gap: 5px; min-width: 0; }
.account-session-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 3px; color: var(--tkrvue-muted); font-size: var(--tkrvue-font-size-xs); line-height: 1.3; }
.account-session-group-heading strong { color: inherit; font-size: inherit; }
.account-session-group-heading span { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--tkrvue-info-bg); color: var(--tkrvue-layer-text); font-weight: 800; box-sizing: border-box; }
.account-session-list { display: grid; overflow: hidden; border: 1px solid var(--tkrvue-border); border-radius: 8px; }
.account-session-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border-top: 1px solid var(--tkrvue-border); }
.account-session-row:first-child { border-top: 0; }
.account-session-row.is-current { background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-surface-bg)); }
.account-session-row.is-inactive { background: color-mix(in srgb, var(--tkrvue-status-warning-bg) 48%, var(--tkrvue-layer-surface-bg)); }
.account-session-device { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--tkrvue-info-bg); color: var(--tkrvue-accent); }
.account-session-device svg, .account-session-revoke svg, .account-revoke-others svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-session-main { display: grid; gap: 3px; min-width: 0; }
.account-session-main small { color: var(--tkrvue-muted); overflow-wrap: anywhere; }
.account-session-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account-session-revoke { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.account-provider-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(150px, 2fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--tkrvue-border); }
.account-provider-row:first-of-type { border-top: 0; }
.account-provider-row small { color: var(--tkrvue-muted); overflow-wrap: anywhere; }
.account-trusted-device-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--tkrvue-border); }
.account-trusted-device-row > div { display: grid; gap: 4px; min-width: 0; }
.account-trusted-device-row small { color: var(--tkrvue-muted); overflow-wrap: anywhere; }
.account-mfa-authenticator { display: grid; gap: 6px; color: var(--tkrvue-layer-text); }
.account-mfa-authenticator > span { font-weight: 650; font-size: var(--tkrvue-font-size-sm); }
.account-mfa-authenticator small { color: var(--tkrvue-muted); line-height: 1.4; }
.account-mfa-recovery-note { padding: 9px 10px; border-left: 3px solid var(--tkrvue-accent); background: var(--tkrvue-info-bg); color: var(--tkrvue-layer-text) !important; }
.account-mfa-authenticator select, .mfa-remember-row select { min-height: 36px; border: 1px solid var(--tkrvue-border); border-radius: 7px; background: var(--tkrvue-input-bg); color: var(--tkrvue-layer-text); padding: 6px 9px; font: inherit; box-sizing: border-box; }
.account-mfa-authenticator select { width: 100%; }
.mfa-enrollment > p { margin: 0; color: var(--tkrvue-muted); }
.account-security-dialog button:not(.tkrvue-close-button) { min-height: 34px; height: auto; max-width: 100%; box-sizing: border-box; border: 1px solid var(--tkrvue-accent); border-radius: 7px; background: var(--tkrvue-input-bg); color: var(--tkrvue-accent); padding: 7px 11px; cursor: pointer; font-family: var(--tkrvue-font-family); font-size: var(--tkrvue-font-size-md); line-height: 1.3; white-space: normal; overflow-wrap: normal; word-break: normal; text-align: center; }
.account-security-dialog button:not(.tkrvue-close-button) > span { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.account-security-dialog button:not(.tkrvue-close-button) svg { flex: 0 0 auto; }
.account-security-dialog button.primary-action { background: var(--tkrvue-accent); color: var(--tkrvue-accent-contrast, #fff); }
.account-security-dialog button.danger-action { border-color: #dc2626; color: #dc2626; }
.account-security-confirmation { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.account-security-confirmation input, .mfa-enrollment input { min-height: 36px; border: 1px solid var(--tkrvue-border); border-radius: 7px; background: var(--tkrvue-input-bg); color: var(--tkrvue-layer-text); padding: 7px 9px; font: inherit; box-sizing: border-box; }
.account-password-form { display: grid; gap: 11px; }
.account-password-field { display: grid; gap: 5px; color: var(--tkrvue-layer-text); }
.account-password-field > span { font-weight: 650; font-size: var(--tkrvue-font-size-sm); }
.account-password-field input { width: 100%; min-height: 38px; border: 1px solid var(--tkrvue-border); border-radius: 7px; background: var(--tkrvue-input-bg); color: var(--tkrvue-layer-text); padding: 7px 9px; font: inherit; box-sizing: border-box; }
.account-password-field input:focus { outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 28%, transparent); border-color: var(--tkrvue-accent); }
.account-password-requirements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; margin: 0; padding: 10px 12px; list-style: none; border: 1px solid var(--tkrvue-border); border-radius: 7px; background: var(--tkrvue-layer-bg); color: var(--tkrvue-muted); font-size: var(--tkrvue-font-size-sm); }
.account-password-requirements li { display: flex; align-items: center; gap: 7px; }
.account-password-requirements li::before { content: "○"; color: var(--tkrvue-muted); font-weight: 800; }
.account-password-requirements li.is-valid { color: var(--tkrvue-status-success-text); }
.account-password-requirements li.is-valid::before { content: "✓"; color: var(--tkrvue-status-success-text); }
.account-password-requirements li.is-invalid { color: var(--tkrvue-status-error-text); }
.account-password-requirements li.is-invalid::before { content: "×"; color: var(--tkrvue-status-error-text); }
.account-password-notice { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-radius: 7px; background: var(--tkrvue-info-bg); color: var(--tkrvue-layer-text); line-height: 1.4; }
.account-password-notice.warning { background: var(--tkrvue-status-warning-bg); color: var(--tkrvue-status-warning-text); }
.account-password-notice svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-password-actions { display: flex; justify-content: flex-end; }
.account-password-actions button:disabled { cursor: wait; opacity: 0.66; }
.mfa-enrollment { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--tkrvue-accent); border-radius: 8px; }
.mfa-enrollment img { width: 180px; height: 180px; max-width: 100%; background: #fff; border-radius: 6px; }
.mfa-secret { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.recovery-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.recovery-code-list code { display: block; padding: 8px 9px; border: 1px solid var(--tkrvue-border); border-radius: 6px; background: var(--tkrvue-layer-bg); color: var(--tkrvue-layer-text); text-align: center; font: inherit; font-weight: 700; letter-spacing: .04em; }
.account-mfa-recovery-codes { border-color: var(--tkrvue-accent); }
.account-mfa-recovery-download { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; text-decoration: none; overflow-wrap: anywhere; }
.account-mfa-recovery-ack { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--tkrvue-border); border-radius: 7px; background: var(--tkrvue-layer-bg); color: var(--tkrvue-layer-text); line-height: 1.4; cursor: pointer; }
.account-mfa-recovery-ack input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 18px; margin: 1px 0 0; accent-color: var(--tkrvue-accent); }
.account-mfa-recovery-required { color: var(--tkrvue-status-warning-text) !important; }
.account-security-dialog button:disabled { cursor: not-allowed; opacity: .56; }
@media (max-width: 620px) {
.account-security-overlay { align-items: flex-end; padding: 0; }
.account-security-dialog { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
.account-provider-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.account-provider-row small { grid-column: auto; }
.account-provider-row button,
.account-trusted-device-row button,
.account-security-section > button,
.account-security-confirmation button { width: 100%; min-width: 0; }
.account-trusted-device-row { grid-template-columns: 1fr; align-items: stretch; }
.account-security-confirmation { grid-template-columns: 1fr; }
.account-mfa-recovery-download { width: 100%; }
.account-security-section-heading { display: grid; }
.account-revoke-others { width: 100%; }
.account-session-groups { max-height: none; overflow: visible; padding-right: 0; }
.account-session-row { grid-template-columns: 34px minmax(0, 1fr); }
.account-session-revoke { grid-column: 2; width: 38px; min-width: 38px; max-width: 38px; height: 36px; padding: 0; gap: 0; justify-self: end; }
.account-session-revoke > span,
.account-revoke-others > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.account-security-section > .account-revoke-others { width: 38px; min-width: 38px; max-width: 38px; height: 36px; padding: 0; gap: 0; justify-content: center; }
.account-password-requirements { grid-template-columns: 1fr; }
.account-password-actions button { width: 100%; }
}
.preferences-theme-row {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 0;
flex-wrap: nowrap;
}
.preferences-theme-row label {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 0 8px;
border-radius: 6px;
cursor: pointer;
font-size: var(--tkrvue-font-size-md);
white-space: nowrap;
}
.preferences-theme-row label:hover,
.preferences-theme-row label.active {
background: var(--tkrvue-sidebar-hover-bg);
color: var(--tkrvue-active-text);
}
.preferences-theme-row input {
margin: 0;
}
.preferences-toggle-list {
display: grid;
gap: 7px;
margin-top: 10px;
}
.preferences-toggle-item {
min-height: 30px;
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
align-items: center;
gap: 4px;
padding: 4px 5px 4px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
}
.preferences-toggle-item > label {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
cursor: pointer;
}
.preferences-detail-toggle {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 6px;
color: var(--tkrvue-accent);
background: transparent;
cursor: pointer;
}
.preferences-detail-toggle:hover {
background: var(--tkrvue-sidebar-hover-bg);
}
.preferences-detail-toggle svg {
width: 16px;
height: 16px;
}
.preferences-toggle-item .preferences-item-detail {
grid-column: 1 / -1;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.25;
padding: 1px 4px 4px 26px;
}
.preferences-toggle-item.is-disabled {
opacity: 0.66;
cursor: not-allowed;
}
.preferences-toggle-item.is-disabled input,
.preferences-toggle-item.is-disabled span,
.preferences-toggle-item.is-disabled small {
cursor: not-allowed;
}
.preferences-display-user {
display: grid;
gap: 7px;
margin-top: 9px;
padding: 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
}
.preferences-range-row {
display: grid;
grid-template-columns: 82px minmax(100px, 1fr) 44px;
align-items: center;
gap: 8px;
}
.preferences-range-row input[type="range"] {
width: 100%;
accent-color: var(--tkrvue-accent);
}
.preferences-range-row output {
color: var(--tkrvue-layer-text);
font-weight: 700;
text-align: right;
white-space: nowrap;
}
.preferences-font-row {
grid-template-columns: 82px minmax(0, 1fr) 36px;
padding: 0;
font-size: var(--tkrvue-font-size-md);
}
.preferences-font-row select,
.preferences-map-refresh-row select {
width: 100%;
min-height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
font-family: inherit;
font-size: inherit;
}
.preferences-select-row.preferences-map-refresh-row {
grid-template-columns: max-content minmax(0, 1fr);
padding: 0;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.preferences-map-refresh-row > span {
white-space: nowrap;
}
.preferences-reset-display {
width: 36px !important;
min-width: 36px !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 !important;
text-align: center !important;
justify-self: end;
align-self: center;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.preferences-reset-display svg {
width: 20px;
height: 20px;
}
.preferences-select-row {
display: grid;
grid-template-columns: 64px 1fr;
align-items: center;
gap: 8px;
font-size: var(--tkrvue-font-size-md);
padding: 0 2px 2px;
}
.preferences-select-row.preferences-font-row {
grid-template-columns: 82px minmax(0, 1fr) 36px;
}
.preferences-language-select {
position: relative;
min-width: 0;
}
#preferencesLanguageButton {
width: 100%;
height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
#preferencesLanguageLabel {
flex: 1;
text-align: left;
}
.preferences-language-caret {
color: var(--tkrvue-muted);
font-size: 11px;
}
.preferences-language-options {
position: absolute;
z-index: 2300;
top: calc(100% + 4px);
left: 0;
right: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
box-shadow: 0 12px 26px rgba(15,23,42,0.22);
padding: 4px;
}
.preferences-language-option {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 30px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--tkrvue-input-text);
cursor: pointer;
padding: 0 8px;
}
.preferences-language-option:hover,
.preferences-language-option.active {
background: var(--tkrvue-sidebar-hover-bg);
color: var(--tkrvue-active-text);
}
.flag-icon {
width: 20px;
height: 12px;
display: inline-block;
flex: 0 0 auto;
align-self: center;
border: 1px solid rgba(15,23,42,0.28);
border-radius: 2px;
box-shadow: 0 1px 2px rgba(15,23,42,0.18);
background-size: cover;
background-position: center;
vertical-align: middle;
transform: translateY(1px);
}
.flag-fr {
background: linear-gradient(90deg, #002395 0 33.333%, #fff 33.333% 66.666%, #ed2939 66.666% 100%);
}
.flag-en {
background:
linear-gradient(34deg, transparent 0 42%, #fff 42% 48%, #c8102e 48% 52%, #fff 52% 58%, transparent 58%),
linear-gradient(146deg, transparent 0 42%, #fff 42% 48%, #c8102e 48% 52%, #fff 52% 58%, transparent 58%),
linear-gradient(90deg, transparent 0 38%, #fff 38% 45%, #c8102e 45% 55%, #fff 55% 62%, transparent 62%),
linear-gradient(0deg, transparent 0 34%, #fff 34% 43%, #c8102e 43% 57%, #fff 57% 66%, transparent 66%),
#012169;
}
.flag-es {
background: linear-gradient(180deg, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}
.flag-de {
background: linear-gradient(180deg, #000 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666% 100%);
}
.flag-pl {
background: linear-gradient(180deg, #fff 0 50%, #dc143c 50% 100%);
}
.flag-it {
background: linear-gradient(90deg, #009246 0 33.333%, #fff 33.333% 66.666%, #ce2b37 66.666% 100%);
}
.flag-pt {
background: linear-gradient(90deg, #006600 0 40%, #ff0000 40% 100%);
}
.flag-nl {
background: linear-gradient(180deg, #ae1c28 0 33.333%, #fff 33.333% 66.666%, #21468b 66.666% 100%);
}
.flag-sv {
background: linear-gradient(90deg, transparent 0 28%, #fecc00 28% 40%, transparent 40%), linear-gradient(180deg, #006aa7 0 40%, #fecc00 40% 55%, #006aa7 55%);
}
.flag-cs {
background: linear-gradient(180deg, #fff 0 50%, #d7141a 50% 100%);
}
.flag-da {
background: linear-gradient(90deg, transparent 0 30%, #fff 30% 42%, transparent 42%), linear-gradient(180deg, #c60c30 0 42%, #fff 42% 58%, #c60c30 58%);
}
.flag-no {
background: linear-gradient(90deg, transparent 0 30%, #fff 30% 42%, #00205b 42% 50%, #fff 50% 58%, transparent 58%), linear-gradient(180deg, #ba0c2f 0 36%, #fff 36% 44%, #00205b 44% 56%, #fff 56% 64%, #ba0c2f 64%);
}
.flag-fi {
background: linear-gradient(90deg, transparent 0 32%, #002f6c 32% 46%, transparent 46%), linear-gradient(180deg, #fff 0 38%, #002f6c 38% 58%, #fff 58%);
}
.flag-sk {
background: linear-gradient(180deg, #fff 0 33.333%, #0b4ea2 33.333% 66.666%, #ee1c25 66.666% 100%);
}
.flag-hu {
background: linear-gradient(180deg, #ce2939 0 33.333%, #fff 33.333% 66.666%, #477050 66.666% 100%);
}
.flag-ro {
background: linear-gradient(90deg, #002b7f 0 33.333%, #fcd116 33.333% 66.666%, #ce1126 66.666% 100%);
}
.flag-bg {
background: linear-gradient(180deg, #fff 0 33.333%, #00966e 33.333% 66.666%, #d62612 66.666% 100%);
}
.flag-el {
background: repeating-linear-gradient(180deg, #0d5eaf 0 11.111%, #fff 11.111% 22.222%);
}
.flag-tr {
background: #e30a17;
}
.flag-uk {
background: linear-gradient(180deg, #0057b7 0 50%, #ffd700 50% 100%);
}
.flag-ru {
background: linear-gradient(180deg, #fff 0 33.333%, #0039a6 33.333% 66.666%, #d52b1e 66.666% 100%);
}
.flag-ar {
background: linear-gradient(180deg, #006c35 0 100%);
}
.flag-he {
background: linear-gradient(180deg, #fff 0 18%, #0038b8 18% 30%, #fff 30% 70%, #0038b8 70% 82%, #fff 82%);
}
.flag-hi {
background: linear-gradient(180deg, #ff9933 0 33.333%, #fff 33.333% 66.666%, #138808 66.666% 100%);
}
.flag-zh {
background: #de2910;
}
.flag-ja {
background: radial-gradient(circle at 50% 50%, #bc002d 0 28%, transparent 30%), #fff;
}
.flag-ko {
background: radial-gradient(circle at 50% 50%, #cd2e3a 0 26%, #0047a0 27% 44%, transparent 45%), #fff;
}
.flag-id {
background: linear-gradient(180deg, #ce1126 0 50%, #fff 50% 100%);
}
.flag-th {
background: linear-gradient(180deg, #a51931 0 16%, #fff 16% 30%, #2d2a4a 30% 70%, #fff 70% 84%, #a51931 84% 100%);
}
.flag-vi {
background: #da251d;
}
.preferences-menu button:not(.tkrvue-close-button):hover,
.preferences-menu button:not(.tkrvue-close-button).active {
background: var(--tkrvue-sidebar-hover-bg);
color: var(--tkrvue-active-text);
}
/*Menu*/
.menu-section {
margin-bottom: 6px;
border-radius: 6px;
overflow: visible; /* ?? FIX */
}
.menu-section h4 {
margin: 0;
padding: 10px 12px;
background: transparent;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
color: var(--tkrvue-sidebar-text);
gap: 8px;
letter-spacing: 0.2px;
transition: all 0.15s ease;
}
.menu-section h4:hover {
background: var(--tkrvue-sidebar-hover-bg);
transform: translateX(2px);
}
/* icône droite */
/*
.menu-section h4::after {
content: ">";
font-size: 14px;
color: #999;
transition: transform 0.2s ease;
}
*/
/* chevron moderne SVG */
/* chevron moderne SVG */
.menu-section h4::after {
content: "";
width: 14px;
height: 14px;
margin-left: auto;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
opacity: 0.6;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-section:hover h4::after {
opacity: 1;
}
.menu-section.open h4 {
background: var(--tkrvue-sidebar-active-bg);
}
/* rotation quand ouvert */
.menu-section.open h4::after {
/*transform: rotate(90deg);*/
transform: rotate(90deg) translateX(1px);
}
/* items */
.menu-items div {
padding: 8px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.menu-items div.active-item {
background: var(--tkrvue-sidebar-active-bg);
color: var(--tkrvue-active-text);
font-weight: 600;
border-left: 3px solid #4a6cf7;
}
/* icône */
.menu-items .icon {
min-width: 20px;
text-align: center;
}
/* mode collapsed */
#sidebar.collapsed .menu-section > h4 .label,
#sidebar.collapsed .menu-section > h4::after {
display: none;
}
#sidebar.collapsed .menu-section > h4 .icon {
min-width: 24px;
text-align: center;
font-size: 18px;
}
.menu-items div:hover {
background: var(--tkrvue-sidebar-hover-bg);
}
/* icône droite item */
.menu-items div::after {
content: ">";
margin-left: auto;
color: #bbb;
font-size: 14px;
}
/* Hiérarchie visuelle menu / sous-menu / sous-sous-menu */
#sidebar .menu-section h4 {
font-size: var(--tkrvue-font-size-md);
font-weight: 650;
letter-spacing: 0;
}
#sidebar .menu-items div.menu-item {
min-height: 34px;
margin: 2px 4px 2px 14px;
padding: 6px 8px 6px 12px;
justify-content: flex-start;
gap: 8px;
border-left: 2px solid transparent;
border-radius: 6px;
color: color-mix(in srgb, var(--tkrvue-sidebar-text) 82%, transparent);
font-size: var(--tkrvue-font-size-sm);
font-weight: 450;
line-height: 1.2;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
:root.sidebar-compact #sidebar .menu-section h4 {
min-height: 28px;
padding-top: 4px;
padding-bottom: 4px;
font-size: var(--tkrvue-font-size-md);
}
:root.sidebar-compact #sidebar .menu-items div.menu-item {
min-height: 28px;
margin-top: 1px;
margin-bottom: 1px;
padding-top: 3px;
padding-bottom: 3px;
font-size: var(--tkrvue-font-size-sm);
line-height: 1.15;
}
:root.sidebar-compact #sidebar .menu-items div.menu-depth-2 {
font-size: var(--tkrvue-font-size-sm);
}
:root.sidebar-compact #sidebar .menu-items div.menu-depth-3 {
font-size: var(--tkrvue-font-size-xs);
}
#sidebar .menu-items div.menu-depth-2 {
margin-left: 28px;
font-size: var(--tkrvue-font-size-xs);
font-weight: 430;
}
#sidebar .menu-items div.menu-depth-3 {
margin-left: 42px;
font-size: var(--tkrvue-font-size-xs);
font-weight: 420;
}
#sidebar .menu-items div.menu-item.submenu-hidden {
display: none;
}
#sidebar .menu-items div.menu-item:hover {
color: var(--tkrvue-sidebar-text);
transform: translateX(1px);
}
#sidebar .menu-items div.menu-item.active-item {
border-left-color: var(--tkrvue-accent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tkrvue-accent) 14%, transparent);
font-weight: 650;
}
#sidebar .menu-items div.superadmin-menu-item {
border-left-color: #7c3aed;
background: color-mix(in srgb, #7c3aed 8%, var(--tkrvue-sidebar-bg));
}
#sidebar .menu-items div.superadmin-menu-item.active-item {
border-left-color: #7c3aed;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #7c3aed 22%, transparent);
}
#sidebar .menu-items div.superadmin-menu-item .icon {
width: 18px;
min-width: 18px;
height: 18px;
border-radius: 999px;
background: transparent;
color: #b45309;
box-shadow: none;
font-size: 12px;
}
:root[data-theme="dark"] #sidebar .menu-items div.superadmin-menu-item .icon {
background: transparent;
color: #fde68a;
box-shadow: none;
}
.superadmin-menu-badge {
margin-left: auto;
padding: 2px 6px;
border-radius: 999px;
background: #ede9fe;
color: #5b21b6;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
:root[data-theme="dark"] .superadmin-menu-badge {
background: rgba(196,181,253,0.18);
color: #ddd6fe;
}
.sidebar-footer {
margin-top: auto;
padding: 12px 6px 2px;
border-top: 1px solid var(--tkrvue-border);
display: grid;
gap: 6px;
color: color-mix(in srgb, var(--tkrvue-sidebar-text) 72%, transparent);
font-size: 11px;
line-height: 1.35;
}
.server-suffix-badge {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 3px 7px;
border: 1px solid rgba(124,58,237,0.32);
border-radius: 999px;
background: rgba(124,58,237,0.12);
color: var(--tkrvue-sidebar-text);
font-size: 10.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-copyright {
color: inherit;
white-space: nowrap;
}
.session-countdown {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
box-sizing: border-box;
padding: 4px 7px;
border: 1px solid color-mix(in srgb, var(--tkrvue-sidebar-text) 22%, transparent);
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-sidebar-text) 7%, transparent);
color: var(--tkrvue-sidebar-text);
white-space: nowrap;
}
.session-countdown-ring {
position: relative;
width: 44px;
height: 44px;
flex: 0 0 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.session-countdown-ring svg {
width: 44px;
height: 44px;
transform: rotate(-90deg);
}
.session-countdown-ring-bg,
.session-countdown-ring-fg {
fill: none;
stroke-width: 3;
}
.session-countdown-ring-bg {
stroke: color-mix(in srgb, var(--tkrvue-sidebar-text) 18%, transparent);
}
.session-countdown-ring-fg {
stroke: var(--tkrvue-accent);
stroke-linecap: round;
stroke-dasharray: 56.55;
stroke-dashoffset: 56.55;
transition: stroke-dashoffset 0.35s ease, stroke 0.16s ease;
}
.session-countdown-ring-label {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tkrvue-sidebar-text);
font-family: Consolas, monospace;
font-size: 8.5px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
transform: translateY(0.5px);
pointer-events: none;
}
.session-countdown strong {
font-family: Consolas, monospace;
font-size: 12px;
letter-spacing: 0;
}
.session-countdown.warning {
border-color: #f59e0b;
background: rgba(245,158,11,0.14);
}
.session-countdown.warning .session-countdown-ring-fg {
stroke: #f59e0b;
}
.session-countdown.danger {
border-color: #ef4444;
background: rgba(239,68,68,0.14);
color: #b91c1c;
}
.session-countdown.danger .session-countdown-ring-fg {
stroke: #ef4444;
}
:root[data-theme="dark"] .session-countdown.danger {
color: #fecaca;
}
#sidebar.collapsed .sidebar-footer {
display: none;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
.sidebar-footer {
color: var(--tkrvue-sidebar-text);
}
}
#sidebar .menu-items .icon {
min-width: 18px;
font-size: 13px;
opacity: 0.92;
}
/* Les icônes vectorielles du menu reprennent le trait fin et les couleurs TrackerVue. */
#sidebar .menu-section > h4 .icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
min-width: 18px;
height: 18px;
flex: 0 0 18px;
}
#sidebar .menu-section > h4 .icon svg,
#sidebar .menu-items .icon svg {
display: block;
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
#sidebar .menu-section[data-section-code="help"] > h4 .icon {
color: #f43f5e;
}
#sidebar .menu-items div[data-action="help.docs"] .icon { color: #3b82f6; }
#sidebar .menu-items div[data-action="help.tutorial"] .icon { color: #8b5cf6; }
#sidebar .menu-items div[data-action="help.tips"] .icon { color: #f59e0b; }
#sidebar .menu-items div[data-action="help.panel"] .icon { color: #0ea5e9; }
#sidebar .menu-items div[data-action="help.faq"] .icon { color: #ec4899; }
#sidebar .menu-items div[data-action="help.release_notes"] .icon { color: #14b8a6; }
#sidebar .menu-items .label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
#sidebar .menu-items div.menu-item::after {
color: color-mix(in srgb, var(--tkrvue-sidebar-text) 48%, transparent);
font-size: 12px;
line-height: 1;
}
#sidebar .menu-items div.menu-item:not(.has-child-items)::after {
content: "";
width: 13px;
margin-left: auto;
}
#sidebar .menu-items div.menu-item.has-child-items::after {
content: "";
width: 13px;
height: 13px;
margin-left: auto;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 13px;
transition: transform 0.18s ease, opacity 0.18s ease;
opacity: 0.78;
}
#sidebar .menu-items div.menu-item.has-child-items.submenu-open::after {
transform: rotate(90deg);
opacity: 1;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
#sidebar .menu-items div.menu-item {
color: var(--tkrvue-sidebar-text);
}
#sidebar .menu-items div.superadmin-menu-item {
background: var(--tkrvue-sidebar-hover-bg);
}
}
#sidebar.collapsed .menu-items div.menu-item {
margin: 4px;
padding: 8px;
justify-content: center;
border-left: 0;
}
#sidebar.collapsed .superadmin-menu-badge {
display: none;
}
/* Notification globale : visible en haut de la carte ; lorsqu'une layer est
ouverte, le script la replace juste sous son en-tête. */
#menuMessageZone {
position: absolute;
left: 50%;
top: 12px;
z-index: 32050;
display: flex;
align-items: center;
gap: 10px;
width: max-content;
max-width: min(720px, calc(100% - 32px));
min-height: 46px;
max-height: min(40vh, 280px);
padding: 8px 8px 8px 14px;
margin: 0;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 48%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-accent);
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-message-bg) 96%, transparent);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.24);
backdrop-filter: blur(8px);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
color: var(--tkrvue-message-text);
box-sizing: border-box;
overflow: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -24px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
#menuMessageZone.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
transition-delay: 0s;
}
#menuMessageZone.in-view-layer {
position: relative;
left: auto;
top: auto;
z-index: 12;
width: auto;
max-width: none;
min-height: 38px;
max-height: 180px;
margin: 8px 12px 0;
padding: 6px 7px 6px 10px;
transform: translateY(-10px);
box-shadow: 0 5px 16px rgba(15, 23, 42, 0.14);
}
#menuMessageZone.in-view-layer.active {
transform: translateY(0);
}
#menuMessageZone.in-view-layer:not(.active) {
display: none;
}
#menuMessageZone[data-intent="success"] { border-left-color: var(--tkrvue-success, #168653); }
#menuMessageZone[data-intent="warning"] { border-left-color: var(--tkrvue-warning, #d97706); }
#menuMessageZone[data-intent="error"] { border-left-color: var(--tkrvue-danger, #dc2626); }
.menu-message-icon {
display: inline-flex;
flex: 0 0 18px;
color: var(--tkrvue-accent);
}
.menu-message-icon svg { width: 18px; height: 18px; }
#menuMsgText {
flex: 1 1 auto;
min-width: 0;
line-height: 1.4;
overflow: visible;
overflow-wrap: anywhere;
}
#menuMsgClose {
flex: 0 0 auto;
margin: 0;
align-self: center;
}
.menu-message-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 0 0 12px;
vertical-align: middle;
white-space: nowrap;
}
.menu-message-action svg {
width: 16px;
height: 16px;
flex: 0 0 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.trip-replay-closed-copy {
font-weight: 600;
}
#tripReplayUndoClose {
min-height: 36px;
border-radius: 9px;
padding-inline: 12px;
}
@media (max-width: 900px) {
#menuMessageZone {
top: max(8px, env(safe-area-inset-top));
width: calc(100% - 24px);
max-width: calc(100% - 24px);
align-items: flex-start;
padding-left: 12px;
}
#menuMessageZone.in-view-layer {
top: auto;
width: auto;
max-width: none;
margin: 6px 8px 0;
}
.menu-message-action {
margin-top: 8px;
margin-left: 0;
}
#tripReplayUndoClose {
width: 100%;
min-height: 42px;
}
}
/* titre */
#titleBlock {
display: flex;
align-items: baseline;
gap: 8px;
}
#appTitle {
font-size: 20px; /* ?? plus gros */
font-weight: bold;
}
#breadcrumb {
font-size: 13px;
color: var(--tkrvue-muted);
}
/* css mode réduit*/
#menuToggle {
font-size: 18px;
cursor: pointer;
border: none;
background: transparent;
}
/* sidebar réduite */
/* SIDEBAR BASE */
#sidebar {
width: 250px;
min-width: 120px;
background: var(--tkrvue-sidebar-bg);
color: var(--tkrvue-sidebar-text);
padding: 10px;
box-sizing: border-box;
border-right: 2px solid var(--tkrvue-border);
transition: width 0.25s ease;
z-index: 1000; /* ?? clé */
overflow: visible; /* ?? important */
}
/* MODE COLLAPSED */
#sidebar.collapsed {
width: 44px; /* ?? plus compact */
padding: 4px 0;
min-width: unset; /* ?? IMPORTANT */
overflow: visible; /* ?? important pour hover */
}
#sidebar.collapsed h4 {
display: flex;
justify-content: center;
align-items: center;
}
/* OPEN */
.menu-section.open h4 {
background: var(--tkrvue-sidebar-active-bg);
}
.menu-section.open h4::after {
transform: rotate(90deg);
}
/* état ouvert */
.menu-section.open > .menu-items {
display: block !important;
}
/* MENU ITEMS NORMAL */
.menu-items {
display: none;
padding: 6px 6px 6px 8px;
background: transparent;
}
/* ITEMS */
.menu-items div {
padding: 8px 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
border-radius: 6px;
transition: all 0.15s ease;
font-size: 14px;
}
/* HOVER ITEM */
.menu-items div:hover {
background: var(--tkrvue-sidebar-hover-bg);
transform: translateX(2px);
}
/* CHEVRON */
.menu-items div::after {
content: "->";
margin-left: auto;
color: var(--tkrvue-muted);
}
/* ========================= */
/* ?? MODE COLLAPSED CLEAN */
/* ========================= */
/* section en mode collapsed */
#sidebar.collapsed .menu-section {
position: relative;
display: block; /* ?? FIX MAJEUR */
}
/* TITRE -> icône seulement */
#sidebar.collapsed h4 {
padding: 10px 0;
justify-content: center;
font-size: 0;
background: transparent; /* ?? supprime fond */
}
/* icône visible */
#sidebar.collapsed h4::before {
content: attr(data-icon);
font-size: 18px;
}
/* cacher flèche */
#sidebar.collapsed h4::after {
display: none;
}
/* ITEMS -> flottant */
#sidebar.collapsed .menu-items {
display: none;
position: fixed;
left: 44px;
background: var(--tkrvue-sidebar-bg);
color: var(--tkrvue-sidebar-text);
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
min-width: 180px;
z-index: 2000; /* ?? au-dessus de la carte */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
opacity: 1;
transition: opacity 7s linear; /* ?? 7 secondes */
}
/* fade-out */
#sidebar.collapsed .menu-items.fade-out {
opacity: 0;
}
/* ?? position dynamique */
#sidebar.collapsed .menu-section:hover {
z-index: 1001;
}
/* cacher labels */
#sidebar.collapsed .label {
display: none;
}
#sidebar.collapsed .menu-items div.no-submenu {
justify-content: flex-start;
gap: 8px;
}
/* ? afficher label si PAS de sous-menu */
#sidebar.collapsed .menu-items div.no-submenu .label {
display: inline;
}
/* ? désactiver tooltip dans ce cas */
#sidebar.collapsed .menu-items div.no-submenu::after {
display: none;
}
/* ========================= */
/* TOOLTIP */
/* ========================= */
#sidebar.collapsed .menu-items div {
position: relative;
justify-content: flex-start; /* items centrés */
height: 32px;
}
#sidebar.collapsed .menu-items div:not(.no-submenu)::after {
content: attr(data-label);
position: absolute;
left: 65px;
top: 50%;
transform: translateY(-50%);
background: var(--tkrvue-sidebar-bg);
color: var(--tkrvue-sidebar-text);
padding: 5px 10px;
font-size: 12px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s;
pointer-events: none;
}
#sidebar:not(.collapsed) .menu-items div::after {
content: ">";
}
#sidebar.collapsed .menu-items div:hover {
background: var(--tkrvue-sidebar-hover-bg);
border-radius: 4px;
}
#sidebar.collapsed .menu-items div:hover::after {
opacity: 1;
visibility: visible;
}
/* mode collapsed + pas de sous-menu */
#sidebar.collapsed .menu-section.no-submenu h4 {
font-size: 13px; /* réaffiche le texte */
justify-content: flex-start;
padding-left: 8px;
gap: 6px;
cursor: pointer;
}
/* garder icône + texte */
#sidebar.collapsed .menu-section.no-submenu h4::before {
content: attr(data-icon);
font-size: 16px;
margin-right: 6px;
}
/* ========================= */
/* 🔥 DEBUG BOX BONUS */
/* ========================= */
/* texte plus lisible */
#msgText {
cursor: text;
margin: 0;
margin-left: 0;
margin-top: 5px;
word-break: break-word;
font-family: monospace;
font-size: 12px;
overflow: auto;
min-height: 60px;
user-select: text; /* 🔥 autorise sélection */
flex: 1;
min-height: 0; /* 🔥 CRITIQUE */
}
/* Dossier véhicule : synthèse carburant CAN avec repli sur les pleins issus des justificatifs. */
.fleet-import-fuel-note {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 14px 14px;
padding: 12px 14px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
color: var(--tkrvue-muted);
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
}
.fleet-import-fuel-note > span { flex: 1 1 auto; }
.fleet-import-fuel-note > .secondary-action { flex: 0 0 auto; }
.fleet-import-fuel-detected {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 14px 14px 0;
padding: 12px 14px;
border: 1px solid var(--tkrvue-status-success-border);
border-radius: var(--tkrvue-radius, 10px);
background: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
}
.fleet-import-fuel-detected > span { display: grid; gap: 3px; min-width: 0; }
.fleet-import-fuel-detected small { color: inherit; opacity: .86; }
.fleet-import-fuel-detected svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; }
.fleet-import-fuel-consistency {
display: flex;
align-items: center;
min-height: var(--tkrvue-control-height, 36px);
padding: 8px 10px;
border: 1px dashed var(--tkrvue-border);
border-radius: var(--tkrvue-radius-sm, 7px);
background: var(--tkrvue-layer-section-bg);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.fleet-import-fuel-note svg,
.vehicle-dossier-fuel summary svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
.vehicle-dossier-fuel-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px;
border-bottom: 1px solid var(--tkrvue-border);
}
.vehicle-dossier-fuel-summary > div {
display: flex;
align-items: baseline;
gap: 12px;
}
.vehicle-dossier-fuel-summary strong {
font-size: clamp(1.15rem, 2vw, 1.65rem);
color: var(--tkrvue-accent);
}
.vehicle-dossier-fuel-summary span,
.vehicle-dossier-fuel-summary small,
.vehicle-dossier-fuel-row small,
.vehicle-dossier-fuel-document span {
color: var(--tkrvue-muted);
}
.vehicle-dossier-fuel-modes {
display: flex;
gap: 8px;
padding: 10px 14px 0;
}
.vehicle-dossier-fuel-list {
padding: 10px 14px 14px;
}
.vehicle-dossier-fuel-row {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(140px, auto) auto;
align-items: center;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--tkrvue-border);
}
.vehicle-dossier-fuel-row > span,
.vehicle-dossier-fuel-document {
display: flex;
flex-direction: column;
gap: 3px;
}
.vehicle-dossier-fuel-document {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-color, #dfe6ed);
}
@media (max-width: 760px) {
.vehicle-dossier-fuel-summary,
.vehicle-dossier-fuel-summary > div {
align-items: flex-start;
flex-direction: column;
}
.vehicle-dossier-fuel-row {
grid-template-columns: 1fr;
}
}
/* Administration > Utilisateurs */
.user-management-layer .view-body {
display: block;
container-type: inline-size;
color: var(--tkrvue-layer-text);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
line-height: 1.35;
}
.user-management-layer .view-body :where(button, input, select, textarea) {
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.user-management-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 10px 0 8px;
padding: 9px 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.user-management-organization-select,
.user-management-toolbar label,
.user-management-form-grid label,
.user-management-import-confirm label {
display: grid;
gap: 5px;
min-width: 0;
}
.user-management-organization-select span,
.user-management-toolbar label > span,
.user-management-form-grid label > span,
.user-management-import-confirm label > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.user-management-organization-select select {
min-width: min(360px, 70vw);
}
.user-management-organization-label {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 6%, var(--tkrvue-input-bg));
color: var(--tkrvue-layer-text);
font-weight: 700;
}
.metric-row.user-management-metrics {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
margin: 0 0 10px;
}
.user-management-metrics .metric {
min-width: 0;
}
.user-management-toolbar {
display: grid;
grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(145px, 1fr)) auto auto;
gap: 10px;
align-items: end;
margin: 10px 0 12px;
padding: 10px 12px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
}
.user-management-toolbar input,
.user-management-toolbar select,
.user-management-form-grid input,
.user-management-form-grid select,
.user-management-import-confirm select {
width: 100%;
min-width: 0;
height: 34px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
font: inherit;
}
.user-management-form-grid .user-management-language-picker {
width: 100%;
min-width: 0;
}
.user-management-form-grid .user-management-language-picker .menu-language-button {
width: 100%;
min-width: 0;
height: 34px;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.user-management-form-grid .user-management-language-picker .preferences-language-caret {
flex: 0 0 14px;
width: 14px;
color: var(--tkrvue-input-text);
font-size: 14px;
line-height: 1;
text-align: center;
}
.user-management-form-grid .user-management-language-picker .menu-language-option {
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.user-management-form-grid .user-management-language-picker .menu-language-button:disabled {
background: color-mix(in srgb, var(--tkrvue-border) 62%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
cursor: default;
opacity: 1;
}
.user-management-table-card,
.user-management-form-card,
.user-management-detail-card {
overflow: hidden;
margin: 12px 0;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
}
.user-management-form-card,
.user-management-detail-card {
padding: 14px;
}
.user-management-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 42px;
padding: 0 12px;
border-bottom: 1px solid var(--tkrvue-border);
color: var(--tkrvue-layer-text);
}
.user-management-form-card > .user-management-card-head,
.user-management-detail-card > .user-management-card-head {
margin: -14px -14px 14px;
}
.user-management-card-head > div {
display: grid;
gap: 3px;
}
.user-management-card-head span,
.user-management-table td small {
display: block;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.user-management-card-head > strong {
font-size: var(--tkrvue-font-size-md);
line-height: 1.25;
}
.user-management-form-card > p,
.user-management-detail-card > p,
.user-management-empty-note {
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
line-height: 1.4;
}
.user-management-card-head .user-management-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
min-width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 40%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.user-management-premium-profile {
margin: 12px 0;
padding: 12px;
border: 1px solid color-mix(in srgb, #7c3aed 38%, var(--tkrvue-border));
border-left: 4px solid #7c3aed;
border-radius: 10px;
background: color-mix(in srgb, #7c3aed 9%, var(--tkrvue-layer-bg));
}
.user-management-premium-profile > .superadmin-notice {
margin-bottom: 12px;
}
.user-management-premium-profile .user-management-premium-card {
border-color: color-mix(in srgb, #7c3aed 28%, var(--tkrvue-border));
background: color-mix(in srgb, #7c3aed 4%, var(--tkrvue-layer-surface-bg));
}
:root[data-theme="dark"] .user-management-premium-profile {
border-color: rgba(196,181,253,0.42);
border-left-color: #a78bfa;
background: rgba(124,58,237,0.13);
}
:root[data-theme="dark"] .user-management-card-head .user-management-card-icon {
border-color: color-mix(in srgb, var(--tkrvue-accent) 58%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-layer-surface-bg));
}
.user-management-layer .user-management-table-wrap {
max-height: min(58vh, 650px);
border: 0;
border-radius: 0;
}
.user-management-layer .data-table {
min-width: 860px;
font-size: inherit;
}
.user-management-layer .data-table th,
.user-management-layer .data-table td {
padding: 8px 9px;
}
.user-management-layer .data-table tbody tr {
cursor: default;
}
.user-management-layer .data-table tbody tr.user-management-openable-row {
cursor: pointer;
}
.user-management-layer .user-management-table td,
.user-management-layer .user-management-table th {
vertical-align: middle;
}
.user-management-pagination,
.user-management-actions,
.user-management-import-actions,
.user-management-import-confirm,
.user-management-row-actions,
.user-management-locked-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
}
.user-management-pagination {
justify-content: center;
padding: 10px;
border-top: 1px solid var(--tkrvue-border);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.tkrvue-table-pagination {
justify-content: center;
column-gap: 14px;
row-gap: 8px;
flex-wrap: wrap;
}
.tkrvue-table-pagination-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.user-management-create-grid,
.user-management-security-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.user-management-create-grid.is-single {
grid-template-columns: minmax(0, 1fr);
}
.user-management-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.user-management-form-grid .user-management-checkbox {
display: flex;
align-items: center;
align-self: end;
min-height: 38px;
}
.user-management-form-grid .user-management-checkbox input {
width: auto;
min-height: 0;
}
.user-management-gsm-public-profile {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, max-content));
gap: 10px 14px;
align-items: center;
min-width: 0;
padding: 10px 0 2px;
border-top: 1px solid var(--tkrvue-border);
}
.user-management-gsm-public-profile > div {
display: grid;
gap: 2px;
min-width: 0;
}
.user-management-gsm-public-profile strong {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
}
.user-management-gsm-public-profile small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.user-management-gsm-public-profile label {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
color: var(--tkrvue-layer-text);
}
.user-management-gsm-public-profile input {
width: auto;
min-width: 16px;
min-height: 16px;
}
.user-management-file-action {
position: relative;
cursor: pointer;
}
.user-management-file-action input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.user-management-empty-note {
margin: 10px 0;
padding: 10px 12px;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-border) 35%, transparent);
color: var(--tkrvue-muted);
}
.user-management-import-summary,
.user-management-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0;
}
.user-management-import-summary span,
.user-management-badges span {
padding: 7px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-input-bg) 75%, var(--tkrvue-accent) 5%);
}
.user-management-import-confirm {
justify-content: flex-end;
margin-top: 12px;
}
.user-management-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
gap: 18px;
}
.user-management-detail-grid h3 {
margin: 14px 0 8px;
}
.user-management-detail-state {
display: grid;
align-content: end;
justify-items: start;
gap: 7px;
min-height: 38px;
}
.user-management-detail-state > span:first-child {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.user-management-audit {
display: grid;
gap: 7px;
max-height: 260px;
overflow: auto;
}
.user-management-audit > div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 8px 10px;
border-bottom: 1px solid var(--tkrvue-border);
}
.user-management-audit span {
color: var(--tkrvue-muted);
white-space: nowrap;
}
.user-management-form-grid input:disabled,
.user-management-form-grid select:disabled {
background: color-mix(in srgb, var(--tkrvue-border) 62%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
opacity: 1;
}
.user-management-card-head > svg,
.user-management-card-icon svg,
.user-management-actions svg,
.user-management-import-actions svg,
.user-management-locked-list svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.user-management-assignment-badge {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 3px 8px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
white-space: nowrap;
}
button.user-management-assignment-badge.is-action {
font: inherit;
cursor: pointer;
}
button.user-management-assignment-badge.is-action:hover,
button.user-management-assignment-badge.is-action:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 16%, var(--tkrvue-layer-surface-bg));
}
button.user-management-assignment-badge.is-action:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 55%, transparent);
outline-offset: 2px;
}
.user-management-assignment-badge svg,
.user-management-section-icon svg,
.user-management-gsm-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.user-management-assignment-badge strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
min-height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--tkrvue-accent);
color: var(--tkrvue-accent-contrast, #fff);
font-size: var(--tkrvue-font-size-xs);
}
.user-management-empty-assignment {
color: var(--tkrvue-muted);
}
.user-management-detail-section {
overflow: hidden;
margin-top: 14px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 72%, var(--tkrvue-layer-surface-bg));
}
.user-management-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
padding: 8px 12px;
border-bottom: 1px solid var(--tkrvue-border);
}
.user-management-section-head > div,
.user-management-section-head > div > span:last-child {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.user-management-section-head > div > span:last-child {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
.user-management-section-head small {
color: var(--tkrvue-muted);
}
.user-management-section-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
.user-management-section-actions .secondary-action svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.user-management-section-icon,
.user-management-gsm-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.user-management-support-form {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto;
gap: 12px;
align-items: end;
padding: 12px;
}
.user-management-support-form label,
.user-management-gsm-toolbar label,
.user-management-gsm-reminder-toolbar label,
.user-management-gsm-period label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.user-management-support-form textarea,
.user-management-gsm-toolbar input,
.user-management-gsm-toolbar select,
.user-management-gsm-reminder-toolbar select,
.user-management-gsm-period input {
width: 100%;
min-width: 0;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
}
.user-management-support-form textarea {
min-height: 62px;
padding: 8px;
resize: vertical;
}
.user-management-gsm-toolbar {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(170px, 230px) minmax(105px, 135px) auto auto;
gap: 9px;
align-items: end;
padding: 12px;
}
.user-management-gsm-toolbar input,
.user-management-gsm-toolbar select,
.user-management-gsm-reminder-toolbar select,
.user-management-gsm-period input {
height: 34px;
padding: 0 8px;
}
.user-management-gsm-guidance {
margin: 0 12px 12px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-left: 3px solid var(--tkrvue-accent);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-card {
margin: 0 12px 12px;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.user-management-gsm-card-head {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 0 12px;
border-bottom: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-accent) 3%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-card.is-collapsed .user-management-gsm-card-head {
border-bottom-color: transparent;
}
.user-management-gsm-card-toggle {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 10px;
min-width: 0;
padding: 11px 0;
border: 0;
background: transparent;
color: var(--tkrvue-text);
font: inherit;
text-align: left;
cursor: pointer;
}
.user-management-gsm-card-toggle > span:last-child {
display: grid;
gap: 2px;
min-width: 0;
}
.user-management-gsm-card-toggle small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.4;
}
.user-management-gsm-card-toggle .context-help-chevron {
display: inline-grid;
flex: 0 0 20px;
width: 20px;
height: 20px;
place-items: center;
color: var(--tkrvue-accent);
transition: transform .16s ease;
}
.user-management-gsm-card-toggle .context-help-chevron svg {
width: 18px;
height: 18px;
}
.user-management-gsm-card.is-collapsed .user-management-gsm-card-toggle .context-help-chevron {
transform: rotate(-90deg);
}
.user-management-gsm-card-count {
flex: 0 0 auto;
padding: 4px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
white-space: nowrap;
}
.user-management-gsm-collapsible-body {
display: grid;
gap: 10px;
padding: 12px;
}
.user-management-gsm-collapsible-body[hidden] {
display: none;
}
.user-management-gsm-assignments > .user-management-gsm-collapsible-body {
gap: 0;
padding: 0;
}
.user-management-gsm-guidance > header,
.user-management-gsm-confirmation,
.user-management-gsm-permission-guide > span {
display: flex;
align-items: flex-start;
gap: 9px;
min-width: 0;
}
.user-management-gsm-guidance > header > span:last-child,
.user-management-gsm-confirmation > span,
.user-management-gsm-permission-guide > span > span {
display: grid;
gap: 2px;
min-width: 0;
}
.user-management-gsm-guidance small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.45;
}
.user-management-gsm-guidance-icon {
display: inline-grid;
flex: 0 0 34px;
width: 34px;
height: 34px;
place-items: center;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.user-management-gsm-guidance svg {
flex: 0 0 18px;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.user-management-gsm-confirmation {
padding: 8px 10px;
border: 1px solid color-mix(in srgb, #d97706 30%, var(--tkrvue-border));
border-radius: 7px;
background: color-mix(in srgb, #fef3c7 45%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-text);
}
.user-management-gsm-confirmation > svg {
margin-top: 1px;
color: #b45309;
}
.user-management-gsm-permission-guide {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.user-management-gsm-permission-guide > span {
padding: 8px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
}
.user-management-gsm-permission-guide > span > svg {
margin-top: 1px;
color: var(--tkrvue-accent);
}
.user-management-gsm-reminder-toolbar {
display: grid;
grid-template-columns: minmax(150px, 190px) minmax(150px, auto) minmax(190px, auto) minmax(230px, auto);
gap: 12px;
align-items: end;
margin: 0;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-reminder-toolbar > div {
display: grid;
gap: 3px;
min-width: 0;
}
.user-management-gsm-reminder-toolbar small {
color: var(--tkrvue-muted);
}
.user-management-gsm-reminder-all {
display: inline-flex !important;
grid-template-columns: none !important;
align-items: center;
gap: 6px !important;
min-height: 34px;
color: var(--tkrvue-text) !important;
white-space: nowrap;
}
.user-management-gsm-reminder-all input,
.user-management-gsm-reminder-choice input {
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--tkrvue-accent);
}
.user-management-gsm-summary {
align-self: center;
color: var(--tkrvue-muted);
white-space: nowrap;
}
.user-management-gsm-list {
display: grid;
gap: 8px;
padding: 0 12px 12px;
}
.user-management-gsm-row {
display: grid;
grid-template-columns: minmax(220px, 1.3fr) auto minmax(330px, 1.3fr) minmax(250px, 1fr) auto;
gap: 12px;
align-items: center;
padding: 9px 10px;
border: 1px solid var(--tkrvue-border);
border-left: 3px solid transparent;
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.user-management-gsm-row.is-assigned {
border-left-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-status {
display: grid;
gap: 6px;
justify-items: start;
}
.user-management-gsm-row-actions {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 36px;
}
.user-management-gsm-row-actions .tkrvue-icon-button {
width: 34px;
height: 34px;
}
.user-management-gsm-reminder-choice {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
white-space: nowrap;
}
.user-management-gsm-identity,
.user-management-gsm-permissions,
.user-management-gsm-period {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.user-management-gsm-identity > span:last-child {
display: grid;
gap: 2px;
min-width: 0;
}
.user-management-gsm-identity small {
overflow: hidden;
color: var(--tkrvue-muted);
text-overflow: ellipsis;
white-space: nowrap;
}
.user-management-gsm-contact {
display: flex;
align-items: baseline;
gap: 5px;
min-width: 0;
}
.user-management-gsm-contact > span:first-child {
flex: 0 0 auto;
font-weight: 600;
}
.user-management-gsm-contact > span:last-child {
overflow: hidden;
text-overflow: ellipsis;
}
.user-management-gsm-identity input,
.user-management-gsm-permissions input {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--tkrvue-accent);
}
.user-management-gsm-permissions {
flex-wrap: wrap;
}
.user-management-gsm-permissions label {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 30px;
padding: 4px 7px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
white-space: nowrap;
}
.user-management-gsm-permissions label:has(input:checked) {
border-color: color-mix(in srgb, var(--tkrvue-accent) 42%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-permissions label:has(input:disabled) {
opacity: .62;
}
.user-management-gsm-tracking-toggle {
min-height: 32px;
padding: 5px 9px;
}
.user-management-gsm-tracking-toggle svg,
.user-management-gsm-tracking-panel svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.user-management-gsm-tracking-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.user-management-gsm-tracking-panel {
display: grid;
grid-column: 1 / -1;
gap: 12px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-bg));
}
.user-management-gsm-tracking-panel[hidden] {
display: none;
}
.user-management-gsm-tracking-head,
.user-management-gsm-schedule-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.user-management-gsm-tracking-head > div {
display: grid;
gap: 3px;
}
.user-management-gsm-tracking-head small,
.user-management-gsm-privacy-options small {
color: var(--tkrvue-muted);
}
.user-management-gsm-policy-comparison {
display: grid;
gap: 3px;
padding: 9px 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-policy-comparison.is-same {
border-color: color-mix(in srgb, #138a55 35%, var(--tkrvue-border));
background: color-mix(in srgb, #138a55 7%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-policy-comparison.is-different {
border-color: color-mix(in srgb, #b96a00 42%, var(--tkrvue-border));
background: color-mix(in srgb, #b96a00 8%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-policy-comparison.is-hidden {
border-style: dashed;
background: color-mix(in srgb, var(--tkrvue-muted) 7%, var(--tkrvue-layer-surface-bg));
}
.user-management-gsm-policy-comparison small {
color: var(--tkrvue-muted);
}
.user-management-gsm-privacy-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.user-management-gsm-privacy-options > label {
display: flex;
align-items: flex-start;
gap: 9px;
min-width: 0;
padding: 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
}
.user-management-gsm-privacy-options > label > span {
display: grid;
gap: 2px;
min-width: 0;
}
.user-management-gsm-privacy-options input,
.user-management-gsm-days input {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin: 1px 0 0;
accent-color: var(--tkrvue-accent);
}
.user-management-gsm-schedule-head label,
.user-management-gsm-window > label {
display: grid;
gap: 4px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.user-management-gsm-schedule-head select,
.user-management-gsm-window input[type="time"] {
min-height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
}
.user-management-gsm-schedule-head select {
min-width: 190px;
padding: 0 8px;
}
.user-management-gsm-windows {
display: grid;
gap: 8px;
}
.user-management-gsm-window {
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(100px, 130px) minmax(100px, 130px) auto;
gap: 10px;
align-items: end;
padding: 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
}
.user-management-gsm-window input[type="time"] {
width: 100%;
padding: 0 7px;
box-sizing: border-box;
}
.user-management-gsm-days {
display: grid;
grid-template-columns: repeat(7, minmax(38px, 1fr));
gap: 5px;
}
.user-management-gsm-days label {
display: grid;
justify-items: center;
gap: 3px;
padding: 5px 3px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-xs);
}
.user-management-gsm-period {
display: grid;
grid-template-columns: repeat(2, minmax(105px, 1fr));
}
.user-management-gsm-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 12px 12px;
}
.user-management-gsm-footer .user-management-pagination {
padding: 0;
border: 0;
}
.support-session-banner {
z-index: 3500;
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 6px 12px;
border-bottom: 1px solid color-mix(in srgb, #d97706 55%, var(--tkrvue-border));
background: color-mix(in srgb, #f59e0b 18%, var(--tkrvue-header-bg));
color: var(--tkrvue-header-text);
box-sizing: border-box;
}
.support-session-banner.hidden {
display: none;
}
.support-session-banner-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: #b45309;
}
.support-session-banner-icon svg,
.support-session-banner button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.support-session-banner-copy {
display: grid;
flex: 1 1 auto;
gap: 1px;
min-width: 0;
}
.support-session-banner-copy small {
opacity: .82;
}
.support-session-banner button {
flex: 0 0 auto;
}
@media (max-width: 1420px) {
.user-management-gsm-row {
grid-template-columns: minmax(220px, 1fr) auto minmax(300px, 1fr) auto;
}
.user-management-gsm-period {
grid-column: 1 / -1;
}
}
@media (max-width: 1200px) {
.user-management-metrics { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.user-management-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-management-detail-grid { grid-template-columns: 1fr; }
.user-management-gsm-window { grid-template-columns: minmax(280px, 1fr) repeat(2, minmax(100px, 130px)) auto; }
.user-management-gsm-toolbar { grid-template-columns: minmax(240px, 1fr) minmax(170px, 230px) minmax(105px, 135px) auto; }
.user-management-gsm-toolbar .user-management-gsm-summary { grid-column: 1 / -1; }
.user-management-gsm-reminder-toolbar { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.user-management-gsm-permission-guide { grid-template-columns: 1fr; }
}
@container (max-width: 1050px) {
.user-management-metrics { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.user-management-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-management-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.user-management-heading { align-items: stretch; flex-direction: column; }
.user-management-organization-select select { min-width: 0; width: 100%; }
.user-management-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-management-toolbar,
.user-management-create-grid,
.user-management-security-grid,
.user-management-form-grid { grid-template-columns: 1fr; }
.user-management-toolbar .tkrvue-icon-button { width: 100%; }
.user-management-import-confirm { align-items: stretch; flex-direction: column; }
.user-management-import-confirm label { width: 100%; }
.user-management-detail-card { padding: 10px; }
.user-management-detail-card > .user-management-card-head { margin: -10px -10px 10px; }
.user-management-section-head,
.user-management-section-actions { align-items: stretch; flex-direction: column; }
.user-management-section-actions .secondary-action { width: 100%; justify-content: center; }
.user-management-support-form,
.user-management-gsm-toolbar,
.user-management-gsm-reminder-toolbar,
.user-management-gsm-row { grid-template-columns: 1fr; }
.user-management-gsm-card { margin-inline: 10px; }
.user-management-gsm-reminder-toolbar .secondary-action { width: 100%; justify-content: center; }
.user-management-gsm-period { grid-column: auto; }
.user-management-gsm-footer,
.support-session-banner { align-items: stretch; flex-direction: column; }
.user-management-gsm-tracking-head,
.user-management-gsm-schedule-head { align-items: stretch; flex-direction: column; }
.user-management-gsm-privacy-options,
.user-management-gsm-window { grid-template-columns: 1fr; }
.user-management-gsm-schedule-head select { width: 100%; min-width: 0; }
.user-management-gsm-window .tkrvue-icon-button { width: 100%; }
.support-session-banner { gap: 5px; }
.support-session-banner-icon { display: none; }
.support-session-banner button { width: 100%; }
}
@container (max-width: 620px) {
.user-management-heading { align-items: stretch; flex-direction: column; }
.user-management-organization-select select { min-width: 0; width: 100%; }
.user-management-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-management-toolbar,
.user-management-create-grid,
.user-management-security-grid,
.user-management-form-grid { grid-template-columns: 1fr; }
.user-management-toolbar .tkrvue-icon-button { width: 100%; }
.user-management-section-head,
.user-management-section-actions { align-items: stretch; flex-direction: column; }
.user-management-section-actions .secondary-action { width: 100%; justify-content: center; }
.user-management-layer .data-table { min-width: 720px; }
}
/* JSON propre */
#msgText pre {
font-size: 11px;
background: rgba(0,0,0,0.05);
padding: 6px;
border-radius: 4px;
display: block;
margin: 0;
white-space: pre-wrap; /* 🔥 évite débordement horizontal */
word-break: break-word;
max-height: none;
overflow: visible;
}
/* mode expand */
#msgText.expanded {
flex: 1;
background: rgba(0,0,0,0.03);
overflow: auto;
}
#msgText.expanded pre {
max-height: none !important;
}
/* bouton toggle */
.msg-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
width: 22px; /* 🔥 force largeur fixe */
height: 22px;
padding: 0; /* 🔥 évite variation visuelle */
line-height: 1;
font-size: 16px; /* 🔥 augmente légèrement */
font-weight: bold; /* 🔥 uniformise rendu */
border-radius: 4px;
cursor: pointer;
opacity: 0.7;
transform: none;
font-family: Arial, sans-serif; /* 🔥 stabilise rendu */
}
#globalMessage.collapsed .msg-toggle {
transform: rotate(-90deg);
}
.msg-toggle:hover {
opacity: 1;
}
.msg-toggle::after {
content: "";
display: inline-block;
width: 0;
}
.msg-actions-left span,
.msg-actions-right span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 22px; /* 🔥 remplace width */
height: 22px;
padding: 0 2px; /* 🔥 permet texte (ex: ✖ 5) */
font-size: 14px;
line-height: 1;
border-radius: 4px;
white-space: nowrap; /* 🔥 évite retour ligne */
}
.msg-actions-left span:hover,
.msg-actions-right span:hover {
background: rgba(0,0,0,0.08);
}
/* 🔥 MODE COLLAPSE */
#globalMessage.collapsed .msg-content {
height: auto !important;
min-height: unset;
resize: none; /* empêche resize en collapse */
padding-bottom: 6px;
}
#globalMessage.collapsed .msg-header {
margin-bottom: 0;
}
/* cache le contenu */
#globalMessage.collapsed #msgBody {
display: none;
}
/* option visuelle */
#globalMessage.collapsed {
max-height: none;
}
/* bouton clear */
.msg-clear {
top: 8px;
right: 30px;
cursor: pointer;
font-size: 14px;
opacity: 0.7;
right: 28px;
}
.msg-clear:hover {
opacity: 1;
}
.msg-reset {
cursor: pointer;
font-size: 14px;
opacity: 0.7;
}
.msg-reset:hover {
opacity: 1;
}
/* dock gauche */
#globalMessage.dock-left {
justify-content: flex-start;
left: 10px;
}
/* dock droite */
#globalMessage.dock-right {
justify-content: flex-end;
right: 10px;
}
#contextSelector {
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
#contextSelector:hover {
background: #e7ebf3;
}
/* BOX */
#userSelectorBox {
position: fixed;
top: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
}
.selector-content {
width: 320px;
max-height: 400px;
overflow: auto;
background: #EEF0D5;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
}
/* header */
.selector-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.selector-close {
cursor: pointer;
}
/* search */
#userSearch {
margin: 8px;
padding: 6px;
border-radius: 6px;
border: 1px solid #ccc;
}
/* list */
#userList {
padding: 6px;
}
.user-item {
padding: 6px;
border-radius: 6px;
cursor: pointer;
}
.user-item:hover {
background: #dde4f2;
}
.device-item {
padding-left: 20px;
font-size: 13px;
}
.vehicle-onboarding {
display: grid;
gap: 12px;
}
.vehicle-onboarding-card,
.vehicle-document-storage-card {
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-card-bg, var(--tkrvue-layer-surface-bg));
padding: 12px;
}
.vehicle-onboarding-card h3,
.vehicle-document-storage-card h4 {
margin: 0 0 4px;
color: var(--tkrvue-text);
font-size: 14px;
}
.vehicle-onboarding-card p,
.vehicle-document-storage-card .organization-resource-head span {
margin: 0;
color: var(--tkrvue-muted);
font-size: 12px;
line-height: 1.4;
}
.vehicle-onboarding-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.vehicle-onboarding-card-head > div {
min-width: 0;
}
.vehicle-onboarding-card-title {
display: flex;
align-items: flex-start;
flex: 1 1 auto;
gap: 8px;
min-width: 0;
}
.vehicle-onboarding-card-title > div:last-child {
min-width: 0;
}
.vehicle-onboarding-section-toggle.context-help-title {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
flex: 0 0 36px;
gap: 0;
border: 0;
background: transparent;
color: var(--tkrvue-accent);
padding: 0;
cursor: pointer;
font: inherit;
}
.vehicle-onboarding-section-toggle.context-help-title .context-help-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
font-size: 30px;
font-weight: 800;
line-height: 1;
transition: transform 0.16s ease;
}
.vehicle-onboarding-card-body {
min-width: 0;
margin-top: 10px;
}
.vehicle-onboarding-collapsible.is-collapsed > .vehicle-onboarding-card-body {
display: none;
}
.vehicle-onboarding-collapsible.is-collapsed .vehicle-onboarding-section-toggle .context-help-chevron {
transform: rotate(-90deg);
}
.vehicle-onboarding-organization-card .vehicle-onboarding-card-head {
align-items: end;
}
.vehicle-onboarding-organization-card .vehicle-onboarding-organization {
min-width: min(100%, 360px);
margin-top: 0;
}
.vehicle-onboarding-locked {
display: grid;
place-items: center;
min-height: 130px;
border-style: dashed;
text-align: center;
}
.vehicle-onboarding-locked p {
max-width: 620px;
}
.vehicle-onboarding-organization,
.vehicle-onboarding-card-head > label {
display: grid;
min-width: min(100%, 280px);
gap: 4px;
margin-top: 10px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.vehicle-onboarding-organization select,
.vehicle-onboarding-card-head select {
width: 100%;
min-height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 6px 9px;
font: inherit;
}
.vehicle-onboarding-current-organization {
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
max-width: 100%;
margin-top: 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-input-bg));
padding: 6px 10px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.vehicle-onboarding-current-organization strong {
overflow: hidden;
color: var(--tkrvue-text);
text-overflow: ellipsis;
white-space: nowrap;
}
.vehicle-onboarding-current-organization.is-missing {
border-color: var(--tkrvue-status-warning-border);
border-radius: 8px;
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
}
.vehicle-onboarding-manual {
margin-top: 12px;
border-top: 1px solid var(--tkrvue-border);
padding-top: 12px;
}
.vehicle-onboarding-manual .iot-inventory-sheet {
border: 0;
background: transparent;
padding: 0;
}
.asset-record-form {
min-width: 0;
max-width: 100%;
overflow: hidden;
container-type: inline-size;
}
.asset-record-form-heading {
min-width: 0;
}
.asset-record-form-toggle,
.vehicle-map-style-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.asset-record-form-toggle:focus-visible,
.vehicle-map-style-toggle:focus-visible {
outline: 2px solid var(--tkrvue-accent);
outline-offset: 3px;
border-radius: 6px;
}
.asset-record-form-title {
display: grid;
gap: 3px;
min-width: 0;
}
.asset-record-form-title h3 {
margin: 0;
}
.asset-record-form-title > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
font-weight: 400;
}
.asset-record-form-toggle .context-help-chevron,
.vehicle-map-style-toggle .context-help-chevron {
width: 26px;
min-width: 26px;
height: 26px;
min-height: 26px;
font-size: 23px;
}
.asset-record-form.is-collapsed > .asset-record-form-body,
.vehicle-map-style-editor.is-collapsed > .vehicle-map-style-content {
display: none;
}
.asset-record-form.is-collapsed > .asset-record-form-head .context-help-chevron,
.vehicle-map-style-editor.is-collapsed > legend .context-help-chevron {
transform: rotate(-90deg);
}
.organization-form-grid.asset-record-fields {
width: 100%;
min-width: 0;
max-width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.organization-form-grid.asset-record-fields > *,
.organization-form-grid.asset-record-fields > label,
.organization-form-grid.asset-record-fields > label.span-2,
.organization-form-grid.asset-record-fields > label.span-4 {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.organization-form-grid.asset-record-fields > label,
.organization-form-grid.asset-record-fields > label.span-2 {
grid-template-columns: minmax(84px, 128px) minmax(0, 1fr);
align-items: center;
}
.organization-form-grid.asset-record-fields > label > span {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.organization-form-grid.asset-record-fields input,
.organization-form-grid.asset-record-fields select,
.organization-form-grid.asset-record-fields textarea,
.organization-form-grid.asset-record-fields .vehicle-map-style-editor {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.organization-form-grid.asset-record-fields .vehicle-map-icon-choice {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.organization-form-grid.asset-record-fields .vehicle-map-icon-choice > span:last-child {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.asset-transfer-options {
display: grid;
gap: 8px;
margin-top: 10px;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--tkrvue-warning, #d97706) 42%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-warning, #d97706) 7%, var(--tkrvue-layer-surface-bg));
}
.asset-transfer-options[hidden] {
display: none;
}
.asset-transfer-options .muted-cell {
margin: 0;
}
.asset-transfer-complete-history {
display: flex;
align-items: flex-start;
gap: 9px;
min-width: 0;
color: var(--tkrvue-text);
cursor: pointer;
}
.asset-transfer-complete-history input {
flex: 0 0 auto;
margin-top: 3px;
accent-color: var(--tkrvue-warning, #d97706);
}
.asset-transfer-complete-history > span {
display: grid;
gap: 2px;
min-width: 0;
}
.asset-transfer-complete-history small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.35;
}
@container (max-width: 840px) {
.organization-form-grid.asset-record-fields {
grid-template-columns: minmax(0, 1fr);
}
.organization-form-grid.asset-record-fields > label,
.organization-form-grid.asset-record-fields > label.span-2,
.organization-form-grid.asset-record-fields > label.span-4,
.organization-form-grid.asset-record-fields > .vehicle-map-style-editor {
grid-column: 1 / -1;
}
.organization-form-grid.asset-record-fields > label,
.organization-form-grid.asset-record-fields > label.span-2 {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: 4px;
}
.organization-form-grid.asset-record-fields .vehicle-map-style-layout {
grid-template-columns: minmax(0, 1fr);
}
.organization-form-grid.asset-record-fields .vehicle-map-icon-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container (max-width: 500px) {
.organization-form-grid.asset-record-fields .vehicle-map-icon-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.asset-empty-sheet {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 92px;
border: 1px dashed color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
padding: 14px;
}
.asset-empty-sheet h3 {
margin: 0 0 4px;
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-md);
}
.asset-empty-sheet p {
margin: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.4;
}
.asset-empty-sheet .primary-action {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
.asset-empty-sheet .primary-action svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.asset-selection-notice {
position: relative;
top: auto;
z-index: auto;
display: flex;
align-items: baseline;
gap: 6px;
margin: 0 0 10px;
}
.asset-selection-context,
.maintenance-vehicle-context {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 9px 12px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 36%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-accent);
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-text);
}
.asset-selection-context {
margin: 0 0 10px;
}
.asset-selection-context-icon,
.maintenance-vehicle-context-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 26px;
width: 26px;
height: 26px;
color: var(--tkrvue-accent);
}
.asset-selection-context-icon svg,
.maintenance-vehicle-context-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.asset-selection-context > span:last-child,
.maintenance-vehicle-context-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.asset-selection-context strong,
.maintenance-vehicle-context strong {
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-md);
}
.asset-selection-context small,
.maintenance-vehicle-context small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.35;
}
.asset-selection-prompt {
display: grid;
gap: 10px;
min-width: 0;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
padding: 12px;
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-sm, 13px);
}
.asset-selection-prompt-head h3 {
margin: 0 0 3px;
font-size: var(--tkrvue-font-size-md, 14px);
color: var(--tkrvue-text);
}
.asset-selection-prompt-head p {
margin: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm, 13px);
line-height: 1.4;
}
.asset-selection-search {
display: grid;
grid-template-columns: max-content minmax(180px, 1fr);
align-items: center;
gap: 8px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm, 13px);
}
.asset-selection-search input {
min-width: 0;
width: 100%;
font: inherit;
}
.asset-selection-choice-list {
display: grid;
gap: 6px;
max-height: min(42vh, 410px);
overflow: auto;
padding-right: 2px;
}
.asset-selection-choice {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-text);
padding: 9px 10px;
text-align: left;
font: inherit;
cursor: pointer;
}
.asset-selection-choice:hover,
.asset-selection-choice:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-input-bg, var(--tkrvue-layer-surface-bg)));
outline: none;
}
.asset-selection-choice-main {
display: grid;
gap: 2px;
min-width: 0;
}
.asset-selection-choice-main strong,
.asset-selection-choice-main span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asset-selection-choice-main strong {
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-sm, 13px);
}
.asset-selection-choice-main span,
.asset-selection-result {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs, 12px);
}
.asset-selection-choice-action {
flex: 0 0 auto;
color: var(--tkrvue-accent);
font-weight: 700;
}
.asset-selection-empty {
min-height: 72px;
}
@container (max-width: 520px) {
.asset-selection-notice {
display: grid;
gap: 2px;
}
.asset-selection-search {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
.asset-selection-choice {
align-items: flex-start;
}
}
.vehicle-onboarding-methods {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.vehicle-onboarding-method-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-bottom: 8px;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, transparent);
color: var(--tkrvue-accent);
}
.vehicle-onboarding-card-title .vehicle-onboarding-method-icon {
flex: 0 0 30px;
margin-bottom: 0;
}
.vehicle-onboarding-method-icon svg,
.vehicle-onboarding-actions svg,
.vehicle-document-storage-card .primary-action svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.vehicle-onboarding-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin-top: 12px;
}
.vehicle-onboarding-card-body > .vehicle-onboarding-actions {
margin-top: 0;
}
.vehicle-onboarding-storage-notice {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
margin: 0 0 10px;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-left-width: 3px;
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
overflow: hidden;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.35;
}
.vehicle-onboarding-storage-notice-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.vehicle-onboarding-storage-notice-copy strong {
color: inherit;
font-size: var(--tkrvue-font-size-md);
}
.vehicle-onboarding-storage-action {
align-self: center;
margin-left: 10px;
white-space: nowrap;
}
.vehicle-onboarding-storage-action svg {
width: 14px;
height: 14px;
}
.vehicle-onboarding-storage-notice.is-enabled {
border-color: var(--tkrvue-status-success-border);
background: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
}
.vehicle-onboarding-storage-notice.is-disabled {
border-color: var(--tkrvue-status-warning-border);
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
}
@media (max-width: 760px) {
.vehicle-onboarding-storage-notice {
grid-template-columns: 1fr;
gap: 8px;
}
.vehicle-onboarding-storage-action {
justify-self: start;
margin-left: 0;
}
}
/* Centre de pilotage Maintenance */
.maintenance-center-layer .view-body {
gap: 10px;
position: relative;
container-type: inline-size;
}
.maintenance-metrics {
margin-bottom: 0;
}
.maintenance-vehicle-context {
margin: 0;
}
.maintenance-vehicle-context-back {
flex: 0 0 auto;
margin-left: auto;
white-space: nowrap;
}
.maintenance-vehicle-context-back svg {
width: 18px;
height: 18px;
}
.asset-inventory-return-context {
margin: 0 0 10px;
}
@media (max-width: 720px) {
.asset-inventory-return-context {
align-items: flex-start;
flex-wrap: wrap;
}
.asset-inventory-return-context .maintenance-vehicle-context-back {
width: 100%;
margin-left: 0;
justify-content: center;
}
}
.maintenance-pending-import-notice {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 10px 12px;
border: 1px solid #f3c66a;
border-left: 4px solid #d97706;
border-radius: 9px;
background: #fff7dc;
color: #73510b;
font-size: var(--tkrvue-font-size-sm);
line-height: 1.4;
}
.maintenance-pending-import-icon {
display: inline-flex;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin-top: 1px;
}
.maintenance-pending-import-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
html[data-theme="dark"] .maintenance-pending-import-notice {
border-color: #8a5a12;
border-left-color: #f0a52b;
background: #3a2b12;
color: #f7d89a;
}
.maintenance-import-callout {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-accent);
border-radius: var(--tkrvue-radius, 10px);
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
}
.maintenance-import-callout-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: var(--tkrvue-accent);
}
.maintenance-import-callout-icon svg,
.maintenance-import-callout > button svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.maintenance-import-callout-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.maintenance-import-callout-copy > span,
.maintenance-import-callout-copy > small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.maintenance-toolbar {
display: grid;
grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(135px, .7fr)) auto;
gap: 10px;
align-items: end;
padding: 10px 12px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
}
.maintenance-filter {
display: grid;
gap: 4px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.maintenance-filter input,
.maintenance-filter select,
.maintenance-issue-form input,
.maintenance-issue-form select,
.maintenance-issue-form textarea {
width: 100%;
min-width: 0;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg, #fff);
color: var(--tkrvue-text);
font: inherit;
}
.maintenance-filter input,
.maintenance-filter select,
.maintenance-issue-form input,
.maintenance-issue-form select {
height: 34px;
padding: 0 8px;
}
.maintenance-issue-form textarea {
padding: 7px 8px;
resize: vertical;
}
.maintenance-toolbar-actions,
.maintenance-issue-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.maintenance-toolbar-actions button,
.maintenance-issue-actions button {
min-height: 34px;
max-width: 100%;
white-space: nowrap;
}
.maintenance-toolbar-actions button.is-loading svg,
.maintenance-issue-actions button.is-loading svg,
.maintenance-toolbar-actions button.is-loading > :first-child:not(span:last-child) {
animation: tkrvue-spin .8s linear infinite;
}
.maintenance-results,
.maintenance-issue-editor {
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
overflow: hidden;
}
.maintenance-results-head,
.maintenance-issue-editor-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 0 12px;
border-bottom: 1px solid var(--tkrvue-border);
}
.maintenance-results-head span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.maintenance-table-wrap {
max-height: min(58vh, 650px);
overflow: auto;
}
.maintenance-table {
min-width: 920px;
font-size: inherit;
}
.maintenance-table th,
.maintenance-table td {
padding: 8px 9px;
vertical-align: middle;
}
.maintenance-table tbody tr {
cursor: default;
}
.maintenance-table td small,
.maintenance-equipment small {
display: block;
margin-top: 3px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.25;
}
.maintenance-storage-notice {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 9px 11px;
border: 1px solid var(--tkrvue-status-warning-border);
border-radius: 9px;
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.4;
}
.maintenance-storage-notice-icon {
display: inline-flex;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin-top: 1px;
}
.maintenance-storage-notice-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.maintenance-document-cell {
display: flex;
align-items: center;
gap: 9px;
min-width: 180px;
}
.maintenance-document-cell > span:last-child {
min-width: 0;
}
.maintenance-document-icon {
--maintenance-document-color: #475569;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 8px;
background: #eef2f7;
color: var(--maintenance-document-color);
}
.maintenance-document-icon svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.65;
stroke-linecap: round;
stroke-linejoin: round;
}
.maintenance-table .maintenance-document-icon small {
position: absolute;
right: -4px;
bottom: -4px;
min-width: 22px;
margin: 0;
padding: 1px 3px;
border: 2px solid var(--tkrvue-layer-surface-bg);
border-radius: 5px;
background: var(--maintenance-document-color);
color: #fff;
font-size: 8px;
font-weight: 800;
line-height: 12px;
text-align: center;
}
.maintenance-document-icon.is-pdf {
--maintenance-document-color: #be123c;
background: #fff1f2;
}
.maintenance-document-icon.is-image {
--maintenance-document-color: #7e22ce;
background: #f3e8ff;
}
.maintenance-document-icon.is-spreadsheet {
--maintenance-document-color: #15803d;
background: #dcfce7;
}
.maintenance-document-icon.is-word {
--maintenance-document-color: #1d4ed8;
background: #dbeafe;
}
.maintenance-document-icon.is-invoice {
--maintenance-document-color: #a16207;
background: #fef3c7;
}
.maintenance-document-actions {
width: 1%;
text-align: center;
white-space: nowrap;
}
.maintenance-document-actions > span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.maintenance-document-actions .view-icon-button.is-loading svg {
animation: tkrvue-spin .8s linear infinite;
}
.maintenance-document-unavailable {
color: var(--tkrvue-muted);
}
.maintenance-status,
.maintenance-severity {
display: inline-flex;
align-items: center;
width: max-content;
padding: 3px 8px;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #f1f5f9;
color: #334155;
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
white-space: nowrap;
}
.maintenance-status.is-ok,
.maintenance-status.is-completed,
.maintenance-status.is-resolved,
.maintenance-status.is-closed,
.maintenance-status.is-validated,
.maintenance-status.is-matched,
.maintenance-severity.is-low {
border-color: #86efac;
background: #dcfce7;
color: #166534;
}
.maintenance-status.is-due_soon,
.maintenance-status.is-planned,
.maintenance-status.is-in_progress,
.maintenance-status.is-pending,
.maintenance-status.is-unmatched,
.maintenance-severity.is-medium {
border-color: #fde68a;
background: #fef3c7;
color: #92400e;
}
.maintenance-status.is-overdue,
.maintenance-status.is-cancelled,
.maintenance-status.is-error,
.maintenance-severity.is-high,
.maintenance-severity.is-critical {
border-color: #fecaca;
background: #fee2e2;
color: #b91c1c;
}
.maintenance-severity.is-critical {
background: #b91c1c;
color: #fff;
}
.maintenance-issue-editor {
padding-bottom: 12px;
}
.maintenance-issue-form {
display: grid;
grid-template-columns: repeat(4, minmax(150px, 1fr));
gap: 10px;
padding: 12px;
}
.maintenance-issue-form label {
display: grid;
align-content: start;
gap: 4px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.maintenance-issue-form .maintenance-form-wide {
grid-column: span 2;
}
.maintenance-issue-form .maintenance-checkbox {
display: flex;
align-items: center;
gap: 7px;
padding-top: 23px;
}
.maintenance-issue-form .maintenance-checkbox input {
width: 16px;
height: 16px;
}
.maintenance-issue-actions {
justify-content: flex-start;
padding: 0 12px;
}
.maintenance-center-layer.is-maintenance-loading .view-body::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 55%, transparent);
cursor: progress;
}
@media (max-width: 1250px) {
.maintenance-toolbar {
grid-template-columns: repeat(3, minmax(150px, 1fr));
}
.maintenance-toolbar-actions {
grid-column: span 3;
justify-content: flex-start;
}
.maintenance-issue-form {
grid-template-columns: repeat(2, minmax(150px, 1fr));
}
}
@media (max-width: 760px) {
.maintenance-metrics,
.maintenance-toolbar,
.maintenance-issue-form {
grid-template-columns: 1fr;
}
.maintenance-toolbar-actions,
.maintenance-issue-form .maintenance-form-wide {
grid-column: span 1;
}
.maintenance-toolbar-actions {
align-items: stretch;
flex-direction: column;
}
.maintenance-import-callout {
grid-template-columns: auto minmax(0, 1fr);
}
.maintenance-import-callout > button {
grid-column: 1 / -1;
justify-self: start;
}
.maintenance-issue-form .maintenance-checkbox {
padding-top: 0;
}
}
@container (max-width: 1050px) {
.maintenance-toolbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.maintenance-filter-search,
.maintenance-toolbar-actions {
grid-column: 1 / -1;
}
.maintenance-toolbar-actions {
justify-content: flex-start;
}
.maintenance-issue-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container (max-width: 620px) {
.maintenance-vehicle-context {
align-items: flex-start;
flex-wrap: wrap;
}
.maintenance-vehicle-context-back {
width: 100%;
margin-left: 0;
justify-content: center;
}
.maintenance-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.maintenance-toolbar,
.maintenance-issue-form {
grid-template-columns: 1fr;
}
.maintenance-filter-search,
.maintenance-toolbar-actions,
.maintenance-issue-form .maintenance-form-wide {
grid-column: 1;
}
.maintenance-toolbar-actions {
align-items: stretch;
flex-direction: column;
}
.maintenance-import-callout {
grid-template-columns: minmax(0, 1fr);
}
.maintenance-import-callout-icon {
display: none;
}
.maintenance-import-callout > button {
justify-self: stretch;
}
.maintenance-issue-form .maintenance-checkbox {
padding-top: 0;
}
}
/* Infobulle applicative unique : hors des layers, cohérente avec le thème TrackerVue. */
.tkrvue-global-tooltip {
--tkrvue-tooltip-surface: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 91%, var(--tkrvue-accent) 9%);
position: fixed;
z-index: 2147483000;
width: max-content;
max-width: min(280px, calc(100vw - 20px));
padding: 7px 10px 7px 12px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
border-radius: 8px;
background: var(--tkrvue-tooltip-surface);
color: var(--tkrvue-text);
box-shadow:
inset 3px 0 0 var(--tkrvue-accent),
0 12px 30px rgba(15, 23, 42, 0.2);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-xs);
font-weight: 600;
line-height: 1.3;
text-align: left;
overflow-wrap: anywhere;
white-space: normal;
pointer-events: none;
opacity: 0;
transform: translateY(3px) scale(0.98);
transform-origin: center;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.tkrvue-global-tooltip[hidden] {
display: none;
}
.tkrvue-global-tooltip.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.tkrvue-global-tooltip::after {
content: "";
position: absolute;
left: var(--tkrvue-tooltip-arrow-left, 50%);
width: 8px;
height: 8px;
border-right: 1px solid color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
background: var(--tkrvue-tooltip-surface);
}
.tkrvue-global-tooltip[data-placement="top"]::after {
bottom: -5px;
transform: translateX(-50%) rotate(45deg);
}
.tkrvue-global-tooltip[data-placement="bottom"]::after {
top: -5px;
transform: translateX(-50%) rotate(225deg);
}
:root[data-theme="dark"] .tkrvue-global-tooltip {
box-shadow:
inset 3px 0 0 var(--tkrvue-accent),
0 14px 34px rgba(0, 0, 0, 0.48);
}
@media (prefers-reduced-motion: reduce) {
.tkrvue-global-tooltip {
transition: none;
}
}
.vehicle-onboarding-document-state {
display: inline-flex;
align-items: center;
gap: 3px;
min-width: 0;
margin: 0;
font-size: var(--tkrvue-font-size-2xs, 10px);
white-space: nowrap;
}
.vehicle-onboarding-document-state svg {
width: 13px;
height: 13px;
flex: 0 0 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.vehicle-onboarding-document-state.is-stored {
color: #15803d;
}
.vehicle-onboarding-document-state.is-not-stored {
color: #a16207;
}
.vehicle-onboarding-actions .secondary-action,
.vehicle-onboarding-actions .primary-action,
.vehicle-onboarding-card-head .primary-action,
.vehicle-document-storage-card .primary-action {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
text-decoration: none;
}
.file-action {
position: relative;
display: inline-flex;
align-items: center;
min-height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 6px 10px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
}
.file-action:hover {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
}
.file-action.is-disabled {
cursor: not-allowed;
opacity: 0.55;
}
.file-action input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.vehicle-onboarding-dropzone {
display: flex;
min-height: 74px;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 0 10px;
padding: 12px 16px;
border: 1px dashed color-mix(in srgb, var(--tkrvue-accent) 62%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 94%, var(--tkrvue-accent) 6%);
color: var(--tkrvue-muted);
cursor: pointer;
text-align: left;
transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.vehicle-onboarding-dropzone:hover,
.vehicle-onboarding-dropzone:focus-visible,
.vehicle-onboarding-dropzone.is-dragover {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 86%, var(--tkrvue-accent) 14%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tkrvue-accent) 16%, transparent);
outline: none;
}
.vehicle-onboarding-dropzone.is-disabled {
cursor: wait;
opacity: 0.58;
}
.vehicle-onboarding-dropzone-icon {
display: inline-flex;
width: 34px;
height: 34px;
flex: 0 0 34px;
align-items: center;
justify-content: center;
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.vehicle-onboarding-dropzone-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.vehicle-onboarding-dropzone-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.vehicle-onboarding-dropzone-copy strong {
color: var(--tkrvue-text);
font-size: 12px;
}
.vehicle-onboarding-dropzone-copy small {
color: var(--tkrvue-muted);
font-size: 11px;
}
.vehicle-onboarding-ocr-progress {
display: grid;
gap: 7px;
margin-top: 9px;
}
.vehicle-onboarding-ocr-progress:empty {
display: none;
}
.vehicle-onboarding-ocr-progress-item {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
gap: 0 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 92%, var(--tkrvue-accent) 8%);
padding: 7px 9px;
}
.vehicle-onboarding-ocr-progress-icon {
grid-row: 1 / span 2;
display: inline-flex;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
border: 2px solid color-mix(in srgb, var(--tkrvue-muted) 55%, transparent);
border-radius: 50%;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.vehicle-onboarding-ocr-progress-copy {
display: flex;
min-width: 0;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.vehicle-onboarding-ocr-progress-copy strong {
overflow: hidden;
color: var(--tkrvue-text);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.vehicle-onboarding-ocr-progress-copy small {
flex: 0 0 auto;
color: var(--tkrvue-muted);
font-size: 11px;
}
.vehicle-onboarding-file-remove {
display: inline-flex;
width: 20px;
height: 20px;
flex: 0 0 20px;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--tkrvue-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.vehicle-onboarding-file-remove:hover,
.vehicle-onboarding-file-remove:focus-visible {
border-color: color-mix(in srgb, #dc2626 28%, var(--tkrvue-border));
background: color-mix(in srgb, #dc2626 8%, var(--tkrvue-layer-surface-bg));
color: #dc2626;
outline: none;
}
.vehicle-onboarding-ocr-progress-track {
position: relative;
display: block;
height: 4px;
margin-top: 5px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-border) 70%, transparent);
}
.vehicle-onboarding-ocr-progress-track > span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--tkrvue-accent);
transition: width 180ms ease;
}
.vehicle-onboarding-ocr-progress-item.is-active .vehicle-onboarding-ocr-progress-icon {
border-color: color-mix(in srgb, var(--tkrvue-accent) 25%, transparent);
border-top-color: var(--tkrvue-accent);
animation: vehicle-onboarding-ocr-spin 700ms linear infinite;
}
.vehicle-onboarding-ocr-progress-item.is-active .vehicle-onboarding-ocr-progress-track > span {
width: 38%;
animation: vehicle-onboarding-ocr-progress 1.2s ease-in-out infinite;
}
.vehicle-onboarding-ocr-progress-item.is-success .vehicle-onboarding-ocr-progress-icon,
.vehicle-onboarding-ocr-progress-item.is-warning .vehicle-onboarding-ocr-progress-icon,
.vehicle-onboarding-ocr-progress-item.is-error .vehicle-onboarding-ocr-progress-icon {
border-color: transparent;
}
.vehicle-onboarding-ocr-progress-item.is-success .vehicle-onboarding-ocr-progress-icon {
background: #16a34a;
}
.vehicle-onboarding-ocr-progress-item.is-success .vehicle-onboarding-ocr-progress-icon::before {
content: "✓";
}
.vehicle-onboarding-ocr-progress-item.is-warning .vehicle-onboarding-ocr-progress-icon {
background: #d97706;
}
.vehicle-onboarding-ocr-progress-item.is-warning .vehicle-onboarding-ocr-progress-icon::before,
.vehicle-onboarding-ocr-progress-item.is-error .vehicle-onboarding-ocr-progress-icon::before {
content: "!";
}
.vehicle-onboarding-ocr-progress-item.is-error .vehicle-onboarding-ocr-progress-icon {
background: #dc2626;
}
.vehicle-onboarding-ocr-progress-item.is-success .vehicle-onboarding-ocr-progress-track > span,
.vehicle-onboarding-ocr-progress-item.is-warning .vehicle-onboarding-ocr-progress-track > span,
.vehicle-onboarding-ocr-progress-item.is-error .vehicle-onboarding-ocr-progress-track > span {
width: 100%;
}
.vehicle-onboarding-ocr-progress-item.is-success .vehicle-onboarding-ocr-progress-track > span {
background: #16a34a;
}
.vehicle-onboarding-ocr-progress-item.is-warning .vehicle-onboarding-ocr-progress-track > span {
background: #d97706;
}
.vehicle-onboarding-ocr-progress-item.is-error .vehicle-onboarding-ocr-progress-track > span {
background: #dc2626;
}
.vehicle-onboarding-actions .primary-action.is-loading svg {
animation: vehicle-onboarding-ocr-spin 700ms linear infinite;
}
@keyframes vehicle-onboarding-ocr-spin {
to {
transform: rotate(360deg);
}
}
@keyframes vehicle-onboarding-ocr-progress {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(270%);
}
}
.vehicle-onboarding-preview-card {
overflow: hidden;
scroll-margin-block: 12px;
}
.vehicle-onboarding-preview-card:focus {
outline: 0;
border-color: var(--tkrvue-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tkrvue-accent) 26%, transparent);
}
.vehicle-onboarding-preview-card .table-wrap {
margin-top: 10px;
}
.vehicle-onboarding-table {
width: 100%;
min-width: 1500px;
table-layout: fixed;
font-size: var(--tkrvue-font-size-sm, 12px);
}
.vehicle-onboarding-table th,
.vehicle-onboarding-table td {
min-width: 0;
vertical-align: top;
overflow-wrap: anywhere;
}
.vehicle-onboarding-table th {
font-size: var(--tkrvue-font-size-xs, 11px);
line-height: 1.2;
vertical-align: middle;
}
.vehicle-onboarding-table input:not([type]),
.vehicle-onboarding-table input[type="text"],
.vehicle-onboarding-table select {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 6px 7px;
font: inherit;
}
.vehicle-onboarding-table col.vehicle-col-select { width: 58px; }
.vehicle-onboarding-table col.vehicle-col-source { width: 172px; }
.vehicle-onboarding-table col.vehicle-col-name { width: 190px; }
.vehicle-onboarding-table col.vehicle-col-plate { width: 110px; }
.vehicle-onboarding-table col.vehicle-col-vin { width: 164px; }
.vehicle-onboarding-table col.vehicle-col-brand { width: 118px; }
.vehicle-onboarding-table col.vehicle-col-model { width: 132px; }
.vehicle-onboarding-table col.vehicle-col-energy { width: 145px; }
.vehicle-onboarding-table col.vehicle-col-engine { width: 102px; }
.vehicle-onboarding-table col.vehicle-col-status { width: 132px; }
.vehicle-onboarding-source {
overflow: hidden;
}
.vehicle-onboarding-source-head {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.vehicle-onboarding-source-head > strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.vehicle-onboarding-source-detail {
display: block;
min-width: 0;
margin-top: 3px;
overflow: hidden;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-2xs, 10px);
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.vehicle-onboarding-energy select {
padding-right: 24px;
}
.vehicle-onboarding-raw-code,
.asset-registration-code {
display: block;
margin-top: 3px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-2xs, 10px);
line-height: 1.2;
}
.vehicle-onboarding-engine label {
min-width: 0;
display: grid;
grid-template-columns: 25px minmax(0, 1fr);
align-items: center;
gap: 4px;
}
.vehicle-onboarding-engine label > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-2xs, 10px);
font-weight: 750;
}
.vehicle-onboarding-engine input:not([type]) {
padding: 5px 6px;
}
.vehicle-onboarding-column-hint {
display: block;
margin-top: 2px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-2xs, 10px);
font-weight: 500;
}
.vehicle-onboarding-table tr.has-error {
background: color-mix(in srgb, #ef4444 7%, var(--tkrvue-layer-surface-bg));
}
.vehicle-onboarding-table tr.is-duplicate {
background: color-mix(in srgb, #f59e0b 7%, var(--tkrvue-layer-surface-bg));
}
.vehicle-onboarding-row-status select {
width: 100%;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 6px 7px;
font: inherit;
}
.vehicle-onboarding-row-status small {
display: block;
max-width: 260px;
margin-top: 5px;
color: #b42318;
line-height: 1.3;
}
.vehicle-onboarding-actions-cell {
width: 58px;
min-width: 58px;
text-align: center;
}
.vehicle-onboarding-retry {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 30px;
margin-top: 8px;
padding: 5px 9px;
font-size: var(--tkrvue-font-size-sm, 12px);
white-space: nowrap;
}
.vehicle-onboarding-retry svg {
width: 14px;
height: 14px;
}
.vehicle-onboarding-conflict-row {
display: none;
}
.vehicle-onboarding-conflict-row.is-active {
display: table-row;
}
.vehicle-onboarding-conflict-row > td {
border-top: 0;
background: color-mix(in srgb, #f59e0b 5%, var(--tkrvue-card-bg, var(--tkrvue-layer-surface-bg)));
padding: 9px 12px 12px;
}
.vehicle-onboarding-conflict-panel {
display: grid;
gap: 8px;
border-left: 3px solid #f59e0b;
padding-left: 10px;
}
.vehicle-onboarding-duplicate-actions {
display: grid;
grid-template-columns: repeat(2, minmax(240px, 1fr));
gap: 8px;
}
.vehicle-onboarding-duplicate-actions > label {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
padding: 9px 10px;
cursor: pointer;
}
.vehicle-onboarding-duplicate-actions > label.is-selected {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tkrvue-accent) 28%, transparent);
}
.vehicle-onboarding-duplicate-actions > label > input {
margin-top: 2px;
}
.vehicle-onboarding-duplicate-actions > label > span {
display: grid;
min-width: 0;
gap: 3px;
}
.vehicle-onboarding-duplicate-actions strong {
color: var(--tkrvue-text);
font-size: 12px;
}
.vehicle-onboarding-duplicate-actions small {
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.35;
}
.vehicle-onboarding-conflict-head {
display: grid;
gap: 2px;
}
.vehicle-onboarding-conflict-head strong {
color: var(--tkrvue-text);
font-size: 12px;
}
.vehicle-onboarding-conflict-head span,
.vehicle-onboarding-no-conflict {
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.4;
}
.vehicle-onboarding-automatic-updates {
display: grid;
gap: 6px;
border: 1px solid color-mix(in srgb, #16a34a 35%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, #16a34a 5%, var(--tkrvue-input-bg));
padding: 9px 10px;
}
.vehicle-onboarding-automatic-updates > strong {
color: var(--tkrvue-text);
font-size: 12px;
}
.vehicle-onboarding-automatic-update {
display: grid;
grid-template-columns: minmax(130px, 0.65fr) minmax(150px, 0.8fr) minmax(200px, 1fr);
align-items: center;
gap: 8px;
border-top: 1px solid color-mix(in srgb, #16a34a 20%, var(--tkrvue-border));
padding-top: 6px;
}
.vehicle-onboarding-automatic-update > strong,
.vehicle-onboarding-automatic-update > b {
color: var(--tkrvue-text);
font-size: 11px;
overflow-wrap: anywhere;
}
.vehicle-onboarding-automatic-update > span {
color: #15803d;
font-size: 10px;
}
.vehicle-onboarding-merge-grid {
min-width: 760px;
overflow: hidden;
border: 1px solid color-mix(in srgb, #16a34a 35%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, #16a34a 4%, var(--tkrvue-input-bg));
}
.vehicle-onboarding-merge-grid-head,
.vehicle-onboarding-merge-grid-row {
display: grid;
grid-template-columns: 105px minmax(135px, 0.65fr) minmax(190px, 0.9fr) minmax(210px, 1fr);
align-items: center;
gap: 10px;
padding: 7px 10px;
}
.vehicle-onboarding-merge-grid-head {
background: color-mix(in srgb, #16a34a 9%, var(--tkrvue-input-bg));
color: var(--tkrvue-muted);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.vehicle-onboarding-merge-grid-row {
border-top: 1px solid color-mix(in srgb, #16a34a 20%, var(--tkrvue-border));
color: var(--tkrvue-text);
font-size: 11px;
cursor: pointer;
}
.vehicle-onboarding-merge-grid-row.is-selected {
background: color-mix(in srgb, #16a34a 8%, var(--tkrvue-input-bg));
}
.vehicle-onboarding-merge-grid-row > strong,
.vehicle-onboarding-merge-grid-row > span,
.vehicle-onboarding-merge-grid-row > b {
min-width: 0;
overflow-wrap: anywhere;
}
.vehicle-onboarding-merge-checkbox {
display: flex;
align-items: center;
justify-content: center;
}
.vehicle-onboarding-merge-checkbox > input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--tkrvue-accent);
}
.vehicle-onboarding-conflict {
display: grid;
grid-template-columns: minmax(120px, 0.65fr) repeat(2, minmax(190px, 1fr));
align-items: stretch;
gap: 7px;
}
.vehicle-onboarding-conflict > strong {
align-self: center;
color: var(--tkrvue-text);
font-size: 12px;
}
.vehicle-onboarding-conflict > label {
display: flex;
align-items: flex-start;
gap: 7px;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
padding: 7px 8px;
cursor: pointer;
}
.vehicle-onboarding-conflict > label.is-selected {
border-color: var(--tkrvue-accent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tkrvue-accent) 35%, transparent);
}
.vehicle-onboarding-conflict > label span {
display: grid;
min-width: 0;
gap: 2px;
}
.vehicle-onboarding-conflict > label small {
color: var(--tkrvue-muted);
font-size: 10px;
}
.vehicle-onboarding-conflict > label b {
overflow-wrap: anywhere;
color: var(--tkrvue-text);
font-size: 11px;
}
.vehicle-onboarding-conflict-map-value {
display: inline-flex;
align-items: center;
gap: 6px;
}
.vehicle-onboarding-conflict-map-value > i {
width: 15px;
height: 15px;
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--merge-map-color) 72%, #000);
border-radius: 50%;
background: var(--merge-map-color);
}
.vehicle-onboarding-conflict-map-value > svg {
width: 19px;
height: 19px;
flex: 0 0 auto;
color: var(--tkrvue-accent);
fill: currentColor;
}
.vehicle-onboarding-permission-list {
display: grid;
gap: 5px;
margin-top: 10px;
}
.vehicle-onboarding-permission-toolbar {
display: grid;
grid-template-columns: minmax(220px, 2fr) minmax(155px, 1fr) minmax(90px, 0.45fr) auto auto;
gap: 10px;
align-items: end;
margin-top: 10px;
padding: 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
}
.vehicle-onboarding-permission-toolbar label {
display: grid;
gap: 5px;
min-width: 0;
}
.vehicle-onboarding-permission-toolbar label > span,
.vehicle-onboarding-permission-summary {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.vehicle-onboarding-permission-toolbar input,
.vehicle-onboarding-permission-toolbar select {
width: 100%;
min-width: 0;
height: 34px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
font: inherit;
}
.vehicle-onboarding-permission-summary {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 2px 4px 7px;
}
.vehicle-onboarding-permission-summary strong {
color: var(--tkrvue-text);
}
.vehicle-onboarding-permission-control {
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 9px;
}
.vehicle-onboarding-permission-publication {
font-size: var(--tkrvue-font-size-sm);
}
.vehicle-onboarding-permission-row.is-saving {
opacity: 0.72;
}
.vehicle-onboarding-permission-row.is-saving .vehicle-onboarding-permission-control::before {
content: "";
width: 15px;
height: 15px;
border: 2px solid color-mix(in srgb, var(--tkrvue-accent) 30%, transparent);
border-top-color: var(--tkrvue-accent);
border-radius: 50%;
animation: tkrvue-spin 0.8s linear infinite;
}
.vehicle-onboarding-permission-pagination {
margin-top: 4px;
}
.vehicle-onboarding-permission-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 42px;
border-top: 1px solid var(--tkrvue-border);
padding: 7px 4px;
}
.vehicle-onboarding-permission-row > span:first-child {
display: grid;
min-width: 0;
}
.vehicle-onboarding-permission-row small {
color: var(--tkrvue-muted);
font-size: 11px;
}
@media (max-width: 900px) {
.vehicle-onboarding-permission-toolbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vehicle-onboarding-permission-search {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
.vehicle-onboarding-permission-toolbar {
grid-template-columns: 1fr;
}
.vehicle-onboarding-permission-toolbar .tkrvue-icon-button {
width: 100%;
}
.vehicle-onboarding-permission-row {
align-items: stretch;
flex-direction: column;
}
.vehicle-onboarding-permission-control {
justify-content: space-between;
}
}
.vehicle-onboarding-side {
margin-bottom: 12px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
}
.vehicle-onboarding-side > summary {
padding: 10px 12px;
color: var(--tkrvue-text);
cursor: pointer;
font-size: 13px;
font-weight: 700;
}
.vehicle-onboarding-side > .vehicle-onboarding {
padding: 0 10px 10px;
}
.vehicle-document-storage-grid {
margin-top: 12px;
}
.vehicle-document-storage-card {
container-type: inline-size;
}
.vehicle-document-retention-row {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
gap: 6px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: 12px;
}
.vehicle-document-retention-title {
white-space: nowrap;
}
.vehicle-document-retention-fields {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.vehicle-document-retention-fields label {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
margin: 0;
color: var(--tkrvue-muted);
font-size: 12px;
}
.vehicle-document-retention-fields input {
width: 92px;
min-width: 68px;
box-sizing: border-box;
font: inherit;
}
@container (max-width: 620px) {
.vehicle-document-retention-row {
grid-template-columns: 1fr;
align-items: stretch;
}
.vehicle-document-retention-fields {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.vehicle-document-retention-fields label {
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: 3px;
}
.vehicle-document-retention-fields input {
width: 100%;
}
}
.vehicle-document-kinds {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 12px;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
padding: 8px 10px;
}
.vehicle-document-kinds legend {
color: var(--tkrvue-text);
padding: 0 4px;
font-size: 12px;
font-weight: 700;
}
.vehicle-document-storage-card .premium-badge {
flex: 0 0 auto;
border: 1px solid #b69cff;
border-radius: 999px;
background: #eee8ff;
color: #5d24b8;
padding: 3px 8px;
font-size: 11px;
font-weight: 700;
}
.vehicle-document-storage-card .input-with-unit {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.vehicle-document-storage-card .input-with-unit > span {
height: 100%;
border: 1px solid var(--tkrvue-border);
border-left: 0;
border-radius: 0 7px 7px 0;
background: var(--tkrvue-layer-surface-bg);
padding: 8px 9px;
}
.vehicle-document-storage-card .input-with-unit input {
border-radius: 7px 0 0 7px;
}
@media (max-width: 900px) {
.vehicle-onboarding-methods,
.vehicle-document-kinds {
grid-template-columns: 1fr;
}
.vehicle-onboarding-card-head {
align-items: stretch;
flex-direction: column;
}
.asset-empty-sheet {
align-items: stretch;
flex-direction: column;
}
.vehicle-onboarding-conflict {
grid-template-columns: 1fr;
}
.vehicle-document-retention-row {
grid-template-columns: 1fr;
align-items: stretch;
}
.vehicle-document-retention-fields {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.vehicle-document-retention-fields label {
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: 3px;
}
.vehicle-document-retention-fields input {
width: 100%;
}
.vehicle-onboarding-duplicate-actions,
.vehicle-onboarding-automatic-update {
grid-template-columns: 1fr;
}
}
/* Workspace views */
#map-container {
--view-layer-sidebar-compensation: 0px;
overflow: hidden;
}
#splitter > span,
.view-resize-handle > span {
position: absolute;
top: 50%;
left: 50%;
display: flex;
box-sizing: border-box;
width: 16px;
height: 54px;
align-items: center;
justify-content: center;
gap: 3px;
transform: translate(-50%, -50%);
border: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
color: color-mix(in srgb, var(--tkrvue-accent) 76%, var(--tkrvue-muted));
}
#splitter > span::before,
.view-resize-handle > span::before,
#splitter > span::after,
.view-resize-handle > span::after {
content: "";
display: block;
flex: 0 0 2px;
width: 2px;
height: 18px;
border-radius: 2px;
background: currentColor;
}
@media (min-width: 901px) {
#splitter {
position: relative;
z-index: 1100;
display: inline-flex;
width: 24px;
min-width: 24px;
height: 100%;
flex: 0 0 24px;
align-self: stretch;
align-items: center;
justify-content: center;
margin-inline: -12px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: color-mix(in srgb, var(--tkrvue-accent) 76%, var(--tkrvue-sidebar-text));
cursor: ew-resize;
touch-action: none;
}
#splitter > span {
border: 1px solid var(--tkrvue-border);
border-left: 0;
border-radius: 0 7px 7px 0;
box-shadow: 4px 6px 14px rgba(31, 41, 55, 0.14);
}
#splitter:hover,
#splitter:focus-visible,
body.sidebar-resizing #splitter {
color: var(--tkrvue-accent);
outline: none;
}
#splitter:focus-visible span {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--tkrvue-accent) 20%, transparent), 4px 6px 14px rgba(31, 41, 55, 0.14);
}
body.sidebar-resizing,
body.sidebar-resizing * {
cursor: ew-resize !important;
user-select: none !important;
}
body.sidebar-resizing #sidebar {
transition: none;
}
/* La layer récupère la largeur libérée par rapport aux 250 px d'origine. */
#sidebar ~ #map-container {
--view-layer-sidebar-compensation: var(--tkrvue-sidebar-compensation, 0px);
}
}
.view-layer {
position: absolute;
inset: 0 0 0 auto;
height: 100%;
max-height: 100%;
min-height: 0;
width: min(
calc(var(--view-layer-width, 760px) + var(--view-layer-sidebar-compensation, 0px)),
calc(100% - 96px)
);
min-width: min(360px, calc(100% - 96px));
box-sizing: border-box;
overflow: visible;
z-index: 1600;
pointer-events: none;
display: flex;
justify-content: flex-end;
}
.view-layer.full {
inset: 0 0 0 auto;
width: min(
calc(var(--view-layer-width, calc(100% - 96px)) + var(--view-layer-sidebar-compensation, 0px)),
calc(100% - 96px)
);
}
.view-layer.fullscreen,
.view-layer.full.fullscreen {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
min-width: 0;
z-index: 10000;
pointer-events: auto;
padding: 0;
box-sizing: border-box;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 92%, transparent);
}
body.view-layer-fullscreen-active {
overflow: hidden;
}
body.view-layer-fullscreen-active #map-container {
z-index: 30000;
overflow: visible;
}
.view-layer.fullscreen,
.view-layer.full.fullscreen {
z-index: 31000;
}
.view-layer.fullscreen .view-panel {
border-radius: 0;
border: 0;
box-shadow: none;
}
.view-layer.fullscreen .view-resize-handle {
display: none;
}
.view-layer.fullscreen .view-edge-toggle {
display: none;
}
.view-layer.fullscreen .view-toggle-vertical,
.view-layer.fullscreen .view-toggle-horizontal {
opacity: 0.35;
cursor: not-allowed;
}
.view-layer.collapsed-vertical {
bottom: auto;
height: 48px;
}
.view-layer.full.collapsed-vertical {
inset: 0 0 auto auto;
height: 48px;
}
.view-layer.collapsed-horizontal {
inset: 0 0 0 auto;
width: 34px;
min-width: 0;
background: var(--tkrvue-layer-bg);
border-left: 1px solid var(--tkrvue-border);
border-radius: 8px 0 0 8px;
box-shadow: 0 10px 24px rgba(31,41,55,0.18);
pointer-events: auto;
transition: width 0.2s ease, inset 0.2s ease;
}
:root[data-theme="dark"] .view-layer.collapsed-horizontal {
border-left-color: rgba(255,255,255,0.72);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.14), 0 14px 30px rgba(0,0,0,0.38);
}
#map-container.view-layer-collapsed-horizontal #map .leaflet-right:not(.tkrvue-map-actions-dock) {
right: 44px !important;
}
#map-container.view-layer-collapsed-vertical #map .leaflet-top:not(.tkrvue-map-actions-dock) {
top: 56px !important;
}
#map-container #map .leaflet-right,
#map-container #map .leaflet-top {
transition: right 0.24s ease, top 0.24s ease;
}
#map-container .leaflet-control-layers {
transition: opacity 0.22s ease, transform 0.22s ease;
}
#map-container.view-layer-transitioning .leaflet-control-layers {
opacity: 0;
transform: translateY(-4px);
}
#map-container.view-layer-map-guard .leaflet-control-layers {
pointer-events: none;
}
.tkrvue-address-search-control {
--tkrvue-address-search-height: max(34px, calc(var(--tkrvue-font-size-effective) + 16px));
position: relative;
width: var(--tkrvue-address-search-height);
margin: 0 0 16px 16px !important;
border: 1px solid var(--tkrvue-map-control-border);
border-radius: 10px;
background: var(--tkrvue-map-control-surface);
box-shadow: var(--tkrvue-map-control-shadow);
color: var(--tkrvue-map-control-content);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
overflow: visible;
transition: width 160ms ease, border-radius 160ms ease;
}
.tkrvue-address-search-control.is-expanded {
width: min(545px, calc(100vw - 36px));
}
.tkrvue-address-search-form {
display: grid;
grid-template-columns: var(--tkrvue-address-search-height);
align-items: center;
min-height: var(--tkrvue-address-search-height);
}
.tkrvue-address-search-control.is-expanded .tkrvue-address-search-form {
grid-template-columns: 36px minmax(90px, 1fr) minmax(150px, 175px) 32px;
}
.tkrvue-address-search-submit,
.tkrvue-address-search-clear {
display: grid;
place-items: center;
width: 100%;
height: var(--tkrvue-address-search-height);
padding: 0;
border: 0;
background: transparent;
color: var(--tkrvue-map-control-foreground, #316da5);
cursor: pointer;
}
.tkrvue-address-search-submit {
position: relative;
border-radius: 9px;
}
.tkrvue-address-search-control.is-expanded .tkrvue-address-search-submit {
grid-column: 1;
grid-row: 1;
border-radius: 9px 0 0 9px;
}
.tkrvue-address-search-clear {
grid-column: 4;
grid-row: 1;
border-radius: 0 9px 9px 0;
color: var(--tkrvue-map-control-muted);
}
.tkrvue-address-search-clear[hidden] {
display: none;
}
.tkrvue-address-search-submit:hover,
.tkrvue-address-search-submit:focus-visible,
.tkrvue-address-search-clear:hover,
.tkrvue-address-search-clear:focus-visible {
background: var(--tkrvue-map-control-surface-hover);
outline: 0;
}
.tkrvue-address-search-submit svg,
.tkrvue-address-search-clear svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.tkrvue-address-search-input {
grid-column: 2;
grid-row: 1;
min-width: 0;
width: 100%;
height: var(--tkrvue-address-search-height);
padding: 0 2px;
border: 0;
background: transparent;
color: var(--tkrvue-map-control-content);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
line-height: 1.2;
outline: 0;
}
.tkrvue-address-search-country {
grid-column: 3;
grid-row: 1;
width: calc(100% - 6px);
height: calc(var(--tkrvue-address-search-height) - 8px);
margin: 4px 6px 4px 0;
padding: 1px 22px 1px 5px;
border: 1px solid var(--tkrvue-map-control-field-border);
border-radius: 6px;
background: var(--tkrvue-map-control-field);
color: var(--tkrvue-map-control-content);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
outline: 0;
}
.tkrvue-address-search-country:focus-visible {
border-color: var(--tkrvue-map-control-foreground, #2f75b5);
box-shadow: 0 0 0 2px rgba(47, 117, 181, 0.16);
}
.tkrvue-address-search-control:not(.is-expanded) .tkrvue-address-search-input,
.tkrvue-address-search-control:not(.is-expanded) .tkrvue-address-search-country,
.tkrvue-address-search-control:not(.is-expanded) .tkrvue-address-search-clear,
.tkrvue-address-search-control:not(.is-expanded) .tkrvue-address-search-results {
display: none;
}
.tkrvue-address-search-input::placeholder {
color: var(--tkrvue-map-control-muted);
opacity: 1;
}
.tkrvue-address-search-input::-webkit-search-cancel-button {
display: none;
}
.tkrvue-address-search-spinner {
display: none;
width: 17px;
height: 17px;
border: 2px solid color-mix(in srgb, var(--tkrvue-map-control-foreground) 28%, transparent);
border-top-color: currentColor;
border-radius: 50%;
animation: tkrvue-address-search-spin 0.75s linear infinite;
}
.tkrvue-address-search-submit.is-loading > svg {
display: none;
}
.tkrvue-address-search-submit.is-loading .tkrvue-address-search-spinner {
display: block;
}
@keyframes tkrvue-address-search-spin {
to { transform: rotate(360deg); }
}
.tkrvue-address-search-results {
position: absolute;
z-index: 1000;
right: 0;
bottom: calc(100% + 8px);
left: 0;
max-height: min(310px, 48vh);
margin: 0;
padding: 5px;
overflow-y: auto;
list-style: none;
border: 1px solid var(--tkrvue-map-control-border);
border-radius: 10px;
background: var(--tkrvue-map-control-surface-solid);
box-shadow: var(--tkrvue-map-control-shadow);
}
.tkrvue-address-search-results[hidden] {
display: none;
}
.tkrvue-address-search-option {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 7px;
align-items: start;
padding: 9px 10px;
border-radius: 7px;
color: var(--tkrvue-map-control-content);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.35;
cursor: pointer;
}
.tkrvue-address-search-option:hover,
.tkrvue-address-search-option.is-active {
background: var(--tkrvue-map-control-surface-hover);
color: var(--tkrvue-map-control-foreground);
}
.tkrvue-address-search-option-icon {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-map-control-foreground) 14%, transparent);
color: var(--tkrvue-map-control-foreground, #2f75b5);
}
.tkrvue-address-search-option-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.tkrvue-address-search-status {
padding: 11px 12px;
color: var(--tkrvue-map-control-muted);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.35;
}
.tkrvue-address-search-status.is-error {
color: var(--tkrvue-map-control-error);
background: var(--tkrvue-map-control-error-bg);
border-radius: 7px;
}
.tkrvue-address-result-marker {
border: 0;
background: transparent;
}
.tkrvue-address-result-marker > span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 3px solid #fff;
border-radius: 50% 50% 50% 12%;
background: var(--tkrvue-accent, #2f75b5);
color: #fff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.32);
transform: rotate(-45deg);
}
.tkrvue-address-result-marker svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
transform: rotate(45deg);
}
.leaflet-tooltip.tkrvue-address-result-tooltip {
max-width: min(280px, calc(100vw - 32px));
padding: 6px 8px;
white-space: normal;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 7px;
background: var(--tkrvue-map-tooltip-bg);
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.2;
}
.leaflet-tooltip-top.tkrvue-address-result-tooltip::before {
border-top-color: var(--tkrvue-map-tooltip-bg);
}
#map.tkrvue-identify-location-mode,
#map.tkrvue-identify-location-mode .leaflet-interactive {
cursor: crosshair !important;
}
.tkrvue-identify-location-control {
overflow: visible !important;
}
.tkrvue-identify-location-button {
position: relative;
display: grid !important;
place-items: center;
width: 34px !important;
height: 34px !important;
box-sizing: border-box;
color: var(--tkrvue-map-control-accent, #316da5) !important;
line-height: 1 !important;
}
.tkrvue-identify-location-button:hover,
.tkrvue-identify-location-button:focus-visible {
background: color-mix(in srgb, var(--tkrvue-map-control-accent, #316da5) 10%, #fff) !important;
}
.tkrvue-identify-location-button.is-active {
background: var(--tkrvue-map-control-accent, #316da5) !important;
color: #fff !important;
}
.tkrvue-identify-location-button svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tkrvue-identify-location-spinner {
display: none;
width: 17px;
height: 17px;
border: 2px solid rgba(47, 117, 181, 0.25);
border-top-color: currentColor;
border-radius: 50%;
animation: tkrvue-address-search-spin 0.75s linear infinite;
}
.tkrvue-identify-location-button.is-loading svg {
display: none;
}
.tkrvue-identify-location-button.is-loading .tkrvue-identify-location-spinner {
display: block;
}
.tkrvue-current-location-control {
position: relative;
touch-action: manipulation;
cursor: pointer;
}
.tkrvue-current-location-spinner {
display: none;
width: 17px;
height: 17px;
box-sizing: border-box;
border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
border-top-color: currentColor;
border-radius: 50%;
animation: tkrvue-address-search-spin 0.75s linear infinite;
}
.tkrvue-current-location-control.is-loading {
cursor: wait;
}
.tkrvue-current-location-control.is-loading svg {
display: none !important;
}
.tkrvue-current-location-control.is-loading .tkrvue-current-location-spinner {
display: block;
}
.tkrvue-identify-location-marker {
border: 0;
background: transparent;
}
.tkrvue-identify-location-marker > span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 3px solid #fff;
border-radius: 50% 50% 50% 12%;
background: var(--tkrvue-accent, #2f75b5);
color: #fff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.32);
transform: rotate(-45deg);
}
.tkrvue-identify-location-marker svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
transform: rotate(45deg);
}
.leaflet-popup.tkrvue-identify-location-popup .leaflet-popup-content-wrapper {
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 9px;
background: var(--tkrvue-map-tooltip-bg);
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
}
.leaflet-popup.tkrvue-identify-location-popup .leaflet-popup-tip {
background: var(--tkrvue-map-tooltip-bg);
}
.leaflet-popup.tkrvue-identify-location-popup .leaflet-popup-content {
margin: 8px calc(var(--tkrvue-map-close-size) + 8px) 8px 9px;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.2;
}
.leaflet-popup.tkrvue-identify-location-popup .leaflet-popup-close-button:hover,
.leaflet-popup.tkrvue-identify-location-popup .leaflet-popup-close-button:focus-visible {
background: rgba(47, 117, 181, 0.1);
color: var(--tkrvue-accent, #2f75b5);
}
.tkrvue-identify-location-popup-content {
display: grid;
gap: 3px;
}
.tkrvue-identify-location-popup-content strong {
color: var(--tkrvue-map-tooltip-text);
font-size: var(--tkrvue-font-size-md);
line-height: 1.2;
}
.tkrvue-identify-location-popup-message {
color: #b42318;
}
.tkrvue-identify-location-popup-coordinates {
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
}
@media (max-width: 700px) {
.tkrvue-address-search-control {
margin: 0 0 12px 12px !important;
}
.tkrvue-address-search-control.is-expanded {
width: min(310px, calc(100vw - 28px));
}
.tkrvue-address-search-control.is-expanded .tkrvue-address-search-form {
grid-template-columns: 36px minmax(72px, 1fr) minmax(132px, 148px) 32px;
}
}
@media (prefers-reduced-motion: reduce) {
.tkrvue-address-search-control {
transition: none;
}
}
.view-layer.collapsed-horizontal .view-panel {
display: none;
}
.view-resize-handle {
position: absolute;
top: 0;
bottom: 0;
left: -12px;
width: 24px;
height: auto;
transform: none;
border: 0;
border-radius: 0;
background: transparent;
color: var(--tkrvue-muted);
cursor: ew-resize;
pointer-events: auto;
z-index: 8;
touch-action: none;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: none;
}
.view-resize-handle > span {
border: 1px solid var(--tkrvue-border);
border-right: 0;
border-radius: 7px 0 0 7px;
box-shadow: -4px 6px 14px rgba(31,41,55,0.14);
}
.view-resize-handle:hover,
.view-resize-handle:hover span {
color: var(--tkrvue-accent);
}
.view-layer.collapsed-horizontal .view-resize-handle {
display: none;
}
body.view-layer-resizing {
cursor: ew-resize;
user-select: none;
}
.view-edge-toggle {
display: none;
width: 30px;
height: 100%;
border: 1px solid var(--tkrvue-border);
border-radius: 8px 0 0 8px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
cursor: pointer;
pointer-events: auto;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
box-shadow: 0 10px 24px rgba(31,41,55,0.18);
}
.view-edge-toggle:hover {
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-accent);
}
.view-edge-toggle svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
:root[data-theme="dark"] .view-edge-toggle {
border-color: rgba(255,255,255,0.72);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 14px 30px rgba(0,0,0,0.38);
}
.view-layer.collapsed-horizontal .view-edge-toggle {
display: inline-flex;
width: 100%;
border: 0;
border-radius: 8px 0 0 8px;
background: transparent;
box-shadow: none;
}
.view-panel {
position: relative;
width: 100%;
height: 100%;
max-height: 100%;
min-height: 0;
box-sizing: border-box;
background: var(--tkrvue-layer-bg);
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
box-shadow: 0 12px 30px rgba(31,41,55,0.18);
display: flex;
flex-direction: column;
pointer-events: auto;
overflow: hidden;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
color: var(--tkrvue-layer-text);
transition: height 0.2s ease, width 0.2s ease, opacity 0.18s ease, transform 0.18s ease;
}
/* Tous les messages présents et futurs des layers héritent des préférences
typographiques de l'utilisateur. Les dimensions propres aux icônes restent
définies par leurs composants dédiés. */
.view-panel :where([role="status"], [role="alert"]) {
font-family: var(--tkrvue-font-family);
}
.view-panel.collapsed-vertical {
height: 46px;
align-self: flex-start;
}
.view-panel.collapsed-vertical .view-body {
display: none;
}
.view-layer-navigation {
position: relative;
display: inline-flex;
align-items: center;
}
.view-mobile-anchor-toggle {
display: inline-flex;
}
.view-mobile-anchor-toggle[hidden],
.view-mobile-anchor-menu[hidden] {
display: none !important;
}
.view-mobile-anchor-menu {
position: absolute;
z-index: 95;
top: calc(100% + 4px);
right: 0;
display: grid;
gap: 3px;
width: min(290px, calc(100vw - 20px));
max-height: min(62vh, 440px);
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
}
.view-mobile-anchor-menu button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-width: 0;
min-height: 34px;
padding: 6px 9px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--tkrvue-layer-text);
font: inherit;
text-align: left;
cursor: pointer;
}
.view-layer-navigation-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.view-layer-navigation-count {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-sm);
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.view-mobile-anchor-menu button:hover,
.view-mobile-anchor-menu button:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 12%, transparent);
color: var(--tkrvue-accent);
outline: none;
}
.view-mobile-anchor-menu button.is-active {
background: color-mix(in srgb, var(--tkrvue-accent) 15%, transparent);
color: var(--tkrvue-accent);
font-weight: 800;
}
.view-mobile-anchor-menu button.is-active .view-layer-navigation-count {
background: color-mix(in srgb, var(--tkrvue-accent) 20%, var(--tkrvue-layer-surface-bg));
}
.view-layer-navigation-group {
display: block;
margin: 5px 6px 1px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
line-height: 1.2;
}
.view-layer-navigation-group:first-child {
margin-top: 1px;
}
.view-header {
flex: 0 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
cursor: default;
}
.view-title-block {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex-wrap: wrap;
}
.view-title-block > div:first-child,
.view-title-block > h2 {
flex: 0 0 auto;
}
.view-header-meta {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
flex: 1 1 auto;
flex-wrap: wrap;
}
.view-actions {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.view-header-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.view-kicker {
font-size: 12px;
color: var(--tkrvue-muted);
}
.view-kicker:empty {
display: none;
}
.view-header h2 {
margin: 0;
font-size: var(--tkrvue-font-size-md);
line-height: 1.2;
font-weight: 600;
}
.view-icon-button {
width: 30px;
min-width: 30px;
height: 30px;
border: 0;
border-radius: 4px;
background: transparent;
cursor: pointer;
font-size: 16px;
font-weight: bold;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.view-icon-button {
color: var(--tkrvue-layer-text);
}
.view-icon-button svg {
width: 16px;
height: 16px;
stroke: currentColor;
color: currentColor;
}
.view-icon-button:hover {
background: rgba(71,85,105,0.1);
}
.view-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
padding: 12px;
display: flex;
flex-direction: column;
font-size: var(--tkrvue-font-size-md);
}
/* La configuration « Menus et droits » garde un défilement au niveau de la
* layer (sous son en-tête) et un second défilement dans l'encart du tableau.
* La layer peut ainsi atteindre tous les contrôles sans réduire la liste. */
.view-body.menu-config-view-body {
overflow-y: auto;
overflow-x: hidden;
}
.view-body.menu-config-view-body .menu-config-table-wrap {
flex: 0 1 auto;
min-height: 280px;
max-height: min(72dvh, 760px);
overflow-x: auto;
overflow-y: auto;
scrollbar-gutter: stable;
overscroll-behavior: contain;
}
.view-body.vehicle-onboarding-view-body {
padding-top: 0;
}
.vehicle-onboarding-view-body > .context-help-box:first-child {
margin-top: 12px;
}
.view-body input,
.view-body select,
.view-body textarea,
.view-body button {
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.view-body label {
font-size: var(--tkrvue-font-size-sm);
}
.view-body .saas-tab,
.view-body .layer-tab,
.view-body .appearance-tab,
.view-body .context-help-content,
.view-body .cfg-log-row,
.view-body .appearance-language-help {
font-size: var(--tkrvue-font-size-md);
}
.view-body label > span,
.view-body small,
.view-body .metric span,
.view-body .metric-card span,
.view-body .muted-cell {
font-size: var(--tkrvue-font-size-sm);
}
.view-body h3,
.view-body .context-help-title,
.view-body .tracker-config-subtitle,
.view-body .security-section-title {
font-size: var(--tkrvue-font-size-lg);
}
.view-body.appearance-view-body {
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
}
.view-body.tabbed-view-body {
overflow: hidden;
}
.view-body.tabbed-view-body .layer-tabs {
flex: 0 0 auto;
}
.view-body.tabbed-view-body .layer-tab-panel,
.view-body.tabbed-view-body .saas-tab-panel,
.view-body.tabbed-view-body .appearance-tab-panel {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
padding-right: 4px;
}
.view-body.organization-settings-view-body #organizationSettingsPanel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.view-body.organization-settings-view-body .organization-detail-card {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.view-body.organization-settings-view-body .organization-detail-card > .layer-tabs {
flex: 0 0 auto;
}
.view-body.organization-settings-view-body .organization-detail-card > .layer-tab-panel {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
}
.view-scroll-top {
position: absolute;
right: 14px;
bottom: 14px;
z-index: 80;
width: 40px;
height: 40px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 72%, #ffffff);
border-radius: 999px;
background: var(--tkrvue-accent);
color: #ffffff;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 12px 26px rgba(15,23,42,0.24);
}
.view-scroll-top.is-visible {
display: inline-flex;
}
.view-layer.collapsed-horizontal .view-scroll-top,
.view-layer.collapsed-vertical .view-scroll-top,
.view-panel.collapsed-vertical .view-scroll-top {
display: none !important;
}
.view-scroll-top:hover {
filter: brightness(0.96);
transform: translateY(-1px);
}
.view-scroll-top svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.view-confirm-backdrop {
position: absolute;
inset: 0;
z-index: 2000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 58px 16px 16px;
background: rgba(15,23,42,0.16);
pointer-events: auto;
}
.view-confirm-backdrop.view-confirm-global {
position: fixed;
z-index: 5000;
align-items: center;
padding: 16px;
}
.view-confirm {
width: min(440px, 100%);
border: 3px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
box-shadow: 0 18px 45px rgba(15,23,42,0.24);
display: grid;
grid-template-columns: 42px 1fr;
gap: 10px;
padding: 14px;
color: var(--tkrvue-layer-text);
}
:root[data-theme="dark"] .view-confirm {
border-color: rgba(255,255,255,0.78);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 22px 52px rgba(0,0,0,0.48);
}
.view-confirm-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--tkrvue-status-info-bg);
color: var(--tkrvue-status-info-text);
font-size: 20px;
font-weight: 700;
}
.view-confirm-danger .view-confirm-icon {
background: rgba(239,68,68,0.12);
color: #dc2626;
border: 1px solid rgba(239,68,68,0.34);
}
:root[data-theme="dark"] .view-confirm-danger .view-confirm-icon {
background: rgba(248,113,113,0.14);
color: #fca5a5;
border-color: rgba(248,113,113,0.42);
}
.view-confirm-icon svg,
.admin-actions button svg,
.primary-action svg,
.secondary-action svg,
.secondary-icon-action svg,
.danger-action svg,
.tracker-icon-action svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
}
.view-confirm-icon svg {
width: 22px;
height: 22px;
}
.tkrvue-icon-button {
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
line-height: 1;
box-sizing: border-box;
}
.tkrvue-icon-button svg {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
stroke-width: 2.15;
}
.tkrvue-save-action svg {
width: 21px;
height: 21px;
min-width: 21px;
min-height: 21px;
stroke-width: 2.25;
}
.view-confirm-content h3 {
margin: 0;
font-size: 15px;
line-height: 1.25;
}
.view-confirm-content p {
margin: 6px 0 0;
color: var(--tkrvue-muted);
font-size: 13px;
line-height: 1.35;
}
.view-confirm-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 4px;
}
.view-confirm-actions button {
height: 30px;
border-radius: 6px;
padding: 0 12px;
cursor: pointer;
font-size: 13px;
}
.view-confirm-actions .view-confirm-cancel-icon {
width: 32px;
min-width: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.view-confirm-actions .view-confirm-cancel-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.view-confirm-secondary {
border: 1px solid var(--tkrvue-border);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.view-confirm-actions .view-confirm-primary {
border: 1px solid var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
}
.organization-actions-column,
.organization-row-actions {
width: 58px;
text-align: center;
}
.organization-row-actions .tkrvue-icon-button {
margin: 0 auto;
}
.organization-delete-confirm {
width: min(700px, 100%);
max-height: min(92dvh, 900px);
overflow: auto;
overscroll-behavior: contain;
}
.organization-delete-preview {
grid-column: 1 / -1;
display: grid;
gap: 8px;
max-height: min(34vh, 300px);
overflow: auto;
padding: 11px 13px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
overscroll-behavior: contain;
}
.organization-delete-preview h4,
.organization-delete-preview p {
margin: 0;
}
.organization-delete-preview h4 {
font-size: 13px;
}
.organization-delete-dependency-list,
.organization-delete-target-list {
display: grid;
gap: 5px;
padding: 0;
margin: 0;
list-style: none;
}
.organization-delete-dependency-list li,
.organization-delete-target-list li {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
border-bottom: 1px solid var(--tkrvue-border);
padding: 3px 0 5px;
font-size: 12px;
}
.organization-delete-target-list li {
color: var(--tkrvue-muted);
}
.organization-delete-pending-note {
margin: 0;
padding: 9px 11px;
border-radius: 7px;
background: var(--tkrvue-status-warning-bg, #fef3c7);
color: var(--tkrvue-status-warning-text, #92400e);
font-size: 12px;
line-height: 1.4;
}
.organization-delete-pending-pill {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 4px 8px;
color: var(--tkrvue-status-warning-text, #92400e);
background: var(--tkrvue-status-warning-bg, #fef3c7);
font-size: 11px;
font-weight: 700;
}
.organization-deletion-pending-date {
display: block;
margin-top: 4px;
color: var(--tkrvue-muted);
font-size: 10px;
}
.organization-delete-form {
grid-column: 1 / -1;
display: grid;
gap: 11px;
}
.organization-delete-form > label:not(.organization-delete-archive-option) {
display: grid;
gap: 5px;
color: var(--tkrvue-layer-text);
font-size: 12px;
font-weight: 650;
}
.organization-delete-form input[type="text"],
.organization-delete-form input[type="password"] {
width: 100%;
min-height: 36px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 7px 9px;
font: inherit;
}
.organization-delete-form input:focus {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 35%, transparent);
outline-offset: 1px;
border-color: var(--tkrvue-accent);
}
.organization-delete-archive-option {
display: flex;
align-items: flex-start;
gap: 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-card-bg, var(--tkrvue-layer-surface-bg));
padding: 10px;
color: var(--tkrvue-layer-text);
}
.organization-delete-archive-option input {
margin-top: 2px;
}
.organization-delete-archive-option span {
display: grid;
gap: 3px;
}
.organization-delete-archive-option small {
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.35;
}
.organization-delete-dialog-status {
border-radius: 7px;
padding: 8px 10px;
font-size: 12px;
line-height: 1.35;
}
.organization-delete-dialog-status.is-error {
color: var(--tkrvue-status-error-text);
background: var(--tkrvue-status-error-bg);
}
.organization-delete-dialog-status.is-info {
color: var(--tkrvue-status-info-text);
background: var(--tkrvue-status-info-bg);
}
.organization-delete-form .view-confirm-actions {
margin-top: 0;
}
.organization-delete-form .danger-action {
display: inline-flex;
align-items: center;
gap: 7px;
}
.organization-delete-form .danger-action svg {
width: 17px;
height: 17px;
}
@media (max-width: 640px) {
.organization-delete-confirm {
width: min(100%, 520px);
max-height: calc(100vh - 20px);
max-height: calc(100dvh - 20px);
padding: 16px;
}
.organization-delete-preview {
max-height: min(28vh, 240px);
}
.organization-delete-form .view-confirm-actions {
display: grid;
grid-template-columns: 1fr;
}
}
.view-empty {
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
color: var(--tkrvue-muted);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
text-align: center;
}
.privacy-center-view-body .context-help-box {
flex: 0 0 auto;
}
.privacy-center-view-body .layer-tab-panel {
padding-top: 10px;
}
.privacy-center-metrics .metric {
min-width: 0;
}
.privacy-center-metrics .metric strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.privacy-center-intro {
margin: 0 0 12px;
padding: 11px 13px;
border-left: 4px solid var(--tkrvue-accent);
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-layer-text);
line-height: 1.5;
}
.privacy-center-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
align-items: stretch;
}
.privacy-center-grid-two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.privacy-center-card {
min-width: 0;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 11px;
padding: 15px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
box-sizing: border-box;
}
.privacy-center-card.is-accent {
border-color: color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-surface-bg));
}
.privacy-center-card-icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.privacy-center-card-icon svg,
.privacy-document-row-icon svg,
.privacy-center-empty-state > span svg,
.privacy-center-policy-note > svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.privacy-center-card-content {
min-width: 0;
}
.privacy-center-card-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 7px;
}
.privacy-center-card h3 {
margin: 0;
color: var(--tkrvue-layer-text);
line-height: 1.3;
}
.privacy-center-card p {
margin: 0;
color: var(--tkrvue-muted);
line-height: 1.52;
}
.privacy-center-card ul {
margin: 10px 0 0;
padding-left: 18px;
color: var(--tkrvue-muted);
line-height: 1.5;
}
.privacy-center-card li + li {
margin-top: 4px;
}
.privacy-center-card-footer {
margin-top: 10px;
}
.privacy-center-counter-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-bottom: 12px;
}
.privacy-center-counter-row > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 42px;
padding: 8px 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.privacy-center-counter-row span {
color: var(--tkrvue-muted);
}
.privacy-center-counter-row strong {
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-lg);
}
.privacy-policy-table,
.privacy-document-list {
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
}
.privacy-policy-row,
.privacy-document-row {
display: grid;
align-items: center;
gap: 12px;
min-height: 45px;
padding: 9px 12px;
border-top: 1px solid var(--tkrvue-border);
box-sizing: border-box;
}
.privacy-policy-row:first-child,
.privacy-document-row:first-child {
border-top: 0;
}
.privacy-policy-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.privacy-policy-row span {
color: var(--tkrvue-muted);
}
.privacy-policy-row strong {
color: var(--tkrvue-layer-text);
text-align: right;
}
.privacy-policy-row.is-editable {
grid-template-columns: minmax(0, 1fr) minmax(230px, 340px);
}
.privacy-retention-policy-form {
display: grid;
gap: 10px;
}
.privacy-retention-control {
display: grid;
grid-template-columns: minmax(84px, 110px) minmax(0, 1fr);
align-items: center;
gap: 10px;
}
.privacy-retention-control input {
width: 100%;
min-height: 36px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-layer-text);
padding: 6px 8px;
font: inherit;
}
.privacy-retention-control span {
color: var(--tkrvue-layer-text);
font-weight: 700;
text-align: right;
}
.privacy-retention-enforcement {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
color: var(--tkrvue-layer-text);
}
.privacy-retention-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.privacy-retention-actions small {
color: var(--tkrvue-muted);
}
.privacy-center-policy-note {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 12px;
}
.privacy-center-policy-note > svg {
flex: 0 0 21px;
color: var(--tkrvue-accent);
}
.privacy-gsm-retention {
margin-top: 14px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
}
.privacy-gsm-retention > p {
margin: 0 0 12px;
color: var(--tkrvue-muted);
line-height: 1.5;
}
.privacy-gsm-retention-form {
display: grid;
grid-template-columns: repeat(2, minmax(190px, 0.75fr)) minmax(280px, 1.5fr) auto;
gap: 12px;
align-items: end;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--tkrvue-border);
}
.privacy-gsm-retention-form label {
display: grid;
gap: 5px;
color: var(--tkrvue-layer-text);
}
.privacy-gsm-retention-form label > span {
font-size: var(--tkrvue-font-size-sm);
font-weight: 650;
}
.privacy-gsm-retention-form select,
.privacy-gsm-retention-form textarea {
width: 100%;
min-height: 38px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-layer-text);
padding: 7px 9px;
font: inherit;
}
.privacy-gsm-retention-form textarea {
resize: vertical;
}
.privacy-gsm-retention-justification small {
color: var(--tkrvue-muted);
}
.privacy-gsm-retention-justification.is-required > span::after {
content: " *";
color: var(--tkrvue-danger, #dc2626);
}
.privacy-gsm-retention-preview {
grid-column: 1 / -1;
padding: 8px 10px;
border-left: 3px solid var(--tkrvue-warning, #d97706);
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-warning, #d97706) 9%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-layer-text);
}
.privacy-document-list {
margin-top: 12px;
}
.privacy-document-row {
grid-template-columns: 25px minmax(0, 1fr) auto;
}
.privacy-document-row-icon {
display: inline-flex;
color: var(--tkrvue-accent);
}
.privacy-center-empty-state {
min-height: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
border: 1px dashed color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
text-align: center;
}
.privacy-center-empty-state > span {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.privacy-center-empty-state h3,
.privacy-center-empty-state p {
margin: 0;
}
.privacy-center-empty-state p {
max-width: 620px;
color: var(--tkrvue-muted);
line-height: 1.5;
}
@media (max-width: 900px) {
.privacy-center-grid-two,
.privacy-center-counter-row {
grid-template-columns: 1fr;
}
.privacy-document-row {
grid-template-columns: 25px minmax(0, 1fr);
}
.privacy-document-row .status-pill {
grid-column: 2;
justify-self: start;
}
.privacy-gsm-retention-form {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.privacy-center-grid {
grid-template-columns: 1fr;
}
.privacy-center-card {
grid-template-columns: 32px minmax(0, 1fr);
padding: 12px;
}
.privacy-center-card-icon {
width: 32px;
height: 32px;
}
.privacy-center-card-heading {
flex-direction: column;
}
.privacy-policy-row {
grid-template-columns: 1fr;
gap: 3px;
}
.privacy-policy-row.is-editable,
.privacy-retention-control {
grid-template-columns: 1fr;
}
.privacy-retention-control span {
text-align: left;
}
.privacy-retention-actions {
align-items: stretch;
flex-direction: column;
}
.privacy-policy-row strong {
text-align: left;
}
}
.metric-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 8px;
flex: 0 0 auto;
}
.metric-row.compact-metrics {
grid-template-columns: repeat(auto-fit, minmax(140px, 220px));
align-items: stretch;
}
.metric {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
padding: 7px 10px;
background: var(--tkrvue-layer-surface-bg);
display: flex;
align-items: center;
gap: 6px;
min-height: 36px;
}
.metric span {
display: inline;
font-size: var(--tkrvue-font-size-sm);
color: var(--tkrvue-muted);
}
.metric span::after {
content: " :";
}
.metric strong {
display: inline-flex;
align-items: center;
margin-top: 0;
font-size: var(--tkrvue-font-size-lg);
line-height: 1;
}
.metric-card {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 7px 10px;
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.metric-card span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.metric-card strong {
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-lg);
line-height: 1;
}
.organization-profile-badge {
display: inline-flex !important;
width: fit-content;
align-items: center;
border-radius: 999px;
padding: 4px 10px;
font-size: 13px !important;
font-weight: 800;
border: 1px solid transparent;
}
.organization-profile-badge.admin {
background: #dcfce7;
color: #166534;
border-color: #86efac;
}
.organization-profile-badge.superadmin {
background: #d1fae5;
color: #065f46;
border-color: #34d399;
}
.organization-profile-badge.premium {
background: #f3e8ff;
color: #6d28d9;
border-color: #a855f7;
box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}
.organization-profile-badge.user {
background: #e0f2fe;
color: #075985;
border-color: #7dd3fc;
}
.table-wrap {
overflow: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
flex: 1 1 auto;
min-height: 0;
max-height: min(60dvh, 640px);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-table th,
.data-table td {
padding: 4px 6px;
border-bottom: 1px solid var(--tkrvue-border);
text-align: left;
vertical-align: top;
}
.data-table tbody td:first-child {
border-left: 3px solid var(--tkrvue-border);
}
.data-table tbody tr:hover td:first-child {
border-left-color: var(--tkrvue-accent);
}
.drag-column {
width: 28px;
}
.drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: #64748b;
cursor: move;
user-select: none;
touch-action: none;
border-radius: 4px;
}
.drag-handle:hover {
background: #e2e8f0;
color: #1f2937;
}
.dragging-row {
opacity: 0.5;
}
body.menu-row-pointer-dragging {
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.drag-over-row {
outline: 2px solid var(--tkrvue-accent);
outline-offset: -2px;
}
.data-table th {
position: sticky;
top: 0;
background: var(--tkrvue-layer-surface-bg);
z-index: 1;
}
.data-table tbody tr {
cursor: pointer;
}
.data-table tbody tr:hover {
background: var(--tkrvue-layer-surface-bg);
}
.table-sort-button {
width: 100%;
border: 0;
background: transparent;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0;
font: inherit;
font-weight: 800;
cursor: pointer;
text-align: left;
}
.table-sort-button span {
color: var(--tkrvue-muted);
font-size: 13px;
}
.table-sort-button.is-active span {
color: var(--tkrvue-accent);
}
.organizations-toolbar {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) minmax(170px, 210px) 36px 36px;
gap: 8px;
align-items: end;
margin-bottom: 8px;
}
.organizations-toolbar label {
display: grid;
gap: 4px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.organizations-toolbar input,
.organizations-toolbar select {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 9px;
}
.organization-classification-pill {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 3px 9px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-text);
font-size: 12px;
font-weight: 700;
line-height: 1.15;
white-space: nowrap;
}
.organization-classification-pill.is-individual,
.organization-classification-pill.is-family {
border-color: color-mix(in srgb, var(--tkrvue-success, #15803d) 35%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-success, #15803d) 12%, var(--tkrvue-layer-surface-bg));
}
.organization-classification-pill.is-association {
border-color: color-mix(in srgb, var(--tkrvue-warning, #d97706) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-warning, #d97706) 12%, var(--tkrvue-layer-surface-bg));
}
.organization-classification-pill.is-public_body {
border-color: color-mix(in srgb, var(--tkrvue-muted) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-muted) 10%, var(--tkrvue-layer-surface-bg));
}
.organization-classification-help {
padding-left: 9px;
border-left: 3px solid var(--tkrvue-accent);
color: var(--tkrvue-muted);
}
.organizations-toolbar button {
width: 36px;
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
cursor: pointer;
}
.organizations-toolbar button svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.organizations-active {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
min-height: 32px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 6px 9px;
margin-bottom: 8px;
}
.organization-settings-selector {
display: flex;
align-items: center;
gap: 8px;
width: min(520px, 100%);
}
.organization-settings-current {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 6px 10px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.organization-settings-current > span,
.organization-settings-selector span {
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-settings-selector select {
flex: 1 1 auto;
}
.organization-settings-language {
display: flex;
align-items: center;
gap: 10px;
width: min(480px, 100%);
margin: 8px 0 10px;
}
.organization-settings-language-label {
flex: 0 0 auto;
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-settings-language-picker {
flex: 1 1 auto;
min-width: 230px;
}
.organizations-table tbody tr.is-selected {
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-surface-bg));
}
.organizations-table tbody tr.is-selected td:first-child {
border-left-color: var(--tkrvue-accent);
}
.organization-detail-card {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 12px;
}
.organization-detail-card h3 {
margin: 0 0 8px;
font-size: 16px;
}
.organization-detail-card p {
margin: 8px 0 0;
line-height: 1.4;
}
.organization-detail-grid {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: 8px;
}
.organization-archives-panel {
display: grid;
gap: 10px;
}
.organization-archives-table-wrap {
overflow-x: auto;
}
.organization-archives-table td small,
.organization-archives-table th small {
display: block;
margin-top: 3px;
color: var(--tkrvue-muted);
font-size: 11px;
}
.organization-archives-table .organization-row-actions {
white-space: nowrap;
text-align: right;
}
.organization-archives-table .organization-row-actions .secondary-action {
min-height: 32px;
padding: 5px 9px;
}
.organization-detail-grid > div,
.organization-access-lines span {
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
padding: 8px;
}
.organization-detail-grid span {
display: block;
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-detail-grid strong {
display: block;
margin-top: 3px;
}
.organization-identity-readonly {
display: grid;
gap: 10px;
}
.organization-readonly-logo {
width: min(260px, 100%);
min-height: 74px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.organization-readonly-logo img {
max-width: 100%;
max-height: 92px;
object-fit: contain;
}
.organization-access-lines {
display: grid;
gap: 7px;
margin-top: 10px;
}
.organization-resource-layout {
display: grid;
grid-template-columns: minmax(260px, 340px) minmax(420px, 1fr);
gap: 12px;
min-height: 0;
}
.organization-resource-list,
.organization-resource-form {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 10px;
min-height: 0;
}
.organization-resource-list {
display: flex;
flex-direction: column;
gap: 7px;
max-height: min(60vh, 560px);
overflow: auto;
}
.organization-resource-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.organization-resource-head h3 {
margin: 0;
font-size: 15px;
}
.organization-resource-head span {
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-resource-head > div {
min-width: 0;
}
.iot-inventory-sheet,
.iot-inventory-links {
margin-top: 12px;
}
.iot-inventory-sheet .organization-resource-head {
margin-bottom: 8px;
}
.iot-inventory-links {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 10px;
}
.data-table tbody tr.is-selected {
background: rgba(47, 114, 178, 0.12);
}
.data-table tbody tr.is-selected td:first-child {
border-left-color: var(--tkrvue-accent);
}
.organization-settings-list-head {
justify-content: flex-start;
align-items: flex-start;
}
.organization-settings-title-actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin-bottom: 4px;
}
.organization-settings-title-actions h4 {
margin: 0;
font-size: 15px;
}
.organization-settings-title-actions .organization-resource-actions {
margin: 0;
}
.organization-resource-row {
width: 100%;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid transparent;
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 8px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
text-align: left;
cursor: pointer;
}
.organization-resource-row:hover,
.organization-resource-row.is-selected {
border-left-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-surface-bg));
}
.organization-resource-row.is-disabled {
opacity: 0.68;
}
.organization-resource-row strong,
.organization-resource-row small {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.organization-resource-row small {
color: var(--tkrvue-muted);
margin-top: 3px;
}
.organization-resource-empty {
border: 1px dashed var(--tkrvue-border);
border-radius: 8px;
color: var(--tkrvue-muted);
padding: 18px 10px;
text-align: center;
}
.organization-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 7px 12px;
}
.organization-form-grid label {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
gap: 6px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-form-grid label > span {
min-width: 0;
color: var(--tkrvue-muted);
line-height: 1.2;
}
.required-marker {
margin-left: 4px;
color: #ef4444;
font-size: 14px;
font-weight: 800;
line-height: 1;
vertical-align: middle;
}
.required-legend {
margin: 4px 0 8px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.required-legend .required-marker {
margin-left: 0;
}
.organization-form-grid label.span-2,
.organization-form-grid .span-2 {
grid-column: 1 / -1;
}
.organization-form-grid .span-4 {
grid-column: 1 / -1;
}
.organization-form-grid label.span-2 {
grid-template-columns: max-content minmax(0, 1fr);
}
.organization-address-autocomplete {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
gap: 6px 12px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-address-autocomplete.is-open {
z-index: 30;
}
.organization-address-label {
color: var(--tkrvue-muted);
line-height: 1.2;
}
.organization-address-control {
position: relative;
min-width: 0;
}
.organization-address-control > input {
width: 100%;
padding-right: 34px;
}
.organization-address-search-spinner {
position: absolute;
top: 50%;
right: 10px;
display: none;
width: 15px;
height: 15px;
border: 2px solid color-mix(in srgb, var(--tkrvue-accent) 24%, transparent);
border-top-color: var(--tkrvue-accent);
border-radius: 50%;
transform: translateY(-50%);
animation: tkrvue-address-search-spin 0.75s linear infinite;
pointer-events: none;
}
.organization-address-autocomplete.is-loading .organization-address-search-spinner {
display: block;
}
.organization-address-suggestions {
position: absolute;
z-index: 35;
top: calc(100% + 4px);
right: 0;
left: 0;
max-height: min(280px, 38vh);
margin: 0;
padding: 5px;
overflow-y: auto;
list-style: none;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-bg);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
}
.organization-address-suggestions[hidden] {
display: none;
}
.organization-address-suggestions .tkrvue-address-search-option {
color: var(--tkrvue-layer-text);
}
.organization-address-suggestions .tkrvue-address-search-option:hover,
.organization-address-suggestions .tkrvue-address-search-option.is-active {
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-bg));
color: var(--tkrvue-accent);
}
.organization-address-autocomplete-help {
grid-column: 2;
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.35;
}
.organization-subsection {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
padding: 10px 12px;
}
.organization-collapsible-head {
align-items: flex-start;
justify-content: flex-start;
}
.organization-collapsible-head .organization-resource-actions {
margin-left: auto;
}
.organization-collapsible-icon-toggle {
width: 26px;
height: 26px;
flex: 0 0 26px;
border: 0;
background: transparent;
color: var(--tkrvue-accent);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
font: inherit;
}
.organization-collapsible-icon-toggle .context-help-chevron {
font-size: 14px;
line-height: 1;
transition: transform 0.16s ease;
}
.organization-collapsible-section.is-collapsed .organization-collapsible-body {
display: none;
}
.organization-collapsible-section.is-collapsed .context-help-chevron {
transform: rotate(-90deg);
}
.organization-form-grid.compact {
margin-top: 8px;
}
.organization-user-source-hint {
margin: 8px 0 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-sm, 12px);
line-height: 1.35;
}
.organization-api-client-control {
display: grid;
min-width: 0;
gap: 4px;
}
.organization-api-client-hint {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-sm, 12px);
line-height: 1.35;
}
.organization-meta-field {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
gap: 6px;
color: var(--tkrvue-muted);
font-size: 12px;
align-content: end;
}
.organization-meta-field strong {
color: var(--tkrvue-text);
font-size: 13px;
font-weight: 700;
line-height: 1.25;
}
.organization-form-grid input,
.organization-form-grid select,
.organization-form-grid textarea {
width: 100%;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 7px 9px;
font: inherit;
}
.organization-form-grid textarea {
resize: vertical;
min-height: 76px;
}
.organization-form-grid label:has(textarea) {
align-items: start;
}
.organization-form-grid .check-line {
grid-template-columns: auto 1fr;
align-items: center;
align-content: center;
color: var(--tkrvue-text);
}
.organization-form-grid .check-line input {
width: auto;
}
.organization-coordinates-row {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 12px;
}
.organization-coordinates-row label {
grid-column: auto;
}
.organization-settings-section {
display: grid;
gap: 10px;
margin-top: 10px;
}
.organization-site-type-list {
display: grid;
gap: 6px;
}
.organization-site-type-row {
display: grid;
grid-template-columns: 32px minmax(120px, 180px) minmax(180px, 1fr) 36px;
gap: 8px;
align-items: center;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 6px;
}
.organization-site-type-row.is-dragging {
position: fixed;
z-index: 32050;
pointer-events: none;
opacity: 0.92;
box-shadow: 0 14px 26px rgba(15, 23, 42, 0.22);
}
.organization-site-type-placeholder {
border: 1px dashed var(--tkrvue-accent);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, transparent);
}
.organization-site-type-row code {
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-site-type-row input,
.organization-site-type-add input {
width: 100%;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 7px 9px;
font: inherit;
}
.organization-site-type-row button,
.organization-site-type-add button {
width: 36px;
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.organization-site-type-row .organization-site-type-drag {
cursor: grab;
color: var(--tkrvue-muted);
touch-action: none;
user-select: none;
}
.organization-site-type-row .organization-site-type-drag:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.organization-site-type-row button:hover,
.organization-site-type-add button:hover {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
}
.organization-site-type-add {
display: grid;
grid-template-columns: minmax(180px, 1fr) 38px;
gap: 8px;
align-items: center;
}
.organization-asset-category-list {
display: grid;
gap: 8px;
margin-top: 12px;
}
.organization-asset-category-default,
.organization-asset-category-row {
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
padding: 8px;
}
.organization-asset-category-default {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.organization-asset-category-default small {
color: var(--tkrvue-muted);
}
.organization-asset-category-row {
display: grid;
grid-template-columns: minmax(0, 520px) auto auto auto;
justify-content: start;
gap: 8px;
align-items: center;
}
.organization-asset-category-row input[type="text"] {
min-width: 0;
}
.organization-asset-category-add {
display: grid;
grid-template-columns: minmax(0, 520px) auto;
align-items: center;
justify-content: start;
width: min(100%, 630px);
}
.organization-asset-category-add input {
flex: 1 1 auto;
min-width: 0;
}
.organization-asset-category-add .primary-action {
width: auto;
min-width: 92px;
min-height: 34px;
padding: 0 12px;
}
.organization-asset-category-board {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--tkrvue-border);
}
.organization-asset-category-board-head,
.organization-asset-category-dropzone-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.organization-asset-category-board-head h5 {
margin: 0 0 3px;
}
.organization-asset-category-board-head span,
.organization-asset-category-board-head small,
.organization-asset-category-dropzone-head small {
color: var(--tkrvue-muted);
}
.organization-asset-category-dropzones {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-top: 12px;
}
.organization-asset-category-dropzone {
min-width: 0;
border: 1px dashed var(--tkrvue-border-strong, var(--tkrvue-border));
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-input-bg) 72%, transparent);
padding: 9px;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.organization-asset-category-dropzone.is-drag-over {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-input-bg));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tkrvue-accent) 20%, transparent);
}
.organization-asset-category-dropzone.is-disabled {
opacity: .72;
}
.organization-asset-category-dropzone-body {
display: grid;
gap: 6px;
min-height: 38px;
margin-top: 8px;
}
.organization-asset-category-dropzone-empty {
display: block;
padding: 8px 5px;
color: var(--tkrvue-muted);
font-size: .88rem;
}
.organization-asset-category-asset {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-surface, #fff);
padding: 6px 7px;
cursor: grab;
}
.organization-asset-category-asset:active,
.organization-asset-category-asset.is-dragging {
cursor: grabbing;
opacity: .65;
}
.organization-asset-category-asset-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.organization-asset-category-asset select {
flex: 0 0 128px;
min-width: 0;
padding: 4px 6px;
font-size: .8rem;
}
@media (max-width: 700px) {
.organization-asset-category-row {
grid-template-columns: minmax(0, 1fr) auto auto;
justify-content: stretch;
}
.organization-asset-category-row .check-line {
grid-column: 1 / -1;
}
.organization-asset-category-dropzones {
grid-template-columns: 1fr;
}
.organization-asset-category-add {
grid-template-columns: 1fr;
width: 100%;
}
.organization-asset-category-add .primary-action {
width: 100%;
}
.organization-asset-category-asset select {
flex-basis: 116px;
}
}
.organization-resource-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 10px;
}
.organization-resource-actions-top {
flex: 0 0 auto;
margin-top: 0;
}
.organization-resource-actions button {
width: 36px;
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.organization-resource-actions button:not(.primary-action):last-child {
color: #ef4444;
}
.organization-resource-actions button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.organization-resource-actions svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.organization-geocode-row {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 76%, var(--tkrvue-input-bg));
padding: 8px;
}
.organization-geocode-row button {
width: 36px;
height: 34px;
flex: 0 0 auto;
border: 1px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.organization-geocode-row button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.organization-geocode-row svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.organization-geocode-row span {
color: var(--tkrvue-muted);
font-size: 12px;
line-height: 1.35;
}
.organization-geocode-row .organization-streetview-open {
width: auto;
min-width: max-content;
padding: 0 12px;
margin-left: auto;
gap: 7px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-accent);
}
.organization-geocode-row .organization-streetview-open:hover {
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-surface-bg));
}
.organization-geocode-row .organization-streetview-open span {
color: inherit;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
@media (max-width: 720px) {
.organization-geocode-row {
flex-wrap: wrap;
}
.organization-geocode-row .organization-streetview-open {
width: 100%;
margin-left: 0;
}
}
.organization-user-link {
grid-column: 1 / -1;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 72%, var(--tkrvue-input-bg));
padding: 8px;
display: grid;
gap: 7px;
}
.organization-linked-user {
min-height: 30px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
color: var(--tkrvue-text);
}
.organization-linked-user button {
width: 26px;
height: 26px;
border: 1px solid #fecaca;
border-radius: 7px;
background: #fee2e2;
color: #dc2626;
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.organization-user-results {
max-height: 178px;
overflow: auto;
display: grid;
gap: 6px;
}
.organization-user-results-info {
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-user-results button {
width: 100%;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 7px 8px;
display: grid;
gap: 2px;
text-align: left;
cursor: pointer;
}
.organization-user-results button:hover {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-input-bg));
}
.organization-user-results strong {
font-size: 13px;
}
.organization-user-results span {
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-media-block {
grid-column: 1 / -1;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 8px;
display: grid;
gap: 7px;
}
.organization-media-block.is-drag-over {
border-color: var(--tkrvue-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--tkrvue-accent) 24%, transparent);
}
.organization-media-block.compact {
grid-column: auto;
}
.organization-logo-block {
width: min(100%, 520px);
}
.organization-logo-block .organization-media-preview {
min-height: 118px;
}
.organization-logo-block .organization-media-preview img {
max-height: 132px;
}
.organization-site-photos {
display: grid;
gap: 8px;
}
.organization-media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
gap: 9px;
}
.organization-media-title {
display: grid;
gap: 2px;
}
.organization-media-title strong {
color: var(--tkrvue-text);
font-size: 13px;
}
.organization-media-title span,
.organization-media-block small {
color: var(--tkrvue-muted);
font-size: 12px;
}
.organization-media-preview {
min-height: 88px;
border: 1px dashed var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.organization-media-preview.has-image {
border-style: solid;
background: var(--tkrvue-layer-surface-bg);
}
.organization-media-preview img {
width: 100%;
max-height: 150px;
object-fit: contain;
display: block;
}
.organization-media-actions {
display: grid;
grid-template-columns: auto minmax(0, 1fr) 36px 36px;
gap: 6px;
align-items: center;
}
.organization-media-actions input[type="file"] {
position: fixed;
inset: 0 auto auto 0;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
pointer-events: none;
}
.organization-media-file-button {
height: 34px;
min-width: 94px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.organization-media-file-button:hover {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
}
.organization-media-file-button.disabled {
opacity: 0.45;
cursor: not-allowed;
}
.organization-media-file-button svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.organization-media-file-name {
min-width: 0;
color: var(--tkrvue-muted);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.organization-media-actions button {
width: 36px;
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.organization-media-actions button:last-child {
color: #ef4444;
}
.organization-media-actions button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.organization-media-actions svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.organization-form-grid input.is-invalid,
.organization-form-grid select.is-invalid,
.organization-form-grid textarea.is-invalid {
border-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}
.source-pill {
display: inline-flex;
align-items: center;
min-width: 46px;
justify-content: center;
padding: 2px 6px;
border-radius: 999px;
background: #e0f2fe;
color: #075985;
font-size: 12px;
}
.source-pill.gsm {
background: #e0f2fe;
color: #075985;
}
.source-pill.tracker {
background: #dcfce7;
color: #166534;
}
.source-pill.beacon {
background: #ede9fe;
color: #5b21b6;
}
.device-source-pill {
background: var(--tkrvue-device-default-bg);
color: var(--tkrvue-device-default-text);
}
.device-source-pill.gsm {
background: var(--tkrvue-device-gsm-bg);
color: var(--tkrvue-device-gsm-text);
}
.device-source-pill.tracker {
background: var(--tkrvue-device-tracker-bg);
color: var(--tkrvue-device-tracker-text);
}
.device-source-pill.beacon {
background: var(--tkrvue-device-beacon-bg);
color: var(--tkrvue-device-beacon-text);
}
.device-source-pill.agent,
.device-source-pill.computer {
background: var(--tkrvue-device-computer-bg);
color: var(--tkrvue-device-computer-text);
}
.device-source-pill.smartphone {
background: var(--tkrvue-device-smartphone-bg);
color: var(--tkrvue-device-smartphone-text);
}
.device-source-pill.device-default,
.device-source-pill.default,
.device-source-pill.device {
background: var(--tkrvue-device-default-bg);
color: var(--tkrvue-device-default-text);
}
.device-gsm-tracking {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.device-gsm-tracking .muted-cell {
flex-basis: 100%;
}
.source-pill.inactive {
background: #fee2e2;
color: #b91c1c;
}
.view-toolbar {
display: grid;
grid-template-columns: auto minmax(180px, 1fr) 170px;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.view-toolbar input,
.view-toolbar select {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
padding: 0 9px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.device-filter-toolbar {
grid-template-columns: auto minmax(260px, 1fr) minmax(150px, max-content);
}
.devices-view-body {
container-type: inline-size;
}
.device-source-filters {
overflow: visible;
}
.device-source-filters .device-source-filter:first-child {
border-radius: 6px 0 0 6px;
}
.device-source-filters .device-source-filter:last-child {
border-radius: 0 6px 6px 0;
}
.device-source-filter-icon {
display: none;
align-items: center;
justify-content: center;
}
.device-source-filter-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.device-filter-toolbar #deviceStatus {
width: max-content;
min-width: 14ch;
max-width: 20ch;
}
.asset-filter-toolbar {
display: grid;
grid-template-columns: minmax(180px, 260px) max-content auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.asset-filter-toolbar #assetSearch {
width: 100%;
min-width: 0;
}
.asset-filter-toolbar .asset-status-filter {
flex: 0 0 auto;
width: max-content;
min-width: 12ch;
max-width: 18ch;
}
.asset-filter-toolbar .asset-filter-reset-button {
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
padding: 0;
}
.secondary-icon-action.tkrvue-filter-action {
color: var(--tkrvue-accent);
border-color: color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
}
.secondary-icon-action.tkrvue-filter-action:hover,
.secondary-icon-action.tkrvue-filter-action:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-input-bg));
}
.secondary-icon-action.tkrvue-filter-action svg {
stroke: currentColor;
}
.asset-layout-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
justify-self: end;
gap: 6px;
}
.asset-layout-actions .tkrvue-icon-button.active {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
}
.asset-layout-actions .tkrvue-icon-button.active svg {
stroke: #fff;
}
.asset-list-table th:last-child,
.asset-list-actions-cell {
text-align: left;
}
.asset-list-actions-cell {
min-width: 220px;
width: 220px;
overflow: visible;
}
.asset-row-actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
min-height: 36px;
}
.asset-row-action {
flex: 0 0 auto;
}
.asset-last-activity {
display: inline-block;
white-space: nowrap;
cursor: help;
text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent);
text-underline-offset: 3px;
}
.asset-row-more {
position: relative;
flex: 0 0 auto;
}
.asset-row-more > summary {
display: inline-flex;
list-style: none;
cursor: pointer;
}
.asset-row-more > summary::-webkit-details-marker {
display: none;
}
.asset-row-more[open] > summary {
color: var(--tkrvue-accent);
border-color: var(--tkrvue-accent);
}
.asset-row-more-menu {
position: absolute;
z-index: 35;
top: calc(100% + 6px);
right: 0;
display: grid;
min-width: 190px;
padding: 6px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-input-bg, var(--tkrvue-layer-surface-bg));
box-shadow: 0 12px 28px color-mix(in srgb, #000 22%, transparent);
}
.asset-row-more-menu button {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
min-height: 36px;
padding: 7px 9px;
border: 0;
border-radius: 7px;
color: var(--tkrvue-text);
background: transparent;
text-align: left;
cursor: pointer;
}
.asset-row-more-menu button:hover,
.asset-row-more-menu button:focus-visible {
color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 10%, transparent);
outline: none;
}
.asset-row-more-menu svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
}
.device-layout-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.device-layout-actions .tkrvue-icon-button.active {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
}
.device-layout-actions .tkrvue-icon-button.active svg {
stroke: #fff;
}
@container (max-width: 1050px) {
.device-filter-toolbar {
grid-template-columns: auto minmax(180px, 1fr) minmax(130px, max-content);
}
.device-source-filter-label {
display: none;
}
.device-source-filter-icon {
display: inline-flex;
}
.device-source-filters .device-source-filter {
width: 38px;
min-width: 38px;
padding: 0;
}
.device-source-filters [data-source="all"]::after {
left: 0;
transform: translate(0, 4px);
}
.device-source-filters [data-source="all"]:hover::after,
.device-source-filters [data-source="all"]:focus-visible::after {
transform: translate(0, 0);
}
}
@container (max-width: 720px) {
.device-filter-toolbar {
grid-template-columns: minmax(0, 1fr);
}
.device-source-filters {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.device-filter-toolbar #deviceSearch {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
min-width: 0;
}
.device-filter-toolbar #deviceStatus {
grid-column: 1 / -1;
grid-row: 3;
width: 100%;
max-width: none;
}
}
.iot-device-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.iot-device-workspace.layout-side {
grid-template-columns: minmax(340px, 0.95fr) minmax(420px, 1.05fr);
align-items: start;
}
.iot-device-list-panel {
min-width: 0;
}
.device-list-table th:nth-last-child(-n + 2),
.device-list-table td:nth-last-child(-n + 2) {
text-align: center;
}
.device-list-icon-cell {
width: 68px;
min-width: 68px;
}
.device-list-action-cell {
width: 100px;
min-width: 100px;
}
.device-list-asset-icon {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--device-list-icon-color, var(--tkrvue-accent)) 35%, var(--tkrvue-border));
border-radius: 10px;
color: var(--asset-icon-foreground, var(--device-list-icon-color, var(--tkrvue-accent)));
background: color-mix(in srgb, var(--device-list-icon-color, var(--tkrvue-accent)) 12%, var(--tkrvue-input-bg));
}
button.device-list-asset-icon {
min-width: 36px;
min-height: 36px;
margin: 0;
padding: 0;
font: inherit;
cursor: pointer;
}
.device-list-asset-icon.uses-contrast-surface {
border-color: color-mix(in srgb, var(--device-list-icon-color, #fff) 38%, #0f172a);
background: var(--device-list-icon-surface, #B8C4D4);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 2px 6px rgba(15, 23, 42, 0.12);
}
.device-list-asset-icon.uses-contrast-surface svg {
filter: drop-shadow(0 0 1.35px var(--asset-icon-halo, #64748b)) drop-shadow(0 0 0.45px var(--asset-icon-halo, #64748b));
}
button.device-list-asset-icon:hover,
button.device-list-asset-icon:focus-visible {
border-color: var(--tkrvue-accent);
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 28%, transparent);
outline-offset: 2px;
}
.device-list-asset-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.device-list-row-actions {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.device-list-row-actions .tkrvue-icon-button {
width: 34px;
min-width: 34px;
height: 34px;
min-height: 34px;
}
.device-list-table tr.is-returned td {
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-layer-surface-bg));
}
.iot-device-workspace.layout-side .table-wrap {
max-height: min(54vh, 560px);
}
.iot-device-workspace.layout-side .iot-inventory-sheet {
position: sticky;
top: 8px;
margin-top: 0;
}
.iot-device-workspace.layout-side .organization-form-grid,
.iot-asset-workspace.layout-side .organization-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.iot-device-workspace.layout-side .organization-form-grid label,
.iot-device-workspace.layout-side .organization-form-grid label.span-2,
.iot-asset-workspace.layout-side .organization-form-grid label,
.iot-asset-workspace.layout-side .organization-form-grid label.span-2 {
grid-template-columns: 1fr;
gap: 3px;
align-items: stretch;
}
.iot-device-workspace.layout-side .organization-form-grid label > span,
.iot-asset-workspace.layout-side .organization-form-grid label > span {
white-space: normal;
overflow-wrap: anywhere;
}
.iot-asset-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.iot-asset-workspace.layout-side {
grid-template-columns: minmax(360px, 0.95fr) minmax(460px, 1.05fr);
align-items: start;
}
.iot-asset-list-panel,
.iot-asset-detail-panel {
min-width: 0;
}
.iot-asset-workspace.layout-side .table-wrap {
max-height: min(58vh, 600px);
}
.iot-asset-list-panel .table-wrap {
max-height: min(58dvh, 600px);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.asset-list-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
column-gap: 14px;
row-gap: 8px;
min-height: 38px;
padding: 5px 2px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.asset-list-pagination-actions {
display: inline-flex;
gap: 6px;
}
.asset-list-pagination-form,
.analysis-pagination-form,
.primary-scope-page-form,
.tkrvue-table-pagination-form {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.asset-list-pagination-form input,
.analysis-pagination-form input,
.primary-scope-page-form input,
.tkrvue-table-pagination-form input {
width: 36px;
min-width: 36px;
min-height: 36px;
height: 36px;
padding: 4px 6px;
box-sizing: border-box;
text-align: center;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
box-shadow: none;
outline: none;
}
.asset-list-pagination-form input:focus,
.analysis-pagination-form input:focus,
.primary-scope-page-form input:focus,
.tkrvue-table-pagination-form input:focus {
border-color: var(--tkrvue-border);
outline: 2px solid color-mix(in srgb, var(--tkrvue-border) 55%, transparent);
outline-offset: 0;
}
/* The mobile application stylesheet predates the compact pagination controls.
Keep the same 36px rhythm and grey field treatment on narrow screens too. */
.mobile-app-user-pager .tkrvue-table-pagination-form input,
.mobile-app-matrix-pager .tkrvue-table-pagination-form input {
width: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
height: 36px !important;
border: 1px solid var(--tkrvue-border) !important;
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
box-shadow: none;
outline: none;
}
.asset-list-pagination-actions .tkrvue-icon-button,
.analysis-pagination-actions .tkrvue-icon-button,
.primary-scope-page-actions .tkrvue-icon-button,
.tkrvue-table-pagination-actions .tkrvue-icon-button,
.trip-page-action-slot .tkrvue-icon-button {
width: 36px;
min-width: 36px;
height: 36px;
min-height: 36px;
padding: 0;
justify-content: center;
box-sizing: border-box;
font-size: var(--tkrvue-font-size-sm);
line-height: 1;
}
/* Keep pagination as one compact, centred group on wide tables. The
dedicated icon rule also wins over the generic 20px icon button sizing. */
.asset-list-pagination,
.analysis-pagination,
.primary-scope-pagination,
.tkrvue-table-pagination {
justify-content: center;
column-gap: 14px;
row-gap: 8px;
}
.asset-list-pagination-actions .tkrvue-icon-button,
.analysis-pagination-actions .tkrvue-icon-button,
.primary-scope-page-actions .tkrvue-icon-button,
.tkrvue-table-pagination-actions .tkrvue-icon-button {
font-size: var(--tkrvue-font-size-sm);
}
.asset-list-pagination-actions .tkrvue-icon-button svg,
.analysis-pagination-actions .tkrvue-icon-button svg,
.tkrvue-table-pagination-actions .tkrvue-icon-button svg {
width: 15px !important;
min-width: 15px !important;
height: 15px !important;
min-height: 15px !important;
stroke-width: 2 !important;
}
.asset-list-page-submit,
.analysis-pagination-form button,
.primary-scope-page-submit,
.tkrvue-table-pagination-submit {
min-height: 32px;
padding-inline: 9px;
}
.iot-asset-workspace.layout-side .iot-asset-detail-panel {
position: sticky;
top: 8px;
}
.iot-asset-workspace.layout-side .iot-inventory-sheet {
margin-top: 0;
}
.segmented {
display: inline-flex;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
overflow: hidden;
background: var(--tkrvue-input-bg);
}
.segmented button {
height: 32px;
border: 0;
border-right: 1px solid var(--tkrvue-border);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
}
.segmented button:last-child {
border-right: 0;
}
.segmented button.active {
background: var(--tkrvue-accent);
color: #fff;
}
.device-filter-toolbar .segmented button[data-source="gsm"],
.device-filter-toolbar .segmented button[data-source="tracker"],
.device-filter-toolbar .segmented button[data-source="beacon"],
.device-filter-toolbar .segmented button[data-source="agent"] {
color: var(--tkrvue-layer-text);
}
.device-filter-toolbar .segmented button[data-source="gsm"] {
background: var(--tkrvue-device-gsm-bg);
color: var(--tkrvue-device-gsm-text);
}
.device-filter-toolbar .segmented button[data-source="tracker"] {
background: var(--tkrvue-device-tracker-bg);
color: var(--tkrvue-device-tracker-text);
}
.device-filter-toolbar .segmented button[data-source="beacon"] {
background: var(--tkrvue-device-beacon-bg);
color: var(--tkrvue-device-beacon-text);
}
.device-filter-toolbar .segmented button[data-source="agent"] {
background: var(--tkrvue-device-computer-bg);
color: var(--tkrvue-device-computer-text);
}
.device-filter-toolbar .segmented button[data-source="gsm"].active,
.device-filter-toolbar .segmented button[data-source="tracker"].active,
.device-filter-toolbar .segmented button[data-source="beacon"].active,
.device-filter-toolbar .segmented button[data-source="agent"].active {
font-weight: 700;
box-shadow: inset 0 -3px currentColor;
}
.asset-inventory-tabs {
/* The view body is a vertical flex container. Keep this navigation row as
an intrinsic, non-shrinking item when the layer has little free height;
otherwise only the coloured backgrounds remain visible. */
display: inline-flex;
flex: 0 0 auto;
align-items: stretch;
width: max-content;
max-width: 100%;
min-height: 42px;
box-sizing: border-box;
margin: 0 0 10px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.assets-view-body {
container-type: inline-size;
}
.asset-inventory-tabs .asset-inventory-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
flex: 0 0 auto;
height: 40px;
min-height: 40px;
box-sizing: border-box;
color: var(--tkrvue-layer-text);
}
.asset-inventory-tab-icon {
display: none;
align-items: center;
justify-content: center;
}
.asset-inventory-tab-label {
display: inline;
}
.asset-inventory-tab-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.asset-inventory-tabs .asset-inventory-tab[data-asset-category="all"] {
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
.asset-inventory-tabs .asset-inventory-tab[data-asset-category="vehicle"] {
background: var(--tkrvue-device-tracker-bg);
color: var(--tkrvue-device-tracker-text);
}
.asset-inventory-tabs .asset-inventory-tab[data-asset-category="objects"] {
background: var(--tkrvue-device-default-bg);
color: var(--tkrvue-device-default-text);
}
.asset-inventory-tabs .asset-inventory-tab[data-asset-category="people"] {
background: #EDE9FE;
color: #5B21B6;
}
.asset-inventory-tabs .asset-inventory-tab[data-asset-category="computer"] {
background: var(--tkrvue-device-computer-bg);
color: var(--tkrvue-device-computer-text);
}
.asset-inventory-tabs .asset-inventory-tab.active {
font-weight: 700;
box-shadow: inset 0 -3px currentColor;
}
.asset-inventory-tabs .asset-inventory-tab[data-asset-category="all"].active {
background: var(--tkrvue-accent);
color: #fff;
box-shadow: inset 0 -3px color-mix(in srgb, #fff 58%, transparent);
}
.asset-inventory-tabs .asset-inventory-tab:focus-visible {
outline: 2px solid var(--tkrvue-accent);
outline-offset: -2px;
}
@container (max-width: 1050px) {
.asset-inventory-tabs .asset-inventory-tab-label {
display: none;
}
.asset-inventory-tabs .asset-inventory-tab {
width: 44px;
min-width: 44px;
padding: 0;
}
.asset-inventory-tabs .asset-inventory-tab-icon {
display: inline-flex;
}
}
@container (max-width: 720px) {
.asset-inventory-tabs {
width: 100%;
}
.asset-inventory-tabs .asset-inventory-tab {
flex: 0 0 44px;
}
}
.result-info {
min-height: 20px;
margin: 0 0 8px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.muted-cell {
display: block;
color: var(--tkrvue-muted);
font-size: 12px;
margin-top: 2px;
word-break: break-all;
}
.empty-cell {
text-align: center;
color: var(--tkrvue-muted);
padding: 24px !important;
}
.saas-tabs {
display: inline-flex;
gap: 4px;
margin: 0 0 10px;
padding: 3px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
}
.saas-tab {
position: relative;
min-height: 30px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--tkrvue-text);
padding: 0 12px;
font-size: var(--tkrvue-font-size-md);
line-height: 1.15;
font-weight: 600;
cursor: pointer;
}
.saas-tab.active {
background: var(--tkrvue-accent);
color: #fff;
}
.saas-tab[data-saas-tab="data_servers"] {
color: #5b21b6;
}
.saas-tab[data-saas-tab="data_servers"].active {
border-color: #7c3aed;
background: #7c3aed;
color: #fff;
}
:root[data-tab-style="underline"] .saas-tabs {
gap: 18px;
margin-bottom: 10px;
padding: 0 2px;
border: 0;
border-bottom: 1px solid var(--tkrvue-border);
border-radius: 0;
background: transparent;
}
:root[data-tab-style="underline"] .saas-tab {
min-height: 34px;
border-radius: 0;
padding: 0 0 7px;
color: var(--tkrvue-muted);
font-weight: 700;
}
:root[data-tab-style="underline"] .saas-tab.active {
background: transparent;
color: var(--tkrvue-layer-text);
}
:root[data-tab-style="underline"] .saas-tab.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 3px;
border-radius: 999px 999px 0 0;
background: var(--tkrvue-tab-accent);
}
:root[data-tab-style="pills"] .saas-tabs {
gap: 8px;
padding: 0;
border: 0;
background: transparent;
}
:root[data-tab-style="pills"] .saas-tab {
min-height: 32px;
border: 1px solid color-mix(in srgb, var(--tkrvue-tab-accent) 16%, var(--tkrvue-border));
border-radius: 999px;
background: var(--tkrvue-layer-surface-bg);
padding: 0 13px;
}
:root[data-tab-style="pills"] .saas-tab.active {
border-color: var(--tkrvue-tab-accent);
background: var(--tkrvue-tab-accent);
color: #fff;
box-shadow: 0 8px 18px color-mix(in srgb, var(--tkrvue-tab-accent) 25%, transparent);
}
:root[data-tab-style="segmented"] .saas-tabs {
display: inline-flex;
gap: 4px;
padding: 4px;
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-input-bg) 74%, var(--tkrvue-layer-bg));
}
:root[data-tab-style="segmented"] .saas-tab {
min-height: 32px;
border-radius: 8px;
color: var(--tkrvue-muted);
padding: 0 12px;
}
:root[data-tab-style="segmented"] .saas-tab.active {
background: var(--tkrvue-input-bg);
color: var(--tkrvue-tab-accent);
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
:root[data-tab-style="framed"] .saas-tabs {
gap: 0;
padding: 0;
border: 0;
border-bottom: 1px solid var(--tkrvue-border);
border-radius: 0;
background: transparent;
}
:root[data-tab-style="framed"] .saas-tab {
min-height: 36px;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 6px 6px 0 0;
padding: 0 16px;
color: var(--tkrvue-muted);
background: transparent;
font-weight: 500;
}
:root[data-tab-style="framed"] .saas-tab.active {
border-color: var(--tkrvue-tab-accent);
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-tab-accent);
box-shadow: inset 0 2px 0 var(--tkrvue-tab-accent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
:root[data-tab-style="pills"] .saas-tab {
border-color: var(--tkrvue-border);
}
:root[data-tab-style="pills"] .saas-tab.active {
box-shadow: none;
}
:root[data-tab-style="segmented"] .saas-tabs {
background: var(--tkrvue-layer-surface-bg);
}
}
.layer-tabs {
flex-wrap: wrap;
}
.layer-tab-panel {
min-height: 0;
}
.placeholder-panel {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
padding: 14px;
}
.placeholder-panel h3 {
margin: 0 0 8px;
font-size: 15px;
}
.placeholder-panel p {
margin: 0;
color: var(--tkrvue-muted);
line-height: 1.4;
}
.menu-item.disabled-menu-item {
opacity: 0.48;
cursor: not-allowed;
filter: grayscale(0.35);
}
.menu-item.disabled-menu-item .label {
text-decoration: none;
}
.menu-item.disabled-menu-item:hover {
background: transparent;
color: inherit;
}
.menu-item.commercial-locked-menu-item,
.menu-section.commercial-locked-menu-section {
opacity: 0.58;
filter: grayscale(0.25);
}
.menu-item.commercial-locked-menu-item {
cursor: not-allowed;
}
.menu-item.commercial-locked-menu-item .label::after {
content: " · Non inclus dans l’offre";
font-size: 10px;
color: var(--tkrvue-muted);
}
.saas-admin-toolbar {
display: flex;
align-items: end;
gap: 8px;
margin-bottom: 12px;
}
.saas-admin-toolbar label {
display: grid;
gap: 4px;
font-size: 12px;
color: var(--tkrvue-muted);
}
.saas-admin-toolbar input,
.saas-admin-toolbar select {
height: 32px;
min-width: 280px;
max-width: min(520px, 60vw);
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.saas-feature-list {
display: grid;
gap: 7px;
}
.saas-feature-row {
display: grid;
grid-template-columns: 28px minmax(150px, 1fr) minmax(110px, 160px) 76px 150px;
align-items: center;
gap: 8px;
min-height: 38px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-bg);
padding: 0 10px;
}
.saas-feature-row.is-active {
border-left: 4px solid #16a34a;
background: color-mix(in srgb, #dcfce7 48%, var(--tkrvue-layer-bg));
}
.saas-feature-row.is-inactive {
opacity: 0.68;
border-left: 4px solid #94a3b8;
}
.saas-feature-row.is-expired {
border-left: 4px solid #f59e0b;
background: color-mix(in srgb, #fef3c7 44%, var(--tkrvue-layer-bg));
}
.saas-feature-code {
color: var(--tkrvue-muted);
font-family: Consolas, monospace;
font-size: 12px;
}
.saas-feature-state {
justify-self: start;
border-radius: 999px;
padding: 2px 8px;
font-size: 12px;
font-weight: 700;
}
.saas-feature-row.is-active .saas-feature-state {
background: #bbf7d0;
color: #166534;
}
.saas-feature-row.is-inactive .saas-feature-state {
background: #e2e8f0;
color: #475569;
}
.saas-feature-row.is-expired .saas-feature-state {
background: #fde68a;
color: #92400e;
}
.saas-feature-end-date {
height: 30px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 7px;
}
.security-summary {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.federated-auth-admin {
display: grid;
gap: 10px;
margin-bottom: 12px;
padding: 12px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 9px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-text);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.federated-auth-admin-head,
.federated-policy-head,
.federated-provider-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.federated-auth-admin-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
}
.federated-auth-guide-button {
align-self: center;
}
.federated-auth-toggle {
display: flex;
align-items: flex-start;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.federated-auth-toggle > span:last-child {
display: grid;
gap: 2px;
min-width: 0;
}
.federated-auth-toggle .context-help-chevron {
flex: 0 0 auto;
transition: transform 160ms ease;
}
.federated-auth-body {
display: grid;
gap: 10px;
}
.federated-auth-admin.is-collapsed .federated-auth-body {
display: none;
}
.federated-auth-admin.is-collapsed .federated-auth-toggle .context-help-chevron {
transform: rotate(-90deg);
}
.federated-auth-admin h3,
.federated-auth-admin p { margin: 0; }
.federated-auth-admin p { color: var(--tkrvue-muted); line-height: 1.4; }
.federated-provider-grid {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 9px;
}
.federated-provider-card,
.federated-policy-card {
gap: 9px;
min-width: 0;
padding: 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.federated-provider-card {
display: flex;
flex-direction: column;
align-items: stretch;
}
.federated-policy-card {
display: grid;
}
.federated-provider-card label,
.federated-policy-card label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.federated-provider-card input:not([type="checkbox"]),
.federated-provider-card textarea,
.federated-policy-card input:not([type="checkbox"]),
.federated-policy-card select {
width: 100%;
min-width: 0;
min-height: 34px;
box-sizing: border-box;
}
.federated-provider-card textarea { resize: vertical; }
.federated-provider-save {
align-self: flex-start;
margin-top: auto;
width: auto;
height: 34px;
min-height: 34px;
max-height: 34px;
box-sizing: border-box;
}
.federated-provider-card .federated-provider-save .tkrvue-brand-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
padding: 2px;
box-sizing: border-box;
border-radius: 4px;
background: #fff;
fill: none;
stroke: none;
}
.federated-provider-card .federated-provider-save .tkrvue-brand-icon * {
stroke: none;
}
.federated-policy-card button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
justify-self: start;
min-height: 34px;
border: 1px solid var(--tkrvue-accent);
border-radius: 7px;
background: var(--tkrvue-accent);
color: var(--tkrvue-accent-contrast, #fff);
padding: 6px 11px;
font: 700 var(--tkrvue-font-size-md) var(--tkrvue-font-family);
cursor: pointer;
}
.federated-policy-card button svg {
width: 16px;
height: 16px;
margin: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.federated-policy-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.federated-policy-actions button:not(.primary-action) { background: var(--tkrvue-input-bg); color: var(--tkrvue-accent); }
.federated-provider-apple { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.federated-policy-head label { min-width: min(360px, 100%); }
.federated-policy-providers { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 8px; }
.federated-policy-providers > label { padding: 9px; border: 1px solid var(--tkrvue-border); border-radius: 7px; }
.federated-policy-providers > label > span { display: flex; align-items: center; gap: 6px; color: var(--tkrvue-text); }
.federated-policy-providers input[type="checkbox"] { accent-color: var(--tkrvue-accent); }
.federated-mfa-policy { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 8px; }
@media (max-width: 1180px) {
.federated-provider-grid,
.federated-policy-providers { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.federated-policy-head,
.federated-provider-title { align-items: stretch; flex-direction: column; }
.federated-auth-admin-head { align-items: flex-start; flex-wrap: wrap; }
.federated-auth-admin-actions { width: 100%; }
.federated-policy-head label { min-width: 0; width: 100%; }
.federated-mfa-policy,
.federated-provider-apple { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.federated-auth-guide-button {
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
padding: 0;
}
.federated-auth-guide-button > span {
display: none;
}
}
.security-help-box {
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 10px 12px;
margin-bottom: 10px;
}
.context-help-box {
transition: background-color 160ms ease, border-color 160ms ease;
}
.context-help-head {
display: flex;
align-items: center;
gap: 8px;
}
.context-help-title {
flex: 1 1 auto;
width: auto;
border: 0;
background: transparent;
color: inherit;
padding: 0;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--tkrvue-font-size-lg);
line-height: 1.2;
text-align: left;
cursor: pointer;
}
.context-help-chevron {
display: inline-flex;
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
align-items: center;
justify-content: center;
color: var(--tkrvue-accent);
transition: transform 160ms ease;
font-size: 30px;
line-height: 1;
font-weight: 800;
}
.context-help-edit {
flex: 0 0 auto;
width: 34px;
height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-accent);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.context-help-edit svg,
.context-help-editor-actions svg {
width: 17px;
height: 17px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.context-help-box.is-collapsed .context-help-chevron {
transform: rotate(-90deg);
}
.context-help-content {
overflow: hidden;
font-size: var(--tkrvue-font-size-md);
line-height: 1.35;
}
.context-help-box.is-collapsed .context-help-content {
display: none;
}
.security-help-box p {
margin: 6px 0 0;
line-height: 1.35;
}
.context-help-editor {
display: grid;
gap: 8px;
margin-top: 8px;
}
.context-help-editor label {
display: grid;
gap: 4px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.context-help-editor input,
.context-help-editor textarea {
width: 100%;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 8px;
font: inherit;
}
.context-help-editor textarea {
min-height: 100px;
resize: vertical;
}
.context-help-editor-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.context-help-editor-actions button {
min-height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 0 12px;
font-weight: 700;
cursor: pointer;
}
.context-help-save-message {
margin-top: 8px;
border-radius: 7px;
padding: 8px 10px;
font-weight: 700;
}
.context-help-save-message.success {
border: 1px solid #86efac;
background: #dcfce7;
color: #166534;
}
.context-help-save-message.error {
border: 1px solid #fecaca;
background: #fee2e2;
color: #991b1b;
}
.security-settings-grid {
display: grid;
grid-template-columns: minmax(220px, 1.1fr) minmax(180px, 0.7fr) minmax(240px, 1fr);
gap: 10px;
align-items: end;
margin-bottom: 10px;
}
.security-settings-grid label {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.security-settings-grid select {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.security-toggle {
min-height: 34px;
grid-template-columns: 18px 1fr;
align-items: center;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
padding: 0 10px;
}
.security-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.security-actions button {
min-height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 0 12px;
font-weight: 700;
cursor: pointer;
}
.security-key-list,
.security-node-list,
.security-config-list {
display: grid;
gap: 7px;
margin-top: 8px;
}
.cfg-status-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: end;
margin: 8px 0 8px;
}
.cfg-status-filters label {
display: grid;
gap: 3px;
min-width: 190px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.cfg-status-filters select {
height: 30px;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.cfg-red-counter {
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #fca5a5;
border-radius: 999px;
background: #fee2e2;
color: #991b1b;
padding: 0 11px;
font-size: 12px;
font-weight: 800;
}
html[data-theme="dark"] .cfg-red-counter {
border-color: #ef4444;
background: rgba(127, 29, 29, 0.45);
color: #fecaca;
}
.security-node-header,
.server-node-header {
display: grid;
align-items: center;
gap: 8px;
min-height: 30px;
margin-top: 8px;
padding: 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.security-key-row,
.security-node-row {
display: grid;
grid-template-columns: minmax(110px, 0.7fr) minmax(150px, 1fr) minmax(80px, 0.5fr) minmax(120px, 0.8fr) auto auto;
align-items: center;
gap: 8px;
min-height: 38px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid #94a3b8;
border-radius: 7px;
background: var(--tkrvue-layer-bg);
padding: 0 10px;
color: var(--tkrvue-text);
}
.security-node-row {
grid-template-columns: minmax(90px, 0.7fr) minmax(80px, 0.5fr) minmax(70px, 0.5fr) minmax(100px, 0.7fr) minmax(120px, 0.8fr) minmax(130px, 0.8fr) minmax(160px, 1fr);
}
.security-node-header {
grid-template-columns: minmax(90px, 0.7fr) minmax(80px, 0.5fr) minmax(70px, 0.5fr) minmax(100px, 0.7fr) minmax(120px, 0.8fr) minmax(130px, 0.8fr) minmax(160px, 1fr);
}
.security-key-row.is-active {
border-left-color: #16a34a;
background: color-mix(in srgb, #dcfce7 38%, var(--tkrvue-layer-bg));
}
.security-key-row button {
min-height: 28px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 0 10px;
}
.security-key-row button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.security-section-title {
margin: 14px 0 4px;
font-size: 14px;
}
.security-section-title.with-actions,
.compact-action-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.security-section-title.with-actions button,
.compact-action-row button {
width: 30px;
height: 30px;
min-width: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 0;
}
.security-section-title.with-actions button svg,
.compact-action-row button svg {
width: 16px;
height: 16px;
}
.security-config-card {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
overflow: hidden;
}
.security-config-head,
.security-config-node {
display: grid;
grid-template-columns: minmax(130px, 0.8fr) minmax(220px, 1.4fr) minmax(110px, 0.6fr);
gap: 8px;
align-items: center;
min-height: 34px;
padding: 0 10px;
}
.security-config-head {
background: var(--tkrvue-input-bg);
font-weight: 700;
}
.security-config-title {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.security-config-title > span:last-child {
min-width: 0;
overflow-wrap: anywhere;
}
.security-config-toggle {
flex: 0 0 28px;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--tkrvue-accent);
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.security-config-toggle:hover,
.security-config-toggle:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 12%, transparent);
}
.security-config-toggle .context-help-chevron {
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
font-size: 22px;
transition: transform 160ms ease;
}
.security-config-card.is-collapsed .security-config-toggle .context-help-chevron {
transform: rotate(-90deg);
}
/* Chevron explicite des sous-menus, y compris au troisième niveau. */
#sidebar .menu-items div.menu-item.has-child-items::after,
#sidebar.collapsed .menu-items div.menu-item.has-child-items::after {
content: none !important;
display: none !important;
}
#sidebar .menu-items div.menu-item > .menu-item-chevron {
display: inline-flex;
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-left: auto;
align-items: center;
justify-content: center;
color: color-mix(in srgb, var(--tkrvue-sidebar-text) 58%, transparent);
font-size: 18px;
font-weight: 500;
line-height: 1;
transform: rotate(0deg);
transform-origin: center;
transition: transform 0.18s ease, color 0.18s ease;
pointer-events: none;
}
#sidebar .menu-items div.menu-item.has-child-items.submenu-open > .menu-item-chevron {
color: var(--tkrvue-sidebar-text);
transform: rotate(90deg);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
#sidebar .menu-items div.menu-item > .menu-item-chevron {
color: var(--tkrvue-muted);
}
}
.security-config-card.is-collapsed .security-config-nodes {
display: none;
}
.security-config-node {
grid-template-columns: minmax(120px, 0.8fr) minmax(90px, 0.6fr) minmax(80px, 0.5fr) minmax(140px, 0.8fr);
border-top: 1px solid var(--tkrvue-border);
}
.security-node-row.is-revision-ok,
.security-config-node.is-revision-ok {
border-left-color: #16a34a;
background: color-mix(in srgb, #dcfce7 50%, var(--tkrvue-layer-bg));
}
.security-node-row.is-revision-bad,
.security-config-node.is-revision-bad {
border-left-color: #dc2626;
background: color-mix(in srgb, #fee2e2 62%, var(--tkrvue-layer-bg));
}
.security-config-node.is-revision-ok,
.security-config-node.is-revision-bad {
border-left: 4px solid;
}
.server-add-row {
display: grid;
grid-template-columns: minmax(130px, 0.7fr) minmax(180px, 1fr) minmax(140px, 0.7fr) auto 34px 34px;
gap: 8px;
align-items: end;
margin: 0 0 12px;
}
.server-add-row label,
.server-node-enabled {
display: grid;
gap: 4px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.server-add-row input,
.server-add-row select,
.server-node-row input,
.server-node-row select {
height: 32px;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.server-node-enabled {
min-height: 32px;
grid-template-columns: 16px auto;
align-items: center;
justify-content: start;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 0 8px;
}
.server-node-list {
display: grid;
gap: 7px;
margin-top: 8px;
}
.server-node-row {
display: grid;
grid-template-columns: minmax(86px, 0.6fr) minmax(150px, 1fr) minmax(96px, 0.55fr) minmax(92px, 0.55fr) minmax(88px, 0.55fr) minmax(70px, 0.45fr) minmax(120px, 0.7fr) minmax(74px, auto);
align-items: center;
gap: 8px;
min-height: 40px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid #16a34a;
border-radius: 7px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-text);
padding: 0 10px;
}
.server-node-header {
grid-template-columns: minmax(86px, 0.6fr) minmax(150px, 1fr) minmax(96px, 0.55fr) minmax(92px, 0.55fr) minmax(88px, 0.55fr) minmax(70px, 0.45fr) minmax(120px, 0.7fr) minmax(74px, auto);
}
.server-node-row.is-disabled {
border-left-color: #94a3b8;
opacity: 0.72;
}
.server-node-row.is-late {
border-left-color: #f59e0b;
}
.server-node-row .primary-action,
.server-add-row .primary-action {
width: 32px;
min-width: 32px;
height: 32px;
border-radius: 6px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.server-row-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 0;
}
.server-row-actions .tkrvue-icon-button {
flex: 0 0 32px;
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
}
.data-server-help {
margin: 8px 0 14px;
line-height: 1.35;
}
.data-server-add-row {
grid-template-columns:
12ch
15ch
13ch
11ch
16ch
7ch
12ch
10ch
10ch
9ch
7ch
34px
34px
34px;
gap: 5px;
align-items: end;
overflow-x: hidden;
padding-bottom: 2px;
width: fit-content;
max-width: 100%;
}
.data-server-add-row > * {
min-width: 0;
}
.data-server-add-row .data-server-field > span {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.data-server-add-row .data-server-code {
grid-column: auto;
}
.data-server-add-row .data-server-label {
grid-column: auto;
}
.data-server-add-row .data-server-role-field,
.data-server-add-row .data-server-env-field,
.data-server-add-row .data-server-port-field,
.data-server-add-row .data-server-charset-field {
grid-column: auto;
}
.data-server-add-row .data-server-host-field,
.data-server-add-row .data-server-db-field,
.data-server-add-row .data-server-user-field,
.data-server-add-row .data-server-password-field {
grid-column: auto;
}
.data-server-add-row .server-node-enabled {
grid-column: auto;
}
.data-server-add-row .primary-action,
.data-server-add-row .data-server-icon-action {
align-self: end;
}
.data-server-list {
width: 100%;
max-width: 100%;
overflow-x: auto;
}
.data-server-list .cfg-log-row {
grid-template-columns:
12ch
17ch
14ch
26ch
8ch
16ch
7ch
10ch
8ch
118px;
gap: 5px;
font-size: 12px;
width: max-content;
min-width: 100%;
max-width: none;
}
.data-server-list .cfg-log-row > * {
min-width: 0;
}
.data-server-list .cfg-log-head {
color: var(--tkrvue-muted);
font-size: 12px;
font-weight: 700;
}
.data-server-row-cell {
min-width: 0;
align-self: stretch;
display: flex;
align-items: center;
}
.data-server-row-cell > input,
.data-server-row-cell > select,
.data-server-row-cell > .server-node-enabled,
.data-server-row-cell > .data-server-row-actions {
width: 100%;
}
.data-server-source-usages {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
min-width: 0;
padding: 2px 0;
}
.data-server-source-chip {
display: block;
max-width: 100%;
padding-left: 6px;
border-left: 2px solid var(--tkrvue-accent);
color: var(--tkrvue-text);
font-size: 11px;
line-height: 1.2;
overflow-wrap: anywhere;
white-space: normal;
}
.data-server-source-empty {
color: var(--tkrvue-muted);
font-size: 11px;
font-style: italic;
line-height: 1.25;
}
.data-server-list input,
.data-server-list select {
width: 100%;
height: 32px;
min-width: 0;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.data-server-list .server-node-enabled input,
.data-server-add-row .server-node-enabled input {
width: auto;
height: auto;
min-width: 0;
padding: 0;
}
.data-server-add-row input,
.data-server-add-row select,
.data-server-add-row .server-node-enabled,
.data-server-list input,
.data-server-list select,
.data-server-list .server-node-enabled {
font-size: 12px;
line-height: 1.15;
box-sizing: border-box;
}
.data-server-add-row .server-node-enabled,
.data-server-list .server-node-enabled {
padding: 0 6px;
justify-content: flex-start;
min-width: 0;
white-space: nowrap;
}
.data-server-row-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
width: 118px;
min-width: 118px;
justify-self: end;
}
.data-server-row-actions .tkrvue-icon-button {
flex: 0 0 32px;
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
}
.data-server-list .data-server-row-actions .primary-action,
.data-server-add-row .primary-action {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
}
.data-server-list .data-server-row-actions .primary-action:hover,
.data-server-add-row .primary-action:hover {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
filter: brightness(1.05);
}
.data-server-list .data-server-row-actions .secondary-icon-action,
.data-server-add-row .secondary-icon-action {
color: var(--tkrvue-accent);
border-color: color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
}
.saas-client-sources-panel {
container-type: inline-size;
}
.client-sources-summary {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 18ch));
gap: 8px;
width: fit-content;
max-width: 100%;
}
.client-sources-help {
margin: 8px 0 12px;
}
.client-sources-toolbar {
display: grid;
grid-template-columns: minmax(190px, 28ch) 15ch 18ch minmax(230px, 38ch) 34px 34px;
gap: 8px;
align-items: end;
width: fit-content;
max-width: 100%;
margin: 0 0 12px;
}
.client-sources-toolbar label,
.client-source-form-grid label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.client-sources-toolbar input,
.client-sources-toolbar select,
.client-source-form-grid input,
.client-source-form-grid select,
.client-source-form-grid textarea {
width: 100%;
min-width: 0;
}
.client-sources-toolbar .tkrvue-icon-button {
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
align-self: end;
}
.client-sources-toolbar .client-source-refresh-action {
color: var(--tkrvue-accent);
border-color: color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
}
.client-sources-toolbar .client-source-refresh-action:hover,
.client-sources-toolbar .client-source-refresh-action:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-input-bg));
}
.client-sources-toolbar .client-source-refresh-action svg {
stroke: currentColor;
}
.client-sources-layout {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 12px;
align-items: start;
}
.client-source-editor,
.client-sources-list-wrap {
min-width: 0;
}
.client-source-editor.framed-tool {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-panel-bg);
padding: 10px;
}
.client-source-editor-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.client-source-actions,
.client-source-row-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.client-source-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
gap: 7px 8px;
}
.client-source-check {
display: flex !important;
align-items: center;
align-content: end;
gap: 6px;
min-height: 32px;
padding: 0 6px;
white-space: nowrap;
}
.client-source-check input {
width: auto !important;
}
.client-source-json-area {
grid-column: 1 / -1;
}
.client-source-resolution-preview {
grid-column: 1 / -1;
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 30%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-panel-bg));
color: var(--tkrvue-text);
}
.client-source-resolution-title {
display: flex;
align-items: baseline;
gap: 10px;
font-weight: 700;
}
.client-source-resolution-title small,
.client-source-resolution-empty {
color: var(--tkrvue-muted);
font-weight: 500;
}
.client-source-resolution-lines {
display: grid;
gap: 6px;
}
.client-source-resolution-line {
display: grid;
grid-template-columns: minmax(130px, 0.45fr) minmax(180px, 0.8fr) minmax(180px, 0.8fr);
gap: 8px;
align-items: center;
min-width: 0;
}
.client-source-resolution-line code,
.client-source-resolution-line strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-source-resolution-line code {
padding: 4px 7px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
}
.client-source-resolution-line strong {
padding: 4px 7px;
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
.client-source-catalog-help {
margin: 0 0 8px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 24%, var(--tkrvue-border));
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-panel-bg));
}
.client-source-catalog-help > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 30px;
padding: 4px 8px;
color: var(--tkrvue-text);
cursor: pointer;
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
list-style: none;
}
.client-source-catalog-help > summary::-webkit-details-marker {
display: none;
}
.client-source-catalog-help-label {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.client-source-catalog-help-label svg,
.client-source-catalog-help-chevron svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
stroke: currentColor;
}
.client-source-catalog-help-label svg {
color: var(--tkrvue-accent);
}
.client-source-catalog-help-chevron {
display: inline-flex;
transition: transform 0.16s ease;
}
.client-source-catalog-help[open] .client-source-catalog-help-chevron {
transform: rotate(180deg);
}
.client-source-catalog-help-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
gap: 5px 8px;
padding: 0 8px 8px;
}
.client-source-catalog-help-row {
display: grid;
grid-template-columns: minmax(105px, auto) minmax(0, 1fr);
gap: 7px;
align-items: center;
min-width: 0;
padding: 4px 6px;
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.client-source-catalog-help-row code {
color: var(--tkrvue-accent);
font-size: inherit;
font-weight: 700;
}
.client-sources-list .cfg-log-row {
grid-template-columns: minmax(110px, 0.8fr) minmax(155px, 1.15fr) minmax(185px, 1.35fr) minmax(120px, 0.85fr) 36px;
grid-template-areas:
"organization application source state action"
"code table table server action";
gap: 3px 8px;
min-width: 680px;
min-height: 58px;
padding: 5px 7px;
font-size: var(--tkrvue-font-size-sm);
}
.client-sources-list .cfg-log-row > :nth-child(1) { grid-area: organization; }
.client-sources-list .cfg-log-row > :nth-child(2) { grid-area: application; }
.client-sources-list .cfg-log-row > :nth-child(3) { grid-area: source; }
.client-sources-list .cfg-log-row > :nth-child(4) { grid-area: code; }
.client-sources-list .cfg-log-row > :nth-child(5) { grid-area: table; }
.client-sources-list .cfg-log-row > :nth-child(6) { grid-area: server; }
.client-sources-list .cfg-log-row > :nth-child(7) { grid-area: state; }
.client-sources-list .cfg-log-row > :nth-child(8) { grid-area: action; }
.client-sources-list .cfg-log-row > :nth-child(4),
.client-sources-list .cfg-log-row > :nth-child(5),
.client-sources-list .cfg-log-row > :nth-child(6) {
padding-top: 3px;
border-top: 1px solid color-mix(in srgb, var(--tkrvue-border) 72%, transparent);
}
.client-sources-list .cfg-log-head {
min-height: 48px;
line-height: 1.15;
}
.client-sources-list .cfg-log-head > span {
overflow: visible;
white-space: normal;
}
.client-sources-list .client-source-row {
cursor: pointer;
}
.client-sources-list {
overflow-x: auto;
}
.client-sources-list .client-source-row.is-selected {
background: color-mix(in srgb, var(--tkrvue-accent) 10%, transparent);
}
.client-sources-list .cfg-log-row > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-sources-list .client-source-row > :nth-child(2),
.client-sources-list .client-source-row > :nth-child(3) {
display: -webkit-box;
overflow: hidden;
white-space: normal;
line-height: 1.2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.client-sources-list small {
display: inline;
margin-left: 5px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.15;
}
.client-source-identity,
.client-source-status {
display: flex;
align-items: center;
gap: 4px;
}
.client-source-identity strong,
.client-source-identity small,
.client-source-status small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-source-row-actions .tkrvue-icon-button {
width: 30px;
min-width: 30px;
height: 30px;
min-height: 30px;
padding: 5px;
}
.status-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 2px 9px;
border: 1px solid transparent;
border-radius: 999px;
font-size: var(--tkrvue-font-size-sm);
line-height: 1.1;
white-space: nowrap;
}
.status-chip-success {
color: var(--tkrvue-status-success-text);
background: var(--tkrvue-status-success-bg);
border-color: var(--tkrvue-status-success-border);
}
.status-chip-muted {
color: var(--tkrvue-muted);
background: color-mix(in srgb, var(--tkrvue-input-bg) 86%, var(--tkrvue-border));
border-color: var(--tkrvue-border);
}
@container (max-width: 1180px) {
.client-sources-layout {
grid-template-columns: 1fr;
}
}
@container (max-width: 780px) {
.client-sources-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.client-sources-toolbar {
grid-template-columns: 1fr 1fr 34px 34px;
width: 100%;
}
.client-sources-toolbar label:first-child,
.client-sources-toolbar label:nth-child(4) {
grid-column: 1 / -1;
}
.client-source-form-grid {
grid-template-columns: 1fr;
}
.client-source-json-area {
grid-column: 1 / -1;
}
.client-source-resolution-preview {
grid-column: 1 / -1;
}
.client-source-resolution-title {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
.client-source-resolution-line {
grid-template-columns: 1fr;
}
.client-sources-list {
overflow-x: auto;
}
.client-sources-list .cfg-log-row {
grid-template-columns: 1fr;
grid-template-areas: none;
min-width: 0;
white-space: normal;
}
.client-sources-list .cfg-log-row > * {
grid-area: auto;
padding-top: 0;
border-top: 0;
}
.client-sources-list .cfg-log-head {
display: none;
}
.client-sources-list .client-source-row > * {
display: grid;
grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
gap: 8px;
align-items: center;
white-space: normal;
}
.client-sources-list .client-source-row > :nth-child(2),
.client-sources-list .client-source-row > :nth-child(3) {
display: grid;
overflow: visible;
-webkit-line-clamp: unset;
}
.client-sources-list .client-source-row > *::before {
content: attr(data-label);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
}
.client-sources-list .client-source-identity,
.client-sources-list .client-source-status {
display: grid;
}
.client-sources-list .client-source-identity strong,
.client-sources-list .client-source-status .status-chip {
grid-column: 2;
grid-row: 1;
}
.client-sources-list .client-source-identity small,
.client-sources-list .client-source-status small {
grid-column: 2;
margin-left: 0;
}
.client-sources-list .client-source-row-actions {
justify-content: start;
}
}
.cfg-log-toolbar {
display: grid;
grid-template-columns: minmax(100px, 0.55fr) minmax(130px, 0.75fr) minmax(110px, 0.65fr) minmax(86px, 0.45fr) minmax(220px, 1fr) 34px 34px 34px;
gap: 8px;
align-items: end;
margin: 0 0 10px;
}
.cfg-log-toolbar label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: 12px;
}
.cfg-log-toolbar select,
.cfg-log-toolbar input {
height: 32px;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.cfg-log-toolbar button,
.cfg-log-row button {
width: 32px;
height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
display: inline-flex;
align-items: center;
justify-content: center;
}
.cfg-log-toolbar button.danger-action {
border-color: #fecaca;
background: var(--tkrvue-input-bg);
color: #dc2626;
}
.cfg-log-toolbar button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.cfg-log-toolbar button svg,
.cfg-log-row button svg {
width: 17px;
height: 17px;
}
.cfg-log-list {
display: grid;
gap: 6px;
margin-top: 8px;
max-height: min(52vh, 560px);
overflow: auto;
padding-right: 4px;
}
.cfg-log-header,
.cfg-log-row {
display: grid;
grid-template-columns: minmax(110px, 0.75fr) minmax(78px, 0.45fr) minmax(150px, 0.85fr) minmax(86px, 0.5fr) minmax(260px, 1.6fr) minmax(112px, 0.65fr) 34px;
gap: 8px;
align-items: center;
}
.cfg-log-header {
min-height: 30px;
padding: 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.cfg-log-row {
min-height: 40px;
padding: 6px 10px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid #3b82f6;
border-radius: 7px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-text);
}
.cfg-log-row.is-success {
border-left-color: #16a34a;
}
.cfg-log-row.is-warning {
border-left-color: #f59e0b;
}
.cfg-log-row.is-error {
border-left-color: #ef4444;
}
.cfg-log-row > * {
min-width: 0;
overflow-wrap: anywhere;
}
.tracker-config-jobs .cfg-log-row {
grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1.1fr) minmax(70px, 0.35fr) minmax(90px, 0.45fr) minmax(80px, 0.4fr) minmax(220px, 1.3fr);
}
.tracker-config-request-jobs .cfg-log-row {
grid-template-columns: minmax(112px, 0.7fr) minmax(150px, 0.9fr) minmax(54px, 0.3fr) minmax(68px, 0.34fr) minmax(70px, 0.34fr) minmax(190px, 1fr) minmax(220px, 1.15fr) minmax(72px, 0.32fr);
}
.tracker-config-request-jobs .cfg-log-row > span {
min-width: 0;
}
.tracker-config-request-jobs .tracker-job-profiles,
.tracker-config-request-jobs .tracker-job-message {
overflow-wrap: anywhere;
}
.tracker-config-request-jobs .tracker-job-actions {
justify-content: center;
}
.sim-provider-import-history .cfg-log-row {
grid-template-columns: minmax(128px, 0.85fr) minmax(100px, 0.55fr) minmax(150px, 0.8fr) minmax(220px, 1.25fr) minmax(70px, 0.4fr) minmax(86px, 0.45fr) minmax(86px, 0.45fr) minmax(70px, 0.4fr);
}
.tracker-config-model-params .cfg-log-row {
grid-template-columns: minmax(70px, 0.35fr) minmax(150px, 0.9fr) minmax(110px, 0.55fr) minmax(190px, 1.1fr) minmax(90px, 0.45fr) minmax(220px, 1.25fr);
}
.tracker-config-preview-params .cfg-log-row {
grid-template-columns: minmax(70px, 0.35fr) minmax(140px, 0.8fr) minmax(180px, 1fr) minmax(240px, 1.2fr);
}
.sim-cards-import-grid {
grid-template-columns: minmax(220px, 1.1fr) minmax(180px, 0.7fr) minmax(240px, 1fr) minmax(180px, 0.8fr);
margin-bottom: 10px;
}
.sim-cards-import-organization small {
color: var(--tkrvue-muted);
line-height: 1.3;
}
.sim-cards-table {
margin-top: 10px;
}
.sim-cards-table .cfg-log-row {
grid-template-columns: minmax(150px, 1fr) minmax(112px, 0.72fr) minmax(112px, 0.72fr) minmax(90px, 0.55fr) minmax(160px, 1fr) minmax(150px, 0.9fr) minmax(180px, 1.1fr) minmax(128px, 0.8fr);
}
.data-server-list .cfg-log-row {
grid-template-columns:
12ch
17ch
14ch
26ch
8ch
16ch
7ch
10ch
8ch
118px;
gap: 5px;
font-size: 12px;
width: max-content;
min-width: 100%;
max-width: none;
}
.sim-card-row small {
display: block;
margin-top: 2px;
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.25;
}
.status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 2px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.status-pill.is-ok {
border-color: #bbf7d0;
background: #dcfce7;
color: #166534;
}
.status-pill.is-active {
border-color: #bbf7d0;
background: #dcfce7;
color: #166534;
}
.status-pill.is-inactive,
.status-pill.is-retired {
border-color: #fecaca;
background: #fee2e2;
color: #b91c1c;
}
.status-pill.is-blocked {
border-color: #fed7aa;
background: #ffedd5;
color: #9a3412;
}
.status-pill.is-pending {
border-color: #fde68a;
background: #fef3c7;
color: #92400e;
}
.status-pill.is-muted {
border-color: #e5e7eb;
background: #f3f4f6;
color: #4b5563;
}
.status-pill.is-unknown {
border-color: #e5e7eb;
background: #f3f4f6;
color: #4b5563;
}
.tracker-global-search {
display: grid;
gap: 9px;
margin: 12px 0 16px;
padding: 11px 12px 12px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-bg));
}
.tracker-global-search-title {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--tkrvue-text);
font-weight: 700;
font-size: 14px;
}
.tracker-global-search-title svg {
width: 17px;
height: 17px;
color: var(--tkrvue-accent);
fill: none;
stroke: currentColor;
}
.tracker-global-search-scope {
display: inline-flex;
align-items: center;
gap: 7px;
width: fit-content;
color: var(--tkrvue-text-muted);
font-size: 0.92em;
}
.tracker-global-search-scope input {
width: auto;
min-width: 0;
margin: 0;
}
.tracker-global-search-fields {
display: grid;
grid-template-columns: max-content minmax(260px, 460px) minmax(360px, 1fr) max-content;
gap: 10px;
align-items: end;
}
.tracker-global-search-actions {
display: inline-flex;
align-items: end;
gap: 8px;
}
.sim-cards-filters .tracker-global-search-fields {
grid-template-columns: minmax(230px, 1.1fr) minmax(150px, 0.55fr) minmax(190px, 0.75fr) minmax(130px, 0.45fr) 36px;
}
.tracker-reset-filters {
align-self: end;
justify-self: start;
width: 36px;
min-width: 36px;
height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
}
.tracker-reset-filters span {
display: none;
}
.tracker-global-search label {
display: grid;
gap: 5px;
min-width: 0;
}
.tracker-global-search label.tracker-global-search-scope {
display: inline-flex;
align-items: center;
align-self: end;
min-height: 34px;
white-space: nowrap;
}
.tracker-global-search-query {
max-width: 460px;
}
.tracker-global-search input,
.tracker-global-search select {
width: 100%;
min-width: 0;
}
.saas-tracker-configs-panel .tracker-icon-action {
width: 36px;
min-width: 36px;
height: 34px;
padding: 0;
flex: 0 0 36px;
}
.saas-tracker-configs-panel .tracker-icon-action svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
}
.saas-tracker-configs-panel .tracker-select-result-action {
height: 34px;
min-width: 128px;
padding: 0 12px;
border: 1px solid var(--tkrvue-accent);
border-radius: 7px;
background: var(--tkrvue-accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
white-space: nowrap;
cursor: pointer;
}
.saas-tracker-configs-panel .tracker-select-result-action:hover {
filter: brightness(1.05);
}
.saas-tracker-configs-panel .tracker-select-result-action svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
flex: 0 0 auto;
}
.saas-tracker-configs-panel .tracker-action-button {
align-self: end;
min-height: 34px;
padding: 0 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
white-space: nowrap;
cursor: pointer;
}
.saas-tracker-configs-panel .tracker-action-button:hover {
color: var(--tkrvue-accent);
border-color: color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
}
.saas-tracker-configs-panel .tracker-action-button.primary-action,
.saas-tracker-configs-panel .tracker-icon-action.primary-action {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
}
.saas-tracker-configs-panel .tracker-action-button.primary-action:hover,
.saas-tracker-configs-panel .tracker-icon-action.primary-action:hover {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
filter: brightness(1.05);
}
.saas-tracker-configs-panel .tracker-action-button svg {
width: 17px;
height: 17px;
color: currentColor;
stroke: currentColor;
fill: none;
flex: 0 0 auto;
}
.saas-tracker-configs-panel .tracker-action-button:disabled,
.saas-tracker-configs-panel .tracker-icon-action:disabled,
.saas-tracker-configs-panel .tracker-select-result-action:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.saas-tracker-configs-panel .security-settings-grid {
grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(120px, 0.45fr) max-content;
}
.saas-tracker-configs-panel .security-summary {
grid-template-columns: repeat(5, minmax(112px, 1fr));
}
.saas-tracker-configs-panel .tracker-linkage-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.saas-tracker-configs-panel .tracker-linkage-grid > label,
.saas-tracker-configs-panel .tracker-linkage-grid > label > input,
.saas-tracker-configs-panel .tracker-linkage-grid > label > select {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.saas-tracker-configs-panel .tracker-linkage-grid > label > input,
.saas-tracker-configs-panel .tracker-linkage-grid > label > select {
width: 100%;
}
.saas-tracker-configs-panel .tracker-linkage-reason,
.saas-tracker-configs-panel .tracker-linkage-actions {
grid-column: 1 / -1;
}
.saas-tracker-configs-panel .tracker-linkage-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.saas-tracker-configs-panel .tracker-linkage-actions > .tracker-action-button.primary-action {
flex: 0 0 auto;
width: max-content;
max-width: 100%;
justify-self: start;
}
.tracker-profile-assistant {
display: grid;
gap: 8px;
max-width: 1220px;
margin: 4px 0 10px;
}
.tracker-profile-assistant-title {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
color: var(--tkrvue-muted);
}
.tracker-profile-assistant-title strong {
color: var(--tkrvue-text);
}
.tracker-profile-assistant-title span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tracker-profile-assistant-grid {
display: grid;
grid-template-columns: repeat(3, minmax(230px, 1fr));
gap: 10px;
align-items: start;
}
.tracker-profile-assistant-card {
display: grid;
gap: 8px;
align-content: start;
min-width: 0;
padding: 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-input-bg) 76%, transparent);
}
.tracker-profile-assistant-card-title {
color: var(--tkrvue-text);
font-weight: 700;
}
.tracker-profile-assistant-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
align-items: start;
}
.tracker-profile-assistant-option {
box-sizing: border-box;
min-width: 0;
min-height: 48px;
display: grid;
align-content: start;
gap: 3px;
padding: 6px 7px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
text-align: left;
cursor: pointer;
}
.tracker-profile-assistant-option:hover:not(:disabled) {
border-color: var(--tkrvue-accent);
}
.tracker-profile-assistant-option.active {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 16%, var(--tkrvue-input-bg));
box-shadow: inset 3px 0 0 var(--tkrvue-accent);
}
.tracker-profile-assistant-option.is-missing,
.tracker-profile-assistant-option:disabled {
cursor: not-allowed;
opacity: 0.58;
}
.tracker-profile-assistant-option strong,
.tracker-profile-assistant-option span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.tracker-profile-assistant-option strong {
font-size: 12px;
line-height: 1.15;
}
.tracker-profile-assistant-option span {
display: -webkit-box;
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tracker-profile-assistant-summary {
display: grid;
gap: 4px;
min-width: 0;
padding: 6px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 65%, var(--tkrvue-input-bg));
}
.tracker-profile-assistant-summary strong {
color: var(--tkrvue-text);
font-size: 12.5px;
line-height: 1.2;
}
.tracker-profile-assistant-summary ul {
margin: 0;
padding-left: 16px;
color: var(--tkrvue-muted);
font-size: 11.5px;
line-height: 1.25;
}
.tracker-profile-assistant-summary li {
margin: 1px 0;
}
.tracker-config-profile-workspace {
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(240px, 0.62fr);
gap: 10px;
align-items: stretch;
max-width: 1220px;
}
.tracker-config-profile-picker,
.tracker-config-selected-panel {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-width: 0;
}
.tracker-config-profile-picker {
grid-template-rows: auto auto auto;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-config-profile-picker .tracker-profile-select {
height: auto;
min-height: 120px;
max-height: 170px;
padding: 4px 8px;
}
.tracker-profile-select-hidden {
display: none !important;
}
.tracker-profile-order-panel {
display: grid;
gap: 5px;
min-width: 0;
}
.tracker-profile-order-header {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
min-height: 18px;
}
.tracker-profile-order-header strong {
flex: 0 0 auto;
color: var(--tkrvue-text);
font-size: 12px;
white-space: nowrap;
}
.tracker-profile-order-header span {
flex: 1 1 auto;
color: var(--tkrvue-muted);
font-size: 11px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tracker-profile-order-list {
display: grid;
gap: 3px;
max-height: 255px;
overflow: auto;
}
.tracker-profile-order-row {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) max-content;
gap: 5px;
align-items: center;
min-height: 27px;
padding: 2px 3px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
}
.tracker-profile-order-row.is-selected {
border-color: #93d8ad;
background: #e8f7ee;
box-shadow: inset 3px 0 0 #38a866;
}
.tracker-profile-order-row:focus-visible {
outline: 2px solid var(--tkrvue-primary);
outline-offset: 1px;
}
.tracker-profile-order-row.is-dragging {
opacity: .62;
}
.tracker-profile-order-row.is-drag-over {
border-color: var(--tkrvue-primary);
}
.tracker-profile-order-handle {
width: 23px;
min-width: 23px;
height: 23px;
min-height: 23px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: grab;
line-height: 1;
}
.tracker-profile-order-handle span {
display: block;
font-size: 14px;
line-height: 1;
transform: translateY(-1px);
}
.tracker-profile-order-label {
display: flex;
align-items: baseline;
gap: 4px;
min-width: 0;
}
.tracker-profile-order-label strong,
.tracker-profile-order-label small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tracker-profile-order-label strong {
color: var(--tkrvue-text);
font-size: 11.5px;
}
.tracker-profile-order-label small {
color: var(--tkrvue-muted);
font-size: 10.5px;
}
.tracker-profile-order-label small::before {
content: ": ";
}
.tracker-profile-order-actions {
display: inline-flex;
gap: 3px;
}
.tracker-profile-order-actions .tkrvue-icon-button {
width: 22px;
min-width: 22px;
height: 22px;
min-height: 22px;
}
.tracker-profile-order-actions .tkrvue-icon-button svg {
width: 12px;
height: 12px;
}
.tracker-profile-order-double-arrow {
position: relative;
display: inline-flex;
width: 13px;
height: 15px;
align-items: center;
justify-content: center;
}
.tracker-profile-order-actions .tkrvue-icon-button .tracker-profile-order-double-arrow svg {
position: absolute;
width: 10px;
height: 10px;
}
.tracker-profile-order-double-arrow--up svg:first-child {
top: 0;
}
.tracker-profile-order-double-arrow--up svg:last-child {
bottom: 0;
}
.tracker-profile-order-double-arrow--down svg:first-child {
bottom: 0;
}
.tracker-profile-order-double-arrow--down svg:last-child {
top: 0;
}
.tracker-profile-basket {
display: grid;
gap: 4px;
align-content: start;
min-height: 255px;
max-height: 255px;
margin: 0;
padding: 0;
overflow: auto;
}
.tracker-profile-basket-title {
display: flex;
align-items: center;
min-height: 18px;
color: var(--tkrvue-muted);
font-size: 12px;
font-weight: 700;
}
.tracker-profile-basket-empty,
.tracker-profile-chip {
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
}
.tracker-profile-basket-empty {
min-height: 28px;
display: flex;
align-items: center;
padding: 0 8px;
color: var(--tkrvue-muted);
}
.tracker-profile-chip {
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
gap: 6px;
align-items: center;
min-height: 28px;
padding: 3px 4px 3px 8px;
}
.tracker-profile-chip > span {
display: flex;
align-items: baseline;
gap: 4px;
min-width: 0;
}
.tracker-profile-chip strong,
.tracker-profile-chip small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tracker-profile-chip strong {
color: var(--tkrvue-text);
font-size: 12px;
}
.tracker-profile-chip small {
color: var(--tkrvue-muted);
font-size: 10.5px;
}
.tracker-profile-chip small::before {
content: ": ";
}
.tracker-profile-remove {
width: 26px;
min-width: 26px;
height: 26px;
min-height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.tracker-profile-remove svg,
.tracker-job-cancel svg {
margin: 0;
flex: 0 0 auto;
display: block;
}
.tracker-config-send-bar {
display: grid;
grid-template-columns: minmax(180px, 320px) max-content;
gap: 10px;
align-items: end;
max-width: 760px;
margin: 8px 0 6px;
}
.tracker-config-send-bar label {
display: grid;
gap: 5px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-config-send-bar select {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.tracker-config-preview-action {
min-height: 36px;
white-space: nowrap;
}
.tracker-config-inner-section {
display: grid;
gap: 6px;
margin: 8px 0 10px;
padding-left: 10px;
border-left: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, transparent);
}
.tracker-config-inner-toggle {
appearance: none;
-webkit-appearance: none;
width: fit-content;
min-height: 26px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--tkrvue-text);
padding: 3px 5px;
font: inherit;
text-align: left;
cursor: pointer;
}
.tracker-config-inner-toggle:hover {
background: color-mix(in srgb, var(--tkrvue-primary) 8%, transparent);
}
.tracker-config-inner-toggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tkrvue-primary) 70%, transparent);
outline-offset: 1px;
}
.tracker-config-inner-toggle .context-help-chevron {
opacity: .58;
font-size: 1.15em;
line-height: 1;
transition: transform .16s ease, opacity .16s ease;
}
.tracker-config-inner-toggle:hover .context-help-chevron {
opacity: .8;
}
.tracker-config-inner-section.is-collapsed .tracker-config-inner-toggle .context-help-chevron {
transform: rotate(-90deg);
}
.tracker-config-inner-body {
min-width: 0;
padding: 1px 0 2px 14px;
}
.tracker-config-inner-section.is-collapsed .tracker-config-inner-body {
display: none;
}
.tracker-collapsible-section {
margin: 12px 0;
}
.tracker-collapsible-header {
display: flex;
align-items: center;
gap: 8px;
}
.tracker-collapsible-header .tracker-collapsible-toggle {
flex: 1 1 auto;
min-width: 0;
}
.tracker-collapsible-header .tracker-history-refresh {
flex: 0 0 auto;
}
.tracker-collapsible-toggle {
width: 100%;
min-height: 38px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
padding: 8px 10px;
text-align: left;
cursor: pointer;
}
.tracker-collapsible-section.is-collapsed .tracker-collapsible-body {
display: none;
}
.tracker-collapsible-section.is-collapsed .context-help-chevron {
transform: rotate(-90deg);
}
.tracker-collapsible-body {
padding-top: 8px;
}
.tracker-config-subtitle {
margin: 10px 0 6px;
color: var(--tkrvue-text);
font-weight: 800;
}
.tracker-config-value-editor,
.tracker-config-preview,
.tracker-device-identity-editor {
margin: 10px 0;
}
.tracker-device-identity-grid {
display: grid;
grid-template-columns: minmax(210px, 310px) minmax(210px, 310px) minmax(150px, 230px);
gap: 6px 10px;
align-items: end;
max-width: 880px;
}
.tracker-device-identity-grid > label,
.tracker-device-identity-field {
display: grid;
gap: 3px;
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.2;
}
.tracker-device-identity-field > label {
color: inherit;
font: inherit;
}
.tracker-device-identity-grid input {
height: 28px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 7px;
font-size: 12px;
line-height: 1.2;
}
.tracker-device-identity-grid input:disabled {
opacity: 0.72;
}
.tracker-device-identity-grid input[readonly] {
background: color-mix(in srgb, var(--tkrvue-input-bg) 70%, var(--tkrvue-border));
color: var(--tkrvue-muted);
cursor: default;
}
.tracker-identity-input-action {
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
gap: 6px;
align-items: center;
}
.tracker-identity-pin-random {
width: 30px;
min-width: 30px;
height: 28px;
min-height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tracker-identity-pin-random svg {
width: 15px;
height: 15px;
}
.tracker-device-identity-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.tracker-identity-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px 6px;
min-height: 17px;
font-size: var(--tkrvue-font-size-sm);
line-height: 1.2;
}
.tracker-identity-status small {
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.2;
}
.tracker-identity-details-toggle {
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
padding: 0;
}
.tracker-identity-details-toggle svg {
width: 14px;
height: 14px;
}
.tracker-identity-details {
flex: 1 0 100%;
min-width: 0;
margin-top: 3px;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-left: 3px solid var(--tkrvue-accent);
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 92%, var(--tkrvue-accent));
color: var(--tkrvue-text);
overflow-wrap: anywhere;
}
.tracker-identity-details p {
margin: 0;
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.35;
}
.tracker-identity-details dl,
.tracker-config-status-guide-details dl {
display: grid;
gap: 5px;
margin: 7px 0 0;
}
.tracker-identity-details dl > div,
.tracker-config-status-guide-details dl > div {
display: grid;
grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
gap: 8px;
align-items: start;
}
.tracker-identity-details dt,
.tracker-config-status-guide-details dt {
color: var(--tkrvue-muted);
font-weight: 600;
}
.tracker-identity-details dd,
.tracker-config-status-guide-details dd {
min-width: 0;
margin: 0;
color: var(--tkrvue-text);
overflow-wrap: anywhere;
}
.tracker-config-status-guide {
display: grid;
justify-items: start;
gap: 7px;
margin: 0 0 8px;
}
.tracker-config-status-guide-details {
width: min(760px, 100%);
padding: 10px 12px;
border: 1px solid var(--tkrvue-border);
border-left: 3px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-section-bg);
}
.tracker-config-status-guide-details p {
margin: 0;
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.4;
}
.tracker-config-status-guide-details dd {
font-size: var(--tkrvue-font-size-sm);
line-height: 1.35;
}
.tracker-network-toolbar {
margin: 8px 0 10px;
}
.tracker-network-summary {
grid-template-columns: repeat(4, minmax(120px, 1fr));
}
.tracker-network-profile-editor,
.tracker-network-filters {
display: grid;
grid-template-columns: minmax(150px, 0.9fr) minmax(280px, 1.3fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr);
gap: 10px;
align-items: end;
margin: 12px 0 14px;
}
.tracker-network-profile-editor {
column-gap: 14px;
row-gap: 10px;
}
.tracker-network-profile-editor label,
.tracker-network-filters label {
display: grid;
gap: 5px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.tracker-network-profile-editor label > span,
.tracker-network-filters label > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tracker-network-profile-editor label > small {
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.2;
}
.tracker-network-profile-editor input,
.tracker-network-profile-editor select,
.tracker-network-filters input,
.tracker-network-filters select,
.tracker-network-state select {
width: 100%;
min-width: 0;
min-height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
font-family: inherit;
font-size: var(--tkrvue-font-size-md);
line-height: 1.2;
box-sizing: border-box;
}
.tracker-network-profile-editor .check-line {
grid-template-columns: auto 1fr;
align-items: center;
color: var(--tkrvue-text);
align-self: center;
}
.tracker-network-profile-editor .check-line input {
width: auto;
min-height: 0;
}
.tracker-network-profile-editor .span-2 {
grid-column: span 2;
}
.tracker-network-profile-editor .tracker-net-code {
grid-column: 1 / 2;
}
.tracker-network-profile-editor .tracker-net-label {
grid-column: 2 / 3;
}
.tracker-network-profile-editor .tracker-net-environment {
grid-column: 3 / 4;
}
.tracker-network-profile-editor .tracker-net-service {
grid-column: 4 / 5;
}
.tracker-network-profile-editor .tracker-net-models {
grid-column: 1 / 2;
}
.tracker-network-profile-editor .tracker-net-primary-domain,
.tracker-network-profile-editor .tracker-net-backup-domain {
grid-column: 2 / 3;
}
.tracker-network-profile-editor .tracker-net-primary-port,
.tracker-network-profile-editor .tracker-net-backup-port {
grid-column: 3 / 4;
}
.tracker-network-profile-editor .tracker-net-primary-protocol,
.tracker-network-profile-editor .tracker-net-backup-protocol {
grid-column: 4 / 5;
}
.tracker-network-profile-editor .tracker-net-backup-toggle,
.tracker-network-profile-editor .tracker-net-default {
grid-column: 1 / 2;
}
.tracker-network-profile-editor .tracker-net-enabled {
grid-column: 2 / 3;
}
.tracker-network-profile-editor .tracker-net-notes {
grid-column: 3 / 5;
}
.tracker-network-profile-editor #newTrackerNetworkProfile {
grid-column: 1 / 2;
}
.tracker-network-profile-editor #saveTrackerNetworkProfile {
grid-column: 2 / 3;
justify-self: stretch;
}
.tracker-network-profile-editor .tracker-icon-action {
justify-self: start;
width: 36px;
min-width: 36px;
height: 34px;
padding: 0;
}
.tracker-network-profiles .cfg-log-row,
.tracker-network-state .cfg-log-row {
grid-template-columns: minmax(110px, 0.8fr) minmax(160px, 1.1fr) minmax(110px, 0.7fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(110px, 0.7fr);
}
.tracker-network-state .cfg-log-row {
grid-template-columns: minmax(140px, 0.9fr) minmax(180px, 1.2fr) minmax(150px, 1fr) minmax(140px, 0.9fr) minmax(180px, 1fr) minmax(120px, 0.8fr) minmax(250px, 1.2fr);
}
.tracker-network-profile-row {
width: 100%;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
text-align: left;
}
.tracker-network-profile-row:hover {
background: color-mix(in srgb, var(--tkrvue-accent) 8%, transparent);
}
.tracker-network-state-row small {
display: block;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
margin-top: 2px;
}
.tracker-network-actions {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
}
.tracker-network-actions .tracker-icon-action {
width: 34px;
min-width: 34px;
height: 32px;
padding: 0;
}
.tracker-device-identity-save,
.tracker-device-identity-initialize {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.tracker-preview-params-section {
margin: 8px 0;
}
.tracker-preview-params-toggle {
width: 100%;
min-height: 36px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
padding: 7px 10px;
text-align: left;
cursor: pointer;
}
.tracker-preview-params-toggle small {
margin-left: auto;
color: var(--tkrvue-muted);
font-weight: 600;
}
.tracker-preview-params-section.is-collapsed .tracker-preview-params-body {
display: none;
}
.tracker-preview-params-section.is-collapsed .context-help-chevron {
transform: rotate(-90deg);
}
.tracker-preview-params-body {
padding-top: 6px;
}
.tracker-config-value-grid {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 8px;
}
.tracker-config-value-grid label {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-config-value-grid small {
color: var(--tkrvue-muted);
font-weight: 600;
}
.tracker-config-value-grid input,
.tracker-config-value-grid select,
.tracker-manual-param-add input,
.tracker-manual-param-add select {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.tracker-manual-param-editor {
max-width: 1220px;
margin: 8px 0;
}
.tracker-manual-param-add {
display: grid;
grid-template-columns: minmax(260px, 560px) minmax(180px, 1fr) max-content;
gap: 8px;
align-items: end;
margin-bottom: 8px;
}
.tracker-manual-param-add label {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-manual-param-add .primary-action {
min-height: 34px;
}
.tracker-manual-param-list {
display: grid;
gap: 6px;
}
.tracker-param-decoder {
max-width: 1220px;
margin: 8px 0;
}
.tracker-param-decoder-grid {
display: grid;
grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1fr);
gap: 10px;
align-items: start;
}
.tracker-param-decoder-grid label {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-param-decoder-grid textarea {
width: 100%;
box-sizing: border-box;
min-height: 78px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 8px 10px;
resize: vertical;
}
.tracker-param-decoder-result-title {
display: block;
margin-bottom: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-param-decode-table .cfg-log-row {
grid-template-columns: minmax(58px, 0.25fr) minmax(130px, 0.55fr) minmax(180px, 1fr) minmax(90px, 0.4fr);
}
.tracker-config-sms-text {
display: block;
width: 100%;
box-sizing: border-box;
min-height: 46px;
margin: 8px 0;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 9px 10px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.tracker-config-command-editor,
.tracker-config-profile-save label {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-config-sms-counter {
justify-self: end;
color: var(--tkrvue-muted);
font-size: 0.92em;
}
.tracker-config-sms-segments {
display: grid;
gap: 6px;
margin: 4px 0 10px;
}
.tracker-config-sms-segments-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-config-sms-segments-title strong {
color: var(--tkrvue-text);
font-size: 12.5px;
}
.tracker-config-sms-segment-list {
display: grid;
gap: 6px;
}
.tracker-config-sms-segment {
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-primary);
border-radius: 7px;
background: var(--tkrvue-panel-bg);
padding: 6px 8px;
}
.tracker-config-sms-segment-head {
display: flex;
justify-content: space-between;
gap: 8px;
color: var(--tkrvue-muted);
font-size: 12px;
margin-bottom: 4px;
}
.tracker-config-sms-segment-head strong {
color: var(--tkrvue-text);
}
.tracker-config-sms-segment pre {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--tkrvue-text);
font-size: 12.5px;
line-height: 1.35;
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}
.tracker-config-profile-save {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) max-content;
gap: 8px;
align-items: end;
margin: 8px 0 10px;
}
.tracker-config-profile-save input,
.tracker-config-profile-save select {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.tracker-config-profile-save .primary-action,
.tracker-config-send-preview {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
@media (max-width: 760px) {
.tracker-device-identity-grid,
.tracker-config-profile-save {
grid-template-columns: 1fr;
}
}
.tracker-job-actions {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.tracker-job-cancel,
.tracker-job-delete,
.tracker-job-degraded {
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.cfg-log-row button.primary-action,
.cfg-log-row button.secondary-action {
width: auto;
min-width: 0;
height: auto;
}
.cfg-log-row button.danger-action,
.tracker-profile-remove,
.tracker-job-cancel,
.tracker-job-delete,
.tracker-job-degraded {
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.cfg-log-row button.danger-action svg,
.tracker-profile-remove svg,
.tracker-job-cancel svg,
.tracker-job-delete svg,
.tracker-job-degraded svg {
width: 17px;
height: 17px;
margin: 0;
flex: 0 0 auto;
display: block;
}
.tracker-param-catalog {
margin: 14px 0 10px;
}
.tracker-param-toggle {
width: 100%;
min-height: 38px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
padding: 8px 10px;
text-align: left;
cursor: pointer;
}
.tracker-param-toggle small {
margin-left: auto;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-param-catalog.is-collapsed .tracker-param-catalog-body {
display: none;
}
.tracker-param-catalog.is-collapsed .context-help-chevron {
transform: rotate(-90deg);
}
.tracker-param-catalog-body {
margin-top: 8px;
}
.tracker-param-filters {
display: grid;
grid-template-columns: minmax(160px, 0.45fr) minmax(220px, 1fr) max-content;
gap: 8px;
align-items: end;
margin-bottom: 8px;
}
.tracker-param-filters label {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.tracker-param-filters select,
.tracker-param-filters input {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.saas-tracker-configs-panel .tracker-linkage-grid label {
min-width: 0;
}
.saas-tracker-configs-panel .security-settings-grid .primary-action {
align-self: end;
min-height: 34px;
gap: 7px;
padding: 0 12px;
white-space: nowrap;
}
.saas-tracker-configs-panel .security-settings-grid .primary-action svg {
flex: 0 0 auto;
}
@media (max-width: 980px) {
.tracker-global-search-fields,
.tracker-network-profile-editor,
.tracker-network-filters,
.saas-tracker-configs-panel .security-settings-grid,
.tracker-profile-assistant-grid,
.tracker-config-profile-workspace,
.tracker-config-send-bar,
.tracker-param-filters,
.tracker-config-value-grid,
.tracker-manual-param-add,
.tracker-param-decoder-grid {
grid-template-columns: 1fr;
}
.saas-tracker-configs-panel .security-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tracker-network-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tracker-network-profile-editor > *,
.tracker-network-profile-editor .span-2 {
grid-column: auto !important;
}
.saas-tracker-configs-panel .tracker-linkage-grid .tracker-action-button {
grid-column: auto;
}
.tracker-global-search-fields .tracker-icon-action,
.tracker-global-search-fields .tracker-select-result-action,
.tracker-global-search-actions {
justify-self: start;
}
}
@media (max-width: 480px) {
.tracker-global-search {
padding: 10px;
}
.saas-tracker-configs-panel .tracker-action-button,
.saas-tracker-configs-panel .tracker-select-result-action,
.saas-tracker-configs-panel .security-settings-grid .primary-action,
.tracker-param-filters .tracker-icon-action {
width: 100%;
}
.saas-tracker-configs-panel .security-summary {
grid-template-columns: 1fr;
}
.tracker-network-summary {
grid-template-columns: 1fr;
}
.tracker-global-search-actions {
width: 100%;
}
}
.cfg-log-type {
display: inline-flex;
border-radius: 999px;
padding: 2px 7px;
background: var(--tkrvue-layer-surface-bg);
border: 1px solid var(--tkrvue-border);
font-size: 12px;
}
.cfg-log-payload {
margin-top: 4px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.cfg-log-payload pre {
max-height: 180px;
overflow: auto;
margin: 4px 0 0;
padding: 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.saas-mcd-panel {
display: grid;
gap: 10px;
}
.mcd-top-controls {
display: grid;
gap: 8px;
}
.mcd-controls-toggle {
width: 100%;
min-height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
display: inline-flex;
align-items: center;
gap: 10px;
justify-content: flex-start;
padding: 0 12px;
cursor: pointer;
}
.mcd-controls-toggle-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
color: var(--tkrvue-accent);
display: inline-flex;
align-items: center;
justify-content: center;
}
.mcd-controls-toggle-icon svg {
width: 18px;
height: 18px;
}
.mcd-controls-toggle-copy {
min-width: 0;
display: flex;
flex: 1 1 auto;
align-items: baseline;
justify-content: space-between;
gap: 12px;
text-align: left;
}
.mcd-controls-toggle-copy small {
min-width: 0;
color: var(--tkrvue-muted);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcd-top-controls-content {
display: grid;
gap: 10px;
}
.mcd-top-controls.is-collapsed .mcd-top-controls-content {
display: none;
}
.mcd-toolbar {
display: grid;
grid-template-columns: minmax(120px, 0.55fr) minmax(170px, 0.75fr) minmax(120px, 0.55fr) minmax(140px, 0.65fr) minmax(120px, 0.55fr) minmax(200px, 1fr) minmax(150px, 0.7fr) 34px 34px 34px;
gap: 8px;
align-items: end;
}
.mcd-toolbar label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: 12px;
}
.mcd-toolbar select,
.mcd-toolbar input {
height: 32px;
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 9px;
}
.mcd-toolbar button {
width: 32px;
height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
display: inline-flex;
align-items: center;
justify-content: center;
}
.mcd-domain-legend {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.mcd-domain-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 0 9px;
font-size: 12px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: opacity 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.mcd-domain-toggle:hover {
border-color: var(--mcd-color);
transform: translateY(-1px);
}
.mcd-domain-toggle:focus-visible {
outline: 2px solid var(--tkrvue-accent);
outline-offset: 2px;
}
.mcd-domain-toggle.is-active {
border-color: color-mix(in srgb, var(--mcd-color) 62%, var(--tkrvue-border));
background: color-mix(in srgb, var(--mcd-color) 10%, var(--tkrvue-input-bg));
}
.mcd-domain-toggle.is-hidden {
opacity: 0.52;
}
.mcd-domain-toggle i {
width: 10px;
height: 10px;
flex: 0 0 10px;
border-radius: 999px;
background: var(--mcd-color);
}
.mcd-domain-toggle.is-hidden i {
border: 2px solid var(--mcd-color);
background: transparent;
}
.mcd-canvas-shell {
height: min(62vh, 760px);
min-height: 420px;
max-height: none;
overflow: auto;
position: relative;
resize: vertical;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
cursor: grab;
background:
linear-gradient(var(--tkrvue-layer-surface-bg), var(--tkrvue-layer-surface-bg)) padding-box,
linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(22, 163, 74, 0.14)) border-box;
}
.mcd-canvas-shell.is-panning,
.mcd-canvas-shell.is-panning * {
cursor: grabbing !important;
user-select: none !important;
}
.mcd-zoom-bar {
position: sticky;
top: 8px;
left: 8px;
z-index: 12;
width: max-content;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 8px;
padding: 5px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 94%, transparent);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
.mcd-zoom-bar span {
padding: 0 6px;
color: var(--tkrvue-muted);
font-size: 12px;
font-weight: 800;
}
.mcd-zoom-bar strong {
min-width: 52px;
text-align: center;
color: var(--tkrvue-text);
font-size: 12px;
}
.mcd-zoom-bar button {
min-width: 30px;
height: 28px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
font-weight: 900;
cursor: pointer;
}
.mcd-zoom-bar button:hover:not(:disabled) {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
}
.mcd-zoom-bar button:disabled {
opacity: 0.45;
cursor: default;
}
.mcd-canvas-viewport {
position: relative;
margin-top: -44px;
}
.mcd-top-controls.is-collapsed + .mcd-canvas-shell {
height: min(78vh, 980px);
}
@media (max-width: 760px) {
.mcd-controls-toggle-copy {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
.mcd-controls-toggle-copy small {
width: 100%;
}
}
.mcd-canvas {
position: relative;
min-width: 1780px;
min-height: 1420px;
transform-origin: 0 0;
}
.mcd-relations {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.mcd-relation path {
stroke: color-mix(in srgb, var(--tkrvue-muted) 58%, transparent);
stroke-width: 1.7;
fill: none;
marker-end: url(#mcdArrow);
}
.mcd-relation-cardinality {
paint-order: stroke;
stroke: var(--tkrvue-layer-bg);
stroke-width: 5px;
stroke-linejoin: round;
fill: var(--tkrvue-text);
font-size: 11px;
font-weight: 800;
text-anchor: middle;
dominant-baseline: central;
}
.mcd-relations marker path {
fill: color-mix(in srgb, var(--tkrvue-muted) 72%, transparent);
stroke: none;
}
.mcd-table-card {
position: absolute;
width: 196px;
border: 1px solid var(--tkrvue-border);
border-left: 5px solid var(--mcd-color);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-text);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
overflow: hidden;
cursor: grab;
z-index: 2;
user-select: none;
touch-action: none;
}
.mcd-table-card.is-selected {
outline: 3px solid color-mix(in srgb, var(--tkrvue-accent) 72%, transparent);
box-shadow: 0 12px 26px rgba(37, 99, 235, 0.26);
z-index: 4;
}
.mcd-table-card.is-linked:not(.is-selected) {
box-shadow: 0 10px 22px rgba(22, 163, 74, 0.18);
}
.mcd-table-card.is-dragging {
cursor: grabbing;
opacity: 0.92;
z-index: 8;
}
.mcd-table-card header {
display: grid;
gap: 2px;
padding: 8px 9px 6px;
background: color-mix(in srgb, var(--mcd-color) 13%, var(--tkrvue-input-bg));
border-bottom: 1px solid var(--tkrvue-border);
}
.mcd-table-card header strong {
font-size: 12px;
overflow-wrap: anywhere;
}
.mcd-table-card header span {
color: var(--tkrvue-muted);
font-size: 11px;
}
.mcd-table-card ul {
list-style: none;
display: grid;
gap: 3px;
margin: 0;
padding: 7px 9px 8px;
font-size: 11px;
color: var(--tkrvue-muted);
}
.mcd-table-card li {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
align-items: center;
gap: 4px;
min-height: 15px;
overflow-wrap: anywhere;
}
.mcd-table-card li.is-relation-field {
color: var(--tkrvue-text);
font-weight: 800;
}
.mcd-table-card li.is-primary-key {
color: #8a5a00;
font-weight: 800;
}
:root[data-theme="dark"] .mcd-table-card li.is-primary-key {
color: #facc15;
}
.mcd-field-key {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
color: #d4a017;
font-size: 10px;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}
.mcd-field-spacer {
width: 14px;
height: 14px;
}
@media (max-width: 980px) {
.mcd-toolbar {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.cfg-log-toolbar,
.cfg-log-header,
.cfg-log-row {
grid-template-columns: 1fr;
}
}
.server-add-row button:not(.primary-action),
.admin-ip-toolbar button:not(.primary-action),
.admin-ip-preview button,
.security-actions button,
.server-node-row button,
.admin-ip-row button {
display: inline-flex;
align-items: center;
justify-content: center;
}
.server-add-row button:not(.primary-action) svg,
.admin-ip-toolbar button:not(.primary-action) svg,
.admin-ip-preview button svg,
.security-actions button svg,
.server-node-row button svg,
.admin-ip-row button svg {
width: 17px;
height: 17px;
color: currentColor;
stroke: currentColor;
}
.server-add-row button:not(.primary-action),
.admin-ip-toolbar button:not(.primary-action) {
color: var(--tkrvue-text);
background: var(--tkrvue-input-bg);
}
.admin-ip-preview button {
color: #fff;
background: var(--tkrvue-accent);
border-color: var(--tkrvue-accent);
}
.admin-ip-preview button svg {
color: #fff;
stroke: #fff;
}
.server-add-row button:not(.primary-action):hover,
.admin-ip-toolbar button:not(.primary-action):hover {
color: var(--tkrvue-accent);
background: var(--tkrvue-layer-surface-bg);
}
.admin-ip-preview button:hover {
color: #fff;
background: var(--tkrvue-accent);
filter: brightness(1.05);
}
.admin-ip-toolbar {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 8px;
margin: 8px 0;
}
.admin-ip-toolbar label {
display: grid;
gap: 4px;
min-width: min(360px, 58vw);
color: var(--tkrvue-muted);
font-size: 12px;
}
.admin-ip-active-target {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
max-width: 100%;
margin: 2px 0 8px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
padding: 7px 10px;
}
.admin-ip-active-target span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-ip-toolbar select,
.admin-ip-preview input,
.admin-ip-row input,
.admin-ip-row select,
.admin-ip-bypass-create input,
.admin-ip-bypass-create select,
.admin-ip-bypass-user input {
height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.admin-ip-toolbar button,
.admin-ip-preview button,
.admin-ip-row button,
.admin-ip-bypass-create button,
.admin-ip-bypass-row button {
width: 32px;
min-width: 32px;
height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 0;
font-weight: 700;
cursor: pointer;
}
.admin-ip-preview button.primary-action {
background: var(--tkrvue-accent);
border-color: var(--tkrvue-accent);
color: #fff;
}
.admin-ip-preview button.primary-action svg {
color: #fff;
stroke: #fff;
}
.admin-ip-list {
display: grid;
gap: 7px;
}
.admin-ip-bypass-section {
display: grid;
gap: 8px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--tkrvue-border);
}
.admin-ip-bypass-section h3 {
margin: 0;
font-size: 15px;
}
.admin-ip-bypass-section p {
margin: 0;
color: var(--tkrvue-muted);
font-size: 13px;
line-height: 1.35;
}
.admin-ip-bypass-create {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.45fr) 130px 32px;
gap: 8px;
align-items: center;
}
.admin-ip-bypass-user {
display: grid;
grid-template-columns: minmax(180px, max-content) minmax(240px, 420px) minmax(180px, 1fr);
gap: 8px;
align-items: start;
}
.admin-ip-bypass-current-user {
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-bg);
padding: 0 10px;
font-size: 13px;
}
.admin-ip-bypass-current-user input {
width: 16px;
height: 16px;
}
.admin-ip-bypass-user-search {
display: grid;
gap: 4px;
}
.admin-ip-bypass-user-search span,
.admin-ip-bypass-user-note {
color: var(--tkrvue-muted);
font-size: 12px;
}
.admin-ip-bypass-selected-user {
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 7px;
background: var(--tkrvue-layer-bg);
padding: 4px 8px;
font-size: 13px;
}
.admin-ip-bypass-selected-user span {
color: var(--tkrvue-muted);
}
.admin-ip-bypass-selected-user button {
margin-left: auto;
border: 1px solid #fecaca;
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: #dc2626;
cursor: pointer;
}
.admin-ip-bypass-code {
display: grid;
grid-template-columns: auto minmax(180px, max-content) 1fr;
gap: 8px;
align-items: center;
border: 1px solid var(--tkrvue-status-success-border);
border-radius: 7px;
background: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
padding: 9px 10px;
}
.admin-ip-bypass-code code {
border: 1px solid var(--tkrvue-status-success-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
cursor: copy;
font-weight: 700;
padding: 4px 8px;
letter-spacing: 0.02em;
user-select: all;
}
.admin-ip-bypass-code code:focus {
outline: 2px solid var(--tkrvue-accent, #316da5);
outline-offset: 2px;
}
.admin-ip-bypass-mail {
display: grid;
gap: 8px;
grid-column: 1 / -1;
}
.admin-ip-bypass-mail-controls {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.55fr) minmax(140px, 0.45fr) 34px 34px;
gap: 8px;
align-items: center;
}
.admin-ip-bypass-mail input,
.admin-ip-bypass-mail select {
min-height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.admin-ip-bypass-mail-controls .view-icon-button,
.admin-ip-bypass-mail-controls .primary-action {
width: 32px;
min-width: 32px;
height: 32px;
}
.admin-ip-bypass-mail-controls .view-icon-button.primary-action {
background: var(--tkrvue-accent);
border: 1px solid var(--tkrvue-accent);
color: #fff;
}
.admin-ip-bypass-mail-controls .view-icon-button.primary-action svg,
.admin-ip-bypass-mail-controls .primary-action svg {
color: #fff;
stroke: #fff;
}
.admin-ip-bypass-list {
display: grid;
gap: 7px;
}
.admin-ip-bypass-row {
display: grid;
grid-template-columns: minmax(140px, 1fr) 145px minmax(170px, 0.8fr) 170px 120px 92px 32px;
gap: 8px;
align-items: center;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 7px;
background: var(--tkrvue-layer-bg);
padding: 7px 10px;
}
.admin-ip-bypass-row code {
min-height: 28px;
display: inline-flex;
align-items: center;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-size: 12px;
padding: 0 8px;
}
.admin-ip-preview {
display: grid;
grid-template-columns: minmax(220px, 360px) 32px minmax(220px, 1fr);
align-items: center;
gap: 8px;
margin: 8px 0 10px;
}
.admin-ip-preview code,
.admin-ip-stored {
min-height: 32px;
display: inline-flex;
align-items: center;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-size: 12px;
line-height: 1.2;
padding: 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-ip-row {
display: grid;
grid-template-columns: 88px minmax(130px, 0.9fr) minmax(150px, 0.8fr) minmax(112px, 0.55fr) 142px minmax(170px, 1fr) 32px;
gap: 8px;
align-items: center;
min-height: 40px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 7px;
background: var(--tkrvue-layer-bg);
padding: 0 10px;
}
.admin-ip-stored {
width: 100%;
}
@media (max-width: 860px) {
.admin-ip-preview,
.admin-ip-row,
.admin-ip-bypass-create,
.admin-ip-bypass-user,
.admin-ip-bypass-mail,
.admin-ip-bypass-row,
.admin-ip-bypass-code {
grid-template-columns: 1fr;
}
}
.organization-mail-settings {
display: grid;
gap: 12px;
}
.mailsettings-header {
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
}
.mailsettings-header h3,
.mailsettings-card h4 {
margin: 0 0 4px;
}
.mailsettings-card-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.mailsettings-card-title h4 {
margin: 0;
}
.mailsettings-grid {
display: grid;
grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1.1fr);
gap: 12px;
}
.mailsettings-card {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 12px;
container-name: mailsettings-card;
container-type: inline-size;
}
.mailsettings-row {
display: grid;
grid-template-columns: minmax(130px, 0.7fr) minmax(160px, 1fr) minmax(190px, 1fr) minmax(90px, 0.5fr);
gap: 8px;
align-items: end;
border-top: 1px solid var(--tkrvue-border);
padding: 8px 0;
}
.mailsettings-row > * {
min-width: 0;
max-width: 100%;
}
.mailsettings-row:first-of-type {
border-top: 0;
}
.mailsettings-row label,
.mailsettings-editor label {
display: grid;
gap: 4px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.mailsettings-row input,
.mailsettings-editor input,
.mailsettings-editor select,
.mailsettings-editor textarea {
width: 100%;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 7px 9px;
font: inherit;
}
.mailsettings-template-row {
grid-template-columns: minmax(0, 1fr) auto;
color: var(--tkrvue-text);
}
.mailsettings-template-subject {
grid-column: 1 / -1;
grid-row: 2;
}
.mailsettings-template-controls {
grid-column: 2;
grid-row: 1;
}
.mailsettings-template-list-title {
align-items: start;
}
.mailsettings-template-list-title > div {
min-width: 0;
}
.mailsettings-template-list-title small {
display: block;
color: var(--tkrvue-muted);
line-height: 1.35;
}
.mailsettings-template-list {
display: grid;
gap: 7px;
margin-top: 9px;
}
button.mailsettings-template-row {
width: 100%;
min-width: 0;
align-items: center;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 10px;
text-align: left;
font: inherit;
cursor: pointer;
}
button.mailsettings-template-row:hover,
button.mailsettings-template-row:focus-visible {
border-color: color-mix(in srgb, var(--tkrvue-accent) 58%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
}
button.mailsettings-template-row.is-active {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-layer-surface-bg));
box-shadow: inset 4px 0 0 var(--tkrvue-accent), 0 0 0 1px color-mix(in srgb, var(--tkrvue-accent) 12%, transparent);
}
.mailsettings-template-main,
.mailsettings-template-controls {
min-width: 0;
display: grid;
gap: 4px;
}
.mailsettings-template-main small {
color: var(--tkrvue-muted);
font-size: 11px;
}
.mailsettings-template-subject {
min-width: 0;
overflow-wrap: anywhere;
line-height: 1.35;
}
.mailsettings-template-controls {
justify-items: stretch;
}
.mailsettings-template-action {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 6px;
color: var(--tkrvue-accent);
font-size: 11px;
font-weight: 750;
white-space: nowrap;
}
.mailsettings-editor-title {
display: grid;
gap: 2px;
padding-bottom: 8px;
border-bottom: 1px solid var(--tkrvue-border);
}
.mailsettings-editor-title > span {
color: var(--tkrvue-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mailsettings-editor-title h4 {
margin: 0;
}
.mailsettings-editor {
display: grid;
gap: 8px;
scroll-margin-block-start: 12px;
}
@container mailsettings-card (max-width: 680px) {
.mailsettings-row:not(.mailsettings-template-row) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container mailsettings-card (max-width: 430px) {
.mailsettings-row:not(.mailsettings-template-row) {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 860px) {
.mailsettings-grid,
.mailsettings-row {
grid-template-columns: 1fr;
}
.mailsettings-template-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.mailsettings-template-subject {
grid-column: 1 / -1;
grid-row: 2;
}
.mailsettings-template-controls {
grid-column: 2;
grid-row: 1;
}
}
.admin-ip-row .danger-action,
.admin-ip-toolbar .danger-action,
.admin-ip-bypass-row .danger-action {
border-color: #fecaca;
background: var(--tkrvue-input-bg);
color: #dc2626;
}
.saas-language-summary {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.saas-language-toolbar {
display: flex;
gap: 8px;
margin-bottom: 6px;
width: min(760px, 100%);
max-width: 100%;
grid-template-columns: none;
align-items: start;
}
.saas-language-toolbar .iso-language-picker {
flex: 1 1 420px;
min-width: 0;
}
.saas-language-toolbar #saasAddLanguageButton,
.saas-language-toolbar #saasRemoveLanguageButton {
flex: 0 0 34px;
width: 34px;
min-width: 34px;
position: relative;
z-index: 80;
}
.saas-language-sort,
.saas-language-filter {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 4px 0 6px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.saas-language-sort select,
.saas-language-filter input {
height: 30px;
min-width: 160px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.saas-language-filter {
margin-left: 10px;
}
.saas-language-filter input {
min-width: min(320px, 38vw);
}
.saas-language-list {
display: grid;
gap: 7px;
margin-top: 6px;
min-width: 0;
max-width: 100%;
max-height: min(46vh, 520px);
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
scrollbar-gutter: stable;
}
.saas-language-header,
.saas-language-row {
display: grid;
grid-template-columns:
minmax(130px, 1.45fr)
minmax(76px, 0.7fr)
minmax(76px, 0.75fr)
minmax(92px, 0.95fr)
minmax(58px, 0.55fr)
minmax(94px, 0.8fr)
minmax(74px, 0.65fr)
minmax(96px, 0.85fr)
minmax(72px, 0.65fr);
align-items: center;
gap: 8px;
min-width: 0;
}
.saas-language-header.no-action,
.saas-language-row.no-action {
grid-template-columns:
minmax(130px, 1.55fr)
minmax(76px, 0.72fr)
minmax(76px, 0.78fr)
minmax(92px, 0.98fr)
minmax(58px, 0.58fr)
minmax(94px, 0.84fr)
minmax(74px, 0.68fr)
minmax(108px, 0.95fr);
}
.saas-language-header.no-text.has-action,
.saas-language-row.no-text.has-action {
grid-template-columns:
minmax(130px, 1.55fr)
minmax(76px, 0.72fr)
minmax(76px, 0.78fr)
minmax(112px, 1fr)
minmax(94px, 0.84fr)
minmax(116px, 0.95fr)
minmax(112px, 0.95fr)
minmax(72px, 0.65fr);
}
.saas-language-header.no-text.no-action,
.saas-language-row.no-text.no-action {
grid-template-columns:
minmax(150px, 1.7fr)
minmax(82px, 0.75fr)
minmax(82px, 0.8fr)
minmax(128px, 1.05fr)
minmax(104px, 0.9fr)
minmax(130px, 0.95fr)
minmax(128px, 1fr);
}
.saas-language-header.no-status.no-text.no-action,
.saas-language-row.no-status.no-text.no-action {
grid-template-columns:
minmax(170px, 1.7fr)
minmax(150px, 1.1fr)
minmax(110px, 0.9fr)
minmax(130px, 0.95fr)
minmax(128px, 1fr);
}
.saas-language-header {
margin-top: 10px;
padding: 0 10px;
min-height: 28px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.saas-language-header > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.saas-language-row {
min-height: 38px;
border: 1px solid var(--tkrvue-border);
border-left-width: 4px;
border-radius: 7px;
background: var(--tkrvue-layer-bg);
padding: 0 10px;
}
.saas-language-row > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.saas-language-row.is-ready {
border-left-color: #16a34a;
}
.saas-language-row.is-not-ready {
border-left-color: #f59e0b;
opacity: 0.78;
}
.saas-language-row.is-disabled {
border-left-color: #94a3b8;
opacity: 0.72;
}
.saas-language-main {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.saas-language-main code {
color: var(--tkrvue-muted);
font-family: Consolas, monospace;
font-size: 12px;
}
.saas-feature-state.muted {
background: #e2e8f0;
color: #475569;
}
.saas-feature-state.is-pending-publication {
border: 1px solid #f59e0b;
background: #fef3c7;
color: #92400e;
}
:root[data-theme="dark"] .saas-feature-state.is-pending-publication {
border-color: #f59e0b;
background: rgba(245, 158, 11, 0.14);
color: #fde68a;
}
.saas-job-state,
.saas-language-date {
color: var(--tkrvue-muted);
font-size: 12px;
white-space: nowrap;
}
.saas-job-state-wrap {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 0;
color: var(--tkrvue-muted);
}
.saas-job-state-wrap > small {
max-width: 100%;
overflow: hidden;
color: inherit;
font-size: 10px;
font-weight: 700;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.saas-job-state {
display: inline-flex;
justify-content: center;
padding: 2px 7px;
border-radius: 999px;
background: var(--tkrvue-layer-surface-bg);
border: 1px solid var(--tkrvue-border);
color: var(--tkrvue-layer-text);
font-weight: 700;
}
.saas-job-state.is-pending {
border-color: #f59e0b;
background: #fef3c7;
color: #92400e;
}
.saas-job-state.is-running {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 16%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.saas-job-state.is-done {
border-color: #16a34a;
background: #dcfce7;
color: #166534;
}
.saas-job-state.is-error {
border-color: #ef4444;
background: #fee2e2;
color: #991b1b;
}
.saas-job-state.is-cancelled,
.saas-job-state.is-none {
color: var(--tkrvue-muted);
}
:root[data-theme="dark"] .saas-job-state.is-pending {
background: rgba(245, 158, 11, 0.14);
color: #fde68a;
}
:root[data-theme="dark"] .saas-job-state.is-running {
background: rgba(37, 99, 235, 0.18);
color: #bfdbfe;
}
:root[data-theme="dark"] .saas-job-state.is-done {
background: rgba(22, 163, 74, 0.16);
color: #bbf7d0;
}
:root[data-theme="dark"] .saas-job-state.is-error {
background: rgba(239, 68, 68, 0.16);
color: #fecaca;
}
.saas-access-button,
.saas-translate-button {
height: 28px;
border: 1px solid var(--tkrvue-accent);
border-radius: 6px;
background: var(--tkrvue-accent);
color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: 700;
padding: 0 8px;
}
.saas-access-button {
background: #16a34a;
border-color: #16a34a;
}
.saas-access-button.is-enabled {
background: #64748b;
border-color: #64748b;
}
.saas-access-button:disabled {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
cursor: default;
}
.saas-access-button:hover:not(:disabled),
.saas-translate-button:hover:not(:disabled) {
filter: brightness(1.05);
}
.saas-translate-button:disabled {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
cursor: default;
}
.saas-translate-button.is-ready:disabled {
border-color: #16a34a;
background: #dcfce7;
color: #166534;
opacity: 1;
}
:root[data-theme="dark"] .saas-translate-button.is-ready:disabled {
border-color: #22c55e;
background: rgba(22, 163, 74, 0.16);
color: #bbf7d0;
}
.saas-translate-button.is-relaunch {
background: #4f46e5;
border-color: #4f46e5;
}
.saas-translate-button.is-restore {
background: #64748b;
border-color: #64748b;
}
.saas-action-muted {
display: inline-flex;
min-height: 28px;
align-items: center;
justify-content: center;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-size: 12px;
font-weight: 700;
}
.iso-language-picker {
position: relative;
min-width: min(590px, 58vw);
}
.iso-language-button {
width: 100%;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 10px;
cursor: pointer;
text-align: left;
}
.iso-language-button [data-iso-language-label] {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.iso-language-options {
position: absolute;
z-index: 70;
top: calc(100% + 4px);
left: 0;
width: 100%;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
padding: 4px;
}
.iso-language-options button.iso-language-option {
background: transparent;
color: var(--tkrvue-input-text);
}
.iso-language-option {
width: 100%;
min-height: 31px;
display: flex;
align-items: center;
gap: 8px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--tkrvue-input-text);
padding: 0 8px;
cursor: pointer;
text-align: left;
}
.iso-language-option:hover {
background: var(--tkrvue-sidebar-active-bg);
}
.breadcrumb-part {
min-width: 0;
max-width: 190px;
border: 0;
background: transparent;
color: var(--tkrvue-muted);
padding: 0 2px;
cursor: pointer;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb-part:disabled {
color: var(--tkrvue-header-text);
cursor: default;
font-weight: 600;
}
.breadcrumb-separator {
flex: 0 0 auto;
padding: 0 4px;
color: var(--tkrvue-muted);
}
#breadcrumb {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: min(44vw, 760px);
overflow: hidden;
white-space: nowrap;
}
#breadcrumb .breadcrumb-part:last-child {
max-width: 260px;
}
.admin-actions {
display: flex;
gap: 4px;
justify-content: flex-end;
margin: 0;
flex-wrap: wrap;
}
.admin-actions button {
width: 30px;
min-width: 30px;
height: 30px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.admin-actions button:hover {
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-accent);
}
button.danger-action,
.admin-actions button.danger-action,
.organization-resource-actions button.danger-action,
.organization-media-actions button.danger-action,
.organization-site-type-row button.danger-action,
.organization-site-type-add button.danger-action {
min-height: 34px;
border: 1px solid #fecaca;
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: #dc2626;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 10px;
font: inherit;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
button.danger-action svg,
.admin-actions button.danger-action svg,
.organization-resource-actions button.danger-action svg,
.organization-media-actions button.danger-action svg,
.organization-site-type-row button.danger-action svg,
.organization-site-type-add button.danger-action svg {
width: 18px;
height: 18px;
display: block;
color: #dc2626;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
button.danger-action svg *,
.admin-actions button.danger-action svg *,
.organization-resource-actions button.danger-action svg *,
.organization-media-actions button.danger-action svg *,
.organization-site-type-row button.danger-action svg *,
.organization-site-type-add button.danger-action svg * {
stroke: currentColor;
fill: none;
}
button.danger-action:hover,
.admin-actions button.danger-action:hover,
.organization-resource-actions button.danger-action:hover,
.organization-media-actions button.danger-action:hover,
.organization-site-type-row button.danger-action:hover,
.organization-site-type-add button.danger-action:hover {
background: color-mix(in srgb, #dc2626 8%, var(--tkrvue-input-bg));
border-color: color-mix(in srgb, #dc2626 42%, var(--tkrvue-border));
color: #b91c1c;
}
button.primary-action,
.admin-actions button.primary-action,
.saas-admin-toolbar button.primary-action,
.organization-resource-actions button.primary-action,
.organization-site-type-add button.primary-action,
.admin-ip-toolbar button.primary-action,
.appearance-add-language-row button.primary-action {
min-height: 34px;
border: 1px solid var(--tkrvue-accent);
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 12px;
font: inherit;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: var(--tkrvue-accent);
color: #fff;
}
button.primary-action:hover,
.admin-actions button.primary-action:hover,
.saas-admin-toolbar button.primary-action:hover,
.organization-resource-actions button.primary-action:hover,
.organization-site-type-add button.primary-action:hover,
.admin-ip-toolbar button.primary-action:hover,
.appearance-add-language-row button.primary-action:hover {
background: var(--tkrvue-accent);
color: #fff;
filter: brightness(1.05);
}
button.primary-action svg,
.admin-actions button.primary-action svg,
.saas-admin-toolbar button.primary-action svg,
.organization-resource-actions button.primary-action svg,
.organization-site-type-add button.primary-action svg,
.admin-ip-toolbar button.primary-action svg,
.appearance-add-language-row button.primary-action svg {
color: #fff;
stroke: #fff;
}
.secondary-action {
min-height: 34px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 46%, var(--tkrvue-border));
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 11px;
font: inherit;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
.secondary-action:hover {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
.secondary-action svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
color: currentColor;
stroke: currentColor;
fill: none;
}
button.primary-action:disabled,
button.secondary-action:disabled,
button.danger-action:disabled,
.secondary-icon-action:disabled {
cursor: not-allowed;
opacity: 0.55;
filter: none;
}
.secondary-icon-action {
width: 36px;
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-layer-text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.secondary-icon-action:hover {
color: var(--tkrvue-accent);
border-color: color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
}
.secondary-icon-action svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
}
button.tkrvue-icon-button,
.admin-actions button.tkrvue-icon-button,
.primary-action.tkrvue-icon-button,
.secondary-action.tkrvue-icon-button,
.secondary-icon-action.tkrvue-icon-button,
.danger-action.tkrvue-icon-button,
.tracker-icon-action.tkrvue-icon-button {
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
padding: 0;
gap: 0;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
button.tkrvue-icon-button svg,
.admin-actions button.tkrvue-icon-button svg,
.primary-action.tkrvue-icon-button svg,
.secondary-action.tkrvue-icon-button svg,
.secondary-icon-action.tkrvue-icon-button svg,
.danger-action.tkrvue-icon-button svg,
.tracker-icon-action.tkrvue-icon-button svg {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
margin: 0;
display: block;
flex: 0 0 auto;
stroke-width: 2.15;
}
button.tkrvue-save-action svg,
.admin-actions button.tkrvue-save-action svg,
.primary-action.tkrvue-save-action svg,
.tracker-icon-action.tkrvue-save-action svg {
width: 21px;
height: 21px;
min-width: 21px;
min-height: 21px;
stroke-width: 2.25;
}
.saas-admin-toolbar .primary-action {
width: 32px;
min-width: 32px;
height: 32px;
border: 1px solid var(--tkrvue-accent);
border-radius: 6px;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.config-table tbody tr {
cursor: default;
}
.config-table input[type="text"],
.config-table input[type="number"] {
width: 100%;
min-width: 0;
height: 24px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
padding: 0 6px;
box-sizing: border-box;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.config-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 6px;
flex: 0 0 auto;
}
.config-filters .inline-field {
display: grid;
gap: 2px;
min-width: 170px;
}
.config-filters .inline-field span {
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.1;
}
.config-filters .compact-field select {
min-width: 190px;
}
.menu-language-picker {
position: relative;
min-width: 190px;
}
.menu-language-button {
width: 100%;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 9px;
font-size: 14px;
cursor: pointer;
}
.menu-language-button .flag-icon {
flex: 0 0 auto;
}
.flag-icon.flag-empty {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.organization-contact-language-picker {
width: 100%;
min-width: 0;
}
.menu-language-button span:nth-child(2) {
flex: 1 1 auto;
text-align: left;
}
.menu-language-options {
position: absolute;
z-index: 60;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
max-height: 230px;
overflow-y: auto;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
padding: 4px;
}
.menu-language-option {
width: 100%;
height: 30px;
display: flex;
align-items: center;
gap: 8px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--tkrvue-input-text);
padding: 0 8px;
font-size: 14px;
cursor: pointer;
text-align: left;
}
.menu-language-option:hover,
.menu-language-option.active {
background: var(--tkrvue-sidebar-active-bg);
}
.config-filters select,
.config-filters input[type="search"] {
height: 30px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 9px;
font-size: 14px;
min-width: 0;
}
.config-filters input[type="search"] {
flex: 1 1 260px;
}
.menu-order-history {
color: var(--tkrvue-layer-text);
}
.view-status {
position: sticky;
top: 0;
z-index: 20;
margin: 0 0 8px;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
/* Les messages de layer sont ancrés au titre par le constructeur commun.
Ce positionnement s'applique aussi automatiquement aux futures layers. */
.view-panel > .view-status-header {
position: relative;
top: auto;
z-index: 20;
flex: 0 0 auto;
width: 100%;
box-sizing: border-box;
margin: 0;
border-top: 0;
border-right: 0;
border-left: 0;
border-radius: 0;
}
.view-status.success {
border-color: var(--tkrvue-status-success-border);
background: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
}
.view-status.error {
border-color: var(--tkrvue-status-error-border);
background: var(--tkrvue-status-error-bg);
color: var(--tkrvue-status-error-text);
}
.view-status.critical {
border-color: var(--tkrvue-status-error-border);
background: var(--tkrvue-status-error-bg);
color: var(--tkrvue-status-error-text);
}
.view-panel > .view-status-header.critical {
width: auto;
margin: 10px 12px;
padding: 11px 12px;
border: 1px solid var(--tkrvue-status-error-border);
border-left: 4px solid var(--tkrvue-status-error-text);
border-radius: 8px;
align-items: flex-start;
justify-content: flex-start;
box-shadow: 0 3px 10px color-mix(in srgb, var(--tkrvue-status-error-text) 10%, transparent);
}
.view-status-critical-icon {
display: inline-flex;
flex: 0 0 32px;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--tkrvue-status-error-text) 12%, transparent);
}
.view-status-critical-icon svg {
width: 19px;
height: 19px;
}
.view-status-critical-copy {
display: grid;
min-width: 0;
gap: 3px;
}
.view-status-critical-copy strong {
font-size: var(--tkrvue-font-size-md);
line-height: 1.25;
}
.view-status-critical-copy > span {
font-size: var(--tkrvue-font-size-sm);
line-height: 1.4;
}
.view-status.warning {
border-color: var(--tkrvue-status-warning-border);
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
}
.view-status.info {
border-color: var(--tkrvue-status-info-border);
background: var(--tkrvue-status-info-bg);
color: var(--tkrvue-status-info-text);
}
.view-status.structured-status {
align-items: flex-start;
}
.view-status.structured-status > :first-child {
min-width: 0;
flex: 1 1 auto;
}
.view-status > span {
min-width: 0;
flex: 1 1 auto;
}
.user-management-import-report-status {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.user-management-import-report-status > span {
flex: 0 1 auto;
min-width: 0;
}
.user-management-import-report-action {
flex: 0 0 auto;
width: auto;
min-width: 0;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.view-status > .user-management-relay-status {
flex: 0 1 auto;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
white-space: normal;
}
.sim-provider-import-error {
display: grid;
gap: 8px;
width: 100%;
}
.sim-provider-header-diff {
max-height: min(34vh, 320px);
overflow: auto;
border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
border-radius: 6px;
background: color-mix(in srgb, #fff 42%, transparent);
}
.sim-provider-header-diff-title {
padding: 6px 8px;
font-weight: 700;
}
.sim-provider-header-diff table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.sim-provider-header-diff th,
.sim-provider-header-diff td {
padding: 5px 8px;
border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
text-align: left;
vertical-align: top;
}
.sim-provider-header-diff th {
position: sticky;
top: 0;
background: var(--tkrvue-status-error-bg);
font-weight: 700;
}
.sim-provider-header-diff td:first-child,
.sim-provider-header-diff th:first-child {
width: 72px;
white-space: nowrap;
}
.view-status-action {
flex: 0 0 auto;
width: 36px;
min-width: 36px;
height: 34px;
min-height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cfg-propagation {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
padding: 6px 8px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
border-left: 3px solid var(--tkrvue-accent);
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-bg));
color: var(--tkrvue-layer-text);
font-size: 12px;
line-height: 1.35;
}
.cfg-propagation.is-running {
border-color: color-mix(in srgb, #16a34a 45%, var(--tkrvue-border));
border-left-color: #16a34a;
background: color-mix(in srgb, #16a34a 9%, var(--tkrvue-layer-bg));
}
.cfg-propagation-label {
flex: 0 0 auto;
font-weight: 700;
}
.cfg-propagation strong {
flex: 0 0 auto;
min-width: 46px;
padding: 2px 6px;
border-radius: 999px;
background: var(--tkrvue-accent);
color: #ffffff;
text-align: center;
font-variant-numeric: tabular-nums;
}
.cfg-propagation.is-running strong {
background: #16a34a;
}
.view-header-meta .cfg-propagation,
.cfg-propagation.compact {
margin: 0;
padding: 3px 7px;
gap: 6px;
border-left-width: 2px;
border-radius: 999px;
font-size: 11px;
white-space: nowrap;
}
.view-header-meta .cfg-propagation strong,
.cfg-propagation.compact strong {
min-width: 42px;
padding: 1px 6px;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
.cfg-propagation {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-layer-surface-bg);
}
}
.superadmin-notice {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
padding: 8px 10px;
border: 1px solid color-mix(in srgb, #7c3aed 40%, var(--tkrvue-border));
border-left: 4px solid #7c3aed;
border-radius: 7px;
background: color-mix(in srgb, #7c3aed 9%, var(--tkrvue-layer-bg));
color: var(--tkrvue-layer-text);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.superadmin-lock {
font-size: 15px;
line-height: 1;
}
.superadmin-key-icon {
width: 18px;
min-width: 18px;
height: 18px;
border-radius: 999px;
background: transparent;
color: #b45309;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
}
.superadmin-badge {
padding: 2px 7px;
border-radius: 999px;
background: #d1fae5;
color: #065f46;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.superadmin-badge.is-premium {
background: #f3e8ff;
color: #6d28d9;
box-shadow: inset 0 0 0 1px rgba(124,58,237,0.18);
}
.superadmin-panel {
padding: 10px;
border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--tkrvue-border));
border-left: 4px solid #7c3aed;
border-radius: 8px;
background: color-mix(in srgb, #7c3aed 6%, var(--tkrvue-layer-bg));
}
:root[data-theme="dark"] .superadmin-notice,
:root[data-theme="dark"] .superadmin-panel {
border-color: rgba(196,181,253,0.42);
border-left-color: #a78bfa;
background: rgba(124,58,237,0.13);
}
:root[data-theme="dark"] .superadmin-badge {
background: rgba(52,211,153,0.18);
color: #a7f3d0;
}
:root[data-theme="dark"] .superadmin-badge.is-premium {
background: rgba(196,181,253,0.18);
color: #ddd6fe;
}
:root[data-theme="dark"] .superadmin-key-icon {
background: transparent;
color: #fde68a;
box-shadow: none;
}
.view-header-meta .superadmin-notice,
.superadmin-notice.compact {
margin: 0;
padding: 3px 7px;
gap: 6px;
border-left-width: 2px;
border-radius: 999px;
font-size: var(--tkrvue-font-size-sm);
white-space: nowrap;
}
.view-header-meta .superadmin-lock,
.superadmin-notice.compact .superadmin-lock,
.view-header-meta .superadmin-key-icon,
.superadmin-notice.compact .superadmin-key-icon {
width: 16px;
min-width: 16px;
height: 16px;
font-size: 12px;
}
.view-header-meta .superadmin-badge,
.superadmin-notice.compact .superadmin-badge {
padding: 1px 6px;
font-size: 10px;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
.superadmin-notice,
.superadmin-panel {
border-color: #7c3aed;
background: var(--tkrvue-layer-surface-bg);
}
}
.sort-header {
width: 100%;
border: 0;
background: transparent;
padding: 0;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 4px;
font: inherit;
font-weight: 600;
}
.sort-header::after {
content: "↕";
color: #94a3b8;
font-size: 11px;
}
.sort-header.active[data-direction="asc"]::after {
content: "↑";
color: var(--tkrvue-accent);
}
.sort-header.active[data-direction="desc"]::after {
content: "↓";
color: var(--tkrvue-accent);
}
.hidden-row {
display: none !important;
}
.config-table tr.is-feature-blocked {
opacity: 0.7;
}
.config-table tr.is-invisible {
opacity: 0.52;
background: color-mix(in srgb, #94a3b8 12%, var(--tkrvue-layer-bg));
}
.config-table tr.is-invisible .menu-label,
.config-table tr.is-invisible code {
color: var(--tkrvue-muted);
}
.config-table tr.is-locked {
opacity: 0.92;
background: color-mix(in srgb, #dbeafe 28%, var(--tkrvue-layer-bg));
}
.config-table tr.is-locked input {
cursor: not-allowed;
}
.config-table tr.is-feature-blocked .menu-label {
font-style: italic;
}
.source-pill.muted-feature {
margin-left: 6px;
background: #e2e8f0;
color: #475569;
}
:root[data-theme="dark"] .source-pill.muted-feature {
background: rgba(148, 163, 184, 0.16);
color: #cbd5e1;
}
.source-pill.locked-feature {
margin-left: 6px;
background: #dbeafe;
color: #1d4ed8;
}
:root[data-theme="dark"] .source-pill.locked-feature {
background: rgba(96, 165, 250, 0.18);
color: #bfdbfe;
}
.config-table input[type="checkbox"] {
width: 16px;
height: 16px;
}
.config-table .menu-order {
max-width: 72px;
}
.config-table .menu-icon {
max-width: 70px;
text-align: center;
}
.config-table .drag-handle svg {
width: 16px;
height: 16px;
}
.menu-icon-control {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
}
.menu-icon-picker-trigger.secondary-action.tkrvue-icon-button {
width: 52px;
min-width: 52px;
height: 30px;
min-height: 30px;
padding: 0 7px;
gap: 5px;
border-color: var(--tkrvue-border);
color: var(--tkrvue-layer-text);
background: var(--tkrvue-input-bg);
}
.menu-icon-control.is-custom .menu-icon-picker-trigger {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-input-bg));
}
.menu-config-legend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
margin: 8px 0 6px;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-left: 3px solid var(--tkrvue-accent);
border-radius: 8px;
color: var(--tkrvue-layer-muted);
background: var(--tkrvue-layer-surface-bg);
font-size: 12px;
}
.menu-config-legend-title {
color: var(--tkrvue-layer-text);
}
.menu-config-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.menu-config-legend-sample {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 24px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
color: var(--tkrvue-layer-text);
background: var(--tkrvue-input-bg);
}
.menu-config-legend-sample.is-custom {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-input-bg));
}
.menu-config-legend-sample svg {
width: 15px;
height: 15px;
}
.menu-config-order-sample {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 7px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
color: var(--tkrvue-layer-text);
background: var(--tkrvue-input-bg);
font-weight: 700;
white-space: nowrap;
}
.menu-config-legend-order {
flex: 1 1 360px;
}
.menu-icon-preview,
.menu-icon-caret,
.menu-icon-option-preview,
.menu-icon-picker-default-preview {
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu-icon-preview svg {
width: 18px;
height: 18px;
}
.menu-icon-caret svg {
width: 12px;
height: 12px;
}
.menu-icon-picker-backdrop {
position: fixed;
inset: 0;
z-index: 25000;
display: grid;
place-items: center;
padding: 20px;
box-sizing: border-box;
background: color-mix(in srgb, #020617 58%, transparent);
backdrop-filter: blur(2px);
}
.menu-icon-picker-dialog {
width: min(760px, 100%);
max-height: min(760px, calc(100vh - 40px));
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
box-shadow: 0 24px 70px rgba(2, 6, 23, 0.38);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.menu-icon-picker-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.menu-icon-picker-header h3 {
margin: 0;
color: var(--tkrvue-layer-text);
font-size: calc(var(--tkrvue-font-size-lg) + 1px);
}
.menu-icon-picker-header p {
margin: 4px 0 0;
color: var(--tkrvue-muted);
line-height: 1.35;
}
.menu-icon-picker-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) minmax(170px, 210px);
gap: 10px;
}
.menu-icon-picker-search {
min-width: 0;
height: 38px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
}
.menu-icon-picker-search > span,
.menu-icon-picker-search svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.menu-icon-picker-search input,
.menu-icon-picker-toolbar #menuIconPickerLibrary,
.menu-icon-picker-toolbar select {
min-width: 0;
height: 38px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
}
.menu-icon-picker-search input {
width: 100%;
height: 34px;
padding: 0;
border: 0;
outline: 0;
}
.menu-icon-picker-toolbar select {
padding: 0 10px;
}
.menu-icon-picker-import {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
}
.menu-icon-picker-import > div {
min-width: 0;
flex: 1 1 auto;
}
.menu-icon-picker-import strong,
.menu-icon-picker-import small {
display: block;
}
.menu-icon-picker-import strong {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm);
}
.menu-icon-picker-import small {
margin-top: 2px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.3;
}
.menu-icon-picker-upload.secondary-action {
min-height: 34px;
flex: 0 0 auto;
cursor: pointer;
}
.menu-icon-picker-upload svg {
width: 17px;
height: 17px;
}
.menu-icon-picker-notice {
padding: 7px 9px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 50%, var(--tkrvue-border));
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm);
}
.menu-icon-picker-notice.is-error {
border-color: color-mix(in srgb, var(--tkrvue-danger) 60%, var(--tkrvue-border));
color: var(--tkrvue-danger);
}
.menu-icon-picker-default.secondary-action {
width: 100%;
min-height: 54px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 22px;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-color: color-mix(in srgb, var(--tkrvue-accent) 55%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-layer-text);
text-align: left;
}
.menu-icon-picker-default-preview {
width: 34px;
height: 34px;
border-radius: 8px;
color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-input-bg));
}
.menu-icon-picker-default-preview svg {
width: 20px;
height: 20px;
}
.menu-icon-picker-default strong,
.menu-icon-picker-default small {
display: block;
}
.menu-icon-picker-default strong {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
}
.menu-icon-picker-default small {
margin-top: 2px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.3;
}
.menu-icon-picker-grid {
min-height: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 8px;
overflow-y: auto;
padding: 2px 4px 2px 2px;
scrollbar-color: var(--tkrvue-scrollbar-thumb) var(--tkrvue-scrollbar-track);
}
.menu-icon-option {
min-width: 0;
min-height: 82px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
cursor: pointer;
font: inherit;
}
.menu-icon-option:hover,
.menu-icon-option:focus-visible {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-surface-bg));
outline: none;
}
.menu-icon-option.is-selected {
border-color: var(--tkrvue-accent);
box-shadow: inset 0 0 0 1px var(--tkrvue-accent);
color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-surface-bg));
}
.menu-icon-option-preview svg {
width: 24px;
height: 24px;
}
.menu-icon-option-label {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--tkrvue-font-size-sm);
font-weight: 650;
}
.menu-icon-option-source {
max-width: 100%;
overflow: hidden;
color: var(--tkrvue-muted);
font-size: calc(var(--tkrvue-font-size-xs) - 1px);
font-weight: 500;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu-icon-picker-empty {
padding: 28px 12px;
border: 1px dashed var(--tkrvue-border);
border-radius: 9px;
color: var(--tkrvue-muted);
text-align: center;
}
.config-section-row td {
background: var(--tkrvue-layer-section-bg);
font-weight: 600;
}
.config-section-row td:first-child {
border-left-color: var(--tkrvue-muted);
}
.view-notice {
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid #facc15;
border-radius: 6px;
background: #fefce8;
color: #713f12;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.view-note.compact-note {
margin: 0 0 8px;
padding: 6px 8px;
border-left: 3px solid var(--tkrvue-accent);
border-radius: 5px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-size: 12px;
}
.appearance-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.appearance-mode-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.appearance-mode-panel {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
padding: 10px;
background: var(--tkrvue-layer-surface-bg);
}
.appearance-mode-panel h3 {
margin: 0 0 10px;
font-size: var(--tkrvue-font-size-lg);
}
.appearance-inline-header,
.appearance-panel-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin: 8px 0 10px;
}
.appearance-panel-head {
margin-top: 0;
}
.appearance-inline-header h3,
.appearance-panel-head h3 {
margin: 0;
font-size: var(--tkrvue-font-size-lg);
}
.appearance-panel-actions {
margin: 0;
justify-content: flex-start;
}
.appearance-panel-actions button {
width: 36px;
min-width: 36px;
height: 34px;
padding: 0;
}
.appearance-device-badge-panel {
margin: 0 0 12px;
}
.appearance-device-badge-help {
margin: -2px 0 10px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.appearance-device-badge-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.appearance-device-badge-row {
display: grid;
grid-template-columns: minmax(110px, auto) minmax(150px, 1fr) minmax(150px, 1fr);
gap: 8px;
align-items: center;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
padding: 8px;
}
.appearance-device-badge-row label {
display: grid;
grid-template-columns: auto 38px 86px;
gap: 7px;
align-items: center;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.appearance-device-badge-row input[type="color"] {
width: 36px;
height: 28px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
padding: 2px;
}
.appearance-device-badge-row input[type="text"] {
height: 28px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
padding: 0 7px;
box-sizing: border-box;
font-family: Consolas, monospace;
font-size: var(--tkrvue-font-size-sm);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.appearance-vehicle-state-panel {
margin: 0 0 12px;
padding: 0;
overflow: hidden;
}
.appearance-vehicle-state-summary {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 12px;
cursor: pointer;
font-size: var(--tkrvue-font-size-lg);
font-weight: 700;
list-style: none;
}
.appearance-vehicle-state-summary::-webkit-details-marker {
display: none;
}
.appearance-vehicle-state-summary::before {
content: "›";
color: var(--tkrvue-accent);
font-size: 1.2em;
line-height: 1;
transform: rotate(0deg);
transition: transform .16s ease;
}
.appearance-vehicle-state-panel[open] > .appearance-vehicle-state-summary::before {
transform: rotate(90deg);
}
.appearance-vehicle-state-body {
padding: 0 12px 12px;
}
.appearance-vehicle-state-body > p {
margin: 0 0 10px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.appearance-vehicle-state-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.appearance-vehicle-state-row {
display: grid;
grid-template-columns: 36px minmax(140px, 1fr) minmax(210px, auto);
gap: 9px;
align-items: center;
min-width: 0;
padding: 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
}
.appearance-vehicle-state-row > strong {
min-width: 0;
overflow-wrap: anywhere;
font-size: var(--tkrvue-font-size-md);
}
.appearance-vehicle-state-marker {
--vehicle-marker-color: #0f3b63;
--vehicle-state-color: var(--vehicle-state-preview);
position: relative;
width: 30px;
height: 30px;
display: grid;
place-items: center;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--vehicle-state-color) 76%, #0f172a);
border-radius: 50% 50% 50% 6px;
background: linear-gradient(145deg, color-mix(in srgb, var(--vehicle-state-color) 72%, #fff), var(--vehicle-state-color));
color: var(--vehicle-marker-color);
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.24);
transform: rotate(-45deg);
}
.appearance-vehicle-state-marker::before {
position: absolute;
z-index: 0;
inset: 4px;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
content: "";
}
.appearance-vehicle-state-marker svg {
position: relative;
z-index: 1;
width: 17px;
height: 17px;
color: var(--vehicle-marker-color);
filter: drop-shadow(0 0 0.35px rgba(15, 23, 42, 0.75));
transform: rotate(45deg);
}
.appearance-vehicle-state-row label {
display: grid;
grid-template-columns: auto 38px 86px;
gap: 7px;
align-items: center;
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.appearance-vehicle-state-row input[type="color"] {
width: 36px;
height: 28px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
padding: 2px;
}
.appearance-vehicle-state-row input[type="text"] {
width: 86px;
height: 28px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
padding: 0 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font-family: Consolas, monospace;
font-size: var(--tkrvue-font-size-sm);
}
@media (max-width: 900px) {
.appearance-device-badge-grid,
.appearance-device-badge-row,
.appearance-vehicle-state-grid,
.appearance-vehicle-state-row {
grid-template-columns: 1fr;
}
.appearance-device-badge-row label {
grid-template-columns: minmax(70px, auto) 38px minmax(90px, 1fr);
}
.appearance-vehicle-state-marker {
margin: 4px 0 4px 5px;
}
.appearance-vehicle-state-row label {
grid-template-columns: minmax(70px, auto) 38px minmax(90px, 1fr);
}
.appearance-vehicle-state-row input[type="text"] {
width: 100%;
}
}
.appearance-language-panel {
margin: 10px 0;
}
.appearance-language-organization-current {
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 12px;
margin: 10px 0;
}
.appearance-language-organization-current .organization-settings-selector {
flex: 1 1 360px;
min-width: 0;
}
.appearance-language-organization-current select {
min-width: 0;
max-width: 100%;
}
.appearance-language-premium-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
}
@media (max-width: 620px) {
.appearance-language-organization-current .organization-settings-selector {
flex-basis: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr);
}
}
.appearance-display-panel {
margin-top: 12px;
}
.appearance-display-grid {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.7fr) minmax(260px, 1fr);
gap: 10px;
align-items: stretch;
}
.appearance-display-field {
min-height: 38px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
padding: 6px 10px;
display: grid;
gap: 4px;
font-size: var(--tkrvue-font-size-sm);
}
.appearance-display-field span {
color: var(--tkrvue-muted);
}
.appearance-display-field select {
width: 100%;
height: 30px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
font: inherit;
}
.appearance-display-panel select,
.appearance-display-panel input,
.appearance-display-panel output {
font-size: var(--tkrvue-font-size-md);
}
.appearance-display-field > span,
.appearance-font-size-field > span {
font-size: var(--tkrvue-font-size-sm);
}
.appearance-font-size-control {
display: grid;
grid-template-columns: minmax(120px, 1fr) 58px;
gap: 8px;
align-items: center;
}
.appearance-font-size-control input[type="range"] {
width: 100%;
accent-color: var(--tkrvue-accent);
}
.appearance-font-size-control output {
text-align: right;
color: var(--tkrvue-layer-text);
font-weight: 700;
}
.appearance-font-preview {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px 8px;
align-items: center;
margin-top: 4px;
padding: 7px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font-size: var(--tkrvue-font-size-effective);
}
.appearance-font-preview strong,
.appearance-font-preview span {
min-width: 0;
}
.appearance-font-preview strong {
color: var(--tkrvue-layer-text);
}
.appearance-font-preview span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.appearance-message-panel {
margin-top: 12px;
}
.appearance-message-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.appearance-message-choice {
min-height: 68px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 10px;
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 9px;
align-items: start;
cursor: pointer;
}
.appearance-message-choice input {
margin-top: 2px;
}
.appearance-message-choice strong {
font-size: var(--tkrvue-font-size-md);
}
.appearance-message-choice span {
grid-column: 2;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.25;
}
.appearance-message-choice.active {
border-color: var(--tkrvue-accent);
box-shadow: inset 3px 0 0 var(--tkrvue-accent);
}
.appearance-message-preview-grid {
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.appearance-message-preview-grid[data-message-preview-theme="tkrvue"] {
--tkrvue-status-success-bg: #f0fdf4;
--tkrvue-status-success-border: #86efac;
--tkrvue-status-success-text: #166534;
--tkrvue-status-error-bg: #fef2f2;
--tkrvue-status-error-border: #fecaca;
--tkrvue-status-error-text: #991b1b;
--tkrvue-status-info-bg: #eff6ff;
--tkrvue-status-info-border: #bfdbfe;
--tkrvue-status-info-text: #1e40af;
--tkrvue-status-warning-bg: #fffbeb;
--tkrvue-status-warning-border: #fcd34d;
--tkrvue-status-warning-text: #92400e;
}
:root[data-theme="dark"] .appearance-message-preview-grid[data-message-preview-theme="tkrvue"] {
--tkrvue-status-success-bg: #052e1a;
--tkrvue-status-success-border: #22c55e;
--tkrvue-status-success-text: #bbf7d0;
--tkrvue-status-error-bg: #3b0a0a;
--tkrvue-status-error-border: #ef4444;
--tkrvue-status-error-text: #fecaca;
--tkrvue-status-info-bg: #0b2447;
--tkrvue-status-info-border: #3b82f6;
--tkrvue-status-info-text: #dbeafe;
--tkrvue-status-warning-bg: #332600;
--tkrvue-status-warning-border: #f59e0b;
--tkrvue-status-warning-text: #fde68a;
}
.appearance-message-preview-grid[data-message-preview-theme="bootstrap"] {
--tkrvue-status-success-bg: #d1e7dd;
--tkrvue-status-success-border: #badbcc;
--tkrvue-status-success-text: #0f5132;
--tkrvue-status-error-bg: #f8d7da;
--tkrvue-status-error-border: #f5c2c7;
--tkrvue-status-error-text: #842029;
--tkrvue-status-info-bg: #cff4fc;
--tkrvue-status-info-border: #b6effb;
--tkrvue-status-info-text: #055160;
--tkrvue-status-warning-bg: #fff3cd;
--tkrvue-status-warning-border: #ffecb5;
--tkrvue-status-warning-text: #664d03;
}
.message-preview-status {
position: static;
margin: 0;
}
.appearance-tab-style-panel {
margin-top: 12px;
}
.appearance-accent-grid {
max-width: 520px;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
}
.appearance-accent-grid .appearance-row {
flex: 1 1 auto;
}
.appearance-accent-preview {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
margin: 0 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.appearance-accent-preview .context-help-chevron {
width: 22px;
height: 22px;
font-size: 22px;
}
.appearance-accent-control {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.appearance-accent-control input[type="checkbox"],
.appearance-accent-control input[type="radio"] {
width: 16px;
height: 16px;
margin: 0;
}
.appearance-tab-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(260px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.appearance-tab-choice {
min-height: 104px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 10px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 7px 9px;
cursor: pointer;
}
.appearance-tab-choice input {
margin-top: 3px;
}
.appearance-tab-choice-text {
display: grid;
gap: 3px;
}
.appearance-tab-choice-text strong {
font-size: 13px;
}
.appearance-tab-choice-text small {
color: var(--tkrvue-muted);
font-size: 12px;
line-height: 1.25;
}
.appearance-tab-choice.active {
border-color: var(--tkrvue-tab-accent);
box-shadow: inset 3px 0 0 var(--tkrvue-tab-accent);
}
.appearance-applied-summary {
min-height: 36px;
border: 1px solid color-mix(in srgb, var(--tkrvue-tab-accent) 28%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-tab-accent);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-tab-accent) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-layer-text);
display: flex;
align-items: center;
gap: 9px;
padding: 7px 10px;
margin: 0 0 10px;
font-size: 13px;
}
.appearance-applied-summary strong {
font-weight: 700;
}
.appearance-applied-color {
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--appearance-applied-color);
box-shadow: inset 0 0 0 1px rgba(15,23,42,0.18);
}
.appearance-applied-summary code {
color: var(--tkrvue-muted);
font-size: 12px;
}
.appearance-tab-preview {
grid-column: 1 / -1;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
padding: 8px;
overflow: hidden;
}
.tab-style-preview-tabs {
display: inline-flex;
max-width: 100%;
gap: 4px;
font-size: 12px;
}
.tab-style-preview-tab {
min-height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 9px;
white-space: nowrap;
}
.tab-style-preview-pills {
gap: 6px;
}
.tab-style-preview-pills .tab-style-preview-tab {
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: var(--tkrvue-layer-bg);
}
.tab-style-preview-pills .tab-style-preview-tab.active {
border-color: var(--tkrvue-tab-accent-preview);
background: var(--tkrvue-tab-accent-preview);
color: #fff;
}
.tab-style-preview-underline {
gap: 14px;
border-bottom: 1px solid var(--tkrvue-border);
}
.tab-style-preview-underline .tab-style-preview-tab {
position: relative;
padding: 0 0 5px;
color: var(--tkrvue-muted);
}
.tab-style-preview-underline .tab-style-preview-tab.active {
color: var(--tkrvue-layer-text);
}
.tab-style-preview-underline .tab-style-preview-tab.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 3px;
border-radius: 999px 999px 0 0;
background: var(--tkrvue-tab-accent-preview);
}
.tab-style-preview-segmented {
padding: 3px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-bg);
}
.tab-style-preview-segmented .tab-style-preview-tab {
border-radius: 7px;
color: var(--tkrvue-muted);
}
.tab-style-preview-segmented .tab-style-preview-tab.active {
background: var(--tkrvue-input-bg);
color: var(--tkrvue-tab-accent-preview);
}
.tab-style-preview-framed {
gap: 0;
border-bottom: 1px solid var(--tkrvue-border);
}
.tab-style-preview-framed .tab-style-preview-tab {
border: 1px solid transparent;
border-bottom: 0;
border-radius: 5px 5px 0 0;
color: var(--tkrvue-muted);
}
.tab-style-preview-framed .tab-style-preview-tab.active {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-tab-accent-preview);
box-shadow: inset 0 2px 0 var(--tkrvue-tab-accent-preview);
}
.tab-style-preview-current {
padding: 3px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
}
.tab-style-preview-current .tab-style-preview-tab {
border-radius: 6px;
}
.tab-style-preview-current .tab-style-preview-tab.active {
background: var(--tkrvue-accent);
color: #fff;
}
.appearance-language-row {
display: grid;
grid-template-columns: minmax(150px, 220px) minmax(160px, 260px);
align-items: center;
gap: 10px;
max-width: 520px;
font-size: 13px;
}
.appearance-language-select {
position: relative;
}
#appearanceDefaultLanguageButton {
width: 100%;
height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
#appearanceDefaultLanguageButton span:nth-child(2) {
flex: 1;
text-align: left;
}
.appearance-language-options {
position: absolute;
z-index: 2300;
top: calc(100% + 4px);
left: 0;
right: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
box-shadow: 0 12px 26px rgba(15,23,42,0.22);
padding: 4px;
}
.appearance-language-option {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 30px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--tkrvue-input-text);
cursor: pointer;
padding: 0 8px;
}
.appearance-language-option:hover,
.appearance-language-option.active {
background: var(--tkrvue-sidebar-hover-bg);
color: var(--tkrvue-active-text);
}
.appearance-language-access,
.appearance-superadmin-language {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--tkrvue-border);
}
.appearance-language-subtitle {
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
}
.appearance-language-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.appearance-language-check {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-bg);
font-size: 13px;
}
.appearance-language-check.is-not-ready {
opacity: 0.72;
border-style: dashed;
}
.appearance-language-check.is-pending-publication {
border-color: #f59e0b;
background: color-mix(in srgb, #f59e0b 10%, var(--tkrvue-layer-bg));
}
.appearance-language-pending {
color: #92400e;
font-size: 11px;
font-weight: 700;
}
:root[data-theme="dark"] .appearance-language-pending {
color: #fbbf24;
}
.appearance-language-check input {
margin: 0;
}
.appearance-language-state-select {
height: 26px;
min-width: 108px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 6px;
font-size: 12px;
}
.appearance-add-language-row {
display: grid;
grid-template-columns: minmax(220px, 1fr) 34px 34px;
gap: 8px;
max-width: 620px;
}
.appearance-add-language-row.saas-language-toolbar {
display: flex;
gap: 8px;
width: min(760px, 100%);
max-width: 100%;
align-items: flex-start;
}
.appearance-add-language-row.saas-language-toolbar .iso-language-picker {
flex: 1 1 420px;
min-width: 0;
}
.appearance-add-language-row.saas-language-toolbar #saasAddLanguageButton,
.appearance-add-language-row.saas-language-toolbar #saasRemoveLanguageButton {
flex: 0 0 34px;
width: 34px;
min-width: 34px;
position: relative;
z-index: 80;
}
.appearance-add-language-row select,
.appearance-add-language-row input,
.appearance-add-language-row button {
height: 32px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 8px;
}
.appearance-add-language-row button {
background: var(--tkrvue-accent);
color: #fff;
font-weight: 700;
cursor: pointer;
}
.appearance-add-language-row .iso-language-button {
height: 32px;
border: 1px solid var(--tkrvue-border);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font-weight: 400;
cursor: pointer;
}
.appearance-add-language-row .iso-language-button:hover,
.appearance-add-language-row .iso-language-button:focus-visible {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.appearance-add-language-row .iso-language-picker {
width: 100%;
min-width: 0;
}
.appearance-add-language-row .iso-language-option {
height: auto;
min-height: 31px;
border: 0;
border-radius: 5px;
background: transparent !important;
color: var(--tkrvue-input-text) !important;
font-weight: 400;
padding: 0 8px;
}
.appearance-add-language-row .iso-language-option:hover,
.appearance-add-language-row .iso-language-option:focus-visible {
border-color: transparent;
background: var(--tkrvue-sidebar-active-bg) !important;
color: var(--tkrvue-input-text) !important;
}
#saasAddLanguageButton {
display: inline-flex;
align-items: center;
justify-content: center;
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
}
#saasRemoveLanguageButton {
display: inline-flex;
align-items: center;
justify-content: center;
border-color: #fecaca;
background: var(--tkrvue-input-bg);
color: #dc2626;
}
#removeLanguageButton {
background: var(--tkrvue-input-bg);
border-color: #fecaca;
color: #dc2626;
}
.appearance-add-language-row button.danger-action {
background: var(--tkrvue-input-bg);
border-color: #fecaca;
color: #dc2626;
}
.appearance-language-help {
margin-top: 6px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.screen-help-settings-panel {
display: grid;
gap: 10px;
}
.screen-help-settings-head {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 10px;
}
.screen-help-editor-row {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.screen-help-editor-row input {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 9px;
font: inherit;
}
.screen-help-toolbar {
display: grid;
grid-template-columns: minmax(150px, 220px) minmax(150px, 220px) minmax(160px, 240px) minmax(220px, 1fr);
gap: 10px;
}
.screen-help-toolbar label {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.screen-help-toolbar select,
.screen-help-toolbar input,
.screen-help-editor-picker > input {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 9px;
font: inherit;
}
.screen-help-editor-picker {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
padding: 9px;
background: var(--tkrvue-layer-surface-bg);
display: grid;
gap: 8px;
}
.screen-help-editor-picker-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.screen-help-selected-editors {
min-height: 34px;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.screen-help-selected-editor {
min-height: 30px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
font-size: 12.5px;
}
.screen-help-selected-editor code,
.screen-help-editor-result code {
color: var(--tkrvue-muted);
font-size: 11px;
}
.screen-help-selected-editor button {
width: 22px;
height: 22px;
border: 0;
border-radius: 5px;
background: transparent;
color: #dc2626;
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.screen-help-selected-empty {
min-height: 30px;
display: inline-flex;
align-items: center;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.screen-help-editor-search {
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: 12px;
}
.screen-help-editor-search input {
height: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 9px;
font: inherit;
}
.screen-help-editor-results {
max-height: 150px;
overflow: auto;
display: grid;
gap: 5px;
}
.screen-help-editor-result {
min-height: 30px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 5px 8px;
cursor: pointer;
text-align: left;
}
.screen-help-editor-list {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.screen-help-editor-list label {
min-height: 30px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
font-size: 12.5px;
}
.screen-help-editor-list code {
color: var(--tkrvue-muted);
font-size: 11px;
}
.screen-help-toggle {
min-height: 38px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
padding: 8px 10px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--tkrvue-font-size-md);
}
.screen-help-toggle.compact {
min-height: 32px;
padding: 5px 8px;
display: grid;
grid-template-columns: 18px 10px auto;
justify-content: start;
align-content: end;
align-items: center;
gap: 6px;
}
.screen-help-config-list {
display: grid;
gap: 8px;
}
.screen-help-config-row {
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
padding: 9px;
display: grid;
grid-template-columns: minmax(180px, 0.68fr) minmax(120px, 0.34fr) minmax(140px, 0.38fr) minmax(220px, 1fr) 38px;
gap: 8px;
align-items: end;
}
.screen-help-config-row.is-visible {
border-left-color: #16a34a;
}
.screen-help-config-row.is-not-visible {
border-left-color: #ef4444;
}
.screen-help-config-row.is-superadmin-help {
background: color-mix(in srgb, #7c3aed 9%, var(--tkrvue-layer-bg));
border-color: color-mix(in srgb, #7c3aed 30%, var(--tkrvue-border));
}
.screen-help-config-row.is-superadmin-help.is-visible {
border-left-color: #7c3aed;
}
.screen-help-config-row label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: 12px;
}
.screen-help-config-row input[type="text"],
.screen-help-config-row select,
.screen-help-config-row textarea {
width: 100%;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 7px 8px;
font: inherit;
}
.screen-help-config-row textarea {
min-height: 72px;
resize: vertical;
}
.screen-help-config-meta {
display: flex;
gap: 8px;
align-self: center;
align-items: center;
min-width: 0;
}
.screen-help-config-meta-text {
min-width: 0;
display: grid;
gap: 3px;
}
.screen-help-config-meta strong {
font-size: 13px;
}
.screen-help-config-meta span {
color: var(--tkrvue-muted);
font-size: 12px;
}
.screen-help-config-meta code {
color: var(--tkrvue-muted);
font-size: 11px;
}
.screen-help-config-summary {
color: var(--tkrvue-muted);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.screen-help-row-toggle {
width: 36px;
height: 36px;
flex: 0 0 auto;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-accent);
cursor: pointer;
}
.screen-help-row-chevron {
display: inline-block;
transition: transform 140ms ease;
font-size: 30px;
line-height: 1;
font-weight: 900;
}
.screen-help-config-row.is-collapsed .screen-help-row-chevron {
transform: rotate(-90deg);
}
.screen-help-config-row.is-collapsed {
align-items: center;
padding: 3px 7px;
gap: 4px 6px;
}
.screen-help-config-row.is-collapsed .screen-help-body-field,
.screen-help-config-row.is-collapsed .screen-help-reset-button {
display: none;
}
.screen-help-config-row.is-collapsed label {
gap: 2px;
font-size: 11px;
}
.screen-help-config-row.is-collapsed input[type="text"],
.screen-help-config-row.is-collapsed select {
min-height: 28px;
padding: 4px 6px;
}
.screen-help-config-row.is-collapsed .screen-help-config-meta code {
display: none;
}
.screen-help-visible-marker {
width: 9px;
height: 9px;
border-radius: 999px;
background: #16a34a;
box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 16%, transparent);
}
.screen-help-config-row.is-not-visible .screen-help-visible-marker {
background: #ef4444;
box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 16%, transparent);
}
.screen-help-match-preview {
margin-top: 6px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-layer-text);
padding: 7px 8px;
font-size: 12px;
line-height: 1.35;
max-height: 74px;
overflow: auto;
}
.screen-help-highlight {
background: #fde68a;
color: #111827;
border-radius: 3px;
padding: 0 2px;
}
.screen-help-config-row button {
height: 34px;
width: 34px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
cursor: pointer;
}
.screen-help-config-row .screen-help-row-toggle {
width: 40px;
height: 34px;
min-width: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tkrvue-accent);
}
.screen-help-config-row .screen-help-row-chevron {
font-size: 32px;
line-height: 0.86;
font-weight: 900;
}
.screen-help-config-row.is-collapsed .screen-help-row-toggle {
width: 34px;
height: 28px;
min-width: 34px;
}
.screen-help-config-row.is-collapsed .screen-help-row-chevron {
font-size: 27px;
}
.screen-help-config-row.is-collapsed .screen-help-row-chevron {
transform: rotate(-90deg);
}
.screen-help-body-field {
grid-column: 1 / -1;
padding-left: 10px;
border-left: 2px solid color-mix(in srgb, var(--tkrvue-accent) 34%, transparent);
}
.screen-help-body-field textarea {
transition: min-height 140ms ease;
}
@media (max-width: 1100px) {
.appearance-display-grid,
.appearance-message-choice-grid,
.appearance-tab-choice-grid,
.screen-help-settings-head,
.screen-help-config-row {
grid-template-columns: 1fr;
}
.screen-help-config-row button {
width: 100%;
}
.screen-help-body-field {
grid-column: 1 / -1;
padding-left: 0;
border-left: 0;
}
.organizations-toolbar,
.organization-detail-grid,
.organization-resource-layout,
.organization-form-grid {
grid-template-columns: 1fr;
}
.organizations-toolbar button {
width: 100%;
}
.organization-form-grid label,
.organization-form-grid label.span-2,
.organization-meta-field {
grid-template-columns: 1fr;
gap: 4px;
}
.organization-coordinates-row {
grid-template-columns: 1fr;
gap: 7px;
}
.organization-resource-list {
max-height: 260px;
}
}
.appearance-row {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
padding: 10px;
display: grid;
grid-template-columns: 1fr 42px 86px;
gap: 8px;
align-items: center;
font-size: 13px;
}
.appearance-row-menu {
border-color: color-mix(in srgb, var(--tkrvue-sidebar-text) 34%, var(--tkrvue-border));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tkrvue-sidebar-text) 12%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
.appearance-row-menu {
border-color: var(--tkrvue-muted);
}
}
/* Menu latéral replié : icônes seules dans la barre, icônes + libellés dans le panneau flottant. */
#sidebar.collapsed .menu-section > h4 {
width: 44px;
min-height: 40px;
padding: 8px 0;
justify-content: center;
gap: 0;
font-size: 0;
}
#sidebar.collapsed .menu-section > h4::before,
#sidebar.collapsed .menu-section > h4::after {
content: none;
display: none;
}
#sidebar.collapsed .menu-section > h4 .icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
font-size: 18px;
line-height: 1;
}
#sidebar.collapsed .menu-section > h4 .label {
display: none;
}
#sidebar.collapsed .menu-section.open > .menu-items {
display: block !important;
}
#sidebar.collapsed .menu-items {
min-width: 230px;
max-width: min(280px, calc(100vw - 64px));
max-height: min(70vh, 440px);
padding: 8px;
overflow-y: auto;
overflow-x: hidden;
}
#sidebar.collapsed .menu-items div.menu-item {
min-height: 32px;
height: auto;
margin: 2px;
padding: 7px 9px;
justify-content: flex-start;
gap: 9px;
border-left: 2px solid transparent;
font-size: 13px;
}
#sidebar.collapsed .menu-items div.menu-item .label {
display: inline;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#sidebar.collapsed .menu-items div.menu-item::after {
content: none;
display: none;
}
#sidebar.collapsed .menu-items div.menu-item.has-child-items::after {
content: ">";
display: inline-block;
position: static;
margin-left: auto;
transform: none;
background: transparent;
color: var(--tkrvue-muted);
padding: 0;
font-size: 14px;
opacity: 1;
visibility: visible;
pointer-events: none;
}
.appearance-row input[type="color"] {
width: 38px;
height: 30px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
padding: 2px;
}
.appearance-row input[type="text"] {
height: 30px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
padding: 0 7px;
box-sizing: border-box;
font-family: Consolas, monospace;
font-size: 13px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.appearance-preview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 10px;
}
.appearance-preview {
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
overflow: hidden;
background: var(--tkrvue-layer-surface-bg);
}
.appearance-preview[data-preview-mode="light"],
.appearance-preview[data-preview-mode="dark"] {
border-color: rgba(255,255,255,0.72);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 0 0 1px rgba(15,23,42,0.35);
}
.appearance-preview-title {
padding: 8px 10px;
font-weight: 600;
font-size: 13px;
border-bottom: 1px solid var(--tkrvue-border);
}
.appearance-preview-shell {
min-height: 150px;
display: grid;
grid-template-columns: 150px 1fr;
}
.appearance-preview-sidebar {
padding: 12px;
border-right: 1px solid var(--tkrvue-border);
}
.appearance-preview-sidebar > div {
padding: 7px 8px;
border-radius: 6px;
margin-bottom: 6px;
}
.appearance-preview-sidebar > div:last-child {
margin-bottom: 0;
}
.appearance-preview-header {
padding: 10px 12px;
border-bottom: 1px solid var(--tkrvue-border);
}
.appearance-preview-layer {
margin: 18px;
padding: 16px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(15,23,42,0.12);
}
.appearance-preview-layer > span {
display: block;
}
.appearance-preview-selection {
margin-top: 10px;
padding: 7px 9px;
border: 1px solid transparent;
border-left-width: 4px;
border-radius: 6px;
font-weight: 700;
}
.appearance-preview[data-preview-mode="light"] .appearance-preview-layer,
.appearance-preview[data-preview-mode="dark"] .appearance-preview-layer {
border-color: rgba(255,255,255,0.58);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 12px 28px rgba(0,0,0,0.28);
}
/* Echelle typographique commune pour les vues paramétrables. */
.view-body,
.view-body .context-help-content,
.view-body .cfg-log-row,
.view-body .appearance-language-help,
.view-body .tracker-network-toolbar,
.view-body .tracker-config-help,
.view-body .tracker-config-current-linkage {
font-size: var(--tkrvue-font-size-md);
}
.view-body input,
.view-body select,
.view-body textarea,
.view-body button,
.view-body .saas-tab,
.view-body .layer-tab,
.view-body .appearance-tab {
font-size: var(--tkrvue-font-size-md);
}
.view-body label,
.view-body label > span,
.view-body small,
.view-body .metric span,
.view-body .metric-card span,
.view-body .tracker-network-profile-editor label,
.view-body .tracker-network-filters label,
.view-body .cfg-log-row small,
.view-body .muted-cell {
font-size: var(--tkrvue-font-size-sm);
}
.view-body h3,
.view-body .context-help-title,
.view-body .metric strong,
.view-body .metric-card strong,
.view-body .tracker-config-subtitle,
.view-body .security-section-title {
font-size: var(--tkrvue-font-size-lg);
}
.view-body h2,
.view-body .view-title h2 {
font-size: var(--tkrvue-font-size-title);
}
.appearance-actions {
justify-content: flex-start;
}
@media (max-width: 900px) {
html,
body {
height: 100%;
min-height: 100%;
overflow: hidden;
}
body {
height: 100dvh;
}
body.mobile-menu-open {
overflow: hidden;
}
#mobileOverlay {
position: fixed;
inset: 0;
z-index: 3900;
display: none;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(1px);
}
#mobileOverlay.active {
display: block;
}
#topbar {
flex: 0 0 auto;
min-height: 50px;
padding: 6px 8px !important;
gap: 6px;
box-sizing: border-box;
}
#titleBlock {
align-items: center;
gap: 6px;
min-width: 0;
flex: 1 1 auto;
}
#menuToggle {
width: 40px;
min-width: 40px;
height: 40px;
border: 1px solid color-mix(in srgb, var(--tkrvue-header-text) 18%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-header-bg) 80%, var(--tkrvue-input-bg));
color: var(--tkrvue-header-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
padding: 0;
}
#appTitle {
font-size: var(--tkrvue-font-size-title);
line-height: 1.1;
white-space: nowrap;
}
.app-identity-name {
max-width: 32vw;
font-size: var(--tkrvue-font-size-lg);
}
#breadcrumb {
display: none;
}
#contextSelector {
display: none;
}
.topbar-user-actions {
flex: 0 0 auto;
gap: 5px;
}
#userDisplay {
max-width: 22vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--tkrvue-font-size-sm);
}
.user-role-badge {
max-width: 96px;
padding: 2px 6px;
}
.user-role-badge-label {
max-width: 70px;
}
.topbar-icon-button {
width: 40px;
min-width: 40px;
height: 40px;
border-radius: 9px;
}
.tkrvue-open-new-tab {
display: none !important;
}
.preferences-open-new-tab {
display: flex !important;
}
.preferences-open-new-tab-separator {
display: block !important;
}
.preferences-menu {
position: fixed;
top: 54px;
left: 8px;
right: 8px;
width: auto;
max-width: none;
z-index: 5200;
max-height: calc(100dvh - 68px);
overflow-y: auto;
}
.preferences-title {
padding: 4px 6px 6px;
font-size: var(--tkrvue-font-size-sm);
}
.preferences-theme-row label,
.preferences-toggle-list label {
font-size: var(--tkrvue-font-size-md);
}
.preferences-select-row {
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 2px 4px 4px;
font-size: var(--tkrvue-font-size-md);
}
.preferences-font-row {
grid-template-columns: auto minmax(0, 1fr) 36px;
}
.preferences-select-row.preferences-font-row {
grid-template-columns: auto minmax(0, 1fr) 36px;
}
.preferences-select-row.preferences-map-refresh-row {
grid-template-columns: auto minmax(0, 1fr);
}
.preferences-select-row > span {
display: inline-flex;
align-items: center;
min-height: 36px;
line-height: 1;
white-space: nowrap;
}
#preferencesLanguageButton {
height: 36px;
min-height: 36px;
padding: 0 10px;
gap: 7px;
font-size: var(--tkrvue-font-size-md);
line-height: 1;
}
#preferencesLanguageLabel {
font-size: var(--tkrvue-font-size-md);
line-height: 1;
}
.preferences-language-caret {
line-height: 1;
}
.preferences-language-options {
position: static;
left: auto;
right: auto;
top: auto;
z-index: auto;
margin-top: 6px;
max-height: min(220px, 34dvh);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.preferences-language-option {
min-height: 36px;
font-size: var(--tkrvue-font-size-md);
}
#main {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(78vw, 292px);
min-width: 0;
height: 100vh;
height: 100dvh;
z-index: 4000;
padding: 8px 10px 10px;
border-right: 1px solid var(--tkrvue-border);
box-shadow: 12px 0 32px rgba(15, 23, 42, 0.28);
transform: translateX(-105%);
transition: transform 0.22s ease;
overflow: hidden;
}
#sidebar.mobile-open {
transform: translateX(0);
}
#sidebar.collapsed {
width: min(78vw, 292px);
min-width: 0;
padding: 8px 10px 10px;
}
#sidebar.collapsed .menu-section > h4,
#sidebar.collapsed h4 {
justify-content: flex-start;
padding: 10px 12px;
font-size: var(--tkrvue-font-size-md);
}
#sidebar.collapsed .menu-section > h4::before,
#sidebar.collapsed h4::before {
display: none;
}
#sidebar.collapsed .menu-section > h4 .icon,
#sidebar.collapsed .label {
display: inline-flex;
}
#sidebar.collapsed .menu-section > h4::after,
#sidebar.collapsed h4::after {
display: inline-flex;
}
#sidebar.collapsed .menu-items {
position: static;
display: none;
min-width: 0;
border: 0;
box-shadow: none;
border-radius: 0;
background: transparent;
padding: 5px 0 6px 10px;
opacity: 1;
transition: none;
}
#sidebar.collapsed .menu-section.open > .menu-items {
display: block;
}
#sidebar.collapsed .menu-items div.menu-item,
#sidebar.collapsed .menu-items div {
height: auto;
min-height: 38px;
justify-content: flex-start;
}
#sidebar.collapsed .menu-items div.menu-item .label,
#sidebar.collapsed .menu-items div.no-submenu .label {
display: inline;
}
#sidebar.collapsed .menu-items div:not(.no-submenu)::after {
content: ">";
position: static;
transform: none;
opacity: 1;
visibility: visible;
background: transparent;
padding: 0;
margin-left: auto;
font-size: var(--tkrvue-font-size-xs);
}
#sidebar .menu-items div,
#sidebar .menu-items div.menu-item {
min-height: 40px;
font-size: var(--tkrvue-font-size-md);
}
.sidebar-organization-logo {
min-height: 44px;
max-height: 58px;
}
.sidebar-footer {
padding-bottom: max(8px, env(safe-area-inset-bottom));
}
#splitter {
display: none;
}
#map-container {
flex: 1 1 auto;
min-width: 0;
width: 100%;
}
#map {
width: 100%;
min-width: 0;
}
.view-layer,
.view-layer.full {
inset: 0;
width: 100%;
min-width: 0;
z-index: 3000;
padding: 0;
box-sizing: border-box;
}
.view-resize-handle {
display: none;
}
.view-layer.collapsed-horizontal,
.view-layer.full.collapsed-horizontal {
inset: 0 0 0 auto;
width: 34px;
}
#map-container.view-layer-collapsed-horizontal .leaflet-right:not(.tkrvue-map-actions-dock) {
right: 40px;
}
.view-panel {
display: flex;
flex-direction: column;
border-radius: 0;
border-left: 0;
border-right: 0;
width: 100%;
max-width: none;
height: 100%;
min-height: 0;
}
.view-header {
position: relative;
z-index: 40;
min-height: 48px;
padding: 7px 52px 7px 10px;
align-items: flex-start;
}
.view-title-block {
gap: 5px;
width: 100%;
}
.view-kicker {
display: none;
}
.view-header-meta {
width: 100%;
flex: 1 1 100%;
overflow: hidden;
}
.view-header-meta .cfg-propagation,
.cfg-propagation.compact {
max-width: 100%;
min-height: 24px;
padding: 2px 7px;
gap: 5px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
}
.view-header-meta .cfg-propagation {
margin-right: 0;
}
.view-header-meta .cfg-propagation-label,
.cfg-propagation.compact .cfg-propagation-label {
font-size: 11px;
}
.view-header-meta .cfg-propagation [data-cfg-propagation-text] {
overflow: hidden;
text-overflow: ellipsis;
}
.view-header-meta .cfg-propagation strong,
.cfg-propagation.compact strong {
flex: 0 0 auto;
min-width: 48px;
padding: 2px 7px;
font-size: 11px;
}
.view-body {
padding: 8px;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.view-body.organization-settings-view-body {
overflow-y: auto;
overflow-x: hidden;
}
.view-body.organization-settings-view-body #organizationSettingsPanel,
.view-body.organization-settings-view-body .organization-detail-card {
display: block;
min-height: 0;
overflow: visible;
}
.view-body.organization-settings-view-body .organization-detail-card > .layer-tab-panel {
display: block;
min-height: 0;
overflow: visible;
padding-right: 0;
}
input,
select,
textarea,
button {
font-size: var(--tkrvue-font-size-md);
}
.view-body input,
.view-body select,
.view-body textarea,
.layer-tab-panel input,
.layer-tab-panel select,
.layer-tab-panel textarea,
.saas-tab-panel input,
.saas-tab-panel select,
.saas-tab-panel textarea,
.appearance-tab-panel input,
.appearance-tab-panel select,
.appearance-tab-panel textarea {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.view-body select,
.layer-tab-panel select,
.saas-tab-panel select,
.appearance-tab-panel select {
height: 34px;
min-height: 34px;
font-size: 14px;
line-height: 1.15;
}
.organization-settings-current {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 6px 8px;
}
.organization-settings-selector {
display: grid;
grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
width: 100%;
max-width: 100%;
min-width: 0;
gap: 6px;
align-items: center;
}
.organization-settings-selector span {
font-size: 11px;
white-space: nowrap;
}
.organization-settings-selector select {
width: 100%;
min-width: 0;
max-width: 100%;
}
textarea {
min-height: 96px;
}
.view-status {
position: relative;
top: auto;
z-index: 1;
margin: 6px 0 8px;
}
.view-title h2,
.view-title strong {
font-size: 15px;
}
.view-actions {
position: absolute;
top: 4px;
right: 4px;
z-index: 70;
gap: 5px;
}
.view-icon-button,
.view-close {
min-width: 40px;
width: 40px;
height: 40px;
}
.view-toggle-vertical,
.view-toggle-horizontal,
.view-resize-handle,
.view-edge-toggle {
display: none !important;
}
.view-toggle-fullscreen {
display: none;
}
.view-close {
display: inline-flex;
color: #ff0000;
background: transparent;
border: 0;
font-size: 30px;
line-height: 1;
}
.saas-tabs,
.layer-tabs,
.appearance-tabs {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
flex-wrap: nowrap;
justify-content: flex-start;
max-width: 100%;
min-height: 38px;
overscroll-behavior-x: contain;
padding-bottom: 2px;
}
.saas-tabs {
padding-right: 38px;
}
.saas-tab {
min-height: 34px;
white-space: nowrap;
padding: 0 8px;
font-size: var(--tkrvue-font-size-md);
line-height: 1.15;
}
:root[data-tab-style="underline"] .saas-tabs {
gap: 14px;
}
:root[data-tab-style="underline"] .saas-tab {
min-height: 32px;
padding-bottom: 6px;
font-size: var(--tkrvue-font-size-md);
}
.context-help-box {
border-radius: 8px;
}
.context-help-head {
gap: 8px;
}
.context-help-title {
gap: 8px;
font-size: var(--tkrvue-font-size-lg);
line-height: 1.2;
}
.context-help-content {
font-size: var(--tkrvue-font-size-md);
line-height: 1.32;
}
.security-help-box p {
margin-top: 5px;
line-height: 1.32;
}
.context-help-edit {
width: 36px;
min-width: 36px;
height: 36px;
}
.metric-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
margin-bottom: 6px;
}
.metric,
.metric-card {
min-height: 28px;
padding: 4px 7px;
border-radius: 7px;
gap: 5px;
align-items: center;
}
.metric span,
.metric-card span {
font-size: var(--tkrvue-font-size-sm);
}
.metric strong,
.metric-card strong {
font-size: var(--tkrvue-font-size-lg);
min-width: 0;
overflow-wrap: anywhere;
}
.organization-profile-badge {
padding: 3px 7px;
font-size: 12px !important;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.config-filters {
grid-template-columns: 1fr;
}
.admin-actions {
justify-content: flex-start;
gap: 6px;
}
.admin-actions button,
.primary-action,
.danger-action {
min-width: 34px;
width: 34px;
height: 34px;
}
.menu-config-table-wrap {
overflow: visible;
}
.config-table {
min-width: 0;
}
.table-wrap,
.menu-config-table-wrap,
.saas-tab-panel,
.appearance-tab-panel,
.layer-tab-panel {
-webkit-overflow-scrolling: touch;
}
.table-wrap {
border: 0;
overflow: visible;
}
.mobile-card-table {
display: block;
min-width: 0 !important;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.mobile-card-table thead {
display: none;
}
.mobile-card-table tbody {
display: grid;
gap: 8px;
}
.mobile-card-table tbody tr {
display: block;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
padding: 8px 10px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
min-width: 0;
}
.mobile-card-table tbody tr.is-invisible {
opacity: 0.78;
}
.mobile-card-table tbody td {
display: grid;
grid-template-columns: minmax(86px, 38%) minmax(0, 1fr);
gap: 8px;
align-items: center;
padding: 6px 0;
border: 0;
min-height: 28px;
min-width: 0;
overflow-wrap: anywhere;
}
.mobile-card-table tbody td:first-child {
border-left: 0;
}
.mobile-card-table tbody td::before {
content: attr(data-label);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
line-height: 1.15;
text-transform: none;
}
.mobile-card-table tbody td:empty {
display: none;
}
.mobile-card-table tbody td.empty-cell {
display: block;
text-align: left;
padding: 14px !important;
}
.mobile-card-table tbody td.empty-cell::before {
content: none;
}
.mobile-card-table input,
.mobile-card-table select,
.mobile-card-table textarea {
width: 100%;
min-width: 0;
font-size: var(--tkrvue-font-size-md);
}
.mobile-card-table input[type="checkbox"],
.mobile-card-table input[type="radio"] {
width: 16px;
height: 16px;
min-width: 0;
flex: 0 0 auto;
justify-self: start;
}
.mobile-card-table .drag-column,
.mobile-card-table .drag-handle {
width: auto;
}
.menu-config-table-wrap .mobile-card-table tbody tr {
position: relative;
padding: 8px 10px 8px 42px;
}
.menu-config-table-wrap .mobile-card-table tbody td:first-child {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
min-height: 28px;
height: 28px;
padding: 0;
border: 0;
}
.menu-config-table-wrap .mobile-card-table tbody td:first-child::before {
content: none;
}
.menu-config-table-wrap .mobile-card-table .drag-handle {
width: 28px;
height: 28px;
min-width: 28px;
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
.menu-config-table-wrap .mobile-card-table .menu-enabled {
width: 16px;
height: 16px;
min-height: 16px;
justify-self: start;
}
.menu-config-table-wrap .mobile-card-table tbody tr.mobile-dragging-row {
opacity: 0.96;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
border-color: var(--tkrvue-accent);
background: var(--tkrvue-layer-surface-bg);
}
.menu-config-table-wrap .mobile-card-table tbody tr.menu-drag-placeholder {
display: block;
border: 2px dashed var(--tkrvue-accent);
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-bg));
box-shadow: none;
opacity: 0.72;
padding: 0;
}
.menu-config-table-wrap .mobile-card-table tbody tr.menu-drag-placeholder td {
display: none;
}
.menu-config-table-wrap .mobile-card-table tbody td {
grid-template-columns: minmax(72px, 34%) minmax(0, 1fr);
gap: 6px;
padding: 5px 0;
}
.menu-config-table-wrap .mobile-card-table tbody td::before {
font-size: 10.5px;
}
.menu-config-table-wrap .mobile-card-table input,
.menu-config-table-wrap .mobile-card-table select {
min-height: 30px;
height: 30px;
font-size: 13px;
}
.menu-config-table-wrap .mobile-card-table .menu-icon-picker-trigger {
width: 52px;
min-width: 52px;
justify-self: start;
}
.menu-icon-picker-backdrop {
padding: 10px;
}
.menu-icon-picker-dialog {
max-height: calc(100vh - 20px);
padding: 12px;
}
.menu-icon-picker-toolbar {
grid-template-columns: 1fr;
}
.menu-icon-picker-import {
align-items: stretch;
flex-direction: column;
}
.menu-icon-picker-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-config-table-wrap .mobile-card-table code {
font-size: 12px;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Sur mobile la couche peut elle-même devoir défiler lorsque l'aide et les
* filtres occupent tout l'écran ; la liste garde néanmoins sa scrollbar et
* son ancrage tactile. */
.view-body.menu-config-view-body {
overflow-y: auto;
overflow-x: hidden;
}
.view-body.menu-config-view-body .menu-config-table-wrap {
flex: 0 1 auto;
min-height: 220px;
max-height: min(70dvh, 640px);
overflow-x: auto;
overflow-y: auto;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
}
.config-filters {
gap: 7px;
}
.config-filters .inline-field,
.config-filters .compact-field {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: 1fr;
gap: 3px;
}
.config-filters select,
.config-filters input[type="search"],
.menu-language-button {
width: 100%;
min-width: 0;
min-height: 34px;
height: 34px;
font-size: 13px;
}
.config-filters .admin-actions {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.menu-language-picker {
width: 100%;
}
.metric span,
.metric-card span,
.metric strong,
.metric-card strong {
line-height: 1.15;
}
.metric:first-child strong {
display: block;
min-width: 0;
font-size: 13px;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
.view-toolbar {
grid-template-columns: 1fr;
gap: 7px;
}
.device-filter-toolbar #deviceStatus {
width: 100%;
max-width: none;
}
.asset-filter-toolbar {
display: grid;
grid-template-columns: 1fr auto;
}
.asset-filter-toolbar #assetSearch {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
}
.asset-filter-toolbar .asset-status-filter {
width: 100%;
max-width: none;
}
.asset-layout-actions {
grid-column: 1 / -1;
justify-self: flex-start;
}
.asset-list-actions-cell {
min-width: 188px;
width: 188px;
}
.asset-row-actions {
gap: 4px;
}
.iot-device-workspace,
.iot-device-workspace.layout-side {
grid-template-columns: 1fr;
}
.iot-device-workspace.layout-side .iot-inventory-sheet {
position: static;
}
.device-layout-actions {
justify-content: flex-start;
}
.iot-asset-workspace,
.iot-asset-workspace.layout-side {
grid-template-columns: 1fr;
}
.iot-asset-workspace.layout-side .iot-asset-detail-panel {
position: static;
}
.view-toolbar > *,
.saas-admin-toolbar > *,
.admin-ip-toolbar > *,
.server-add-row > *,
.cfg-log-toolbar > *,
.mcd-toolbar > * {
min-width: 0;
}
.segmented {
width: 100%;
overflow-x: auto;
}
.segmented button {
flex: 1 0 auto;
min-width: 86px;
}
.appearance-grid {
grid-template-columns: 1fr;
}
.appearance-preview-grid {
grid-template-columns: 1fr;
}
.appearance-preview-shell {
grid-template-columns: 1fr;
}
.organization-resource-actions {
justify-content: flex-start;
}
.organization-resource-actions button {
flex: 0 0 40px;
width: 40px;
height: 40px;
}
.organization-resource-layout,
.organization-form-grid,
.organization-media-grid,
.appearance-display-grid,
.appearance-message-choice-grid,
.appearance-tab-choice-grid,
.screen-help-toolbar,
.saas-admin-toolbar,
.admin-ip-toolbar,
.server-add-row,
.cfg-log-toolbar,
.mcd-toolbar {
grid-template-columns: 1fr !important;
}
.organization-form-grid label,
.organization-form-grid label.span-2 {
grid-template-columns: 1fr;
gap: 3px;
align-items: stretch;
}
.organization-form-grid label > span {
font-size: 11px;
}
.organization-form-grid input,
.organization-form-grid select,
.organization-form-grid textarea {
min-height: 34px;
font-size: 14px;
}
.organization-resource-list {
max-height: 32vh;
}
.cfg-log-list {
max-height: none;
overflow: visible;
padding-right: 0;
}
.cfg-log-header {
display: none;
}
.cfg-log-row {
grid-template-columns: 1fr;
align-items: start;
gap: 5px;
padding: 9px 10px;
min-height: 0;
}
.cfg-log-row > * {
display: grid;
grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
gap: 8px;
align-items: center;
}
.cfg-log-row > *:nth-child(1)::before { content: "Date"; }
.cfg-log-row > *:nth-child(2)::before { content: "Type"; }
.cfg-log-row > *:nth-child(3)::before { content: "Source"; }
.cfg-log-row > *:nth-child(4)::before { content: "Serveur"; }
.cfg-log-row > *:nth-child(5)::before { content: "Message"; }
.cfg-log-row > *:nth-child(6)::before { content: "Conserver"; }
.cfg-log-row > *:nth-child(7)::before { content: "Action"; }
.tracker-config-jobs .cfg-log-row > *:nth-child(1)::before { content: "Demande"; }
.tracker-config-jobs .cfg-log-row > *:nth-child(2)::before { content: "Tracker"; }
.tracker-config-jobs .cfg-log-row > *:nth-child(3)::before { content: "Canal"; }
.tracker-config-jobs .cfg-log-row > *:nth-child(4)::before { content: "État"; }
.tracker-config-jobs .cfg-log-row > *:nth-child(5)::before { content: "Tentatives"; }
.tracker-config-jobs .cfg-log-row > *:nth-child(6)::before { content: "Message"; }
.tracker-config-request-jobs .cfg-log-row > *:nth-child(6)::before { content: "Profils"; }
.tracker-config-request-jobs .cfg-log-row > *:nth-child(7)::before { content: "Message"; }
.tracker-config-request-jobs .cfg-log-row > *:nth-child(8)::before { content: "Action"; }
.sim-cards-table .cfg-log-row {
grid-template-columns: 1fr;
}
.sim-cards-table .cfg-log-row > *:nth-child(1)::before { content: "ICCID"; }
.sim-cards-table .cfg-log-row > *:nth-child(2)::before { content: "MSISDN"; }
.sim-cards-table .cfg-log-row > *:nth-child(3)::before { content: "IMSI"; }
.sim-cards-table .cfg-log-row > *:nth-child(4)::before { content: "Fournisseur"; }
.sim-cards-table .cfg-log-row > *:nth-child(5)::before { content: "APN / IP"; }
.sim-cards-table .cfg-log-row > *:nth-child(6)::before { content: "Organisation"; }
.sim-cards-table .cfg-log-row > *:nth-child(7)::before { content: "Tracker / asset"; }
.sim-cards-table .cfg-log-row > *:nth-child(8)::before { content: "Etat"; }
.cfg-log-row > *::before {
color: var(--tkrvue-muted);
font-size: 11px;
font-weight: 700;
}
.cfg-status-filters {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
gap: 7px;
}
.cfg-status-filters label {
min-width: 0;
width: 100%;
}
.cfg-status-filters select {
width: 100%;
}
.cfg-red-counter {
justify-self: start;
min-height: 28px;
padding: 0 10px;
font-size: 12px;
}
.security-node-header,
.server-node-header {
display: none;
}
.security-key-row,
.security-node-row,
.server-node-row {
grid-template-columns: 1fr;
align-items: stretch;
gap: 6px;
min-width: 0;
min-height: 0;
padding: 8px 10px;
}
.security-key-row > *,
.security-node-row > *,
.server-node-row > * {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.security-config-card {
min-width: 0;
max-width: 100%;
}
.security-config-head {
grid-template-columns: 1fr;
align-items: start;
gap: 4px;
min-height: 0;
padding: 8px 10px;
}
.security-config-head > * {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.security-config-node {
grid-template-columns: minmax(74px, 0.8fr) minmax(0, 1fr);
gap: 5px 8px;
align-items: start;
min-height: 0;
padding: 7px 8px;
}
.security-config-node > * {
min-width: 0;
overflow-wrap: anywhere;
}
.security-key-row button:not(.primary-action),
.security-node-row button:not(.primary-action),
.security-config-node button:not(.primary-action) {
width: auto;
min-width: 86px;
max-width: 100%;
height: 34px;
padding: 0 10px;
white-space: nowrap;
overflow-wrap: normal;
}
.security-key-row button.primary-action,
.security-node-row button.primary-action,
.security-config-node button.primary-action {
flex: 0 0 34px;
width: 34px;
min-width: 34px;
height: 34px;
}
.server-node-row input,
.server-node-row select {
width: 100%;
}
.server-node-row .primary-action {
justify-self: start;
}
.server-row-actions {
justify-content: flex-start;
}
.data-server-add-row {
grid-template-columns: 1fr;
}
.data-server-add-row .data-server-code,
.data-server-add-row .data-server-label,
.data-server-add-row .data-server-role-field,
.data-server-add-row .data-server-env-field,
.data-server-add-row .data-server-host-field,
.data-server-add-row .data-server-port-field,
.data-server-add-row .data-server-db-field,
.data-server-add-row .data-server-user-field,
.data-server-add-row .data-server-password-field,
.data-server-add-row .data-server-charset-field,
.data-server-add-row .server-node-enabled {
grid-column: auto;
}
.data-server-add-row .primary-action,
.data-server-add-row .data-server-icon-action {
justify-self: start;
}
.data-server-list .cfg-log-row {
grid-template-columns: 1fr;
width: 100%;
min-width: 0;
max-width: 100%;
}
.data-server-list .cfg-log-head {
display: none;
}
.data-server-list .data-server-row-cell {
display: grid;
grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
gap: 8px;
align-items: center;
}
.data-server-list .data-server-row-cell::before {
content: attr(data-label);
}
.data-server-list .data-server-sources-cell {
align-items: start;
}
.saas-language-header {
display: none;
}
.saas-language-row,
.saas-language-row.no-action,
.saas-language-row.no-text.has-action,
.saas-language-row.no-text.no-action,
.saas-language-row.no-status.no-text.no-action {
grid-template-columns: 1fr;
gap: 6px;
padding: 10px;
min-height: 0;
align-items: start;
}
.saas-language-row > * {
overflow: visible;
text-overflow: clip;
white-space: normal;
}
.saas-language-main {
font-size: 14px;
}
.organization-site-type-row {
grid-template-columns: 40px minmax(70px, 0.55fr) minmax(130px, 1fr) 40px;
}
.appearance-accent-preview,
.appearance-panel-head,
.appearance-inline-header,
.organization-settings-title-actions {
flex-wrap: wrap;
}
.screen-help-config-head {
grid-template-columns: 1fr !important;
}
.mcd-canvas-shell {
min-height: 58vh;
}
.appearance-preview-sidebar {
border-right: 0;
border-bottom: 1px solid var(--tkrvue-border);
}
.view-close {
font-size: 28px;
}
}
@media (max-width: 480px) {
#appTitle {
font-size: var(--tkrvue-font-size-title);
}
.app-identity-name {
display: none !important;
}
#userDisplay {
display: none;
}
.user-role-badge {
max-width: 74px;
}
.user-role-badge-label {
max-width: 48px;
}
.topbar-icon-button,
#menuToggle {
width: 38px;
min-width: 38px;
height: 38px;
}
.view-body {
padding: 6px;
}
.metric-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.organization-site-type-row {
grid-template-columns: 36px 1fr 40px;
}
.organization-site-type-row code {
grid-column: 2 / 3;
font-size: var(--tkrvue-font-size-xs);
}
.organization-site-type-row input {
grid-column: 2 / 3;
}
}
@media (max-width: 900px) {
.saas-tracker-configs-panel .security-settings-grid .primary-action {
width: auto;
min-width: 34px;
padding: 0 11px;
}
}
@media (max-width: 480px) {
.saas-tracker-configs-panel .tracker-action-button,
.saas-tracker-configs-panel .tracker-select-result-action,
.saas-tracker-configs-panel .security-settings-grid .primary-action {
width: 100%;
}
.tracker-global-search-actions {
width: 100%;
}
}
/* Cohérence typographique locale : Réseau trackers */
.view-body .tracker-network-summary {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.view-body .tracker-network-summary .metric-card {
font-size: var(--tkrvue-font-size-md);
}
.view-body .tracker-network-summary .metric-card span,
.view-body .tracker-network-profile-editor label,
.view-body .tracker-network-filters label,
.view-body .tracker-network-profile-editor label > span,
.view-body .tracker-network-filters label > span {
font-size: var(--tkrvue-font-size-sm);
line-height: 1.25;
}
.view-body .tracker-network-summary .metric-card strong,
.view-body .tracker-network-profiles .cfg-log-row:first-child,
.view-body .tracker-network-state .cfg-log-row:first-child {
font-size: var(--tkrvue-font-size-md);
line-height: 1.2;
}
.view-body .tracker-network-profile-editor input,
.view-body .tracker-network-profile-editor select,
.view-body .tracker-network-filters input,
.view-body .tracker-network-filters select,
.view-body .tracker-network-state input,
.view-body .tracker-network-state select {
font-size: var(--tkrvue-font-size-md);
line-height: 1.2;
}
.view-body .tracker-network-toolbar,
.view-body .tracker-network-profiles,
.view-body .tracker-network-state,
.view-body .tracker-network-profiles .cfg-log-row,
.view-body .tracker-network-state .cfg-log-row,
.view-body [data-saas-panel="tracker_network"] {
font-size: var(--tkrvue-font-size-md);
}
.view-body .tracker-network-state-row small,
.view-body .tracker-network-profile-row small {
font-size: var(--tkrvue-font-size-xs);
line-height: 1.25;
}
@media (max-width: 700px) {
.view-body .tracker-network-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.view-body .tracker-network-profile-editor,
.view-body .tracker-network-filters {
gap: 8px;
}
.view-body .tracker-network-summary .metric-card span,
.view-body .tracker-network-profile-editor label,
.view-body .tracker-network-filters label,
.view-body .tracker-network-profile-editor label > span,
.view-body .tracker-network-filters label > span {
font-size: var(--tkrvue-font-size-sm);
}
.view-body .tracker-network-profile-editor input,
.view-body .tracker-network-profile-editor select,
.view-body .tracker-network-filters input,
.view-body .tracker-network-filters select {
min-height: 36px;
font-size: var(--tkrvue-font-size-md);
}
}
@media (max-width: 480px) {
.view-body .tracker-network-summary {
grid-template-columns: 1fr;
}
}
/* Affichage : l'aperçu de taille de police reste un bloc vertical lisible. */
.view-body.appearance-view-body .appearance-font-size-field {
align-items: stretch;
}
.view-body.appearance-view-body .appearance-font-preview {
display: flex !important;
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.view-body.appearance-view-body .appearance-font-preview strong,
.view-body.appearance-view-body .appearance-font-preview span {
display: block;
width: 100%;
max-width: 100%;
flex: 0 0 auto;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
text-align: left;
}
/* Typographie globale : aides contextuelles, onglets et panneaux suivent les réglages d'affichage. */
body,
button,
input,
select,
textarea,
output,
.view-body,
.view-layer,
.preferences-menu,
.menu-items,
.context-help-box,
.appearance-mode-panel,
.appearance-tab-choice,
.appearance-message-choice {
font-family: var(--tkrvue-font-family);
}
.view-body .context-help-box,
.view-body .context-help-content,
.view-body .appearance-mode-panel,
.view-body .appearance-tab-choice,
.view-body .appearance-message-choice,
.view-body .screen-help-settings-panel,
.view-body .organization-detail-card,
.view-body .tracker-collapsible-section,
.view-body .tracker-preview-params-section {
font-size: var(--tkrvue-font-size-md);
line-height: 1.35;
}
.view-body .context-help-title,
.view-body .appearance-inline-header h3,
.view-body .appearance-panel-head h3,
.view-body .appearance-mode-panel h3,
.view-body .organization-detail-card h3,
.view-body .tracker-collapsible-section .context-help-title {
font-size: var(--tkrvue-font-size-lg);
line-height: 1.25;
}
.view-body .context-help-content p,
.view-body .appearance-tab-choice-text strong,
.view-body .appearance-message-choice strong,
.view-body .screen-help-toggle span {
font-size: var(--tkrvue-font-size-md);
line-height: 1.3;
}
.view-body .appearance-tab-choice-text small,
.view-body .appearance-message-choice p,
.view-body .appearance-language-help,
.view-body .muted-cell,
.view-body .context-help-editor label,
.view-body .screen-help-config-summary,
.view-body .screen-help-config-meta {
font-size: var(--tkrvue-font-size-sm);
line-height: 1.3;
}
.cfg-propagation,
.cfg-propagation [data-cfg-propagation-text] {
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
}
.view-header-meta .cfg-propagation,
.cfg-propagation.compact,
.view-header-meta .cfg-propagation-label,
.cfg-propagation.compact .cfg-propagation-label,
.view-header-meta .cfg-propagation strong,
.cfg-propagation.compact strong {
font-size: var(--tkrvue-font-size-xs);
}
/* Compteurs : format compact et cohérent sur les vues TrackerVue. */
.view-body .metric-row,
.view-body .security-summary,
.view-body .saas-language-summary,
.view-body .tracker-network-summary {
display: flex !important;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
grid-template-columns: none !important;
}
.view-body .metric,
.view-body .metric-card {
flex: 0 1 auto;
width: max-content;
min-width: clamp(128px, 12vw, 220px);
max-width: 100%;
box-sizing: border-box;
}
.view-body .metric span,
.view-body .metric-card span,
.view-body .metric strong,
.view-body .metric-card strong {
white-space: nowrap;
}
@media (max-width: 700px) {
.view-body .metric-row,
.view-body .security-summary,
.view-body .saas-language-summary,
.view-body .tracker-network-summary {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.view-body .metric,
.view-body .metric-card {
width: 100%;
min-width: 0;
}
}
@media (max-width: 480px) {
.view-body .metric-row,
.view-body .security-summary,
.view-body .saas-language-summary,
.view-body .tracker-network-summary {
grid-template-columns: 1fr !important;
}
.view-body .metric span,
.view-body .metric-card span,
.view-body .metric strong,
.view-body .metric-card strong {
white-space: normal;
}
}
/* Controles de saisie : toujours alignes sur les preferences utilisateur. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
select,
textarea,
option,
optgroup,
.view-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.view-body select,
.view-body textarea,
.view-body option,
.view-body optgroup,
.layer-tab-panel input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.layer-tab-panel select,
.layer-tab-panel textarea,
.layer-tab-panel option,
.layer-tab-panel optgroup,
.saas-tab-panel input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.saas-tab-panel select,
.saas-tab-panel textarea,
.saas-tab-panel option,
.saas-tab-panel optgroup,
.appearance-tab-panel input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.appearance-tab-panel select,
.appearance-tab-panel textarea,
.appearance-tab-panel option,
.appearance-tab-panel optgroup,
.preferences-language-option,
.menu-language-option,
.iso-language-option,
.appearance-language-option,
[role="option"] {
font-family: var(--tkrvue-font-family) !important;
font-size: var(--tkrvue-font-size-md) !important;
line-height: 1.25 !important;
}
input::placeholder,
textarea::placeholder {
font-family: var(--tkrvue-font-family);
font-size: inherit;
}
/* Carte de consultation des dernières positions. */
.device-position-view-panel,
.device-position-view-body {
min-height: 0;
}
.device-position-view-body {
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
}
.device-position-metrics {
margin-bottom: 0;
}
.device-position-metrics .metric.is-wide {
min-width: min(100%, 300px);
}
.device-position-type-filters {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.device-position-type-filter {
min-width: 0;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: var(--tkrvue-layer-section-bg);
color: var(--tkrvue-layer-text);
cursor: pointer;
opacity: 0.58;
text-align: left;
transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}
.device-position-type-filter:hover {
opacity: 0.86;
transform: translateY(-1px);
}
.device-position-type-filter.is-active {
opacity: 1;
box-shadow: 0 5px 16px rgba(15, 23, 42, 0.09);
}
.device-position-type-filter.is-gsm.is-active {
border-color: #60a5fa;
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 82%, #dbeafe);
}
.device-position-type-filter.is-tracker.is-active {
border-color: #a78bfa;
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 82%, #ede9fe);
}
.device-position-type-filter.is-beacon.is-active {
border-color: #fbbf24;
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 82%, #fef3c7);
}
.device-position-type-filter > span:nth-child(2) {
min-width: 0;
overflow: hidden;
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-position-type-filter > strong {
min-width: 24px;
padding: 3px 6px;
border-radius: 999px;
background: color-mix(in srgb, currentColor 10%, transparent);
font-size: var(--tkrvue-font-size-xs);
text-align: center;
}
.device-position-type-icon {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border-radius: 10px;
}
.device-position-type-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.device-position-type-filter.is-gsm .device-position-type-icon {
color: #1d4ed8;
background: #dbeafe;
}
.device-position-type-filter.is-tracker .device-position-type-icon {
color: #6d28d9;
background: #ede9fe;
}
.device-position-type-filter.is-beacon .device-position-type-icon {
color: #a16207;
background: #fef3c7;
}
.device-position-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
}
.device-position-search {
flex: 1 1 320px;
min-width: 180px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
}
.device-position-search > span,
.device-position-search > span svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.device-position-search input {
width: 100%;
min-width: 0;
padding: 10px 0 !important;
border: 0 !important;
outline: 0;
background: transparent !important;
color: var(--tkrvue-input-text);
}
.device-position-recenter {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.device-position-workspace {
flex: 1 1 auto;
min-height: 420px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
gap: 10px;
overflow: hidden;
}
.device-position-workspace.is-panel-only {
min-height: 260px;
display: block;
}
.device-position-list-card-main {
height: 100%;
min-height: 260px;
}
.device-position-map-card,
.device-position-list-card {
min-width: 0;
min-height: 0;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 14px;
background: var(--tkrvue-layer-section-bg);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.device-position-map-card {
position: relative;
}
#devicePositionsMap {
width: 100%;
height: 100%;
min-height: 420px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 82%, #dbeafe);
}
.device-position-map-unavailable {
height: 100%;
display: grid;
place-items: center;
padding: 24px;
color: var(--tkrvue-muted);
text-align: center;
}
.device-position-map-legend {
position: absolute;
z-index: 500;
left: 12px;
bottom: 12px;
display: flex;
flex-wrap: wrap;
gap: 7px;
max-width: calc(100% - 24px);
padding: 7px;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 11px;
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 90%, transparent);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
backdrop-filter: blur(10px);
}
.device-position-map-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 7px;
border-radius: 8px;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
}
.device-position-map-legend i {
width: 18px;
height: 18px;
display: inline-grid;
place-items: center;
border-radius: 6px;
}
.device-position-map-legend svg,
.device-position-list-icon svg,
.device-position-tooltip-icon svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.vehicle-map-symbol {
fill: currentColor !important;
stroke: none !important;
}
.vehicle-map-symbol .vehicle-map-symbol-outline {
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.75 !important;
stroke-linecap: round;
stroke-linejoin: round;
}
.device-position-map-legend .is-gsm,
.device-position-list-icon.is-gsm {
--device-marker-color: #1d4ed8;
--device-marker-shell: #3b82f6;
box-sizing: border-box;
border: 2px solid var(--device-marker-shell);
color: var(--device-marker-color);
background: #fff;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}
.device-position-map-legend .is-tracker,
.device-position-list-icon.is-tracker {
color: #6d28d9;
background: #ede9fe;
}
.device-position-map-legend .is-beacon,
.device-position-list-icon.is-beacon {
--device-marker-color: #a16207;
--device-marker-shell: #f59e0b;
box-sizing: border-box;
border: 2px solid var(--device-marker-shell);
color: var(--device-marker-color);
background: #fff;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}
.device-position-list-icon.is-asset-presented {
box-sizing: border-box;
border: 2px solid var(--device-marker-shell, #64748b);
color: var(--asset-icon-foreground, var(--device-marker-color, #64748b));
background: var(--device-marker-surface, #fff);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}
.device-position-list-icon.is-vehicle {
--vehicle-state-color: var(--tkrvue-accent, #316da5);
box-sizing: border-box;
border: 2px solid var(--vehicle-state-color);
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
background: var(--vehicle-marker-surface, #fff);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}
.device-position-list-card {
display: flex;
flex-direction: column;
}
.device-position-list-card > header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 13px 14px;
border-bottom: 1px solid var(--tkrvue-border);
color: var(--tkrvue-layer-text);
font-weight: 700;
}
.device-position-list-card > header strong {
min-width: 30px;
padding: 3px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
text-align: center;
}
.device-position-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 7px;
}
.device-position-list-item {
width: 100%;
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 32px;
align-items: center;
gap: 9px;
margin: 0 0 5px;
padding: 10px;
border: 1px solid transparent;
border-radius: 11px;
background: transparent;
color: var(--tkrvue-layer-text);
text-align: left;
cursor: pointer;
transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.device-position-list-item:hover,
.device-position-list-item:focus-visible,
.device-position-list-item.is-active {
border-color: color-mix(in srgb, var(--tkrvue-accent) 55%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-surface-bg));
outline: 0;
transform: translateX(-2px);
}
.device-position-list-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 12px;
}
.device-position-list-icon svg {
width: 20px;
height: 20px;
filter: drop-shadow(0 0 1.25px var(--asset-icon-halo, transparent)) drop-shadow(0 0 0.3px rgba(15, 23, 42, 0.72));
}
.device-position-list-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.device-position-list-copy strong,
.device-position-list-copy small,
.device-position-list-copy time {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-position-list-copy strong {
font-size: var(--tkrvue-font-size-md);
}
.device-position-list-copy small,
.device-position-list-copy time {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.device-position-list-locate {
width: 32px;
height: 32px;
box-sizing: border-box;
flex: 0 0 32px;
display: inline-grid;
place-items: center;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-accent);
}
.device-position-list-locate svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.device-position-list-empty {
padding: 32px 16px;
color: var(--tkrvue-muted);
text-align: center;
}
.map-position-refresh-control {
width: max-content;
min-width: 308px;
max-width: calc(100vw - 82px);
min-height: 34px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 6px;
padding: 3px 6px 3px 3px;
border: 1px solid var(--tkrvue-map-control-border);
border-radius: 9px;
background: var(--tkrvue-map-control-surface);
color: var(--tkrvue-map-control-content);
box-shadow: var(--tkrvue-map-control-shadow);
backdrop-filter: blur(4px);
}
#map .leaflet-top.leaflet-left > .map-position-refresh-control {
clear: none;
}
.map-position-refresh-action {
width: 26px;
min-width: 26px;
height: 26px;
padding: 0;
display: inline-grid;
place-items: center;
border: 1px solid var(--tkrvue-map-control-field-border);
border-radius: 7px;
background: var(--tkrvue-map-control-field);
color: var(--tkrvue-map-control-foreground);
cursor: pointer;
}
.map-position-refresh-action:disabled {
cursor: wait;
opacity: 0.65;
}
.map-position-overview-action:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.map-position-picker-action.is-open {
border-color: var(--tkrvue-map-control-accent);
background: color-mix(in srgb, var(--tkrvue-map-control-accent) 16%, var(--tkrvue-map-control-field));
color: var(--tkrvue-map-control-accent);
}
.map-position-refresh-toggle.is-paused {
border-color: var(--tkrvue-map-control-accent);
background: var(--tkrvue-map-control-accent);
color: var(--tkrvue-accent-contrast, #fff);
}
.map-position-refresh-action svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-position-follow-chip {
min-width: 0;
max-width: min(210px, 26vw);
height: 26px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 8px 0 6px;
border: 1px solid color-mix(in srgb, var(--tkrvue-map-control-accent) 68%, var(--tkrvue-map-control-field-border));
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-map-control-accent) 12%, var(--tkrvue-map-control-field));
color: var(--tkrvue-map-control-foreground);
cursor: pointer;
}
.map-position-follow-chip[hidden] {
display: none !important;
}
.map-position-follow-chip:hover,
.map-position-follow-chip:focus-visible {
border-color: var(--tkrvue-map-control-accent);
background: color-mix(in srgb, var(--tkrvue-map-control-accent) 20%, var(--tkrvue-map-control-field));
outline: 0;
}
.map-position-follow-chip.is-unavailable {
border-style: dashed;
color: var(--tkrvue-map-tooltip-muted);
}
.map-position-follow-chip svg {
width: 15px;
min-width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-position-follow-chip:not(.is-unavailable) svg {
color: var(--tkrvue-danger, #dc2626);
}
.map-position-follow-chip span {
min-width: 0;
overflow: hidden;
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.map-position-refresh-control.is-busy [data-map-position-refresh] svg {
animation: tkrvue-map-refresh-spin 0.9s linear infinite;
}
.map-position-refresh-copy {
min-width: 0;
flex: 1 1 auto;
display: grid;
gap: 3px;
}
.map-position-refresh-copy strong {
overflow: visible;
color: var(--tkrvue-map-control-content);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
line-height: 1.05;
text-overflow: clip;
white-space: nowrap;
}
.map-position-refresh-track {
height: 3px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-map-control-foreground) 16%, var(--tkrvue-map-control-field-border));
}
.map-position-refresh-track > span {
width: 0;
height: 100%;
display: block;
border-radius: inherit;
background: var(--tkrvue-map-control-foreground);
transition: width 0.4s linear;
}
.map-position-refresh-control.is-error {
border-color: color-mix(in srgb, #dc2626 52%, var(--tkrvue-map-control-border));
}
.map-position-refresh-control.is-error .map-position-refresh-track > span {
background: #dc2626;
}
.map-position-refresh-control.is-paused .map-position-refresh-track > span {
width: 0 !important;
}
@keyframes tkrvue-map-refresh-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
.map-position-refresh-control {
width: max-content;
min-width: min(308px, calc(100vw - 82px));
max-width: calc(100vw - 82px);
}
}
@media (max-width: 380px) {
.map-position-refresh-copy strong {
white-space: normal;
}
}
.device-position-picker-overlay {
position: fixed;
z-index: 10084;
box-sizing: border-box;
background: transparent;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.device-position-picker-panel {
position: absolute;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 12px;
background: var(--tkrvue-map-tooltip-bg);
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
}
.device-position-picker-panel > header {
min-height: 52px;
box-sizing: border-box;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) var(--tkrvue-map-close-size);
align-items: center;
gap: 9px;
padding: 8px 8px 8px 11px;
border-bottom: 1px solid var(--tkrvue-map-tooltip-border);
}
.device-position-picker-title-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 45%, var(--tkrvue-map-tooltip-border));
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-map-tooltip-surface));
color: var(--tkrvue-accent);
}
.device-position-picker-title-icon svg,
.device-position-picker-input-wrap > svg,
.device-position-picker-result-locate svg,
.device-position-picker-selection-actions svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.device-position-picker-title-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.device-position-picker-title-copy strong {
font-size: var(--tkrvue-font-size-md);
line-height: 1.2;
}
.device-position-picker-title-copy small {
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.25;
}
.device-position-picker-close.tkrvue-close-button {
width: var(--tkrvue-map-close-size) !important;
min-width: var(--tkrvue-map-close-size) !important;
height: var(--tkrvue-map-close-size) !important;
min-height: var(--tkrvue-map-close-size) !important;
border-radius: 7px;
}
.device-position-picker-search-view {
min-height: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.device-position-picker-fields {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(130px, .65fr);
gap: 8px;
padding: 10px;
border-bottom: 1px solid var(--tkrvue-map-tooltip-border);
background: color-mix(in srgb, var(--tkrvue-map-tooltip-surface) 72%, transparent);
}
.device-position-picker-fields label {
min-width: 0;
display: grid;
gap: 4px;
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
}
.device-position-picker-input-wrap {
min-width: 0;
height: 36px;
box-sizing: border-box;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
gap: 3px;
padding: 0 7px;
border: 1px solid var(--tkrvue-input-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
}
.device-position-picker-input-wrap:focus-within {
border-color: var(--tkrvue-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tkrvue-accent) 18%, transparent);
}
.device-position-picker-input-wrap input,
.device-position-picker-fields select {
min-width: 0;
width: 100%;
height: 36px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-input-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
font: inherit;
font-size: var(--tkrvue-font-size-md);
}
.device-position-picker-input-wrap input {
height: 32px;
padding: 0;
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
}
.device-position-picker-fields select {
padding: 0 30px 0 8px;
}
.device-position-picker-status {
padding: 7px 10px;
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 650;
}
.device-position-picker-results {
min-height: 0;
display: grid;
align-content: start;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 8px 8px;
scrollbar-width: thin;
}
.device-position-picker-result {
width: 100%;
min-height: 58px;
box-sizing: border-box;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 30px;
align-items: center;
gap: 9px;
padding: 7px 6px;
border: 0;
border-top: 1px solid color-mix(in srgb, var(--tkrvue-map-tooltip-border) 72%, transparent);
background: transparent;
color: var(--tkrvue-map-tooltip-text);
text-align: left;
cursor: pointer;
}
.device-position-picker-result:first-child {
border-top: 0;
}
.device-position-picker-result:hover,
.device-position-picker-result:focus-visible {
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-map-tooltip-surface));
outline: 0;
}
.device-position-picker-result-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.device-position-picker-result-copy strong,
.device-position-picker-result-copy small,
.device-position-picker-result-copy time {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-position-picker-result-copy strong {
font-size: var(--tkrvue-font-size-md);
}
.device-position-picker-result-copy small,
.device-position-picker-result-copy time {
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
}
.device-position-picker-result-locate {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 7px;
background: var(--tkrvue-map-tooltip-surface);
color: var(--tkrvue-accent);
}
.device-position-picker-empty {
padding: 26px 12px;
color: var(--tkrvue-map-tooltip-muted);
text-align: center;
}
.device-position-picker-selection {
display: none;
gap: 12px;
padding: 14px;
}
.device-position-picker-overlay.has-selection .device-position-picker-search-view {
display: none;
}
.device-position-picker-overlay.has-selection .device-position-picker-selection {
display: grid;
}
.device-position-picker-selected-summary {
min-width: 0;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 10px;
}
.device-position-picker-selected-summary > span:last-child {
min-width: 0;
display: grid;
gap: 4px;
}
.device-position-picker-selected-summary strong {
overflow-wrap: anywhere;
}
.device-position-picker-selected-summary small {
color: var(--tkrvue-map-tooltip-muted);
line-height: 1.35;
}
.device-position-picker-selection-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.device-position-picker-selection-actions button {
min-height: 36px;
}
.device-position-marker-shell {
border: 0 !important;
background: transparent !important;
}
.device-position-marker-shell,
.trip-replay-marker-shell.is-vehicle {
display: grid !important;
align-items: start;
justify-items: center;
}
.device-position-marker {
position: relative;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 3px solid #fff;
border-radius: 15px 15px 15px 4px;
box-sizing: border-box;
color: #fff;
box-shadow: 0 7px 18px rgba(15, 23, 42, 0.3);
transform: rotate(-45deg);
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.device-position-marker > svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transform: rotate(45deg);
}
.device-position-marker.is-gsm {
--device-marker-color: #1d4ed8;
--device-marker-shell: #3b82f6;
}
.device-position-marker.is-tracker { background: linear-gradient(145deg, #8b5cf6, #6d28d9); }
.device-position-marker.is-agent {
--device-marker-color: var(--tkrvue-device-computer-text, #155e68);
--device-marker-shell: var(--tkrvue-device-computer-bg, #d7f0f2);
}
.device-position-marker.is-beacon {
--device-marker-color: #a16207;
--device-marker-shell: #f59e0b;
}
.device-position-marker:is(.is-gsm, .is-beacon, .is-agent, .is-asset-presented) {
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--device-marker-shell) 76%, #0f172a);
border-radius: 50% 50% 50% 7px;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--device-marker-shell) 72%, #fff),
var(--device-marker-shell)
);
color: var(--asset-icon-foreground, var(--device-marker-color));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--device-marker-shell) 58%, #fff), 0 7px 18px rgba(15, 23, 42, 0.3);
}
.device-position-marker:is(.is-gsm, .is-beacon, .is-agent, .is-asset-presented)::before {
position: absolute;
z-index: 0;
inset: 4px;
border-radius: 50%;
background: var(--device-marker-surface, #fff);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.11);
content: "";
}
.device-position-marker:is(.is-gsm, .is-beacon, .is-agent, .is-asset-presented) > svg {
position: relative;
z-index: 1;
width: 18px;
height: 18px;
color: var(--asset-icon-foreground, var(--device-marker-color));
filter: drop-shadow(0 0 1.35px var(--asset-icon-halo, transparent)) drop-shadow(0 0 0.35px rgba(15, 23, 42, 0.78));
}
.device-position-marker.is-vehicle {
--vehicle-state-color: var(--tkrvue-vehicle-state-stopped, #dc2626);
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--vehicle-state-color) 76%, #0f172a);
border-radius: 50% 50% 50% 7px;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--vehicle-state-color) 72%, #fff),
var(--vehicle-state-color)
);
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vehicle-state-color) 58%, #fff), 0 7px 18px rgba(15, 23, 42, 0.3);
}
.device-position-marker.is-vehicle.is-state-moving {
--vehicle-state-color: var(--tkrvue-vehicle-state-moving, #16a34a);
}
.device-position-marker.is-vehicle.is-state-stopped {
--vehicle-state-color: var(--tkrvue-vehicle-state-stopped, #dc2626);
}
.device-position-marker.is-vehicle.is-state-silent {
--vehicle-state-color: var(--tkrvue-vehicle-state-silent, #d97706);
}
.device-position-marker.is-vehicle.is-state-offline {
--vehicle-state-color: var(--tkrvue-vehicle-state-offline, #475569);
}
.device-position-marker.is-vehicle::before {
position: absolute;
z-index: 0;
inset: 4px;
border-radius: 50%;
background: var(--vehicle-marker-surface, #fff);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.11);
content: "";
}
.device-position-marker.is-vehicle > svg {
position: relative;
z-index: 1;
width: 18px;
height: 18px;
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
filter: drop-shadow(0 0 1.35px var(--asset-icon-halo, transparent)) drop-shadow(0 0 0.35px rgba(15, 23, 42, 0.78));
}
.device-position-marker.is-vehicle.is-state-moving,
.device-position-list-icon.is-vehicle.is-state-moving,
.device-position-tooltip-card.is-vehicle.is-state-moving {
--vehicle-state-color: var(--tkrvue-vehicle-state-moving, #16a34a);
}
.device-position-marker.is-vehicle.is-state-stopped,
.device-position-list-icon.is-vehicle.is-state-stopped,
.device-position-tooltip-card.is-vehicle.is-state-stopped {
--vehicle-state-color: var(--tkrvue-vehicle-state-stopped, #dc2626);
}
.device-position-marker.is-vehicle.is-state-silent,
.device-position-list-icon.is-vehicle.is-state-silent,
.device-position-tooltip-card.is-vehicle.is-state-silent {
--vehicle-state-color: var(--tkrvue-vehicle-state-silent, #d97706);
}
.device-position-marker.is-vehicle.is-state-offline,
.device-position-list-icon.is-vehicle.is-state-offline,
.device-position-tooltip-card.is-vehicle.is-state-offline {
--vehicle-state-color: var(--tkrvue-vehicle-state-offline, #475569);
}
/* Device freshness reuses the vehicle state palette. The marker contour and
surface follow the state while the inner pictogram keeps its type color. */
.device-position-marker.is-freshness-recent,
.device-position-list-icon.is-freshness-recent,
.device-position-tooltip-card.is-freshness-recent {
--device-freshness-color: var(--tkrvue-vehicle-state-moving, #16a34a);
}
.device-position-marker.is-freshness-silent,
.device-position-list-icon.is-freshness-silent,
.device-position-tooltip-card.is-freshness-silent {
--device-freshness-color: var(--tkrvue-vehicle-state-silent, #d97706);
}
.device-position-marker.is-freshness-offline,
.device-position-list-icon.is-freshness-offline,
.device-position-tooltip-card.is-freshness-offline {
--device-freshness-color: var(--tkrvue-vehicle-state-offline, #475569);
}
.device-position-marker.is-freshness-recent,
.device-position-marker.is-freshness-silent,
.device-position-marker.is-freshness-offline {
border-color: color-mix(in srgb, var(--device-freshness-color) 76%, #0f172a);
background: linear-gradient(
145deg,
color-mix(in srgb, var(--device-freshness-color) 72%, #fff),
var(--device-freshness-color)
);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--device-freshness-color) 58%, #fff),
0 7px 18px rgba(15, 23, 42, 0.3);
}
.device-position-list-icon.is-freshness-recent,
.device-position-list-icon.is-freshness-silent,
.device-position-list-icon.is-freshness-offline {
border-color: var(--device-freshness-color);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--device-freshness-color) 82%, transparent),
0 2px 6px rgba(15, 23, 42, 0.14);
}
.device-position-tooltip-card.is-freshness-recent,
.device-position-tooltip-card.is-freshness-silent,
.device-position-tooltip-card.is-freshness-offline {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--device-freshness-color) 72%, transparent),
var(--tkrvue-map-tooltip-shadow);
}
.device-position-marker-shell:hover .device-position-marker {
transform: rotate(-45deg);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.38);
}
.device-position-marker-shell:hover .device-position-marker.is-freshness-recent,
.device-position-marker-shell:hover .device-position-marker.is-freshness-silent,
.device-position-marker-shell:hover .device-position-marker.is-freshness-offline {
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--device-freshness-color) 58%, #fff),
0 10px 24px rgba(15, 23, 42, 0.38);
}
.device-position-marker-shell.is-follow-target .device-position-marker {
box-shadow:
0 0 0 4px color-mix(in srgb, var(--tkrvue-accent) 38%, transparent),
0 0 0 8px color-mix(in srgb, var(--tkrvue-accent) 14%, transparent),
0 10px 24px rgba(15, 23, 42, 0.38);
}
.leaflet-overlay-pane .device-position-beacon-link {
stroke: color-mix(in srgb, var(--tkrvue-accent) 72%, var(--tkrvue-map-tooltip-muted));
stroke-width: 1.15px;
stroke-dasharray: 3 5;
stroke-linecap: round;
opacity: 0.72;
pointer-events: none;
}
.leaflet-overlay-pane .device-position-beacon-link-hit {
stroke: transparent;
stroke-width: 14px;
opacity: 0;
cursor: pointer;
pointer-events: stroke;
}
.leaflet-tooltip.device-position-leaflet-tooltip {
padding: 0;
border: 0;
border-radius: 12px;
background: transparent;
box-shadow: none;
pointer-events: auto;
user-select: text;
-webkit-user-select: text;
translate: var(--device-position-tooltip-shift-x, 0px) var(--device-position-tooltip-shift-y, 0px);
}
.leaflet-container.has-interactive-device-tooltip,
.leaflet-container.has-interactive-device-tooltip .leaflet-map-pane,
.leaflet-container.has-interactive-device-tooltip .leaflet-tooltip-pane {
user-select: auto;
-webkit-user-select: auto;
}
.leaflet-container.has-interactive-device-tooltip .leaflet-tile-pane,
.leaflet-container.has-interactive-device-tooltip .leaflet-overlay-pane,
.leaflet-container.has-interactive-device-tooltip .leaflet-shadow-pane,
.leaflet-container.has-interactive-device-tooltip .leaflet-marker-pane,
.leaflet-container.has-interactive-device-tooltip .leaflet-control-container {
user-select: none;
-webkit-user-select: none;
}
.leaflet-tooltip.device-position-leaflet-tooltip::before {
border-top-color: var(--tkrvue-map-tooltip-bg);
}
.device-position-tooltip-card {
position: relative;
box-sizing: border-box;
width: min(250px, calc(100vw - 36px));
min-width: 190px;
max-width: min(620px, calc(100vw - 36px));
padding: 9px;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 11px;
background: linear-gradient(145deg, var(--tkrvue-map-tooltip-gradient-start), var(--tkrvue-map-tooltip-gradient-end));
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
backdrop-filter: blur(12px);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.16;
user-select: text;
-webkit-user-select: text;
resize: both;
overflow: auto;
max-height: min(70vh, calc(100dvh - 36px));
}
.device-position-tooltip-card *,
.device-position-tooltip-card *::before,
.device-position-tooltip-card *::after {
user-select: text;
-webkit-user-select: text;
}
.device-position-tooltip-card button,
.device-position-tooltip-card summary,
.device-position-tooltip-card svg,
.device-position-tooltip-card path {
user-select: none;
-webkit-user-select: none;
}
.device-position-tooltip-card.is-agent {
width: min(300px, calc(100vw - 36px));
min-width: 260px;
max-width: min(620px, calc(100vw - 36px));
}
html[data-device-type="smartphone"] .device-position-tooltip-card {
overscroll-behavior: contain;
width: min(250px, calc(var(--device-position-tooltip-available-width, 100vw) - 8px));
min-width: 0;
max-width: min(250px, calc(var(--device-position-tooltip-available-width, 100vw) - 8px));
max-height: min(70dvh, calc(var(--device-position-tooltip-available-height, 100dvh) - 4px));
padding: 6px;
resize: none;
overflow-x: hidden;
overflow-y: auto;
border-radius: 9px;
font-size: 11px;
line-height: 1.16;
scrollbar-width: thin;
}
html[data-device-type="smartphone"] .device-position-tooltip-card.is-agent {
min-width: 0;
}
html[data-device-type="smartphone"] .device-position-tooltip-heading {
gap: 5px;
margin-bottom: 5px;
}
html[data-device-type="smartphone"] .device-position-tooltip-heading strong {
font-size: 12px;
}
html[data-device-type="smartphone"] .device-position-tooltip-icon {
width: 26px;
height: 26px;
flex-basis: 26px;
border-radius: 8px;
}
html[data-device-type="smartphone"] .device-position-tooltip-icon svg {
width: 15px;
height: 15px;
}
html[data-device-type="smartphone"] .device-position-tooltip-date {
gap: 0;
padding: 5px 6px;
}
html[data-device-type="smartphone"] .device-position-tooltip-date strong,
html[data-device-type="smartphone"] .device-position-tooltip-speed strong {
font-size: 11px;
}
html[data-device-type="smartphone"] .device-position-tooltip-detail {
gap: 5px;
padding-top: 4px;
}
.device-position-tooltip-controls {
position: absolute;
z-index: 6;
top: 6px;
right: 6px;
display: inline-flex;
align-items: flex-start;
gap: 4px;
}
.device-position-tooltip-close {
position: static;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.device-position-tooltip-close.tkrvue-close-button {
width: var(--tkrvue-map-close-size) !important;
min-width: var(--tkrvue-map-close-size) !important;
max-width: var(--tkrvue-map-close-size) !important;
height: var(--tkrvue-map-close-size) !important;
min-height: var(--tkrvue-map-close-size) !important;
max-height: var(--tkrvue-map-close-size) !important;
flex-basis: var(--tkrvue-map-close-size) !important;
border-radius: 7px;
}
.device-position-tooltip-close.tkrvue-close-button svg {
width: var(--tkrvue-map-close-icon-size) !important;
min-width: var(--tkrvue-map-close-icon-size) !important;
max-width: var(--tkrvue-map-close-icon-size) !important;
height: var(--tkrvue-map-close-icon-size) !important;
min-height: var(--tkrvue-map-close-icon-size) !important;
max-height: var(--tkrvue-map-close-icon-size) !important;
}
.device-position-tooltip-follow {
width: var(--tkrvue-map-close-size) !important;
min-width: var(--tkrvue-map-close-size) !important;
max-width: var(--tkrvue-map-close-size) !important;
height: var(--tkrvue-map-close-size) !important;
min-height: var(--tkrvue-map-close-size) !important;
max-height: var(--tkrvue-map-close-size) !important;
box-sizing: border-box;
display: grid;
place-items: center;
padding: 0 !important;
border-radius: 7px;
color: var(--tkrvue-accent);
}
.device-position-tooltip-follow svg {
width: var(--tkrvue-map-close-icon-size) !important;
height: var(--tkrvue-map-close-icon-size) !important;
}
.device-position-tooltip-follow:hover,
.device-position-tooltip-follow:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-map-tooltip-surface));
color: var(--tkrvue-accent);
outline: 0;
}
.device-position-tooltip-follow.is-active {
border-color: var(--tkrvue-danger, #dc2626);
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 10%, var(--tkrvue-map-tooltip-surface));
color: var(--tkrvue-danger, #dc2626);
}
.device-position-tooltip-follow.is-active:hover,
.device-position-tooltip-follow.is-active:focus-visible {
border-color: var(--tkrvue-danger, #dc2626);
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 17%, var(--tkrvue-map-tooltip-surface));
color: var(--tkrvue-danger, #dc2626);
outline: 0;
}
.device-position-tooltip-heading {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 7px;
padding-right: calc(var(--tkrvue-map-close-size) + 5px);
}
.device-position-tooltip-card.has-actions .device-position-tooltip-heading {
padding-right: calc((var(--tkrvue-map-close-size) * 2) + 9px);
}
.device-position-tooltip-card.has-follow-action:not(.has-actions) .device-position-tooltip-heading {
padding-right: calc((var(--tkrvue-map-close-size) * 2) + 9px);
}
.device-position-tooltip-card.has-actions.has-follow-action .device-position-tooltip-heading {
padding-right: calc((var(--tkrvue-map-close-size) * 3) + 13px);
}
.device-position-tooltip-card.is-embedded.has-actions .device-position-tooltip-heading {
padding-right: calc(var(--tkrvue-map-close-size) + 5px);
}
.device-position-tooltip-card.is-embedded.has-actions.has-follow-action .device-position-tooltip-heading {
padding-right: calc((var(--tkrvue-map-close-size) * 2) + 9px);
}
.device-position-tooltip-actions {
position: relative;
}
.device-position-tooltip-actions > summary {
width: var(--tkrvue-map-close-size) !important;
min-width: var(--tkrvue-map-close-size) !important;
max-width: var(--tkrvue-map-close-size) !important;
height: var(--tkrvue-map-close-size) !important;
min-height: var(--tkrvue-map-close-size) !important;
max-height: var(--tkrvue-map-close-size) !important;
box-sizing: border-box;
display: grid;
place-items: center;
padding: 0 !important;
border-radius: 7px;
color: var(--tkrvue-map-tooltip-text);
cursor: pointer;
list-style: none;
}
.device-position-tooltip-actions > summary::-webkit-details-marker {
display: none;
}
.device-position-tooltip-actions > summary svg {
width: var(--tkrvue-map-close-icon-size) !important;
height: var(--tkrvue-map-close-icon-size) !important;
}
.device-position-tooltip-actions[open] > summary,
.device-position-tooltip-actions > summary:hover,
.device-position-tooltip-actions > summary:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-map-tooltip-surface));
color: var(--tkrvue-accent);
outline: 0;
}
.device-position-tooltip-actions-menu {
position: absolute;
z-index: 8;
top: calc(var(--tkrvue-map-close-size) + 5px);
right: 0;
width: min(250px, calc(100vw - 36px));
max-height: min(360px, calc(100vh - 100px));
box-sizing: border-box;
display: grid;
gap: 3px;
padding: 6px;
overflow-y: auto;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 10px;
background: var(--tkrvue-map-tooltip-bg);
box-shadow: var(--tkrvue-map-tooltip-shadow);
color: var(--tkrvue-map-tooltip-text);
overscroll-behavior: contain;
transform: translate(
var(--device-position-actions-shift-x, 0px),
var(--device-position-actions-shift-y, 0px)
);
}
.device-position-tooltip-actions > .device-position-tooltip-actions-menu {
display: none;
}
.device-position-tooltip-actions-menu button {
width: 100%;
min-height: 34px;
box-sizing: border-box;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 6px 8px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.device-position-tooltip-actions-menu button:hover,
.device-position-tooltip-actions-menu button:focus-visible {
border-color: color-mix(in srgb, var(--tkrvue-accent) 35%, var(--tkrvue-map-tooltip-border));
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-map-tooltip-surface));
color: var(--tkrvue-accent);
outline: 0;
}
.device-position-tooltip-actions-menu button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
}
.device-position-tooltip-actions-menu button span {
color: inherit;
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
line-height: 1.25;
}
.device-position-tooltip-actions[data-mobile-actions-open="1"] > .device-position-tooltip-actions-menu {
display: none;
}
.device-position-tooltip-actions[data-desktop-actions-open="1"] > .device-position-tooltip-actions-menu {
display: none;
}
.device-position-actions-popover {
position: fixed;
z-index: 10070;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 11px;
background: var(--tkrvue-map-tooltip-bg);
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.device-position-actions-popover .device-position-tooltip-actions-menu {
position: static;
width: 100% !important;
max-height: none !important;
padding: 7px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
transform: none;
}
.device-position-actions-popover .device-position-tooltip-actions-menu button {
min-height: 38px;
grid-template-columns: 24px minmax(0, 1fr);
gap: 9px;
padding: 7px 9px;
}
.device-position-actions-sheet-backdrop {
position: fixed;
inset: auto;
z-index: 10080;
display: grid;
align-items: center;
justify-items: center;
box-sizing: border-box;
padding:
max(10px, env(safe-area-inset-top))
max(10px, env(safe-area-inset-right))
max(10px, env(safe-area-inset-bottom))
max(10px, env(safe-area-inset-left));
background: rgb(15 23 42 / 28%);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
backdrop-filter: blur(2px);
touch-action: none;
}
.device-position-actions-sheet {
width: min(480px, 100%);
max-height: min(520px, calc(100% - 12px));
min-height: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-self: center;
overflow: hidden;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 14px;
background: var(--tkrvue-map-tooltip-bg);
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
}
.device-position-actions-sheet > header {
min-height: var(--tkrvue-mobile-touch-target, 44px);
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 8px 7px 13px;
border-bottom: 1px solid var(--tkrvue-map-tooltip-border);
}
.device-position-actions-sheet > header strong {
min-width: 0;
overflow-wrap: anywhere;
}
.device-position-actions-sheet-body {
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}
.device-position-actions-sheet .device-position-tooltip-actions-menu {
position: static;
width: 100% !important;
max-height: none !important;
padding: 7px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
transform: none;
}
.device-position-actions-sheet .device-position-tooltip-actions-menu button {
min-height: var(--tkrvue-mobile-touch-target, 44px);
grid-template-columns: 24px minmax(0, 1fr);
gap: 10px;
padding: 9px 10px;
}
.device-position-actions-sheet .device-position-tooltip-actions-menu button + button {
border-top-color: color-mix(in srgb, var(--tkrvue-map-tooltip-border) 68%, transparent);
}
.tkrvue-identify-location-overlay {
position: fixed;
z-index: 10090;
display: grid;
place-items: center;
box-sizing: border-box;
padding:
max(12px, env(safe-area-inset-top, 0px))
max(12px, env(safe-area-inset-right, 0px))
max(12px, env(safe-area-inset-bottom, 0px))
max(12px, env(safe-area-inset-left, 0px));
pointer-events: none;
}
.tkrvue-identify-location-card {
position: relative;
width: min(360px, 100%);
max-height: min(220px, calc(100% - 8px));
box-sizing: border-box;
overflow: auto;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 11px;
background: var(--tkrvue-map-tooltip-bg);
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.25;
pointer-events: auto;
}
.tkrvue-identify-location-close.tkrvue-close-button {
position: absolute;
z-index: 1;
top: 5px;
right: 5px;
width: var(--tkrvue-map-close-size) !important;
min-width: var(--tkrvue-map-close-size) !important;
max-width: var(--tkrvue-map-close-size) !important;
height: var(--tkrvue-map-close-size) !important;
min-height: var(--tkrvue-map-close-size) !important;
max-height: var(--tkrvue-map-close-size) !important;
border-radius: 7px;
}
.tkrvue-identify-location-close svg {
width: var(--tkrvue-map-close-icon-size);
height: var(--tkrvue-map-close-icon-size);
}
.tkrvue-identify-location-card .tkrvue-identify-location-popup-content {
max-height: inherit;
padding: 10px calc(var(--tkrvue-map-close-size) + 10px) 12px 12px;
overflow-wrap: anywhere;
}
.tkrvue-identify-location-card .tkrvue-identify-location-popup-content strong {
font-size: var(--tkrvue-font-size-md);
}
.tkrvue-identify-location-timer {
display: none;
position: sticky;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: color-mix(in srgb, var(--tkrvue-accent) 20%, transparent);
transform-origin: left center;
}
.tkrvue-identify-location-card.has-auto-dismiss .tkrvue-identify-location-timer {
display: block;
}
.tkrvue-identify-location-card.has-auto-dismiss .tkrvue-identify-location-timer::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: var(--tkrvue-accent);
transform-origin: left center;
animation: tkrvue-identify-location-countdown 12s linear forwards;
}
@keyframes tkrvue-identify-location-countdown {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
.device-position-tooltip-heading > span:last-child {
min-width: 0;
max-width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2px;
}
.device-position-tooltip-heading small {
display: block;
min-width: 0;
overflow: hidden;
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.device-position-tooltip-heading strong {
overflow: hidden;
color: var(--tkrvue-map-tooltip-text);
font-size: var(--tkrvue-font-size-md);
text-overflow: ellipsis;
white-space: nowrap;
}
.device-position-tooltip-icon {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
border-radius: 9px;
color: #fff;
}
.device-position-tooltip-card.is-gsm .device-position-tooltip-icon {
--device-marker-color: #1d4ed8;
--device-marker-shell: #3b82f6;
}
.device-position-tooltip-card.is-tracker .device-position-tooltip-icon { background: linear-gradient(145deg, #8b5cf6, #6d28d9); }
.device-position-tooltip-card.is-beacon .device-position-tooltip-icon {
--device-marker-color: #a16207;
--device-marker-shell: #f59e0b;
}
.device-position-tooltip-card:is(.is-gsm, .is-beacon, .is-agent) .device-position-tooltip-icon {
box-sizing: border-box;
border: 2px solid var(--device-marker-shell);
background: var(--device-marker-surface, #fff);
color: var(--asset-icon-foreground, var(--device-marker-color));
box-shadow: 0 2px 7px rgba(15, 23, 42, 0.16);
}
.device-position-tooltip-card.is-asset-presented .device-position-tooltip-icon {
box-sizing: border-box;
border: 2px solid var(--device-marker-shell, #64748b);
background: var(--device-marker-surface, #fff);
color: var(--asset-icon-foreground, var(--device-marker-color, #64748b));
box-shadow: 0 2px 7px rgba(15, 23, 42, 0.16);
}
.device-position-tooltip-card.is-vehicle .device-position-tooltip-icon {
box-sizing: border-box;
border: 2px solid var(--vehicle-state-color, var(--tkrvue-accent, #316da5));
background: var(--vehicle-marker-surface, #fff);
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
box-shadow: 0 2px 7px rgba(15, 23, 42, 0.16);
}
.device-position-tooltip-card.is-freshness-recent .device-position-tooltip-icon,
.device-position-tooltip-card.is-freshness-silent .device-position-tooltip-icon,
.device-position-tooltip-card.is-freshness-offline .device-position-tooltip-icon {
border-color: var(--device-freshness-color);
}
.device-position-tooltip-icon svg {
width: 17px;
height: 17px;
filter: drop-shadow(0 0 1.25px var(--asset-icon-halo, transparent)) drop-shadow(0 0 0.3px rgba(15, 23, 42, 0.72));
}
.device-position-tooltip-date {
display: flex;
flex-direction: column;
gap: 1px;
padding: 6px 7px;
border: 1px solid color-mix(in srgb, var(--tkrvue-map-tooltip-border) 70%, transparent);
border-radius: 8px;
background: var(--tkrvue-map-tooltip-surface);
}
.device-position-tooltip-date span,
.device-position-tooltip-detail span {
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
}
.device-position-tooltip-date strong {
color: var(--tkrvue-map-tooltip-text);
font-size: var(--tkrvue-font-size-sm);
}
.device-position-tooltip-speed {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 3px;
padding-top: 4px;
border-top: 1px solid var(--tkrvue-map-tooltip-border);
}
.device-position-tooltip-speed strong {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
color: var(--tkrvue-map-tooltip-text);
font-size: var(--tkrvue-font-size-sm);
text-align: right;
text-overflow: clip;
white-space: nowrap;
}
.device-position-tooltip-speed.is-state {
align-items: flex-start;
}
.device-position-tooltip-speed.is-state strong {
overflow-wrap: anywhere;
white-space: normal;
}
.device-position-tooltip-detail {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 5px;
}
.device-position-tooltip-detail strong {
min-width: 0;
max-width: none;
flex: 1 1 auto;
overflow: hidden;
color: var(--tkrvue-map-tooltip-text);
font-size: var(--tkrvue-font-size-xs);
text-align: right;
text-overflow: clip;
white-space: nowrap;
}
@media (max-width: 900px) {
.device-position-view-body {
overflow-y: auto;
}
.device-position-workspace {
flex: 0 0 auto;
grid-template-columns: 1fr;
overflow: visible;
}
.device-position-map-card,
#devicePositionsMap {
min-height: 420px;
}
.device-position-list-card {
max-height: 420px;
}
}
@media (max-width: 560px) {
.device-position-type-filters {
grid-template-columns: 1fr;
}
.device-position-toolbar {
flex-wrap: wrap;
}
.device-position-search {
flex-basis: 100%;
}
.device-position-map-card,
#devicePositionsMap {
min-height: 350px;
}
.device-position-map-legend {
right: 8px;
left: 8px;
bottom: 8px;
}
}
/* Vues cartographiques enregistrées */
.map-center-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: 18px;
border: 1px solid var(--tkrvue-border);
border-radius: 14px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 94%, var(--tkrvue-accent) 6%);
}
.map-center-card-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.map-center-card-heading h3,
.map-center-card-heading p {
margin: 0;
}
.map-center-card-heading p {
margin-top: 5px;
color: var(--tkrvue-muted);
}
.map-center-coordinates {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.map-center-coordinates > span {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: var(--tkrvue-layer-surface-bg);
}
.map-center-coordinates small {
color: var(--tkrvue-muted);
}
.map-center-save-form {
display: flex;
align-items: stretch;
gap: 10px;
}
.map-center-save-form input {
min-width: 0;
flex: 1 1 auto;
}
.saved-map-view-count {
min-width: 34px;
padding: 7px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 13%, transparent);
color: var(--tkrvue-accent);
font-weight: 800;
text-align: center;
}
.saved-map-views-list {
display: flex;
flex-direction: column;
gap: 9px;
}
.saved-map-view-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 11px 12px;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg);
}
.saved-map-view-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.saved-map-view-copy input {
width: 100%;
min-width: 0;
padding: 5px 7px;
border: 1px solid transparent;
background: transparent;
color: var(--tkrvue-text);
font: inherit;
font-weight: 750;
}
.saved-map-view-copy input:hover,
.saved-map-view-copy input:focus {
border-color: var(--tkrvue-border);
background: var(--tkrvue-input-bg);
outline: 0;
}
.saved-map-view-copy small {
padding-inline: 7px;
color: var(--tkrvue-muted);
}
.saved-map-view-actions {
display: flex;
align-items: center;
gap: 7px;
}
.saved-map-view-empty {
padding: 30px 14px;
border: 1px dashed var(--tkrvue-border);
border-radius: 12px;
color: var(--tkrvue-muted);
text-align: center;
}
/* Actions cartographiques regroupées à gauche, sous le zoom et au-dessus de la recherche */
#map .leaflet-top.leaflet-right.tkrvue-map-actions-dock {
top: 112px;
right: auto;
left: 10px;
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: 7px;
pointer-events: none;
overflow: visible;
}
#map .leaflet-top.leaflet-right.tkrvue-map-actions-dock > .leaflet-control {
float: none;
clear: none;
margin: 0;
pointer-events: auto;
overflow: visible;
}
/* Les commandes superposées utilisent le bleu de marque TrackerVue, distinct
* de la couleur principale personnalisable de l'organisation. */
#map .leaflet-control-zoom.leaflet-bar,
#map .tkrvue-map-actions-dock .leaflet-bar {
border: 0;
background: transparent;
box-shadow: none;
}
#map .leaflet-control-zoom.leaflet-bar {
display: flex;
flex-direction: column;
gap: 6px;
}
#map .leaflet-control-zoom.leaflet-bar > a,
#map .map-saved-views-toggle,
#map .tkrvue-itinerary-map-button,
#map .tkrvue-map-print-button,
#map .tkrvue-current-location-control,
#map .tkrvue-identify-location-button:not(.is-active),
#map .tkrvue-irve-filter-toggle,
#map .leaflet-control-layers-toggle.tkrvue-map-control-button {
width: 36px !important;
min-width: 36px;
height: 36px !important;
min-height: 36px;
box-sizing: border-box;
display: grid !important;
place-items: center;
padding: 0 !important;
border: 1px solid var(--tkrvue-map-control-border) !important;
border-radius: 9px !important;
background-color: var(--tkrvue-map-control-surface) !important;
color: var(--tkrvue-map-control-foreground) !important;
box-shadow: var(--tkrvue-map-control-shadow);
}
#map .leaflet-control-zoom.leaflet-bar > a {
font-size: 22px;
font-weight: 500;
line-height: 34px !important;
}
#map .leaflet-control-zoom.leaflet-bar > a:hover,
#map .leaflet-control-zoom.leaflet-bar > a:focus-visible,
#map .map-saved-views-toggle:hover,
#map .map-saved-views-toggle:focus-visible,
#map .map-saved-views-control.is-open .map-saved-views-toggle,
#map .tkrvue-itinerary-map-button:hover,
#map .tkrvue-itinerary-map-button:focus-visible,
#map .tkrvue-map-print-button:hover,
#map .tkrvue-map-print-button:focus-visible,
#map .tkrvue-current-location-control:hover,
#map .tkrvue-current-location-control:focus-visible,
#map .tkrvue-identify-location-button:not(.is-active):hover,
#map .tkrvue-identify-location-button:not(.is-active):focus-visible,
#map .tkrvue-irve-filter-toggle:hover,
#map .tkrvue-irve-filter-toggle:focus-visible,
#map .tkrvue-irve-filter-control.is-open .tkrvue-irve-filter-toggle,
#map .leaflet-control-layers-toggle.tkrvue-map-control-button:hover,
#map .leaflet-control-layers-toggle.tkrvue-map-control-button:focus-visible {
border-color: var(--tkrvue-map-control-foreground) !important;
background-color: var(--tkrvue-map-control-surface-hover) !important;
outline: 0;
}
#map .leaflet-control-zoom.leaflet-bar > a.leaflet-disabled {
border-color: var(--tkrvue-map-control-field-border) !important;
color: var(--tkrvue-map-control-muted) !important;
box-shadow: none;
cursor: default;
}
#map .tkrvue-identify-location-button.is-active {
width: 36px !important;
min-width: 36px;
height: 36px !important;
min-height: 36px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-map-control-accent) !important;
border-radius: 9px !important;
background: var(--tkrvue-map-control-accent) !important;
color: #fff !important;
box-shadow: var(--tkrvue-map-control-shadow);
}
#map .leaflet-control-layers-toggle.tkrvue-map-control-button {
background-image: none !important;
position: relative;
overflow: visible;
}
#map .leaflet-control-layers-toggle.tkrvue-map-control-button svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#map .tkrvue-map-layer-hidden-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 17px;
height: 17px;
box-sizing: border-box;
display: grid;
place-items: center;
padding: 0 4px;
border: 2px solid var(--tkrvue-map-control-surface);
border-radius: 999px;
background: #d97706;
color: #fff;
font-family: var(--tkrvue-font-family);
font-size: 10px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
#map .tkrvue-map-layer-hidden-badge[hidden] {
display: none;
}
#map .leaflet-control-layers-expanded {
position: relative;
width: min(320px, calc(100vw - 24px));
min-width: min(280px, calc(100vw - 24px));
max-width: min(320px, calc(100vw - 24px));
height: var(--tkrvue-map-layer-control-height, auto);
max-height: var(--tkrvue-map-layer-control-max-height, min(520px, calc(100vh - 28px)));
max-height: var(--tkrvue-map-layer-control-max-height, min(520px, calc(100dvh - 28px)));
box-sizing: border-box;
overflow-x: hidden;
overflow: hidden !important;
}
#map .tkrvue-map-layers-close {
display: none;
position: absolute;
top: 7px;
right: 7px;
z-index: 3;
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
flex: 0 0 30px !important;
}
#map .leaflet-control-layers-expanded > .tkrvue-map-layers-close {
display: inline-flex;
}
#map .leaflet-control-layers-expanded > .leaflet-control-layers-list {
display: block !important;
width: 100%;
height: calc(var(--tkrvue-map-layer-control-height, 520px) - 12px);
max-height: calc(var(--tkrvue-map-layer-control-height, 520px) - 12px);
padding-top: 38px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: scroll !important;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--tkrvue-map-control-foreground) 42%, transparent) transparent;
}
#map .leaflet-control-layers-expanded > .leaflet-control-layers-list::-webkit-scrollbar {
width: 7px;
}
#map .leaflet-control-layers-expanded > .leaflet-control-layers-list::-webkit-scrollbar-track {
background: transparent;
}
#map .leaflet-control-layers-expanded > .leaflet-control-layers-list::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-map-control-foreground) 42%, transparent);
background-clip: padding-box;
}
#map .leaflet-control-layers-expanded > .leaflet-control-layers-list::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--tkrvue-map-control-foreground) 62%, transparent);
background-clip: padding-box;
}
#map .tkrvue-map-layer-visibility {
width: min(280px, calc(100vw - 42px));
box-sizing: border-box;
margin-top: 8px;
padding: 8px 9px 14px;
border-top: 1px solid var(--tkrvue-map-control-field-border);
color: var(--tkrvue-map-control-content);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
}
#map .tkrvue-map-layer-visibility[hidden] {
display: none;
}
.tkrvue-map-layer-visibility-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 5px;
}
.tkrvue-map-layer-visibility-header strong {
color: var(--tkrvue-map-control-content);
font-size: var(--tkrvue-font-size-sm);
}
.tkrvue-map-layer-visibility-header > span {
color: var(--tkrvue-map-control-muted);
font-size: var(--tkrvue-font-size-xs);
text-align: right;
}
.tkrvue-map-layer-visibility-list {
display: grid;
gap: 3px;
}
.tkrvue-map-layer-visibility-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
padding: 4px 5px;
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-map-control-foreground) 6%, transparent);
}
.tkrvue-map-layer-visibility-row.is-partial {
background: color-mix(in srgb, #d97706 10%, var(--tkrvue-map-control-field));
}
.tkrvue-map-layer-visibility-name {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 5px;
overflow: hidden;
}
.tkrvue-map-layer-visibility-name svg {
width: 15px;
height: 15px;
flex: 0 0 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tkrvue-map-layer-visibility-name > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tkrvue-map-layer-visibility-row strong {
flex: 0 0 auto;
color: var(--tkrvue-map-control-muted);
font-size: var(--tkrvue-font-size-xs);
white-space: nowrap;
}
.tkrvue-map-layer-visibility-note {
margin: 6px 0 0;
color: var(--tkrvue-map-control-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.3;
}
#map .tkrvue-map-layer-show-all {
width: 100%;
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 7px;
padding: 5px 7px;
font-size: var(--tkrvue-font-size-xs);
}
#map .tkrvue-map-layer-show-all svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tkrvue-itinerary-map-control {
border: 0;
background: transparent;
box-shadow: none;
}
.tkrvue-map-print-control {
order: 100;
border: 0;
background: transparent;
box-shadow: none;
}
#map .tkrvue-itinerary-map-button,
#map .tkrvue-map-print-button {
cursor: pointer;
}
#map .tkrvue-itinerary-map-button svg,
#map .tkrvue-map-print-button svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
html[data-map-theme="dark"] #map .leaflet-control-layers-expanded {
border: 1px solid var(--tkrvue-map-control-border);
background: var(--tkrvue-map-control-surface-solid);
color: var(--tkrvue-map-control-content);
box-shadow: var(--tkrvue-map-control-shadow);
}
#map .tkrvue-map-print-button:disabled {
cursor: progress;
opacity: 0.72;
}
.map-saved-views-control {
position: relative;
border: 0;
background: transparent;
box-shadow: none;
}
.map-saved-views-toggle {
width: 36px;
height: 36px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(15, 23, 42, 0.22);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-map-control-accent);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
cursor: pointer;
}
.map-saved-views-toggle:hover,
.map-saved-views-toggle:focus-visible,
.map-saved-views-control.is-open .map-saved-views-toggle {
border-color: var(--tkrvue-map-control-accent);
background: color-mix(in srgb, var(--tkrvue-map-control-accent) 10%, var(--tkrvue-layer-surface-bg));
outline: 0;
}
.map-saved-views-toggle svg,
.map-saved-view-save-current svg,
.map-saved-view-confirm svg,
.map-saved-view-manage svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-saved-views-panel {
position: absolute;
z-index: 1000;
top: 0;
right: auto;
left: 44px;
width: min(310px, calc(100vw - 44px));
box-sizing: border-box;
padding: 14px;
border: 1px solid var(--tkrvue-border);
border-radius: 13px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 97%, var(--tkrvue-accent) 3%);
color: var(--tkrvue-text);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
font-family: inherit;
font-size: var(--tkrvue-font-size-md);
}
.map-saved-views-panel > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
font-size: var(--tkrvue-font-size-lg);
}
.map-saved-views-panel > header span {
min-width: 27px;
padding: 3px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, transparent);
color: var(--tkrvue-accent);
font-weight: 800;
text-align: center;
}
.map-saved-views-header-actions {
display: inline-flex;
align-items: center;
gap: 7px;
}
.map-saved-views-close {
flex: 0 0 auto;
}
.map-saved-view-select-label,
.map-saved-view-quick-form > label {
display: block;
margin-bottom: 6px;
color: var(--tkrvue-muted);
font-weight: 700;
}
.map-saved-view-select-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 7px;
}
.map-saved-view-select-row select,
.map-saved-view-quick-form input {
width: 100%;
min-width: 0;
height: 38px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
font: inherit;
}
.map-saved-view-select-row select {
padding: 0 30px 0 10px;
}
.map-saved-view-quick-form input {
padding: 0 10px;
}
.map-saved-view-save-current {
position: relative;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-accent);
color: #fff;
cursor: pointer;
}
.map-saved-view-save-current > span {
position: absolute;
top: 0;
right: 3px;
font-size: 13px;
font-weight: 900;
line-height: 1;
}
.map-saved-view-empty {
margin: 8px 0 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.map-saved-view-quick-form {
margin-top: 12px;
padding: 11px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 30%, var(--tkrvue-border));
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, transparent);
}
.map-saved-view-quick-form > div {
display: flex;
justify-content: flex-end;
gap: 7px;
margin-top: 9px;
}
.map-saved-view-cancel,
.map-saved-view-confirm,
.map-saved-view-manage {
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 7px 10px;
border-radius: 8px;
font: inherit;
font-weight: 750;
cursor: pointer;
}
.map-saved-view-cancel,
.map-saved-view-manage {
border: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
}
.map-saved-view-confirm {
border: 1px solid var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
}
.map-saved-views-panel hr {
height: 1px;
margin: 12px 0;
border: 0;
background: linear-gradient(90deg, transparent, var(--tkrvue-border) 12%, var(--tkrvue-border) 88%, transparent);
}
.map-saved-view-manage {
width: 100%;
color: var(--tkrvue-accent);
}
/* Dessin et gestion des zones sur la carte principale */
.map-zone-view-layer {
height: 100%;
max-height: 100%;
min-height: 0;
overflow: visible;
}
.map-zone-view-panel {
flex: 1 1 auto;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.map-zone-view-panel > .view-header {
flex: 0 0 auto;
}
.map-zone-view-panel > .map-zone-view-body {
display: flex;
flex-direction: column;
flex: 1 1 0;
height: 0 !important;
max-height: none;
min-height: 0;
overflow: hidden !important;
box-sizing: border-box;
}
.map-zone-view-body > .context-help,
.map-zone-view-body > .view-status,
.map-zone-view-body > .map-zone-metrics {
flex: 0 0 auto;
}
.map-zone-scrollable-content {
flex: 1 1 0;
height: 0 !important;
max-height: none;
min-height: 0;
max-width: 100%;
overflow-y: scroll !important;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: auto;
scrollbar-color: #7d8a9b #e4e9ee;
touch-action: pan-y;
pointer-events: auto;
padding-right: 6px;
padding-bottom: 12px;
box-sizing: border-box;
}
.map-zone-scrollable-content::-webkit-scrollbar {
width: 12px;
}
.map-zone-scrollable-content::-webkit-scrollbar-track {
background: #e4e9ee;
border-radius: 999px;
}
.map-zone-scrollable-content::-webkit-scrollbar-thumb {
background: #7d8a9b;
border: 3px solid #e4e9ee;
border-radius: 999px;
}
.map-zone-scrollable-content::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--tkrvue-muted) 78%, transparent);
}
.map-zone-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.map-zone-toolbar-label {
margin-right: 2px;
color: var(--tkrvue-text);
font-weight: 800;
}
.map-zone-draw-button.is-active,
.map-zone-draw-button[aria-pressed="true"] {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
box-shadow: 0 5px 14px color-mix(in srgb, var(--tkrvue-accent) 28%, transparent);
}
.map-zone-draw-button.is-active:hover,
.map-zone-draw-button[aria-pressed="true"]:hover {
background: color-mix(in srgb, var(--tkrvue-accent) 88%, #000);
color: #fff;
}
.map-zone-discard-draft {
margin-left: 2px;
}
.map-zone-shape-icon {
width: 19px;
height: 15px;
display: inline-block;
border: 2px solid currentColor;
box-sizing: border-box;
}
.map-zone-shape-icon.is-rectangle {
border-radius: 2px;
}
.map-zone-shape-icon.is-ellipse {
border-radius: 50%;
}
.map-zone-shape-icon.is-polygon {
border: 0;
background: currentColor;
clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
}
.map-zone-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
gap: 12px;
align-items: start;
}
.map-zone-alert-card {
scroll-margin-top: 8px;
margin-top: 12px;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 14px;
background: var(--tkrvue-layer-surface-bg);
}
.map-zone-alert-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px;
border-bottom: 1px solid var(--tkrvue-border);
}
.map-zone-alert-heading h3,
.map-zone-alert-heading p {
margin: 0;
}
.map-zone-alert-heading h3 {
margin-top: 2px;
}
.map-zone-alert-heading p {
margin-top: 5px;
color: var(--tkrvue-muted);
}
.map-zone-alert-kicker {
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-xs);
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.map-zone-alert-new {
flex: 0 0 auto;
}
.map-zone-alert-new.is-current {
border-color: color-mix(in srgb, var(--tkrvue-accent) 55%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
opacity: 1;
}
.map-zone-alert-rule-picker {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 0;
}
.map-zone-alert-rule-picker label,
.map-zone-alert-name,
.map-zone-alert-stability label {
display: flex;
min-width: 0;
flex-direction: column;
gap: 6px;
color: var(--tkrvue-muted);
}
.map-zone-alert-rule-picker label {
width: min(520px, 100%);
}
.map-zone-alert-rule-picker select,
.map-zone-alert-name input,
.map-zone-alert-stability input {
width: 100%;
box-sizing: border-box;
}
.map-zone-alert-readonly {
padding: 6px 10px;
border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--tkrvue-border));
border-radius: 999px;
background: color-mix(in srgb, #7c3aed 8%, transparent);
color: #7c3aed;
font-size: var(--tkrvue-font-size-xs);
font-weight: 750;
}
.map-zone-alert-form {
display: grid;
grid-template-columns: minmax(320px, .86fr) minmax(440px, 1.14fr);
gap: 13px;
padding: 14px 16px 16px;
}
.map-zone-alert-name,
.map-zone-alert-switches,
.map-zone-alert-actions {
grid-column: 1 / -1;
}
.map-zone-alert-mode {
grid-column: 1 / -1;
width: fit-content;
padding: 5px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 800;
}
.map-zone-alert-mode.is-new {
border-color: color-mix(in srgb, var(--tkrvue-accent) 45%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.map-zone-alert-switches {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.map-zone-alert-switches label,
.map-zone-alert-all {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-text);
font-weight: 700;
}
.map-zone-alert-stability {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
align-content: start;
padding: 13px;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: color-mix(in srgb, var(--tkrvue-accent) 3%, transparent);
}
.map-zone-alert-stability p {
grid-column: 1 / -1;
margin: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.map-zone-alert-stability .input-with-unit {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
}
.map-zone-alert-stability .input-with-unit input {
min-width: 0;
border-radius: 8px 0 0 8px;
}
.map-zone-alert-stability .input-with-unit em {
display: flex;
align-items: center;
padding: 0 10px;
border: 1px solid var(--tkrvue-border);
border-left: 0;
border-radius: 0 8px 8px 0;
background: color-mix(in srgb, var(--tkrvue-border) 35%, transparent);
color: var(--tkrvue-muted);
font-style: normal;
}
.map-zone-alert-schedule-body {
display: grid;
gap: 12px;
padding: 12px;
}
.map-zone-alert-event-time {
grid-column: 1 / -1;
}
.map-zone-alert-event-time-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 12px;
}
.map-zone-alert-event-time-body label {
display: grid;
min-width: 0;
gap: 5px;
color: var(--tkrvue-muted);
}
.map-zone-alert-event-time-body select {
width: 100%;
min-width: 0;
}
.map-zone-alert-event-time-body p {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 5px 12px;
margin: 0;
color: var(--tkrvue-muted);
}
.map-zone-alert-event-time-body p strong {
color: var(--tkrvue-text);
}
.map-zone-alert-event-time-body p small {
color: var(--tkrvue-muted);
}
.map-zone-alert-days {
display: grid;
grid-template-columns: repeat(7, minmax(42px, 1fr));
gap: 6px;
}
.map-zone-alert-days label {
position: relative;
min-width: 0;
}
.map-zone-alert-days input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.map-zone-alert-days span {
display: grid;
min-height: 34px;
place-items: center;
padding: 4px 5px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
cursor: pointer;
font-size: var(--tkrvue-font-size-xs);
font-weight: 750;
}
.map-zone-alert-days input:checked + span {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.map-zone-alert-days input:focus-visible + span {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 45%, transparent);
outline-offset: 2px;
}
.map-zone-alert-hours {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 10px;
}
.map-zone-alert-hours label,
.map-zone-alert-template-language-field,
.map-zone-alert-template-event label {
display: grid;
min-width: 0;
gap: 5px;
color: var(--tkrvue-muted);
}
.map-zone-alert-hours input,
.map-zone-alert-template-event input,
.map-zone-alert-template-event textarea {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.map-zone-alert-hours > small {
grid-column: 1 / -1;
color: var(--tkrvue-muted);
line-height: 1.35;
}
.map-zone-alert-recipient-tools {
display: inline-flex;
min-width: 0;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 7px;
}
.map-zone-alert-contacts-link {
display: inline-flex;
width: fit-content;
max-width: 100%;
align-items: center;
gap: 5px;
padding: 5px 8px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 35%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
cursor: pointer;
white-space: nowrap;
}
.map-zone-alert-contacts-link svg {
width: 15px;
height: 15px;
}
.map-zone-alert-subcard.map-zone-alert-templates {
grid-column: 1 / -1;
overflow: visible;
}
.map-zone-alert-template-toolbar {
display: flex;
min-width: 0;
align-items: end;
justify-content: space-between;
flex-wrap: wrap;
gap: 9px;
padding: 11px 12px;
border-bottom: 1px solid var(--tkrvue-border);
}
.map-zone-alert-template-language-field {
width: min(320px, 100%);
}
.map-zone-alert-template-language-picker {
width: 100%;
min-width: 0;
}
.map-zone-alert-template-language-picker .menu-language-button {
height: 34px;
}
.map-zone-alert-template-toolbar .map-zone-alert-template-language-picker .menu-language-button,
.map-zone-alert-template-toolbar .map-zone-alert-template-language-picker .menu-language-option {
width: 100%;
max-width: none;
}
.map-zone-alert-template-toolbar button,
.map-zone-alert-actions button {
width: fit-content;
max-width: 100%;
flex: 0 1 auto;
}
.map-zone-alert-template-variables {
margin: 0;
padding: 9px 12px 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.4;
overflow-wrap: anywhere;
}
.map-zone-alert-sender {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
border-bottom: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.map-zone-alert-sender > span {
min-width: 0;
overflow-wrap: anywhere;
}
.map-zone-alert-sender strong {
color: var(--tkrvue-text);
}
.map-zone-alert-sender small {
white-space: nowrap;
}
.map-zone-alert-sender button {
width: fit-content;
max-width: 100%;
flex: 0 1 auto;
}
.map-zone-alert-template-language {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 12px;
}
.map-zone-alert-template-language.hidden {
display: none;
}
.map-zone-alert-template-event {
min-width: 0;
display: grid;
align-content: start;
gap: 9px;
padding: 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 3%, transparent);
}
.map-zone-alert-template-event h4 {
margin: 0;
color: var(--tkrvue-text);
}
.map-zone-alert-template-event textarea {
resize: vertical;
}
.map-zone-alert-template-event [data-zone-alert-sms-counter],
.mailsettings-sms-field [data-mail-template-sms-counter] {
justify-self: end;
color: var(--tkrvue-muted);
font-variant-numeric: tabular-nums;
}
.map-zone-alert-template-event [data-zone-alert-sms-counter].is-over,
.mailsettings-sms-field [data-mail-template-sms-counter].is-over {
color: #b91c1c;
font-weight: 800;
}
.map-zone-alert-subcard {
min-width: 0;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
container-name: zone-alert-card;
container-type: inline-size;
}
.map-zone-alert-recipients-card {
display: flex;
min-height: 0;
flex-direction: column;
}
.map-zone-alert-recipients-card .map-zone-alert-recipients {
min-height: 0;
max-height: none;
flex: 1 1 270px;
}
.map-zone-alert-subcard > header,
.map-zone-alert-history > header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 11px 12px;
border-bottom: 1px solid var(--tkrvue-border);
}
.map-zone-alert-subcard > header small,
.map-zone-alert-history > header small {
color: var(--tkrvue-muted);
text-align: right;
}
.map-zone-alert-all {
margin: 10px 10px 5px;
}
.map-zone-alert-all-hint {
display: block;
margin: 0 10px 5px;
color: var(--tkrvue-muted);
line-height: 1.35;
}
.map-zone-alert-assets-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 10px;
}
.map-zone-alert-assets-toolbar > small {
flex: 0 0 auto;
color: var(--tkrvue-muted);
font-variant-numeric: tabular-nums;
}
.map-zone-alert-assets-filter {
flex: 0 0 auto;
min-width: 140px;
min-height: 34px;
padding: 0 28px 0 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
}
.map-zone-alert-assets-search {
min-width: 0;
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 7px;
padding: 7px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
}
.map-zone-alert-assets-search > span,
.map-zone-alert-assets-search svg {
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.map-zone-alert-assets-search svg {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-zone-alert-assets-search input {
min-width: 0;
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--tkrvue-input-text);
font: inherit;
}
.map-zone-alert-choices,
.map-zone-alert-recipients {
max-height: 270px;
padding: 5px 10px 10px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
scrollbar-width: thin;
}
.map-zone-alert-assets-empty {
padding: 8px 12px 12px;
}
.map-zone-alert-assets-empty[hidden] {
display: none;
}
.map-zone-alert-choice {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 8px 4px;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-border) 65%, transparent);
}
.map-zone-alert-choice[hidden] {
display: none;
}
.map-zone-alert-choice > span:not(.map-zone-alert-asset-icon),
.map-zone-alert-recipient-copy {
min-width: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 2px;
}
.map-zone-alert-asset-icon {
display: inline-grid;
flex: 0 0 32px;
width: 32px;
height: 32px;
place-items: center;
margin-top: -2px;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.map-zone-alert-asset-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-zone-alert-choice small,
.map-zone-alert-recipient-copy small {
color: var(--tkrvue-muted);
}
.map-zone-alert-recipient-meta {
display: flex;
min-width: 0;
align-items: center;
flex-wrap: wrap;
gap: 4px 6px;
}
.map-zone-alert-user-role.user-role-badge {
--map-zone-alert-role-color: #2563eb;
width: fit-content;
max-width: 100%;
padding: 2px 6px;
color: var(--map-zone-alert-role-color);
cursor: default;
font-size: 10px;
}
.map-zone-alert-user-role.user-role-editor {
--map-zone-alert-role-color: #b45309;
}
.map-zone-alert-user-role.user-role-admin {
--map-zone-alert-role-color: #047857;
}
.map-zone-alert-user-role.user-role-superadmin {
--map-zone-alert-role-color: #065f46;
}
.map-zone-alert-user-role.user-role-superadmin-premium {
--map-zone-alert-role-color: #6d28d9;
}
.map-zone-alert-user-role-dot {
width: 7px;
min-width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
}
.map-zone-alert-recipient {
display: grid;
grid-template-columns: minmax(145px, 1fr) auto auto auto minmax(145px, auto);
align-items: center;
gap: 8px;
padding: 8px 4px;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-border) 65%, transparent);
}
.map-zone-alert-recipient.is-focus-target {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 72%, transparent);
outline-offset: 2px;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-layer-surface-bg));
}
.map-zone-alert-recipient.is-expired {
margin: 3px 0;
padding-inline: 7px;
border: 1px solid color-mix(in srgb, var(--tkrvue-danger) 48%, var(--tkrvue-border));
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-danger) 9%, var(--tkrvue-layer-surface-bg));
}
.map-zone-alert-channel {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
white-space: nowrap;
}
.map-zone-alert-channel.is-unavailable {
opacity: .48;
}
.map-zone-alert-channel.is-unconfirmed span {
font-style: italic;
}
.map-zone-alert-channel.is-critical {
border-color: color-mix(in srgb, var(--tkrvue-danger) 60%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-danger) 12%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-danger);
opacity: 1;
}
.map-zone-alert-expiry {
display: grid;
min-width: 145px;
gap: 4px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.map-zone-alert-expiry input {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.map-zone-alert-expiry.is-critical,
.map-zone-alert-expiry.is-critical small {
color: var(--tkrvue-danger);
font-weight: 750;
}
.map-zone-alert-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.map-zone-alert-history {
border-top: 1px solid var(--tkrvue-border);
}
/* Le formulaire principal peut rester large alors que la carte des
destinataires occupe seulement une colonne. Son contenu suit donc sa
propre largeur, et non celle du viewport ou de la layer complète. */
@container zone-alert-card (max-width: 720px) {
.map-zone-alert-subcard > header {
align-items: stretch;
flex-direction: column;
}
.map-zone-alert-subcard > header small {
text-align: left;
}
.map-zone-alert-recipient-tools {
align-items: flex-start;
justify-content: flex-start;
}
.map-zone-alert-assets-toolbar {
align-items: stretch;
flex-wrap: wrap;
}
.map-zone-alert-assets-search {
flex: 1 1 260px;
}
.map-zone-alert-assets-filter {
flex: 1 1 160px;
}
.map-zone-alert-subcard .map-zone-alert-recipient {
grid-template-columns: repeat(3, minmax(0, auto));
justify-content: start;
}
.map-zone-alert-recipient-copy,
.map-zone-alert-expiry {
grid-column: 1 / -1;
width: min(300px, 100%);
}
}
@container zone-alert-card (max-width: 430px) {
.map-zone-alert-subcard .map-zone-alert-recipient {
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
}
.map-zone-alert-recipient-copy,
.map-zone-alert-channel,
.map-zone-alert-expiry {
grid-column: 1;
width: 100%;
box-sizing: border-box;
}
}
.map-zone-alert-events {
max-height: 280px;
overflow: auto;
}
.map-zone-alert-event {
display: grid;
grid-template-columns: 34px minmax(150px, 1fr) minmax(220px, auto);
align-items: center;
gap: 10px;
padding: 10px 13px;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-border) 65%, transparent);
}
.map-zone-alert-event-icon {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 9px;
background: #dcfce7;
color: #15803d;
font-size: 18px;
font-weight: 850;
}
.map-zone-alert-event-icon.is-exit {
background: #ffedd5;
color: #c2410c;
}
.map-zone-alert-event-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.map-zone-alert-event-copy small,
.map-zone-alert-delivery-empty,
.map-zone-alert-muted {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.map-zone-alert-deliveries {
min-width: 220px;
display: grid;
justify-items: stretch;
gap: 5px;
}
.map-zone-alert-delivery-item {
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.map-zone-alert-delivery-item > summary {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) 15px;
align-items: center;
gap: 7px;
padding: 6px 8px;
cursor: pointer;
list-style: none;
}
span.map-zone-alert-delivery-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 8px;
}
.map-zone-alert-delivery-item > summary::-webkit-details-marker {
display: none;
}
.map-zone-alert-delivery-channel {
font-weight: 800;
color: var(--tkrvue-text);
}
.map-zone-alert-delivery-status {
min-width: 0;
overflow-wrap: anywhere;
text-align: right;
}
.map-zone-alert-delivery-chevron {
display: inline-grid;
place-items: center;
font-size: 16px;
font-weight: 800;
transition: transform 140ms ease;
}
.map-zone-alert-delivery-item[open] .map-zone-alert-delivery-chevron {
transform: rotate(90deg);
}
.map-zone-alert-delivery-item.is-success {
border-color: color-mix(in srgb, #15803d 34%, var(--tkrvue-border));
background: color-mix(in srgb, #dcfce7 48%, var(--tkrvue-layer-surface-bg));
}
.map-zone-alert-delivery-item.is-success .map-zone-alert-delivery-status {
color: #15803d;
}
.map-zone-alert-delivery-item.is-error {
border-color: color-mix(in srgb, #b91c1c 38%, var(--tkrvue-border));
background: color-mix(in srgb, #fee2e2 48%, var(--tkrvue-layer-surface-bg));
}
.map-zone-alert-delivery-item.is-error .map-zone-alert-delivery-status {
color: #b91c1c;
font-weight: 750;
}
.map-zone-alert-delivery-item.is-pending {
border-color: color-mix(in srgb, #b45309 35%, var(--tkrvue-border));
background: color-mix(in srgb, #fef3c7 42%, var(--tkrvue-layer-surface-bg));
}
.map-zone-alert-delivery-item.is-pending .map-zone-alert-delivery-status {
color: #92400e;
}
.map-zone-alert-delivery-item.is-ignored {
opacity: .76;
}
.map-zone-alert-delivery-details {
min-width: 0;
display: grid;
gap: 4px;
padding: 7px 8px 8px;
border-top: 1px solid color-mix(in srgb, var(--tkrvue-border) 65%, transparent);
overflow-wrap: anywhere;
}
.map-zone-alert-delivery-details span {
min-width: 0;
}
.map-zone-alert-delivery-details code {
color: inherit;
font-size: .95em;
overflow-wrap: anywhere;
}
html[data-theme="dark"] .map-zone-alert-delivery-item.is-success {
background: color-mix(in srgb, #15803d 18%, var(--tkrvue-layer-surface-bg));
}
html[data-theme="dark"] .map-zone-alert-delivery-item.is-error {
background: color-mix(in srgb, #b91c1c 18%, var(--tkrvue-layer-surface-bg));
}
html[data-theme="dark"] .map-zone-alert-delivery-item.is-pending {
background: color-mix(in srgb, #b45309 18%, var(--tkrvue-layer-surface-bg));
}
.map-zone-alert-muted {
display: block;
padding: 14px;
text-align: center;
}
.map-zone-alert-empty {
min-height: 110px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 7px;
padding: 18px;
color: var(--tkrvue-muted);
text-align: center;
}
.map-zone-alert-empty svg {
width: 25px;
height: 25px;
color: var(--tkrvue-accent);
}
.map-zone-alert-empty.is-error {
color: #b91c1c;
}
.map-zone-alert-empty .tkrvue-spinner {
width: 22px;
height: 22px;
border: 3px solid color-mix(in srgb, var(--tkrvue-accent) 24%, transparent);
border-top-color: var(--tkrvue-accent);
border-radius: 50%;
animation: tkrvue-zone-alert-spin .8s linear infinite;
}
@keyframes tkrvue-zone-alert-spin {
to { transform: rotate(360deg); }
}
.map-zone-editor-card,
.map-zone-list-card {
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 14px;
background: var(--tkrvue-layer-surface-bg);
}
.map-zone-editor-card {
display: flex;
flex-direction: column;
gap: 15px;
padding: 16px;
}
.map-zone-editor-heading h3 {
margin: 0;
}
.map-zone-name-field {
display: flex;
flex-direction: column;
gap: 6px;
color: var(--tkrvue-muted);
}
.map-zone-name-field input {
width: 100%;
box-sizing: border-box;
}
.map-zone-color-field {
display: flex;
flex-direction: column;
gap: 7px;
color: var(--tkrvue-muted);
}
.map-zone-color-control {
display: grid;
grid-template-columns: 46px auto minmax(0, 1fr);
align-items: center;
gap: 10px;
}
.map-zone-color-control input[type="color"] {
width: 46px;
height: 34px;
padding: 3px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-input-bg);
cursor: pointer;
}
.map-zone-color-control input[type="color"]:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.map-zone-color-control output {
color: var(--tkrvue-text);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: var(--tkrvue-font-size-sm);
font-weight: 750;
}
.map-zone-color-control small {
min-width: 0;
color: var(--tkrvue-muted);
}
.map-zone-global-field {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, #7c3aed 30%, var(--tkrvue-border));
border-radius: 11px;
background: color-mix(in srgb, #7c3aed 7%, var(--tkrvue-layer-surface-bg));
}
.map-zone-global-field input {
margin-top: 3px;
}
.map-zone-global-field > span {
display: flex;
flex-direction: column;
gap: 3px;
}
.map-zone-global-field small {
color: var(--tkrvue-muted);
}
.map-zone-transfer-card {
min-width: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--tkrvue-border));
border-radius: 11px;
background: color-mix(in srgb, #7c3aed 5%, var(--tkrvue-layer-surface-bg));
}
.map-zone-transfer-card > summary {
display: flex;
min-width: 0;
align-items: center;
gap: 8px;
padding: 11px 12px;
color: var(--tkrvue-text);
cursor: pointer;
font-weight: 800;
list-style: none;
}
.map-zone-transfer-card > summary::-webkit-details-marker {
display: none;
}
.map-zone-transfer-card > summary::after {
content: "›";
flex: 0 0 auto;
color: #7c3aed;
font-size: 20px;
line-height: 1;
transform: rotate(0deg);
transition: transform .16s ease;
}
.map-zone-transfer-card[open] > summary::after {
transform: rotate(90deg);
}
.map-zone-transfer-card > summary > span:first-child {
min-width: 0;
overflow-wrap: anywhere;
}
.map-zone-transfer-premium-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 4px;
margin-left: auto;
}
.map-zone-transfer-content {
display: grid;
min-width: 0;
gap: 10px;
padding: 0 12px 12px;
border-top: 1px solid color-mix(in srgb, #7c3aed 18%, var(--tkrvue-border));
}
.map-zone-transfer-description,
.map-zone-transfer-scope-hint,
.map-zone-transfer-warning {
margin: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.4;
}
.map-zone-transfer-description {
padding-top: 10px;
}
.map-zone-transfer-grid {
display: grid;
min-width: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.map-zone-transfer-grid label,
.map-zone-transfer-owner > label {
display: grid;
min-width: 0;
gap: 5px;
color: var(--tkrvue-muted);
}
.map-zone-transfer-grid select,
.map-zone-transfer-owner input {
width: 100%;
}
.map-zone-transfer-owner {
display: grid;
min-width: 0;
gap: 8px;
padding: 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
}
.map-zone-transfer-owner-search {
position: relative;
display: block;
min-width: 0;
}
.map-zone-transfer-owner-search > svg {
position: absolute;
top: 50%;
left: 10px;
z-index: 1;
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
transform: translateY(-50%);
pointer-events: none;
}
.map-zone-transfer-owner-search input {
padding-left: 35px;
}
.map-zone-transfer-owner-selected {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.map-zone-transfer-owner-selected span {
min-width: 0;
overflow-wrap: anywhere;
color: var(--tkrvue-text);
font-weight: 750;
}
.map-zone-transfer-owner-selected button {
width: 27px;
min-width: 27px;
height: 27px;
border: 1px solid #fecaca;
border-radius: 7px;
background: #fee2e2;
color: #dc2626;
cursor: pointer;
font-size: 17px;
}
.map-zone-transfer-owner-results {
max-height: 160px;
}
.map-zone-transfer-warning {
padding: 8px 10px;
border: 1px solid color-mix(in srgb, #d97706 30%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, #f59e0b 8%, var(--tkrvue-layer-surface-bg));
color: color-mix(in srgb, #92400e 78%, var(--tkrvue-text));
}
:root[data-theme="dark"] .map-zone-transfer-warning {
color: #fcd34d;
}
.map-zone-transfer-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.map-zone-transfer-actions button {
width: auto;
max-width: 100%;
}
.map-zone-editor-status {
min-height: 20px;
margin: 0;
color: var(--tkrvue-muted);
}
.map-zone-editor-status.is-ready {
color: #0f766e;
}
.map-zone-editor-status.is-readonly {
color: #7c3aed;
}
.map-zone-editor-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.map-zone-list-card > header {
padding: 13px 14px;
border-bottom: 1px solid var(--tkrvue-border);
font-weight: 800;
}
.map-zone-list {
display: flex;
max-height: 440px;
flex-direction: column;
gap: 5px;
padding: 8px;
overflow-y: auto;
}
.map-zone-list-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
align-items: center;
gap: 5px;
border: 1px solid transparent;
border-radius: 10px;
}
.map-zone-list-row:hover,
.map-zone-list-row:focus-within,
.map-zone-list-row.is-active {
border-color: color-mix(in srgb, var(--tkrvue-accent) 45%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 8%, transparent);
}
.map-zone-list-item {
width: 100%;
display: grid;
grid-template-columns: 12px minmax(0, 1fr) 20px;
align-items: center;
gap: 10px;
padding: 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--tkrvue-text);
text-align: left;
cursor: pointer;
}
.map-zone-list-item:hover,
.map-zone-list-item:focus-visible,
.map-zone-list-item.is-active {
background: transparent;
outline: 0;
}
.map-zone-alert-button {
position: relative;
display: inline-grid;
place-items: center;
width: 36px;
min-width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-muted) 7%, var(--tkrvue-layer-surface-bg));
color: color-mix(in srgb, var(--tkrvue-muted) 78%, var(--tkrvue-text));
cursor: pointer;
}
.map-zone-alert-button:hover,
.map-zone-alert-button:focus-visible {
border-color: color-mix(in srgb, var(--tkrvue-accent) 55%, var(--tkrvue-border));
color: var(--tkrvue-accent);
outline: 0;
}
.map-zone-alert-button.is-active {
border-color: color-mix(in srgb, var(--tkrvue-accent) 65%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.map-zone-alert-button svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-zone-alert-badge {
position: absolute;
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
border: 2px solid var(--tkrvue-layer-surface-bg);
border-radius: 999px;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1;
box-sizing: border-box;
}
.map-zone-alert-badge.is-recipient-count {
top: -6px;
right: -6px;
background: #dc2626;
}
.map-zone-alert-badge.is-alert-count {
bottom: -6px;
left: -6px;
background: #7c3aed;
}
.map-zone-list-swatch {
width: 10px;
height: 28px;
border-radius: 999px;
background: var(--map-zone-color, #0f766e);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.16);
}
.map-zone-list-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.map-zone-list-copy strong,
.map-zone-list-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.map-zone-list-copy small {
color: var(--tkrvue-muted);
}
.map-zone-list-locate,
.map-zone-list-locate svg {
width: 18px;
height: 18px;
color: var(--tkrvue-accent);
}
.map-zone-list-empty {
padding: 28px 12px;
color: var(--tkrvue-muted);
text-align: center;
}
.leaflet-tooltip.map-zone-leaflet-tooltip {
padding: 0;
border: 0;
border-radius: 11px;
background: transparent;
box-shadow: none;
}
.leaflet-tooltip.map-zone-leaflet-tooltip::before {
border-top-color: var(--tkrvue-map-tooltip-bg);
}
.map-zone-tooltip {
min-width: 110px;
display: flex;
flex-direction: column;
gap: 1px;
padding: 6px 8px;
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 8px;
background: var(--tkrvue-map-tooltip-bg);
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.16;
}
.map-zone-tooltip span {
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
}
#map .leaflet-editing-icon,
#map .leaflet-marker-icon.leaflet-editing-icon {
width: 8px !important;
height: 8px !important;
margin-top: -4px !important;
margin-left: -4px !important;
box-sizing: border-box !important;
border: 1px solid rgba(255, 255, 255, 0.96) !important;
border-radius: 50% !important;
background: var(--map-zone-edit-color, #dc2626) !important;
box-shadow: 0 0 0 1px var(--map-zone-edit-color, #dc2626), 0 1px 3px rgba(15, 23, 42, 0.28);
opacity: 1 !important;
}
#map .leaflet-draw-guide-dash {
background-color: #dc2626 !important;
opacity: 1 !important;
}
@media (max-width: 900px) {
.map-zone-layout {
grid-template-columns: 1fr;
}
.map-zone-list {
max-height: 300px;
}
.map-zone-alert-form {
grid-template-columns: 1fr;
}
.map-zone-alert-stability,
.map-zone-alert-subcard {
grid-column: 1;
}
.map-zone-alert-template-language {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
#map .leaflet-top.leaflet-right.tkrvue-map-actions-dock {
top: 112px;
flex-direction: row-reverse;
}
#map .leaflet-top.leaflet-right.tkrvue-map-actions-dock .map-saved-views-panel {
top: 44px;
left: 0;
}
.map-saved-views-panel {
width: min(292px, calc(100vw - 34px));
}
.map-center-card-heading,
.map-center-save-form {
align-items: stretch;
flex-direction: column;
}
.map-center-coordinates {
grid-template-columns: 1fr;
}
.saved-map-view-row {
grid-template-columns: 1fr;
}
.saved-map-view-actions {
justify-content: flex-end;
}
.map-zone-toolbar-label {
flex-basis: 100%;
}
.map-zone-alert-heading,
.map-zone-alert-rule-picker {
align-items: stretch;
flex-direction: column;
}
.map-zone-alert-stability {
grid-template-columns: 1fr;
}
.map-zone-alert-assets-toolbar {
align-items: stretch;
flex-wrap: wrap;
}
.map-zone-alert-assets-search {
flex-basis: 100%;
}
.map-zone-alert-assets-filter {
flex: 1 1 auto;
}
.map-zone-alert-stability p {
grid-column: 1;
}
.map-zone-alert-days {
grid-template-columns: repeat(4, minmax(42px, 1fr));
}
.map-zone-alert-hours,
.map-zone-alert-template-language {
grid-template-columns: 1fr;
}
.map-zone-alert-hours > small {
grid-column: 1;
}
.map-zone-alert-recipient {
grid-template-columns: repeat(2, auto);
justify-content: start;
}
.map-zone-alert-recipient-copy {
grid-column: 1 / -1;
width: 100%;
}
.map-zone-alert-expiry {
grid-column: 1 / -1;
width: min(260px, 100%);
}
.map-zone-alert-event {
grid-template-columns: 34px minmax(0, 1fr);
align-items: start;
}
.map-zone-alert-deliveries {
grid-column: 1 / -1;
min-width: 0;
width: 100%;
}
.map-zone-color-control {
grid-template-columns: 46px auto;
}
.map-zone-color-control small {
grid-column: 1 / -1;
}
}
@media (max-height: 620px) {
#map .leaflet-top.leaflet-right.tkrvue-map-actions-dock {
top: 112px;
flex-direction: row-reverse;
}
#map .leaflet-top.leaflet-right.tkrvue-map-actions-dock .map-saved-views-panel {
top: 44px;
left: 0;
}
}
/* Les layers sont redimensionnables indépendamment du viewport : les replis
doivent donc suivre la largeur réellement disponible dans le panneau. */
.view-body {
container-type: inline-size;
}
.view-body > *,
.view-body .layer-tab-panel > *,
.view-body .organization-resource-layout > *,
.view-body .organization-form-grid > *,
.view-body .map-zone-layout > *,
.view-body .map-zone-alert-form > * {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.view-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* Les données non modifiables restent immédiatement reconnaissables dans
toutes les layers, en modes clair et sombre. */
.view-layer .view-body :where(
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
select,
textarea
):is([readonly], :disabled) {
border-color: var(--tkrvue-readonly-border) !important;
background: var(--tkrvue-readonly-bg) !important;
color: var(--tkrvue-readonly-text) !important;
opacity: 1;
cursor: not-allowed;
}
.view-body :where(form, fieldset) {
min-inline-size: 0;
max-inline-size: 100%;
box-sizing: border-box;
}
@container (max-width: 820px) {
.organization-resource-layout,
.map-zone-layout,
.map-zone-alert-form,
.mailsettings-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.mailsettings-template-row {
grid-template-columns: minmax(0, 1fr) auto !important;
}
.map-zone-alert-stability,
.map-zone-alert-subcard,
.map-zone-alert-templates {
grid-column: 1;
}
.map-zone-alert-template-language {
grid-template-columns: minmax(0, 1fr);
}
.organization-resource-list {
max-height: min(300px, 34vh);
}
}
@container (max-width: 620px) {
.organization-form-grid,
.organization-address-autocomplete,
.organization-coordinates-row,
.map-zone-transfer-grid,
.map-zone-alert-stability,
.map-zone-alert-hours,
.map-zone-alert-event-time-body {
grid-template-columns: minmax(0, 1fr) !important;
}
.map-zone-alert-event-time-body p {
grid-column: 1;
}
.organization-form-grid label,
.organization-form-grid label.span-2 {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.organization-address-autocomplete {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.organization-address-label,
.organization-address-autocomplete-help {
grid-column: 1;
}
.map-zone-alert-stability p,
.map-zone-alert-hours > small {
grid-column: 1;
}
.map-zone-alert-days {
grid-template-columns: repeat(4, minmax(42px, 1fr));
}
.map-zone-alert-heading,
.map-zone-alert-rule-picker,
.map-zone-alert-template-toolbar,
.map-zone-alert-sender,
.organization-resource-head {
align-items: stretch;
flex-direction: column;
}
.map-zone-alert-assets-toolbar {
align-items: stretch;
flex-wrap: wrap;
}
.map-zone-alert-assets-search {
flex-basis: 100%;
}
.map-zone-alert-assets-filter {
flex: 1 1 auto;
}
.organization-resource-actions,
.map-zone-alert-actions {
flex-wrap: wrap;
}
.map-zone-alert-recipient {
grid-template-columns: repeat(2, auto);
justify-content: start;
}
.map-zone-alert-event {
grid-template-columns: 34px minmax(0, 1fr);
align-items: start;
}
.map-zone-alert-deliveries {
grid-column: 1 / -1;
min-width: 0;
width: 100%;
}
.map-zone-alert-recipient-copy {
grid-column: 1 / -1;
width: 100%;
}
.map-zone-alert-expiry {
grid-column: 1 / -1;
width: min(260px, 100%);
}
.map-zone-transfer-card > summary {
flex-wrap: wrap;
}
.map-zone-transfer-premium-badge {
margin-left: 0;
}
.map-zone-transfer-card > summary::after {
margin-left: auto;
}
.map-zone-transfer-actions {
justify-content: flex-start;
}
}
/* Filtre principal de périmètre et de période */
#contextSelector {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 0;
max-width: min(44vw, 720px);
padding: 7px 11px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 24%, var(--tkrvue-border));
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-input-bg) 88%, var(--tkrvue-accent) 12%);
color: var(--tkrvue-header-text);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
line-height: 1.2;
}
#contextSelector:hover,
#contextSelector:focus-visible,
#contextSelector[aria-expanded="true"] {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-input-bg) 78%, var(--tkrvue-accent) 22%);
outline: none;
}
#primaryScopeLabel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.primary-scope-trigger-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tkrvue-accent);
}
.primary-scope-trigger-caret {
color: var(--tkrvue-muted);
font-size: 11px;
}
#userSelectorBox {
top: 56px;
width: min(1180px, calc(100vw - 28px));
}
.selector-content.primary-scope-panel {
width: 100%;
max-height: min(680px, calc(100vh - 72px));
overflow: hidden;
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
}
.primary-scope-panel .selector-header {
flex: 0 0 auto;
padding: 12px 14px;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 88%, var(--tkrvue-accent) 12%);
border-color: var(--tkrvue-border);
font-size: var(--tkrvue-font-size-lg);
font-weight: 800;
}
.primary-scope-panel .selector-close {
flex: 0 0 auto;
}
#primaryScopeContent {
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.primary-scope-scroll {
min-height: 0;
overflow: auto;
display: grid;
grid-template-columns: minmax(250px, 1fr) minmax(360px, 1.35fr) minmax(210px, 0.8fr);
align-items: stretch;
gap: 12px;
padding: 12px;
}
.primary-scope-organizations,
.primary-scope-equipment {
align-self: stretch;
}
.primary-scope-period {
align-self: start;
background: var(--tkrvue-topbar-panel-bg);
}
.primary-scope-scroll.is-single-organization .primary-scope-equipment {
align-self: start;
}
.primary-scope-scroll.is-single-organization {
grid-template-columns: minmax(360px, 1.7fr) minmax(210px, 0.8fr);
}
.primary-scope-section {
min-width: 0;
padding: 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg);
}
.primary-scope-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 9px;
}
.primary-scope-section-title > span {
min-width: 24px;
padding: 2px 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-input-bg));
color: var(--tkrvue-active-text);
text-align: center;
font-size: var(--tkrvue-font-size-xs);
font-weight: 800;
}
.primary-scope-all-row,
.primary-scope-result-row {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
box-sizing: border-box;
padding: 8px 10px;
border: 1px solid transparent;
border-radius: 10px;
cursor: pointer;
}
.primary-scope-all-row {
margin-bottom: 7px;
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-input-bg));
font-weight: 400;
}
.primary-scope-all-row input,
.primary-scope-result-row input {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--tkrvue-accent);
}
.primary-scope-options,
.primary-scope-entities {
display: grid;
align-content: start;
gap: 6px;
max-height: 270px;
min-height: var(--primary-scope-entity-list-min-height, 0px);
padding: 1px;
overflow: auto;
}
.primary-scope-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
column-gap: 14px;
row-gap: 8px;
margin-top: 8px;
padding: 2px 1px;
}
.primary-scope-page-actions,
.analysis-pagination-actions {
display: inline-flex;
align-items: center;
gap: 5px;
}
.primary-scope-page-button {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 32px;
padding: 5px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
font: inherit;
cursor: pointer;
}
.primary-scope-page-button:hover:not(:disabled),
.primary-scope-page-button:focus-visible:not(:disabled) {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
}
.primary-scope-page-button:disabled {
opacity: .45;
cursor: not-allowed;
}
.primary-scope-page-button svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Keep the four navigation boxes identical while making the single chevron
optically match the compact first/last-page glyphs. */
.primary-scope-pagination .primary-scope-page-button.tkrvue-icon-button {
width: 36px !important;
min-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1 !important;
letter-spacing: -0.04em;
}
.primary-scope-pagination .primary-scope-page-button.tkrvue-icon-button svg,
.primary-scope-pagination .primary-scope-page-button-single svg {
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
stroke-width: 1.9 !important;
}
.primary-scope-pagination .primary-scope-page-form input[data-primary-scope-page-input] {
text-align: right !important;
padding-right: 8px !important;
}
.primary-scope-page-label {
min-width: 58px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
text-align: center;
}
.primary-scope-entity-row.is-agent .primary-scope-entity-glyph {
background: var(--tkrvue-device-computer-bg);
color: var(--tkrvue-device-computer-text);
}
.primary-scope-entity-selection-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 7px;
padding: 7px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-section-bg, var(--tkrvue-input-bg));
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.primary-scope-entity-selection-toolbar strong {
color: var(--tkrvue-layer-text);
font-weight: 700;
font-size: var(--tkrvue-font-size-lg);
}
.primary-scope-entity-selection-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
.primary-scope-inline-action {
min-height: 26px;
padding: 3px 6px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--tkrvue-accent);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.primary-scope-inline-action:hover,
.primary-scope-inline-action:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 10%, transparent);
outline: none;
}
.primary-scope-type-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.primary-scope-type-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 30px;
padding: 4px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
font: inherit;
font-size: var(--tkrvue-font-size-xs);
cursor: pointer;
}
.primary-scope-type-chip span {
min-width: 18px;
padding: 1px 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-input-bg));
color: var(--tkrvue-muted);
font-weight: 800;
text-align: center;
}
.primary-scope-type-chip-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
min-width: 0;
padding: 0;
border-radius: 0;
background: transparent;
color: inherit;
flex: 0 0 14px;
}
.primary-scope-type-chip-check svg {
width: 14px;
height: 14px;
}
.primary-scope-type-chip:hover,
.primary-scope-type-chip:focus-visible,
.primary-scope-type-chip.is-active {
border-color: var(--tkrvue-selection-border);
background: var(--tkrvue-selection-bg);
color: var(--tkrvue-selection-text);
outline: none;
}
.primary-scope-type-chip.is-active span {
background: color-mix(in srgb, var(--tkrvue-selection-border) 16%, var(--tkrvue-selection-bg));
color: var(--tkrvue-selection-text);
}
.primary-scope-type-chip.is-selected {
border-color: var(--tkrvue-selection-border);
background: var(--tkrvue-selection-bg);
color: var(--tkrvue-selection-text);
box-shadow: inset 0 -2px 0 var(--tkrvue-selection-border);
}
.primary-scope-type-chip.is-selected span {
background: color-mix(in srgb, var(--tkrvue-selection-border) 16%, var(--tkrvue-selection-bg));
color: var(--tkrvue-selection-text);
}
.primary-scope-type-chip.is-partial {
border-color: var(--tkrvue-selection-border);
border-style: dashed;
background: var(--tkrvue-selection-bg);
color: var(--tkrvue-selection-text);
}
.primary-scope-entity-type-filter > select {
margin-top: 6px;
}
@media (max-width: 900px) {
.primary-scope-entity-selection-toolbar {
align-items: stretch;
flex-direction: column;
}
.primary-scope-entity-selection-actions {
justify-content: space-between;
}
.primary-scope-type-filters {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 2px;
}
.primary-scope-type-chip {
flex: 0 0 auto;
}
}
.primary-scope-result-row {
border-color: var(--tkrvue-border);
background: var(--tkrvue-topbar-panel-bg);
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.primary-scope-result-row:hover,
.primary-scope-result-row:focus-within {
border-color: color-mix(in srgb, var(--tkrvue-accent) 48%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-topbar-panel-bg));
box-shadow: 0 3px 10px color-mix(in srgb, var(--tkrvue-accent) 10%, transparent);
}
.primary-scope-result-row.is-selected {
border-color: var(--tkrvue-selection-border);
border-left: 4px solid var(--tkrvue-selection-border);
padding-left: 7px;
background: var(--tkrvue-selection-bg);
color: var(--tkrvue-selection-text);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tkrvue-selection-border) 35%, transparent);
}
.primary-scope-result-row.is-selected :is(
.primary-scope-organization-name,
.primary-scope-organization-copy strong,
.primary-scope-entity-copy strong
) {
color: var(--tkrvue-selection-text);
}
.primary-scope-result-row.is-selected :is(
.primary-scope-organization-copy small,
.primary-scope-entity-copy small
) {
color: color-mix(in srgb, var(--tkrvue-selection-text) 72%, transparent);
}
.primary-scope-organization-copy,
.primary-scope-entity-copy {
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.25;
}
.primary-scope-organization-copy strong,
.primary-scope-entity-copy strong {
overflow: hidden;
color: var(--tkrvue-layer-text);
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.primary-scope-organization-name {
overflow: hidden;
color: var(--tkrvue-layer-text);
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.primary-scope-organization-copy small,
.primary-scope-entity-copy small {
overflow: hidden;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
.primary-scope-search,
.primary-scope-entity-type-filter select,
.primary-scope-period-select,
.primary-scope-custom-period input {
width: 100%;
min-height: 38px;
box-sizing: border-box;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
font-size: var(--tkrvue-font-size-md);
font-weight: 400;
}
.primary-scope-search:focus,
.primary-scope-entity-type-filter select:focus,
.primary-scope-period-select:focus,
.primary-scope-custom-period input:focus,
.primary-scope-organization-filters select:focus {
border-color: var(--tkrvue-accent);
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 18%, transparent);
outline-offset: 1px;
}
.primary-scope-search {
margin-bottom: 7px;
}
.primary-scope-entity-type-filter {
display: grid;
gap: 5px;
margin-bottom: 7px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
}
.primary-scope-organization-filters {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-bottom: 7px;
}
.primary-scope-organization-filters label {
display: grid;
gap: 5px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
}
.primary-scope-organization-filters label.is-wide {
grid-column: 1 / -1;
}
.primary-scope-organization-filters select {
width: 100%;
min-height: 38px;
min-width: 0;
padding: 7px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
font-size: var(--tkrvue-font-size-md);
font-weight: 400;
}
.primary-scope-selection-summary {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
padding: 8px 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-section-bg));
}
.primary-scope-selection-summary > span:last-child {
min-width: 0;
display: flex;
flex-direction: column;
}
.primary-scope-selection-summary small,
.primary-scope-selection-summary strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.primary-scope-selection-summary small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.primary-scope-selection-summary-icon,
.primary-scope-organization-glyph,
.primary-scope-entity-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
.primary-scope-selection-summary-icon {
width: 26px;
height: 26px;
border-radius: 50%;
}
.primary-scope-organization-glyph,
.primary-scope-entity-glyph {
width: 30px;
min-width: 30px;
height: 30px;
border-radius: 9px;
}
.primary-scope-selection-summary-icon svg,
.primary-scope-organization-glyph svg,
.primary-scope-entity-glyph svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.primary-scope-limit-hint {
margin: 8px 1px 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.4;
}
.primary-scope-custom-period {
display: grid;
gap: 8px;
margin-top: 9px;
}
.primary-scope-custom-period label {
display: grid;
gap: 4px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
}
.primary-scope-custom-period .primary-scope-now-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 1px;
color: var(--tkrvue-text);
cursor: pointer;
}
.primary-scope-now-toggle input {
width: auto;
margin: 0;
}
.primary-scope-custom-period input:disabled {
opacity: .65;
cursor: not-allowed;
}
.primary-scope-period-hint {
margin: 10px 1px 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.45;
}
.primary-scope-empty {
padding: 18px 8px;
color: var(--tkrvue-muted);
text-align: center;
}
.primary-scope-error {
margin: 0 12px 8px;
padding: 8px 10px;
border: 1px solid var(--tkrvue-status-error-border);
border-radius: 8px;
background: var(--tkrvue-status-error-bg);
color: var(--tkrvue-status-error-text);
}
.primary-scope-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-bg);
}
.primary-scope-actions button {
padding: 8px 13px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
cursor: pointer;
font-weight: 800;
}
.primary-scope-page-actions .primary-scope-page-button {
flex: 0 0 auto;
width: 36px;
min-width: 36px;
height: 36px;
min-height: 36px;
padding: 0;
justify-content: center;
}
.primary-scope-page-actions .primary-scope-page-button {
font-size: var(--tkrvue-font-size-xs);
}
.primary-scope-page-actions .primary-scope-page-button svg {
width: 13px;
height: 13px;
}
.primary-scope-page-form input {
text-align: right;
padding-right: 8px;
}
.primary-scope-actions button.is-primary {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: #fff;
}
@media (max-width: 900px) {
#contextSelector {
display: inline-flex;
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
border-radius: 9px;
}
#primaryScopeLabel,
.primary-scope-trigger-caret {
display: none;
}
#userSelectorBox {
top: 52px;
width: calc(100vw - 16px);
}
.primary-scope-scroll,
.primary-scope-scroll.is-single-organization {
grid-template-columns: 1fr;
}
.primary-scope-options,
.primary-scope-entities {
max-height: 230px;
min-height: min(var(--primary-scope-entity-list-min-height, 0px), 230px);
}
.primary-scope-pagination {
flex-wrap: wrap;
}
.primary-scope-page-button {
flex: 1 1 130px;
justify-content: center;
}
.primary-scope-page-actions .primary-scope-page-button {
flex: 0 0 auto;
}
.primary-scope-page-label {
order: -1;
flex-basis: 100%;
}
.iot-asset-list-panel .table-wrap {
max-height: min(46dvh, 420px);
overflow: auto;
}
.asset-list-pagination {
flex-wrap: wrap;
justify-content: center;
}
.tkrvue-table-pagination {
justify-content: center;
gap: 8px;
}
.tkrvue-table-pagination-form {
flex: 1 1 auto;
}
}
/* Trajets : carte multi-équipements, filtres, replay et statistiques */
.trip-view-layer .view-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.trip-help-card,
.trip-scope-reminder,
.trip-replay-picker,
.trip-replay-card {
border: 1px solid #d4deeb;
border-radius: 12px;
background: rgba(255, 255, 255, 0.88);
}
.trip-help-card {
border-left: 4px solid var(--app-accent-color, #2f78b7);
}
.trip-help-card summary {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
cursor: pointer;
list-style: none;
}
.trip-help-card summary::-webkit-details-marker {
display: none;
}
.trip-help-card[open] summary > span {
transform: rotate(90deg);
}
.trip-help-card summary > span {
display: inline-flex;
width: 18px;
height: 18px;
color: var(--app-accent-color, #2f78b7);
transition: transform 0.18s ease;
}
.trip-help-card summary > span svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.trip-help-card > div {
padding: 0 18px 14px 46px;
color: #546a86;
}
.trip-help-card p {
margin: 0 0 7px;
}
.trip-warning {
padding: 10px 13px;
border: 1px solid #f5c16c;
border-radius: 9px;
background: #fff8e8;
color: #7a4a05;
}
.trip-warning-with-role {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.trip-warning-role-badge {
flex: 0 0 auto;
max-width: none;
cursor: default;
pointer-events: none;
}
.trip-metrics {
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-bottom: 0;
}
.trip-summary-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 7px;
}
.trip-metric > :is(span, strong) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trip-density-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
gap: 1px;
}
.trip-density-toggle svg {
width: 18px;
height: 18px;
}
.trip-density-toggle b {
min-width: 10px;
font-size: 0.75rem;
line-height: 1;
}
.trip-toolbar,
.trip-stats-toolbar,
.trip-filter-result {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
padding: 11px 12px;
border: 1px solid #d4deeb;
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
}
.trip-toolbar-copy {
display: flex;
flex: 1 1 auto;
min-width: 180px;
flex-direction: column;
gap: 2px;
}
.trip-toolbar-copy span,
.trip-stats-toolbar > span,
.trip-filter-result > span {
color: #64748b;
font-size: 0.86rem;
}
.trip-quick-filters {
display: grid;
grid-template-columns: minmax(210px, 0.8fr) minmax(260px, 1.7fr);
gap: 10px;
padding: 11px 12px;
border: 1px solid var(--tkrvue-border, #d4deeb);
border-radius: 10px;
background: var(--tkrvue-panel-bg, rgba(255, 255, 255, 0.72));
}
.trip-quick-filters > .trip-density-toggle {
align-self: end;
}
.trip-quick-filters label {
display: grid;
min-width: 0;
gap: 4px;
margin: 0;
color: var(--tkrvue-muted, #51657f);
font-size: 0.78rem;
}
.trip-quick-filters select,
.trip-quick-filters input {
width: 100%;
min-width: 0;
height: 36px;
box-sizing: border-box;
padding: 6px 10px;
border: 1px solid var(--tkrvue-border, #c8d5e4);
border-radius: 8px;
background: var(--tkrvue-input-bg, #fff);
color: var(--tkrvue-input-text, #1f2937);
font: inherit;
font-size: 0.86rem;
}
.trip-toolbar .secondary-action b {
display: inline-grid;
min-width: 20px;
height: 20px;
margin-left: 5px;
place-items: center;
border-radius: 999px;
background: #dbeafe;
color: #1d4f91;
font-size: 0.72rem;
}
.trip-toolbar > .trip-density-toggle b {
display: inline;
min-width: 0;
height: auto;
margin-left: 0;
background: transparent;
color: inherit;
font-size: 0.75rem;
line-height: 1;
}
.trip-table-actions {
display: inline-flex;
align-items: center;
gap: 5px;
}
.trip-table-actions .secondary-icon-action,
.trip-table-actions .secondary-action.tkrvue-icon-button {
flex: 0 0 36px;
width: 36px;
height: 36px;
min-height: 36px;
padding: 0;
}
.trip-table-actions .secondary-icon-action:disabled {
cursor: default;
opacity: 0.38;
}
.trip-export-action.is-loading svg {
animation: tkrvue-spin 0.75s linear infinite;
}
.trip-row-limit-control {
display: inline-flex;
min-height: 36px;
align-items: center;
gap: 7px;
margin: 0;
padding: 0 8px 0 10px;
border: 1px solid var(--tkrvue-border, #c8d5e4);
border-radius: 8px;
background: var(--tkrvue-control-bg, rgba(255, 255, 255, 0.78));
color: var(--tkrvue-muted, #51657f);
font-family: inherit;
font-size: 0.84rem;
white-space: nowrap;
}
.trip-row-limit-control select {
min-width: 66px;
height: 28px;
padding: 2px 24px 2px 7px;
border: 1px solid var(--tkrvue-border, #c8d5e4);
border-radius: 6px;
background: var(--tkrvue-input-bg, #fff);
color: var(--tkrvue-text, #1f2937);
font: inherit;
}
.trip-row-limit-control small {
color: var(--tkrvue-muted, #64748b);
font: inherit;
font-size: 0.8rem;
}
.trip-direction-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
margin: 0;
color: #51657f;
font-size: 0.84rem;
white-space: nowrap;
}
.trip-direction-toggle-toolbar {
padding: 0 10px;
border: 1px solid #c8d5e4;
border-radius: 8px;
background: rgba(255, 255, 255, 0.74);
}
.trip-direction-toggle input {
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--app-accent-color, #2f78b7);
}
.trip-list-head,
.trip-list-main {
display: grid;
grid-template-columns: var(--trip-data-columns, minmax(210px, 1.6fr) minmax(190px, 1.15fr) 90px 82px 82px);
align-items: center;
gap: 10px;
}
.trip-list-head {
grid-template-columns: 34px var(--trip-data-columns, minmax(210px, 1.6fr) minmax(190px, 1.15fr) 90px 82px 82px) 108px;
min-height: 30px;
padding: 2px 12px 4px;
border-bottom: 1px solid var(--tkrvue-border, #d6dfeb);
color: var(--tkrvue-text, #1f2937);
font-family: inherit;
font-size: 14px;
font-weight: 600;
text-transform: none;
}
.trip-table-scroll {
position: relative;
max-height: min(62vh, 680px);
overflow-x: hidden;
overflow-y: scroll;
padding-right: 4px;
border: 1px solid var(--tkrvue-border, #d6dfeb);
border-radius: 10px;
background: var(--tkrvue-panel-bg, rgba(255, 255, 255, 0.28));
outline: none;
overscroll-behavior: contain;
scrollbar-color: var(--tkrvue-accent, #316da5) color-mix(in srgb, var(--tkrvue-panel-bg, #fff) 85%, #94a3b8);
scrollbar-gutter: stable;
scrollbar-width: thin;
}
.trip-table-scroll:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tkrvue-accent, #316da5) 30%, transparent);
}
.trip-table-scroll::-webkit-scrollbar {
width: 10px;
}
.trip-table-scroll::-webkit-scrollbar-track {
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-panel-bg, #fff) 85%, #94a3b8);
}
.trip-table-scroll::-webkit-scrollbar-thumb {
border: 2px solid color-mix(in srgb, var(--tkrvue-panel-bg, #fff) 85%, #94a3b8);
border-radius: 999px;
background: var(--tkrvue-accent, #316da5);
}
.trip-table-scroll .trip-list-head {
position: sticky;
z-index: 3;
top: 0;
padding-top: 5px;
background: var(--tkrvue-panel-bg, #f8fafc);
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
}
.trip-head-visibility-toggle,
.trip-visibility-toggle {
position: relative;
display: grid;
cursor: pointer;
place-items: center;
}
.trip-head-visibility-toggle {
width: 100%;
min-height: 30px;
}
.trip-head-visibility-toggle input,
.trip-visibility-toggle input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.trip-head-visibility-toggle > span,
.trip-visibility-toggle > span {
position: relative;
display: inline-grid;
width: 17px;
height: 17px;
box-sizing: border-box;
place-items: center;
border: 2px solid var(--trip-color, var(--app-accent-color, #2f78b7));
border-radius: 4px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
transition: background 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}
.trip-head-visibility-toggle input:checked + span,
.trip-head-visibility-toggle input:indeterminate + span,
.trip-visibility-toggle input:checked + span {
background: var(--trip-color, var(--app-accent-color, #2f78b7));
}
.trip-head-visibility-toggle input:checked + span::after,
.trip-visibility-toggle input:checked + span::after {
content: "";
width: 7px;
height: 4px;
margin-top: -2px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
transform: rotate(-45deg);
}
.trip-head-visibility-toggle input:indeterminate + span::after {
content: "";
width: 8px;
height: 2px;
border-radius: 2px;
background: #fff;
}
.trip-head-visibility-toggle input:focus-visible + span,
.trip-visibility-toggle input:focus-visible + span {
outline: 2px solid color-mix(in srgb, var(--trip-color, var(--app-accent-color, #2f78b7)) 35%, transparent);
outline-offset: 2px;
}
.trip-sort-button {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
min-width: 0;
min-height: 26px;
padding: 3px 2px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
text-transform: inherit;
cursor: pointer;
}
.trip-sort-button > span:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trip-sort-button:hover,
.trip-sort-button.is-active {
color: var(--app-accent-color, #2f78b7);
}
.trip-sort-indicator {
flex: 0 0 auto;
margin-left: 0;
color: var(--tkrvue-muted, #64748b);
font-size: 12px;
font-weight: 600;
line-height: 1;
opacity: 0.78;
}
.trip-sort-button.is-active .trip-sort-indicator {
color: var(--app-accent-color, #2f78b7);
opacity: 1;
}
.trip-sort-button b {
display: inline;
flex: 0 0 auto;
width: auto;
height: auto;
margin-left: 1px;
border-radius: 0;
background: transparent;
color: #1d4f91;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.trip-list {
display: flex;
flex-direction: column;
gap: 7px;
padding: 7px 0 3px;
}
.trip-list-progress {
position: sticky;
z-index: 2;
bottom: 0;
display: flex;
min-height: 38px;
align-items: center;
justify-content: center;
gap: 12px;
padding: 7px 12px 9px;
border-top: 1px solid var(--tkrvue-border, #d6dfeb);
background: var(--tkrvue-panel-bg, #f8fafc);
color: var(--tkrvue-muted, #64748b);
font-family: inherit;
font-size: 0.8rem;
text-align: center;
}
.trip-list-progress .tkrvue-icon-button {
width: 30px;
min-width: 30px;
height: 30px;
min-height: 30px;
padding: 0;
}
.trip-list-progress .tkrvue-icon-button svg {
width: 16px;
height: 16px;
}
.trip-page-action-slot {
display: grid;
width: 36px;
min-width: 36px;
height: 36px;
place-items: center;
}
.trip-list-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 108px;
align-items: center;
overflow: visible;
border: 1px solid #d6dfeb;
border-left: 4px solid transparent;
border-radius: 10px;
background: rgba(255, 255, 255, 0.86);
transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.trip-list-row:hover {
border-color: #a9c4e2;
box-shadow: 0 5px 16px rgba(37, 78, 124, 0.08);
}
.trip-list-row.is-selected {
border-left-color: var(--app-accent-color, #2f78b7);
background: #edf6ff;
box-shadow: 0 0 0 1px rgba(47, 120, 183, 0.15);
}
.trip-visibility-toggle {
height: 100%;
}
.trip-color-dot {
display: inline-block;
width: 14px;
height: 14px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--trip-color, #2563eb);
box-shadow: 0 0 0 1px var(--trip-color, #2563eb);
}
.trip-list-main {
width: 100%;
min-width: 0;
padding: 11px 6px;
border: 0;
background: transparent;
color: #1e293b;
text-align: left;
cursor: pointer;
}
.trip-list-main > span:not(.trip-list-title),
.trip-list-main time {
min-width: 0;
overflow: hidden;
font-size: 0.84rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.trip-list-title {
display: flex;
min-width: 0;
flex-direction: column;
}
.trip-list-title strong,
.trip-list-title small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trip-list-title small {
margin-top: 2px;
color: #64748b;
font-size: 0.76rem;
}
.trip-row-actions {
display: inline-flex;
width: 108px;
box-sizing: border-box;
align-items: center;
justify-content: flex-end;
gap: 5px;
padding-right: 6px;
}
.trip-actions-heading {
min-width: 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.tkrvue-responsive-row-toggle,
.tkrvue-responsive-row-details,
.trip-responsive-sort-controls {
display: none;
}
.trip-row-toggle {
border: 1px solid var(--tkrvue-border, #bfd1e4);
border-radius: 8px;
background: var(--tkrvue-input-bg, #fff);
color: var(--tkrvue-accent, #2f78b7);
cursor: pointer;
place-items: center;
}
.trip-row-toggle svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.9;
transition: transform 0.16s ease;
}
.trip-row-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.trip-row-details[hidden] {
display: none !important;
}
.trip-row-details dl {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 0;
}
.trip-row-details dl > div {
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border, #d6dfeb);
border-radius: 8px;
background: var(--tkrvue-panel-bg, rgba(255, 255, 255, 0.64));
}
.trip-row-details dt,
.trip-row-details dd {
margin: 0;
overflow-wrap: anywhere;
}
.trip-row-details dt {
color: var(--tkrvue-muted, #64748b);
font-size: var(--tkrvue-font-size-xs, 0.76rem);
}
.trip-row-details dd {
margin-top: 3px;
color: var(--tkrvue-text, #1e293b);
font-size: var(--tkrvue-font-size-sm, 0.84rem);
font-weight: 700;
}
.trip-column-order-picker {
position: relative;
}
.trip-column-order-picker > summary {
display: grid;
width: 36px;
min-width: 36px;
height: 36px;
min-height: 36px;
box-sizing: border-box;
padding: 0;
cursor: pointer;
list-style: none;
place-items: center;
}
.trip-column-order-picker > summary::-webkit-details-marker {
display: none;
}
.trip-column-order-picker[open] > summary {
border-color: var(--tkrvue-accent, #2f78b7);
background: color-mix(in srgb, var(--tkrvue-accent, #2f78b7) 10%, var(--tkrvue-input-bg, #fff));
}
.trip-column-order-menu {
position: absolute;
z-index: 24;
top: calc(100% + 7px);
right: 0;
display: grid;
width: min(330px, calc(100vw - 42px));
box-sizing: border-box;
gap: 7px;
padding: 12px;
border: 1px solid var(--tkrvue-border, #c8d5e4);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg, #fff);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.2);
color: var(--tkrvue-text, #1f2937);
}
.trip-column-order-menu > p {
margin: 0;
color: var(--tkrvue-muted, #64748b);
font-size: var(--tkrvue-font-size-xs, 0.76rem);
}
.trip-column-order-menu ol {
display: grid;
gap: 5px;
margin: 0;
padding: 0;
list-style: none;
}
.trip-column-order-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
min-height: 38px;
align-items: center;
gap: 8px;
padding: 4px 6px 4px 9px;
border: 1px solid var(--tkrvue-border, #d6dfeb);
border-radius: 8px;
background: var(--tkrvue-panel-bg, #f8fafc);
}
.trip-column-order-item > span:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trip-column-order-item small {
padding: 3px 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-muted, #64748b) 12%, transparent);
color: var(--tkrvue-muted, #64748b);
font-size: var(--tkrvue-font-size-xs, 0.72rem);
}
.trip-column-order-item.is-actions {
border-style: dashed;
}
.trip-column-order-actions {
display: inline-flex;
gap: 4px;
}
.trip-column-order-actions button {
display: grid;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--tkrvue-border, #bfd1e4);
border-radius: 7px;
background: var(--tkrvue-input-bg, #fff);
color: var(--tkrvue-accent, #2f78b7);
cursor: pointer;
place-items: center;
}
.trip-column-order-actions button:disabled {
cursor: default;
opacity: 0.32;
}
.trip-column-order-actions svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.9;
}
.trip-fit-link,
.trip-replay-link,
.trip-driver-link {
display: grid;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid #bfd1e4;
border-radius: 8px;
background: #fff;
color: var(--app-accent-color, #2f78b7);
cursor: pointer;
place-items: center;
}
.trip-fit-link svg,
.trip-replay-link svg,
.trip-driver-link svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.trip-driver-confirm { width: min(560px, 100%); }
.trip-driver-confirm .view-confirm-content { min-width: 0; }
.trip-driver-confirm form { display: grid; gap: 10px; }
.trip-driver-confirm form > label:not(.trip-driver-check) { display: grid; gap: 5px; }
.trip-driver-confirm :is(input[type="search"], textarea) {
width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px;
border: 1px solid var(--tkrvue-border, #bfd1e4); border-radius: 8px;
background: var(--tkrvue-input-bg, #fff); color: inherit; font: inherit;
}
.trip-driver-options { display: grid; gap: 3px; max-height: 190px; overflow-y: auto; }
.trip-driver-option { display: flex; align-items: center; gap: 8px; padding: 7px 9px;
border: 1px solid var(--tkrvue-border, #bfd1e4); border-radius: 8px; cursor: pointer; }
.trip-driver-option:has(input:checked) { background: var(--tkrvue-status-success-bg, #e9f8ee); }
.trip-driver-check { display: flex; align-items: flex-start; gap: 8px; }
.trip-driver-choice { margin: 0; font-weight: 700; }
.trip-driver-status:not(:empty) { padding: 7px 9px; border-radius: 8px;
background: var(--tkrvue-status-warning-bg, #fff6e5); color: var(--tkrvue-status-warning-text, #825100); }
.trip-driver-history { border: 1px solid var(--tkrvue-border, #bfd1e4); border-radius: 8px; padding: 7px 9px; }
.trip-driver-history summary { cursor: pointer; color: var(--tkrvue-accent, #2f78b7); font-weight: 700; }
.trip-driver-history p { margin: 8px 0 0; font-size: .84rem; }
.trip-empty {
padding: 28px 18px;
border: 1px dashed #bdcadd;
border-radius: 10px;
color: #64748b;
text-align: center;
}
.trip-map-tooltip {
min-width: 180px;
color: var(--tkrvue-map-tooltip-text);
line-height: 1.16;
}
.trip-map-tooltip > strong,
.trip-map-tooltip > span {
display: block;
}
.trip-map-tooltip > strong {
color: var(--tkrvue-map-tooltip-text);
font-size: var(--tkrvue-font-size-md);
}
.trip-map-tooltip > span {
margin-top: 2px;
color: var(--tkrvue-map-tooltip-muted);
font-size: var(--tkrvue-font-size-xs);
}
.trip-map-tooltip dl {
display: grid;
gap: 3px;
margin: 6px 0 0;
}
.trip-map-tooltip dl div {
display: flex;
justify-content: space-between;
gap: 8px;
}
.trip-map-tooltip dt,
.trip-map-tooltip dd {
margin: 0;
font-size: var(--tkrvue-font-size-xs);
}
.trip-map-tooltip dt {
color: var(--tkrvue-map-tooltip-muted);
}
.trip-map-tooltip dd {
color: var(--tkrvue-map-tooltip-text);
font-weight: 700;
}
.trip-leaflet-tooltip {
padding: 8px 9px !important;
border: 1px solid var(--tkrvue-map-tooltip-border) !important;
border-radius: 8px !important;
background: var(--tkrvue-map-tooltip-bg) !important;
box-shadow: var(--tkrvue-map-tooltip-shadow) !important;
}
.trip-leaflet-tooltip::before {
border-top-color: var(--tkrvue-map-tooltip-bg) !important;
}
.trip-scope-reminder {
display: flex;
flex-direction: column;
gap: 4px;
padding: 13px 15px;
}
.trip-filter-navigation {
display: flex;
justify-content: flex-start;
}
.trip-filter-navigation .secondary-action {
gap: 7px;
}
.trip-replay-navigation {
display: flex;
justify-content: flex-start;
}
.trip-replay-navigation .secondary-action {
gap: 7px;
}
.trip-last-replay-card {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-radius: 11px;
background: color-mix(in srgb, var(--tkrvue-accent) 6%, var(--tkrvue-layer-surface-bg));
}
.trip-last-replay-icon {
display: grid;
width: 40px;
height: 40px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-radius: 10px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-accent);
place-items: center;
}
.trip-last-replay-icon svg {
width: 21px;
height: 21px;
}
.trip-last-replay-copy {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
color: var(--tkrvue-layer-text);
}
.trip-last-replay-copy > span,
.trip-last-replay-copy small {
overflow-wrap: anywhere;
color: var(--tkrvue-muted);
}
.trip-last-replay-copy > span {
font-weight: 650;
}
.trip-last-replay-card .primary-action {
align-self: center;
white-space: nowrap;
}
.trip-scope-reminder span {
color: #64748b;
}
.trip-filter-form {
display: grid;
grid-template-columns: repeat(2, minmax(240px, 1fr));
gap: 12px;
}
.trip-filter-form fieldset {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 14px;
border: 1px solid #d4deeb;
border-radius: 11px;
background: rgba(255, 255, 255, 0.8);
}
.trip-filter-form legend {
padding: 0 7px;
color: #334155;
font-weight: 750;
}
.trip-filter-field {
display: flex;
min-width: 0;
flex-direction: column;
gap: 6px;
color: #51657f;
font-size: 0.83rem;
}
.trip-filter-field input,
.trip-filter-field select,
.trip-replay-picker select,
.trip-stats-toolbar select,
.trip-replay-actions select {
min-height: 38px;
border: 1px solid #c8d5e4;
border-radius: 8px;
background: #fff;
color: #1e293b;
}
.trip-filter-input {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
overflow: hidden;
border: 1px solid #c8d5e4;
border-radius: 8px;
background: #fff;
}
.trip-filter-input input {
min-width: 0;
padding: 0 10px;
border: 0;
}
.trip-filter-input small {
display: grid;
padding: 0 10px;
border-left: 1px solid #d9e2ec;
background: #f5f8fb;
place-items: center;
}
.trip-filter-zone {
grid-column: 1 / -1;
}
.trip-filter-actions {
display: flex;
grid-column: 1 / -1;
justify-content: flex-end;
gap: 9px;
}
.trip-filter-result {
justify-content: space-between;
}
.trip-filter-result > span {
flex: 1 1 auto;
}
.trip-replay-picker {
padding: 14px;
}
.trip-replay-picker label {
display: flex;
flex-direction: column;
gap: 6px;
font-weight: 700;
}
.trip-replay-picker p {
margin: 7px 0 0;
color: #64748b;
font-size: 0.82rem;
}
.trip-replay-card {
padding: 16px;
}
.trip-replay-heading {
display: flex;
align-items: center;
gap: 12px;
}
.trip-replay-heading-copy {
display: flex;
min-width: 0;
flex-direction: column;
}
.trip-replay-title-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.trip-path-status {
font-size: var(--tkrvue-font-size-xs);
}
.trip-path-status.is-ok {
border-color: var(--tkrvue-status-success-border);
background: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
}
.trip-path-status.is-pending {
border-color: var(--tkrvue-status-warning-border);
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
}
.trip-replay-heading small {
color: #64748b;
}
.trip-replay-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 15px 0;
}
.trip-replay-facts > span {
display: flex;
min-width: 0;
flex-direction: column;
padding: 10px 12px;
border: 1px solid #d9e2ed;
border-radius: 9px;
background: #f8fafc;
}
.trip-replay-facts small {
color: #64748b;
}
.trip-replay-facts strong {
overflow-wrap: anywhere;
}
.trip-replay-timeline {
width: 100%;
accent-color: var(--app-accent-color, #2f78b7);
}
.trip-replay-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
margin-top: 12px;
}
.trip-replay-actions > label {
display: inline-flex;
align-items: center;
gap: 7px;
color: #51657f;
}
.trip-replay-follow {
margin-left: auto;
}
.trip-replay-follow-icon {
display: inline-grid;
width: 18px;
height: 18px;
flex: 0 0 18px;
place-items: center;
color: var(--tkrvue-muted);
}
.trip-replay-follow-icon.is-linked {
color: var(--tkrvue-accent);
}
.trip-replay-follow-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.trip-direction-chevron-shell {
border: 0 !important;
background: transparent !important;
pointer-events: none !important;
}
.trip-direction-chevron {
display: grid;
width: 15px;
height: 15px;
place-items: center;
color: var(--trip-direction-color, #2563eb);
filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255, 255, 255, 0.95));
transform: rotate(var(--trip-direction-angle, 0deg));
transform-origin: center;
}
.trip-direction-chevron svg {
width: 15px;
height: 15px;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.trip-replay-marker-shell {
border: 0;
background: transparent;
}
.trip-replay-marker {
display: grid;
width: 34px;
height: 34px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--trip-color, #2563eb);
box-shadow: 0 7px 18px rgba(15, 23, 42, 0.35);
color: #fff;
font-size: 13px;
place-items: center;
}
.trip-replay-marker.is-vehicle {
--vehicle-state-color: var(--tkrvue-vehicle-state-moving, #16a34a);
position: relative;
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--vehicle-state-color) 76%, #0f172a);
border-radius: 50% 50% 50% 7px;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--vehicle-state-color) 72%, #fff),
var(--vehicle-state-color)
);
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vehicle-state-color) 58%, #fff), 0 7px 18px rgba(15, 23, 42, 0.35);
transform: rotate(-45deg);
}
.trip-replay-marker.is-vehicle::before {
position: absolute;
z-index: 0;
inset: 4px;
border-radius: 50%;
background: var(--vehicle-marker-surface, #fff);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.11);
content: "";
}
.trip-replay-marker.is-vehicle svg {
position: relative;
z-index: 1;
width: 18px;
height: 18px;
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
filter: drop-shadow(0 0 1.35px var(--asset-icon-halo, transparent)) drop-shadow(0 0 0.35px rgba(15, 23, 42, 0.78));
transform: rotate(45deg);
}
.trip-replay-marker:is(.is-gsm, .is-asset-presented) {
position: relative;
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--device-marker-shell, #3b82f6) 76%, #0f172a);
border-radius: 50% 50% 50% 7px;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--device-marker-shell, #3b82f6) 72%, #fff),
var(--device-marker-shell, #3b82f6)
);
color: var(--asset-icon-foreground, var(--device-marker-color, #1d4ed8));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--device-marker-shell, #3b82f6) 58%, #fff), 0 7px 18px rgba(15, 23, 42, 0.35);
transform: rotate(-45deg);
}
.trip-replay-marker:is(.is-gsm, .is-asset-presented)::before {
position: absolute;
z-index: 0;
inset: 4px;
border-radius: 50%;
background: var(--device-marker-surface, #fff);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.11);
content: "";
}
.trip-replay-marker:is(.is-gsm, .is-asset-presented) svg {
position: relative;
z-index: 1;
width: 18px;
height: 18px;
color: var(--asset-icon-foreground, var(--device-marker-color, #1d4ed8));
filter: drop-shadow(0 0 1.35px var(--asset-icon-halo, transparent)) drop-shadow(0 0 0.35px rgba(15, 23, 42, 0.78));
transform: rotate(45deg);
}
.trip-replay-marker:not(.is-vehicle):not(.is-gsm):not(.is-asset-presented) svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.leaflet-tooltip.trip-replay-time-tooltip {
padding: 9px 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 96%, var(--tkrvue-accent) 4%);
box-shadow: 0 10px 26px color-mix(in srgb, #0f172a 24%, transparent);
color: var(--tkrvue-text);
font-family: var(--tkrvue-font-family);
pointer-events: auto;
}
.leaflet-tooltip.trip-replay-time-tooltip::before {
border-top-color: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 96%, var(--tkrvue-accent) 4%);
}
.trip-replay-time-content {
display: grid;
gap: 5px;
min-width: 168px;
}
.trip-replay-time-content.is-pinned {
cursor: pointer;
}
.trip-replay-time-heading {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.trip-replay-time-actions {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 5px;
}
.trip-replay-time-link {
display: inline-grid;
width: 25px;
min-width: 25px;
height: 25px;
padding: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
cursor: pointer;
place-items: center;
}
.trip-replay-time-link:hover,
.trip-replay-time-link:focus-visible,
.trip-replay-time-link.is-linked {
border-color: color-mix(in srgb, var(--tkrvue-accent) 58%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.trip-replay-time-link:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 56%, transparent);
outline-offset: 1px;
}
.trip-replay-time-link svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.trip-replay-time-content strong {
overflow: hidden;
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.trip-replay-time-date {
display: flex;
align-items: baseline;
gap: 6px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.trip-replay-time-date small {
color: var(--tkrvue-text);
font-size: calc(var(--tkrvue-font-size-xs) * 0.88);
font-weight: 700;
text-transform: capitalize;
}
.trip-replay-time-date time {
color: var(--tkrvue-text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.trip-replay-time-close.tkrvue-close-button {
width: 25px !important;
min-width: 25px !important;
max-width: 25px !important;
height: 25px !important;
min-height: 25px !important;
max-height: 25px !important;
flex-basis: 25px !important;
border-radius: 7px;
}
.trip-replay-time-close.tkrvue-close-button svg {
width: 15px !important;
min-width: 15px !important;
max-width: 15px !important;
height: 15px !important;
min-height: 15px !important;
max-height: 15px !important;
}
.trip-stats-toolbar {
justify-content: space-between;
}
.trip-stats-toolbar label {
display: flex;
align-items: center;
gap: 9px;
}
.trip-statistics-table td:first-child {
min-width: 210px;
}
.trip-stat-bar {
overflow: hidden;
height: 5px;
margin-top: 7px;
border-radius: 999px;
background: #e8eef5;
}
.trip-stat-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--app-accent-color, #2f78b7), #69a9df);
}
/* La layer Trajets conserve son rendu clair par défaut. Ces surcharges sont
* limitées au thème sombre afin de reprendre les surfaces et champs TrackerVue. */
:root[data-theme="dark"] .trip-view-layer {
color-scheme: dark;
}
:root[data-theme="dark"] .trip-view-layer :is(
.security-help-box,
.trip-help-card,
.trip-scope-reminder,
.trip-replay-picker,
.trip-replay-card,
.trip-quick-filters,
.trip-toolbar,
.trip-stats-toolbar,
.trip-filter-result,
.trip-filter-form fieldset
) {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
}
:root[data-theme="dark"] .trip-view-layer :is(
.trip-help-card > div,
.trip-toolbar-copy span,
.trip-stats-toolbar > span,
.trip-filter-result > span,
.trip-direction-toggle,
.trip-scope-reminder span,
.trip-filter-field,
.trip-replay-picker p,
.trip-replay-heading small,
.trip-replay-facts small,
.trip-replay-actions > label,
.trip-list-title small,
.trip-empty
) {
color: var(--tkrvue-muted);
}
:root[data-theme="dark"] .trip-view-layer .trip-warning {
border-color: var(--tkrvue-status-warning-border);
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
}
:root[data-theme="dark"] .trip-view-layer :is(
.trip-row-limit-control,
.trip-direction-toggle-toolbar,
.trip-filter-field input,
.trip-filter-field select,
.trip-replay-picker select,
.trip-stats-toolbar select,
.trip-replay-actions select,
.trip-filter-input
) {
border-color: var(--tkrvue-border);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
:root[data-theme="dark"] .trip-view-layer .trip-row-limit-control select {
border-color: color-mix(in srgb, var(--tkrvue-border) 84%, var(--tkrvue-accent));
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
:root[data-theme="dark"] .trip-view-layer .trip-filter-input small {
border-left-color: var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
}
:root[data-theme="dark"] .trip-view-layer .trip-filter-form legend,
:root[data-theme="dark"] .trip-view-layer .trip-list-main {
color: var(--tkrvue-text);
}
:root[data-theme="dark"] .trip-view-layer .trip-table-scroll {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-bg);
}
:root[data-theme="dark"] .trip-view-layer .trip-table-scroll .trip-list-head {
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
}
:root[data-theme="dark"] .trip-view-layer .trip-list-row {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
}
:root[data-theme="dark"] .trip-view-layer .trip-list-row:hover {
border-color: color-mix(in srgb, var(--tkrvue-accent) 45%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 6%, var(--tkrvue-layer-surface-bg));
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}
:root[data-theme="dark"] .trip-view-layer .trip-list-row.is-selected {
border-color: color-mix(in srgb, var(--tkrvue-accent) 58%, var(--tkrvue-border));
border-left-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-layer-surface-bg));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tkrvue-accent) 18%, transparent);
}
:root[data-theme="dark"] .trip-view-layer .trip-head-visibility-toggle > span,
:root[data-theme="dark"] .trip-view-layer .trip-visibility-toggle > span {
background: var(--tkrvue-input-bg);
box-shadow: none;
}
:root[data-theme="dark"] .trip-view-layer :is(.trip-fit-link, .trip-replay-link) {
border-color: var(--tkrvue-border);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-accent);
}
:root[data-theme="dark"] .trip-view-layer .trip-replay-facts > span {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
}
:root[data-theme="dark"] .trip-view-layer .trip-stat-bar {
background: color-mix(in srgb, var(--tkrvue-border) 72%, var(--tkrvue-input-bg));
}
:root[data-theme="dark"] .trip-view-layer .trip-anomaly-panel {
border-color: var(--tkrvue-status-warning-border);
background: color-mix(in srgb, var(--tkrvue-status-warning-bg) 72%, var(--tkrvue-layer-bg));
}
:root[data-theme="dark"] .trip-view-layer .trip-anomaly-panel > summary,
:root[data-theme="dark"] .trip-view-layer .trip-anomaly-content > p {
color: var(--tkrvue-status-warning-text);
}
@media (max-width: 1050px) {
.trip-metrics {
grid-template-columns: repeat(2, minmax(120px, 1fr));
}
.trip-list-head {
display: none;
}
.trip-list-main {
grid-template-columns: minmax(170px, 1fr) minmax(130px, 1fr);
}
.trip-list-main > span:nth-last-child(-n+3) {
display: none;
}
}
@media (max-width: 720px) {
.trip-quick-filters {
grid-template-columns: 1fr;
}
.trip-warning-with-role {
align-items: flex-start;
flex-direction: column;
}
.trip-toolbar,
.trip-stats-toolbar,
.trip-filter-result {
align-items: stretch;
flex-direction: column;
}
.trip-row-limit-control {
width: 100%;
box-sizing: border-box;
justify-content: space-between;
}
.trip-table-scroll {
max-height: 58vh;
}
.trip-filter-form {
grid-template-columns: 1fr;
}
.trip-filter-zone,
.trip-filter-actions {
grid-column: auto;
}
.trip-filter-form fieldset,
.trip-replay-facts {
grid-template-columns: 1fr;
}
.trip-list-main {
grid-template-columns: 1fr;
}
.trip-list-main time {
color: #64748b;
}
}
.trip-anomaly-panel {
overflow: hidden;
margin: 12px 0;
border: 1px solid #f3c36b;
border-radius: 14px;
background: #fffaf0;
}
.trip-anomaly-panel > summary {
display: flex;
gap: 10px;
align-items: center;
padding: 12px 14px;
color: #8a4b08;
cursor: pointer;
list-style: none;
}
.trip-anomaly-panel > summary::-webkit-details-marker {
display: none;
}
.trip-anomaly-panel > summary > span {
display: grid;
width: 28px;
height: 28px;
place-items: center;
border-radius: 50%;
background: #ffedd5;
color: #c2410c;
}
.trip-anomaly-content {
padding: 0 14px 14px;
}
.trip-anomaly-content > p {
margin: 0 0 10px;
color: #7c5b32;
}
.trip-anomaly-list {
display: grid;
gap: 7px;
}
.trip-anomaly-row {
display: grid;
grid-template-columns: auto minmax(150px, 1.2fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
gap: 12px;
align-items: center;
padding: 10px 12px;
border: 1px solid #f3d8a7;
border-radius: 10px;
background: rgba(255, 255, 255, 0.86);
}
.trip-anomaly-row input {
width: 17px;
height: 17px;
accent-color: #dc2626;
}
.trip-anomaly-device {
display: grid;
gap: 2px;
}
.trip-anomaly-device small,
.trip-anomaly-row time,
.trip-anomaly-row > span {
color: #6b7280;
font-size: 0.82rem;
}
.trip-anomaly-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-top: 12px;
}
.trip-anomaly-actions > span {
color: #7c5b32;
font-size: 0.84rem;
}
@media (max-width: 980px) {
.trip-anomaly-row {
grid-template-columns: auto minmax(150px, 1fr) minmax(130px, 1fr);
}
.trip-anomaly-row > span:last-child {
grid-column: 2 / -1;
}
}
@media (max-width: 620px) {
.trip-anomaly-row {
grid-template-columns: auto 1fr;
}
.trip-anomaly-row time,
.trip-anomaly-row > span {
grid-column: 2;
}
}
.asset-filter-toolbar .asset-type-filter {
min-width: 190px;
}
.vehicle-map-style-editor {
min-width: 0;
margin: 4px 0;
padding: 14px;
border: 1px solid var(--tkrvue-border);
border-radius: 14px;
background: color-mix(in srgb, var(--tkrvue-accent) 3%, var(--tkrvue-layer-surface-bg));
}
.smartphone-map-style-editor {
min-width: 0;
margin: 4px 0 0;
padding: 14px;
border: 1px solid var(--tkrvue-border);
border-radius: 14px;
background: color-mix(in srgb, var(--tkrvue-accent) 3%, var(--tkrvue-layer-surface-bg));
}
.smartphone-map-style-editor > legend {
padding: 0 7px;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
font-weight: 750;
}
.smartphone-map-style-editor > p {
margin: 0 0 12px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.smartphone-map-style-layout {
display: grid;
grid-template-columns: minmax(190px, 0.8fr) minmax(220px, 1.2fr);
gap: 14px;
align-items: stretch;
}
.smartphone-map-color-control {
min-width: 0;
display: grid;
align-content: start;
gap: 7px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.smartphone-map-color-control > span:last-child {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 9px;
}
.smartphone-map-color-control input[type="color"] {
width: 52px;
min-width: 52px;
height: 38px;
padding: 3px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-input-bg);
cursor: pointer;
}
.smartphone-map-color-control output {
min-height: 38px;
display: flex;
align-items: center;
padding: 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-layer-text);
font-family: inherit;
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
}
.smartphone-map-style-preview {
min-height: 142px;
display: grid;
place-items: center;
align-content: center;
gap: 6px;
padding: 12px;
border: 1px dashed color-mix(in srgb, var(--smartphone-map-color) 50%, var(--tkrvue-border));
border-radius: 12px;
background: color-mix(in srgb, var(--smartphone-map-color) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
text-align: center;
}
.smartphone-map-style-preview .vehicle-map-icon-choice-pin {
width: 58px;
height: 58px;
border-radius: 50% 50% 50% 11px;
}
.smartphone-map-style-preview .vehicle-map-icon-choice-pin::before {
inset: 7px;
}
.smartphone-map-style-preview .vehicle-map-icon-choice-pin svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.smartphone-map-style-preview strong {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm);
}
.smartphone-map-style-preview small {
max-width: 330px;
font-size: var(--tkrvue-font-size-xs);
line-height: 1.35;
}
.smartphone-map-style-empty {
min-height: 92px;
}
@container (max-width: 620px) {
.smartphone-map-style-layout {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 620px) {
.smartphone-map-style-layout {
grid-template-columns: minmax(0, 1fr);
}
.smartphone-map-style-head {
align-items: flex-start;
}
}
.vehicle-engine-specs {
min-width: 0;
margin: 2px 0;
padding: 11px 13px 13px;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: color-mix(in srgb, var(--tkrvue-accent) 2%, var(--tkrvue-layer-surface-bg));
}
.asset-schema-section {
min-width: 0;
grid-column: 1 / -1;
margin: 2px 0;
padding: 11px 13px 13px;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: color-mix(in srgb, var(--tkrvue-accent) 2%, var(--tkrvue-layer-surface-bg));
}
.asset-schema-section-help,
.asset-agent-inventory-help {
margin: 0 0 10px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.45;
}
.asset-agent-inventory {
min-width: 0;
grid-column: 1 / -1;
margin: 2px 0;
padding: 11px 13px 13px;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: color-mix(in srgb, var(--tkrvue-accent) 2%, var(--tkrvue-layer-surface-bg));
}
.asset-agent-inventory > legend {
padding: 0 6px;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm, 12px);
font-weight: 750;
}
.asset-agent-inventory-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
color: inherit;
background: transparent;
font: inherit;
cursor: pointer;
}
.asset-agent-inventory.is-collapsed > .asset-agent-inventory-content {
display: none;
}
.asset-agent-inventory.is-collapsed .context-help-chevron {
transform: rotate(-90deg);
}
.asset-agent-inventory-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 12px;
margin: 0 0 12px;
}
.asset-agent-inventory-summary > div {
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg, transparent);
}
.asset-agent-inventory-summary dt {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.asset-agent-inventory-summary dd {
margin: 3px 0 0;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm, 12px);
overflow-wrap: anywhere;
}
.asset-agent-inventory-subsections {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 12px;
}
.asset-agent-inventory-subsections details {
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg, transparent);
}
.asset-agent-inventory-subsections summary {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
cursor: pointer;
}
.asset-agent-inventory-list {
max-height: 260px;
margin: 8px 0 0;
padding: 0 4px 0 18px;
overflow: auto;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.asset-agent-inventory-list li {
margin: 0 0 6px;
}
.asset-agent-inventory-list li strong,
.asset-agent-inventory-list li span {
display: block;
overflow-wrap: anywhere;
}
.asset-agent-inventory-list li strong {
color: var(--tkrvue-layer-text);
}
.asset-agent-inventory-subsections pre {
max-height: 260px;
margin: 8px 0 0;
padding: 8px;
overflow: auto;
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-layer-text) 6%, transparent);
color: var(--tkrvue-layer-text);
font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.asset-agent-inventory-empty,
.asset-agent-inventory-more {
margin: 8px 0 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
@container (max-width: 760px) {
.asset-agent-inventory-summary,
.asset-agent-inventory-subsections {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.asset-agent-inventory-summary,
.asset-agent-inventory-subsections {
grid-template-columns: minmax(0, 1fr);
}
}
.asset-schema-section > legend {
padding: 0 6px;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm, 12px);
font-weight: 750;
}
.asset-schema-fields {
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
}
.asset-schema-field {
min-width: 0;
display: grid;
grid-template-columns: minmax(105px, 155px) minmax(0, 1fr);
align-items: center;
gap: 8px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.asset-schema-field.is-wide {
grid-column: 1 / -1;
}
.asset-schema-field > span {
min-width: 0;
overflow-wrap: anywhere;
}
.asset-schema-field input,
.asset-schema-field select,
.asset-schema-field textarea {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.asset-schema-field textarea {
min-height: 66px;
resize: vertical;
}
.asset-schema-empty {
grid-column: 1 / -1;
border: 1px dashed var(--tkrvue-border);
border-radius: 9px;
padding: 12px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
text-align: center;
}
.vehicle-engine-specs > legend {
padding: 0 6px;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm, 12px);
font-weight: 750;
}
.vehicle-engine-specs-grid {
min-width: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.vehicle-engine-specs-grid > label {
min-width: 0;
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.asset-input-with-unit {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
}
.asset-input-with-unit input {
min-width: 0;
width: 100%;
border-radius: 7px 0 0 7px;
}
.asset-input-with-unit em {
min-width: 42px;
display: grid;
place-items: center;
padding: 0 8px;
border: 1px solid var(--tkrvue-border);
border-left: 0;
border-radius: 0 7px 7px 0;
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-style: normal;
white-space: nowrap;
}
.asset-business-payload {
min-width: 0;
}
.asset-business-payload-title {
display: flex;
align-items: center;
gap: 6px;
}
.asset-business-payload-title .superadmin-key-icon {
width: 17px;
height: 17px;
font-size: 12px;
}
.asset-business-payload-title .superadmin-badge {
padding: 1px 6px;
font-size: 10px;
}
.asset-business-payload textarea {
width: 100%;
min-height: 96px;
overflow: hidden;
resize: none;
font-family: Consolas, "Courier New", monospace;
font-size: 10px;
line-height: 1.32;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
@container (max-width: 700px) {
.vehicle-engine-specs-grid,
.asset-schema-fields {
grid-template-columns: minmax(0, 1fr);
}
.asset-schema-field,
.asset-schema-field.is-wide {
grid-column: 1;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
}
.vehicle-map-style-editor.hidden {
display: none;
}
.vehicle-map-style-editor > legend {
padding: 0 7px;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
font-weight: 750;
}
.vehicle-map-style-legend {
display: inline-flex;
align-items: center;
gap: 9px;
max-width: 100%;
}
.vehicle-map-style-legend .vehicle-map-style-toggle {
min-width: 0;
flex: 1 1 auto;
}
.vehicle-map-style-save {
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
flex: 0 0 32px;
}
.vehicle-map-style-content > p {
margin: 0 0 12px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.vehicle-map-style-content > .vehicle-map-style-contrast-help {
display: none;
margin-top: -4px;
padding: 8px 10px;
border-left: 3px solid var(--asset-icon-halo, #64748b);
border-radius: 7px;
background: color-mix(in srgb, var(--asset-icon-halo, #64748b) 12%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-layer-text);
line-height: 1.35;
}
.vehicle-map-style-editor.uses-contrast-surface .vehicle-map-style-contrast-help {
display: block;
}
.vehicle-map-style-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 190px;
gap: 14px;
align-items: stretch;
}
.vehicle-map-icon-grid {
display: grid;
grid-template-columns: repeat(4, minmax(110px, 1fr));
gap: 8px;
}
.vehicle-map-icon-choice {
position: relative;
min-width: 0;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 60px;
padding: 7px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.vehicle-map-icon-choice:hover {
border-color: color-mix(in srgb, var(--tkrvue-accent) 55%, var(--tkrvue-border));
transform: translateY(-1px);
}
.vehicle-map-icon-choice.is-selected {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-layer-surface-bg));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tkrvue-accent) 20%, transparent);
}
.vehicle-map-icon-choice input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.vehicle-map-icon-choice-symbol {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 10px;
background: transparent;
color: var(--vehicle-marker-color, #005b96);
}
.vehicle-map-icon-choice-pin {
--vehicle-state-color: var(--tkrvue-accent, #316da5);
position: relative;
width: 36px;
height: 36px;
display: grid;
place-items: center;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--vehicle-state-color) 76%, #0f172a);
border-radius: 50% 50% 50% 7px;
background: linear-gradient(145deg, color-mix(in srgb, var(--vehicle-state-color) 72%, #fff), var(--vehicle-state-color));
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vehicle-state-color) 58%, #fff), 0 4px 9px rgba(15, 23, 42, 0.24);
transform: rotate(-45deg);
}
.vehicle-map-icon-choice-pin::before {
position: absolute;
z-index: 0;
inset: 4px;
border-radius: 50%;
background: var(--asset-icon-surface, #fff);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
content: "";
}
.vehicle-map-icon-choice-pin svg {
position: relative;
z-index: 1;
width: 20px;
height: 20px;
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
filter: drop-shadow(0 0 1.35px var(--asset-icon-halo, transparent)) drop-shadow(0 0 0.35px rgba(15, 23, 42, 0.75));
transform: rotate(45deg);
}
.vehicle-map-icon-choice > span:last-child {
overflow: hidden;
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
}
.asset-beacon-map-icon-value {
display: none;
}
.asset-beacon-icon-library-help {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 6%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
line-height: 1.35;
}
.asset-beacon-icon-library-help svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
fill: none;
stroke: currentColor;
}
button.asset-beacon-icon-library-trigger {
width: 100%;
font: inherit;
text-align: left;
}
button.asset-beacon-icon-library-trigger:disabled {
cursor: not-allowed;
opacity: 0.62;
transform: none;
}
.beacon-asset-icon-picker-overlay {
position: fixed;
z-index: 25000;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
box-sizing: border-box;
background: color-mix(in srgb, #020617 58%, transparent);
backdrop-filter: blur(2px);
}
.beacon-asset-icon-picker {
width: min(820px, 100%);
max-height: min(780px, calc(100dvh - 40px));
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr);
gap: 12px;
padding: 16px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 14px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
box-shadow: 0 24px 70px rgba(2, 6, 23, 0.38);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.beacon-asset-icon-picker > header {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
}
.beacon-asset-icon-picker > header > span:nth-child(2) {
min-width: 0;
display: grid;
gap: 3px;
}
.beacon-asset-icon-picker > header strong {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-lg);
}
.beacon-asset-icon-picker > header small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.35;
}
.beacon-asset-icon-picker-heading-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.beacon-asset-icon-picker-heading-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
}
.beacon-asset-icon-picker-filters {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(170px, 0.32fr) minmax(180px, 0.36fr);
gap: 10px;
}
.beacon-asset-icon-picker-filters label {
min-width: 0;
display: grid;
gap: 4px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.beacon-asset-icon-search {
min-width: 0;
height: 38px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
}
.beacon-asset-icon-search svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
fill: none;
stroke: currentColor;
}
.beacon-asset-icon-search input,
.beacon-asset-icon-picker-filters select {
width: 100%;
min-width: 0;
height: 38px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
}
.beacon-asset-icon-search input {
height: 34px;
padding: 0;
border: 0;
outline: 0;
}
.beacon-asset-icon-picker-filters select {
padding: 0 10px;
}
.beacon-asset-icon-picker-status {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.asset-icon-library-meta {
display: grid;
gap: 8px;
}
.asset-icon-library-upload {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 12px;
padding: 9px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-surface-bg));
}
.asset-icon-library-upload > span {
min-width: 0;
display: grid;
gap: 2px;
}
.asset-icon-library-upload strong {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm);
}
.asset-icon-library-upload small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.asset-icon-library-upload label.secondary-action {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
}
.asset-icon-library-upload label.secondary-action svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
}
.asset-icon-library-upload-notice {
grid-column: 1 / -1;
min-height: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-style: normal;
}
.asset-icon-library-upload-notice:empty {
display: none;
}
.asset-icon-library-upload-notice.is-error {
color: var(--tkrvue-danger);
}
.asset-icon-library-upload-notice.is-loading {
color: var(--tkrvue-accent);
}
.beacon-asset-icon-picker-results {
min-height: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-content: start;
gap: 8px;
padding-right: 4px;
overflow: auto;
}
.beacon-asset-icon-result {
position: relative;
min-width: 0;
min-height: 68px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 9px;
padding: 8px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
font: inherit;
text-align: left;
cursor: pointer;
}
.beacon-asset-icon-result:hover,
.beacon-asset-icon-result:focus-visible,
.beacon-asset-icon-result.is-selected {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-surface-bg));
}
.beacon-asset-icon-result:focus-visible {
outline: 2px solid var(--tkrvue-focus, var(--tkrvue-accent));
outline-offset: 1px;
}
.beacon-asset-icon-result > span:nth-child(2) {
min-width: 0;
display: grid;
gap: 2px;
}
.beacon-asset-icon-result strong,
.beacon-asset-icon-result small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.beacon-asset-icon-result strong {
font-size: var(--tkrvue-font-size-sm);
}
.beacon-asset-icon-result small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.beacon-asset-icon-result em {
position: absolute;
top: 5px;
right: 6px;
padding: 2px 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-success, #16a34a) 14%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-success, #15803d);
font-size: 9px;
font-style: normal;
font-weight: 750;
}
.beacon-asset-icon-empty {
grid-column: 1 / -1;
padding: 24px 14px;
border: 1px dashed var(--tkrvue-border);
border-radius: 10px;
color: var(--tkrvue-muted);
text-align: center;
}
@media (max-width: 700px) {
.beacon-asset-icon-picker-overlay {
align-items: end;
padding:
max(10px, env(safe-area-inset-top, 0px))
max(10px, env(safe-area-inset-right, 0px))
max(10px, env(safe-area-inset-bottom, 0px))
max(10px, env(safe-area-inset-left, 0px));
}
.beacon-asset-icon-picker {
width: min(520px, 100%);
max-height: min(78dvh, 680px);
padding: 13px;
}
.beacon-asset-icon-picker-filters {
grid-template-columns: minmax(0, 1fr);
}
.asset-icon-library-upload {
grid-template-columns: minmax(0, 1fr);
}
.asset-icon-library-upload label.secondary-action {
width: 100%;
box-sizing: border-box;
}
.beacon-asset-icon-search input,
.beacon-asset-icon-picker-filters select {
font-size: 16px;
}
.beacon-asset-icon-picker-results {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 430px) {
.beacon-asset-icon-picker-results {
grid-template-columns: minmax(0, 1fr);
}
}
.vehicle-map-style-color {
display: grid;
grid-template-rows: auto 1fr;
gap: 9px;
}
.vehicle-map-style-color > label {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 5px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.organization-form-grid.asset-record-fields .vehicle-map-style-color input[type="color"] {
width: 46px;
min-width: 46px;
max-width: 46px;
height: 34px;
justify-self: end;
padding: 3px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-input-bg);
cursor: pointer;
}
.vehicle-map-style-preview {
min-height: 142px;
display: grid;
place-items: center;
align-content: center;
gap: 9px;
border: 1px dashed color-mix(in srgb, var(--vehicle-marker-color, #005b96) 50%, var(--tkrvue-border));
border-radius: 12px;
background: color-mix(in srgb, var(--vehicle-marker-color, #005b96) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
}
.vehicle-map-style-preview > span {
--vehicle-state-color: var(--tkrvue-accent, #316da5);
position: relative;
width: 58px;
height: 58px;
display: grid;
place-items: center;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--vehicle-state-color) 76%, #0f172a);
border-radius: 50% 50% 50% 11px;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--vehicle-state-color) 72%, #fff),
var(--vehicle-state-color)
);
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vehicle-state-color) 58%, #fff), 0 7px 17px rgba(15, 23, 42, 0.28);
transform: rotate(-45deg);
}
.vehicle-map-style-preview > span::before {
position: absolute;
z-index: 0;
inset: 7px;
border-radius: 50%;
background: var(--asset-icon-surface, #fff);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
content: "";
}
.vehicle-map-style-preview svg {
position: relative;
z-index: 1;
width: 31px;
height: 31px;
color: var(--asset-icon-foreground, var(--vehicle-marker-color, #005b96));
filter: drop-shadow(0 0 1.5px var(--asset-icon-halo, transparent)) drop-shadow(0 0 0.4px rgba(15, 23, 42, 0.78));
transform: rotate(45deg);
}
.vehicle-map-style-preview-states {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
margin-top: 5px;
}
.vehicle-map-style-preview-states button {
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid transparent;
border-radius: 50%;
background: transparent;
color: inherit;
box-shadow: none;
cursor: pointer;
}
.vehicle-map-style-preview-states button:hover,
.vehicle-map-style-preview-states button.is-selected {
border-color: color-mix(in srgb, var(--vehicle-state-color) 72%, var(--tkrvue-border));
background: color-mix(in srgb, var(--vehicle-state-color) 13%, var(--tkrvue-layer-surface-bg));
}
.vehicle-map-style-preview-states button.is-selected {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--vehicle-state-color) 26%, transparent);
}
.vehicle-map-style-preview-states button:focus-visible {
outline: 2px solid var(--tkrvue-focus, var(--tkrvue-accent));
outline-offset: 1px;
}
.vehicle-map-style-preview-states i {
width: 10px;
height: 10px;
display: block;
box-sizing: border-box;
border: 2px solid #fff;
border-radius: 50%;
background: var(--vehicle-state-color);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--vehicle-state-color) 75%, #0f172a);
}
.vehicle-map-style-preview-states .is-state-moving { --vehicle-state-color: var(--tkrvue-vehicle-state-moving, #16a34a); }
.vehicle-map-style-preview-states .is-state-stopped { --vehicle-state-color: var(--tkrvue-vehicle-state-stopped, #dc2626); }
.vehicle-map-style-preview-states .is-state-silent { --vehicle-state-color: var(--tkrvue-vehicle-state-silent, #d97706); }
.vehicle-map-style-preview-states .is-state-offline { --vehicle-state-color: var(--tkrvue-vehicle-state-offline, #475569); }
.vehicle-map-style-preview-state {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
max-width: 100%;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
line-height: 1.2;
text-align: center;
}
.vehicle-map-style-preview-state code {
padding: 2px 5px;
border: 1px solid var(--tkrvue-border);
border-radius: 5px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-muted);
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
font-size: 0.92em;
}
.vehicle-map-style-preview small {
font-size: var(--tkrvue-font-size-xs);
font-weight: 650;
}
.vehicle-maintenance-section {
margin: 0 0 16px;
padding: 16px;
border: 1px solid var(--tkrvue-border, #d7e0ea);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg);
}
.vehicle-dossier {
display: grid;
gap: 14px;
min-width: 0;
padding-bottom: 14px;
container-name: vehicle-dossier;
container-type: inline-size;
}
.vehicle-dossier-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 0;
padding: 16px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 12px;
background: color-mix(in srgb, var(--tkrvue-accent) 6%, var(--tkrvue-layer-bg));
}
.vehicle-dossier-head > div {
min-width: 0;
}
.vehicle-dossier-head h3 {
margin: 0 0 4px;
}
.vehicle-dossier-head span {
color: var(--tkrvue-muted);
}
.vehicle-dossier-head .secondary-action {
flex: 0 0 auto;
width: max-content;
max-width: 100%;
}
.vehicle-dossier-head .secondary-action svg,
.vehicle-dossier-period svg,
.vehicle-dossier-section > summary svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
flex: 0 0 auto;
}
.vehicle-dossier-period {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 28%, var(--tkrvue-border));
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
}
.vehicle-dossier-period strong {
color: var(--tkrvue-text);
}
.vehicle-dossier-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(150px, 1fr));
gap: 10px;
}
.vehicle-dossier-metrics .metric {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-content: center;
align-items: center;
gap: 5px 8px;
width: 100%;
max-width: none;
min-width: 0;
min-height: 86px;
box-sizing: border-box;
}
.vehicle-dossier-metrics .metric span,
.vehicle-dossier-metrics .metric strong,
.vehicle-dossier-metrics .metric small {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.vehicle-dossier-metrics .metric small {
grid-column: 1 / -1;
color: var(--tkrvue-muted);
}
.vehicle-dossier-filter {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(170px, .35fr);
gap: 10px;
padding: 12px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
}
.vehicle-dossier-filter label {
display: grid;
gap: 5px;
min-width: 0;
}
.vehicle-dossier-filter label > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.vehicle-dossier-filter input,
.vehicle-dossier-filter select {
width: 100%;
min-width: 0;
}
.vehicle-dossier-section {
min-width: 0;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: var(--tkrvue-layer-bg);
}
.vehicle-dossier-section > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 46px;
padding: 0 13px;
cursor: pointer;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 80%, var(--tkrvue-layer-bg));
color: var(--tkrvue-text);
font-weight: 700;
}
.vehicle-dossier-section > summary::marker,
.vehicle-dossier-section > summary::-webkit-details-marker {
display: none;
content: "";
}
.vehicle-dossier-section > summary > span {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.vehicle-dossier-section > summary .context-help-chevron {
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
font-size: 22px;
}
.vehicle-dossier-section > summary .context-help-chevron svg {
width: 20px;
height: 20px;
}
.vehicle-dossier-section:not([open]) > summary .context-help-chevron {
transform: rotate(-90deg);
}
.vehicle-dossier-section > summary > strong {
min-width: 28px;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-bg));
color: var(--tkrvue-accent);
text-align: center;
}
.vehicle-dossier-scroll {
max-height: 520px;
overflow-y: auto;
overscroll-behavior: contain;
}
.vehicle-dossier-timeline-item {
display: grid;
grid-template-columns: 38px minmax(118px, .28fr) minmax(260px, 1fr) minmax(130px, auto) 38px;
gap: 10px;
align-items: center;
min-width: 0;
padding: 11px 13px;
border-top: 1px solid var(--tkrvue-border);
}
.vehicle-dossier-timeline-item:first-child {
border-top: 0;
}
.vehicle-dossier-timeline-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 11%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.vehicle-dossier-timeline-icon svg,
.vehicle-dossier-document-head > span:first-child svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
}
.vehicle-dossier-timeline-date,
.vehicle-dossier-timeline-copy,
.vehicle-dossier-timeline-value,
.vehicle-dossier-document-head > span {
display: grid;
gap: 3px;
min-width: 0;
}
.vehicle-dossier-timeline-date small,
.vehicle-dossier-timeline-copy small,
.vehicle-dossier-document-head small,
.vehicle-dossier-due small,
.vehicle-dossier-odometer small {
color: var(--tkrvue-muted);
}
.vehicle-dossier-timeline-value {
justify-items: end;
text-align: right;
}
.vehicle-dossier-operation-list {
display: grid;
gap: 5px;
margin: 5px 0 0;
padding: 0;
list-style: none;
}
.vehicle-dossier-operation-list li {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.vehicle-dossier-operation-list li > span {
display: grid;
gap: 2px;
min-width: 0;
}
.vehicle-dossier-operation-list strong {
overflow-wrap: anywhere;
}
.vehicle-dossier-operation-list em {
flex: 0 0 auto;
color: var(--tkrvue-text);
font-style: normal;
font-weight: 650;
white-space: nowrap;
}
.vehicle-dossier-more {
display: block;
margin-top: 4px;
color: var(--tkrvue-accent);
}
.vehicle-dossier-document {
display: grid;
gap: 9px;
padding: 12px 13px;
border-top: 1px solid var(--tkrvue-border);
}
.vehicle-dossier-document:first-child {
border-top: 0;
}
.vehicle-dossier-document-head {
display: grid;
grid-template-columns: 34px minmax(220px, 1fr) minmax(120px, auto) auto;
gap: 10px;
align-items: center;
min-width: 0;
}
.vehicle-dossier-document-head > span:first-child {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
}
.vehicle-dossier-document-total {
color: var(--tkrvue-text);
font-weight: 750;
text-align: right;
white-space: nowrap;
}
.vehicle-dossier-document-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.vehicle-dossier-document-meta span {
padding: 3px 7px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.vehicle-dossier-document-notes {
display: grid;
gap: 3px;
margin-top: 8px;
padding: 7px 9px;
border-left: 3px solid var(--tkrvue-accent);
border-radius: 5px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-sm);
}
.vehicle-dossier-document-notes strong {
color: var(--tkrvue-muted);
font-size: .82em;
}
.vehicle-dossier-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: start;
}
.vehicle-dossier-columns .vehicle-dossier-scroll {
max-height: 360px;
}
.vehicle-dossier-due,
.vehicle-dossier-odometer {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(110px, auto) auto;
gap: 9px;
align-items: center;
padding: 10px 12px;
border-top: 1px solid var(--tkrvue-border);
}
.vehicle-dossier-due:first-child,
.vehicle-dossier-odometer:first-child {
border-top: 0;
}
.vehicle-dossier-due > span,
.vehicle-dossier-odometer > span {
display: grid;
gap: 2px;
min-width: 0;
}
.vehicle-dossier-due.status-overdue {
box-shadow: inset 4px 0 0 #dc2626;
}
.vehicle-dossier-due.status-due_soon {
box-shadow: inset 4px 0 0 #d97706;
}
.vehicle-dossier-filter-empty {
padding: 12px;
border: 1px dashed var(--tkrvue-border);
border-radius: 9px;
color: var(--tkrvue-muted);
text-align: center;
}
@container vehicle-dossier (max-width: 900px) {
.vehicle-dossier-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vehicle-dossier-columns {
grid-template-columns: 1fr;
}
}
@container vehicle-dossier (max-width: 700px) {
.vehicle-dossier-head {
align-items: stretch;
flex-direction: column;
}
.vehicle-dossier-period {
align-items: flex-start;
}
.vehicle-dossier-filter {
grid-template-columns: 1fr;
}
}
@container vehicle-dossier (max-width: 560px) {
.vehicle-dossier-metrics {
grid-template-columns: 1fr;
}
.vehicle-dossier-timeline-item {
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: start;
}
.vehicle-dossier-timeline-date {
grid-column: 2;
}
.vehicle-dossier-timeline-copy {
grid-column: 2 / -1;
}
.vehicle-dossier-timeline-value {
grid-column: 2;
justify-items: start;
text-align: left;
}
.vehicle-dossier-timeline-item > .view-icon-button {
grid-column: 3;
grid-row: 1;
}
.vehicle-dossier-document-head {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.vehicle-dossier-document-total {
grid-column: 2;
text-align: left;
}
.vehicle-dossier-due,
.vehicle-dossier-odometer {
grid-template-columns: minmax(0, 1fr) auto;
}
}
.vehicle-maintenance-section .organization-resource-head {
margin-bottom: 14px;
}
.vehicle-intervention-form {
display: grid;
gap: 16px;
min-width: 0;
}
.vehicle-intervention-grid {
width: 100%;
min-width: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vehicle-intervention-grid > label,
.vehicle-intervention-grid > label.span-4 {
display: grid;
min-width: 0;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: 5px;
}
.vehicle-intervention-grid > label > span {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.vehicle-intervention-grid input,
.vehicle-intervention-grid select,
.vehicle-intervention-grid textarea {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.vehicle-operation-picker h4 {
margin: 0 0 10px;
}
.vehicle-operation-family {
border: 1px solid var(--tkrvue-border, #d7e0ea);
border-radius: 9px;
background: var(--tkrvue-layer-bg);
margin-bottom: 8px;
overflow: hidden;
}
.vehicle-operation-family > summary,
.vehicle-maintenance-override > summary {
cursor: pointer;
font-weight: 700;
color: var(--tkrvue-layer-text);
}
.vehicle-operation-family > summary {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--tkrvue-layer-surface-bg);
}
.vehicle-operation-family > summary span {
min-width: 24px;
padding: 1px 7px;
border-radius: 999px;
color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-layer-bg));
text-align: center;
}
.vehicle-operation-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 8px 14px;
padding: 12px;
}
.vehicle-operation-options label {
display: flex;
align-items: flex-start;
gap: 8px;
}
.vehicle-maintenance-actions {
display: flex;
justify-content: flex-end;
}
.vehicle-maintenance-summary {
display: grid;
gap: 10px;
margin-bottom: 14px;
}
.vehicle-maintenance-profile-controls,
.vehicle-maintenance-baseline {
display: grid;
grid-template-columns: minmax(220px, 1fr) auto;
align-items: end;
gap: 10px;
}
.vehicle-maintenance-profile-controls > label,
.vehicle-maintenance-baseline > label {
display: grid;
gap: 5px;
}
.vehicle-maintenance-profile-controls > label > span,
.vehicle-maintenance-baseline > label > span {
color: var(--tkrvue-muted);
font-size: 0.86rem;
}
.vehicle-maintenance-odometer-card {
display: grid;
grid-template-columns: minmax(190px, 0.8fr) repeat(2, minmax(240px, 1fr));
margin: 0;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 92%, var(--tkrvue-accent) 8%);
}
.vehicle-maintenance-odometer-card.is-compact {
grid-template-columns: minmax(260px, 1fr);
}
.vehicle-maintenance-odometer-item {
display: grid;
align-content: center;
gap: 6px;
min-height: 74px;
padding: 12px 14px;
border-left: 1px solid var(--tkrvue-border);
}
.vehicle-maintenance-odometer-item:first-child {
border-left: 4px solid var(--tkrvue-accent);
}
.vehicle-maintenance-odometer-item.is-primary {
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-bg));
}
.vehicle-maintenance-odometer-item dt {
color: var(--tkrvue-muted);
font-size: 0.78rem;
}
.vehicle-maintenance-odometer-item dd {
display: grid;
gap: 3px;
margin: 0;
}
.vehicle-maintenance-odometer-item dd strong {
color: var(--tkrvue-text);
font-size: 1rem;
line-height: 1.2;
}
.vehicle-maintenance-odometer-item.is-primary dd strong {
color: var(--tkrvue-accent);
font-size: 1.18rem;
}
.vehicle-maintenance-odometer-item small {
color: var(--tkrvue-muted);
font-size: 0.75rem;
line-height: 1.35;
}
.vehicle-maintenance-baseline {
grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.7fr) auto;
padding: 12px;
border: 1px dashed color-mix(in srgb, var(--tkrvue-accent) 45%, var(--tkrvue-border));
border-radius: 10px;
background: var(--tkrvue-layer-bg);
}
.vehicle-maintenance-collision-caution {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: 10px;
align-items: start;
margin: 10px 0 12px;
padding: 11px 13px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-accent);
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-bg));
}
.vehicle-maintenance-collision-caution-icon {
display: grid;
place-items: center;
flex: 0 0 26px;
width: 26px;
min-width: 26px;
max-width: 26px;
height: 26px;
min-height: 26px;
max-height: 26px;
overflow: hidden;
color: var(--tkrvue-accent);
}
.vehicle-maintenance-collision-caution-icon svg {
width: 21px;
min-width: 21px;
max-width: 21px;
height: 21px;
min-height: 21px;
max-height: 21px;
display: block;
flex: 0 0 21px;
}
.vehicle-maintenance-collision-caution strong {
display: block;
margin-bottom: 3px;
}
.vehicle-maintenance-collision-caution p {
margin: 0;
color: var(--tkrvue-muted);
line-height: 1.45;
}
.vehicle-maintenance-event-label span {
display: block;
margin-top: 3px;
color: var(--tkrvue-muted);
font-size: 0.75rem;
}
.vehicle-maintenance-event-location-cell {
width: 1%;
min-width: 92px;
text-align: center;
white-space: nowrap;
}
.vehicle-maintenance-event-location-cell .tkrvue-icon-button.is-busy {
opacity: 0.65;
}
.vehicle-maintenance-event-popup {
display: grid;
gap: 3px;
min-width: 180px;
}
.vehicle-maintenance-event-popup span,
.vehicle-maintenance-event-popup small {
color: var(--tkrvue-muted);
}
.vehicle-maintenance-organization-settings {
margin: 0 0 14px;
padding: 12px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-bg);
}
.vehicle-maintenance-add-rule {
margin: 0 0 14px;
padding: 12px;
border: 1px dashed color-mix(in srgb, var(--tkrvue-accent) 45%, var(--tkrvue-border));
border-radius: 10px;
background: var(--tkrvue-layer-bg);
}
.vehicle-maintenance-add-rule > summary {
cursor: pointer;
color: var(--tkrvue-accent);
font-weight: 700;
}
.vehicle-maintenance-organization-settings > summary {
cursor: pointer;
color: var(--tkrvue-accent);
font-weight: 700;
}
.vehicle-maintenance-settings-grid {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(160px, 0.5fr) minmax(260px, 1fr) auto;
align-items: end;
gap: 10px;
padding-top: 12px;
}
.vehicle-maintenance-settings-grid > label:not(.vehicle-maintenance-setting-check) {
display: grid;
gap: 4px;
}
.vehicle-maintenance-settings-grid label > span {
color: var(--tkrvue-muted);
font-size: 0.82rem;
}
.vehicle-maintenance-setting-check {
display: flex;
align-items: center;
gap: 8px;
min-height: 42px;
}
.vehicle-maintenance-rules td {
vertical-align: top;
}
.vehicle-maintenance-review-row > td {
padding-top: 0;
background: var(--tkrvue-status-warning-bg);
}
.vehicle-maintenance-review-lines {
display: grid;
gap: 8px;
padding: 10px;
border-left: 3px solid var(--tkrvue-status-warning-border);
border-radius: 6px;
background: var(--tkrvue-layer-bg);
}
.vehicle-maintenance-review-lines label {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.65fr);
align-items: center;
gap: 10px;
}
.vehicle-maintenance-review-lines small {
color: var(--tkrvue-status-warning-text);
}
.vehicle-maintenance-rule.status-overdue {
background: var(--tkrvue-status-error-bg);
}
.vehicle-maintenance-rule.status-due_soon {
background: var(--tkrvue-status-warning-bg);
}
.vehicle-maintenance-rule.status-ok {
background: var(--tkrvue-status-success-bg);
}
.vehicle-maintenance-override {
min-width: 250px;
}
.vehicle-maintenance-override-fields {
display: grid;
grid-template-columns: repeat(2, minmax(110px, 1fr));
gap: 8px;
min-width: 360px;
padding-top: 10px;
}
.vehicle-maintenance-override-fields label {
display: grid;
gap: 4px;
}
.vehicle-maintenance-override-fields label > span {
color: var(--tkrvue-muted);
font-size: 0.8rem;
}
.vehicle-maintenance-override-fields button {
grid-column: 1 / -1;
}
.iot-asset-detail-panel > .iot-asset-operations,
.iot-asset-detail-panel > .iot-asset-dossier,
.iot-asset-detail-panel > .iot-asset-maintenance {
margin-top: 14px;
}
@media (max-width: 900px) {
.vehicle-map-style-layout {
grid-template-columns: 1fr;
}
.vehicle-map-icon-grid {
grid-template-columns: repeat(2, minmax(120px, 1fr));
}
.vehicle-maintenance-summary {
grid-template-columns: 1fr;
}
.vehicle-maintenance-profile-controls,
.vehicle-maintenance-baseline,
.vehicle-maintenance-odometer-card,
.vehicle-maintenance-odometer-card.is-compact {
grid-template-columns: 1fr;
}
.vehicle-maintenance-profile-controls > button,
.vehicle-maintenance-baseline > button {
width: 100%;
}
.vehicle-maintenance-odometer-item,
.vehicle-maintenance-odometer-item:first-child {
border-left: 0;
border-top: 1px solid var(--tkrvue-border);
}
.vehicle-maintenance-odometer-item:first-child {
border-top: 4px solid var(--tkrvue-accent);
}
.vehicle-dossier-metrics,
.vehicle-dossier-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vehicle-dossier-timeline-item {
grid-template-columns: 38px minmax(105px, .3fr) minmax(180px, 1fr) auto;
}
.vehicle-dossier-timeline-item > .view-icon-button {
grid-column: 4;
}
.vehicle-intervention-grid {
grid-template-columns: 1fr;
}
.vehicle-maintenance-settings-grid {
grid-template-columns: 1fr;
}
.vehicle-maintenance-review-lines label {
grid-template-columns: 1fr;
}
.vehicle-maintenance-override-fields {
grid-template-columns: 1fr;
min-width: 240px;
}
}
@media (max-width: 560px) {
.vehicle-map-icon-grid {
grid-template-columns: 1fr;
}
.vehicle-dossier-head {
align-items: stretch;
flex-direction: column;
}
.vehicle-dossier-filter,
.vehicle-dossier-metrics,
.vehicle-dossier-columns {
grid-template-columns: 1fr;
}
.vehicle-dossier-timeline-item {
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: start;
}
.vehicle-dossier-timeline-date {
grid-column: 2;
}
.vehicle-dossier-timeline-copy {
grid-column: 2 / -1;
}
.vehicle-dossier-timeline-value {
grid-column: 2;
justify-items: start;
text-align: left;
}
.vehicle-dossier-timeline-item > .view-icon-button {
grid-column: 3;
grid-row: 1;
}
.vehicle-dossier-document-head {
grid-template-columns: 34px minmax(0, 1fr) auto;
}
.vehicle-dossier-document-total {
grid-column: 2;
text-align: left;
}
.vehicle-dossier-due,
.vehicle-dossier-odometer {
grid-template-columns: minmax(0, 1fr) auto;
}
}
.saas-main-card {
margin: 0 0 12px;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-bg);
box-shadow: 0 1px 2px color-mix(in srgb, var(--tkrvue-text) 5%, transparent);
}
.saas-main-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 54px;
padding: 0 12px;
border-bottom: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-layer-bg) 92%, var(--tkrvue-layer-surface-bg));
}
.saas-main-card-toggle {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 10px;
min-width: 0;
padding: 10px 0;
border: 0;
background: transparent;
color: var(--tkrvue-text);
text-align: left;
}
.saas-main-card-toggle:hover,
.saas-main-card-toggle:focus-visible {
background: transparent;
color: var(--tkrvue-accent);
}
.saas-main-card-toggle .context-help-chevron {
flex: 0 0 auto;
color: var(--tkrvue-accent);
font-size: 11px;
transform: rotate(0deg);
transition: transform 160ms ease;
}
.saas-main-card.is-collapsed .saas-main-card-toggle .context-help-chevron {
transform: rotate(-90deg);
}
/* Analyses */
.analysis-layer .view-panel,
.analysis-layer .view-body,
.analysis-view,
.analysis-dashboard-grid,
.analysis-card,
.analysis-card-body {
min-width: 0;
}
.analysis-view-body {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.analysis-view {
display: grid;
gap: 14px;
padding-bottom: 12px;
}
.analysis-loading {
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #64748b;
}
.tkrvue-view-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.tkrvue-spinner {
width: 22px;
height: 22px;
flex: 0 0 auto;
box-sizing: border-box;
border: 3px solid color-mix(in srgb, var(--tkrvue-accent) 24%, transparent);
border-top-color: var(--tkrvue-accent);
border-radius: 50%;
animation: tkrvue-spin 0.75s linear infinite;
}
.analysis-refresh-button.is-loading svg {
animation: tkrvue-spin 0.75s linear infinite;
transform-origin: center;
}
.saas-analytics-actions .is-loading svg {
animation: tkrvue-spin 0.75s linear infinite;
transform-origin: center;
}
@keyframes tkrvue-spin {
to { transform: rotate(360deg); }
}
.saas-analytics-settings {
display: grid;
gap: 14px;
}
.saas-analytics-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.saas-analytics-head h3,
.saas-analytics-head p,
.saas-analytics-section h4 {
margin: 0;
}
.saas-analytics-section-help {
margin: 0 0 10px;
color: var(--tkrvue-muted, #64748b);
font-size: 0.9em;
}
.saas-analytics-purge-toggle {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 12px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--tkrvue-danger, #dc2626) 35%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 6%, var(--tkrvue-panel, #fff));
}
.saas-analytics-purge-toggle input {
flex: 0 0 auto;
margin-top: 3px;
}
.saas-analytics-purge-toggle span,
.saas-analytics-purge-toggle small {
display: block;
min-width: 0;
}
.saas-analytics-purge-toggle small {
margin-top: 4px;
color: var(--tkrvue-muted, #64748b);
}
.saas-analytics-head p {
margin-top: 5px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.saas-analytics-section {
padding: 13px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-section-bg);
}
.saas-analytics-section h4 {
margin-bottom: 10px;
font-size: var(--tkrvue-font-size-md);
}
.saas-analytics-grid {
display: grid;
grid-template-columns: repeat(4, minmax(150px, 1fr));
gap: 10px 12px;
}
.saas-analytics-grid label {
min-width: 0;
display: grid;
gap: 5px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.saas-analytics-number {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
}
.saas-analytics-number input {
width: 100%;
min-width: 0;
}
.saas-analytics-number small {
max-width: 92px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.saas-analytics-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
@media (max-width: 1180px) {
.saas-analytics-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.saas-analytics-head {
display: grid;
}
.saas-analytics-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.analysis-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.analysis-eco-overview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.analysis-eco-overview-card {
min-width: 0;
padding: 18px;
border: 1px solid var(--tkrvue-border);
border-radius: 14px;
background: var(--tkrvue-layer-surface-bg);
}
.analysis-eco-overview-card h3 { margin: 0 0 14px; font-size: 1rem; }
.analysis-eco-overview-card p { margin: 12px 0 0; color: var(--tkrvue-muted); font-size: .8rem; line-height: 1.4; }
.analysis-reference-markers {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 5px;
vertical-align: super;
}
.analysis-reference-marker {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 52%, var(--tkrvue-border));
border-radius: 50%;
color: var(--tkrvue-accent);
font-size: 10px;
font-weight: 800;
line-height: 1;
text-decoration: none;
}
.analysis-eco-overview-card p > .analysis-reference-marker {
margin-left: 4px;
vertical-align: 1px;
}
.analysis-eco-references {
display: grid;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--tkrvue-border);
}
.analysis-eco-references > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.analysis-eco-references a {
display: grid;
grid-template-columns: auto 17px minmax(0, 1fr);
align-items: start;
gap: 7px;
min-width: 0;
padding: 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
color: inherit;
text-decoration: none;
}
.analysis-eco-references a:hover,
.analysis-eco-references a:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 7%, transparent);
}
.analysis-eco-references a > svg {
width: 16px;
height: 16px;
margin-top: 2px;
color: var(--tkrvue-accent);
}
.analysis-reference-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: color-mix(in srgb, var(--tkrvue-accent) 13%, transparent);
color: var(--tkrvue-accent);
font-size: 11px;
font-weight: 800;
}
.analysis-eco-references a > span:last-child {
display: grid;
gap: 3px;
min-width: 0;
}
.analysis-eco-references small,
.analysis-eco-references > p {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.4;
}
.analysis-eco-references > p { margin: 0; }
.analysis-eco-dial {
width: 148px;
height: 148px;
margin: 0 auto;
border-radius: 50%;
background: conic-gradient(var(--eco-color) 0 var(--eco-score), color-mix(in srgb, var(--tkrvue-border) 70%, transparent) var(--eco-score) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
isolation: isolate;
}
.analysis-eco-dial::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--tkrvue-layer-surface-bg); z-index: -1; }
.analysis-eco-dial strong { font-size: 2.1rem; line-height: 1; }
.analysis-eco-dial small { color: var(--tkrvue-muted); }
.analysis-eco-dial.is-preparing strong {
max-width: 110px;
font-size: .86rem;
line-height: 1.25;
text-align: center;
}
.analysis-eco-secondary { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; font-size: .8rem; }
.analysis-eco-event-counts { display: grid; gap: 8px; }
.analysis-eco-event-counts span { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 85%, var(--tkrvue-accent)); }
.analysis-eco-event-counts strong { min-width: 2em; font-size: 1.15rem; }
.analysis-co2-values { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.analysis-co2-values strong { font-size: 1.2rem; }
.analysis-co2-values small, .analysis-co2-values span { color: var(--tkrvue-muted); font-size: .82rem; }
.analysis-co2-scale { display: grid; gap: 3px; }
.analysis-co2-class { display: flex; align-items: center; gap: 7px; min-height: 22px; padding: 2px 7px; border-radius: 4px; color: #17212e; font-size: .76rem; }
.analysis-co2-class strong { min-width: 1.2em; }
.analysis-co2-class small { font-size: .71rem; }
.analysis-co2-class span { margin-left: auto; padding: 2px 5px; border-radius: 4px; background: #ffffffd9; font-size: .68rem; font-weight: 700; }
.analysis-co2-class span + span { margin-left: 3px; }
.analysis-co2-class span svg { width: 11px; height: 11px; vertical-align: -2px; }
.analysis-co2-class.is-a { background: #60cdb1; }
.analysis-co2-class.is-b { background: #91dbb6; }
.analysis-co2-class.is-c { background: #d6e89b; }
.analysis-co2-class.is-d { background: #ffe088; }
.analysis-co2-class.is-e { background: #ffbc7b; }
.analysis-co2-class.is-f { background: #f79283; }
.analysis-co2-class.is-g { background: #eb696c; }
@media (max-width: 1050px) { .analysis-eco-overview { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
.analysis-eco-references > div { grid-template-columns: minmax(0, 1fr); }
}
.analysis-metric {
min-width: 0;
}
.analysis-metric strong {
overflow-wrap: anywhere;
}
.analysis-metric.good strong {
color: #15803d;
}
.analysis-metric.warning strong {
color: #b45309;
}
.analysis-metric.danger strong {
color: #b91c1c;
}
.analysis-metric.score {
border-width: 2px;
}
.analysis-metric.score.good {
border-color: color-mix(in srgb, #16a34a 58%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 90%, #dcfce7);
}
.analysis-metric.score.warning {
border-color: color-mix(in srgb, #ea580c 72%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 80%, #ffedd5);
}
.analysis-metric.score.warning strong {
color: #c13e00;
}
.analysis-metric.score.danger {
border-color: color-mix(in srgb, #dc2626 58%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 90%, #fee2e2);
}
.analysis-score {
display: inline;
}
.analysis-score.good {
color: #15803d;
}
.analysis-score.warning {
color: #c13e00;
}
.analysis-score.danger {
color: #b91c1c;
}
.analysis-card {
border: 1px solid #cbd5e1;
border-radius: 14px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg, #fff) 94%, transparent);
overflow: hidden;
}
.analysis-card-header {
display: flex;
align-items: stretch;
min-width: 0;
border-bottom: 1px solid #dbe3ee;
}
.analysis-card-toggle {
width: auto;
flex: 1 1 auto;
min-width: 0;
min-height: 46px;
display: flex;
align-items: center;
gap: 9px;
padding: 10px 13px;
border: 0;
border-bottom: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.analysis-card-title {
width: auto;
flex: 1 1 auto;
min-width: 0;
min-height: 46px;
display: flex;
align-items: center;
gap: 9px;
padding: 10px 13px;
color: inherit;
text-align: left;
}
.analysis-card-title strong {
min-width: 0;
overflow-wrap: anywhere;
}
.analysis-card-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
flex: 0 0 auto;
padding: 6px 10px 6px 4px;
}
.analysis-export-action.is-loading,
.analysis-report-export.is-loading {
opacity: 0.68;
}
.analysis-export-action .tkrvue-spinner,
.analysis-report-export .tkrvue-spinner {
width: 18px;
height: 18px;
border-width: 2px;
}
.analysis-card-toggle:hover,
.analysis-card-toggle:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent, #316da5) 8%, transparent);
}
.analysis-card-toggle strong {
min-width: 0;
overflow-wrap: anywhere;
}
.analysis-card-header-note {
display: inline-flex;
width: fit-content;
max-width: min(72%, 760px);
margin-left: 4px;
padding: 4px 8px;
border: 1px solid color-mix(in srgb, var(--tkrvue-muted) 34%, var(--tkrvue-border));
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 76%, var(--tkrvue-muted));
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 400;
line-height: 1.25;
text-align: left;
overflow-wrap: anywhere;
}
.analysis-layer-warning {
position: relative;
top: auto;
z-index: 21;
flex: 0 0 auto;
margin: 0;
border-width: 0 0 1px;
border-radius: 0;
padding: 7px 12px;
}
.analysis-card-toggle .context-help-chevron {
flex: 0 0 auto;
color: var(--tkrvue-accent, #316da5);
transition: transform 0.18s ease;
}
.analysis-card-meta {
margin-left: auto;
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent, #316da5) 12%, transparent);
color: var(--tkrvue-accent, #316da5);
font-size: 0.78rem;
font-weight: 700;
}
.analysis-card-body {
padding: 14px;
}
.analysis-card-body > :first-child {
margin-top: 0;
}
.analysis-card-body > :last-child {
margin-bottom: 0;
}
.analysis-card.is-collapsed .analysis-card-body {
display: none;
}
.analysis-card.is-collapsed .analysis-card-toggle {
border-bottom-color: transparent;
}
.analysis-card.is-collapsed .analysis-card-header {
border-bottom-color: transparent;
}
.analysis-card.is-collapsed .context-help-chevron {
transform: rotate(-90deg);
}
.analysis-dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: start;
gap: 14px;
}
.analysis-visuals-stack {
display: grid;
gap: 14px;
}
.analysis-control-grid {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 320px));
gap: 12px;
}
.analysis-control-grid-wide {
grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.analysis-control-grid label {
min-width: 0;
display: grid;
gap: 6px;
color: #64748b;
}
.analysis-control-grid input,
.analysis-control-grid select {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
}
.analysis-control-grid input:disabled,
.analysis-control-grid input[readonly],
.analysis-control-grid select:disabled {
border-color: color-mix(in srgb, var(--tkrvue-muted) 34%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-layer-surface-bg) 76%, var(--tkrvue-muted));
color: var(--tkrvue-muted);
opacity: 1;
cursor: not-allowed;
}
/* Le menu est accessible aux deux niveaux superadmin. Ce sélecteur garantit
son habillage privilégié même lorsqu'il provient du menu dynamique. */
#sidebar .menu-items div.menu-item[data-action="admin.features.analytics"],
#sidebar .menu-items div.menu-item[data-item-code="admin.features.analytics"] {
border-left-color: #7c3aed;
background: color-mix(in srgb, #7c3aed 8%, var(--tkrvue-sidebar-bg));
}
#sidebar .menu-items div.menu-item[data-action="admin.features.analytics"].active-item,
#sidebar .menu-items div.menu-item[data-item-code="admin.features.analytics"].active-item {
border-left-color: #7c3aed;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #7c3aed 22%, transparent);
}
.analysis-form-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
margin-top: 13px;
}
.analysis-form-actions .primary-action,
.analysis-focus {
width: auto;
max-width: 100%;
flex: 0 0 auto;
white-space: nowrap;
}
.analysis-form-actions small {
color: #64748b;
}
.analysis-settings-notice {
margin-bottom: 12px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 24%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 88%, var(--tkrvue-accent));
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm);
}
.analysis-malus {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--tkrvue-border);
}
.analysis-malus h4 {
margin: 0 0 9px;
font-size: var(--tkrvue-font-size-md);
}
.analysis-malus-grid {
display: grid;
grid-template-columns: repeat(5, minmax(120px, 1fr));
gap: 8px;
}
.analysis-malus-grid > div {
display: grid;
gap: 3px;
padding: 8px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-layer-surface-bg);
}
.analysis-malus-grid span,
.analysis-malus-grid small,
.analysis-malus p {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.analysis-malus-grid strong {
font-size: var(--tkrvue-font-size-lg);
}
.analysis-malus p {
margin: 8px 0 0;
}
.analysis-density-equipment-list {
display: grid;
gap: 3px;
margin: 2px 0 7px;
padding-bottom: 6px;
border-bottom: 1px solid var(--tkrvue-border);
}
.analysis-density-equipment-list span {
display: block;
}
.analysis-density-equipment-list small {
color: var(--tkrvue-muted);
}
.analysis-trend-figure {
display: grid;
min-width: 0;
gap: 5px;
}
.analysis-trend-metric {
padding-left: 70px;
color: var(--tkrvue-muted);
font-size: 0.76rem;
font-weight: 600;
}
.analysis-trend-layout {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
min-width: 0;
}
.analysis-trend-axis {
height: 230px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 21px 8px 28px 0;
color: var(--tkrvue-muted);
font-size: 0.72rem;
line-height: 1;
text-align: right;
white-space: nowrap;
}
.analysis-trend {
position: relative;
height: 230px;
min-width: 0;
display: flex;
align-items: end;
gap: clamp(3px, 1vw, 10px);
padding: 26px 4px 28px;
overflow-x: auto;
overflow-y: hidden;
}
.analysis-trend::before {
content: "";
position: absolute;
z-index: 0;
inset: 26px 4px 28px;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
color-mix(in srgb, var(--tkrvue-border) 78%, transparent) 0,
color-mix(in srgb, var(--tkrvue-border) 78%, transparent) 1px,
transparent 1px,
transparent calc(100% / var(--analysis-trend-tick-count, 4))
);
}
.analysis-trend-column {
position: relative;
z-index: 1;
height: 100%;
min-width: 42px;
flex: 1 0 42px;
display: flex;
align-items: center;
justify-content: end;
flex-direction: column;
}
.analysis-trend-bar {
position: relative;
width: min(32px, 72%);
min-height: 3px;
border-radius: 6px 6px 2px 2px;
background: var(--tkrvue-accent, #316da5);
opacity: 0.78;
}
.analysis-trend-value {
position: absolute;
bottom: calc(100% + 3px);
display: none;
z-index: 1;
padding: 2px 6px;
border-radius: 6px;
background: #0f172a;
color: #fff;
white-space: nowrap;
font-size: 0.72rem;
}
.analysis-trend-column:hover .analysis-trend-value,
.analysis-trend-column:focus-within .analysis-trend-value,
.analysis-trend.show-values .analysis-trend-value {
display: block;
}
.analysis-trend-label {
position: absolute;
top: calc(100% + 5px);
max-width: 72px;
color: #64748b;
font-size: 0.68rem;
white-space: nowrap;
}
.analysis-layer-filters {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 360px));
align-items: end;
gap: 10px 12px;
padding: 12px;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg);
}
.analysis-layer-filters label {
display: grid;
min-width: 0;
gap: 5px;
color: var(--tkrvue-muted);
}
.analysis-layer-filters select {
width: 100%;
min-width: 0;
}
.analysis-layer-filters .analysis-event-filter-select {
min-height: 34px;
padding: 5px 30px 5px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background-color: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
font-family: var(--tkrvue-font-family) !important;
font-size: var(--tkrvue-font-size-md) !important;
line-height: 1.25 !important;
}
.analysis-layer-filters .analysis-event-filter-select:focus {
border-color: var(--tkrvue-accent);
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 24%, transparent);
outline-offset: 1px;
}
.analysis-layer-filters .analysis-event-filter-select option:disabled {
color: var(--tkrvue-muted);
}
.analysis-layer-filters .analysis-filter-score-note {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: start;
gap: 8px;
grid-column: 1 / -1;
margin: 0;
}
.analysis-layer-filters .analysis-filter-score-note > svg {
width: 18px;
height: 18px;
min-width: 18px;
max-width: 18px;
}
.analysis-eco-empty {
display: grid;
align-content: center;
gap: 7px;
min-height: 132px;
padding: 22px 24px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
}
.analysis-eco-empty strong {
font-size: var(--tkrvue-font-size-lg);
}
.analysis-eco-empty span {
max-width: 880px;
color: var(--tkrvue-muted);
line-height: 1.5;
}
.analysis-score-reliability {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: start;
gap: 8px;
margin: 10px 0 0;
padding: 9px 11px;
border: 1px solid var(--tkrvue-status-info-border);
border-radius: 8px;
background: var(--tkrvue-status-info-bg);
color: var(--tkrvue-status-info-text);
}
.analysis-score-reliability.is-warning {
border-color: var(--tkrvue-status-warning-border);
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
}
.analysis-score-reliability.is-success {
border-color: var(--tkrvue-status-success-border);
background: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
}
.analysis-score-reliability > svg {
width: 18px;
height: 18px;
}
.analysis-table-scroll {
max-width: 100%;
max-height: 390px;
overflow: auto;
scrollbar-gutter: stable;
}
.analysis-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
column-gap: 14px;
row-gap: 8px;
flex-wrap: wrap;
min-height: 40px;
padding: 7px 2px 2px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.analysis-table {
width: 100%;
min-width: 650px;
table-layout: auto;
}
.analysis-ranking-scroll {
overflow-x: hidden;
overflow-y: auto;
}
.analysis-ranking-table {
min-width: 0;
table-layout: fixed;
}
.analysis-ranking-table th:first-child,
.analysis-ranking-table td:first-child {
width: 38%;
}
.analysis-ranking-table th:last-child,
.analysis-ranking-table td:last-child {
width: 30%;
text-align: right;
}
.analysis-ranking-table td:last-child strong {
white-space: normal;
}
.analysis-ranking-score-cell {
display: inline-grid;
width: min(100%, 210px);
gap: 6px;
justify-items: end;
}
.analysis-ranking-score-meter {
display: block;
width: 100%;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-border) 72%, transparent);
}
.analysis-ranking-score-meter > i {
display: block;
width: var(--analysis-ranking-score, 0%);
height: 100%;
border-radius: inherit;
background: var(--analysis-ranking-color, #64748b);
}
.analysis-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--tkrvue-layer-surface-bg, #fff);
}
.analysis-table td,
.analysis-table th {
overflow-wrap: anywhere;
}
.analysis-table td small {
display: block;
margin-top: 2px;
color: #64748b;
}
.analysis-table code {
word-break: break-all;
}
@media (max-width: 1450px) {
.analysis-dashboard-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.analysis-layer-filters {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 1180px) {
.analysis-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.analysis-control-grid-wide {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.analysis-malus-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.analysis-view {
gap: 10px;
}
.analysis-metrics,
.analysis-control-grid,
.analysis-control-grid-wide,
.analysis-malus-grid {
grid-template-columns: minmax(0, 1fr);
}
.analysis-card {
border-radius: 10px;
}
.analysis-card-body {
padding: 10px;
}
.analysis-card-toggle {
padding-right: 6px;
}
.analysis-card-actions {
padding-right: 7px;
}
.analysis-trend {
height: 190px;
}
.analysis-trend-axis {
height: 190px;
}
.analysis-table-scroll {
max-height: 330px;
}
.analysis-table.responsive-table {
min-width: 0;
}
.analysis-ranking-table {
display: block;
width: 100%;
}
.analysis-ranking-table thead {
display: none;
}
.analysis-ranking-table tbody {
display: grid;
gap: 8px;
}
.analysis-ranking-table tbody tr {
display: grid;
gap: 6px;
padding: 9px 10px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.analysis-ranking-table tbody td,
.analysis-ranking-table tbody td:first-child,
.analysis-ranking-table tbody td:last-child {
display: grid;
grid-template-columns: minmax(90px, 42%) minmax(0, 1fr);
gap: 8px;
width: 100%;
padding: 3px 0;
border: 0;
text-align: left;
overflow-wrap: anywhere;
}
.analysis-ranking-table tbody td::before {
content: attr(data-label);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
}
.analysis-ranking-table tbody td > small {
grid-column: 2;
}
.analysis-focus span {
display: inline;
}
}
.saas-main-card-title {
display: grid;
gap: 1px;
min-width: 0;
}
.saas-main-card-title small {
color: var(--tkrvue-accent);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
}
.saas-main-card-title strong {
overflow: hidden;
font-size: 14px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.saas-main-card-title > span {
overflow: hidden;
color: var(--tkrvue-muted);
font-size: 11px;
font-weight: 400;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.saas-main-card-header-side,
.saas-main-card-summary,
.saas-map-matching-status {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.saas-main-card-header-side {
flex: 0 0 auto;
}
.saas-main-card-summary,
.saas-panel-count,
.saas-map-matching-status {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
white-space: nowrap;
}
.saas-main-card-summary span + span::before,
.saas-map-matching-status > span + span::before {
margin-right: 8px;
color: var(--tkrvue-border);
content: "•";
}
.saas-main-card-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
}
.saas-main-card-action svg {
width: 15px;
height: 15px;
}
.saas-main-card-body {
padding: 12px;
}
.saas-main-card.is-collapsed > .saas-main-card-header {
border-bottom-color: transparent;
}
.saas-main-card.is-collapsed > .saas-main-card-body {
display: none;
}
.saas-map-matching-card {
border-color: color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-left: 3px solid var(--tkrvue-accent);
}
.saas-cartography-usage-card {
border-color: color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-left: 3px solid var(--tkrvue-accent);
}
.saas-cartography-usage-card > .saas-main-card-body {
display: grid;
gap: 12px;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 96%, var(--tkrvue-accent));
}
.saas-cartography-usage-card.is-collapsed > .saas-main-card-body {
display: none;
}
.saas-cartography-usage-notice {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 9px;
align-items: start;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-text);
}
.saas-cartography-usage-notice.is-warning {
border-color: color-mix(in srgb, #d97706 42%, var(--tkrvue-border));
background: color-mix(in srgb, #f59e0b 8%, var(--tkrvue-layer-surface-bg));
}
.saas-cartography-usage-notice > svg {
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--tkrvue-accent);
}
.saas-cartography-usage-notice.is-warning > svg {
color: #b45309;
}
.saas-cartography-usage-notice p,
.saas-cartography-usage-notice strong,
.saas-cartography-usage-notice span {
margin: 0;
}
.saas-cartography-usage-notice p {
display: grid;
gap: 2px;
font-size: var(--tkrvue-font-size-sm);
line-height: 1.4;
}
.saas-cartography-usage-notice span {
color: var(--tkrvue-muted);
font-size: 11px;
}
.saas-cartography-usage-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.saas-cartography-usage-metrics article {
display: grid;
gap: 4px;
align-content: start;
min-width: 0;
min-height: 92px;
padding: 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.saas-cartography-usage-metrics article > span,
.saas-cartography-usage-metrics article > small {
color: var(--tkrvue-muted);
font-size: 10px;
line-height: 1.3;
}
.saas-cartography-usage-metrics article > strong {
overflow-wrap: anywhere;
color: var(--tkrvue-text);
font-size: 14px;
line-height: 1.25;
}
.saas-cartography-usage-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.saas-cartography-usage-grid > section {
display: grid;
gap: 9px;
min-width: 0;
padding: 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.saas-cartography-usage-grid h4 {
margin: 0;
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-sm);
}
.saas-cartography-service-list,
.saas-cartography-compliance-list {
display: grid;
gap: 6px;
}
.saas-cartography-service-row {
display: grid;
grid-template-columns: minmax(130px, 1fr) auto 70px;
gap: 8px;
align-items: center;
min-width: 0;
padding: 6px 0;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-border) 66%, transparent);
font-size: 11px;
}
.saas-cartography-service-row:last-child {
border-bottom: 0;
}
.saas-cartography-service-row > span:last-child {
color: var(--tkrvue-muted);
text-align: right;
}
.saas-cartography-compliance-list > span {
display: flex;
align-items: center;
gap: 7px;
min-height: 27px;
color: var(--tkrvue-muted);
font-size: 11px;
}
.saas-cartography-compliance-list > span svg,
.saas-cartography-policy-link svg {
flex: 0 0 auto;
width: 15px;
height: 15px;
}
.saas-cartography-compliance-list > span.is-ok svg {
color: #15803d;
}
.saas-cartography-compliance-list > span.is-warning svg {
color: #b45309;
}
.saas-cartography-policy-link {
display: inline-flex;
justify-self: start;
align-items: center;
gap: 6px;
min-height: 32px;
margin-top: 2px;
text-decoration: none;
}
.saas-cartography-external-provider {
display: grid;
gap: 9px;
padding: 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.saas-cartography-external-provider-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.saas-cartography-external-provider-head h4,
.saas-cartography-external-provider-head p,
.saas-cartography-quota-empty {
margin: 0;
}
.saas-cartography-external-provider-head h4 {
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-sm);
}
.saas-cartography-external-provider-head p,
.saas-cartography-quota-empty,
.saas-cartography-reset-policy {
margin-top: 3px;
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.4;
}
.saas-cartography-reset-policy {
margin: 0;
}
.saas-cartography-quota-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.saas-cartography-quota-row {
display: grid;
gap: 3px;
min-width: 0;
padding: 8px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 92%, var(--tkrvue-layer-surface-bg));
font-size: 11px;
}
.saas-cartography-quota-row > span,
.saas-cartography-quota-row > small {
color: var(--tkrvue-muted);
}
.saas-cartography-quota-row b {
color: var(--tkrvue-text);
font-size: 13px;
}
.saas-cartography-provider-metrics {
margin-top: 2px;
}
.saas-cartography-reset-summary {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 9px;
align-items: start;
padding: 10px 11px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 32%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-bg));
}
.saas-cartography-reset-summary > svg {
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--tkrvue-accent);
}
.saas-cartography-reset-summary p {
display: grid;
gap: 2px;
margin: 0;
}
.saas-cartography-reset-summary span,
.saas-cartography-reset-summary small {
color: var(--tkrvue-muted);
font-size: 10px;
line-height: 1.35;
}
.saas-cartography-reset-summary strong {
color: var(--tkrvue-text);
font-size: 14px;
}
.saas-map-matching-card > .saas-main-card-body {
display: grid;
gap: 12px;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 96%, var(--tkrvue-accent));
}
.saas-map-matching-card.is-collapsed > .saas-main-card-body {
display: none;
}
.saas-map-matching-help {
margin: 0;
padding: 8px 10px;
border-left: 3px solid color-mix(in srgb, var(--tkrvue-accent) 62%, var(--tkrvue-border));
border-radius: 0 6px 6px 0;
background: color-mix(in srgb, var(--tkrvue-accent) 6%, transparent);
color: var(--tkrvue-muted);
font-size: 11px;
line-height: 1.45;
}
.saas-map-matching-form {
display: grid;
grid-template-columns:
minmax(200px, 1.35fr)
minmax(180px, 1fr)
minmax(145px, 0.7fr)
minmax(220px, 1.1fr);
gap: 10px;
align-items: end;
}
.saas-translation-worker-form {
grid-template-columns:
minmax(210px, 1.3fr)
minmax(175px, 1fr)
minmax(115px, 0.55fr)
minmax(150px, 0.75fr)
minmax(260px, 1.3fr);
}
.saas-map-matching-form > label {
display: grid;
gap: 4px;
min-width: 0;
color: var(--tkrvue-muted);
font-size: 11px;
}
.saas-map-matching-form input,
.saas-map-matching-form select {
width: 100%;
min-width: 0;
height: 34px;
padding: 0 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
}
.saas-translation-worker-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
min-height: 50px;
}
.saas-translation-worker-metrics > span {
display: grid;
place-content: center;
gap: 2px;
min-width: 0;
padding: 6px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
font-size: 10px;
text-align: center;
}
.saas-translation-worker-metrics strong {
color: var(--tkrvue-text);
font-size: 14px;
overflow-wrap: anywhere;
}
.saas-map-matching-endpoint,
.saas-map-matching-dataset,
.saas-map-matching-cache-required {
grid-column: span 2;
}
.saas-map-matching-enabled {
position: relative;
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr);
gap: 9px !important;
align-items: center;
min-height: 50px;
padding: 7px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text) !important;
cursor: pointer;
}
.saas-map-matching-enabled > input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.saas-map-matching-switch {
position: relative;
display: block;
width: 36px;
height: 20px;
border: 1px solid color-mix(in srgb, var(--tkrvue-muted) 45%, var(--tkrvue-border));
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-muted) 16%, var(--tkrvue-layer-bg));
transition: background 160ms ease, border-color 160ms ease;
}
.saas-map-matching-switch::after {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
content: "";
transition: transform 160ms ease;
}
.saas-map-matching-enabled > input:checked + .saas-map-matching-switch {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
}
.saas-map-matching-enabled > input:checked + .saas-map-matching-switch::after {
transform: translateX(16px);
}
.saas-map-matching-enabled > input:focus-visible + .saas-map-matching-switch {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 58%, transparent);
outline-offset: 2px;
}
.saas-map-matching-enabled-copy {
display: grid;
gap: 1px;
min-width: 0;
}
.saas-map-matching-enabled-copy strong {
color: var(--tkrvue-text);
font-size: 11px;
line-height: 1.2;
}
.saas-map-matching-enabled-copy small {
overflow: hidden;
color: var(--tkrvue-muted);
font-size: 10px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.saas-map-matching-cache-required {
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
min-height: 34px;
padding: 0 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text) !important;
}
.saas-map-matching-cache-required input {
width: 15px;
height: 15px;
padding: 0;
}
.saas-map-matching-form .input-with-unit {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
min-width: 0;
}
.saas-map-matching-form .input-with-unit input {
border-radius: 6px 0 0 6px;
}
.saas-map-matching-form .input-with-unit span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 9px;
border: 1px solid var(--tkrvue-border);
border-left: 0;
border-radius: 0 6px 6px 0;
background: color-mix(in srgb, var(--tkrvue-input-bg) 76%, var(--tkrvue-border));
color: var(--tkrvue-muted);
}
.saas-map-matching-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding-top: 2px;
}
.saas-map-matching-actions button {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
}
.saas-map-matching-actions button svg {
width: 15px;
height: 15px;
}
.saas-map-matching-test-result {
margin-right: auto;
color: var(--tkrvue-muted);
font-size: 11px;
}
.saas-map-matching-test-result.is-success {
color: #166534;
}
.saas-map-matching-test-result.is-error {
color: #b91c1c;
}
.saas-map-matching-test-result.is-pending {
color: #92400e;
}
@media (max-width: 1260px) {
.saas-cartography-usage-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.saas-cartography-quota-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.saas-map-matching-form {
grid-template-columns: repeat(2, minmax(190px, 1fr));
}
.saas-translation-worker-form {
grid-template-columns: repeat(2, minmax(190px, 1fr));
}
.saas-map-matching-endpoint,
.saas-map-matching-dataset,
.saas-map-matching-cache-required {
grid-column: span 2;
}
.saas-main-card-header {
align-items: flex-start;
}
.saas-main-card-header-side {
padding-top: 10px;
}
}
@media (max-width: 760px) {
.saas-main-card-header {
display: grid;
gap: 0;
}
.saas-main-card-header-side,
.saas-map-matching-status {
justify-content: flex-start;
flex-wrap: wrap;
padding: 0 0 9px 21px;
white-space: normal;
}
.saas-main-card-title > span {
white-space: normal;
}
.saas-map-matching-form {
grid-template-columns: 1fr;
}
.saas-translation-worker-metrics {
min-height: 42px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.saas-cartography-usage-metrics,
.saas-cartography-usage-grid {
grid-template-columns: minmax(0, 1fr);
}
.saas-cartography-service-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.saas-cartography-service-row > span:last-child {
grid-column: 1 / -1;
text-align: left;
}
.saas-cartography-quota-list {
grid-template-columns: minmax(0, 1fr);
}
.saas-cartography-external-provider-head {
align-items: flex-start;
flex-direction: column;
}
.saas-map-matching-endpoint,
.saas-map-matching-dataset,
.saas-map-matching-cache-required {
grid-column: span 1;
}
.saas-map-matching-actions {
align-items: stretch;
flex-direction: column;
}
.saas-map-matching-test-result {
margin-right: 0;
}
}
/* Tableau de bord opérationnel */
.dashboard-layer .view-body {
gap: 12px;
position: relative;
container-type: inline-size;
}
.dashboard-layer.is-dashboard-loading .view-body::after {
content: "";
position: absolute;
inset: 0;
z-index: 12;
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-layer-bg) 72%, transparent);
cursor: progress;
}
.dashboard-premium-diagnostic {
display: grid;
gap: 10px;
margin-top: 14px;
padding: 12px 14px;
text-align: left;
}
.dashboard-premium-diagnostic-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.dashboard-premium-diagnostic-head small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.dashboard-premium-diagnostic p {
margin: 0;
color: var(--tkrvue-layer-text);
line-height: 1.45;
}
.dashboard-premium-diagnostic-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 0;
}
.dashboard-premium-diagnostic-facts > div {
min-width: 0;
padding: 7px 9px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 22%, var(--tkrvue-border));
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
}
.dashboard-premium-diagnostic-facts dt {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.dashboard-premium-diagnostic-facts dd {
margin: 3px 0 0;
overflow-wrap: anywhere;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
}
.dashboard-premium-diagnostic-facts code {
color: var(--tkrvue-accent);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: .9em;
}
.dashboard-premium-diagnostic-action {
padding-top: 9px;
border-top: 1px solid color-mix(in srgb, #7c3aed 20%, var(--tkrvue-border));
font-size: var(--tkrvue-font-size-sm);
}
.dashboard-delivery-diagnostic {
display: grid;
gap: 7px;
margin-top: 8px;
padding: 8px 10px;
font-size: var(--tkrvue-font-size-xs);
}
.dashboard-delivery-diagnostic-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.dashboard-delivery-diagnostic-head > strong {
color: #6d28d9;
font-size: var(--tkrvue-font-size-sm);
}
.dashboard-delivery-diagnostic ul {
display: grid;
gap: 4px;
margin: 0;
padding-left: 17px;
}
.dashboard-delivery-diagnostic li {
color: var(--tkrvue-layer-text);
line-height: 1.35;
}
.dashboard-delivery-diagnostic li small {
display: block;
margin-top: 2px;
color: var(--tkrvue-muted);
}
.dashboard-delivery-diagnostic p {
margin: 0;
color: var(--tkrvue-muted);
}
.dashboard-zone-premium-actions {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid color-mix(in srgb, #7c3aed 18%, var(--tkrvue-border));
}
.dashboard-zone-premium-actions > button,
.dashboard-zone-advanced-actions .danger-action {
min-height: 32px;
}
.dashboard-zone-advanced-actions {
min-width: min(100%, 300px);
border: 1px solid color-mix(in srgb, var(--tkrvue-danger, #dc2626) 24%, var(--tkrvue-border));
border-radius: var(--tkrvue-radius-sm, 7px);
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 3%, var(--tkrvue-layer-bg));
}
.dashboard-zone-advanced-actions > summary {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
color: var(--tkrvue-status-error-text);
cursor: pointer;
list-style: none;
}
.dashboard-zone-advanced-actions > summary::-webkit-details-marker { display: none; }
.dashboard-zone-advanced-actions > summary span,
.dashboard-zone-advanced-actions > summary svg { width: 16px; height: 16px; flex: 0 0 16px; }
.dashboard-zone-advanced-actions[open] > summary svg { transform: rotate(180deg); }
.dashboard-zone-advanced-actions > div {
display: grid;
justify-items: start;
gap: 8px;
padding: 0 9px 9px;
}
.dashboard-zone-advanced-actions p {
margin: 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.4;
}
.dashboard-zone-admin-confirm { width: min(620px, 100%); }
.dashboard-zone-admin-confirm .view-confirm-content {
display: grid;
gap: 10px;
}
.dashboard-zone-admin-context {
display: block;
padding: 7px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: var(--tkrvue-radius-sm, 7px);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
line-height: 1.4;
}
.dashboard-zone-admin-confirm label {
display: grid;
gap: 5px;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
}
.dashboard-zone-admin-confirm label small {
color: var(--tkrvue-muted);
font-weight: 400;
}
.dashboard-zone-admin-confirm textarea,
.dashboard-zone-admin-confirm input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: var(--tkrvue-radius-sm, 7px);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 8px 10px;
font: inherit;
font-weight: 400;
}
.dashboard-zone-admin-confirm textarea { resize: vertical; }
.dashboard-zone-admin-validation { color: var(--tkrvue-status-error-text) !important; font-weight: 700; }
@media (max-width: 700px) {
.dashboard-premium-diagnostic-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-zone-premium-actions,
.dashboard-zone-premium-actions > button,
.dashboard-zone-advanced-actions { width: 100%; }
}
@media (max-width: 430px) {
.dashboard-premium-diagnostic-facts {
grid-template-columns: minmax(0, 1fr);
}
}
.dashboard-view-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 2px 2px 0;
}
.dashboard-view-head h3,
.dashboard-view-head p {
margin: 0;
}
.dashboard-view-head h3 {
margin-top: 2px;
color: var(--tkrvue-layer-text);
font-size: calc(var(--tkrvue-font-size-title) + 2px);
}
.dashboard-view-head p {
margin-top: 5px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.dashboard-kicker {
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-xs);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.dashboard-refresh {
flex: 0 0 auto;
}
.dashboard-help {
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
}
.dashboard-help summary {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 13px;
cursor: pointer;
list-style: none;
}
.dashboard-help summary::-webkit-details-marker {
display: none;
}
.dashboard-help summary span {
color: var(--tkrvue-accent);
transition: transform .16s ease;
}
.dashboard-help[open] summary span {
transform: rotate(90deg);
}
.dashboard-help p {
margin: 0;
padding: 0 14px 13px 35px;
color: var(--tkrvue-muted);
line-height: 1.5;
}
.dashboard-warnings {
display: grid;
gap: 5px;
}
.dashboard-warnings p,
.dashboard-limit {
margin: 0;
padding: 8px 10px;
border: 1px solid var(--tkrvue-status-warning-border);
border-radius: 7px;
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
font-size: var(--tkrvue-font-size-sm);
}
.dashboard-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(140px, 1fr));
gap: 10px;
}
.dashboard-metrics.is-four {
grid-template-columns: repeat(4, minmax(130px, 1fr));
}
.dashboard-metric {
position: relative;
display: grid;
gap: 3px;
min-width: 0;
padding: 12px 14px 11px;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: var(--tkrvue-layer-surface-bg);
box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.dashboard-metric::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: #94a3b8;
}
.dashboard-metric.is-blue::before { background: #3b82f6; }
.dashboard-metric.is-green::before { background: #22c55e; }
.dashboard-metric.is-orange::before { background: #f59e0b; }
.dashboard-metric.is-red::before { background: #ef4444; }
.dashboard-metric > span,
.dashboard-metric > small {
overflow: hidden;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-metric > strong {
color: var(--tkrvue-layer-text);
font-size: calc(var(--tkrvue-font-size-title) + 5px);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.dashboard-metric.is-clickable,
.dashboard-metric.is-filterable {
cursor: pointer;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dashboard-metric.is-clickable:hover,
.dashboard-metric.is-clickable:focus-visible,
.dashboard-metric.is-filterable:hover,
.dashboard-metric.is-filterable:focus-visible {
border-color: var(--tkrvue-accent);
box-shadow: 0 5px 15px rgba(15, 23, 42, .11);
outline: none;
transform: translateY(-1px);
}
.dashboard-alert-scope-actions {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-muted);
}
.dashboard-alert-scope-actions > div {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dashboard-alert-scope-actions .secondary-action {
min-height: 38px;
}
.dashboard-state-card,
.dashboard-panel {
border: 1px solid var(--tkrvue-border);
border-radius: 11px;
background: var(--tkrvue-layer-surface-bg);
}
.dashboard-state-card {
display: grid;
gap: 9px;
padding: 12px 14px;
}
.dashboard-section-head > div,
.dashboard-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dashboard-section-head strong {
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-title);
}
.dashboard-section-head small {
display: block;
margin-top: 2px;
color: var(--tkrvue-muted);
}
.dashboard-state-bar {
display: flex;
height: 11px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-border) 70%, transparent);
}
.dashboard-state-bar span { min-width: 0; }
.dashboard-state-bar .is-moving { background: #22c55e; }
.dashboard-state-bar .is-stopped { background: #3b82f6; }
.dashboard-state-bar .is-stale { background: #f59e0b; }
.dashboard-state-bar .is-offline { background: #ef4444; }
.dashboard-state-legend {
display: flex;
flex-wrap: wrap;
gap: 7px 16px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.dashboard-state-legend span::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
background: #94a3b8;
}
.dashboard-state-legend .is-moving::before { background: #22c55e; }
.dashboard-state-legend .is-stopped::before { background: #3b82f6; }
.dashboard-state-legend .is-stale::before { background: #f59e0b; }
.dashboard-state-legend .is-offline::before { background: #ef4444; }
.dashboard-overview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.dashboard-overview-content,
.dashboard-overview-summary {
display: grid;
min-width: 0;
gap: 10px;
}
.dashboard-overview-tabs {
display: flex;
min-width: 0;
gap: 4px;
overflow-x: auto;
padding: 0 2px;
border-bottom: 1px solid var(--tkrvue-border);
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--tkrvue-accent) 38%, transparent) transparent;
}
.dashboard-overview-tabs button {
min-height: 38px;
box-sizing: border-box;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 7px;
margin: 0 0 -1px;
padding: 7px 12px;
border: 1px solid transparent;
border-bottom-color: var(--tkrvue-border);
border-radius: 8px 8px 0 0;
background: transparent;
color: var(--tkrvue-muted);
cursor: pointer;
font: inherit;
font-size: var(--tkrvue-font-size-md);
white-space: nowrap;
}
.dashboard-overview-tabs button:hover,
.dashboard-overview-tabs button:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 7%, transparent);
color: var(--tkrvue-layer-text);
outline: none;
}
.dashboard-overview-tabs button[aria-selected="true"] {
border-color: var(--tkrvue-accent) var(--tkrvue-accent) var(--tkrvue-layer-bg);
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-accent);
font-weight: 700;
}
.dashboard-overview-tabs button > span {
min-width: 19px;
box-sizing: border-box;
padding: 2px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, transparent);
color: currentColor;
font-size: var(--tkrvue-font-size-xs);
font-variant-numeric: tabular-nums;
text-align: center;
}
.dashboard-overview-content:not([data-dashboard-overview-mode="general"]) .dashboard-overview-summary,
.dashboard-overview-content:not([data-dashboard-overview-mode="general"]) .dashboard-overview-grid > .dashboard-panel {
display: none;
}
.dashboard-overview-content:not([data-dashboard-overview-mode="general"]) .dashboard-overview-grid {
grid-template-columns: minmax(0, 1fr);
}
.dashboard-overview-content[data-dashboard-overview-mode="general"] .dashboard-panel-tools {
display: none;
}
.dashboard-overview-content[data-dashboard-overview-mode="priorities"] .dashboard-overview-grid > [data-dashboard-overview-panel="priorities"],
.dashboard-overview-content[data-dashboard-overview-mode="silent"] .dashboard-overview-grid > [data-dashboard-overview-panel="silent"],
.dashboard-overview-content[data-dashboard-overview-mode="maintenance"] .dashboard-overview-grid > [data-dashboard-overview-panel="maintenance"],
.dashboard-overview-content[data-dashboard-overview-mode="period"] .dashboard-overview-grid > [data-dashboard-overview-panel="period"] {
display: block;
}
.dashboard-panel {
min-width: 0;
overflow: hidden;
}
.dashboard-panel-head {
min-height: 38px;
padding: 0 12px;
border-bottom: 1px solid var(--tkrvue-border);
}
.dashboard-panel-head h4 {
margin: 0;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
}
.dashboard-panel-head button {
padding: 3px 0;
border: 0;
background: none;
color: var(--tkrvue-accent);
cursor: pointer;
font: inherit;
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
}
.dashboard-panel-tools {
display: grid;
grid-template-columns: minmax(170px, 1fr) minmax(145px, .55fr) auto;
gap: 8px;
align-items: center;
padding: 8px 9px;
border-bottom: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-layer-bg) 55%, transparent);
}
.dashboard-panel-tools .dashboard-search {
min-width: 0;
}
.dashboard-panel-tools input,
.dashboard-panel-tools select {
width: 100%;
min-width: 0;
height: 34px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
font-size: var(--tkrvue-font-size-md);
}
.dashboard-panel-tools input {
padding: 0 9px 0 32px;
}
.dashboard-panel-tools select {
padding: 0 8px;
}
.dashboard-panel-tools > strong {
min-width: 44px;
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-sm);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.dashboard-event-list,
.dashboard-device-list {
display: grid;
gap: 8px;
}
.dashboard-panel .dashboard-event-list,
.dashboard-panel .dashboard-device-list {
padding: 9px;
}
.dashboard-panel-list-scroll {
max-height: min(350px, 42vh);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--tkrvue-accent) 42%, transparent) transparent;
}
.dashboard-panel-list-scroll::-webkit-scrollbar {
width: 9px;
}
.dashboard-panel-list-scroll::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 42%, transparent);
background-clip: padding-box;
}
.dashboard-overview-content:not([data-dashboard-overview-mode="general"]) .dashboard-panel-list-scroll {
max-height: min(680px, 62vh);
}
.dashboard-panel-limit {
margin: 0;
padding: 7px 10px;
border-top: 1px solid var(--tkrvue-border);
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
font-size: var(--tkrvue-font-size-xs);
}
.dashboard-panel-more {
display: flex;
justify-content: center;
padding: 8px 10px;
border-top: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-layer-bg) 55%, transparent);
}
.dashboard-panel-more button {
width: max-content;
min-width: 0;
min-height: 32px;
padding: 5px 10px;
font: inherit;
font-size: var(--tkrvue-font-size-sm);
}
.dashboard-panel-more button svg {
width: 15px;
height: 15px;
}
.dashboard-filter-empty {
padding: 22px 14px;
color: var(--tkrvue-muted);
text-align: center;
}
.dashboard-event {
position: relative;
display: grid;
grid-template-columns: 8px minmax(0, 1fr) auto;
gap: 10px;
align-items: start;
min-width: 0;
padding: 10px 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
}
.dashboard-event.has-alert-icon {
grid-template-columns: 28px minmax(0, 1fr) auto;
}
.dashboard-event-icon {
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-bg));
color: var(--tkrvue-accent);
}
.dashboard-event-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.dashboard-event.is-critical .dashboard-event-icon,
.dashboard-event.is-high .dashboard-event-icon {
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 10%, var(--tkrvue-layer-bg));
color: var(--tkrvue-danger, #dc2626);
}
.dashboard-event.is-medium .dashboard-event-icon {
background: color-mix(in srgb, #d97706 12%, var(--tkrvue-layer-bg));
color: color-mix(in srgb, #d97706 84%, var(--tkrvue-layer-text));
}
.dashboard-event.is-low .dashboard-event-icon {
background: color-mix(in srgb, #16a34a 11%, var(--tkrvue-layer-bg));
color: color-mix(in srgb, #15803d 86%, var(--tkrvue-layer-text));
}
.dashboard-event-marker {
width: 8px;
height: 8px;
margin-top: 5px;
border-radius: 50%;
background: #60a5fa;
box-shadow: 0 0 0 4px color-mix(in srgb, #60a5fa 18%, transparent);
}
.dashboard-event.is-critical .dashboard-event-marker,
.dashboard-event.is-high .dashboard-event-marker { background: #ef4444; box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 18%, transparent); }
.dashboard-event.is-medium .dashboard-event-marker { background: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 18%, transparent); }
.dashboard-event.is-low .dashboard-event-marker { background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 18%, transparent); }
.dashboard-event-main,
.dashboard-event-title {
min-width: 0;
}
.dashboard-event-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.dashboard-event-title > strong {
overflow: hidden;
color: var(--tkrvue-layer-text);
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-event-main p {
margin: 4px 0;
overflow: hidden;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-event-main > small {
display: block;
overflow: hidden;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-event-foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
margin-top: 7px;
}
.dashboard-pill,
.dashboard-status {
display: inline-flex;
align-items: center;
min-height: 20px;
box-sizing: border-box;
padding: 2px 7px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
white-space: nowrap;
}
.dashboard-pill.is-critical,
.dashboard-pill.is-high,
.dashboard-status.is-open,
.dashboard-status.is-delivery_error,
.dashboard-status.is-overdue { border-color: var(--tkrvue-status-error-border); background: var(--tkrvue-status-error-bg); color: var(--tkrvue-status-error-text); }
.dashboard-pill.is-medium,
.dashboard-status.is-in_progress,
.dashboard-status.is-due_soon,
.dashboard-status.is-delivery_pending { border-color: var(--tkrvue-status-warning-border); background: var(--tkrvue-status-warning-bg); color: var(--tkrvue-status-warning-text); }
.dashboard-pill.is-low,
.dashboard-status.is-not_sent,
.dashboard-status.is-notified,
.dashboard-status.is-completed,
.dashboard-status.is-resolved,
.dashboard-status.is-closed { border-color: var(--tkrvue-status-success-border); background: var(--tkrvue-status-success-bg); color: var(--tkrvue-status-success-text); }
.dashboard-alert-workflow {
display: inline-flex;
min-width: 0;
}
.dashboard-alert-workflow > .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.dashboard-alert-status-control {
min-width: 112px;
min-height: 26px;
padding: 2px 26px 2px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background-color: var(--tkrvue-input-bg);
color: var(--tkrvue-layer-text);
font: inherit;
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
cursor: pointer;
}
.dashboard-alert-status-control.is-open {
border-color: var(--tkrvue-status-error-border);
background-color: var(--tkrvue-status-error-bg);
color: var(--tkrvue-status-error-text);
}
.dashboard-alert-status-control.is-in_progress {
border-color: var(--tkrvue-status-warning-border);
background-color: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
}
.dashboard-alert-status-control.is-closed {
border-color: var(--tkrvue-status-success-border);
background-color: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
}
.dashboard-alert-status-control:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 42%, transparent);
outline-offset: 1px;
}
.dashboard-alert-status-control:disabled {
cursor: wait;
opacity: .65;
}
.dashboard-delivery {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.dashboard-delivery-channels {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
min-width: 0;
}
.dashboard-delivery-channels-label {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.dashboard-delivery-channel {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 22px;
box-sizing: border-box;
padding: 2px 7px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 600;
white-space: nowrap;
}
.dashboard-delivery-channel svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.dashboard-delivery-channel.is-sent {
border-color: var(--tkrvue-status-success-border);
background: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
}
.dashboard-delivery-channel.is-error {
border-color: var(--tkrvue-status-error-border);
background: var(--tkrvue-status-error-bg);
color: var(--tkrvue-status-error-text);
}
.dashboard-delivery-channel.is-pending {
border-color: var(--tkrvue-status-warning-border);
background: var(--tkrvue-status-warning-bg);
color: var(--tkrvue-status-warning-text);
}
.dashboard-delivery-channel.is-ignored,
.dashboard-delivery-channel.is-unknown {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-muted);
}
.dashboard-delivery-recipients {
margin-top: 8px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 22%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
}
.dashboard-delivery-recipients > summary {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 4px 9px;
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-sm);
cursor: pointer;
list-style: none;
}
.dashboard-delivery-recipients > summary::-webkit-details-marker { display: none; }
.dashboard-delivery-recipients > summary::before { content: "▸"; font-size: 1.1em; }
.dashboard-delivery-recipients[open] > summary::before { content: "▾"; }
.dashboard-delivery-recipients > summary svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.dashboard-delivery-recipients-body {
display: grid;
gap: 8px;
padding: 0 10px 10px;
border-top: 1px solid color-mix(in srgb, var(--tkrvue-accent) 16%, var(--tkrvue-border));
}
.dashboard-delivery-recipients-body > p {
margin: 8px 0 0;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.dashboard-delivery-recipients-body ul {
display: grid;
gap: 5px;
margin: 0;
padding: 0;
list-style: none;
}
.dashboard-delivery-recipients-body li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 6px 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-layer-bg);
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-xs);
}
.dashboard-delivery-recipient-name {
display: inline-flex;
min-width: 0;
flex-direction: column;
gap: 1px;
}
.dashboard-delivery-recipient-name strong { overflow-wrap: anywhere; }
.dashboard-delivery-recipient-name small { color: var(--tkrvue-muted); }
.dashboard-delivery-recipient-channel { color: var(--tkrvue-status-error-text); text-align: right; }
.dashboard-delivery-recipients-body .secondary-action { justify-self: start; min-height: 30px; font-size: var(--tkrvue-font-size-sm); }
.dashboard-map-action {
display: inline-grid;
width: 30px;
height: 30px;
place-items: center;
padding: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-accent);
cursor: pointer;
}
.dashboard-map-action:hover {
border-color: var(--tkrvue-accent);
}
.dashboard-map-action svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.dashboard-device-row {
display: grid;
grid-template-columns: 9px minmax(0, 1fr) minmax(125px, auto) auto;
gap: 9px;
align-items: center;
min-width: 0;
padding: 8px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-surface-bg);
}
.dashboard-device-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #ef4444;
}
.dashboard-device-row.is-stale .dashboard-device-dot { background: #f59e0b; }
.dashboard-device-row > div { min-width: 0; }
.dashboard-device-row strong,
.dashboard-device-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-device-row small { color: var(--tkrvue-muted); font-size: var(--tkrvue-font-size-xs); }
.dashboard-device-state { text-align: right; }
.dashboard-device-state span { display: block; color: var(--tkrvue-layer-text); font-size: var(--tkrvue-font-size-sm); }
.dashboard-period-panel dl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin: 0;
padding: 10px;
}
.dashboard-period-panel dl > div {
padding: 9px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-layer-bg);
}
.dashboard-period-panel dt { color: var(--tkrvue-muted); font-size: var(--tkrvue-font-size-sm); }
.dashboard-period-panel dd { margin: 3px 0 0; color: var(--tkrvue-layer-text); font-size: var(--tkrvue-font-size-title); font-weight: 800; }
.dashboard-filterbar {
display: grid;
grid-template-columns: minmax(250px, 1.4fr) minmax(140px, .7fr) minmax(140px, .7fr) auto;
gap: 9px;
align-items: center;
padding: 9px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg);
}
.dashboard-filterbar.is-alerts {
grid-template-columns: minmax(250px, 1.4fr) repeat(3, minmax(135px, .65fr)) auto;
}
.dashboard-search {
position: relative;
display: block;
}
.dashboard-search > span {
position: absolute;
top: 50%;
left: 9px;
width: 15px;
height: 15px;
color: var(--tkrvue-muted);
pointer-events: none;
transform: translateY(-50%);
}
.dashboard-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dashboard-filterbar input,
.dashboard-filterbar select {
width: 100%;
height: 36px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font: inherit;
}
.dashboard-filterbar input { padding: 0 9px 0 32px; }
.dashboard-filterbar select { padding: 0 8px; }
.dashboard-filterbar > strong { min-width: 38px; color: var(--tkrvue-accent); text-align: center; font-variant-numeric: tabular-nums; }
.dashboard-timeline {
position: relative;
padding-left: 13px;
}
.dashboard-timeline::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 17px;
width: 2px;
background: var(--tkrvue-border);
}
.dashboard-timeline .dashboard-event {
margin-left: 11px;
}
.dashboard-timeline .dashboard-event-marker {
position: relative;
z-index: 1;
}
.dashboard-empty {
display: grid;
gap: 4px;
padding: 18px 14px;
color: var(--tkrvue-muted);
text-align: center;
}
.dashboard-empty small {
color: var(--tkrvue-muted);
}
@container (max-width: 780px) {
.dashboard-metrics,
.dashboard-metrics.is-four {
grid-template-columns: repeat(2, minmax(130px, 1fr));
}
.dashboard-overview-grid {
grid-template-columns: 1fr;
}
.dashboard-filterbar {
grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr);
}
.dashboard-filterbar.is-alerts {
grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr);
}
}
@container (max-width: 520px) {
.dashboard-view-head {
align-items: stretch;
flex-direction: column;
}
.dashboard-refresh {
align-self: flex-start;
}
.dashboard-metrics,
.dashboard-metrics.is-four {
grid-template-columns: 1fr;
}
.dashboard-filterbar {
grid-template-columns: 1fr;
}
.dashboard-filterbar.is-alerts {
grid-template-columns: 1fr;
}
.dashboard-overview-tabs button {
min-height: 36px;
padding: 6px 9px;
}
.dashboard-panel-tools {
grid-template-columns: minmax(0, 1fr) auto;
}
.dashboard-panel-tools .dashboard-search {
grid-column: 1 / -1;
}
.dashboard-panel-tools > strong {
align-self: center;
}
.dashboard-filterbar > strong {
justify-self: start;
}
.dashboard-device-row {
grid-template-columns: 9px minmax(0, 1fr) auto;
}
.dashboard-device-state {
grid-column: 2 / -1;
text-align: left;
}
.dashboard-period-panel dl {
grid-template-columns: 1fr;
}
.dashboard-event-title {
align-items: flex-start;
flex-direction: column;
}
}
/* Permission-controlled navigation and Tools / Access-rights layers. */
.sidebar-menu-pending .menu-section {
display: none !important;
}
.tools-view-layer .view-body,
.access-rights-layer .view-body {
container-type: inline-size;
}
.tools-view-layer {
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.tools-view-layer :where(button, input, select, textarea) {
font-family: inherit;
font-size: inherit;
}
.tools-view-layer .data-table {
font-size: var(--tkrvue-font-size-md);
}
.tools-view-layer .source-pill {
font-size: var(--tkrvue-font-size-xs);
}
.tools-card {
min-width: 0;
margin-top: 12px;
overflow: clip;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg, #fff);
}
.tools-card > summary,
.access-matrix details > summary {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 12px 14px;
cursor: pointer;
list-style: none;
font-weight: 750;
}
.tools-card > summary::-webkit-details-marker,
.access-matrix details > summary::-webkit-details-marker {
display: none;
}
.tools-card > summary::before,
.access-matrix details > summary::before {
content: "›";
flex: 0 0 auto;
color: var(--tkrvue-primary);
font-size: 1.25em;
transform: rotate(0deg);
transition: transform .16s ease;
}
.tools-card[open] > summary::before,
.access-matrix details[open] > summary::before {
transform: rotate(90deg);
}
.access-rights-layer .tools-card > summary::before,
.access-rights-layer .access-matrix details > summary::before {
content: none;
}
.access-rights-layer .access-details-chevron {
width: 22px;
min-width: 22px;
height: 22px;
min-height: 22px;
color: var(--tkrvue-accent);
transition: transform 160ms ease;
}
.access-rights-layer .access-details-chevron svg {
width: 18px;
height: 18px;
}
.access-rights-layer details:not([open]) > summary .access-details-chevron {
transform: rotate(-90deg);
}
.tools-card > summary .source-pill {
margin-left: auto;
}
.tools-card-body {
min-width: 0;
padding: 12px 14px 14px;
border-top: 1px solid var(--tkrvue-border);
}
.tools-metrics .metric {
min-width: 0;
}
.tools-metrics .metric strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Vue télémétrie : même carte pliable, tableaux bornés et pagination commune. */
.telemetry-intro {
display: flex;
flex-direction: column;
gap: 4px;
margin: 12px 0;
}
.telemetry-intro span,
.telemetry-muted { color: var(--tkrvue-text-muted); }
.telemetry-filters {
display: grid;
grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(150px, 1fr)) auto auto;
gap: 10px;
align-items: end;
margin-bottom: 12px;
}
.telemetry-filters label { display: grid; gap: 4px; min-width: 0; }
.telemetry-filters label > span { font-size: var(--tkrvue-font-size-xs); font-weight: 700; color: var(--tkrvue-text-muted); }
.telemetry-filters .telemetry-check { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.telemetry-filters .telemetry-check > span { color: var(--tkrvue-text); font-size: var(--tkrvue-font-size-sm); }
.telemetry-summary-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }
.telemetry-summary-pills > span,
.telemetry-metric { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--tkrvue-border); border-radius: 999px; background: var(--tkrvue-surface-muted, #f1f5f9); font-size: var(--tkrvue-font-size-xs); }
.telemetry-table-wrap { max-height: 440px; min-height: 250px; overflow: auto; }
.telemetry-table-wrap .data-table { min-width: 760px; }
.telemetry-table-wrap .data-table td small { display: block; color: var(--tkrvue-text-muted); }
.telemetry-metric-list { display: flex; flex-wrap: wrap; gap: 4px; max-width: 440px; }
.telemetry-metric { flex-direction: column; align-items: flex-start; border-radius: 8px; }
.telemetry-metric strong { font-size: var(--tkrvue-font-size-xs); }
.telemetry-device-detail { margin-top: 8px; }
.telemetry-device-detail summary { cursor: pointer; color: var(--tkrvue-primary); font-size: var(--tkrvue-font-size-sm); }
.telemetry-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-top: 6px; }
.telemetry-detail-grid > div { display: grid; gap: 2px; padding: 6px; border: 1px solid var(--tkrvue-border); border-radius: 7px; background: var(--tkrvue-surface-muted, #f8fafc); }
.telemetry-detail-grid span, .telemetry-detail-grid small { color: var(--tkrvue-text-muted); font-size: var(--tkrvue-font-size-xs); }
.telemetry-detail-grid strong { font-size: var(--tkrvue-font-size-sm); }
.telemetry-pagination { justify-content: center; gap: 18px; margin-top: 12px; }
.telemetry-raw-table-wrap { min-height: 180px; }
.tools-device-toolbar {
display: grid;
grid-template-columns: minmax(190px, 1fr) auto auto auto;
align-items: center;
gap: 8px;
min-width: 0;
}
.tools-search-field {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-input-bg, #fff);
}
.tools-search-field input {
width: 100%;
min-width: 0;
min-height: 34px;
border: 0;
background: transparent;
color: var(--tkrvue-input-text);
outline: 0;
}
.tools-selection-action svg {
width: 16px;
height: 16px;
}
.tools-device-list {
max-height: 300px;
margin-top: 10px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
}
.tools-device-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
min-width: 0;
padding: 9px 11px;
border-bottom: 1px solid var(--tkrvue-border);
cursor: pointer;
}
.tools-device-row:last-child {
border-bottom: 0;
}
.tools-device-row:hover {
background: color-mix(in srgb, var(--tkrvue-primary) 6%, transparent);
}
.tools-device-row > span,
.tools-device-row strong,
.tools-device-row small,
.tools-device-row code {
min-width: 0;
overflow-wrap: anywhere;
}
.tools-device-row > span {
display: grid;
gap: 2px;
}
.tools-device-row small,
.tools-diagnostic-table small,
.tools-history-list span,
.tools-history-list time {
display: block;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.tools-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(160px, 1fr)) auto;
align-items: end;
gap: 12px;
}
.tools-form-grid > label,
.access-organization-field,
.access-user-search-field,
.access-user-select,
.access-user-role {
display: grid;
gap: 5px;
min-width: 0;
}
.tools-form-grid :where(input, select),
.access-rights-layer :where(input, select) {
width: 100%;
min-width: 0;
max-width: 100%;
}
.tools-form-grid :where(input, select) {
min-height: 36px;
padding: 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.tools-form-grid > label > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.tools-actions,
.tools-quality-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.tools-actions button,
.tools-quality-actions button {
width: fit-content;
max-width: 100%;
}
.tools-history-list {
display: grid;
gap: 0;
max-height: 240px;
overflow-y: auto;
}
.tools-history-list > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 10px;
align-items: center;
padding: 9px 4px;
border-bottom: 1px solid var(--tkrvue-border);
}
.tools-table-scroll {
width: 100%;
max-width: 100%;
overflow-x: auto;
}
.tools-diagnostic-table {
width: 100%;
min-width: 760px;
}
.tools-diagnostic-table td:first-child {
min-width: 160px;
}
.tools-anomaly-list {
max-height: 360px;
overflow-y: auto;
scrollbar-width: thin;
}
.tools-anomaly-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
min-width: 0;
padding: 9px 2px;
border-bottom: 1px solid var(--tkrvue-border);
}
.tools-anomaly-row > span:nth-child(2) {
display: grid;
gap: 2px;
}
.mobile-app-inventory-configuration {
margin-top: 14px;
overflow: clip;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg, #fff);
}
.mobile-app-inventory-configuration > summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
cursor: pointer;
list-style: none;
}
.mobile-app-inventory-configuration > summary > svg {
width: 20px;
min-width: 20px;
height: 20px;
flex: 0 0 20px;
color: var(--tkrvue-accent);
}
.mobile-app-inventory-configuration > summary > span {
display: grid;
gap: 2px;
min-width: 0;
}
.mobile-app-inventory-configuration > summary small {
color: var(--tkrvue-muted);
font-weight: 400;
}
.mobile-app-inventory-configuration-body {
padding: 12px 14px 14px;
border-top: 1px solid var(--tkrvue-border);
}
.mobile-app-inventory-definition {
display: grid;
grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.5fr) minmax(130px, .7fr) minmax(120px, .7fr) minmax(90px, .4fr) auto auto;
align-items: end;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--tkrvue-border);
}
.mobile-app-inventory-definition > label:not(.mobile-app-inventory-definition-required) {
display: grid;
gap: 4px;
min-width: 0;
}
.mobile-app-inventory-definition label > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.mobile-app-inventory-definition :where(input[type="text"], select) {
width: 100%;
min-width: 0;
}
.mobile-app-inventory-definition-required {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 36px;
white-space: nowrap;
}
@media (max-width: 1100px) {
.mobile-app-inventory-definition {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-app-inventory-definition-label {
grid-column: 1 / -1;
}
}
.access-mode-tabs {
display: flex;
gap: 4px;
max-width: 100%;
margin-bottom: 12px;
overflow-x: auto;
border-bottom: 1px solid var(--tkrvue-border);
}
.access-mode-tabs button {
flex: 0 0 auto;
border-color: transparent;
border-radius: 8px 8px 0 0;
background: transparent;
}
.access-mode-tabs button.active {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 10%, transparent);
color: var(--tkrvue-accent);
font-weight: 750;
}
.premium-admin-badge {
display: inline-flex;
align-items: center;
gap: 5px;
width: fit-content;
padding: 4px 9px;
border: 1px solid #b997ff;
border-radius: 999px;
background: #f1e9ff;
color: #5d2ea6;
font-size: .78em;
font-weight: 750;
white-space: nowrap;
}
.premium-admin-badge svg {
width: 15px;
height: 15px;
flex: 0 0 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.access-context-bar {
display: flex;
align-items: end;
justify-content: space-between;
gap: 12px;
min-width: 0;
padding: 11px 13px;
border: 1px solid var(--tkrvue-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg, #fff);
}
.access-context-bar > div,
.access-context-bar small {
display: grid;
gap: 3px;
}
.access-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
gap: 12px;
min-width: 0;
}
.access-role-tabs {
display: flex;
align-items: center;
gap: 6px;
max-width: 100%;
overflow-x: auto;
padding-bottom: 6px;
}
.access-role-tabs .access-role-tab {
flex: 0 0 auto;
min-height: 34px;
color: var(--tkrvue-accent);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.access-role-tabs .access-role-tab.active,
.access-role-tabs .access-role-tab.active:hover {
border-color: var(--tkrvue-accent);
background: var(--tkrvue-accent);
color: var(--tkrvue-accent-contrast, #fff);
}
.access-role-icon,
.access-definition-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: currentColor;
}
.access-role-icon svg,
.access-definition-icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.access-definition-icon {
width: 32px;
height: 32px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
.access-editor-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 10px 0;
}
.access-editor-heading > div {
display: grid;
gap: 2px;
}
.access-matrix {
display: grid;
gap: 8px;
min-width: 0;
}
.access-matrix > details {
min-width: 0;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
}
.access-matrix > details > div {
border-top: 1px solid var(--tkrvue-border);
}
.access-permission-row {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(190px, auto);
gap: 10px;
align-items: center;
min-width: 0;
padding: 9px 11px;
border-bottom: 1px solid var(--tkrvue-border);
}
.access-permission-row:last-child {
border-bottom: 0;
}
.access-permission-row > span {
min-width: 0;
}
.access-permission-row > span small {
display: block;
overflow-wrap: anywhere;
}
.access-permission-row > div {
display: flex;
justify-content: end;
gap: 7px;
flex-wrap: wrap;
}
.access-permission-row label {
display: grid;
gap: 3px;
min-width: 88px;
}
.access-definition-list {
display: grid;
gap: 8px;
}
.access-definition-row {
display: grid;
grid-template-columns: auto minmax(160px, 1fr) minmax(160px, 1fr) auto auto;
gap: 10px;
align-items: end;
min-width: 0;
padding: 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
}
.access-definition-row > label:not(.access-active-field) {
display: grid;
gap: 4px;
min-width: 0;
}
.access-user-select,
.access-user-role {
margin-bottom: 10px;
}
.access-user-search {
display: grid;
gap: 5px;
min-width: 0;
margin-bottom: 12px;
}
.access-user-search-field > span,
.access-user-select > span,
.access-user-role > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.access-user-search-control {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
min-width: 0;
min-height: var(--tkrvue-control-height, 36px);
padding: 0 5px 0 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
.access-user-search-control:focus-within {
border-color: var(--tkrvue-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tkrvue-accent) 18%, transparent);
}
.access-user-search-icon {
display: inline-flex;
color: var(--tkrvue-accent);
}
.access-user-search-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.access-user-search-control input {
min-height: 34px;
padding: 0 !important;
border: 0 !important;
outline: 0;
box-shadow: none !important;
background: transparent !important;
color: inherit;
font: inherit;
}
.access-user-search-control input::-webkit-search-cancel-button {
appearance: none;
}
.access-user-search-control .access-user-search-clear {
width: 28px;
min-width: 28px;
height: 28px;
min-height: 28px;
padding: 0;
border-color: transparent;
background: transparent;
color: var(--tkrvue-accent);
}
.access-user-search-control .access-user-search-clear:hover,
.access-user-search-control .access-user-search-clear:focus-visible {
border-color: color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-input-bg));
}
.access-user-search-control .access-user-search-clear svg {
width: 17px;
min-width: 17px;
height: 17px;
min-height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.access-user-search-hint {
min-height: 1.25em;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
@container (max-width: 980px) {
.access-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@container (max-width: 680px) {
.tools-device-toolbar,
.tools-form-grid,
.access-definition-row {
grid-template-columns: minmax(0, 1fr);
}
.tools-device-row {
grid-template-columns: auto minmax(0, 1fr);
}
.tools-device-row > :nth-child(n+3) {
grid-column: 2;
}
.tools-history-list > div,
.tools-anomaly-row,
.access-permission-row {
grid-template-columns: minmax(0, 1fr);
}
.tools-anomaly-row > input {
justify-self: start;
}
.access-permission-row > div {
justify-content: start;
}
}
/* Sélection commune à toutes les lignes et cartes interactives des layers. */
.view-layer :is(
.is-selected,
.device-position-list-item.is-active,
.map-zone-list-row.is-active,
.map-zone-list-item.is-active,
button.mailsettings-template-row.is-active,
.vehicle-onboarding-conflict-row.is-active,
.tkrvue-address-search-option.is-active
) {
--tkrvue-text: var(--tkrvue-selection-text);
--tkrvue-layer-text: var(--tkrvue-selection-text);
--tkrvue-muted: color-mix(in srgb, var(--tkrvue-selection-text) 72%, transparent);
background: var(--tkrvue-selection-bg);
color: var(--tkrvue-selection-text);
}
.view-layer :is(
.is-selected:not(tr),
.device-position-list-item.is-active,
.map-zone-list-row.is-active,
.map-zone-list-item.is-active,
button.mailsettings-template-row.is-active,
.vehicle-onboarding-conflict-row.is-active,
.tkrvue-address-search-option.is-active
) {
border-color: var(--tkrvue-selection-border);
}
.view-layer :is(.data-table, .organizations-table) tbody tr.is-selected td:first-child {
border-left-color: var(--tkrvue-selection-border);
}
.view-layer .mcd-table-card.is-selected {
outline-color: var(--tkrvue-selection-border);
}
/* Centre d'importation et de préparation du parc. */
.fleet-import-layer .view-body {
display: grid;
align-content: start;
gap: 12px;
container-type: inline-size;
}
.fleet-import-layer :is(input, select, textarea, button) {
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
.fleet-import-organization,
.fleet-import-card {
border: 1px solid var(--tkrvue-border);
border-radius: var(--tkrvue-radius, 10px);
background: var(--tkrvue-layer-section-bg, var(--tkrvue-input-bg));
}
.fleet-import-organization {
display: flex;
align-items: end;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
}
.fleet-import-organization label {
display: grid;
gap: 5px;
min-width: min(440px, 100%);
}
.fleet-import-organization label > span,
.fleet-import-form label > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.fleet-import-organization select,
.fleet-import-form :is(input, select, textarea),
.fleet-import-work-row :is(input, select),
.fleet-baseline-table input,
.fleet-reminder-table :is(input, select) {
min-height: var(--tkrvue-control-height, 36px);
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 7px 10px;
}
.fleet-import-organization-note,
.fleet-import-file-selection,
.fleet-import-inline-note {
display: flex;
align-items: center;
gap: 8px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.fleet-document-policy {
display: block;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 38%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-accent);
border-radius: var(--tkrvue-radius, 10px);
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-section-bg));
color: var(--tkrvue-text);
}
.fleet-document-policy-body {
display: grid;
grid-template-columns: auto minmax(280px, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
}
.fleet-document-policy.is-partial {
border-color: color-mix(in srgb, var(--tkrvue-warning, #d97706) 42%, var(--tkrvue-border));
border-left-color: var(--tkrvue-warning, #d97706);
background: color-mix(in srgb, var(--tkrvue-warning, #d97706) 7%, var(--tkrvue-layer-section-bg));
}
.fleet-document-policy.is-disabled {
border-color: var(--tkrvue-border);
border-left-color: var(--tkrvue-muted);
background: color-mix(in srgb, var(--tkrvue-muted) 6%, var(--tkrvue-layer-section-bg));
}
.fleet-document-policy-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 34px;
color: var(--tkrvue-accent);
}
.fleet-document-policy-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.fleet-document-policy-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.fleet-document-policy-copy > span,
.fleet-document-policy-copy > small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.fleet-document-policy-kinds {
display: grid;
gap: 6px;
justify-items: stretch;
}
.fleet-document-policy-kind {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 4px 9px;
border: 1px solid var(--tkrvue-border);
border-radius: 999px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
white-space: nowrap;
}
.fleet-document-policy-kind.is-stored {
border-color: color-mix(in srgb, var(--tkrvue-success, #15803d) 40%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-success, #15803d) 10%, var(--tkrvue-input-bg));
color: var(--tkrvue-success, #15803d);
}
.fleet-document-policy-kind.is-not-stored {
border-color: color-mix(in srgb, var(--tkrvue-warning, #d97706) 48%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-warning, #d97706) 12%, var(--tkrvue-input-bg));
color: var(--tkrvue-warning, #d97706);
}
.fleet-import-tabs {
display: flex;
align-items: stretch;
gap: 3px;
min-height: 41px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
border-bottom: 1px solid var(--tkrvue-border);
box-sizing: border-box;
}
.fleet-import-tabs button {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
min-height: 40px;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 8px 8px 0 0;
padding: 8px 14px;
background: transparent;
color: var(--tkrvue-muted);
cursor: pointer;
white-space: nowrap;
}
.fleet-import-tabs button:hover {
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-section-bg));
color: var(--tkrvue-text);
}
.fleet-import-tabs button.is-active {
border-color: var(--tkrvue-accent) var(--tkrvue-border) transparent;
border-top-width: 2px;
background: var(--tkrvue-layer-section-bg, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
.fleet-import-tabs svg,
.fleet-import-card-head svg,
.fleet-import-dropzone > svg {
width: 19px;
height: 19px;
}
.fleet-import-tabs svg {
flex: 0 0 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.fleet-import-content {
display: grid;
gap: 12px;
}
.fleet-import-batch-error-status {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px 12px;
width: 100%;
}
.fleet-import-batch-error-status > span:first-child {
min-width: 0;
flex: 0 1 auto;
}
.fleet-import-batch-error-status > button {
flex: 0 0 auto;
width: auto;
}
.fleet-import-card {
overflow: hidden;
}
.fleet-import-card-head,
.fleet-import-editor-head,
.fleet-import-work-head,
.fleet-import-footer-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 14px;
border-bottom: 1px solid var(--tkrvue-border);
}
.fleet-import-card-head > span,
.fleet-import-editor-head > span {
display: grid;
gap: 3px;
}
.fleet-import-card-head small,
.fleet-import-editor-head small,
.fleet-import-document-list small,
.fleet-baseline-table small,
.fleet-reminder-table small {
display: block;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
font-weight: 400;
}
.fleet-import-section-toggle {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 8px;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.fleet-import-section-toggle:focus-visible {
outline: 2px solid var(--tkrvue-accent);
outline-offset: 3px;
border-radius: 6px;
}
.fleet-import-section-toggle .context-help-chevron {
flex: 0 0 36px;
}
.fleet-import-section-toggle .context-help-chevron svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.fleet-import-section-toggle-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.fleet-import-collapsible.is-collapsed > .fleet-import-collapsible-body {
display: none;
}
.fleet-import-collapsible.is-collapsed > .fleet-import-card-head,
.fleet-import-collapsible.is-collapsed > .fleet-import-editor-head {
border-bottom-color: transparent;
}
.fleet-import-collapsible.is-collapsed .fleet-import-section-toggle .context-help-chevron {
transform: rotate(-90deg);
}
.fleet-import-actions,
.fleet-import-footer-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.fleet-import-dropzone {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 9px;
min-height: 105px;
margin: 14px;
border: 2px dashed color-mix(in srgb, var(--tkrvue-accent) 48%, var(--tkrvue-border));
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-section-bg));
color: var(--tkrvue-muted);
cursor: pointer;
}
.fleet-import-dropzone.is-dragging {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-section-bg));
}
.fleet-import-dropzone.is-disabled {
cursor: progress;
opacity: .68;
pointer-events: none;
}
.fleet-import-dropzone > svg {
color: var(--tkrvue-accent);
}
.fleet-import-file-selection {
justify-content: space-between;
flex-wrap: wrap;
padding: 0 14px 14px;
}
.fleet-import-selected-files {
margin: 0 14px 14px;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-section-bg);
color: var(--tkrvue-layer-text);
}
.fleet-import-selected-files-head,
.fleet-import-selected-file {
display: flex;
align-items: center;
gap: 10px;
}
.fleet-import-selected-files-head {
justify-content: space-between;
padding: 8px 11px;
border-bottom: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-section-bg));
font-size: var(--tkrvue-font-size-sm);
}
.fleet-import-selected-files-head > span {
min-width: 28px;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
font-weight: 700;
text-align: center;
}
.fleet-import-selected-file-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fleet-import-selected-file {
min-width: 0;
padding: 8px 10px;
border-bottom: 1px solid var(--tkrvue-border);
}
.fleet-import-selected-file:nth-child(odd) {
border-right: 1px solid var(--tkrvue-border);
}
.fleet-import-selected-file-copy {
display: grid;
min-width: 0;
margin-right: auto;
}
.fleet-import-selected-file-copy strong,
.fleet-import-selected-file-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fleet-import-selected-file-copy strong {
font-size: var(--tkrvue-font-size-sm);
}
.fleet-import-selected-file-copy small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.fleet-import-remove-file {
flex: 0 0 auto;
color: var(--tkrvue-danger, #dc2626);
}
.fleet-import-busy-message {
display: inline-flex;
align-items: center;
gap: 9px;
}
.fleet-import-status-spinner {
width: 17px;
height: 17px;
border-width: 2px;
border-color: color-mix(in srgb, currentColor 26%, transparent);
border-top-color: currentColor;
}
#topbar {
position: relative;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: 12px;
}
#topbar > #titleBlock {
grid-column: 1;
grid-row: 1;
justify-self: start;
max-width: 100%;
}
#topbar > #contextSelector {
grid-column: 2;
grid-row: 1;
justify-self: center;
}
.topbar-right-zone {
grid-column: 3;
grid-row: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
justify-self: stretch;
}
.universal-search {
position: relative;
flex: 0 0 auto;
}
.universal-search svg {
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.universal-search-trigger,
.universal-search-icon-button,
.universal-search-reset {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 30%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
color: var(--tkrvue-header-text);
font: inherit;
cursor: pointer;
}
.universal-search-trigger {
min-height: 38px;
padding: 6px 11px;
border-radius: 10px;
font-weight: 700;
}
.universal-search-trigger:hover,
.universal-search-trigger:focus-visible,
.universal-search-trigger[aria-expanded="true"],
.universal-search-icon-button:hover,
.universal-search-icon-button:focus-visible,
.universal-search-reset:hover,
.universal-search-reset:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-input-bg));
outline: none;
}
.universal-search-trigger-icon,
.universal-search-trigger-icon svg,
.universal-search-input-icon,
.universal-search-input-icon svg,
.universal-search-icon-button span,
.universal-search-icon-button svg {
width: 19px;
height: 19px;
flex: 0 0 19px;
}
.universal-search-trigger-icon,
.universal-search-input-icon {
display: inline-flex;
color: var(--tkrvue-accent);
}
.universal-search-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1270;
display: grid;
width: min(760px, calc(100vw - 24px));
max-height: min(760px, calc(100vh - 78px));
overflow: auto;
border: 1px solid var(--tkrvue-border);
border-radius: 13px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.26);
}
.universal-search-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 14px 15px;
border-bottom: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
}
.universal-search-header > div {
display: grid;
min-width: 0;
gap: 3px;
}
.universal-search-header strong {
font-size: var(--tkrvue-font-size-lg);
}
.universal-search-header small,
.universal-search-instructions,
.universal-search-result-copy small {
color: var(--tkrvue-muted);
}
.universal-search-icon-button {
width: 34px;
height: 34px;
flex: 0 0 34px;
padding: 0;
border-radius: 8px;
}
.tkrvue-close-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 !important;
flex: 0 0 36px !important;
border: 1px solid color-mix(in srgb, var(--tkrvue-danger, #dc2626) 42%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-danger, #dc2626);
font: inherit;
font-size: 0;
line-height: 1;
box-sizing: border-box;
cursor: pointer;
}
.tkrvue-close-button > span:not(.msg-count) {
display: inline-flex;
align-items: center;
justify-content: center;
}
.tkrvue-close-button svg,
.tkrvue-close-button > span:not(.msg-count),
.tkrvue-close-button > span:not(.msg-count) svg {
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
}
.tkrvue-close-button svg {
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2.15;
stroke-linecap: round;
stroke-linejoin: round;
}
.tkrvue-close-button:hover,
.tkrvue-close-button:focus-visible {
border-color: var(--tkrvue-danger, #dc2626);
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 13%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-danger, #dc2626);
outline: none;
}
/* Les popups Leaflet ne permettent pas d'injecter le bouton commun. Leur croix
reprend son langage visuel, avec une taille liée à la police de l'utilisateur. */
.leaflet-container a.leaflet-popup-close-button {
top: 4px;
right: 4px;
display: inline-flex;
width: var(--tkrvue-map-close-size) !important;
min-width: var(--tkrvue-map-close-size) !important;
max-width: var(--tkrvue-map-close-size) !important;
height: var(--tkrvue-map-close-size) !important;
min-height: var(--tkrvue-map-close-size) !important;
max-height: var(--tkrvue-map-close-size) !important;
align-items: center;
justify-content: center;
padding: 0 !important;
border: 1px solid color-mix(in srgb, var(--tkrvue-danger, #dc2626) 42%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 7%, var(--tkrvue-layer-surface-bg));
color: transparent !important;
font-size: 0 !important;
box-sizing: border-box;
}
.leaflet-container a.leaflet-popup-close-button::before,
.leaflet-container a.leaflet-popup-close-button::after {
content: "";
position: absolute;
width: var(--tkrvue-map-close-icon-size);
height: 2px;
border-radius: 999px;
background: var(--tkrvue-danger, #dc2626);
}
.leaflet-container a.leaflet-popup-close-button::before {
transform: rotate(45deg);
}
.leaflet-container a.leaflet-popup-close-button::after {
transform: rotate(-45deg);
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus-visible {
border-color: var(--tkrvue-danger, #dc2626);
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 13%, var(--tkrvue-layer-surface-bg));
outline: none;
}
.leaflet-popup.tkrvue-map-popup .leaflet-popup-content-wrapper {
border: 1px solid var(--tkrvue-map-tooltip-border);
border-radius: 9px;
background: var(--tkrvue-map-tooltip-bg);
color: var(--tkrvue-map-tooltip-text);
box-shadow: var(--tkrvue-map-tooltip-shadow);
}
.leaflet-popup.tkrvue-map-popup .leaflet-popup-tip {
background: var(--tkrvue-map-tooltip-bg);
}
.leaflet-popup.tkrvue-map-popup .leaflet-popup-content {
margin: 8px calc(var(--tkrvue-map-close-size) + 8px) 8px 9px;
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.2;
}
.tkrvue-map-popup-content {
display: grid;
gap: 2px;
}
.tkrvue-map-popup-content strong {
color: var(--tkrvue-map-tooltip-text);
font-size: var(--tkrvue-font-size-md);
line-height: 1.16;
}
.universal-search-form {
display: grid;
gap: 6px;
padding: 13px 15px 5px;
}
.universal-search-form > label {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
}
.universal-search-input-row {
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-height: 38px;
box-sizing: border-box;
padding: 1px 5px 1px 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-input-bg);
}
.universal-search-input-row:focus-within {
border-color: var(--tkrvue-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tkrvue-accent) 16%, transparent);
}
.universal-search-input-row input {
width: 100%;
min-width: 0;
min-height: 34px;
box-sizing: border-box;
padding-block: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--tkrvue-input-text);
font: inherit;
}
.universal-search-input-row .primary-action {
min-height: 34px;
height: 34px;
white-space: nowrap;
}
.universal-search-input-row .primary-action span:first-child,
.universal-search-input-row .primary-action span:first-child svg,
.universal-search-reset span:first-child,
.universal-search-reset span:first-child svg {
width: 16px;
height: 16px;
}
.universal-search-instructions {
margin: 0;
padding: 2px 15px 10px;
font-size: var(--tkrvue-font-size-xs);
}
.universal-search-examples {
display: grid;
gap: 9px;
padding: 0 15px 13px;
}
.universal-search-example-group {
display: grid;
gap: 5px;
}
.universal-search-example-group > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
}
.universal-search-example-group > div {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.universal-search-example-group button {
max-width: 100%;
padding: 5px 8px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 24%, var(--tkrvue-border));
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 6%, var(--tkrvue-input-bg));
color: var(--tkrvue-text);
font: inherit;
font-size: var(--tkrvue-font-size-xs);
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.universal-search-example-group button:hover,
.universal-search-example-group button:focus-visible {
border-color: var(--tkrvue-accent);
color: var(--tkrvue-accent);
outline: none;
}
.universal-search-results-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 15px;
border-top: 1px solid var(--tkrvue-border);
border-bottom: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-accent) 5%, var(--tkrvue-layer-bg));
}
.universal-search-reset {
min-height: 31px;
padding: 4px 8px;
border-radius: 7px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.universal-search-results {
display: grid;
padding: 6px;
}
.universal-search-result {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 18px;
align-items: center;
gap: 9px;
width: 100%;
min-width: 0;
padding: 9px;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-border) 72%, transparent);
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.universal-search-result:last-child {
border-bottom-color: transparent;
}
.universal-search-result:hover,
.universal-search-result:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 11%, transparent);
outline: none;
}
.universal-search-result-icon,
.universal-search-result-icon svg {
width: 21px;
height: 21px;
color: var(--tkrvue-accent);
}
.universal-search-result-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.universal-search-result-copy strong,
.universal-search-result-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.universal-search-result-copy small {
font-size: var(--tkrvue-font-size-xs);
}
.universal-search-result-kind {
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-2xs, 10px);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.universal-search-result-arrow,
.universal-search-result-arrow svg {
width: 16px;
height: 16px;
color: var(--tkrvue-muted);
}
.universal-search-empty {
padding: 22px 14px;
color: var(--tkrvue-muted);
text-align: center;
}
.navigation-history {
position: relative;
flex: 0 1 250px;
min-width: 0;
}
.navigation-history-trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
max-width: 250px;
min-height: 38px;
margin: 0;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 30%, var(--tkrvue-border));
border-radius: 10px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-input-bg));
color: var(--tkrvue-header-text);
font: inherit;
cursor: pointer;
}
.navigation-history-trigger:hover,
.navigation-history-trigger:focus-visible,
.navigation-history-trigger[aria-expanded="true"] {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-input-bg));
outline: none;
}
.navigation-history-trigger-icon,
.navigation-history-trigger-caret,
.navigation-history-entry-icon,
.navigation-history-entry-arrow,
.navigation-history-clear > span:first-child {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.navigation-history-trigger-icon,
.navigation-history-trigger-icon svg {
width: 19px;
height: 19px;
color: var(--tkrvue-accent);
}
.navigation-history-trigger-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
}
.navigation-history-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 16%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-xs);
font-weight: 800;
}
.navigation-history-trigger-caret,
.navigation-history-trigger-caret svg {
width: 15px;
height: 15px;
}
.navigation-history-trigger[aria-expanded="true"] .navigation-history-trigger-caret {
transform: rotate(180deg);
}
.navigation-history-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1250;
width: min(430px, calc(100vw - 24px));
max-height: min(620px, calc(100vh - 78px));
overflow: auto;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
}
.navigation-history-heading {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 8px 8px 13px;
border-bottom: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
font-weight: 800;
}
.navigation-history-list {
display: grid;
padding: 6px;
}
.navigation-history-entry {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto 16px;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
padding: 9px 8px;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-border) 72%, transparent);
border-radius: 7px;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.navigation-history-entry:last-child {
border-bottom-color: transparent;
}
.navigation-history-entry:hover,
.navigation-history-entry:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 11%, transparent);
outline: none;
}
.navigation-history-entry-icon,
.navigation-history-entry-icon svg {
width: 18px;
height: 18px;
color: var(--tkrvue-accent);
}
.navigation-history-entry-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.navigation-history-entry-copy strong,
.navigation-history-entry-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.navigation-history-entry-copy small,
.navigation-history-entry time {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.navigation-history-entry time {
white-space: nowrap;
}
.navigation-history-entry-arrow,
.navigation-history-entry-arrow svg {
width: 14px;
height: 14px;
color: var(--tkrvue-muted);
}
.navigation-history-empty {
padding: 18px;
color: var(--tkrvue-muted);
text-align: center;
}
.navigation-history-clear {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: calc(100% - 12px);
margin: 0 6px 6px;
padding: 8px;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-muted);
font: inherit;
cursor: pointer;
}
.navigation-history-clear:hover,
.navigation-history-clear:focus-visible {
border-color: var(--tkrvue-danger, #dc2626);
color: var(--tkrvue-danger, #dc2626);
outline: none;
}
.navigation-history-clear > span:first-child,
.navigation-history-clear > span:first-child svg {
width: 16px;
height: 16px;
}
.saas-navigation-history-setting {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 12px;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 30%, var(--tkrvue-border));
border-left: 4px solid var(--tkrvue-accent);
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 6%, var(--tkrvue-layer-bg));
}
.saas-navigation-history-copy {
display: grid;
min-width: 0;
gap: 3px;
}
.saas-navigation-history-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.saas-navigation-history-copy > span,
.saas-navigation-history-copy > small {
color: var(--tkrvue-muted);
}
.saas-navigation-history-field {
display: grid;
flex: 0 0 180px;
gap: 4px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.saas-navigation-history-field input {
width: 100%;
height: 34px;
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 6px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
padding: 0 9px;
font: inherit;
}
.saas-itinerary-address-fields {
display: grid;
flex: 0 0 390px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.saas-itinerary-address-fields .saas-navigation-history-field {
min-width: 0;
width: auto;
}
.fleet-import-job-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
width: 240px;
min-width: 240px;
max-width: 240px;
margin: 0;
padding: 5px 9px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 34%, var(--tkrvue-border));
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-input-bg));
color: var(--tkrvue-header-text);
font: inherit;
text-align: left;
cursor: pointer;
}
.fleet-import-job-indicator:hover,
.fleet-import-job-indicator:focus-visible {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-accent) 17%, var(--tkrvue-input-bg));
outline: none;
}
.fleet-import-job-indicator.is-ready {
border-color: color-mix(in srgb, var(--tkrvue-success, #15803d) 45%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-success, #15803d) 11%, var(--tkrvue-input-bg));
}
.fleet-import-job-indicator.is-error {
border-color: color-mix(in srgb, var(--tkrvue-warning, #d97706) 48%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-warning, #d97706) 12%, var(--tkrvue-input-bg));
}
.fleet-import-job-spinner {
width: 17px;
height: 17px;
border-width: 2px;
}
.fleet-import-job-icon,
.fleet-import-job-icon svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
color: var(--tkrvue-accent);
}
.fleet-import-job-copy {
display: grid;
min-width: 0;
line-height: 1.15;
}
.fleet-import-job-copy strong,
.fleet-import-job-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fleet-import-job-copy strong {
font-size: var(--tkrvue-font-size-xs);
}
.fleet-import-job-copy strong {
display: inline-flex;
align-items: center;
gap: 5px;
}
.fleet-import-job-progress:not(:empty)::before {
content: "·";
margin-right: 5px;
color: var(--tkrvue-muted);
}
.fleet-import-job-copy small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-2xs, 10px);
}
.fleet-import-job-action {
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
white-space: nowrap;
}
@media (max-width: 1900px) {
.fleet-import-job-indicator {
width: auto;
min-width: 62px;
max-width: 88px;
flex: 0 0 auto;
justify-content: center;
padding-inline: 8px;
}
.fleet-import-job-label,
.fleet-import-job-copy small,
.fleet-import-job-action {
display: none;
}
.fleet-import-job-copy strong {
font-size: var(--tkrvue-font-size-xs);
line-height: 1;
}
.fleet-import-job-progress:not(:empty)::before {
content: none;
}
.fleet-import-job-progress:empty {
display: none;
}
}
@media (max-width: 1450px) {
.universal-search-trigger {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
}
.universal-search-trigger-label {
display: none;
}
.navigation-history {
flex: 0 0 40px;
}
.navigation-history-trigger {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
}
.navigation-history-trigger-label,
.navigation-history-trigger-caret {
display: none;
}
.navigation-history-count {
position: absolute;
top: -5px;
right: -5px;
min-width: 17px;
height: 17px;
padding: 0 4px;
font-size: 9px;
}
}
@media (max-width: 1100px) {
.fleet-import-job-indicator {
width: 40px;
min-width: 40px;
height: 40px;
justify-content: center;
padding: 0;
margin: 0;
}
.fleet-import-job-copy,
.fleet-import-job-action {
display: none;
}
}
@media (max-width: 900px) {
#topbar {
display: flex !important;
column-gap: 0;
}
.topbar-right-zone {
display: flex;
flex: 0 0 auto;
gap: 5px;
min-width: 0;
}
.navigation-history-menu {
position: fixed;
top: 56px;
right: 8px;
left: 8px;
width: auto;
max-height: calc(100vh - 66px);
}
.universal-search-panel {
position: fixed;
top: 56px;
right: 8px;
left: 8px;
width: auto;
max-height: calc(100vh - 66px);
}
}
@media (max-width: 620px) {
.universal-search-input-row {
grid-template-columns: 22px minmax(0, 1fr);
}
.universal-search-input-row .primary-action {
grid-column: 1 / -1;
width: 100%;
}
}
@media (max-width: 700px) {
.saas-navigation-history-setting {
align-items: stretch;
flex-direction: column;
}
.saas-navigation-history-field {
flex-basis: auto;
width: min(100%, 220px);
}
.saas-itinerary-address-fields {
flex-basis: auto;
width: 100%;
}
}
@media (max-width: 460px) {
.saas-itinerary-address-fields {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.fleet-import-selected-file-list {
grid-template-columns: 1fr;
}
.fleet-import-selected-file:nth-child(odd) {
border-right: 0;
}
}
.fleet-file-button {
cursor: pointer;
}
.fleet-import-review-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
min-height: 0;
padding: 12px;
}
.fleet-import-document-list {
max-height: 300px;
overflow: auto;
border: 1px solid var(--tkrvue-border);
border-radius: var(--tkrvue-radius, 10px);
background: var(--tkrvue-layer-section-bg, var(--tkrvue-input-bg));
}
.fleet-import-document-list .data-table tbody tr {
cursor: pointer;
}
.fleet-import-document-cell {
display: flex;
align-items: center;
gap: 9px;
min-width: 220px;
}
.fleet-import-document-cell > span:last-child {
min-width: 0;
}
.fleet-import-document-cell strong {
display: block;
overflow-wrap: anywhere;
}
.fleet-import-file-icon {
--fleet-import-file-color: var(--tkrvue-muted);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 8px;
background: color-mix(in srgb, var(--fleet-import-file-color) 10%, var(--tkrvue-input-bg));
color: var(--fleet-import-file-color);
}
.fleet-import-file-icon.is-pdf {
--fleet-import-file-color: var(--tkrvue-danger, #dc2626);
}
.fleet-import-file-icon.is-image {
--fleet-import-file-color: var(--tkrvue-accent);
}
.fleet-import-file-icon svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
}
.fleet-import-file-icon small {
position: absolute;
right: -5px;
bottom: -4px;
min-width: 23px;
margin: 0;
padding: 1px 3px;
border: 2px solid var(--tkrvue-layer-section-bg, var(--tkrvue-input-bg));
border-radius: 5px;
background: var(--fleet-import-file-color);
color: #fff;
font-size: 8px;
font-weight: 800;
line-height: 12px;
text-align: center;
}
.fleet-import-document-list .data-table tbody tr.is-selected .fleet-import-file-icon {
background: color-mix(in srgb, var(--fleet-import-file-color) 12%, var(--tkrvue-selection-bg));
}
.fleet-import-document-list .data-table tbody tr.is-selected .fleet-import-file-icon small {
border-color: var(--tkrvue-selection-bg);
}
.fleet-import-document-list .fleet-action-col {
width: 94px;
min-width: 94px;
padding-left: 6px;
padding-right: 6px;
text-align: center;
}
.fleet-import-row-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
}
.fleet-import-row-open {
color: var(--tkrvue-accent);
}
.fleet-import-row-open.is-loading svg {
animation: tkrvue-spin .8s linear infinite;
}
.fleet-import-row-retry.is-loading {
cursor: wait;
}
.fleet-import-row-retry.is-loading svg {
animation: tkrvue-spin .8s linear infinite;
}
.fleet-import-row-delete {
margin: 0 auto;
}
.fleet-check-col {
width: 34px;
}
.fleet-import-editor {
min-width: 0;
overflow: auto;
scroll-margin-top: 12px;
border: 1px solid var(--tkrvue-border);
border-radius: var(--tkrvue-radius, 10px);
background: var(--tkrvue-layer-section-bg, var(--tkrvue-input-bg));
}
.fleet-import-editor:focus {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 58%, transparent);
outline-offset: 2px;
}
.fleet-import-editor.is-analyzing {
overflow: hidden;
}
.fleet-import-editor-loading {
display: grid;
justify-items: center;
align-content: center;
gap: 10px;
min-height: 310px;
padding: 28px;
text-align: center;
color: var(--tkrvue-text-muted);
}
.fleet-import-editor-loading > .tkrvue-spinner {
width: 30px;
height: 30px;
}
.fleet-import-editor-loading > strong {
color: var(--tkrvue-text);
font-size: var(--tkrvue-font-size-md);
}
.fleet-import-editor-loading > small {
max-width: 480px;
line-height: 1.45;
}
.fleet-import-editor-loading-line {
width: 46%;
height: 10px;
margin-top: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-layer-section-bg));
animation: fleet-import-loading-pulse 1.2s ease-in-out infinite alternate;
}
.fleet-import-editor-loading-line.is-medium { width: 62%; }
.fleet-import-editor-loading-line.is-long { width: 78%; }
@keyframes fleet-import-loading-pulse {
from { opacity: .45; }
to { opacity: 1; }
}
.fleet-import-editor-head,
.fleet-import-work-head {
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 92%, var(--tkrvue-accent));
}
.fleet-import-warnings {
display: grid;
gap: 5px;
margin: 12px 14px 0;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--tkrvue-warning, #d97706) 45%, var(--tkrvue-border));
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-warning, #d97706) 10%, var(--tkrvue-layer-section-bg));
}
.fleet-import-warnings span {
display: flex;
align-items: center;
gap: 7px;
font-size: var(--tkrvue-font-size-sm);
}
.fleet-import-warnings svg {
width: 16px;
height: 16px;
flex: 0 0 16px;
fill: none;
stroke: var(--tkrvue-warning, #d97706);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.fleet-import-form {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
padding: 14px;
}
.fleet-import-form label {
display: grid;
align-content: start;
gap: 5px;
min-width: 0;
}
.fleet-import-form label.is-wide {
grid-column: span 2;
}
.fleet-import-form label.is-full {
grid-column: 1 / -1;
}
.fleet-import-work-items {
display: grid;
gap: 7px;
padding: 12px 14px 14px;
}
.fleet-import-work-table {
overflow-x: auto;
scrollbar-gutter: stable;
}
.fleet-import-work-columns {
display: grid;
grid-template-columns: minmax(160px, .75fr) minmax(240px, 1.15fr) minmax(140px, .65fr) 56px 72px repeat(6, 96px) 38px;
gap: 8px;
padding: 8px 14px 0;
min-width: 1364px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.fleet-import-work-columns > span {
display: block;
min-width: 0;
font-weight: 600;
line-height: 1.25;
}
.fleet-import-work-columns > .fleet-import-work-ttc-heading {
display: grid;
align-content: start;
gap: 5px;
}
.fleet-import-work-ttc-summary {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 23px;
padding: 2px 5px;
border: 1px solid var(--tkrvue-status-error-border);
border-radius: 999px;
background: var(--tkrvue-status-error-bg);
color: var(--tkrvue-status-error-text);
font-family: inherit;
font-size: max(10px, calc(var(--tkrvue-font-size-sm) - 1px));
font-weight: 700;
line-height: 1.15;
white-space: nowrap;
transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.fleet-import-work-ttc-summary.is-success {
border-color: var(--tkrvue-status-success-border);
background: var(--tkrvue-status-success-bg);
color: var(--tkrvue-status-success-text);
}
.fleet-import-work-ttc-summary.is-critical {
border-color: var(--tkrvue-status-error-border);
background: var(--tkrvue-status-error-bg);
color: var(--tkrvue-status-error-text);
}
.fleet-import-work-row {
display: grid;
grid-template-columns: minmax(160px, .75fr) minmax(240px, 1.15fr) minmax(140px, .65fr) 56px 72px repeat(6, 96px) 38px;
align-items: center;
gap: 8px;
min-width: 1364px;
}
.fleet-work-type-combobox,
.fleet-work-type-control {
min-width: 0;
width: 100%;
}
.fleet-work-type-control {
position: relative;
}
.fleet-work-type-control > input[type="search"] {
width: 100%;
padding-right: 38px;
}
.fleet-work-type-control > input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.fleet-work-type-toggle {
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
display: inline-grid;
place-items: center;
width: 34px;
min-width: 34px;
padding: 0;
border: 0;
border-left: 1px solid color-mix(in srgb, var(--tkrvue-border) 70%, transparent);
border-radius: 0 var(--tkrvue-radius-sm, 7px) var(--tkrvue-radius-sm, 7px) 0;
background: transparent;
color: var(--tkrvue-accent);
cursor: pointer;
}
.fleet-work-type-toggle:hover,
.fleet-work-type-toggle:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 10%, transparent);
}
.fleet-work-type-toggle svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.fleet-work-type-menu {
position: fixed;
/* Le menu est rattaché à document.body. Il doit donc passer au-dessus de
la layer plein écran (31000), tout en restant sous les messages globaux. */
z-index: 32040;
display: grid;
gap: 2px;
overflow-y: auto;
padding: 5px;
border: 1px solid var(--tkrvue-border);
border-radius: var(--tkrvue-radius-md, 9px);
background: var(--tkrvue-input-bg);
box-shadow: var(--tkrvue-shadow-lg, 0 14px 32px rgb(15 23 42 / 18%));
color: var(--tkrvue-input-text);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
scrollbar-gutter: stable;
}
.fleet-work-type-menu.hidden {
display: none;
}
.fleet-work-type-option {
display: block;
width: 100%;
min-height: var(--tkrvue-control-height, 36px);
padding: 7px 10px;
border: 0;
border-radius: var(--tkrvue-radius-sm, 7px);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.fleet-work-type-option:hover,
.fleet-work-type-option.is-active {
background: color-mix(in srgb, var(--tkrvue-selection-bg) 72%, transparent);
color: var(--tkrvue-selection-text);
}
.fleet-work-type-option.is-selected {
font-weight: 700;
}
.fleet-work-type-empty {
padding: 10px;
color: var(--tkrvue-muted);
}
.fleet-import-work-quantity,
.fleet-import-work-price {
width: 100%;
text-align: end;
font-variant-numeric: tabular-nums;
}
.fleet-import-work-quantity {
appearance: textfield;
padding-inline: 5px;
}
.fleet-import-work-unit {
width: 100%;
text-align: center;
}
.fleet-import-work-quantity::-webkit-inner-spin-button,
.fleet-import-work-quantity::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
.fleet-import-work-row.is-learning-pending .fleet-work-type-control > input {
border-color: var(--tkrvue-success, #16a34a);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tkrvue-success, #16a34a) 25%, transparent);
}
.fleet-import-recent-name {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fleet-import-recent-name small {
flex: 0 0 auto;
padding: 2px 7px;
border-radius: 999px;
background: var(--tkrvue-selection-bg);
color: var(--tkrvue-selection-text);
}
.fleet-import-recent-table .data-table {
min-width: 940px;
}
.fleet-import-history-table,
.fleet-baseline-table,
.fleet-reminder-table {
overflow: auto;
max-height: min(58vh, 650px);
}
.fleet-import-history-table .data-table,
.fleet-baseline-table .data-table,
.fleet-reminder-table .data-table {
min-width: 900px;
}
.fleet-import-history-table tbody tr.is-selected,
.fleet-reminder-table tbody tr.is-selected {
background: var(--tkrvue-selection-bg);
color: var(--tkrvue-selection-text);
}
.fleet-initialization-selectors {
grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr) auto;
align-items: end;
}
.fleet-baseline-table input {
width: 100%;
min-width: 120px;
}
.fleet-baseline-toolbar {
display: flex;
align-items: end;
flex-wrap: wrap;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 94%, var(--tkrvue-accent));
}
.fleet-baseline-operation-filter {
position: relative;
align-self: end;
}
.fleet-baseline-operation-filter > button {
min-height: var(--tkrvue-control-height, 36px);
}
.fleet-baseline-operation-filter > button svg {
width: 17px;
height: 17px;
}
.fleet-baseline-operation-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 20;
display: grid;
gap: 9px;
width: min(380px, calc(100vw - 48px));
padding: 11px;
border: 1px solid var(--tkrvue-border);
border-radius: 10px;
background: var(--tkrvue-layer-surface-bg, var(--tkrvue-input-bg));
box-shadow: 0 12px 30px color-mix(in srgb, #000 20%, transparent);
}
.fleet-baseline-operation-menu[hidden] {
display: none;
}
.fleet-baseline-operation-search {
display: grid;
gap: 4px;
}
.fleet-baseline-operation-search > span,
.fleet-baseline-operation-menu-footer > span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.fleet-baseline-operation-search input {
min-height: var(--tkrvue-control-height, 36px);
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 7px 10px;
}
.fleet-baseline-operation-actions,
.fleet-baseline-operation-menu-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
}
.fleet-baseline-operation-actions {
justify-content: flex-start;
flex-wrap: wrap;
}
.fleet-baseline-operation-options {
display: grid;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--tkrvue-border);
border-radius: 8px;
}
.fleet-baseline-operation-option {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 7px 9px;
border-bottom: 1px solid var(--tkrvue-border);
cursor: pointer;
}
.fleet-baseline-operation-option:last-child {
border-bottom: 0;
}
.fleet-baseline-operation-option:hover {
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-surface-bg));
}
.fleet-baseline-operation-option > span {
display: grid;
gap: 2px;
min-width: 0;
}
.fleet-baseline-operation-option small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.fleet-baseline-toolbar label {
display: grid;
gap: 4px;
min-width: min(250px, 100%);
}
.fleet-baseline-toolbar label > span,
.fleet-baseline-visible-count {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.fleet-baseline-toolbar select {
min-height: var(--tkrvue-control-height, 36px);
box-sizing: border-box;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: var(--tkrvue-input-bg);
color: var(--tkrvue-text);
padding: 7px 10px;
}
.fleet-baseline-visible-count {
margin-left: auto;
padding-bottom: 8px;
}
.fleet-reminder-table td:nth-child(5) {
white-space: nowrap;
}
.fleet-reminder-table td:nth-child(5) input {
width: 78px;
}
.fleet-inline-check {
display: inline-flex;
align-items: center;
gap: 6px;
}
.fleet-import-footer-actions {
justify-content: flex-end;
border-top: 1px solid var(--tkrvue-border);
border-bottom: 0;
}
.fleet-import-editor-save-actions {
justify-content: space-between;
background: color-mix(in srgb, var(--tkrvue-layer-section-bg) 96%, var(--tkrvue-accent));
}
.fleet-import-editor-save-actions small {
max-width: 680px;
color: var(--tkrvue-muted);
line-height: 1.4;
}
.fleet-import-save-action {
flex: 0 0 auto;
white-space: nowrap;
}
@container (max-width: 980px) {
.fleet-document-policy-body {
grid-template-columns: auto minmax(0, 1fr);
}
.fleet-document-policy-kinds {
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fleet-document-policy-kind {
justify-content: center;
}
.fleet-import-review-grid {
grid-template-columns: minmax(0, 1fr);
}
.fleet-import-document-list {
max-height: 360px;
}
.fleet-import-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fleet-initialization-selectors {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
@container (max-width: 620px) {
.fleet-document-policy-body {
grid-template-columns: minmax(0, 1fr);
}
.fleet-document-policy-icon {
display: none;
}
.fleet-document-policy-kinds {
grid-column: auto;
grid-template-columns: minmax(0, 1fr);
}
.fleet-document-policy-kind {
justify-content: flex-start;
white-space: normal;
}
.fleet-import-organization,
.fleet-import-card-head,
.fleet-import-editor-head,
.fleet-import-editor-save-actions,
.fleet-import-work-head {
align-items: stretch;
flex-direction: column;
}
.fleet-import-save-action { width: 100%; }
.fleet-import-fuel-note { align-items: stretch; flex-direction: column; }
.fleet-import-fuel-note > .secondary-action { width: 100%; }
.fleet-import-section-toggle {
width: 100%;
}
.fleet-import-organization label,
.fleet-import-form,
.fleet-initialization-selectors,
.fleet-baseline-toolbar label {
grid-template-columns: minmax(0, 1fr);
min-width: 0;
}
.fleet-baseline-toolbar {
align-items: stretch;
flex-direction: column;
}
.fleet-baseline-operation-filter,
.fleet-baseline-operation-filter > button {
width: 100%;
}
.fleet-baseline-operation-menu {
width: min(100%, calc(100vw - 48px));
}
.fleet-baseline-visible-count {
margin-left: 0;
padding-bottom: 0;
}
.fleet-import-form label.is-wide,
.fleet-import-form label.is-full {
grid-column: auto;
}
.fleet-import-work-row {
grid-template-columns: minmax(0, 1fr) auto;
min-width: 0;
}
.fleet-import-work-columns {
display: none;
}
.fleet-import-work-row > input {
grid-column: 1 / -1;
}
.fleet-import-work-row > .fleet-work-type-combobox {
grid-column: 1 / -1;
}
.fleet-import-work-row [data-work-field="quantity"] {
width: 100%;
}
}
/*
* Scrollbars du mode sombre
*
* La barre du menu latéral constitue la référence visuelle de TrackerVue.
* Ce bloc reste volontairement en fin de feuille afin de neutraliser les
* anciens styles locaux (tableaux, layers, graphiques et listes internes)
* uniquement lorsque le thème sombre est actif.
*/
:root[data-theme="dark"] {
--tkrvue-scrollbar-size: 6px;
--tkrvue-scrollbar-track: transparent;
--tkrvue-scrollbar-thumb: color-mix(in srgb, var(--tkrvue-sidebar-text) 24%, transparent);
--tkrvue-scrollbar-thumb-hover: color-mix(in srgb, var(--tkrvue-sidebar-text) 38%, transparent);
}
:root[data-theme="dark"],
:root[data-theme="dark"] body,
:root[data-theme="dark"] * {
scrollbar-width: thin;
scrollbar-color: var(--tkrvue-scrollbar-thumb) var(--tkrvue-scrollbar-track);
}
:root[data-theme="dark"]::-webkit-scrollbar,
:root[data-theme="dark"] body::-webkit-scrollbar,
:root[data-theme="dark"] *::-webkit-scrollbar {
width: var(--tkrvue-scrollbar-size);
height: var(--tkrvue-scrollbar-size);
}
:root[data-theme="dark"]::-webkit-scrollbar-track,
:root[data-theme="dark"] body::-webkit-scrollbar-track,
:root[data-theme="dark"] *::-webkit-scrollbar-track,
:root[data-theme="dark"] *::-webkit-scrollbar-track-piece {
background: var(--tkrvue-scrollbar-track);
border: 0;
border-radius: 999px;
}
:root[data-theme="dark"]::-webkit-scrollbar-thumb,
:root[data-theme="dark"] body::-webkit-scrollbar-thumb,
:root[data-theme="dark"] *::-webkit-scrollbar-thumb {
min-width: var(--tkrvue-scrollbar-size);
min-height: var(--tkrvue-scrollbar-size);
border: 0;
border-radius: 999px;
background: var(--tkrvue-scrollbar-thumb);
background-clip: border-box;
}
:root[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] body::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
background: var(--tkrvue-scrollbar-thumb-hover);
}
:root[data-theme="dark"]::-webkit-scrollbar-corner,
:root[data-theme="dark"] body::-webkit-scrollbar-corner,
:root[data-theme="dark"] *::-webkit-scrollbar-corner {
background: transparent;
}
:root[data-theme="dark"]::-webkit-scrollbar-button,
:root[data-theme="dark"] body::-webkit-scrollbar-button,
:root[data-theme="dark"] *::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
/* La layer principale possède son propre défilement vertical. Le ciblage
* explicite évite qu'un style historique du conteneur rétablisse la barre
* claire du navigateur en mode sombre. */
:root[data-theme="dark"] .view-body {
scrollbar-width: thin;
scrollbar-color: var(--tkrvue-scrollbar-thumb) var(--tkrvue-scrollbar-track);
}
:root[data-theme="dark"] .view-body::-webkit-scrollbar {
width: var(--tkrvue-scrollbar-size);
height: var(--tkrvue-scrollbar-size);
}
:root[data-theme="dark"] .view-body::-webkit-scrollbar-track {
background: var(--tkrvue-scrollbar-track);
border: 0;
}
:root[data-theme="dark"] .view-body::-webkit-scrollbar-thumb {
border: 0;
border-radius: 999px;
background: var(--tkrvue-scrollbar-thumb);
}
:root[data-theme="dark"] .view-body::-webkit-scrollbar-thumb:hover {
background: var(--tkrvue-scrollbar-thumb-hover);
}
/* Les actions des lots récents suivent la lecture naturelle de la ligne. */
.fleet-import-recent-table .data-table th:last-child,
.fleet-import-recent-table .data-table td:last-child {
text-align: left;
}
.fleet-import-recent-table .fleet-import-row-actions {
justify-content: flex-start;
}
@media print {
@page {
size: landscape;
margin: 8mm;
}
html,
body {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
}
body > :not(#main),
#sidebar,
#splitter,
#viewLayer {
display: none !important;
}
#main {
display: block !important;
width: 100% !important;
height: 100vh !important;
min-height: 0 !important;
}
#map-container,
#map {
position: fixed !important;
inset: 0 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
#map .leaflet-top,
#map .leaflet-bottom.leaflet-left {
display: none !important;
}
#map .leaflet-control-attribution {
display: block !important;
padding: 1mm 1.5mm !important;
background: rgba(255, 255, 255, 0.88) !important;
color: #24364a !important;
font-size: 7pt !important;
}
}
/* Toutes les listes déroulantes des layers suivent le thème sombre commun,
* y compris leur liste native d'options. Ce bloc final neutralise les anciens
* fonds blancs propres à certaines vues sans modifier le thème clair. */
:root[data-theme="dark"][data-message-style="bootstrap"] {
--tkrvue-status-success-bg: #052e1a;
--tkrvue-status-success-border: #22c55e;
--tkrvue-status-success-text: #bbf7d0;
--tkrvue-status-error-bg: #3b0a0a;
--tkrvue-status-error-border: #ef4444;
--tkrvue-status-error-text: #fecaca;
--tkrvue-status-info-bg: #0b2447;
--tkrvue-status-info-border: #3b82f6;
--tkrvue-status-info-text: #dbeafe;
--tkrvue-status-warning-bg: #332600;
--tkrvue-status-warning-border: #f59e0b;
--tkrvue-status-warning-text: #fde68a;
}
.view-layer {
--panel-bg: var(--tkrvue-layer-surface-bg);
--surface: var(--tkrvue-layer-bg);
--surface-soft: var(--tkrvue-layer-surface-bg);
--text-color: var(--tkrvue-layer-text);
--heading-color: var(--tkrvue-layer-text);
--muted-color: var(--tkrvue-muted);
--border-color: var(--tkrvue-border);
--input-bg: var(--tkrvue-input-bg);
--accent: var(--tkrvue-accent);
--accent-color: var(--tkrvue-accent);
--warning-text: var(--tkrvue-status-warning-text);
--warning-bg: var(--tkrvue-status-warning-bg);
--success-text: var(--tkrvue-status-success-text);
--success-bg: var(--tkrvue-status-success-bg);
--critical-text: var(--tkrvue-status-error-text);
--critical-bg: var(--tkrvue-status-error-bg);
}
:root[data-theme="dark"] .view-layer :is(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
textarea
) {
color-scheme: dark;
border-color: var(--tkrvue-border) !important;
background-color: var(--tkrvue-input-bg) !important;
color: var(--tkrvue-input-text) !important;
}
:root[data-theme="dark"] .view-layer :is(input, textarea)::placeholder {
color: var(--tkrvue-muted) !important;
opacity: 1;
}
:root[data-theme="dark"] .view-layer :is(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
textarea
):disabled {
border-color: color-mix(in srgb, var(--tkrvue-muted) 34%, var(--tkrvue-border)) !important;
background-color: color-mix(in srgb, var(--tkrvue-input-bg) 86%, var(--tkrvue-muted)) !important;
color: var(--tkrvue-muted) !important;
opacity: 1;
}
:root[data-theme="dark"] .view-layer select {
color-scheme: dark;
border-color: var(--tkrvue-border) !important;
background-color: var(--tkrvue-input-bg) !important;
color: var(--tkrvue-input-text) !important;
}
:root[data-theme="dark"] .view-layer select:disabled {
border-color: color-mix(in srgb, var(--tkrvue-muted) 34%, var(--tkrvue-border)) !important;
background-color: color-mix(in srgb, var(--tkrvue-input-bg) 86%, var(--tkrvue-muted)) !important;
color: var(--tkrvue-muted) !important;
opacity: 1;
}
:root[data-theme="dark"] .view-layer select :is(option, optgroup) {
background-color: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
}
:root[data-theme="dark"] .view-layer select option:checked {
background-color: color-mix(in srgb, var(--tkrvue-accent) 22%, var(--tkrvue-input-bg));
color: var(--tkrvue-input-text);
}
.itinerary-view-layer {
--border: var(--tkrvue-border);
--text-muted: var(--tkrvue-muted);
container-type: inline-size;
}
.itinerary-layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
gap: 14px;
margin-top: 14px;
}
.itinerary-card {
border: 1px solid var(--border, #cbd9e6);
border-radius: 12px;
background: var(--surface, #fff);
padding: 16px;
}
.itinerary-card h3 {
margin: 0 0 14px;
}
.itinerary-card > label,
.itinerary-address-row > label {
display: grid;
gap: 6px;
min-width: 0;
}
.itinerary-vehicle-profile {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
margin: 12px 0;
padding: 10px;
border: 1px solid var(--border, #cbd9e6);
border-radius: 10px;
background: color-mix(in srgb, var(--accent, #1674b8) 7%, var(--surface, #fff));
}
.itinerary-profile-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
color: var(--vehicle-map-color, var(--accent, #1674b8));
}
.itinerary-profile-icon svg {
width: 34px;
height: 34px;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.itinerary-vehicle-profile small {
display: block;
margin-top: 3px;
color: var(--text-muted, #60738a);
}
.itinerary-origin-modes {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin: 12px 0;
padding: 10px;
border: 1px solid var(--border, #cbd9e6);
border-radius: 10px;
}
.itinerary-origin-modes legend {
padding: 0 6px;
font-weight: 700;
}
.itinerary-address-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: end;
gap: 8px;
margin: 10px 0;
}
.itinerary-address-control {
position: relative;
display: block;
}
.itinerary-address-control input {
width: 100%;
}
.itinerary-address-results {
position: absolute;
z-index: 1200;
top: calc(100% + 4px);
left: 0;
right: 0;
display: grid;
overflow-x: hidden;
overflow-y: auto;
max-height: min(380px, 52vh);
border: 1px solid var(--border, #dbe5ee);
border-radius: 9px;
background: var(--surface, #fff);
box-shadow: 0 10px 28px rgba(19, 43, 65, .2);
}
.itinerary-address-group-title {
display: block;
padding: 7px 10px 5px;
background: color-mix(in srgb, var(--accent, #1674b8) 7%, var(--surface, #fff));
color: var(--text-muted, #60738a);
font-size: var(--tkrvue-font-size-xs, .75rem);
font-weight: 700;
letter-spacing: .025em;
text-transform: uppercase;
}
.itinerary-saved-address-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
align-items: stretch;
border-bottom: 1px solid var(--border, #dbe5ee);
}
.itinerary-address-results:empty {
display: none;
}
.itinerary-address-results button {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 8px;
align-items: center;
padding: 9px 10px;
border: 0;
border-bottom: 1px solid var(--border, #dbe5ee);
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.itinerary-address-results .itinerary-saved-address-row > button {
border-bottom: 0;
}
.itinerary-address-results .itinerary-favorite-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
min-width: 38px;
padding: 7px;
border-left: 1px solid var(--border, #dbe5ee);
color: var(--text-muted, #60738a);
}
.itinerary-address-results .itinerary-favorite-toggle.is-favorite {
color: var(--accent, #1674b8);
background: color-mix(in srgb, var(--accent, #1674b8) 10%, var(--surface, #fff));
}
.itinerary-address-results .itinerary-favorite-toggle.is-favorite svg {
fill: currentColor;
}
.itinerary-address-results button:hover,
.itinerary-address-results button:focus-visible {
background: color-mix(in srgb, var(--accent, #1674b8) 11%, var(--surface, #fff));
}
.itinerary-address-results svg,
.itinerary-capability-note svg,
.itinerary-warnings svg {
width: 19px;
height: 19px;
color: var(--accent, #1674b8);
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.itinerary-address-loading {
padding: 10px;
color: var(--text-muted, #60738a);
}
.itinerary-options {
display: grid;
gap: 10px;
margin: 14px 0;
}
.itinerary-capability-note,
.itinerary-warnings p {
display: flex;
gap: 8px;
align-items: flex-start;
}
.itinerary-capability-note {
color: var(--text-muted, #60738a);
}
.itinerary-address-book-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 12px 0 0;
padding: 9px 10px;
border: 1px solid color-mix(in srgb, var(--accent, #1674b8) 24%, var(--border, #cbd9e6));
border-radius: 9px;
background: color-mix(in srgb, var(--accent, #1674b8) 6%, var(--surface, #fff));
color: var(--text-muted, #60738a);
font-size: var(--tkrvue-font-size-sm, .875rem);
}
.itinerary-address-book-note svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
color: var(--accent, #1674b8);
fill: none;
stroke: currentColor;
}
.itinerary-calculate {
width: 100%;
justify-content: center;
}
.itinerary-result {
margin-top: 14px;
min-width: 0;
overflow: hidden;
}
.itinerary-alternatives {
display: grid;
gap: 10px;
}
.itinerary-alternative-row {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: minmax(170px, 1.25fr) repeat(4, minmax(105px, 1fr));
align-items: stretch;
gap: 8px;
padding: 8px;
border: 1px solid var(--border, #cbd9e6);
border-radius: 10px;
background: var(--surface, #fff);
color: inherit;
text-align: left;
cursor: pointer;
}
.itinerary-alternative-row:hover,
.itinerary-alternative-row:focus-visible,
.itinerary-alternative-row.is-selected {
border-color: var(--accent, #1674b8);
background: color-mix(in srgb, var(--accent, #1674b8) 7%, var(--surface, #fff));
outline: 0;
}
.itinerary-alternative-row.is-selected {
box-shadow: inset 3px 0 0 var(--accent, #1674b8);
}
.itinerary-alternative-row:disabled {
cursor: not-allowed;
opacity: .72;
}
.itinerary-alternative-title,
.itinerary-alternative-metric {
min-width: 0;
display: flex;
align-items: center;
}
.itinerary-alternative-title {
gap: 9px;
}
.itinerary-alternative-title > span:last-child,
.itinerary-alternative-metric {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.itinerary-alternative-title small,
.itinerary-alternative-metric small {
color: var(--text-muted, #60738a);
overflow-wrap: anywhere;
}
.itinerary-alternative-metric strong {
max-width: 100%;
overflow-wrap: anywhere;
}
.itinerary-alternative-icon {
width: 32px;
min-width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 8px;
background: color-mix(in srgb, var(--accent, #1674b8) 10%, var(--surface, #fff));
color: var(--accent, #1674b8);
}
.itinerary-alternative-icon svg,
.itinerary-alternatives-note svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.itinerary-alternative-error {
grid-column: 2 / -1;
align-self: center;
color: var(--text-muted, #60738a);
overflow-wrap: anywhere;
}
.itinerary-alternatives-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 10px 0 0;
color: var(--text-muted, #60738a);
}
.itinerary-warnings {
margin-top: 12px;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, #d68b00 55%, var(--border, #cbd9e6));
border-radius: 9px;
background: color-mix(in srgb, #d68b00 10%, var(--surface, #fff));
}
.itinerary-warnings p {
margin: 4px 0;
}
.itinerary-warnings svg {
color: #d68b00;
flex: 0 0 auto;
}
#map.itinerary-map-picking,
#map.itinerary-map-picking .leaflet-interactive {
cursor: crosshair !important;
}
@container (max-width: 1050px) {
.itinerary-layout {
grid-template-columns: 1fr 1fr;
}
.itinerary-alternative-row {
grid-template-columns: minmax(170px, 1.2fr) repeat(2, minmax(110px, 1fr));
}
.itinerary-alternative-metric:nth-of-type(4),
.itinerary-alternative-metric:nth-of-type(5) {
grid-column: span 1;
}
}
@container (max-width: 720px) {
.itinerary-layout {
grid-template-columns: 1fr;
}
.itinerary-alternative-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.itinerary-alternative-title,
.itinerary-alternative-error {
grid-column: 1 / -1;
}
.itinerary-vehicle-profile {
grid-template-columns: 38px minmax(0, 1fr);
}
.itinerary-vehicle-profile .secondary-action {
grid-column: 1 / -1;
}
}
@container (max-width: 460px) {
.itinerary-address-row,
.itinerary-alternative-row {
grid-template-columns: minmax(0, 1fr);
}
.itinerary-address-row > label,
.itinerary-alternative-title,
.itinerary-alternative-error {
grid-column: 1;
}
.itinerary-address-row > button {
width: 100%;
}
}
/*
* Contrôles de fichiers et défilement des layers
*
* Les champs de fichier natifs visibles suivent le thème TrackerVue, la
* police et la taille choisies par l'utilisateur. Les champs masqués qui
* servent de relais à un bouton personnalisé conservent leur comportement.
*/
.view-body input[type="file"]:not([hidden]):not(.hidden):not([data-organization-media-file]) {
display: block;
width: 100%;
min-width: 0;
min-height: var(--tkrvue-control-height, 36px);
box-sizing: border-box;
overflow: hidden;
padding: 0 10px 0 0;
border: 1px solid var(--tkrvue-border);
border-radius: var(--tkrvue-radius-sm, 7px);
background: var(--tkrvue-input-bg);
color: var(--tkrvue-input-text);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
line-height: 1.2;
cursor: pointer;
}
.view-body input[type="file"]:not([hidden]):not(.hidden):not([data-organization-media-file])::file-selector-button,
.view-body input[type="file"]:not([hidden]):not(.hidden):not([data-organization-media-file])::-webkit-file-upload-button {
min-height: calc(var(--tkrvue-control-height, 36px) - 2px);
margin: 0 10px 0 0;
padding: 7px 12px;
border: 0;
border-right: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.view-body input[type="file"]:not([hidden]):not(.hidden):not([data-organization-media-file]):hover::file-selector-button,
.view-body input[type="file"]:not([hidden]):not(.hidden):not([data-organization-media-file]):focus-visible::file-selector-button,
.view-body input[type="file"]:not([hidden]):not(.hidden):not([data-organization-media-file]):hover::-webkit-file-upload-button,
.view-body input[type="file"]:not([hidden]):not(.hidden):not([data-organization-media-file]):focus-visible::-webkit-file-upload-button {
background: var(--tkrvue-accent);
color: #ffffff;
}
.view-body input[type="file"]:not([hidden]):not(.hidden):not([data-organization-media-file]):focus-visible {
outline: 2px solid color-mix(in srgb, var(--tkrvue-accent) 62%, transparent);
outline-offset: 2px;
}
.view-body input[type="file"]:disabled {
cursor: not-allowed;
opacity: 0.62;
}
.view-body input[type="file"]:disabled::file-selector-button,
.view-body input[type="file"]:disabled::-webkit-file-upload-button {
cursor: not-allowed;
}
.view-body .user-management-file-action input[type="file"] {
position: absolute;
width: 1px !important;
height: 1px;
min-height: 0 !important;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
/* Les zones de défilement de toutes les layers restent nettement visibles,
* y compris quand le scroll appartient à un panneau d'onglet interne. */
:root {
--tkrvue-layer-scrollbar-size: 8px;
--tkrvue-layer-scrollbar-track: color-mix(in srgb, var(--tkrvue-border) 35%, transparent);
--tkrvue-layer-scrollbar-thumb: color-mix(in srgb, var(--tkrvue-accent) 58%, var(--tkrvue-border));
--tkrvue-layer-scrollbar-thumb-hover: var(--tkrvue-accent);
}
:root[data-theme="dark"] {
--tkrvue-layer-scrollbar-track: color-mix(in srgb, var(--tkrvue-border) 52%, transparent);
--tkrvue-layer-scrollbar-thumb: color-mix(in srgb, var(--tkrvue-accent) 72%, var(--tkrvue-muted));
}
.view-layer .view-body,
.view-layer .view-body * {
scrollbar-width: thin;
scrollbar-color: var(--tkrvue-layer-scrollbar-thumb) var(--tkrvue-layer-scrollbar-track);
}
.view-layer .view-body::-webkit-scrollbar,
.view-layer .view-body *::-webkit-scrollbar {
width: var(--tkrvue-layer-scrollbar-size);
height: var(--tkrvue-layer-scrollbar-size);
}
.view-layer .view-body::-webkit-scrollbar-track,
.view-layer .view-body *::-webkit-scrollbar-track {
border: 0;
border-radius: 999px;
background: var(--tkrvue-layer-scrollbar-track);
}
.view-layer .view-body::-webkit-scrollbar-thumb,
.view-layer .view-body *::-webkit-scrollbar-thumb {
min-width: var(--tkrvue-layer-scrollbar-size);
min-height: var(--tkrvue-layer-scrollbar-size);
border: 0;
border-radius: 999px;
background: var(--tkrvue-layer-scrollbar-thumb);
}
.view-layer .view-body::-webkit-scrollbar-thumb:hover,
.view-layer .view-body *::-webkit-scrollbar-thumb:hover {
background: var(--tkrvue-layer-scrollbar-thumb-hover);
}
/* Centre de communications de la barre supérieure. */
.topbar-communication,
.topbar-overflow {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
.topbar-communication-button,
#topbarMoreButton {
position: relative;
}
.topbar-communication-button svg,
#topbarMoreButton svg,
#preferencesButton svg,
.topbar-overflow-action svg,
.topbar-communication-panel svg,
.topbar-overflow-menu svg,
.preferences-user-role-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.topbar-notification-count {
position: absolute;
top: -6px;
right: -6px;
z-index: 2;
display: inline-flex;
min-width: 18px;
height: 18px;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid var(--tkrvue-header-bg);
border-radius: 999px;
background: var(--tkrvue-danger, #dc2626);
color: #ffffff;
font-size: 9px;
font-weight: 800;
line-height: 1;
box-sizing: border-box;
}
.topbar-communication-panel,
.topbar-overflow-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 2300;
overflow: hidden;
border: 1px solid var(--tkrvue-border);
border-radius: 12px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-layer-text);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.26);
}
.topbar-communication-panel {
width: min(430px, calc(100vw - 24px));
}
.messaging-source-tabs:not(.is-compact) {
flex: 0 0 auto;
align-self: flex-start;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
}
.messaging-source-tabs.is-compact {
display: flex;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-layer-bg) 68%, var(--tkrvue-layer-surface-bg));
}
.messaging-source-tabs.is-compact .messaging-source-tab {
display: inline-flex;
min-width: 0;
min-height: 44px;
flex: 1 1 50%;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--tkrvue-muted);
font: inherit;
font-size: var(--tkrvue-font-size-sm);
font-weight: 700;
cursor: pointer;
}
.messaging-source-tab {
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 6px;
}
.messaging-source-tabs.is-compact .messaging-source-tab:hover,
.messaging-source-tabs.is-compact .messaging-source-tab:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 9%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-layer-text);
outline: none;
}
.messaging-source-tabs.is-compact .messaging-source-tab.is-active {
border-color: var(--tkrvue-accent);
border-bottom-color: var(--tkrvue-layer-surface-bg);
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-accent);
box-shadow: inset 0 -3px 0 var(--tkrvue-accent);
}
.messaging-source-count {
display: inline-flex;
min-width: 18px;
height: 18px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 999px;
background: var(--tkrvue-danger, #dc2626);
color: #fff;
font-size: 9px;
font-weight: 800;
line-height: 1;
box-sizing: border-box;
}
.messaging-refresh-surface {
position: relative;
transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}
.messaging-refresh-surface::after {
position: absolute;
inset: 0;
z-index: 4;
border-radius: inherit;
background: linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--tkrvue-accent) 16%, transparent) 50%, transparent 82%);
content: "";
opacity: 0;
pointer-events: none;
transform: translateY(-70%);
}
.messaging-refresh-surface.is-refreshing {
opacity: 0.72;
filter: saturate(0.88);
transform: translateY(-2px);
}
.messaging-refresh-surface.is-refreshing::after {
animation: tkrvue-message-refresh-float 520ms ease-out both;
}
.messaging-refresh-surface.is-refreshed {
animation: tkrvue-message-refresh-arrive 320ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
@keyframes tkrvue-message-refresh-float {
0% { opacity: 0; transform: translateY(-70%); }
38% { opacity: 1; }
100% { opacity: 0; transform: translateY(70%); }
}
@keyframes tkrvue-message-refresh-arrive {
0% { opacity: 0.68; transform: translateY(7px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.messaging-refresh-surface,
.messaging-refresh-surface::after,
.messaging-refresh-surface.is-refreshing,
.messaging-refresh-surface.is-refreshed {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
.topbar-communication-heading,
.topbar-overflow-heading {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 9px 9px 12px;
border-bottom: 1px solid var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
}
.topbar-communication-heading-icon {
display: inline-flex;
width: 34px;
height: 34px;
flex: 0 0 34px;
align-items: center;
justify-content: center;
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-bg));
color: var(--tkrvue-accent);
}
.topbar-communication-heading > span:nth-child(2) {
display: grid;
min-width: 0;
flex: 1 1 auto;
gap: 2px;
}
.topbar-communication-heading strong,
.topbar-overflow-heading strong {
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
}
.topbar-communication-heading small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.topbar-communication-list {
display: grid;
max-height: min(520px, calc(100vh - 170px));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--tkrvue-layer-scrollbar-thumb) var(--tkrvue-layer-scrollbar-track);
}
.topbar-communication-entry {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto 16px;
grid-template-areas:
"icon copy state arrow"
"icon copy date arrow";
align-items: center;
gap: 3px 9px;
width: 100%;
min-width: 0;
padding: 10px 9px;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-border) 72%, transparent);
border-left: 3px solid var(--tkrvue-accent);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.topbar-communication-entry.is-critical,
.topbar-communication-entry.is-high {
border-left-color: var(--tkrvue-danger, #dc2626);
}
.topbar-communication-entry.is-medium {
border-left-color: #d97706;
}
.topbar-communication-entry:hover,
.topbar-communication-entry:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 10%, transparent);
outline: none;
}
.topbar-communication-entry-icon {
grid-area: icon;
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-accent) 10%, var(--tkrvue-layer-bg));
color: var(--tkrvue-accent);
}
.topbar-communication-entry.is-critical .topbar-communication-entry-icon,
.topbar-communication-entry.is-high .topbar-communication-entry-icon {
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 10%, var(--tkrvue-layer-bg));
color: var(--tkrvue-danger, #dc2626);
}
.topbar-communication-entry-copy {
grid-area: copy;
display: grid;
min-width: 0;
gap: 2px;
}
.topbar-communication-entry-copy strong,
.topbar-communication-entry-copy span,
.topbar-communication-entry-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-communication-entry-copy strong {
font-size: var(--tkrvue-font-size-md);
}
.topbar-communication-entry-copy span,
.topbar-communication-entry-copy small,
.topbar-communication-entry time {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
.topbar-alert-premium-diagnostic {
display: grid;
min-width: 0;
gap: 3px;
margin: 2px 0;
padding: 4px 6px;
border-left: 3px solid #7c3aed;
border-radius: 5px;
background: color-mix(in srgb, #7c3aed 7%, var(--tkrvue-layer-bg));
}
.topbar-alert-premium-diagnostic small {
overflow: hidden;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-2xs, 10px);
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-communication-entry-state {
grid-area: state;
justify-self: end;
padding: 3px 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-layer-bg));
color: var(--tkrvue-accent);
font-size: var(--tkrvue-font-size-2xs, 10px);
font-weight: 800;
white-space: nowrap;
}
.topbar-communication-entry-state:is(.is-delivery_error, .is-open, .is-overdue, .is-pending) {
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 13%, var(--tkrvue-layer-bg));
color: var(--tkrvue-danger, #b91c1c);
}
.topbar-communication-entry-state:is(.is-in_progress, .is-due_soon) {
background: color-mix(in srgb, #d97706 14%, var(--tkrvue-layer-bg));
color: color-mix(in srgb, #d97706 82%, var(--tkrvue-layer-text));
}
.topbar-communication-entry-state:is(.is-replied, .is-resolved, .is-completed, .is-closed) {
background: color-mix(in srgb, #16a34a 13%, var(--tkrvue-layer-bg));
color: color-mix(in srgb, #15803d 84%, var(--tkrvue-layer-text));
}
.topbar-communication-entry time {
grid-area: date;
justify-self: end;
white-space: nowrap;
}
.topbar-communication-entry-arrow {
grid-area: arrow;
display: inline-flex;
color: var(--tkrvue-muted);
}
.topbar-communication-entry-arrow svg {
width: 15px;
height: 15px;
}
.topbar-communication-empty {
padding: 26px 14px;
color: var(--tkrvue-muted);
text-align: center;
}
.topbar-communication-empty > p {
margin: 0;
}
.topbar-communication-scope-note {
margin: 0;
padding: 10px 14px;
border-bottom: 1px solid var(--tkrvue-border);
color: var(--tkrvue-muted);
background: var(--tkrvue-layer-surface-bg, #f8fafc);
font-size: var(--tkrvue-font-size-xs);
line-height: 1.35;
text-align: left;
}
.topbar-alert-scope-actions {
display: grid;
gap: 9px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--tkrvue-border);
text-align: left;
}
.topbar-alert-scope-actions > span {
font-size: var(--tkrvue-font-size-xs);
}
.topbar-alert-scope-actions > div {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.topbar-alert-scope-actions .secondary-action {
min-height: 34px;
padding: 6px 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-bg));
font-size: var(--tkrvue-font-size-xs);
}
.topbar-alert-scope-actions .secondary-action svg {
width: 16px;
height: 16px;
}
.topbar-communication-footer {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) 16px;
align-items: center;
gap: 8px;
width: 100%;
min-height: 42px;
padding: 7px 11px;
border: 0;
border-top: 1px solid var(--tkrvue-border);
background: color-mix(in srgb, var(--tkrvue-accent) 6%, var(--tkrvue-layer-bg));
color: var(--tkrvue-accent);
font: inherit;
font-weight: 800;
text-align: left;
cursor: pointer;
}
.topbar-communication-footer:hover,
.topbar-communication-footer:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 13%, var(--tkrvue-layer-bg));
outline: none;
}
.topbar-overflow-menu {
display: grid;
width: min(285px, calc(100vw - 24px));
padding-bottom: 6px;
}
.topbar-overflow-heading {
justify-content: space-between;
margin-bottom: 5px;
}
.topbar-overflow-action.topbar-icon-button {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
justify-content: start;
gap: 9px;
width: auto;
min-width: 0;
height: auto;
min-height: 38px;
margin: 0 6px;
padding: 7px 9px;
border: 0;
background: transparent;
color: var(--tkrvue-layer-text);
font-size: var(--tkrvue-font-size-md);
text-align: left;
}
.topbar-overflow-action.topbar-icon-button:hover,
.topbar-overflow-action.topbar-icon-button:focus-visible {
background: color-mix(in srgb, var(--tkrvue-accent) 11%, transparent);
color: var(--tkrvue-accent);
outline: none;
}
.topbar-mobile-overflow-action {
display: none !important;
}
.topbar-overflow-logout.topbar-icon-button {
color: var(--tkrvue-danger, #dc2626);
}
/* Les commandes et menus ouverts depuis la barre supérieure partagent la
même surface. Préférences et déconnexion conservent volontairement leur
couleur de rôle et leur traitement destructif. */
:is(
#contextSelector,
#universalSearchButton,
#navigationHistoryButton,
#topbarAlertsButton,
#topbarMessagesButton,
#topbarMoreButton,
#installAppButton
) {
border-color: color-mix(in srgb, var(--tkrvue-accent) 30%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-topbar-panel-bg) 82%, var(--tkrvue-input-bg));
color: var(--tkrvue-header-text);
}
:is(
#contextSelector,
#universalSearchButton,
#navigationHistoryButton,
#topbarAlertsButton,
#topbarMessagesButton,
#topbarMoreButton,
#installAppButton
):is(:hover, :focus-visible, [aria-expanded="true"]) {
border-color: var(--tkrvue-accent);
background: color-mix(in srgb, var(--tkrvue-topbar-panel-bg) 72%, var(--tkrvue-accent) 28%);
color: var(--tkrvue-accent);
outline: none;
}
:is(
.selector-content.primary-scope-panel,
.universal-search-panel,
.navigation-history-menu,
.topbar-communication-panel,
.topbar-overflow-menu
) {
border-color: color-mix(in srgb, var(--tkrvue-accent) 24%, var(--tkrvue-border));
background: var(--tkrvue-topbar-panel-bg);
color: var(--tkrvue-topbar-panel-text);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.26);
}
:is(
.primary-scope-panel .selector-header,
.universal-search-header,
.navigation-history-heading,
.topbar-communication-heading,
.topbar-overflow-heading
) {
min-height: 52px;
box-sizing: border-box;
border-bottom: 1px solid color-mix(in srgb, var(--tkrvue-accent) 24%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-topbar-panel-bg) 86%, var(--tkrvue-accent) 14%);
color: var(--tkrvue-topbar-panel-text);
}
:is(
.universal-search-header,
.navigation-history-heading,
.topbar-communication-heading,
.topbar-overflow-heading
) strong,
.navigation-history-heading > span {
color: var(--tkrvue-topbar-panel-text);
}
/* Le profil connecté reste lisible dans les préférences sans encombrer la top bar. */
.preferences-user-identity {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin: 3px 2px 10px;
padding: 9px;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 36%, var(--tkrvue-border));
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 8%, var(--tkrvue-layer-bg));
}
.preferences-user-role-icon {
display: inline-flex;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: 9px;
background: color-mix(in srgb, var(--tkrvue-accent) 14%, var(--tkrvue-layer-bg));
color: var(--tkrvue-accent);
}
.preferences-user-identity-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.preferences-user-identity-copy strong,
.preferences-user-identity-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preferences-user-identity-copy small {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
}
#preferencesButton.preferences-role-superadmin-premium,
.preferences-user-identity.user-role-superadmin-premium {
border-color: #8b5cf6;
background: color-mix(in srgb, #8b5cf6 18%, var(--tkrvue-input-bg));
color: color-mix(in srgb, #7c3aed 82%, var(--tkrvue-header-text));
}
#preferencesButton.preferences-role-superadmin,
.preferences-user-identity.user-role-superadmin {
border-color: #10b981;
background: color-mix(in srgb, #10b981 16%, var(--tkrvue-input-bg));
color: color-mix(in srgb, #047857 84%, var(--tkrvue-header-text));
}
#preferencesButton.preferences-role-admin,
.preferences-user-identity.user-role-admin {
border-color: #14b8a6;
background: color-mix(in srgb, #14b8a6 15%, var(--tkrvue-input-bg));
color: color-mix(in srgb, #0f766e 84%, var(--tkrvue-header-text));
}
#preferencesButton.preferences-role-editor,
.preferences-user-identity.user-role-editor {
border-color: #d97706;
background: color-mix(in srgb, #d97706 15%, var(--tkrvue-input-bg));
color: color-mix(in srgb, #b45309 84%, var(--tkrvue-header-text));
}
#preferencesButton.preferences-role-user,
.preferences-user-identity.user-role-user {
border-color: color-mix(in srgb, var(--tkrvue-accent) 55%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-accent) 12%, var(--tkrvue-input-bg));
color: var(--tkrvue-accent);
}
:root[data-theme="dark"] :is(
#preferencesButton.preferences-role-superadmin-premium,
.preferences-user-identity.user-role-superadmin-premium
) {
color: #ddd6fe;
}
:root[data-theme="dark"] :is(
#preferencesButton.preferences-role-superadmin,
.preferences-user-identity.user-role-superadmin
) {
color: #6ee7b7;
}
:root[data-theme="dark"] :is(
#preferencesButton.preferences-role-admin,
.preferences-user-identity.user-role-admin
) {
color: #5eead4;
}
:root[data-theme="dark"] :is(
#preferencesButton.preferences-role-editor,
.preferences-user-identity.user-role-editor
) {
color: #fcd34d;
}
@media (max-width: 900px) {
.topbar-communication-panel,
.topbar-overflow-menu {
position: fixed;
top: 56px;
right: 8px;
left: 8px;
width: auto;
max-height: calc(100vh - 66px);
max-height: calc(100dvh - 66px);
}
.topbar-communication-list {
max-height: calc(100vh - 178px);
max-height: calc(100dvh - 178px);
}
.topbar-overflow-action.topbar-icon-button {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 44px !important;
max-height: none !important;
}
}
@media (max-width: 520px) {
.topbar-user-actions {
gap: 4px;
}
.topbar-communication-entry {
grid-template-columns: 26px minmax(0, 1fr) 15px;
grid-template-areas:
"icon copy arrow"
"icon state arrow"
"icon date arrow";
}
.topbar-communication-entry-state,
.topbar-communication-entry time {
justify-self: start;
}
}
.analysis-eco-tabs {
display: flex;
gap: 8px;
margin: 0 0 12px;
}
.analysis-eco-tab {
display: inline-flex;
align-items: center;
gap: 7px;
}
.analysis-eco-tab svg,
.analysis-self-metrics svg,
.analysis-self-row-icon svg,
.analysis-self-empty svg {
width: 19px;
height: 19px;
}
.analysis-eco-tab.is-active,
.analysis-self-period.is-active {
color: #fff;
border-color: var(--brand, #075985);
background: var(--brand, #075985);
}
.analysis-self-view {
display: grid;
gap: 12px;
}
.analysis-self-sharing {
display: grid;
grid-template-columns: 19px minmax(0, 1fr);
align-items: start;
gap: 10px;
padding: 12px 14px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--tkrvue-accent) 24%, var(--tkrvue-border));
border-radius: 12px;
background: color-mix(in srgb, var(--tkrvue-accent) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-layer-text);
}
.analysis-self-sharing > svg {
display: block;
width: 19px;
min-width: 19px;
max-width: 19px;
height: 19px;
min-height: 19px;
max-height: 19px;
margin-top: 1px;
color: var(--tkrvue-accent);
}
.analysis-self-sharing > span {
min-width: 0;
line-height: 1.45;
overflow-wrap: anywhere;
}
.analysis-self-periods {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.analysis-self-hero {
display: flex;
align-items: center;
gap: 18px;
padding: 18px;
border: 1px solid #bfdbfe;
border-radius: 16px;
background: #eff6ff;
}
.analysis-self-hero.is-success { border-color: #bbf7d0; background: #f0fdf4; }
.analysis-self-hero.is-warning { border-color: #fed7aa; background: #fff7ed; }
.analysis-self-hero.is-critical { border-color: #fecaca; background: #fef2f2; }
.analysis-self-score {
display: flex;
align-items: baseline;
min-width: 92px;
color: #075985;
}
.analysis-self-hero.is-success .analysis-self-score { color: #15803d; }
.analysis-self-hero.is-warning .analysis-self-score { color: #c13e00; }
.analysis-self-hero.is-critical .analysis-self-score { color: #b91c1c; }
.analysis-self-score strong { font-size: 2.35rem; line-height: 1; }
.analysis-self-score span { margin-left: 4px; font-size: .78rem; }
.analysis-self-score.is-preparing { min-width: min(260px, 42vw); }
.analysis-self-score.is-preparing strong { font-size: 1.15rem; line-height: 1.25; }
.analysis-self-hero h3 { margin: 0 0 4px; }
.analysis-self-hero p { margin: 0; color: #475569; }
.analysis-self-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
.analysis-self-metrics > span {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 8px;
padding: 12px;
border: 1px solid #dbeafe;
border-radius: 12px;
background: #fff;
}
.analysis-self-metrics svg { grid-row: span 2; color: #075985; }
.analysis-self-metrics strong { font-size: 1.05rem; }
.analysis-self-metrics small,
.analysis-self-row small { color: #64748b; }
.analysis-self-score-trend {
display: grid;
min-width: 0;
gap: 6px;
padding-bottom: 3px;
overflow-x: auto;
overscroll-behavior-inline: contain;
}
.analysis-self-score-trend-granularity {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs);
font-weight: 700;
}
.analysis-self-score-trend > svg {
display: block;
width: clamp(620px, 100%, 960px);
max-width: none;
height: auto;
aspect-ratio: 820 / 230;
margin-inline: auto;
overflow: visible;
}
.analysis-self-score-grid {
stroke: color-mix(in srgb, var(--tkrvue-border) 84%, transparent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.analysis-self-score-axis {
fill: var(--tkrvue-muted);
font-size: 12px;
font-family: inherit;
}
.analysis-self-score-line {
fill: none;
stroke: var(--tkrvue-accent, #316da5);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.analysis-self-score-point {
fill: var(--tkrvue-layer-surface-bg, #fff);
stroke: var(--tkrvue-accent, #316da5);
stroke-width: 2.5;
vector-effect: non-scaling-stroke;
}
.analysis-self-list { display: grid; }
.analysis-self-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 54px;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.analysis-self-row:last-child { border-bottom: 0; }
.analysis-self-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.analysis-self-row-icon { color: var(--analysis-self-color, #075985); }
.analysis-self-mini-score {
min-width: 38px;
padding: 5px 8px;
text-align: center;
border-radius: 999px;
color: #475569;
background: #f1f5f9;
}
.analysis-self-mini-score.is-success { color: #166534; background: #dcfce7; }
.analysis-self-mini-score.is-warning { color: #c13e00; background: #ffedd5; }
.analysis-self-mini-score.is-critical { color: #991b1b; background: #fee2e2; }
.analysis-self-mini-score.is-preparing {
min-width: 96px;
color: var(--tkrvue-status-warning-text);
background: var(--tkrvue-status-warning-bg);
}
.analysis-score-reliability span { display: grid; gap: 5px; width: 100%; }
.analysis-score-reliability-progress {
display: block;
width: min(420px, 100%);
height: 5px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, currentColor 18%, transparent);
}
.analysis-score-reliability-progress b {
display: block;
height: 100%;
border-radius: inherit;
background: currentColor;
}
:root[data-theme="dark"] .analysis-metric.score.warning,
:root[data-theme="dark"] .analysis-self-hero.is-warning,
:root[data-theme="dark"] .analysis-self-mini-score.is-warning {
background: var(--tkrvue-status-warning-bg);
}
:root[data-theme="dark"] .analysis-metric.score.warning,
:root[data-theme="dark"] .analysis-self-hero.is-warning {
border-color: var(--tkrvue-status-warning-border);
}
:root[data-theme="dark"] .analysis-metric.score.warning strong,
:root[data-theme="dark"] .analysis-score.warning,
:root[data-theme="dark"] .analysis-self-hero.is-warning .analysis-self-score,
:root[data-theme="dark"] .analysis-self-mini-score.is-warning {
color: #fdba74;
}
:root[data-theme="dark"] .analysis-self-hero.is-warning { color: #ffedd5; }
:root[data-theme="dark"] .analysis-self-hero.is-warning p { color: #fed7aa; }
.analysis-self-placeholder { padding: 20px 8px; color: #64748b; text-align: center; }
.analysis-self-advice { display: grid; gap: 8px; }
.analysis-self-advice .view-note { display: grid; gap: 3px; }
.analysis-score-method-short-trip {
display: grid;
gap: 7px;
margin-top: 2px;
padding: 12px 14px;
border: 1px solid var(--tkrvue-status-info-border);
border-left: 4px solid var(--tkrvue-accent);
border-radius: 9px;
background: var(--tkrvue-status-info-bg);
color: var(--tkrvue-status-info-text);
}
.analysis-score-method-short-trip p,
.analysis-score-method-short-trip ul { margin: 0; }
.analysis-score-method-short-trip ul {
display: grid;
gap: 4px;
padding-left: 22px;
}
.analysis-score-method-short-trip b { margin-top: 2px; }
@media (max-width: 720px) {
.analysis-self-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analysis-self-hero { align-items: flex-start; }
.analysis-self-score strong { font-size: 2rem; }
.analysis-self-periods {
flex-wrap: nowrap;
padding-bottom: 3px;
overflow-x: auto;
scroll-snap-type: x proximity;
}
.analysis-self-period {
flex: 0 0 auto;
scroll-snap-align: start;
}
.analysis-self-score-trend > svg { margin-inline: 0; }
.analysis-self-sharing {
grid-template-columns: 17px minmax(0, 1fr);
gap: 8px;
padding: 10px 11px;
font-size: .86rem;
}
.analysis-self-sharing > svg {
width: 17px;
min-width: 17px;
max-width: 17px;
height: 17px;
min-height: 17px;
max-height: 17px;
}
}
/* Les panneaux accessibles uniquement au Superadmin Premium reprennent le
même repère discret que l'activation mobile, sans recolorer leurs champs. */
.view-body.tabbed-view-body .saas-tab-panel.saas-premium-panel {
padding: 10px 12px 12px;
border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--tkrvue-border));
border-left: 4px solid #7c3aed;
border-radius: 9px;
background: color-mix(in srgb, #7c3aed 4%, var(--tkrvue-layer-bg));
}
.saas-premium-card {
border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--tkrvue-border));
border-left: 4px solid #7c3aed;
border-radius: 9px;
background: color-mix(in srgb, #7c3aed 6%, var(--tkrvue-layer-bg));
}
.saas-analytics-settings.saas-premium-card { padding: 12px 14px; }
:root[data-theme="dark"] .view-body.tabbed-view-body .saas-tab-panel.saas-premium-panel,
:root[data-theme="dark"] .saas-premium-card {
border-color: rgba(196, 181, 253, .42);
border-left-color: #a78bfa;
background: rgba(124, 58, 237, .13);
}
/* Couche cartographique des bornes de recharge publiques (IRVE). */
.tkrvue-irve-div-icon {
background: transparent;
border: 0;
}
.tkrvue-irve-marker,
.tkrvue-irve-cluster {
display: grid;
place-items: center;
color: #fff;
background: var(--panel-bg, #fff);
border: 3px solid #64748b;
box-shadow: 0 3px 10px rgba(15, 23, 42, .28);
}
.tkrvue-irve-marker {
width: 32px;
height: 32px;
border-radius: 50% 50% 50% 16%;
transform: rotate(-45deg);
}
.tkrvue-irve-marker svg {
width: 19px;
height: 19px;
transform: rotate(45deg);
stroke: currentColor;
}
.tkrvue-irve-marker.is-available { background: #16845b; border-color: #0f6947; }
.tkrvue-irve-marker.is-unavailable { background: #c83d4a; border-color: #9f2431; }
.tkrvue-irve-marker.is-unknown { background: #66758a; border-color: #4b586b; }
.tkrvue-irve-cluster {
position: relative;
width: 38px;
height: 38px;
border-radius: 50% 50% 50% 16%;
background: #087f8c;
border-color: #fff;
color: #fff;
transform: rotate(-45deg);
box-shadow: 0 4px 12px rgba(15, 23, 42, .34);
}
.tkrvue-irve-cluster-icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
transform: rotate(45deg);
}
.tkrvue-irve-cluster-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
}
.tkrvue-irve-cluster strong {
position: absolute;
top: -9px;
right: -12px;
min-width: 23px;
height: 23px;
box-sizing: border-box;
display: grid;
place-items: center;
padding: 0 5px;
border: 2px solid #087f8c;
border-radius: 999px;
background: #fff;
color: #075d67;
box-shadow: 0 2px 7px rgba(15, 23, 42, .24);
font-size: 10px;
font-weight: 800;
line-height: 1;
transform: rotate(45deg);
}
html[data-map-theme="dark"] .tkrvue-irve-cluster {
border-color: #d7f6fa;
background: #13a7b7;
}
html[data-map-theme="dark"] .tkrvue-irve-cluster strong {
border-color: #13a7b7;
background: #102433;
color: #d7f6fa;
}
#map .leaflet-control-layers label.tkrvue-map-layer-below-min-zoom {
cursor: pointer;
}
#map .leaflet-control-layers label.tkrvue-map-layer-below-min-zoom .leaflet-control-layers-selector + span {
color: color-mix(in srgb, var(--tkrvue-map-control-content) 66%, transparent);
font-style: italic;
}
#map .leaflet-control-layers label.tkrvue-map-layer-below-min-zoom .leaflet-control-layers-selector {
cursor: pointer;
opacity: 1;
}
.tkrvue-irve-filter-control {
position: relative;
order: -1;
border: 0;
background: transparent;
box-shadow: none;
color: var(--tkrvue-map-control-content);
font-family: var(--tkrvue-font-family);
font-size: var(--tkrvue-font-size-md);
}
#map .tkrvue-irve-filter-toggle {
position: relative;
cursor: pointer;
}
.tkrvue-irve-filter-toggle svg,
.tkrvue-irve-filter-heading-icon svg,
.tkrvue-irve-filter-close svg,
.tkrvue-irve-filter-actions svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
#map .tkrvue-irve-filter-toggle > svg {
width: 20px;
height: 20px;
}
.tkrvue-irve-filter-toggle [data-irve-result-count] {
position: absolute;
top: -6px;
right: -7px;
min-width: 18px;
height: 18px;
box-sizing: border-box;
display: grid;
place-items: center;
padding: 0 4px;
border: 2px solid var(--tkrvue-map-control-surface);
border-radius: 999px;
background: var(--tkrvue-map-control-accent);
color: #fff;
font-size: 9px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.tkrvue-irve-filter-toggle [data-irve-result-count][hidden] {
display: none;
}
.tkrvue-irve-filter-panel {
position: fixed;
z-index: 1200;
box-sizing: border-box;
width: min(360px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
padding: 12px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid var(--tkrvue-map-control-border);
border-radius: 10px;
background: var(--tkrvue-map-control-surface-solid);
color: var(--tkrvue-map-control-content);
box-shadow: var(--tkrvue-map-control-shadow);
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--tkrvue-map-control-foreground) 42%, transparent) transparent;
}
.tkrvue-irve-filter-panel[hidden] { display: none; }
.tkrvue-irve-filter-heading {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 30px;
gap: 8px;
align-items: center;
padding-bottom: 9px;
border-bottom: 1px solid var(--tkrvue-map-control-field-border);
}
.tkrvue-irve-filter-heading > strong {
min-width: 0;
font-size: var(--tkrvue-font-size-md);
line-height: 1.25;
}
.tkrvue-irve-filter-heading-icon {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 8px;
background: color-mix(in srgb, var(--tkrvue-map-control-accent) 13%, transparent);
color: var(--tkrvue-map-control-foreground);
}
.tkrvue-irve-filter-close.tkrvue-close-button {
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
flex: 0 0 30px !important;
border-color: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 42%, var(--tkrvue-border));
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 7%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-danger, #dc2626);
}
.tkrvue-irve-filter-close.tkrvue-close-button:hover,
.tkrvue-irve-filter-close.tkrvue-close-button:focus-visible {
border-color: var(--tkrvue-danger, #dc2626);
background: color-mix(in srgb, var(--tkrvue-danger, #dc2626) 13%, var(--tkrvue-layer-surface-bg));
color: var(--tkrvue-danger, #dc2626);
outline: 0;
}
.tkrvue-irve-zoom-hint {
display: none;
margin: 10px 0 0;
padding: 8px 9px;
border-left: 3px solid var(--tkrvue-map-control-accent);
border-radius: 6px;
background: color-mix(in srgb, var(--tkrvue-map-control-accent) 9%, var(--tkrvue-map-control-field));
color: var(--tkrvue-map-control-muted);
font-size: var(--tkrvue-font-size-sm);
line-height: 1.35;
}
.tkrvue-irve-filter-control.is-zoom-limited .tkrvue-irve-zoom-hint { display: block; }
.tkrvue-irve-filter-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 10px;
}
.tkrvue-irve-filter-panel label {
min-width: 0;
display: grid;
gap: 5px;
color: var(--tkrvue-map-control-muted);
font-size: var(--tkrvue-font-size-sm);
}
.tkrvue-irve-filter-panel select {
width: 100%;
min-height: 38px;
padding: 6px 9px;
border: 1px solid var(--tkrvue-map-control-field-border);
border-radius: 7px;
background: var(--tkrvue-map-control-field);
color: var(--tkrvue-map-control-content);
font: inherit;
}
.tkrvue-irve-filter-panel select:focus-visible {
border-color: var(--tkrvue-map-control-foreground);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tkrvue-map-control-foreground) 18%, transparent);
outline: 0;
}
.tkrvue-irve-filter-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.tkrvue-irve-filter-actions button { display: inline-flex; align-items: center; gap: 6px; }
.tkrvue-irve-filter-error { display: none; margin: 10px 0 0; padding: 8px 9px; border-radius: 6px; color: var(--tkrvue-map-control-error); background: var(--tkrvue-map-control-error-bg); font-size: var(--tkrvue-font-size-sm); }
.tkrvue-irve-filter-control.has-error .tkrvue-irve-filter-error { display: block; }
.tkrvue-irve-filter-control.is-loading .tkrvue-irve-filter-toggle { opacity: .65; cursor: progress; }
.tkrvue-irve-popup { min-width: 250px; color: var(--text, #172033); }
.tkrvue-irve-popup-heading { display: flex; align-items: center; min-height: 34px; padding-right: calc(var(--tkrvue-map-close-size) + 7px); gap: 9px; }
.tkrvue-irve-popup-heading > div { display: grid; gap: 2px; }
.tkrvue-irve-popup-heading small { color: var(--muted, #64748b); }
.tkrvue-irve-popup-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #246da7; }
.tkrvue-irve-popup-icon svg { width: 25px; height: 25px; }
.leaflet-popup.tkrvue-irve-leaflet-popup .leaflet-popup-close-button { top: 12px; right: 7px; }
.tkrvue-irve-popup p { margin: 9px 0; }
.tkrvue-irve-popup-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.tkrvue-irve-details-button { width: 100%; justify-content: center; margin-top: 11px; }
.tkrvue-irve-status {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 3px 8px;
border-radius: 999px;
background: #e8edf3;
color: #4b586b;
font-size: 12px;
font-weight: 700;
}
.tkrvue-irve-status.is-available { background: #dff7eb; color: #11603f; }
.tkrvue-irve-status.is-unavailable { background: #fde7e9; color: #9f2431; }
.tkrvue-irve-detail { display: grid; gap: 16px; }
.tkrvue-irve-detail-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tkrvue-irve-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.tkrvue-irve-detail-grid > div { padding: 11px; border-radius: 9px; background: var(--soft-bg, #eef3f6); }
.tkrvue-irve-detail-grid dt { margin-bottom: 3px; color: var(--muted, #64748b); font-size: 12px; }
.tkrvue-irve-detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.tkrvue-irve-detail-actions { display: flex; justify-content: flex-end; }
.tkrvue-irve-detail-actions button { display: inline-flex; align-items: center; gap: 7px; }
.tkrvue-irve-detail-actions svg { width: 18px; height: 18px; }
.tkrvue-irve-source { margin: 0; color: var(--muted, #64748b); font-size: 12px; }
html[data-theme="dark"] .tkrvue-irve-filter-panel,
html[data-map-theme="dark"] .tkrvue-irve-leaflet-popup .leaflet-popup-content-wrapper,
html[data-map-theme="dark"] .tkrvue-irve-leaflet-popup .leaflet-popup-tip {
background: var(--tkrvue-map-control-surface-solid);
color: var(--tkrvue-map-control-content);
}
@media (max-width: 700px) {
.tkrvue-irve-filter-fields { grid-template-columns: 1fr; }
.tkrvue-irve-detail-grid { grid-template-columns: 1fr; }
}
/* Tableau adaptatif commun aux layers TrackerVue. La structure métier du
tableau reste intacte : le composant déplace les cellules existantes et ne
duplique jamais les champs ou leurs événements. */
.tkrvue-responsive-table-tools {
position: relative;
z-index: 4;
display: flex;
justify-content: flex-end;
align-items: center;
min-width: 0;
margin: 0 0 6px;
}
.tkrvue-responsive-column-picker {
position: relative;
}
.tkrvue-responsive-column-picker > summary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
list-style: none;
cursor: pointer;
}
.tkrvue-responsive-column-picker > summary::-webkit-details-marker {
display: none;
}
.tkrvue-responsive-column-picker > summary svg {
width: 17px;
height: 17px;
}
.tkrvue-responsive-column-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 40;
width: min(360px, calc(100vw - 40px));
max-height: min(430px, 64vh);
overflow: auto;
padding: 12px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}
.tkrvue-responsive-column-menu > strong,
.tkrvue-responsive-column-menu > p {
display: block;
margin: 0;
}
.tkrvue-responsive-column-menu > p {
margin-top: 4px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.tkrvue-responsive-column-menu ol {
display: grid;
gap: 6px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.tkrvue-responsive-column-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 5px 7px;
border: 1px solid var(--tkrvue-border);
border-radius: 7px;
background: color-mix(in srgb, var(--tkrvue-accent) 4%, var(--tkrvue-layer-surface-bg));
}
.tkrvue-responsive-column-item > span:first-child {
min-width: 0;
overflow-wrap: anywhere;
}
.tkrvue-responsive-column-item > small {
color: var(--tkrvue-muted);
}
.tkrvue-responsive-column-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tkrvue-responsive-column-actions .tkrvue-icon-button {
width: 34px;
min-width: 34px;
height: 34px;
min-height: 34px;
padding: 0;
}
.tkrvue-responsive-table-primary,
.tkrvue-responsive-table-primary-content {
min-width: 0;
}
.tkrvue-responsive-table .tkrvue-responsive-row-toggle {
display: none !important;
}
/* Les tableaux adaptatifs replient les cellules secondaires quand la layer
devient trop étroite. Le ResizeObserver du composant met à jour le mode
(full, compact ou cards) sur la région : aucun seuil n'est figé dans la
page métier et le chevron suit donc la largeur réelle de la layer. */
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="compact"] .tkrvue-responsive-table,
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table {
width: 100%;
min-width: 0;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="compact"] .tkrvue-responsive-row-toggle,
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-row-toggle {
display: inline-flex !important;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px;
min-width: 34px;
height: 34px;
min-height: 34px;
padding: 0;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="compact"] .tkrvue-responsive-table th[data-tkrvue-column-role="secondary"],
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="compact"] .tkrvue-responsive-table td[data-tkrvue-column-role="secondary"] {
display: none;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="compact"] .tkrvue-responsive-table tr[data-tkrvue-responsive-expanded="true"] td[data-tkrvue-column-role="secondary"] {
display: table-cell;
white-space: normal;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="compact"] .tkrvue-responsive-table td[data-tkrvue-column-role="secondary"]::before {
content: attr(data-tkrvue-label);
display: block;
margin-bottom: 2px;
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs, .74rem);
font-weight: 700;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="compact"] .tkrvue-responsive-table .tkrvue-responsive-table-primary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table {
display: block;
border-collapse: separate;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table thead {
display: none;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody {
display: grid;
gap: 8px;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr:not([data-tkrvue-responsive-empty="true"]) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
padding: 9px 10px;
border: 1px solid var(--tkrvue-border);
border-radius: 9px;
background: var(--tkrvue-layer-surface-bg);
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr:not([data-tkrvue-responsive-empty="true"]) > :is(th, td) {
display: none;
min-width: 0;
width: auto;
padding: 4px 0;
border: 0;
text-align: left;
vertical-align: top;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr:not([data-tkrvue-responsive-empty="true"]) > [data-tkrvue-column-role="selection"],
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr:not([data-tkrvue-responsive-empty="true"]) > [data-tkrvue-column-role="primary"],
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr:not([data-tkrvue-responsive-empty="true"]) > [data-tkrvue-column-role="action"] {
display: block;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr:not([data-tkrvue-responsive-empty="true"]) > [data-tkrvue-column-role="selection"] {
grid-column: 1 / -1;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr:not([data-tkrvue-responsive-empty="true"]) > [data-tkrvue-column-role="primary"] {
grid-column: 1;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr:not([data-tkrvue-responsive-empty="true"]) > [data-tkrvue-column-role="action"] {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr[data-tkrvue-responsive-expanded="true"] > [data-tkrvue-column-role="secondary"] {
display: grid;
grid-column: 1 / -1;
gap: 2px;
border-top: 1px solid var(--tkrvue-border);
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr[data-tkrvue-responsive-expanded="true"] > [data-tkrvue-column-role="secondary"]::before {
content: attr(data-tkrvue-label);
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-xs, .74rem);
font-weight: 700;
}
.tkrvue-responsive-table-region[data-tkrvue-responsive-table-mode="cards"] .tkrvue-responsive-table tbody tr[data-tkrvue-responsive-empty="true"] > td {
display: table-cell;
width: 100%;
}
:root[data-theme="dark"] .tkrvue-responsive-column-menu,
:root[data-theme="dark"] .tkrvue-responsive-column-item {
border-color: var(--tkrvue-border);
background: var(--tkrvue-layer-surface-bg);
color: var(--tkrvue-text);
}
/* Catalogue d’équipements : le bouton Ajouter est textuel, contrairement
aux actions icône des lignes de catégories. */
.organization-asset-category-custom-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
}
.organization-asset-category-custom-head h5 {
margin: 0;
color: var(--tkrvue-text);
}
.organization-asset-category-custom-head span {
color: var(--tkrvue-muted);
font-size: var(--tkrvue-font-size-sm);
}
.organization-resource-actions.organization-asset-category-add {
display: grid;
grid-template-columns: minmax(0, 520px) auto;
justify-content: start;
align-items: center;
width: min(100%, 630px);
}
.organization-resource-actions.organization-asset-category-add .primary-action {
width: auto;
min-width: 92px;
flex: 0 0 auto;
white-space: nowrap;
}
@media (max-width: 700px) {
.organization-asset-category-custom-head {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
.organization-resource-actions.organization-asset-category-add {
grid-template-columns: 1fr;
width: 100%;
}
.organization-resource-actions.organization-asset-category-add .primary-action {
width: 100%;
}
}
/* Classement des équipements : repère visuel explicite pour les éléments
qui peuvent être déplacés par glisser-déposer. */
.organization-asset-category-drag-handle {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--tkrvue-muted);
cursor: grab;
}
.organization-asset-category-drag-handle:active {
cursor: grabbing;
}
.organization-asset-category-drag-handle svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
}
.organization-asset-category-asset:hover .organization-asset-category-drag-handle,
.organization-asset-category-asset:focus-within .organization-asset-category-drag-handle {
color: var(--tkrvue-accent);
}
/* Les lignes de catégories restent compactes sur une couche large ; les
contrôles tactiles retrouvent une hauteur confortable sur mobile. */
.organization-asset-category-list {
gap: 6px;
}
.organization-asset-category-row {
gap: 6px;
padding: 4px 8px;
}
.organization-asset-category-row input[type="text"] {
min-height: 30px;
height: 30px;
padding: 4px 8px;
}
.organization-asset-category-row .tkrvue-icon-button {
width: 32px;
height: 30px;
min-height: 30px;
}
@media (max-width: 700px) {
.organization-asset-category-row {
gap: 8px;
padding: 6px 8px;
}
.organization-asset-category-row input[type="text"] {
min-height: 34px;
height: 34px;
}
.organization-asset-category-row .tkrvue-icon-button {
width: 34px;
height: 34px;
min-height: 34px;
}
}