@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
:root {
--bg: #f5f7fb;
--card: #fff;
--text: #0f172a;
--muted: #64748b;
--border: #e2e8f0;
--action: #2563eb;
--primary: #1c301d;
--primary-700: #0d1a0d;
--primary-dark: #0d1a0d;
--secundary: #d9c793;
--secundary-dark: #a59870;
--green: #2f814e;
--orange: #f59e0b;
--red: #dc2626;
--gray: #9ca3af;
--plate-bg: #fff2b3;
--plate-border: #e0c978;
--radius: 16px;
--radius-lg: 18px;
--shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
--container-max: 1440px;
}
@view-transition {
navigation: auto;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
html,
body {
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
input,
textarea,
select {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
img,
a {
-webkit-user-drag: none !important;
user-drag: none !important;
pointer-events: auto !important; /* laat klikken toe */
cursor: default;
}
img.app-image-fade {
opacity: 0;
transition: opacity 0.32s ease;
}
img.app-image-fade.app-image-fade--loaded {
opacity: 1;
}
a:hover {
cursor: pointer;
}
a,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: "Outfit", sans-serif;
line-height: 1.5;
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 24px;
}
input,
select,
textarea,
button {
font-family: inherit;
font-size: 15px;
color: var(--text);
}
input::placeholder,
textarea::placeholder {
color: var(--muted);
opacity: 0.8;
}
select {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
font-size: 15px;
font-family: inherit;
width: 100%;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
button {
font-weight: 600;
letter-spacing: -0.01em;
}
@media (max-width: 768px) {
html,
body {
height: auto;
min-height: 100dvh;
overflow-x: hidden;
}
input,
textarea,
select {
font-size: 16px;
}
.form-card,
form {
-webkit-overflow-scrolling: touch;
}
}
/* Titles */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: auto;
}
h2 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
font-size: 1.25rem;
}
h2 svg {
width: 20px;
height: 20px;
}
.card-title {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
line-height: 1.2;
min-width: 0;
}
.card-title i,
.card-title svg {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
@media (max-width: 760px) {
.card-title {
gap: 8px;
}
.card-title i,
.card-title svg {
width: 18px;
height: 18px;
flex-basis: 18px;
}
}
/* Header & KPI */
.page-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.8rem;
margin-bottom: 22px;
}
.page-header .btn.danger {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
padding: 10px 14px;
margin-left: auto;
}
.page-header__title {
display: grid;
gap: 4px;
min-width: 0;
}
.page-header__title h1 {
margin: 0;
font-size: clamp(1.2rem, 2.4vw, 1.9rem);
line-height: 1.15;
letter-spacing: -0.02em;
}
.subtitle {
margin: 0;
color: #64748b;
font-size: clamp(0.82rem, 1.25vw, 0.96rem);
line-height: 1.35;
}
.page-header__kpi {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.page-header__actions {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
.page-header__actions .btn.ghost:hover {
background: #f9fafb;
border-color: #d1d5db;
}
@media (max-width: 820px) {
.page-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: 100%;
position: sticky;
top: 0;
z-index: 150;
padding: calc(8px + env(safe-area-inset-top)) 0 8px;
margin: 0 0 14px;
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(203, 213, 225, 0.9);
background: rgba(243, 248, 249, 0.96);
box-shadow: none;
backdrop-filter: blur(8px) saturate(130%);
-webkit-backdrop-filter: blur(8px) saturate(130%);
}
.page-header__left {
grid-column: 1;
min-width: 36px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
.page-header__left:empty {
visibility: hidden;
}
.page-header__title {
grid-column: 2;
justify-self: center;
text-align: center;
display: block;
min-width: 0;
width: 100%;
}
.page-header__title h1 {
font-size: clamp(1.12rem, 4.6vw, 1.38rem) !important;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
color: #0f172a;
}
.page-header__title .subtitle {
display: none !important;
}
.page-header__actions {
grid-column: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
flex-shrink: 0;
min-width: 36px;
white-space: nowrap;
justify-content: flex-end;
}
.page-header__left .btn,
.page-header__actions .btn {
width: 36px;
height: 36px;
padding: 0;
border-radius: 999px;
justify-content: center;
flex: 0 0 auto;
margin: 0;
}
.page-header__actions .btn .btn-label {
display: none !important;
}
.page-header__actions .btn.primary,
.page-header__actions .btn.danger {
margin-left: 0;
border-color: #334155;
background: #334155;
color: #ffffff;
}
.page-header__actions .btn.primary:hover,
.page-header__actions .btn.danger:hover {
border-color: #475569;
background: #475569;
}
.page-header .btn.ghost {
background: #fff;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.page-header__left .btn.ghost {
box-shadow: none;
}
.page-header__left .btn i,
.page-header__left .btn svg,
.page-header__actions .btn i,
.page-header__actions .btn svg {
width: 16px;
height: 16px;
}
#indexPage .page-header__actions--tight,
#driverCostsPage .page-header__actions--tight {
gap: 6px;
}
#indexPage .add-vehicle-btn,
#driverCostsPage .add-vehicle-btn {
margin-right: 0;
}
#indexPage .add-vehicle-btn .btn-label,
#driverCostsPage .add-vehicle-btn .btn-label {
display: none;
}
#indexPage .add-vehicle-btn i,
#indexPage .add-vehicle-btn svg,
#driverCostsPage .add-vehicle-btn i,
#driverCostsPage .add-vehicle-btn svg {
width: 16px;
height: 16px;
margin: 0;
}
}
/* App shell */
.app-shell {
min-height: 100vh;
}
.app-sidebar {
display: none;
}
/* Mobile bottom navigation */
.app-mobile-bottom-nav {
display: none;
scroll-behavior: auto !important;
}
@media (max-width: 1119px) {
.app-shell {
--app-mobile-nav-height: 74px;
}
.app-shell__main {
padding-bottom: calc(
var(--app-mobile-nav-height) + env(safe-area-inset-bottom) + 12px
);
}
.app-mobile-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1090;
display: flex;
align-items: stretch;
gap: 6px;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(226, 232, 240, 0.96);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.app-mobile-bottom-nav__link {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 2px;
border-radius: 12px;
text-decoration: none;
color: #64748b;
scroll-behavior: auto !important;
transition:
background 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.app-mobile-bottom-nav__link:hover {
background: #f1f5f9;
color: #334155;
transform: translateY(-1px);
}
.app-mobile-bottom-nav__link.is-active {
background: #0f172a;
color: #fff;
}
.app-mobile-bottom-nav__link:focus-visible {
outline: none;
}
.app-mobile-bottom-nav__icon {
position: relative;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-mobile-bottom-nav__icon svg {
width: 18px;
height: 18px;
stroke-width: 2.15;
}
.app-mobile-bottom-nav__badge {
position: absolute;
top: -8px;
right: -11px;
min-width: 18px;
height: 16px;
padding: 0 5px;
border-radius: 999px;
background: #dc2626;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
line-height: 1;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.98);
}
.app-mobile-bottom-nav__label {
font-size: 10px;
font-weight: 700;
line-height: 1.15;
white-space: nowrap;
}
}
@media (max-width: 1119px), (hover: none) and (pointer: coarse) {
*,
*::before,
*::after {
-webkit-tap-highlight-color: transparent !important;
}
*:focus,
*:focus-visible,
*:active {
outline: none !important;
box-shadow: none !important;
}
}
@media (min-width: 1120px) {
.app-shell {
--app-modal-main-offset: 248px;
--app-sidebar-edge-height: 38px;
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
align-items: stretch;
position: relative;
transition: grid-template-columns 0.22s ease;
background:
radial-gradient(
circle at top left,
rgba(37, 99, 235, 0.08),
transparent 24%
),
linear-gradient(180deg, #f6f8fc 0%, #f3f6fb 46%, #eef3f9 100%);
}
.app-shell:not(.app-shell--sidebar-ready),
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__scroll,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__header,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__brand,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__user-panel,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__brand-copy,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__user-copy,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__section-label,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__link,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__link-copy,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__link-arrow,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__footer-link,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__footer-link-label,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__logout,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__logout-label,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__toggle,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__toggle-icon,
.app-shell:not(.app-shell--sidebar-ready) .app-sidebar__toggle svg {
transition: none !important;
}
.app-shell--sidebar-collapsed {
--app-modal-main-offset: 88px;
grid-template-columns: 88px minmax(0, 1fr);
}
.app-shell__main {
min-width: 0;
position: relative;
z-index: 1;
}
.app-sidebar {
position: sticky;
top: 0;
align-self: start;
display: flex;
flex-direction: column;
height: 100vh;
z-index: 4;
isolation: isolate;
border-right: 1px solid rgba(203, 213, 225, 0.9);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(248, 250, 252, 0.96) 62%,
rgba(241, 245, 249, 0.98) 100%
);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow-x: visible;
view-transition-name: app-sidebar;
}
::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar) {
animation-duration: 160ms;
animation-timing-function: ease;
}
.app-sidebar__header {
position: relative;
flex-shrink: 0;
padding: 14px 0 10px 14px;
}
.app-sidebar__scroll {
flex: 1 1 auto;
min-height: 0;
padding: 0 10px 14px 14px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
overflow-x: hidden;
transition: padding 0.22s ease;
}
.app-sidebar__masthead {
position: relative;
min-height: 42px;
background: transparent;
border: 0;
box-shadow: none;
}
.app-sidebar__edge {
position: absolute;
top: 50%;
right: 0;
width: 34px;
height: var(--app-sidebar-edge-height);
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
pointer-events: auto;
transform: translate(50%, -50%);
}
.app-sidebar__toggle {
position: relative;
width: 30px;
min-width: 0;
height: 100%;
padding: 0;
border: 1px solid rgba(203, 213, 225, 0.95);
border-radius: 14px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(244, 247, 252, 0.96) 100%
);
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow:
0 8px 18px rgba(15, 23, 42, 0.08),
0 1px 0 rgba(255, 255, 255, 0.75) inset;
transition:
border-color 0.16s ease,
box-shadow 0.16s ease,
background 0.16s ease,
width 0.22s ease,
min-width 0.22s ease;
}
.app-sidebar__toggle:hover {
border-color: #bfdbfe;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow:
0 10px 20px rgba(15, 23, 42, 0.1),
0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.app-sidebar__toggle:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.22);
outline-offset: 2px;
}
.app-sidebar__toggle-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #2563eb;
flex-shrink: 0;
transition:
background 0.16s ease,
color 0.16s ease;
}
.app-sidebar__toggle svg {
width: 16px;
height: 16px;
transition: transform 0.22s ease;
}
.app-shell--sidebar-collapsed .app-sidebar__toggle svg {
transform: rotate(180deg);
}
.app-sidebar__brand {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 10px;
align-items: center;
width: 100%;
padding: 2px 9px;
box-sizing: border-box;
border-radius: 0;
border: 0;
background: transparent;
box-shadow: none;
color: inherit;
min-width: 0;
transition: padding 0.22s ease;
}
.app-sidebar__brand-mark {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-sidebar__brand-logo {
display: block;
width: 30px;
height: 30px;
object-fit: contain;
}
.app-sidebar__brand-copy {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
max-width: 160px;
max-height: 44px;
transition:
opacity 0.14s ease,
max-width 0.22s ease,
max-height 0.22s ease,
transform 0.14s ease;
}
.app-sidebar__brand-copy strong {
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
color: #0f172a;
}
.app-sidebar__brand-copy span {
margin-top: 3px;
font-size: 0.72rem;
color: #64748b;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
}
.app-sidebar__user-panel {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
width: 100%;
padding: 8px 9px 12px;
box-sizing: border-box;
min-width: 0;
border: 1px solid transparent;
border-radius: 13px;
color: inherit;
text-decoration: none;
transition:
padding 0.22s ease,
border-color 0.16s ease,
background 0.16s ease,
box-shadow 0.16s ease;
}
.app-sidebar__user-panel--link:hover {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.app-sidebar__user-panel--link:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.22);
outline-offset: 2px;
}
.app-sidebar__user-panel.is-active {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.app-sidebar__avatar {
width: 38px;
height: 38px;
border-radius: 12px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(
145deg,
rgba(226, 232, 240, 0.92),
rgba(203, 213, 225, 0.96)
);
border: 1px solid rgba(203, 213, 225, 0.9);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 6px 14px rgba(15, 23, 42, 0.08);
flex-shrink: 0;
}
.app-sidebar__avatar::after {
content: "";
position: absolute;
inset: 0;
background: #1b301d;
opacity: 0;
transition: opacity 0.14s ease;
pointer-events: none;
}
.app-sidebar__avatar-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.app-sidebar__avatar-action {
position: absolute;
inset: 0;
width: 18px;
height: 18px;
margin: auto;
color: #ffffff;
opacity: 0;
transform: scale(0.92);
pointer-events: none;
z-index: 1;
transition:
opacity 0.14s ease,
transform 0.14s ease;
}
.app-sidebar__avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #1f2937;
font-weight: 800;
font-size: 0.82rem;
letter-spacing: -0.04em;
}
.app-sidebar__user-copy {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
max-width: 160px;
max-height: 48px;
transition:
opacity 0.14s ease,
max-width 0.22s ease,
max-height 0.22s ease,
transform 0.14s ease;
}
.app-sidebar__user-copy strong {
font-size: 0.84rem;
font-weight: 700;
color: #0f172a;
line-height: 1.15;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.app-sidebar__user-copy span {
margin-top: 2px;
font-size: 0.69rem;
color: #64748b;
font-weight: 600;
}
.app-sidebar__user-arrow {
flex-shrink: 0;
transition:
color 0.14s ease,
transform 0.14s ease,
opacity 0.14s ease;
}
.app-sidebar__user-panel--link:hover .app-sidebar__user-arrow,
.app-sidebar__user-panel--link:focus-visible .app-sidebar__user-arrow,
.app-sidebar__user-panel.is-active .app-sidebar__user-arrow {
transform: translateX(2px);
}
.app-shell:not(.app-shell--sidebar-collapsed)
.app-sidebar__user-panel--link:hover
.app-sidebar__avatar::after,
.app-shell:not(.app-shell--sidebar-collapsed)
.app-sidebar__user-panel--link:focus-visible
.app-sidebar__avatar::after {
opacity: 1;
}
.app-shell:not(.app-shell--sidebar-collapsed)
.app-sidebar__user-panel--link:hover
.app-sidebar__avatar-action,
.app-shell:not(.app-shell--sidebar-collapsed)
.app-sidebar__user-panel--link:focus-visible
.app-sidebar__avatar-action {
opacity: 1;
transform: scale(1);
}
.app-sidebar__section {
display: grid;
gap: 6px;
}
.app-sidebar__section-label {
margin: 0 0 1px 8px;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
transition:
opacity 0.12s ease,
max-height 0.22s ease,
margin 0.22s ease;
}
.app-sidebar__nav {
display: grid;
gap: 6px;
}
.app-sidebar__link {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 8px 9px;
border-radius: 13px;
border: 1px solid transparent;
background: transparent;
color: inherit;
transition:
transform 0.16s ease,
border-color 0.16s ease,
box-shadow 0.16s ease,
background 0.16s ease,
padding 0.22s ease;
}
.app-sidebar__link:hover {
transform: translateX(2px);
border-color: #dbe4f2;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.app-sidebar__link:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.26);
outline-offset: 2px;
}
.app-sidebar__link.is-active {
border-color: #bfdbfe;
background: linear-gradient(160deg, #ffffff 0%, #eef5ff 100%);
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}
.app-sidebar__link--map.is-active {
border-color: #67e8f9;
background: linear-gradient(160deg, #ffffff 0%, #ecfeff 100%);
box-shadow: 0 12px 24px rgba(8, 145, 178, 0.12);
}
.app-sidebar__link--driver-costs.is-active {
border-color: #c4b5fd;
background: linear-gradient(160deg, #ffffff 0%, #f5f3ff 100%);
box-shadow: 0 12px 24px rgba(124, 58, 237, 0.12);
}
.app-sidebar__link--consilium.is-active {
border-color: #8bc9dc;
background: linear-gradient(160deg, #ffffff 0%, #f2fbf6 58%, #eef5ff 100%);
box-shadow: 0 12px 24px rgba(112, 174, 228, 0.12);
}
.app-sidebar__link--contacts.is-active {
border-color: #99f6e4;
background: linear-gradient(160deg, #ffffff 0%, #ecfeff 48%, #f0fdfa 100%);
box-shadow: 0 12px 24px rgba(13, 148, 136, 0.14);
}
.app-sidebar__icon {
width: 38px;
height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.app-sidebar__icon svg {
width: 18px;
height: 18px;
stroke-width: 2.05;
}
.app-sidebar__icon-logo {
width: 24px;
height: auto;
max-height: 18px;
display: block;
}
.app-sidebar__icon--blue {
color: #2563eb;
background: rgba(37, 99, 235, 0.13);
}
.app-sidebar__icon--teal {
color: #0e7490;
background: rgba(8, 145, 178, 0.14);
}
.app-sidebar__icon--violet {
color: #7c3aed;
background: rgba(124, 58, 237, 0.14);
}
.app-sidebar__icon--gold {
color: #b45309;
background: rgba(245, 158, 11, 0.16);
}
.app-sidebar__icon--red {
color: #b91c1c;
background: rgba(220, 38, 38, 0.14);
}
.app-sidebar__icon--consilium {
color: #79c78d;
background: linear-gradient(
145deg,
rgba(121, 199, 141, 0.2) 0%,
rgba(112, 174, 228, 0.16) 100%
);
}
.app-sidebar__icon--slate {
color: #334155;
background: rgba(148, 163, 184, 0.2);
}
.app-sidebar__badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 16px;
padding: 0 5px;
border-radius: 999px;
background: #dc2626;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.58rem;
font-weight: 700;
line-height: 1;
box-shadow: 0 1px 4px rgba(185, 28, 28, 0.28);
}
.app-sidebar__link-copy {
display: flex;
flex-direction: column;
min-width: 0;
max-width: 160px;
max-height: 22px;
}
.app-sidebar__link-title {
font-size: 0.84rem;
font-weight: 700;
line-height: 1.1;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-sidebar__link-arrow {
width: 14px;
height: 14px;
margin-right: 4px;
color: #94a3b8;
transition:
opacity 0.12s ease,
transform 0.14s ease;
}
.app-sidebar__footer {
margin-top: auto;
display: grid;
gap: 0;
}
.app-sidebar__footer-actions {
display: grid;
gap: 6px;
padding-top: 12px;
border-top: 1px solid rgba(203, 213, 225, 0.85);
}
.app-sidebar__footer-link {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
width: 100%;
padding: 8px 9px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 13px;
background: transparent;
color: inherit;
text-decoration: none;
transition:
padding 0.22s ease,
transform 0.16s ease,
border-color 0.16s ease,
background 0.16s ease,
box-shadow 0.16s ease;
}
.app-sidebar__footer-link:hover {
transform: translateX(2px);
border-color: #dbe4f2;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.app-sidebar__footer-link:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.22);
outline-offset: 2px;
}
.app-sidebar__footer-link.is-active {
border-color: #bfdbfe;
background: linear-gradient(160deg, #ffffff 0%, #eef5ff 100%);
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}
.app-sidebar__footer-link-icon {
width: 38px;
height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-sidebar__footer-link-icon svg {
width: 18px;
height: 18px;
stroke-width: 2.05;
}
.app-sidebar__footer-link-icon--settings {
color: #334155;
background: rgba(148, 163, 184, 0.2);
}
.app-sidebar__footer-link-label {
display: inline-block;
font-size: 0.84rem;
font-weight: 700;
line-height: 1.1;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
max-height: 20px;
transition:
opacity 0.12s ease,
max-width 0.22s ease,
max-height 0.22s ease,
transform 0.14s ease;
}
.app-sidebar__logout {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 10px;
align-items: center;
width: 100%;
padding: 8px 9px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 13px;
background: transparent;
color: inherit;
text-decoration: none;
transition:
padding 0.22s ease,
transform 0.16s ease,
border-color 0.16s ease,
background 0.16s ease,
box-shadow 0.16s ease;
}
.app-sidebar__logout-icon {
width: 38px;
height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(239, 68, 68, 0.12);
color: #dc2626;
transition:
background 0.16s ease,
color 0.16s ease;
}
.app-sidebar__logout-icon svg {
width: 18px;
height: 18px;
stroke-width: 2.05;
}
.app-sidebar__logout:hover {
transform: translateX(2px);
border-color: #fecaca;
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.96) 0%,
rgba(254, 242, 242, 0.92) 100%
);
box-shadow: 0 10px 20px rgba(127, 29, 29, 0.08);
}
.app-sidebar__logout:hover .app-sidebar__logout-icon {
background: rgba(239, 68, 68, 0.16);
color: #b91c1c;
}
.app-sidebar__logout:focus-visible {
outline: 3px solid rgba(239, 68, 68, 0.18);
outline-offset: 2px;
}
.app-sidebar__logout-label,
.app-sidebar__footer-link-label,
.app-sidebar__link-copy {
transition:
opacity 0.12s ease,
max-width 0.22s ease,
max-height 0.22s ease,
transform 0.14s ease;
}
.app-sidebar__logout-label {
display: inline-block;
font-size: 0.84rem;
font-weight: 700;
line-height: 1.1;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
max-height: 20px;
}
.app-shell--sidebar-collapsed .app-sidebar__scroll {
padding: 0 8px 14px 8px;
}
.app-shell--sidebar-collapsed .app-sidebar__header {
padding: 14px 0 8px 0px;
}
.app-shell--sidebar-collapsed .app-sidebar__brand {
grid-template-columns: 1fr;
justify-self: center;
justify-items: center;
width: 52px;
aspect-ratio: 1 / 1;
gap: 0;
margin-inline: auto;
padding: 0;
}
.app-shell--sidebar-collapsed .app-sidebar__user-panel {
grid-template-columns: 1fr;
position: relative;
justify-self: center;
justify-items: center;
width: 52px;
aspect-ratio: 1 / 1;
gap: 0;
padding: 0;
}
.app-shell--sidebar-collapsed .app-sidebar__brand-copy,
.app-shell--sidebar-collapsed .app-sidebar__user-copy,
.app-shell--sidebar-collapsed .app-sidebar__link-copy,
.app-shell--sidebar-collapsed .app-sidebar__footer-link-label,
.app-shell--sidebar-collapsed .app-sidebar__logout-label {
opacity: 0;
max-width: 0;
max-height: 0;
overflow: hidden;
transform: translateX(-4px);
pointer-events: none;
}
.app-shell--sidebar-collapsed .app-sidebar__link-copy,
.app-shell--sidebar-collapsed .app-sidebar__link-title {
display: none;
}
.app-shell--sidebar-collapsed .app-sidebar__user-copy {
display: none;
}
.app-shell--sidebar-collapsed .app-sidebar__toggle {
width: 30px;
min-width: 30px;
border-radius: 14px;
}
.app-shell--sidebar-collapsed .app-sidebar__section-label {
opacity: 0;
max-height: 0;
overflow: hidden;
margin: 0;
display: none;
}
.app-shell--sidebar-collapsed .app-sidebar__section,
.app-shell--sidebar-collapsed .app-sidebar__nav {
justify-items: center;
}
.app-shell--sidebar-collapsed .app-sidebar__section {
position: relative;
width: 100%;
}
.app-shell--sidebar-collapsed .app-sidebar__section + .app-sidebar__section {
margin-top: 8px;
padding-top: 14px;
}
.app-shell--sidebar-collapsed
.app-sidebar__section
+ .app-sidebar__section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 36px;
height: 1px;
transform: translateX(-50%);
background: linear-gradient(
90deg,
rgba(203, 213, 225, 0) 0%,
rgba(203, 213, 225, 0.95) 24%,
rgba(203, 213, 225, 0.95) 76%,
rgba(203, 213, 225, 0) 100%
);
}
.app-shell--sidebar-collapsed .app-sidebar__link {
grid-template-columns: 1fr;
place-items: center;
justify-self: center;
align-self: center;
width: 52px;
aspect-ratio: 1 / 1;
padding: 0;
}
.app-shell--sidebar-collapsed .app-sidebar__icon {
margin: 0;
}
.app-shell--sidebar-collapsed .app-sidebar__nav .app-sidebar__link-arrow {
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
transform: translateX(-4px);
display: none;
}
.app-shell--sidebar-collapsed .app-sidebar__footer-link {
grid-template-columns: 1fr;
place-items: center;
justify-self: center;
gap: 0;
width: 52px;
aspect-ratio: 1 / 1;
padding: 0;
}
.app-shell--sidebar-collapsed .app-sidebar__footer-link-arrow,
.app-shell--sidebar-collapsed .app-sidebar__footer-link-label {
display: none;
}
.app-shell--sidebar-collapsed .app-sidebar__avatar-action {
display: none;
}
.app-shell--sidebar-collapsed .app-sidebar__user-arrow {
position: absolute;
inset: 0;
width: 18px;
height: 18px;
margin: auto;
color: #2563eb;
opacity: 0;
transform: scale(0.92);
pointer-events: none;
z-index: 1;
transition:
opacity 0.14s ease,
transform 0.14s ease;
}
.app-shell--sidebar-collapsed
.app-sidebar__user-panel--link:hover
.app-sidebar__user-arrow,
.app-shell--sidebar-collapsed
.app-sidebar__user-panel--link:focus-visible
.app-sidebar__user-arrow {
color: #ffffff;
opacity: 1;
transform: scale(1);
}
.app-shell--sidebar-collapsed .app-sidebar__user-panel--link:hover,
.app-shell--sidebar-collapsed .app-sidebar__user-panel--link:focus-visible {
transform: none;
}
.app-shell--sidebar-collapsed
.app-sidebar__user-panel--link:hover
.app-sidebar__avatar,
.app-shell--sidebar-collapsed
.app-sidebar__user-panel--link:focus-visible
.app-sidebar__avatar {
filter: none;
}
.app-shell--sidebar-collapsed
.app-sidebar__user-panel--link:hover
.app-sidebar__avatar::after,
.app-shell--sidebar-collapsed
.app-sidebar__user-panel--link:focus-visible
.app-sidebar__avatar::after {
opacity: 1;
}
.app-shell--sidebar-collapsed .app-sidebar__footer {
display: grid;
justify-items: center;
}
.app-shell--sidebar-collapsed .app-sidebar__footer-actions {
width: 100%;
display: grid;
justify-items: center;
gap: 6px;
}
.app-shell--sidebar-collapsed .app-sidebar__logout {
grid-template-columns: 1fr;
place-items: center;
justify-self: center;
gap: 0;
width: 52px;
min-width: 52px;
aspect-ratio: 1 / 1;
padding: 0;
}
.app-shell--sidebar-collapsed .app-sidebar__logout-label {
display: none;
}
.app-shell__desktop-hide {
display: none !important;
}
}
@media (max-width: 1119px) {
.app-shell__main {
min-width: 0;
}
}
/* Buttons */
.btn {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--border);
background: #fff;
color: var(--text);
text-decoration: none;
font-weight: 600;
cursor: pointer;
transition:
background 0.2s,
box-shadow 0.2s,
transform 0.1s,
border-color 0.2s;
}
.btn:hover {
background: #f8fafc;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.btn.primary {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.btn.primary:hover {
background: var(--primary-700);
}
.btn.danger {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.btn.danger:hover {
background: #0b1225;
}
.btn.ghost {
background: transparent;
border-color: transparent;
color: var(--action);
}
.btn.ghost:hover {
box-shadow: none;
}
.btn.ghost i.feather-log-out {
stroke-width: 2.2;
}
.btn i {
width: 16px;
height: 16px;
}
.btn[disabled] {
cursor: not-allowed;
opacity: 0.76;
transform: none;
}
.btn[data-loading="1"] {
position: relative;
isolation: isolate;
}
.btn[data-loading="1"]::after {
content: "";
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid currentColor;
border-right-color: transparent;
animation: appLoadingSpin 0.78s linear infinite;
flex: 0 0 auto;
}
.btn.fullwidth {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 14px;
gap: 8px;
width: 100%;
padding: 12px 0;
border-radius: 10px;
font-weight: 600;
text-align: center;
letter-spacing: 0.01em;
border: none;
}
.btn.fullwidth.primary {
background: var(--secundary);
color: var(--primary-700);
}
.btn.fullwidth.primary:hover {
background: var(--secundary-dark);
color: #fff;
}
.btn.fullwidth.maintenance {
background: var(--primary);
color: #fff;
}
.btn.fullwidth.maintenance:hover {
background: var(--primary-dark);
color: #fff;
}
.btn.fullwidth i {
width: 14px !important;
height: 14px !important;
stroke-width: 2;
}
/* VIEW-MODE BUTTONS */
#viewToggle .chip {
display: inline-flex;
align-items: center;
gap: 6px;
}
#viewToggle .chip i,
#viewToggle .chip svg {
width: 14px !important;
height: 14px !important;
stroke-width: 2;
margin-top: -1px;
flex-shrink: 0;
}
/* Divider */
.divider {
width: 100%;
height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(15, 23, 42, 0.08),
transparent
);
margin: 1.5rem 0 1.5rem;
border: none;
}
@media (max-width: 720px) {
.divider {
margin: 2rem 0 2rem;
}
}
/* Alerts */
/* === Subtielere Fleet Stats === */
.fleet-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 0 0 20px;
}
.fleet-stat {
display: flex;
align-items: center;
gap: 0.9rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.9rem 1.1rem;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
cursor: pointer;
transition:
background 0.25s ease,
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
text-decoration: none;
color: inherit;
}
.fleet-stat:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
background: var(--card);
}
.fleet-stat.active {
border-color: rgba(59, 130, 246, 0.55) !important;
box-shadow: 0 8px 28px rgba(59, 130, 246, 0.28) !important;
transform: translateY(-2px);
}
.stat-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
}
.stat-icon i {
width: 20px;
height: 20px;
color: var(--text);
opacity: 0.75;
}
.stat-info {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.stat-value {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text);
}
.stat-label {
color: var(--muted);
font-size: 0.85rem;
font-weight: 500;
margin-top: 2px;
}
.fleet-stat .stat-icon svg {
width: 20px;
height: 20px;
stroke: currentColor !important;
stroke-width: 2.2;
}
.fleet-stat.total .stat-icon {
background: rgba(37, 99, 235, 0.08);
color: var(--action); /* <-- bepaalt stroke kleur */
}
.fleet-stat.ok .stat-icon {
background: rgba(22, 163, 74, 0.08);
color: var(--green);
}
.fleet-stat.warn .stat-icon {
background: rgba(245, 158, 11, 0.08);
color: var(--orange);
}
.fleet-stat.red .stat-icon {
background: rgba(220, 38, 38, 0.08);
color: var(--red);
}
/* Mobiel */
@media (max-width: 900px) {
.fleet-stats {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
}
.fleet-stat {
padding: 0.8rem;
}
.stat-value {
font-size: 1.25rem;
}
}
/* Toolbar / Search / Chips */
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.search {
display: flex;
gap: 10px;
min-width: 360px;
flex: 1;
}
.input-wrap {
position: relative;
flex: 1;
}
.input-wrap .input-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--muted);
}
.search input[type="search"] {
width: 100%;
padding: 12px 14px 12px 36px;
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
}
.search input[type="search"]:focus {
outline: none;
border-color: #a5b4fc;
box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.25);
}
.filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chip {
border: 1px solid var(--border);
background: #eef2ff;
color: #1e293b;
padding: 8px 12px;
border-radius: 999px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
}
.chip.active {
background: #dbeafe;
border-color: #93c5fd;
}
.plate-tag {
font-size: 0.8rem;
font-weight: 600;
background: #0f172a;
color: #fff;
padding: 2px 9px;
border-radius: 999px;
}
/* Grid & Cards */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 22px;
align-items: stretch;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.45s ease-out,
transform 0.45s ease-out;
will-change: opacity, transform;
}
.section-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border: 1px solid #dbe4f2;
padding: 1.5rem;
margin-bottom: 2rem;
}
@media (max-width: 750px) {
.section-card {
background: #fff !important;
border-radius: 12px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
padding: 1.5rem !important;
margin-bottom: 2rem !important;
}
}
.card.loaded {
opacity: 1;
transform: translateY(0);
}
.card.loaded:nth-child(1) {
transition-delay: 0.05s;
}
.card.loaded:nth-child(2) {
transition-delay: 0.1s;
}
.card.loaded:nth-child(3) {
transition-delay: 0.15s;
}
.card.loaded:nth-child(4) {
transition-delay: 0.2s;
}
.thumb {
position: relative;
width: 100%;
background: #fff;
overflow: hidden;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blinker-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
animation: blinkerReal 1.1s infinite;
will-change: opacity, filter;
mix-blend-mode: screen;
}
@keyframes blinkerReal {
/* UIT (0% - 50%) */
0% {
opacity: 0;
filter: brightness(1);
}
45% {
opacity: 0;
filter: brightness(1);
}
/* snelle opbouw */
50% {
opacity: 0.6;
filter: brightness(1.3);
}
/* AAN (50% - 100%) */
55% {
opacity: 1;
filter: brightness(1.6);
}
95% {
opacity: 1;
filter: brightness(1.6);
}
/* snelle uitval */
100% {
opacity: 0;
filter: brightness(1);
}
}
/* ---- Status vlaggen ---- */
.flag-wrap {
position: absolute;
top: 12px;
right: 12px;
display: flex;
gap: 8px;
align-items: center;
z-index: 2;
}
.flag {
background: #5f9ea1;
color: #fff;
border-radius: 8px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
line-height: 1;
user-select: none;
box-sizing: border-box;
}
.flag--main {
background: #dbeafe !important;
color: #1d4ed8 !important;
border: 1px solid #bfdbfe;
}
.flag--offline {
background: #e2e8f0 !important;
color: #334155 !important;
border: 1px solid #cbd5e1;
}
.flag--critical {
background: #dc2626 !important;
border: 1px solid #b91c1c;
animation: blinkFlag 1.5s ease-in-out infinite;
}
.flag--warning {
background: #f59e0b !important;
color: #fff !important;
border: 1px solid #d97706;
}
.flag svg {
flex-shrink: 0;
margin-top: -1px;
}
@keyframes blinkFlag {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* ---- Flags ---- */
.flags,
.flag-wrap {
opacity: 0;
}
.flags.loaded,
.flag-wrap.loaded {
opacity: 1;
transition: opacity 0.35s ease-out;
}
.icon-warning {
display: block;
width: 16px;
height: 16px;
margin-top: -1px;
}
.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;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 6px;
}
.title-wrap {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.title-strong {
font-weight: 800;
font-size: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title-muted {
color: var(--muted);
font-size: 14px;
}
.badge {
font-weight: 800;
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: #fff;
}
.badge--green {
color: var(--green);
background: #f0fff4;
border-color: #b7efc5;
}
.badge--orange {
color: var(--orange);
background: #fff9e6;
border-color: #ffe1a6;
}
.badge--red {
color: var(--red);
background: #fff1f2;
border-color: #ffc4c4;
}
.rows {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
padding: 4px 16px 14px;
}
.rows > div {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-bottom: 8px;
}
.rows strong {
color: var(--muted);
font-weight: 600;
font-size: 13px;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.rows span {
font-weight: 600;
color: var(--text);
font-size: 14px;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rows span:empty,
.rows span:contains("—") {
color: var(--muted);
font-weight: 500;
}
.bars {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 16px 14px;
}
.bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 12px;
background: #fff;
}
.bar__label {
font-weight: 800;
font-size: 13px;
display: flex;
gap: 8px;
align-items: center;
}
.bar__value {
font-weight: 800;
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border);
}
.bar__value--green {
color: var(--green);
background: #f0fff4;
border-color: #b7efc5;
}
.bar__value--orange {
color: var(--orange);
background: #fff9e6;
border-color: #ffe1a6;
}
.bar__value--red {
color: var(--red);
background: #fff1f2;
border-color: #ffc4c4;
}
.bar__value--muted {
background: #f1f5f9;
color: #475569;
}
.bar--red {
border: 1px solid #fecaca;
background: #fff1f2;
}
.bar--orange {
border: 1px solid #fed7aa;
background: #fff7ed;
}
.bar--red .bar__value {
color: #b91c1c;
font-weight: 600;
border-color: #a77373;
border-style: dashed;
}
.bar--orange .bar__value {
color: #c2410c;
font-weight: 600;
border-color: #ffe1a6;
border-style: dashed;
}
.card-actions {
display: flex;
flex-direction: row;
gap: 10px;
padding: 12px 16px 16px;
position: relative;
}
.card-actions .btn.fullwidth {
flex: 1 1 0;
min-width: 0;
width: auto;
font-size: 13px;
padding: 10px 0;
gap: 6px;
overflow: hidden;
}
.card-actions .btn.fullwidth i {
width: 13px !important;
height: 13px !important;
}
#indexPage .card-actions .fleet-info-btn {
display: inline-flex !important;
visibility: visible !important;
order: 1;
}
#indexPage .card-actions .maintenance {
order: 2;
}
#indexPage .card-actions .fleet-lock-btn {
order: 3;
flex: 0 0 44px;
width: 44px;
padding: 10px 0;
justify-content: center;
border: 1px solid #d5deec;
margin-left: 0;
}
#indexPage .card-actions .fleet-lock-btn .fleet-lock-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
#indexPage .card-actions .fleet-lock-btn .fleet-lock-btn__icon svg {
width: 16px;
height: 16px;
}
#indexPage .card-actions .fleet-lock-btn.is-muted {
opacity: 0.48;
border-color: #cbd5e1;
}
#indexPage .card-actions .fleet-lock-btn.is-locked:not(.is-muted) {
border-color: #c2410c;
background: #fff7ed;
color: #c2410c;
}
#indexPage .card-actions .fleet-lock-btn.is-locked:not(.is-muted):hover {
background: #ffedd5;
}
#indexPage .card-actions .fleet-lock-btn.is-unlocked:not(.is-muted) {
border-color: #0f766e;
background: #ecfeff;
color: #0f766e;
}
#indexPage .card-actions .fleet-lock-btn.is-unlocked:not(.is-muted):hover {
background: #ccfbf1;
}
@media (max-width: 720px) {
#indexPage .card-actions {
flex-wrap: wrap;
}
#indexPage .card-actions .fleet-lock-btn {
flex: 1 1 100%;
width: 100%;
margin-left: 0;
margin-top: 8px;
min-height: 52px;
justify-content: flex-start;
padding: 10px 14px;
gap: 10px;
position: relative;
overflow: hidden;
--lock-knob-x: 0px;
}
#indexPage .card-actions .fleet-lock-btn::before {
content: "";
position: absolute;
left: 14px;
right: 14px;
top: 50%;
height: 30px;
transform: translateY(-50%);
border-radius: 999px;
background: rgba(15, 23, 42, 0.08);
pointer-events: none;
}
#indexPage .card-actions .fleet-lock-btn .fleet-lock-btn__icon {
position: absolute;
left: 14px;
top: 50%;
width: 30px;
height: 30px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.14);
transform: translate3d(var(--lock-knob-x), -50%, 0);
z-index: 2;
box-shadow: 0 3px 8px rgba(2, 6, 23, 0.18);
}
#indexPage
.card-actions
.fleet-lock-btn.is-snap-animating
.fleet-lock-btn__icon {
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#indexPage .card-actions .fleet-lock-btn::after {
content: attr(data-swipe-hint);
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.01em;
white-space: nowrap;
left: 56px;
right: 56px;
text-align: left;
z-index: 1;
transition: opacity 160ms ease;
}
#indexPage .card-actions .fleet-lock-btn.is-unlocked::after {
text-align: right;
}
#indexPage .card-actions .fleet-lock-btn.is-swipe-ready {
box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.22) inset;
}
}
/* Forms */
.form-card {
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.form-section {
font-size: 16px;
font-weight: 800;
margin: 0 0 6px 0;
display: flex;
gap: 8px;
align-items: center;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field label {
font-weight: 700;
color: var(--muted);
font-size: 14px;
}
.field input,
.field select,
.field textarea {
padding: 12px 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
font-size: 15px;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.input-with-action {
position: relative;
display: flex;
align-items: center;
}
.input-with-action > input {
padding-right: 44px;
}
.input-with-action--live::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 9px;
border-radius: 999px;
background: #2563eb;
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
animation: live-dot-pulse 1.6s ease-out infinite;
pointer-events: none;
}
.input-with-action--live > input {
padding-left: 34px;
}
.input-with-action .input-action-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border: 0;
border-radius: 8px;
background: transparent;
color: #64748b;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.input-with-action .input-action-btn:hover {
background: #e2e8f0;
color: #334155;
}
.input-with-action .input-action-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.24);
}
.input-with-action .input-action-btn svg {
width: 16px;
height: 16px;
}
@keyframes live-dot-pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
}
70% {
box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
}
}
/* Driver costs dashboard lanes (revamp) */
#driverCostsPage .driver-costs-list-card {
display: flex;
flex-direction: column;
gap: 14px;
}
#driverCostsPage .driver-costs-stats {
margin: 0 0 1.2rem;
}
#driverCostsPage .driver-costs-stats .fleet-stat {
cursor: default;
}
#driverCostsPage .driver-costs-stats .fleet-stat:hover {
transform: none;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}
@media (max-width: 900px) {
#driverCostsPage[data-is-admin="1"] .driver-costs-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#driverCostsPage[data-is-admin="1"] .driver-costs-stats .fleet-stat.red {
order: 1;
}
#driverCostsPage[data-is-admin="1"] .driver-costs-stats .fleet-stat.ok {
order: 2;
}
#driverCostsPage[data-is-admin="1"] .driver-costs-stats .fleet-stat.warn {
order: 3;
grid-column: 1 / -1;
}
}
#driverCostsPage .driver-costs-lanes {
display: flex;
flex-direction: column;
gap: 14px;
}
#driverCostsPage .driver-costs-lanes-divider[hidden],
#driverCostsPage [data-driver-costs-filter-panel][hidden],
#driverCostsPage .driver-costs-open-panel[hidden],
#driverCostsPage .driver-costs-archive-standalone-slot[hidden] {
display: none !important;
}
#driverCostsPage .driver-costs-lanes-divider {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
margin: 2px 2px 0;
}
#driverCostsPage .driver-costs-lanes-divider::before,
#driverCostsPage .driver-costs-lanes-divider::after {
content: "";
height: 1px;
background: linear-gradient(
90deg,
rgba(148, 163, 184, 0) 0%,
rgba(148, 163, 184, 0.45) 55%,
rgba(148, 163, 184, 0.1) 100%
);
}
#driverCostsPage .driver-costs-lanes-divider::after {
background: linear-gradient(
90deg,
rgba(148, 163, 184, 0.1) 0%,
rgba(148, 163, 184, 0.45) 45%,
rgba(148, 163, 184, 0) 100%
);
}
#driverCostsPage .driver-costs-lanes-divider span {
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #64748b;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
#driverCostsPage .driver-costs-archive-standalone-slot {
display: flex;
flex-direction: column;
gap: 12px;
}
#driverCostsPage .driver-costs-lane {
border: 1px solid #dbe4f2;
border-radius: 16px;
background: #fff;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
#driverCostsPage .driver-costs-lane--open {
border-color: #bfdbfe;
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.05);
}
#driverCostsPage .driver-costs-lane--archive {
border-color: #cbd5e1;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}
#driverCostsPage .driver-costs-lane__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
#driverCostsPage .driver-costs-lane__head h3 {
margin: 0;
font-size: 1rem;
}
#driverCostsPage .driver-costs-lane--open .driver-costs-lane__head h3 {
color: #1e40af;
}
#driverCostsPage .driver-costs-lane--archive .driver-costs-lane__head h3 {
color: #334155;
}
#driverCostsPage .driver-costs-lane__head p {
margin: 5px 0 0;
color: #64748b;
font-size: 0.85rem;
}
#driverCostsPage .driver-costs-lane--open .driver-costs-lane__head p {
color: #475569;
}
#driverCostsPage .driver-costs-lane__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
white-space: nowrap;
}
#driverCostsPage .driver-costs-lane__meta span {
color: #64748b;
font-size: 0.8rem;
font-weight: 700;
}
#driverCostsPage .driver-costs-lane__meta strong {
color: #0f172a;
font-size: 0.98rem;
}
#driverCostsPage .driver-costs-lane--open .driver-costs-lane__meta strong {
color: #1d4ed8;
}
#driverCostsPage .driver-costs-lane--archive .driver-costs-lane__meta strong {
color: #475569;
}
#driverCostsPage .driver-costs-strip {
border: 1px solid #dbe4f2;
border-radius: 16px;
background: #fff;
overflow: hidden;
}
#driverCostsPage .driver-costs-lane--open .driver-costs-strip {
border-color: #bfdbfe;
}
#driverCostsPage .driver-costs-lanes > .driver-costs-strip {
border-color: #bfdbfe;
}
#driverCostsPage .driver-costs-lane--archive .driver-costs-strip {
border-color: #cbd5e1;
background: #f8fafc;
}
#driverCostsPage .driver-costs-archive-standalone-slot > .driver-costs-strip {
border-color: #cbd5e1;
background: #f8fafc;
}
#driverCostsPage .driver-costs-strip--readonly {
background: #f8fafc;
}
#driverCostsPage .driver-costs-strip + .driver-costs-strip {
margin-top: 12px;
}
#driverCostsPage .driver-costs-strip__head {
padding: 12px 14px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
#driverCostsPage .driver-costs-lane--open .driver-costs-strip__head {
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border-bottom-color: #dbeafe;
}
#driverCostsPage
.driver-costs-lanes
> .driver-costs-strip
.driver-costs-strip__head {
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border-bottom-color: #dbeafe;
}
#driverCostsPage .driver-costs-lane--archive .driver-costs-strip__head {
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border-bottom-color: #dbe4f2;
}
#driverCostsPage
.driver-costs-archive-standalone-slot
> .driver-costs-strip
.driver-costs-strip__head {
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border-bottom-color: #dbe4f2;
}
#driverCostsPage .driver-costs-strip__identity {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
#driverCostsPage .driver-costs-strip__avatar {
width: 42px;
height: 42px;
border-radius: 999px;
background: #dbeafe;
color: #1d4ed8;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#driverCostsPage .driver-costs-strip__avatar i {
width: 18px;
height: 18px;
}
#driverCostsPage .driver-costs-strip__identity h4 {
margin: 0;
font-size: 1.02rem;
}
#driverCostsPage .driver-costs-strip__identity p {
margin: 3px 0 0;
color: #64748b;
}
#driverCostsPage
.driver-costs-lanes
> .driver-costs-strip
.driver-costs-strip__avatar {
background: #dbeafe;
color: #1d4ed8;
}
#driverCostsPage .driver-costs-strip__actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
#driverCostsPage .driver-costs-pay-pill {
border: 0;
background: #0b5ec1;
color: #fff;
border-radius: 12px;
padding: 8px 12px;
min-height: 40px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: 700;
box-shadow: 0 4px 14px rgba(11, 94, 193, 0.2);
}
#driverCostsPage .driver-costs-pay-pill strong {
background: #0a74d1;
border-radius: 8px;
padding: 4px 8px;
color: #fff;
font-size: 0.9rem;
}
#driverCostsPage .driver-costs-pay-pill i {
width: 16px;
height: 16px;
}
#driverCostsPage .driver-costs-pay-pill[hidden] {
display: none !important;
}
#driverCostsPage .driver-costs-strip__grid {
padding: 12px;
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
#driverCostsPage .driver-costs-strip__footer {
padding: 10px 14px;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
color: #64748b;
background: #f8fafc;
}
#driverCostsPage .driver-costs-strip__footer strong {
color: #0b5ec1;
}
#driverCostsPage .driver-costs-lane--open .driver-costs-strip__footer {
background: #eff6ff;
border-top-color: #dbeafe;
}
#driverCostsPage
.driver-costs-lanes
> .driver-costs-strip
.driver-costs-strip__footer {
background: #eff6ff;
border-top-color: #dbeafe;
}
#driverCostsPage .driver-costs-lane--open .driver-costs-strip__footer strong {
color: #1d4ed8;
}
#driverCostsPage
.driver-costs-lanes
> .driver-costs-strip
.driver-costs-strip__footer
strong {
color: #1d4ed8;
}
#driverCostsPage .driver-costs-lane--archive .driver-costs-strip__footer {
background: #e2e8f0;
border-top-color: #cbd5e1;
}
#driverCostsPage
.driver-costs-lane--archive
.driver-costs-strip__footer
strong {
color: #475569;
}
#driverCostsPage
.driver-costs-archive-standalone-slot
> .driver-costs-strip
.driver-costs-strip__footer {
background: #e2e8f0;
border-top-color: #cbd5e1;
}
#driverCostsPage
.driver-costs-archive-standalone-slot
> .driver-costs-strip
.driver-costs-strip__footer
strong {
color: #475569;
}
#driverCostsPage .driver-costs-empty-open {
margin: 0;
padding: 12px 14px;
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
}
#driverCostsPage .driver-costs-pay-panel {
border-top: 1px solid #dbe4f2;
background: #f8fbff;
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#driverCostsPage .driver-costs-pay-panel[hidden] {
display: none !important;
}
#driverCostsPage .driver-costs-pay-panel__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
#driverCostsPage .driver-costs-pay-panel__head h5 {
margin: 0;
font-size: 0.95rem;
}
#driverCostsPage .driver-costs-pay-panel__head p {
margin: 4px 0 0;
color: #64748b;
font-size: 0.8rem;
}
#driverCostsPage .driver-costs-pay-panel__details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#driverCostsPage .driver-costs-pay-panel__details > div {
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 3px;
}
#driverCostsPage .driver-costs-pay-panel__details span {
color: #64748b;
font-size: 0.75rem;
font-weight: 700;
}
#driverCostsPage .driver-costs-pay-panel__details strong {
color: #0f172a;
font-size: 0.9rem;
word-break: break-word;
}
#driverCostsPage .driver-costs-pay-panel__details strong.is-missing {
color: #b45309;
}
#driverCostsPage .driver-costs-pay-panel__selection {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
#driverCostsPage .driver-costs-pay-panel__selection li {
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
padding: 8px 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
#driverCostsPage .driver-costs-pay-panel__selection li span {
min-width: 0;
color: #334155;
font-size: 0.82rem;
}
#driverCostsPage .driver-costs-pay-panel__selection li strong {
white-space: nowrap;
color: #0f172a;
}
#driverCostsPage .driver-costs-pay-panel__actions {
display: flex;
justify-content: flex-end;
}
#driverCostsPage
.driver-costs-payment-modal
.driver-costs-payment-modal__content {
width: min(94vw, 760px);
max-width: 760px;
text-align: left;
}
#driverCostsPage .driver-costs-payment-modal__layout {
margin-top: 12px;
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
#driverCostsPage .driver-costs-payment-modal__qr-wrap {
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #f8fafc;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#driverCostsPage .driver-costs-payment-modal__qr-only {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#driverCostsPage #driverCostsPaymentQrCanvas {
width: 220px;
height: 220px;
border-radius: 10px;
background: #fff;
border: 1px solid #e2e8f0;
}
#driverCostsPage .driver-costs-payment-modal__qr-status {
margin: 0;
text-align: center;
color: #475569;
font-size: 0.8rem;
}
#driverCostsPage #driverCostsPaymentOpenKbc {
width: 100%;
justify-content: center;
}
#driverCostsPage .driver-costs-payment-modal__open-kbc {
display: none;
}
#driverCostsPage .driver-costs-payment-modal__details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#driverCostsPage .driver-costs-payment-modal__details > div {
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
padding: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
#driverCostsPage
.driver-costs-payment-modal__details
> .driver-costs-payment-modal__details-wide {
grid-column: 1 / -1;
}
#driverCostsPage .driver-costs-payment-modal__details span {
color: #64748b;
font-size: 0.75rem;
font-weight: 700;
}
#driverCostsPage .driver-costs-payment-modal__details strong {
color: #0f172a;
font-size: 0.93rem;
word-break: break-word;
}
#driverCostsPage .driver-cost-tile {
flex: 0 0 220px;
width: 220px;
border: 1px solid #dbe4f2;
border-radius: 14px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
cursor: pointer;
}
#driverCostsPage .driver-cost-tile:hover {
border-color: #bfdbfe;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
#driverCostsPage .driver-cost-tile.is-selected {
border-color: #0b5ec1;
box-shadow:
0 0 0 2px rgba(11, 94, 193, 0.14),
0 8px 22px rgba(11, 94, 193, 0.16);
}
#driverCostsPage .driver-cost-tile--processed {
opacity: 0.95;
}
#driverCostsPage .driver-costs-lane--archive .driver-cost-tile {
border-color: #cbd5e1;
background: #fff;
box-shadow: 0 1px 0 rgba(100, 116, 139, 0.05);
}
#driverCostsPage .driver-costs-archive-standalone-slot .driver-cost-tile {
border-color: #cbd5e1;
background: #fff;
box-shadow: 0 1px 0 rgba(100, 116, 139, 0.05);
}
#driverCostsPage .driver-costs-lane--archive .driver-cost-tile:hover {
border-color: #94a3b8;
box-shadow: 0 8px 20px rgba(100, 116, 139, 0.08);
}
#driverCostsPage .driver-costs-archive-standalone-slot .driver-cost-tile:hover {
border-color: #94a3b8;
box-shadow: 0 8px 20px rgba(100, 116, 139, 0.08);
}
#driverCostsPage .driver-costs-lane--archive .driver-cost-tile__media {
background: #f1f5f9;
}
#driverCostsPage
.driver-costs-archive-standalone-slot
.driver-cost-tile__media {
background: #f1f5f9;
}
#driverCostsPage .driver-cost-tile__media {
position: relative;
aspect-ratio: 3 / 2;
background: #eef2f7;
border-bottom: 1px solid #e2e8f0;
}
#driverCostsPage .driver-cost-tile__media .driver-cost-tile__media-trigger,
#driverCostsPage .driver-cost-tile__media img {
width: 100%;
height: 100%;
display: block;
aspect-ratio: 3 / 2;
}
#driverCostsPage .driver-cost-tile__media .driver-cost-tile__media-trigger {
border: 0;
padding: 0;
margin: 0;
background: transparent;
cursor: zoom-in;
}
#driverCostsPage .driver-cost-tile__media img {
object-fit: cover;
object-position: center;
}
#driverCostsPage .driver-cost-tile__media-placeholder {
width: 100%;
height: 100%;
border: 0;
margin: 0;
padding: 0;
cursor: zoom-in;
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
background: #eef2f7;
}
#driverCostsPage .driver-cost-tile__media-placeholder i {
width: 20px;
height: 20px;
}
#driverCostsPage .driver-cost-tile__photo-count {
position: absolute;
right: 8px;
top: 8px;
border-radius: 999px;
padding: 3px 7px;
background: rgba(15, 23, 42, 0.75);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
z-index: 2;
}
#driverCostsPage .driver-cost-tile__checkbox {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
cursor: pointer;
}
#driverCostsPage .driver-cost-tile__checkbox input {
position: absolute;
opacity: 0;
pointer-events: none;
}
#driverCostsPage .driver-cost-tile__checkbox span {
width: 32px;
height: 32px;
border-radius: 10px;
border: 1px solid #cbd5e1;
background: rgba(255, 255, 255, 0.95);
display: inline-flex;
align-items: center;
justify-content: center;
color: transparent;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
#driverCostsPage .driver-cost-tile__checkbox span i {
width: 16px;
height: 16px;
}
#driverCostsPage .driver-cost-tile__checkbox input:checked + span {
background: #0b5ec1;
border-color: #0b5ec1;
color: #fff;
}
#driverCostsPage .driver-cost-tile__body {
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 136px;
}
#driverCostsPage .driver-cost-tile__amount {
margin: 0;
font-size: 1.18rem;
font-weight: 800;
color: #0f172a;
}
#driverCostsPage .driver-cost-tile__type {
align-self: flex-start;
border-radius: 999px;
padding: 4px 9px;
font-size: 0.76rem;
font-weight: 800;
border: 1px solid #cbd5e1;
color: #475569;
background: #f8fafc;
}
#driverCostsPage .driver-cost-tile__media .driver-cost-tile__type {
position: absolute;
right: 8px;
bottom: 8px;
z-index: 2;
margin: 0;
align-self: auto;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(2px);
}
#driverCostsPage .driver-cost-tile__date {
margin: 0;
color: #64748b;
font-size: 0.84rem;
font-weight: 600;
}
#driverCostsPage .driver-cost-tile__meta {
margin: 0;
color: #475569;
font-size: 0.78rem;
display: inline-flex;
align-items: center;
gap: 5px;
}
#driverCostsPage .driver-cost-tile__meta i,
#driverCostsPage .driver-cost-tile__meta svg {
width: 12px;
height: 12px;
color: #94a3b8;
flex-shrink: 0;
}
#driverCostsPage .driver-costs-lane--archive .driver-costs-strip__avatar {
background: #e2e8f0;
color: #475569;
}
#driverCostsPage
.driver-costs-archive-standalone-slot
> .driver-costs-strip
.driver-costs-strip__avatar {
background: #e2e8f0;
color: #475569;
}
#driverCostsPage .driver-cost-tile__note {
margin: 0;
color: #334155;
font-size: 0.78rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#driverCostsPage .driver-costs-bank-required {
border: 1px solid #fde68a;
background: #fffbeb;
color: #92400e;
border-radius: 14px;
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
#driverCostsPage .driver-costs-bank-required__text {
min-width: 0;
}
#driverCostsPage .driver-costs-bank-required__text strong {
display: block;
color: #92400e;
}
#driverCostsPage .driver-costs-bank-required__text p {
margin: 4px 0 0;
color: #a16207;
}
#driverCostsPage .driver-costs-bank-required--inline {
margin-top: 4px;
}
#driverCostsPage .driver-costs-form-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
#driverCostsPage[data-is-admin="1"] .driver-costs-form-card {
position: static;
}
#driverCostsPage .driver-costs-detail-modal .modal-content {
width: min(920px, 96vw);
max-width: 920px;
max-height: 92vh;
padding: 14px;
text-align: left;
display: flex;
flex-direction: column;
gap: 12px;
overflow: auto;
}
#driverCostsPage .driver-costs-detail-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#driverCostsPage .driver-costs-detail-modal__head h3 {
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1rem;
}
#driverCostsPage .driver-costs-detail-modal__media {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
border: 1px solid #dbe4f2;
border-radius: 14px;
overflow: hidden;
background: #eef2f7;
}
#driverCostsPage .driver-costs-detail-modal__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: #fff;
padding: 8px;
box-sizing: border-box;
}
#driverCostsPage .driver-costs-detail-modal__media img[hidden] {
display: none !important;
}
#driverCostsPage .driver-costs-detail-modal__placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #94a3b8;
}
#driverCostsPage .driver-costs-detail-modal__placeholder i {
width: 22px;
height: 22px;
}
#driverCostsPage .driver-costs-detail-modal__placeholder[hidden] {
display: none !important;
}
#driverCostsPage .driver-costs-detail-modal__thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
}
#driverCostsPage .driver-costs-detail-modal__thumbs[hidden] {
display: none !important;
}
#driverCostsPage .driver-costs-detail-modal__thumb {
width: 76px;
height: 60px;
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
overflow: hidden;
padding: 0;
flex: 0 0 auto;
cursor: pointer;
}
#driverCostsPage .driver-costs-detail-modal__thumb.is-active {
border-color: #0b5ec1;
box-shadow: 0 0 0 2px rgba(11, 94, 193, 0.12);
}
#driverCostsPage .driver-costs-detail-modal__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#driverCostsPage .driver-costs-detail-modal__info {
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#driverCostsPage .driver-costs-detail-modal__info > div {
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
padding: 8px 10px;
}
#driverCostsPage .driver-costs-detail-modal__info dt {
margin: 0;
color: #64748b;
font-size: 0.74rem;
font-weight: 700;
}
#driverCostsPage .driver-costs-detail-modal__info dd {
margin: 4px 0 0;
color: #0f172a;
font-weight: 600;
word-break: break-word;
}
#driverCostsPage .driver-costs-detail-modal__note {
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
padding: 10px 12px;
}
#driverCostsPage .driver-costs-detail-modal__note[hidden] {
display: none !important;
}
#driverCostsPage .driver-costs-detail-modal__note h4 {
margin: 0 0 6px;
font-size: 0.88rem;
}
#driverCostsPage .driver-costs-detail-modal__note p {
margin: 0;
color: #334155;
white-space: pre-wrap;
}
#driverCostsPage .driver-cost-tile__type--parking {
background: #eef2ff;
border-color: #c7d2fe;
color: #4338ca;
}
#driverCostsPage .driver-cost-tile__type--fuel {
background: #fee2e2;
border-color: #fecaca;
color: #dc2626;
}
#driverCostsPage .driver-cost-tile__type--charging {
background: #dcfce7;
border-color: #bbf7d0;
color: #15803d;
}
#driverCostsPage .driver-cost-tile__type--toll {
background: #fef3c7;
border-color: #fde68a;
color: #b45309;
}
#driverCostsPage .driver-cost-tile__type--carwash {
background: #cffafe;
border-color: #a5f3fc;
color: #0e7490;
}
#driverCostsPage .driver-cost-tile__type--other {
background: #f1f5f9;
border-color: #e2e8f0;
color: #475569;
}
@media (max-width: 900px) {
#driverCostsPage .driver-costs-strip__head {
flex-direction: column;
align-items: stretch;
}
#driverCostsPage .driver-costs-strip__actions {
width: 100%;
justify-content: stretch;
}
#driverCostsPage .driver-costs-strip__actions .btn,
#driverCostsPage .driver-costs-pay-pill {
width: 100%;
justify-content: center;
}
#driverCostsPage .driver-costs-pay-panel__details {
grid-template-columns: 1fr;
}
#driverCostsPage .driver-costs-payment-modal__layout {
grid-template-columns: 1fr;
}
#driverCostsPage .driver-costs-payment-modal__details {
grid-template-columns: 1fr;
}
#driverCostsPage .driver-costs-payment-modal__qr-only {
display: none;
}
#driverCostsPage .driver-costs-payment-modal__open-kbc {
display: inline-flex;
}
}
@media (max-width: 740px) {
#driverCostsPage .driver-costs-lane {
padding: 10px;
}
#driverCostsPage .driver-costs-lane__head {
flex-direction: column;
align-items: flex-start;
}
#driverCostsPage .driver-costs-lane__meta {
align-items: flex-start;
}
#driverCostsPage .driver-costs-strip__head {
padding: 10px;
}
#driverCostsPage .driver-costs-strip__grid {
padding: 10px;
}
#driverCostsPage .driver-cost-tile {
flex-basis: 86vw;
width: 86vw;
max-width: 260px;
}
#driverCostsPage .driver-costs-strip__footer {
flex-direction: column;
align-items: center;
}
#driverCostsPage .driver-costs-pay-panel__selection li {
flex-direction: column;
align-items: flex-start;
}
#driverCostsPage .driver-costs-bank-required {
flex-direction: column;
align-items: stretch;
}
#driverCostsPage .driver-costs-bank-required .btn {
width: 100%;
justify-content: center;
}
#driverCostsPage .driver-costs-form-card__head {
flex-direction: column;
align-items: stretch;
}
#driverCostsPage .driver-costs-form-card__head .btn {
width: 100%;
justify-content: center;
}
#driverCostsPage .driver-costs-detail-modal .modal-content {
width: min(96vw, 96vw);
max-height: 94vh;
padding: 10px;
}
#driverCostsPage .driver-costs-detail-modal__info {
grid-template-columns: 1fr;
}
#driverCostsPage .driver-costs-detail-modal__thumb {
width: 68px;
height: 54px;
}
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: #a5b4fc;
box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.25);
}
.field input.input-live-locked,
.field input[readonly].input-live-locked {
background: #f1f5f9;
color: #64748b;
border-color: #dbe4f2;
cursor: not-allowed;
}
.field input.input-live-locked:focus {
border-color: #dbe4f2;
box-shadow: none;
}
.field--span2 {
grid-column: 1 / -1;
}
.form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* === Status icons === */
.status-icon {
font-size: 1.4rem;
margin-left: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
transform-origin: center;
}
/* Binnenkort vervaldatum */
.status-icon.warning {
color: #fbbf24;
animation: status-warning 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.status-icon.critical {
color: #f87171;
animation: status-critical 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* Amber “breathe” met mini lift */
@keyframes status-warning {
0%,
100% {
opacity: 0.75;
transform: scale(1) translateY(0);
}
40% {
opacity: 1;
transform: scale(1.08) translateY(-2px);
}
60% {
opacity: 0.9;
transform: scale(1.05) translateY(-1px);
}
}
/* Red heartbeat met subtiele compressie */
@keyframes status-critical {
0%,
100% {
opacity: 0.8;
transform: scale(1);
}
25% {
opacity: 1;
transform: scale(1.18);
}
45% {
opacity: 0.9;
transform: scale(0.95);
}
70% {
opacity: 1;
transform: scale(1.15);
}
}
/* Alerts & text */
.alert {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 16px;
padding: 13px 15px;
border-radius: 14px;
border: 1px solid #fdba74;
background: #fff7ed;
color: #9a3412;
line-height: 1.4;
word-break: break-word;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}
.alert.success {
background: #ecfdf5;
border-color: #86efac;
color: #166534;
}
.alert.error {
background: #fef2f2;
border-color: #fecaca;
color: #991b1b;
}
.alert > i[data-feather],
.alert > i[data-lucide] {
display: none !important;
}
.alert__icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
margin-top: 1px;
}
.alert__icon svg {
width: 100%;
height: 100%;
display: block;
}
.alert__close {
margin-left: auto;
margin-top: -2px;
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(255, 255, 255, 0.7);
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
transition:
background 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease;
}
.alert__close:hover {
background: rgba(241, 245, 249, 0.95);
border-color: rgba(100, 116, 139, 0.5);
transform: translateY(-1px);
}
.alert__close:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.6);
outline-offset: 2px;
}
.alert__close svg {
width: 15px;
height: 15px;
display: block;
}
.alert ul {
margin: 0;
padding: 0;
list-style: none;
}
.alert li + li {
margin-top: 0.25rem;
}
.app-alert-stack {
position: fixed;
top: calc(env(safe-area-inset-top) + 14px);
right: 14px;
width: min(430px, calc(100vw - 28px));
display: flex;
flex-direction: column;
gap: 10px;
z-index: 2400;
pointer-events: none;
}
.app-alert-stack .alert {
margin: 0;
max-height: min(50vh, 420px);
overflow: auto;
pointer-events: auto;
}
.app-alert-stack .alert[hidden] {
display: none !important;
}
@media (max-width: 720px) {
.app-alert-stack {
top: calc(env(safe-area-inset-top) + 8px);
left: 12px;
right: 12px;
width: auto;
}
.app-alert-stack .alert {
padding: 12px 14px;
font-size: 0.93rem;
}
.alert__icon {
width: 20px;
height: 20px;
flex-basis: 20px;
}
.alert__close {
width: 26px;
height: 26px;
flex-basis: 26px;
}
}
.muted {
color: var(--muted);
}
.inline {
display: inline;
}
/* Responsive */
@media (max-width: 980px) {
.grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
}
@media (max-width: 720px) {
.container {
padding: 16px;
}
.rows {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
.rows > div:not(:last-child) {
border-bottom: 1px dashed var(--border);
}
}
/* Modal */
.modal {
display: flex;
position: fixed;
inset: 0;
padding: clamp(16px, 2vw, 24px);
background: rgba(0, 0, 0, 0.45);
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 220ms ease-out,
visibility 0s linear 220ms;
}
@media (min-width: 1120px) {
.app-shell .modal {
left: var(--app-modal-main-offset, 0px);
width: calc(100vw - var(--app-modal-main-offset, 0px));
}
}
.modal.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity 220ms ease-out,
visibility 0s linear 0s;
}
.modal-content {
background: #fff;
border-radius: 1rem;
padding: 2rem;
position: relative;
max-width: 400px;
width: 90%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
text-align: center;
opacity: 0;
transform: translateY(18px) scale(0.985);
transition:
opacity 180ms ease-out,
transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-content--left {
text-align: left;
max-width: 520px;
transform: translateX(-18px) scale(0.985);
}
.modal.active .modal-content {
opacity: 1;
transform: translateY(0) scale(1);
}
.modal.active .modal-content--left {
transform: translateX(0) scale(1);
}
[data-animated-details] [data-details-panel] {
overflow: hidden;
will-change: height, opacity;
}
@media (prefers-reduced-motion: reduce) {
.modal,
.modal-content,
[data-animated-details] [data-details-panel],
.btn[data-loading="1"]::after,
.document-upload-modal .document-upload-modal__status.is-loading::before,
.app-store-download-modal__status.is-loading::before,
#maintenancePage .maintenance-mobile-modal__status.is-loading::before,
#driverCostsPage .driver-costs-mobile-modal__status.is-loading::before,
#settingsPage.profile-page .profile-mobile-modal__status.is-loading::before,
#permitPage .permit-autosave-status.is-loading::before,
#settingsPage.profile-page .profile-autosave-status.is-loading::before,
.document-upload-modal .document-upload-modal__status.is-loading::after,
.app-store-download-modal__status.is-loading::after,
#maintenancePage .maintenance-mobile-modal__status.is-loading::after,
#driverCostsPage .driver-costs-mobile-modal__status.is-loading::after,
#settingsPage.profile-page .profile-mobile-modal__status.is-loading::after,
#permitPage .permit-autosave-status.is-loading::after,
#settingsPage.profile-page .profile-autosave-status.is-loading::after,
#checkinPage.is-loading .checkin-calendar::after,
#checkinPage.is-loading .checkin-availability-list::after,
#checkinPage.is-loading .checkin-planner-results::after {
transition: none !important;
animation: none !important;
}
}
.modal-confirm-label {
margin-top: 12px;
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--text);
line-height: 1.45;
}
.modal-confirm-label input[type="checkbox"] {
margin-top: 2px;
flex: 0 0 auto;
}
#indexPage .fleet-lock-modal__content {
max-width: 460px;
}
#indexPage .fleet-lock-modal__subtitle {
margin-top: -2px;
margin-bottom: 14px;
color: #475569;
font-size: 14px;
}
#indexPage .fleet-lock-modal__warning {
margin-bottom: 12px;
padding: 10px 12px;
border: 1px solid #fcd34d;
background: #fffbeb;
color: #92400e;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
}
#indexPage .fleet-lock-modal__label {
display: block;
margin-bottom: 6px;
color: #334155;
font-weight: 700;
}
#indexPage .fleet-lock-modal__content input[type="password"] {
width: 100%;
border: 1px solid #d5deec;
border-radius: 12px;
padding: 11px 12px;
font-size: 14px;
color: #0f172a;
box-sizing: border-box;
}
#indexPage .fleet-lock-modal__error {
margin: 10px 0 0;
color: #b91c1c;
font-size: 13px;
font-weight: 600;
}
.modal-content h3 {
margin-top: 0;
color: #222;
}
.modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
color: #334155;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
cursor: pointer;
transition:
border-color 0.2s ease,
background 0.2s ease,
color 0.2s ease;
}
.modal-close:hover {
border-color: #c6d6eb;
background: #f8fafc;
}
.modal-close:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.35);
outline-offset: 2px;
}
.modal-close i,
.modal-close svg {
width: 16px;
height: 16px;
}
.modal-actions {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
}
@media (max-width: 1119px) {
.modal {
--app-modal-mobile-nav-offset: calc(
var(--app-mobile-nav-height, 74px) + env(safe-area-inset-bottom)
);
--app-modal-mobile-inset: 8px;
padding: max(var(--app-modal-mobile-inset), env(safe-area-inset-top))
max(var(--app-modal-mobile-inset), env(safe-area-inset-right))
calc(var(--app-modal-mobile-nav-offset) + var(--app-modal-mobile-inset))
max(var(--app-modal-mobile-inset), env(safe-area-inset-left));
align-items: stretch;
justify-content: stretch;
background: rgba(15, 23, 42, 0.5);
}
.modal-content,
.modal-content--left,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__content,
.document-upload-modal .document-upload-modal__content,
.app-store-download-modal .app-store-download-modal__content,
#contactsPage .contacts-add-user-modal .modal-content,
#contactDetailPage .contact-edit-modal .modal-content,
#driverCostsPage .driver-costs-detail-modal .modal-content,
#driverCostsPage .driver-costs-vehicle-modal .modal-content {
width: 100% !important;
max-width: 100% !important;
min-height: calc(
100dvh - var(--app-modal-mobile-nav-offset) -
(var(--app-modal-mobile-inset) * 2)
) !important;
max-height: calc(
100dvh - var(--app-modal-mobile-nav-offset) -
(var(--app-modal-mobile-inset) * 2)
) !important;
height: auto !important;
overflow-y: auto !important;
overscroll-behavior: contain;
text-align: left;
transform: translateY(22px);
}
.modal.active .modal-content,
.modal.active .modal-content--left,
.modal.active .vehicle-doc-preview-modal__content,
.modal.active .document-upload-modal__content,
.modal.active .app-store-download-modal__content {
transform: translateY(0);
}
.modal-close {
top: calc(env(safe-area-inset-top) + 12px);
right: 14px;
width: 40px;
height: 40px;
border-radius: 12px;
border-color: rgba(203, 213, 225, 0.95);
background: rgba(248, 250, 252, 0.96);
backdrop-filter: blur(10px);
z-index: 2;
}
.modal-close i,
.modal-close svg {
width: 17px;
height: 17px;
}
.modal-content h3 {
margin-right: 52px;
}
.modal-note,
.modal-form,
.modal-role-selector,
.app-language-selector,
.vehicle-doc-preview-modal__image-wrap {
margin-right: 0;
}
.modal-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 1.25rem;
}
.modal-actions .btn,
.modal-actions a.btn {
width: 100%;
justify-content: center;
}
.modal-actions .btn:only-child,
.modal-actions a.btn:only-child {
width: 100%;
}
#contactsPage .contacts-add-user-form--modal {
grid-template-columns: 1fr !important;
}
#contactsPage .contacts-add-user-form--modal .field,
#contactsPage .contacts-add-user-form--modal .field--full,
#contactsPage .contacts-add-user-form--modal .contacts-add-user-form__submit {
grid-column: 1 / -1 !important;
min-width: 0;
}
#contactsPage .contacts-add-user-modal {
--app-modal-mobile-nav-offset: calc(
var(--app-mobile-nav-height, 74px) + env(safe-area-inset-bottom)
);
--app-modal-mobile-inset: 8px;
padding: max(var(--app-modal-mobile-inset), env(safe-area-inset-top))
max(var(--app-modal-mobile-inset), env(safe-area-inset-right))
calc(var(--app-modal-mobile-nav-offset) + var(--app-modal-mobile-inset))
max(var(--app-modal-mobile-inset), env(safe-area-inset-left)) !important;
align-items: stretch !important;
justify-content: stretch !important;
background: rgba(15, 23, 42, 0.4) !important;
z-index: 1200 !important;
}
#contactsPage .contacts-add-user-modal .modal-content,
#contactsPage .contacts-add-user-modal .modal-content--left {
position: relative;
width: 100% !important;
max-width: 100% !important;
min-height: calc(
100dvh - var(--app-modal-mobile-nav-offset) -
(var(--app-modal-mobile-inset) * 2)
) !important;
max-height: calc(
100dvh - var(--app-modal-mobile-nav-offset) -
(var(--app-modal-mobile-inset) * 2)
) !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
opacity: 1 !important;
border-radius: 16px !important;
padding: 56px 18px 28px !important;
overflow-y: auto !important;
overscroll-behavior: contain;
box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.18) !important;
text-align: left !important;
}
#contactsPage .contacts-add-user-modal .modal-close {
position: absolute !important;
top: 12px !important;
right: 12px !important;
z-index: 2;
width: 34px !important;
height: 34px !important;
border: 1px solid #dbe4f2 !important;
border-radius: 10px !important;
background: #fff !important;
color: #0f172a !important;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#contactsPage .contacts-add-user-modal .modal-close svg,
#contactsPage .contacts-add-user-modal .modal-close i {
width: 16px !important;
height: 16px !important;
}
#contactsPage .contacts-add-user-modal .modal-content h3 {
margin: 0 48px 0 0 !important;
color: #0f172a !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-align: left !important;
}
#contactsPage .contacts-add-user-modal .modal-note {
margin-top: 8px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
color: #516173;
text-align: left !important;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__image-wrap {
height: min(48dvh, 420px);
border-radius: 16px;
}
.document-upload-modal .document-upload-modal__qr-wrap {
border-radius: 16px;
}
}
.modal-role-selector {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.modal-role-option {
position: relative;
display: block;
}
.modal-role-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.modal-role-option span {
display: inline-flex;
width: 100%;
min-height: 40px;
align-items: center;
justify-content: center;
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #f8fafc;
color: #334155;
padding: 0.58rem 0.8rem;
font-size: 0.86rem;
font-weight: 700;
cursor: pointer;
transition:
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease,
transform 0.16s ease,
box-shadow 0.16s ease;
}
.modal-role-option span:hover {
border-color: #93c5fd;
transform: translateY(-1px);
}
.modal-role-option input[type="radio"]:checked + span {
border-color: var(--action);
background: #eff6ff;
color: #1e40af;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}
.modal-role-option input[type="radio"]:focus-visible + span {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.app-language-selector {
display: grid;
gap: 8px;
}
.app-language-selector--inline {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.app-language-selector__option {
position: relative;
display: block;
}
.app-language-selector__option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.app-language-selector__button {
display: flex;
width: 100%;
min-height: 46px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
color: #334155;
padding: 0.52rem 0.72rem;
cursor: pointer;
transition:
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease,
transform 0.16s ease,
box-shadow 0.16s ease;
}
.app-language-selector__button:hover {
border-color: #93c5fd;
transform: translateY(-1px);
}
.app-language-selector__flag {
display: inline-flex;
min-width: 26px;
height: 26px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #e2e8f0;
color: #0f172a;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.05em;
}
.app-language-selector__text {
font-size: 0.81rem;
font-weight: 700;
line-height: 1.2;
}
.app-language-selector__option
input[type="radio"]:checked
+ .app-language-selector__button {
border-color: var(--action);
background: #eff6ff;
color: #1e40af;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}
.app-language-selector__option
input[type="radio"]:checked
+ .app-language-selector__button
.app-language-selector__flag {
background: #2563eb;
color: #fff;
}
.app-language-selector__option
input[type="radio"]:focus-visible
+ .app-language-selector__button {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
@media (max-width: 520px) {
.app-language-selector__button {
min-height: 50px;
flex-direction: column;
gap: 4px;
padding: 0.45rem 0.4rem;
}
.app-language-selector__text {
font-size: 0.7rem;
text-align: center;
}
}
.loader {
width: 15px;
aspect-ratio: 1;
border-radius: 50%;
animation: l5 1s infinite linear alternate;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__content {
--vehicle-doc-preview-height: clamp(360px, 62vh, 760px);
width: min(96vw, 1240px);
max-width: min(96vw, 1240px);
text-align: left;
position: relative;
}
.vehicle-doc-preview-modal [hidden] {
display: none !important;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__hero {
display: flex;
align-items: flex-start;
gap: 16px;
padding-right: 72px;
padding-bottom: 1.2rem;
border-bottom: 1px solid #e2e8f0;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__hero-icon {
width: 68px;
height: 68px;
border-radius: 18px;
border: 1px solid #eef2f7;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #0f172a;
flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__hero-icon svg {
width: 30px;
height: 30px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__title-wrap {
min-width: 0;
flex: 1 1 auto;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__content h3 {
margin: 0;
font-size: clamp(1.25rem, 1.7vw, 1.9rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: #0f172a;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__summary {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 0.6rem;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__status {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid #fecaca;
background: #fef2f2;
color: #991b1b;
font-size: 0.72rem;
font-weight: 700;
padding: 5px 10px;
white-space: nowrap;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__status.is-warning {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__status.is-missing {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__status.is-ready {
border-color: #bbf7d0;
background: #ecfdf3;
color: #166534;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta {
display: flex;
align-items: center;
gap: 10px;
padding-left: 16px;
border-left: 1px solid #dbe4f2;
min-height: 32px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-icon {
width: 28px;
height: 28px;
border-radius: 10px;
border: 1px solid #dbe4f2;
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0f172a;
flex: 0 0 auto;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-copy {
display: grid;
gap: 3px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-label {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: #64748b;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-value {
display: block;
font-size: 0.92rem;
font-weight: 700;
color: #0f172a;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-relative {
color: #64748b;
font-weight: 700;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__section-title {
margin: 1.25rem 0 0.95rem;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__viewer {
border: 1px solid #dbe4f2;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
overflow: hidden;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__viewer-toolbar {
min-height: 56px;
padding: 10px 18px;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-controls {
display: inline-flex;
align-items: center;
gap: 16px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__toolbar-actions {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-btn {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid #dbe4f2;
background: #ffffff;
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
border-color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-btn:hover {
border-color: #bfdbfe;
box-shadow: 0 10px 22px rgba(59, 130, 246, 0.12);
transform: translateY(-1px);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-btn:disabled {
opacity: 0.45;
cursor: default;
box-shadow: none;
transform: none;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-value {
min-width: 56px;
text-align: center;
font-size: 1rem;
font-weight: 800;
color: #0f172a;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__viewer-body {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
min-height: var(--vehicle-doc-preview-height);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__rail {
padding: 20px 14px;
border-right: 1px solid #e2e8f0;
background: rgba(255, 255, 255, 0.92);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.vehicle-doc-preview-modal
.vehicle-doc-preview-modal__rail[hidden]
+ .vehicle-doc-preview-modal__stage {
grid-column: 1 / -1;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumbs {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
align-items: center;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumb {
width: 72px;
height: 104px;
border-radius: 12px;
border: 1px solid #dbe4f2;
background: #ffffff;
padding: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumb:hover,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumb.is-active {
border-color: #2563eb;
box-shadow: 0 10px 28px rgba(37, 99, 235, 0.16);
transform: translateY(-1px);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumb-empty {
color: #94a3b8;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumb-count {
font-size: 0.95rem;
font-weight: 700;
color: #64748b;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__stage {
min-width: 0;
width: 100%;
height: var(--vehicle-doc-preview-height);
min-height: var(--vehicle-doc-preview-height);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__slider {
width: 100%;
height: var(--vehicle-doc-preview-height);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__gallery {
display: grid;
width: 100%;
height: var(--vehicle-doc-preview-height);
min-height: var(--vehicle-doc-preview-height);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__item {
display: grid;
position: relative;
width: 100%;
height: var(--vehicle-doc-preview-height);
min-height: var(--vehicle-doc-preview-height);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame {
width: 100%;
height: var(--vehicle-doc-preview-height);
min-height: var(--vehicle-doc-preview-height);
max-height: var(--vehicle-doc-preview-height);
box-sizing: border-box;
padding: clamp(18px, 2.8vw, 32px);
background: linear-gradient(180deg, #f8fbff 0%, #fefefe 100%);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: default;
user-select: none;
touch-action: none;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame .loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame img {
width: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity 0.18s ease;
transform-origin: center center;
filter: drop-shadow(0 18px 42px rgba(15, 23, 42, 0.1));
pointer-events: none;
user-select: none;
will-change: transform;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame.is-pannable {
cursor: grab;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame.is-dragging {
cursor: grabbing;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame.is-loaded img {
opacity: 1;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__open,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__action-btn {
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid #dbe4f2;
background: #ffffff;
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition:
border-color 0.18s ease,
background 0.18s ease,
transform 0.18s ease;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__open svg,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__action-btn svg {
width: 16px;
height: 16px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__action-btn {
border: 1px solid #dbe4f2;
padding: 0;
cursor: pointer;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__open:hover,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__action-btn:hover {
border-color: #bfdbfe;
background: #eff6ff;
transform: translateY(-1px);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame--empty,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__empty {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
color: #64748b;
font-size: 0.9rem;
text-align: center;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__empty {
width: 100%;
height: var(--vehicle-doc-preview-height);
min-height: var(--vehicle-doc-preview-height);
max-height: var(--vehicle-doc-preview-height);
box-sizing: border-box;
background: linear-gradient(180deg, #f8fbff 0%, #fefefe 100%);
}
.vehicle-doc-preview-modal .modal-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 1.6rem;
}
.vehicle-doc-preview-modal .modal-actions .btn.primary svg,
.vehicle-doc-preview-modal .modal-actions .btn.primary i,
.vehicle-doc-preview-modal .modal-actions .btn.ghost svg,
.vehicle-doc-preview-modal .modal-actions .btn.ghost i {
margin-right: 10px;
}
@media (max-width: 740px) {
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__content {
--vehicle-doc-preview-height: 100%;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: 10px;
overflow: hidden !important;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__hero {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 12px;
padding-right: 42px;
padding-bottom: 0.95rem;
align-items: start;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__hero-icon {
width: 46px;
height: 46px;
border-radius: 14px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__hero-icon svg {
width: 20px;
height: 20px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__content h3 {
font-size: 1rem;
line-height: 1.18;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__summary {
display: grid;
gap: 8px;
margin-top: 0.5rem;
justify-items: start;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__status {
justify-self: start;
font-size: 0.67rem;
padding: 4px 9px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__viewer-toolbar {
min-height: auto;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap;
position: static;
overflow: hidden;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-controls {
position: static;
transform: none;
gap: 8px;
flex: 0 0 auto;
margin-right: auto;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__toolbar-actions {
width: auto;
justify-content: flex-end;
margin-left: auto;
gap: 6px;
flex: 0 0 auto;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta {
width: 100%;
padding-left: 0;
border-left: 0;
min-height: 0;
gap: 8px;
align-items: center;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-icon {
width: 22px;
height: 22px;
border-radius: 8px;
flex: 0 0 auto;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-icon svg,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-icon i {
width: 12px;
height: 12px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-copy {
gap: 1px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-label {
font-size: 0.68rem;
line-height: 1.15;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-value {
font-size: 0.74rem;
line-height: 1.15;
font-weight: 600;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__meta-relative {
display: block;
margin-top: 2px;
font-size: 0.7rem;
font-weight: 600;
color: #64748b;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__section-title {
margin: 0;
font-size: 0.78rem;
letter-spacing: 0.12em;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__viewer {
border-radius: 18px;
min-height: 0;
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__viewer-body {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
min-height: 0;
height: 100%;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__rail {
padding: 10px 12px;
border-right: 0;
border-bottom: 1px solid #e2e8f0;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
min-width: 0;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumbs {
flex-direction: row;
justify-content: flex-start;
width: auto;
min-width: 0;
flex: 1 1 auto;
gap: 8px;
padding-bottom: 2px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumb {
width: 50px;
height: 72px;
flex: 0 0 auto;
border-radius: 10px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__thumb-count {
white-space: nowrap;
margin-left: 8px;
font-size: 0.8rem;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame {
padding: 12px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__stage,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__slider,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__gallery,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__item,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__frame,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__empty {
height: 100%;
min-height: 0;
max-height: none;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-btn {
width: 32px;
height: 32px;
border-radius: 10px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__open,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__action-btn {
width: 28px;
height: 28px;
border-radius: 9px;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-value {
min-width: 34px;
font-size: 0.84rem;
}
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__open svg,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__action-btn svg,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-btn svg,
.vehicle-doc-preview-modal .vehicle-doc-preview-modal__zoom-btn i {
width: 14px;
height: 14px;
}
.vehicle-doc-preview-modal .modal-actions {
margin-top: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.vehicle-doc-preview-modal .modal-actions .btn.primary svg,
.vehicle-doc-preview-modal .modal-actions .btn.primary i,
.vehicle-doc-preview-modal .modal-actions .btn.ghost svg,
.vehicle-doc-preview-modal .modal-actions .btn.ghost i {
width: 16px;
height: 16px;
margin-right: 8px;
}
.vehicle-doc-preview-modal .modal-actions .btn.ghost {
width: 40px;
min-width: 40px;
min-height: 40px;
padding: 0;
font-size: 0.84rem;
color: #334155;
border-color: transparent;
background: transparent;
justify-content: center;
}
.vehicle-doc-preview-modal .modal-actions .btn.ghost span {
display: none;
}
.vehicle-doc-preview-modal .modal-actions .btn.primary {
min-width: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes appLoadingSpin {
to {
transform: rotate(360deg);
}
}
@keyframes l5 {
0% {
box-shadow:
20px 0 #000,
-20px 0 #0002;
background: #000;
}
33% {
box-shadow:
20px 0 #000,
-20px 0 #0002;
background: #0002;
}
66% {
box-shadow:
20px 0 #0002,
-20px 0 #000;
background: #0002;
}
100% {
box-shadow:
20px 0 #0002,
-20px 0 #000;
background: #000;
}
}
@keyframes appLoadingSheen {
0% {
transform: translateX(-130%);
}
100% {
transform: translateX(130%);
}
}
.action-buttons {
display: flex;
align-items: center;
gap: 6px;
}
.action-buttons form {
margin: 0;
}
/* Extracted shared utility styles */
.inline-form {
display: inline;
}
.form-actions--spaced {
margin-top: 15px;
}
.muted--mb15 {
margin-bottom: 15px;
}
.muted--mb10 {
margin-bottom: 10px;
}
.text-error {
color: #b42318;
}
.cell-actions {
white-space: nowrap;
text-align: end;
}
.btn--compact {
padding: 8px 10px;
border-radius: 10px;
}
.actions-col {
width: 1%;
text-align: center;
}
.section-card--relative {
position: relative;
}
.sub--topless {
margin-top: 0;
}
.purge-form {
position: absolute;
top: 1.9rem;
right: 2rem;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.purge-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.muted-cell {
color: var(--muted);
}
.token-code {
font-size: 0.85rem;
color: #64748b;
}
.btn--icon-sm {
padding: 6px 8px;
}
.modal-note {
color: var(--muted);
margin-top: 4px;
}
.modal-note-main {
display: block;
}
.modal-note-update {
display: block;
margin-top: 4px;
font-size: 0.82rem;
color: #94a3b8;
}
.modal-form {
margin-top: 1rem;
}
.document-upload-modal .document-upload-modal__content {
width: min(96vw, 460px);
max-width: 460px;
text-align: left;
}
.document-upload-modal .document-upload-modal__qr-wrap {
margin-top: 8px;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
}
.document-upload-modal .document-upload-modal__qr-layer {
width: 220px;
height: 220px;
max-width: 100%;
position: relative;
}
.document-upload-modal .document-upload-modal__copy-btn {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.16s ease;
}
.document-upload-modal
.document-upload-modal__qr-layer.is-copy-ready:hover
.document-upload-modal__copy-btn,
.document-upload-modal .document-upload-modal__copy-btn:focus-visible {
opacity: 1;
pointer-events: auto;
}
.document-upload-modal .document-upload-modal__copy-btn[disabled] {
display: none;
}
.document-upload-modal .document-upload-modal__link {
display: block;
margin-top: 12px;
font-size: 0.8rem;
color: #1d4ed8;
word-break: break-all;
}
.document-upload-modal .document-upload-modal__status,
.app-store-download-modal__status,
#maintenancePage .maintenance-mobile-modal__status,
#driverCostsPage .driver-costs-mobile-modal__status,
#settingsPage.profile-page .profile-mobile-modal__status,
#permitPage .permit-autosave-status,
#settingsPage.profile-page .profile-autosave-status {
position: relative;
overflow: hidden;
isolation: isolate;
}
.document-upload-modal .document-upload-modal__status.is-loading,
.app-store-download-modal__status.is-loading,
#maintenancePage .maintenance-mobile-modal__status.is-loading,
#driverCostsPage .driver-costs-mobile-modal__status.is-loading,
#settingsPage.profile-page .profile-mobile-modal__status.is-loading,
#permitPage .permit-autosave-status.is-loading,
#settingsPage.profile-page .profile-autosave-status.is-loading {
padding-left: 34px;
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}
.document-upload-modal .document-upload-modal__status.is-loading::before,
.app-store-download-modal__status.is-loading::before,
#maintenancePage .maintenance-mobile-modal__status.is-loading::before,
#driverCostsPage .driver-costs-mobile-modal__status.is-loading::before,
#settingsPage.profile-page .profile-mobile-modal__status.is-loading::before,
#permitPage .permit-autosave-status.is-loading::before,
#settingsPage.profile-page .profile-autosave-status.is-loading::before {
content: "";
position: absolute;
top: 50%;
left: 12px;
width: 13px;
height: 13px;
margin-top: -6.5px;
border-radius: 999px;
border: 2px solid currentColor;
border-right-color: transparent;
animation: appLoadingSpin 0.78s linear infinite;
opacity: 0.9;
}
.document-upload-modal .document-upload-modal__status.is-loading::after,
.app-store-download-modal__status.is-loading::after,
#maintenancePage .maintenance-mobile-modal__status.is-loading::after,
#driverCostsPage .driver-costs-mobile-modal__status.is-loading::after,
#settingsPage.profile-page .profile-mobile-modal__status.is-loading::after,
#permitPage .permit-autosave-status.is-loading::after,
#settingsPage.profile-page .profile-autosave-status.is-loading::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 32%,
rgba(255, 255, 255, 0.42) 50%,
rgba(255, 255, 255, 0.08) 68%,
transparent 100%
);
transform: translateX(-130%);
animation: appLoadingSheen 1.2s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.document-upload-modal .document-upload-modal__status {
margin-top: 10px;
border-radius: 10px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #334155;
padding: 9px 10px;
font-size: 0.85rem;
font-weight: 600;
}
.document-upload-modal .document-upload-modal__status.is-success {
border-color: #86efac;
background: #ecfdf5;
color: #166534;
}
.document-upload-modal .document-upload-modal__status.is-error {
border-color: #fdba74;
background: #fff7ed;
color: #9a3412;
}
.document-upload-modal .document-upload-modal__review {
margin-top: 10px;
display: grid;
gap: 10px;
}
.document-upload-modal .document-upload-modal__review-preview {
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.document-upload-modal .document-upload-modal__review-preview img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
}
.document-upload-modal .document-upload-modal__review[hidden],
.document-upload-modal .document-upload-modal__link[hidden],
.document-upload-modal .document-upload-modal__qr-wrap[hidden] {
display: none !important;
}
@media (max-width: 740px) {
.document-upload-modal .document-upload-modal__review-preview {
height: 220px;
}
}
.app-store-download-modal .app-store-download-modal__content {
width: min(96vw, 460px);
max-width: 460px;
text-align: left;
}
.app-store-download-modal__qr-wrap {
margin-top: 8px;
padding: 12px;
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
display: flex;
justify-content: center;
align-items: center;
}
.app-store-download-modal__qr-layer {
width: 220px;
height: 220px;
max-width: 100%;
position: relative;
}
#appStoreDownloadQr {
width: 220px;
height: 220px;
max-width: 100%;
border-radius: 8px;
background: #fff;
}
.app-store-download-modal__status {
margin-top: 10px;
border-radius: 10px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #334155;
padding: 9px 10px;
font-size: 0.85rem;
font-weight: 600;
}
.app-store-download-modal__status.is-success {
border-color: #86efac;
background: #ecfdf5;
color: #166534;
}
.app-store-download-modal__status.is-error {
border-color: #fdba74;
background: #fff7ed;
color: #9a3412;
}
.field--mt {
margin-top: 12px;
}
.blinker-overlay--timed {
animation-duration: var(--blink-duration, 1.1s);
animation-delay: var(--blink-delay, 0s);
}
/* Index page */
#indexPage .page-header__actions--tight,
#driverCostsPage .page-header__actions--tight {
gap: 8px;
}
#indexPage .add-vehicle-btn,
#driverCostsPage .add-vehicle-btn {
margin-right: 0;
}
#indexPage .add-vehicle-btn .btn-label,
#driverCostsPage .add-vehicle-btn .btn-label {
white-space: nowrap;
}
#indexPage .add-vehicle-btn svg,
#driverCostsPage .add-vehicle-btn svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
@media (min-width: 821px) {
#indexPage .page-header__actions--tight .add-vehicle-btn {
width: 168px;
min-width: 168px;
height: 42px;
min-height: 42px;
justify-content: center;
box-sizing: border-box;
}
#indexPage .page-header__actions--tight button.add-vehicle-btn {
appearance: none;
-webkit-appearance: none;
font: inherit;
}
}
#indexPage .mechanic-board {
margin: 20px 0;
padding: 18px 22px;
background: #fff;
border-radius: 18px;
box-shadow: var(--shadow);
}
#indexPage .mechanic-board__title {
margin: 0 0 14px 0;
font-size: 1.15rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
#indexPage .mechanic-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
#indexPage .mechanic-row:last-child {
border-bottom: none;
}
#indexPage .mechanic-row__meta {
display: flex;
align-items: center;
gap: 10px;
}
#indexPage .plate-big {
font-size: 14px;
font-weight: 500;
padding: 4px 12px;
border-radius: 10px;
background: #3c5389;
color: #fff;
}
#indexPage .car-name {
font-size: 0.9rem;
color: var(--muted);
margin-left: 10px;
}
#indexPage .action-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
#indexPage .km-combined {
font-weight: 600 !important;
}
#indexPage .km-next-inline {
color: var(--muted) !important;
font-weight: 400 !important;
margin-left: 4px;
}
#indexPage .tag {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.78rem;
padding: 4px 8px;
border-radius: 8px;
font-weight: 600;
white-space: nowrap;
}
#indexPage .thumb {
aspect-ratio: 16/9;
}
#indexPage .thumb img,
#indexPage .blinker-overlay {
margin-top: 20px;
}
#indexPage .tag-red {
background: #fee2e2;
color: #b91c1c;
}
#indexPage .tag-orange {
background: #ffedd5;
color: #c2410c;
}
#indexPage .tag-info {
background: #dbeafe;
color: #1e3a8a;
}
#indexPage .fleet-permit-open-btn {
background: #e2e8f0;
border-color: #cbd5e1;
color: #334155;
}
#indexPage .fleet-permit-open-btn:hover {
background: #d9e2ec;
border-color: #b8c6d8;
color: #1f2937;
}
#indexPage .fleet-permit-open-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.24);
}
#indexPage .fleet-permit-open-btn:disabled {
cursor: not-allowed;
opacity: 0.55;
}
#indexPage .fleet-license-modal {
align-items: center;
padding: 16px 10px;
overflow-y: auto;
}
#indexPage .fleet-license-modal .fleet-license-modal__content {
width: min(1180px, calc(100vw - 28px));
max-width: none;
max-height: calc(100dvh - 20px);
overflow: auto;
padding: 32px 30px 26px;
text-align: left;
margin: 0 auto;
}
#indexPage .fleet-license-modal__head {
margin-bottom: 12px;
}
#indexPage .fleet-license-modal__head h3 {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 1.1rem;
}
#indexPage .fleet-license-modal__head h3 svg {
width: 20px;
height: 20px;
}
#indexPage .fleet-license-form {
display: flex;
flex-direction: column;
gap: 18px;
}
#indexPage .fleet-license-modal__error {
border: 1px solid #fecaca;
background: #fef2f2;
color: #b91c1c;
border-radius: 10px;
padding: 9px 12px;
font-size: 0.9rem;
font-weight: 600;
}
#indexPage .fleet-license-modal__layout {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: 18px;
align-items: stretch;
}
#indexPage .fleet-license-modal__layout--single {
grid-template-columns: minmax(0, 1fr);
}
#indexPage .fleet-license-modal__vehicles,
#indexPage .fleet-license-modal__groups {
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #f8fafc;
padding: 16px;
min-width: 0;
}
#indexPage .fleet-license-modal__groups {
overflow: hidden;
}
@media (min-width: 1181px) {
#indexPage .fleet-license-modal__vehicles,
#indexPage .fleet-license-modal__groups {
display: flex;
flex-direction: column;
min-height: 0;
}
}
#indexPage .fleet-license-modal__vehicles-head,
#indexPage .fleet-license-modal__groups-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
#indexPage .fleet-license-modal__vehicles-head h4,
#indexPage .fleet-license-modal__groups-head h4 {
margin: 0;
font-size: 1rem;
color: #0f172a;
}
#indexPage .fleet-license-vehicle-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
max-height: min(62dvh, 620px);
overflow: auto;
padding-right: 5px;
scrollbar-width: none;
-ms-overflow-style: none;
}
#indexPage .fleet-license-vehicle-list::-webkit-scrollbar {
width: 0;
height: 0;
}
#indexPage .fleet-license-vehicle-option {
width: 100%;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
display: grid;
grid-template-columns: 80px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 8px;
text-align: left;
cursor: pointer;
}
#indexPage .fleet-license-vehicle-option:hover {
border-color: #93c5fd;
background: #f8fbff;
}
#indexPage .fleet-license-vehicle-option.is-active {
border-color: #1d4ed8;
background: #eff6ff;
}
#indexPage .fleet-license-vehicle-option.is-assigned {
border-color: #cbd5e1;
background: #f8fafc;
}
#indexPage .fleet-license-vehicle-option.is-filtered-out {
display: none;
}
#indexPage .fleet-license-vehicle-option .driver-costs-vehicle-option__thumb {
border-radius: 10px;
height: 58px;
width: 80px;
aspect-ratio: auto;
overflow: hidden;
background: #f1f5f9;
flex-shrink: 0;
}
#indexPage
.fleet-license-vehicle-option
.driver-costs-vehicle-option__thumb
.vehicle-photo {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
background: #fff;
margin-top: 0;
}
#indexPage .fleet-license-vehicle-option .driver-costs-vehicle-option__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
#indexPage .fleet-license-vehicle-option .driver-costs-vehicle-option__top {
display: flex;
align-items: center;
gap: 8px;
}
#indexPage
.fleet-license-vehicle-option
.driver-costs-vehicle-option__body
strong {
font-size: 0.92rem;
color: #0f172a;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.25;
max-height: 2.5em;
}
#indexPage .fleet-license-vehicle-option .driver-costs-vehicle-option__check {
color: #94a3b8;
display: inline-flex;
}
#indexPage .fleet-license-vehicle-option .driver-costs-vehicle-option__check i {
width: 18px;
height: 18px;
}
#indexPage
.fleet-license-vehicle-option.is-active
.driver-costs-vehicle-option__check {
color: #1d4ed8;
}
#indexPage .fleet-license-vehicle-option__group {
color: #64748b;
font-size: 0.76rem;
font-weight: 600;
margin-top: 2px;
}
#indexPage .fleet-license-modal__selection-count {
margin: 0;
font-size: 0.82rem;
color: #64748b;
}
#indexPage .fleet-license-groups-board {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
box-sizing: border-box;
max-height: min(62dvh, 620px);
min-height: 0;
min-width: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding-right: 5px;
scrollbar-width: none;
-ms-overflow-style: none;
}
#indexPage .fleet-license-groups-board::-webkit-scrollbar {
width: 0;
height: 0;
}
#indexPage .fleet-license-groups-actions {
margin-top: 12px;
display: flex;
}
#indexPage .fleet-license-groups-add-btn {
width: 100%;
justify-content: center;
}
#indexPage .fleet-license-groups-board__empty {
margin: 0;
padding: 12px;
border: 1px dashed #cbd5e1;
border-radius: 10px;
background: #f8fafc;
font-size: 0.84rem;
}
@media (min-width: 1181px) {
#indexPage .fleet-license-modal .fleet-license-modal__content {
overflow: hidden;
}
#indexPage .fleet-license-vehicle-list {
flex: 1 1 auto;
min-height: 0;
max-height: min(54dvh, 540px);
}
#indexPage .fleet-license-groups-board {
flex: 0 1 auto;
min-height: 0;
max-height: min(54dvh, 540px);
}
}
#indexPage .fleet-license-group-card {
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
overflow: hidden;
}
#indexPage .fleet-license-group-card.is-active {
border-color: #1d4ed8;
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.12);
}
#indexPage .fleet-license-group-card__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
#indexPage .fleet-license-group-card__activate {
border: 0;
background: transparent;
color: #0f172a;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
padding: 0;
text-align: left;
max-width: calc(100% - 36px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#indexPage .fleet-license-group-card__remove {
border: 0;
background: transparent;
color: #94a3b8;
width: 28px;
height: 28px;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
#indexPage .fleet-license-group-card__remove:hover {
background: #f1f5f9;
color: #475569;
}
#indexPage .fleet-license-group-card__remove svg {
width: 14px;
height: 14px;
}
#indexPage .fleet-license-group-card .field {
margin: 0;
}
#indexPage .fleet-license-group-card .field label {
font-size: 0.78rem;
color: #64748b;
margin-bottom: 4px;
}
#indexPage .fleet-license-group-card .field input[type="date"] {
width: 100%;
max-width: 100%;
}
#indexPage .fleet-license-group-card .field input[type="text"] {
width: 100%;
max-width: 100%;
}
#indexPage .fleet-license-group-card__vehicles {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 100%;
overflow: hidden;
}
#indexPage .fleet-license-group-card__vehicles .muted {
margin: 0;
}
#indexPage .fleet-license-group-card__vehicle {
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #334155;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.76rem;
font-weight: 700;
cursor: pointer;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#indexPage .fleet-license-group-card__vehicle:hover {
border-color: #cbd5e1;
background: #eef2f7;
}
@media (max-width: 1180px) {
#indexPage .fleet-license-modal .fleet-license-modal__content {
width: min(1120px, calc(100vw - 16px));
padding: 20px 18px 18px;
}
#indexPage .fleet-license-modal__layout {
grid-template-columns: 1fr;
}
#indexPage .fleet-license-vehicle-list,
#indexPage .fleet-license-groups-board {
max-height: min(38dvh, 360px);
}
}
@media (max-width: 760px) {
#indexPage .fleet-license-modal {
padding: 6px 4px;
}
#indexPage .fleet-license-modal .fleet-license-modal__content {
width: calc(100vw - 8px);
max-height: calc(100dvh - 8px);
padding: 14px 12px 12px;
border-radius: 14px;
}
#indexPage .fleet-license-modal__vehicles-head,
#indexPage .fleet-license-modal__groups-head {
align-items: center;
flex-direction: row;
}
#indexPage .fleet-license-modal__head {
margin-right: 36px;
}
#indexPage .fleet-license-modal__vehicles,
#indexPage .fleet-license-modal__groups {
padding: 12px;
border-radius: 12px;
}
#indexPage .fleet-license-group-card {
padding: 10px;
}
#indexPage .fleet-license-modal .modal-actions .btn {
width: 100%;
justify-content: center;
}
}
/* Permit page */
#permitPage .permit-shell {
display: grid;
gap: 16px;
margin-top: 14px;
}
#permitPage .permit-section {
display: grid;
gap: 14px;
}
#permitPage .permit-section__head {
display: grid;
gap: 4px;
}
#permitPage .permit-section__subtitle {
margin: 0;
color: #64748b;
font-size: 0.88rem;
line-height: 1.4;
}
#permitPage .permit-settings-grid {
display: grid;
grid-template-columns: minmax(0, 240px);
gap: 12px;
}
#permitPage .permit-central-docs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#permitPage .permit-central-doc-card {
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #fff;
padding: 12px;
display: grid;
gap: 10px;
}
#permitPage .permit-central-doc-card h3 {
margin: 0;
font-size: 0.86rem;
color: #334155;
}
#permitPage .permit-central-doc-card__preview {
min-height: 160px;
border: 1px dashed #cbd5e1;
border-radius: 10px;
background: #f8fafc;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#permitPage .permit-central-doc-card__preview a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#permitPage .permit-central-doc-card__preview img {
width: 100%;
height: 100%;
object-fit: contain;
background: #eef2f7;
}
#permitPage .permit-central-doc-card__empty {
display: inline-flex;
flex-direction: column;
gap: 6px;
align-items: center;
color: #64748b;
font-size: 0.8rem;
}
#permitPage .permit-central-doc-card__upload {
position: relative;
overflow: hidden;
border: 1px solid #d5e0f0;
border-radius: 10px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.83rem;
font-weight: 700;
color: #334155;
cursor: pointer;
background: #fff;
}
#permitPage .permit-central-doc-card__upload input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
#permitPage .permit-vehicle-board {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
#permitPage .permit-vehicle-column {
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #ffffff;
padding: 14px;
display: grid;
gap: 12px;
min-width: 0;
}
#permitPage .permit-vehicle-column__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
#permitPage .permit-vehicle-column__head h3 {
margin: 0;
font-size: 0.94rem;
color: #0f172a;
letter-spacing: 0.01em;
}
#permitPage .permit-vehicle-column__count {
min-width: 32px;
border-radius: 999px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #475569;
text-align: center;
padding: 2px 9px;
font-size: 0.74rem;
font-weight: 700;
}
#permitPage .permit-vehicle-column__search {
margin: 0;
}
#permitPage .permit-vehicle-column__search label {
font-size: 0.78rem;
color: #64748b;
}
#permitPage .permit-vehicle-list {
display: grid;
gap: 10px;
max-height: min(56dvh, 560px);
overflow: auto;
padding-right: 2px;
}
#permitPage .permit-vehicle-list .permit-vehicle-list__empty {
margin: 0;
border: 1px dashed #cbd5e1;
border-radius: 10px;
padding: 12px;
background: #fff;
color: #64748b;
font-size: 0.82rem;
}
#permitPage .permit-vehicle-card {
border: 1px solid #e4ebf5;
border-radius: 14px;
background: #fff;
padding: 10px;
display: grid;
grid-template-columns: 74px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
#permitPage .permit-vehicle-card:hover {
border-color: #cfdceb;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
#permitPage .permit-vehicle-card__media {
width: 74px;
height: 54px;
border-radius: 10px;
border: 1px solid #e7edf6;
overflow: hidden;
background: #f8fafc;
}
#permitPage .permit-vehicle-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
}
#permitPage .permit-vehicle-card__body {
display: grid;
gap: 5px;
min-width: 0;
}
#permitPage .permit-vehicle-card__title {
display: grid;
gap: 2px;
}
#permitPage .permit-vehicle-card__title .plate-tag {
justify-self: start;
width: auto;
display: inline-flex;
}
#permitPage .permit-vehicle-card__title strong {
font-size: 0.93rem;
font-weight: 700;
line-height: 1.25;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#permitPage .permit-vehicle-card__docs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#permitPage .permit-vehicle-card__docs a {
display: inline-flex;
align-items: center;
border: 1px solid #dbe4f2;
border-radius: 999px;
padding: 3px 8px;
color: #475569;
background: #f8fafc;
font-size: 0.7rem;
font-weight: 700;
transition:
background 0.16s ease,
border-color 0.16s ease,
color 0.16s ease;
}
#permitPage .permit-vehicle-card__docs a:hover {
border-color: #cbd7e8;
background: #f1f5f9;
color: #1e293b;
}
#permitPage .permit-vehicle-card__docs .muted {
font-size: 0.74rem;
color: #64748b;
}
#permitPage .permit-vehicle-card__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: #475569;
font-weight: 600;
white-space: nowrap;
border: 1px solid #dbe4f2;
border-radius: 999px;
background: #f8fafc;
padding: 5px 9px;
}
#permitPage .permit-vehicle-card__toggle input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: #1d4ed8;
}
#permitPage .permit-vehicle-card__toggle-label {
display: inline-flex;
align-items: center;
line-height: 1;
}
#permitPage .permit-vehicle-card.is-hidden {
display: none;
}
#permitPage .permit-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
#permitPage .permit-autosave-status {
flex: 1 1 280px;
margin: 0;
padding: 10px 12px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
color: #334155;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.01em;
transition:
border-color 0.2s ease,
background 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
#permitPage .permit-autosave-status.is-saving {
border-color: #93c5fd;
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
color: #1d4ed8;
}
#permitPage .permit-autosave-status.is-success {
border-color: #86efac;
background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%);
color: #166534;
box-shadow: 0 10px 22px rgba(22, 101, 52, 0.1);
}
#permitPage .permit-autosave-status.is-error {
border-color: #fdba74;
background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
color: #9a3412;
}
@media (max-width: 960px) {
#permitPage .permit-vehicle-board,
#permitPage .permit-central-docs {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
#permitPage .permit-vehicle-card {
grid-template-columns: 64px minmax(0, 1fr);
grid-template-areas:
"media body"
"toggle toggle";
}
#permitPage .permit-vehicle-card__media {
grid-area: media;
width: 64px;
height: 48px;
}
#permitPage .permit-vehicle-card__body {
grid-area: body;
}
#permitPage .permit-vehicle-card__toggle {
grid-area: toggle;
justify-content: flex-start;
width: fit-content;
}
#permitPage .permit-autosave-status {
flex-basis: 100%;
}
#permitPage .permit-actions .btn {
width: 100%;
justify-content: center;
}
}
/* Home page */
#homePage .container {
min-height: 100dvh;
display: flex;
}
#homePage .home-layout {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 22px;
min-height: 0;
}
#homePage .home-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
}
#homePage .home-header__identity {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
#homePage .home-avatar {
width: 46px;
height: 46px;
border-radius: 12px;
background: #dbeafe;
color: #1d4ed8;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
overflow: hidden;
font-weight: 800;
letter-spacing: 0.02em;
}
#homePage .home-avatar__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#homePage .home-avatar__fallback {
font-size: 0.98rem;
}
#homePage .home-subtitle {
margin: 0;
color: #64748b;
font-size: clamp(0.82rem, 1.25vw, 0.96rem);
line-height: 1.35;
}
#homePage .home-header__title h1 {
margin: 0;
font-size: clamp(1.2rem, 2.4vw, 1.9rem);
line-height: 1.15;
letter-spacing: -0.025em;
}
#homePage .home-header__actions {
display: flex;
gap: 8px;
align-items: center;
flex: 0 0 auto;
justify-content: flex-end;
flex-wrap: wrap;
}
#homePage .home-header__actions .btn {
width: 36px;
height: 36px;
padding: 0;
border-radius: 999px;
justify-content: center;
flex: 0 0 auto;
margin: 0;
}
#homePage .home-header__actions .btn.primary {
margin-left: 0;
border-color: #334155;
background: #334155;
color: #ffffff;
}
#homePage .home-header__actions .btn.primary:hover {
border-color: #475569;
background: #475569;
}
#homePage .home-header__actions .btn i,
#homePage .home-header__actions .btn svg {
width: 16px;
height: 16px;
}
#homePage .home-main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 24px;
min-height: 0;
}
#homePage .home-mobile-stack {
display: none;
}
#homePage .home-desktop-shell {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 22px;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#homePage .home-desktop-shell--mechanic {
grid-template-rows: minmax(0, 1fr);
}
#homePage .home-desktop-shell--mechanic .home-panel--attention {
max-height: none;
}
#homePage .home-panel,
#homePage .home-status-card {
border: 1px solid #dbe4f2;
border-radius: 16px;
background: #fff;
}
#homePage .home-panel {
overflow: hidden;
}
#homePage .home-panel--attention {
display: flex;
flex-direction: column;
max-height: min(34dvh, 320px);
}
#homePage .home-card__header {
margin-bottom: 14px;
}
#homePage .home-panel__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 14px;
margin-bottom: 14px;
}
#homePage .home-panel__header--spaced {
padding: 12px 18px 0;
}
#homePage .home-panel__header h2 {
margin: 0;
font-size: 1.05rem;
color: #0f172a;
}
#homePage .home-panel__header p {
margin: 6px 0 0;
color: #64748b;
font-size: 0.95rem;
line-height: 1.4;
}
#homePage .home-attention-list {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
#homePage .home-attention-item {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 12px 18px;
color: inherit;
text-decoration: none;
border-top: 1px solid #e5e7eb;
}
#homePage .home-attention-item:first-child {
border-top: 1px solid #e5e7eb;
}
#homePage .home-attention-item--danger {
background: #fff7f7;
}
#homePage .home-attention-item--warning {
background: #fffaf3;
}
#homePage .home-attention-item--info {
background: #f8fbff;
}
#homePage .home-attention-item--neutral {
background: #f8fafc;
}
#homePage .home-attention-item__icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid currentColor;
}
#homePage .home-attention-item--danger .home-attention-item__icon {
color: #dc2626;
}
#homePage .home-attention-item--warning .home-attention-item__icon {
color: #b45309;
}
#homePage .home-attention-item--info .home-attention-item__icon {
color: #2563eb;
}
#homePage .home-attention-item--neutral .home-attention-item__icon {
color: #0f766e;
}
#homePage .home-attention-item__icon svg {
width: 14px;
height: 14px;
}
#homePage .home-attention-item__copy {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
#homePage .home-attention-item__title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
#homePage .home-attention-item__title-row strong {
font-size: 1rem;
color: #0f172a;
}
#homePage .home-attention-item__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
font-size: 0.8rem;
font-weight: 700;
}
#homePage .home-attention-item--danger .home-attention-item__count {
background: #dc2626;
color: #fff;
}
#homePage .home-attention-item--warning .home-attention-item__count {
background: #f59e0b;
color: #fff;
}
#homePage .home-attention-item--info .home-attention-item__count {
background: #2563eb;
color: #fff;
}
#homePage .home-attention-item__desc {
font-size: 0.95rem;
color: #64748b;
line-height: 1.35;
}
#homePage .home-attention-item__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
#homePage .home-attention-chip {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
padding: 3px 8px;
border: 1px solid #dbe4f2;
background: #fff;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
}
#homePage .home-attention-chip svg {
width: 12px;
height: 12px;
}
#homePage .home-attention-chip--danger {
border-color: #fecaca;
background: #fef2f2;
color: #b91c1c;
}
#homePage .home-attention-chip--warning {
border-color: #fed7aa;
background: #fff7ed;
color: #b45309;
}
#homePage .home-attention-chip--info {
border-color: #bfdbfe;
background: #eff6ff;
color: #1d4ed8;
}
#homePage .home-attention-item__action {
display: inline-flex;
align-items: center;
gap: 6px;
color: #475569;
font-size: 0.94rem;
font-weight: 700;
}
#homePage .home-attention-item__action svg {
width: 15px;
height: 15px;
}
#homePage .home-status-section {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
}
#homePage .home-status-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
#homePage .home-status-grid.home-status-grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#homePage .home-status-grid.home-status-grid--cols-1 {
grid-template-columns: 1fr;
}
#homePage .home-status-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 18px;
color: inherit;
text-decoration: none;
}
#homePage .home-status-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
#homePage .home-status-card__identity {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
#homePage .home-status-card__icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
#homePage .home-status-card__icon svg {
width: 18px;
height: 18px;
}
#homePage .home-status-card__head h3 {
margin: 0;
font-size: 1rem;
line-height: 1.2;
color: #0f172a;
}
#homePage .home-status-card__head p {
margin: 2px 0 0;
font-size: 0.92rem;
color: #64748b;
}
#homePage .home-status-card__dot {
width: 7px;
height: 7px;
border-radius: 999px;
margin-top: 7px;
flex: 0 0 auto;
}
#homePage .home-status-card__dot--success {
background: #16a34a;
}
#homePage .home-status-card__dot--warning {
background: #f59e0b;
}
#homePage .home-status-card__dot--danger {
background: #dc2626;
}
#homePage .home-status-card__dot--neutral {
background: #94a3b8;
}
#homePage .home-status-card__progress-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
#homePage .home-status-card__progress-bar {
height: 6px;
border-radius: 999px;
background: #dbe4f2;
overflow: hidden;
}
#homePage .home-status-card__progress-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: #2563eb;
}
#homePage .home-status-card__progress-label {
font-size: 0.88rem;
color: #475569;
font-weight: 700;
}
#homePage .home-status-card__metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 20px;
}
#homePage .home-status-card__metric {
display: flex;
flex-direction: column;
gap: 4px;
}
#homePage .home-status-card__metric-label {
font-size: 0.9rem;
color: #64748b;
}
#homePage .home-status-card__metric-value {
font-size: 1rem;
line-height: 1.2;
color: #0f172a;
}
#homePage .home-status-card__metric-value--success {
color: #16a34a;
}
#homePage .home-status-card__metric-value--warning {
color: #b45309;
}
#homePage .home-status-card__metric-value--danger {
color: #dc2626;
}
#homePage .home-status-card__metric-value--neutral {
color: #0f172a;
}
#homePage .home-map-panel {
display: flex;
flex-direction: column;
padding: 14px;
border: 1px solid #dbe4f2;
border-radius: 16px;
background: #fff;
min-height: 0;
overflow: hidden;
}
#homePage .home-map-panel__stage {
position: relative;
flex: 1 1 auto;
min-height: 240px;
border-radius: 16px;
overflow: hidden;
background: #e9edf3;
}
#homePage .home-map-panel__map-link {
position: absolute;
top: 12px;
right: 12px;
z-index: 710;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.95);
color: #0f172a;
border-radius: 999px;
padding: 8px 12px;
font:
600 12px/1 "Outfit",
sans-serif;
letter-spacing: 0.02em;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
#homePage .home-map-panel__map-link svg {
width: 15px;
height: 15px;
}
#homePage .home-map-panel__stage > .vehicle-map {
height: 100% !important;
border-radius: 16px !important;
}
#homePage .home-map-panel .vehicle-map__controls {
display: flex;
top: 56px;
right: 12px;
z-index: 720;
}
#homePage .home-map-panel .vehicle-map__toggle {
display: none;
}
#homePage .home-map-panel .vehicle-map__toggle[data-control="fullscreen"] {
display: inline-flex;
}
#homePage .home-map-panel .leaflet-container {
background: #edf2f7;
}
#homePage .launchpad {
display: flex;
flex-direction: column;
gap: 12px;
}
#homePage .launch-item {
display: grid;
grid-template-columns: 65px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
border: 1px solid #dbe4f2;
border-radius: 16px;
padding: 14px 16px;
background: #fff;
color: inherit;
text-decoration: none;
transition:
transform 0.16s ease,
border-color 0.16s ease,
box-shadow 0.16s ease,
background 0.16s ease;
}
#homePage .launch-divider {
margin: 2px 2px;
color: #64748b;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#homePage .launch-item__icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: visible;
}
#homePage .launch-item__icon svg {
width: 24px;
height: 24px;
stroke-width: 2.1;
}
#homePage .launch-item__badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 20px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: #dc2626;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
font-weight: 600;
line-height: 1;
box-shadow: 0 1px 4px rgba(185, 28, 28, 0.32);
pointer-events: none;
}
#homePage .launch-item__icon--blue {
color: #2563eb;
background: rgba(37, 99, 235, 0.13);
}
#homePage .launch-item__icon--teal {
color: #0e7490;
background: rgba(8, 145, 178, 0.14);
}
#homePage .launch-item__icon--violet {
color: #7c3aed;
background: rgba(124, 58, 237, 0.14);
}
#homePage .launch-item__icon--gold {
color: #b45309;
background: rgba(245, 158, 11, 0.16);
}
#homePage .launch-item__icon--consilium {
color: #79c78d;
background: linear-gradient(
145deg,
rgba(121, 199, 141, 0.2) 0%,
rgba(112, 174, 228, 0.16) 100%
);
}
#homePage .launch-item__icon--red {
color: #be123c;
background: rgba(244, 63, 94, 0.14);
}
#homePage .launch-item__content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
#homePage .launch-item__title {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.03;
letter-spacing: -0.02em;
color: #0f172a;
}
#homePage .launch-item__desc {
font-size: 0.9rem;
color: #64748b;
line-height: 1.2;
}
#homePage .launch-item__go {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #334155;
}
#homePage .launch-item__go svg {
width: 16px;
height: 16px;
}
#homePage .launch-item--fleet {
background: linear-gradient(160deg, #fff 0%, #eef5ff 100%);
}
#homePage .launch-item--costs {
background: linear-gradient(160deg, #fff 0%, #f5f3ff 100%);
}
#homePage .launch-item--map {
background: linear-gradient(160deg, #fff 0%, #ecfeff 100%);
}
#homePage .launch-item--consilium {
background: linear-gradient(160deg, #ffffff 0%, #f2fbf6 58%, #eef5ff 100%);
}
#homePage .launch-item:hover {
transform: translateX(2px);
border-color: #93c5fd;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
#homePage .launch-item--map:hover {
border-color: #67e8f9;
}
#homePage .launch-item--costs:hover {
border-color: #c4b5fd;
}
#homePage .launch-item--consilium:hover {
border-color: #8bc9dc;
}
#homePage .launch-item:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.32);
outline-offset: 2px;
}
#homePage .launch-item--map:focus-visible {
outline-color: rgba(8, 145, 178, 0.32);
}
#homePage .launch-item--costs:focus-visible {
outline-color: rgba(124, 58, 237, 0.32);
}
#homePage .launch-item--consilium:focus-visible {
outline-color: rgba(112, 174, 228, 0.35);
}
#homePage .launch-item--soon {
border-style: dashed;
border-color: #d7e0ec;
background: #f8fafc;
box-shadow: none;
}
#homePage .launch-item--soon:hover {
transform: none;
border-color: #d7e0ec;
box-shadow: none;
}
#homePage .launch-item__go--soon {
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
border: 1px solid #d5deec;
background: #edf2fb;
border-radius: 999px;
padding: 3px 8px;
}
#homePage .quicklinks {
border: 1px solid #dbe4f2;
border-radius: 16px;
background: #fff;
padding: 16px;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}
#homePage .quicklinks h2 {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: #0f172a;
}
#homePage .quicklinks-list {
margin: 14px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
#homePage .quicklink-item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #f8fafc;
padding: 10px;
color: inherit;
text-decoration: none;
transition:
border-color 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease;
}
#homePage a.quicklink-item:hover {
border-color: #bfdbfe;
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
#homePage a.quicklink-item:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.32);
outline-offset: 2px;
}
#homePage .quicklink-item__icon {
width: 42px;
height: 42px;
border-radius: 12px;
}
#homePage .quicklink-item__icon svg {
width: 20px;
height: 20px;
}
#homePage .quicklink-item__logo {
width: 30px;
height: auto;
max-height: 22px;
object-fit: contain;
display: block;
}
#homePage .quicklink-item__text {
display: flex;
flex-direction: column;
gap: 2px;
}
#homePage .quicklink-item__title {
font-size: 1rem;
font-weight: 700;
line-height: 1.1;
color: #0f172a;
}
#homePage .quicklink-item > svg {
width: 16px;
height: 16px;
color: #64748b;
}
#homePage .quicklink-item__tag {
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
border: 1px solid #d5deec;
background: #edf2fb;
border-radius: 999px;
padding: 3px 7px;
}
#homePage .quicklink-item--disabled {
border-style: dashed;
}
@media (max-width: 1024px) {
#homePage .home-status-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#homePage .home-status-grid.home-status-grid--cols-1 {
grid-template-columns: 1fr;
}
}
@media (max-width: 860px) {
#homePage .home-status-grid {
grid-template-columns: 1fr;
}
#homePage .home-attention-item {
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 10px;
padding: 10px 12px;
}
#homePage .home-attention-item__title-row strong {
font-size: 0.92rem;
}
#homePage .home-attention-item__desc {
font-size: 0.84rem;
}
#homePage .home-attention-chip {
font-size: 0.66rem;
padding: 2px 7px;
}
#homePage .launch-item {
grid-template-columns: 50px minmax(0, 1fr);
gap: 12px;
padding: 12px 13px;
}
#homePage .launch-item__icon {
width: 44px;
height: 44px;
border-radius: 12px;
}
#homePage .launch-item__badge {
top: -7px;
right: -7px;
font-size: 0.68rem;
}
#homePage .launch-item__icon svg {
width: 20px;
height: 20px;
}
#homePage .launch-item__go {
display: none;
}
#homePage .launch-item__title {
font-size: 1.28rem;
}
#homePage .launch-item__desc {
font-size: 0.9rem;
}
#homePage .quicklink-item {
grid-template-columns: 38px minmax(0, 1fr) auto;
padding: 6px;
}
#homePage .quicklink-item__icon {
width: 38px;
height: 38px;
}
#homePage .quicklink-item__icon svg {
width: 18px;
height: 18px;
}
#homePage .quicklink-item__logo {
width: 26px;
max-height: 19px;
}
}
@media (max-width: 1200px) {
#homePage .home-map-panel__stage {
min-height: 320px;
}
}
@media (max-width: 1400px) {
#homePage .home-status-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#homePage .home-status-grid.home-status-grid--cols-1 {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
#homePage {
background:
radial-gradient(
circle at top right,
rgba(37, 99, 235, 0.08),
transparent 32%
),
linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
}
#homePage .launchpad {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: stretch;
}
#homePage .container {
min-height: auto;
display: block;
}
#homePage .home-layout {
gap: 14px;
min-height: auto;
}
#homePage .home-desktop-shell {
display: none;
}
#homePage .home-mobile-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
#homePage[data-role="mechanic"] .home-desktop-shell {
display: flex;
flex-direction: column;
gap: 12px;
overflow: visible;
}
#homePage[data-role="mechanic"] .home-panel--attention {
max-height: none;
}
#homePage .home-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 4px 14px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#homePage .home-header__identity {
gap: 8px;
}
#homePage .home-avatar {
display: inline-flex;
width: 38px;
height: 38px;
border-radius: 10px;
}
#homePage .home-header__actions {
gap: 6px;
}
#homePage .home-header__title h1 {
font-size: clamp(1rem, 4vw, 1.18rem);
line-height: 1.15;
}
#homePage .home-subtitle {
margin: 0;
font-size: 0.76rem;
line-height: 1.3;
color: #64748b;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#homePage .home-main {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
gap: 14px;
}
#homePage .home-map-panel .vehicle-map__controls,
#homePage .home-map-panel .vehicle-map__toggle[data-control="fullscreen"] {
display: none !important;
}
#homePage .home-mobile-hero__surface {
position: relative;
overflow: hidden;
border-radius: 24px;
padding: 18px;
background:
radial-gradient(
circle at top right,
rgba(34, 197, 94, 0.18),
transparent 30%
),
linear-gradient(145deg, #0f172a 0%, #172554 100%);
color: #f8fafc;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
#homePage .home-mobile-hero__surface::after {
content: "";
position: absolute;
inset: auto -18% -38% auto;
width: 180px;
height: 180px;
border-radius: 999px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.18),
transparent 68%
);
pointer-events: none;
}
#homePage .home-mobile-hero__header {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
#homePage .home-mobile-hero__copy {
min-width: 0;
}
#homePage .home-mobile-hero__eyebrow,
#homePage .home-mobile-section__eyebrow {
display: inline-flex;
margin: 0 0 6px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#homePage .home-mobile-hero__eyebrow {
color: rgba(226, 232, 240, 0.76);
}
#homePage .home-mobile-hero__copy h2 {
margin: 0;
font-size: 1.22rem;
line-height: 1.1;
letter-spacing: -0.03em;
}
#homePage .home-mobile-hero__copy p {
margin: 8px 0 0;
color: rgba(226, 232, 240, 0.78);
font-size: 0.86rem;
line-height: 1.35;
}
#homePage .home-mobile-hero__pulse {
width: 12px;
height: 12px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.18);
flex: 0 0 auto;
margin-top: 4px;
}
#homePage .home-mobile-hero__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
#homePage .home-mobile-metric {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px;
padding: 12px 10px;
background: rgba(15, 23, 42, 0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#homePage .home-mobile-metric__label {
display: block;
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.72);
line-height: 1.2;
}
#homePage .home-mobile-metric__value {
display: block;
margin-top: 8px;
font-size: 1.08rem;
line-height: 1;
color: #fff;
}
#homePage .home-mobile-section,
#homePage .quicklinks {
border: 1px solid #dbe4f2;
border-radius: 22px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 14px;
}
#homePage .home-mobile-section__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
#homePage .home-mobile-section__head h2,
#homePage .home-mobile-section__head .card-title {
margin: 0;
font-size: 1rem;
line-height: 1.1;
color: #0f172a;
}
#homePage .home-mobile-section__eyebrow {
color: #64748b;
}
#homePage .home-mobile-section__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
font-size: 0.8rem;
font-weight: 700;
}
#homePage .home-mobile-alerts {
display: flex;
flex-direction: column;
gap: 10px;
}
#homePage .home-mobile-alert {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
border-radius: 18px;
padding: 12px;
text-decoration: none;
color: inherit;
border: 1px solid #e2e8f0;
background: #f8fafc;
}
#homePage .home-mobile-alert--danger {
background: linear-gradient(160deg, #fff5f5 0%, #fff 100%);
border-color: #fecaca;
}
#homePage .home-mobile-alert--warning {
background: linear-gradient(160deg, #fffaf0 0%, #fff 100%);
border-color: #fed7aa;
}
#homePage .home-mobile-alert--info {
background: linear-gradient(160deg, #f0f9ff 0%, #fff 100%);
border-color: #bfdbfe;
}
#homePage .home-mobile-alert--neutral {
background: linear-gradient(160deg, #f8fafc 0%, #fff 100%);
border-color: #dbe4f2;
}
#homePage .home-mobile-alert__icon {
width: 36px;
height: 36px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: #334155;
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}
#homePage .home-mobile-alert__icon svg {
width: 18px;
height: 18px;
}
#homePage .home-mobile-alert__copy {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
#homePage .home-mobile-alert__copy strong {
font-size: 0.9rem;
line-height: 1.15;
color: #0f172a;
}
#homePage .home-mobile-alert__copy span {
font-size: 0.77rem;
line-height: 1.3;
color: #64748b;
}
#homePage .home-mobile-alert__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 8px;
border-radius: 999px;
background: #fff;
color: #0f172a;
font-size: 0.76rem;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}
#homePage .home-mobile-alert__count--empty {
min-width: 28px;
padding: 0;
}
#homePage .home-mobile-alert__count--empty svg {
width: 14px;
height: 14px;
}
#homePage .home-mobile-status-strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(150px, 72%);
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
}
#homePage .home-mobile-status-strip::-webkit-scrollbar {
display: none;
}
#homePage .home-mobile-status-card {
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 18px;
padding: 14px;
text-decoration: none;
color: inherit;
border: 1px solid #e2e8f0;
background: linear-gradient(165deg, #ffffff 0%, #f8fbff 100%);
min-height: 138px;
}
#homePage .home-mobile-status-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#homePage .home-mobile-status-card__icon {
width: 36px;
height: 36px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#homePage .home-mobile-status-card__icon svg {
width: 16px;
height: 16px;
}
#homePage .home-mobile-status-card > strong {
font-size: 0.95rem;
line-height: 1.15;
color: #0f172a;
}
#homePage .home-mobile-status-card > span {
font-size: 0.78rem;
line-height: 1.3;
color: #64748b;
}
#homePage .home-mobile-status-card__metric {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
}
#homePage .home-mobile-status-card__metric span {
font-size: 0.72rem;
color: #64748b;
}
#homePage .home-mobile-status-card__metric strong {
font-size: 0.92rem;
color: #0f172a;
}
#homePage .launchpad .launch-item {
min-height: 75px;
grid-template-columns: 40px minmax(0, 1fr);
grid-template-rows: auto;
align-content: center;
align-items: center;
justify-items: stretch;
gap: 12px;
border-radius: 18px;
padding: 13px 12px;
}
#homePage .launchpad .launch-item--span-2 {
grid-column: span 2;
}
#homePage .launch-divider {
grid-column: 1 / -1;
margin: 2px 2px 0;
}
#homePage .launchpad .launch-item__content {
width: auto;
min-width: 0;
justify-content: center;
gap: 2px;
}
#homePage .launchpad .launch-item__title {
font-size: 0.9rem;
line-height: 1.15;
}
#homePage .launchpad .launch-item__icon {
width: 40px;
height: 40px;
border-radius: 12px;
}
#homePage .launchpad .launch-item__icon svg {
width: 18px;
height: 18px;
}
#homePage .launchpad .launch-item__go {
display: none;
}
#homePage .quicklinks {
margin-bottom: 18px;
}
#homePage .quicklinks .home-mobile-section__head {
margin-bottom: 10px;
}
#homePage .quicklink-item {
grid-template-columns: 40px minmax(0, 1fr) auto;
padding: 8px;
border-radius: 14px;
background: #f8fafc;
}
#homePage .quicklink-item__icon.launch-item__icon {
width: 40px;
height: 40px;
border-radius: 12px;
}
#homePage .quicklink-item__icon.launch-item__icon svg {
width: 18px;
height: 18px;
}
#homePage .quicklink-item__logo {
width: 26px;
max-height: 19px;
}
#homePage .quicklink-item > svg {
display: none;
}
}
/* Edit page */
#editPage .vehicle-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1.3fr;
margin-bottom: 2rem;
}
#editPage .edit-hero-card {
margin-bottom: 0;
}
#editPage .vehicle-card .vehicle-photo {
height: 110%;
object-position: right;
align-self: center;
opacity: 1;
transform: none;
animation: vehicleImageRevealEdit 0.9s ease both;
transition:
opacity 0.9s ease,
transform 0.9s ease;
will-change: opacity, transform;
}
#editPage .vehicle-card .vehicle-photo.loaded {
opacity: 1;
transform: translateX(0);
}
#editPage .vehicle-card .blinker-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 110%;
object-fit: cover;
object-position: right;
pointer-events: none;
opacity: 1;
transform: none;
animation:
vehicleImageRevealEdit 0.9s ease both,
blinkerReal var(--blink-duration, 1.1s) infinite;
animation-delay: 0s, var(--blink-delay, 0s);
transition:
opacity 0.9s ease,
transform 0.9s ease;
will-change: opacity, transform;
mix-blend-mode: screen;
}
#editPage .vehicle-card .blinker-overlay.loaded {
opacity: 1;
transform: translateX(0);
}
#editPage .edit-maintenance-heading--desktop {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
#editPage .edit-maintenance-heading--mobile {
display: none;
}
#editPage .edit-header-maintenance-btn {
display: none;
}
#editPage .edit-maintenance-subtitle--desktop {
margin: 6px 0 14px;
font-size: 0.82rem;
color: #64748b;
}
#editPage #editForm .field--maintenance-only {
display: none;
}
#editPage #editForm .form-grid {
grid-template-columns: minmax(0, 1fr);
}
#editPage #editForm .field--vehicle-documents {
grid-column: 1 / -1;
}
#editPage .vehicle-documents-shell {
border: 1px solid #dbe4f2;
border-radius: 18px;
background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%);
padding: 12px;
display: grid;
gap: 12px;
box-shadow:
0 16px 40px rgba(148, 163, 184, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
#editPage .vehicle-doc-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 1241px) {
#editPage .vehicle-doc-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 1621px) {
#editPage .vehicle-doc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
#editPage .vehicle-doc-card {
appearance: none;
border: 1px solid #dbe4f2;
border-radius: 16px;
background: #fff;
padding: 16px 18px;
display: grid;
gap: 12px;
position: relative;
text-align: left;
width: 100%;
transition:
box-shadow 0.16s ease,
transform 0.16s ease,
border-color 0.16s ease,
background 0.16s ease;
box-shadow: 0 10px 24px rgba(148, 163, 184, 0.08);
cursor: pointer;
min-width: 0;
}
#editPage .vehicle-doc-card:hover {
border-color: #c9d8ee;
background: #fcfdff;
box-shadow: 0 16px 32px rgba(148, 163, 184, 0.14);
transform: translateY(-1px);
}
#editPage .vehicle-doc-card__main {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-width: 0;
}
#editPage .vehicle-doc-card__icon,
#editPage .vehicle-doc-card__add-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 13px;
border: 1px solid #d8e2f1;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
display: inline-flex;
align-items: center;
justify-content: space-between;
justify-content: center;
color: #1e293b;
}
#editPage .vehicle-doc-card__content {
min-width: 0;
flex: 1 1 auto;
}
#editPage .vehicle-doc-card__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
min-width: 0;
}
#editPage .vehicle-doc-card h3 {
margin: 0;
font-size: 1rem;
color: #0f172a;
letter-spacing: 0;
text-transform: none;
font-weight: 700;
min-width: 0;
overflow-wrap: anywhere;
}
#editPage .vehicle-doc-card__state {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid #fecaca;
background: #fef2f2;
color: #991b1b;
font-size: 0.72rem;
font-weight: 700;
padding: 5px 10px;
white-space: nowrap;
}
#editPage .vehicle-doc-card__state.is-ready {
border-color: #bbf7d0;
background: #ecfdf3;
color: #166534;
}
#editPage .vehicle-doc-card__chevron {
color: #334155;
opacity: 0.9;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
#editPage .vehicle-doc-card--add {
appearance: none;
cursor: pointer;
align-items: center;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
border-style: solid;
background: linear-gradient(180deg, #f9fbff 0%, #f3f8ff 100%);
text-decoration: none;
}
#editPage .vehicle-doc-card--add:hover {
border-color: #bfd3f6;
background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}
#editPage .vehicle-doc-card__add-icon {
color: #2563eb;
}
#editPage .vehicle-doc-card__add-content {
display: grid;
min-width: 0;
}
#editPage .vehicle-doc-card__add-title {
font-size: 1rem;
font-weight: 700;
color: #0f172a;
}
#editPage .vehicle-doc-card__add-meta {
font-size: 0.87rem;
color: #64748b;
overflow-wrap: anywhere;
}
@media (max-width: 759px) {
#editPage .vehicle-doc-card {
padding: 15px;
}
#editPage .vehicle-doc-card__main {
align-items: flex-start;
}
#editPage .vehicle-doc-card__head {
align-items: flex-start;
grid-template-columns: 1fr;
}
}
#editPage .registration-upload-modal {
width: min(760px, calc(100vw - 32px));
}
#editPage .registration-upload-modal__form {
display: grid;
gap: 18px;
}
#editPage .registration-upload-modal__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
#editPage .registration-upload-modal__field {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
}
#editPage .registration-upload-modal__label {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
#editPage .registration-upload-modal__current {
min-height: 150px;
border: 1px dashed #cbd5e1;
border-radius: 10px;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#editPage .registration-upload-modal__current a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
#editPage .registration-upload-modal__current img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #f1f5f9;
}
#editPage .registration-upload-modal__current.is-empty {
padding: 18px;
}
#editPage .registration-upload-modal__note {
margin: 0;
font-size: 0.78rem;
color: #64748b;
}
#editPage .registration-upload-modal__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
#editPage .registration-upload-modal__upload-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-height: 42px;
padding: 8px 10px;
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
color: inherit;
cursor: pointer;
transition:
border-color 0.16s ease,
background 0.16s ease;
}
#editPage .registration-upload-modal__upload-btn:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
#editPage .registration-upload-modal__upload-btn i {
width: 16px;
height: 16px;
color: #475569;
}
#editPage .registration-upload-modal__upload-btn span {
font-size: 0.82rem;
font-weight: 600;
line-height: 1;
}
#editPage .registration-upload-modal__upload-btn input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
#editPage .registration-upload-modal__help {
margin: 0;
color: var(--muted);
font-size: 0.8rem;
}
#editPage .registration-upload-modal__file-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
color: #0f172a;
font-weight: 600;
text-decoration: none;
}
@media (max-width: 720px) {
#editPage .registration-upload-modal__grid {
grid-template-columns: 1fr;
}
#editPage .registration-upload-modal__current {
min-height: 132px;
}
}
@media (max-width: 750px) {
#editPage .vehicle-doc-card__preview {
height: 132px;
}
#editPage .vehicle-doc-card__preview--multi {
height: 132px;
}
}
#editPage .vehicle-info {
padding: 1.75rem 1.75rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: linear-gradient(90deg, #fafafa 0%, #fff 100%);
}
#editPage .edit-hero-head-wrap {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 16px;
align-items: center;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #e2e8f0;
}
#editPage .edit-brand-logo {
width: 56px;
height: 56px;
border-radius: 14px;
border: 1px solid #dbe7f3;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#editPage .edit-brand-logo__img {
width: 78%;
height: 78%;
object-fit: contain;
display: block;
}
#editPage .edit-brand-logo__fallback {
display: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
font-size: 1.05rem;
font-weight: 800;
color: #334155;
}
#editPage .edit-brand-logo.is-fallback .edit-brand-logo__img {
display: none;
}
#editPage .edit-brand-logo.is-fallback .edit-brand-logo__fallback {
display: flex;
}
#editPage .edit-hero-head {
margin: 0;
padding: 0;
border: 0;
}
#editPage .vehicle-row {
display: flex;
min-height: 34px;
justify-content: space-between;
align-items: center;
margin-bottom: 0.8rem;
position: relative;
padding: 0.4rem 0.6rem;
border-radius: 8px;
transition:
background-color 0.2s ease,
box-shadow 0.2s ease;
}
#editPage .vehicle-value,
#editPage .vehicle-edit-input {
font-size: 0.9rem;
line-height: 1.4;
height: 28px;
display: flex;
align-items: center;
}
#editPage .vehicle-row:hover {
background-color: #f9fafb;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
#editPage .vehicle-row label {
font-weight: 600;
color: #374151;
font-size: 0.9rem;
flex: 0 0 160px;
}
#editPage .vehicle-value {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
gap: 6px;
color: #111827;
font-size: 0.9rem;
font-weight: 500;
min-height: 28px;
}
#editPage .vehicle-value .value-text {
overflow-wrap: anywhere;
}
#editPage .edit-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0;
transform: translateY(1px) scale(0.9);
cursor: pointer;
transition:
opacity 0.2s ease,
transform 0.2s ease;
color: var(--primary);
}
#editPage .vehicle-row:hover .edit-icon {
opacity: 1;
transform: translateY(0) scale(1);
}
#editPage .edit-icon:hover {
color: var(--primary-hover, #005ec2);
}
#editPage .vehicle-edit-input {
width: 100%;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 4px 8px;
font-size: 0.9rem;
font-weight: 500;
color: #111827;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition:
border-color 0.2s,
box-shadow 0.2s;
}
#editPage .vehicle-edit-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
#editPage .vehicle-row.saved {
background-color: #ecfdf5;
transition: background-color 0.4s ease;
}
#editPage .vehicle-row.saved:hover {
background-color: #f9fafb;
}
#editPage .delete-mobile-wrapper {
display: none;
}
@media (max-width: 820px) {
#editPage .delete-mobile-wrapper {
display: block !important;
margin-top: 1.5rem;
margin-bottom: 1.8rem;
}
#editPage .delete-mobile-wrapper .btn.danger {
display: flex !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
}
#editPage #openDeleteModal {
display: none !important;
}
}
@media (max-width: 750px) {
#editPage .delete-mobile-wrapper {
display: block !important;
margin-top: 1.5rem;
margin-bottom: 1.8rem;
}
#editPage .delete-mobile-wrapper .btn.danger {
display: flex !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
padding: 0.9rem 1rem !important;
font-size: 0.95rem !important;
border-radius: 12px !important;
background: #fff !important;
color: var(--red) !important;
border: 1px solid rgba(220, 38, 38, 0.25) !important;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08) !important;
transition:
background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
#editPage .delete-mobile-wrapper .btn.danger:hover {
background: rgba(220, 38, 38, 0.06) !important;
border-color: rgba(220, 38, 38, 0.4) !important;
box-shadow: 0 3px 8px rgba(220, 38, 38, 0.12) !important;
}
#editPage #openDeleteModal {
display: none !important;
}
#editPage .vehicle-card {
grid-template-columns: 1fr !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}
#editPage .edit-hero-card {
margin-bottom: 0 !important;
}
#editPage .edit-shell {
display: grid;
gap: 12px;
}
#editPage .edit-panel {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
#editPage .edit-hero-chips {
position: absolute;
top: 10px;
right: 10px;
left: auto;
bottom: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
flex-wrap: nowrap;
gap: 6px;
z-index: 3;
}
#editPage .edit-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 999px;
padding: 6px 10px;
border: 1px solid #dbe7f3;
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
backdrop-filter: blur(2px);
}
#editPage .edit-chip i,
#editPage .edit-chip svg {
width: 13px;
height: 13px;
}
#editPage .edit-chip--status.is-active {
border-color: #bbf7d0;
background: rgba(236, 253, 243, 0.94);
color: #166534;
}
#editPage .edit-chip--status.is-maintenance {
border-color: #fed7aa;
background: rgba(255, 247, 237, 0.94);
color: #9a3412;
}
#editPage .edit-chip--status.is-offroad,
#editPage .edit-chip--status.is-sold,
#editPage .edit-chip--status.is-unknown {
border-color: #cbd5e1;
background: rgba(241, 245, 249, 0.94);
color: #334155;
}
#editPage .edit-chip--connection.is-connected {
border-color: #bfdbfe;
background: rgba(239, 246, 255, 0.94);
color: #1e40af;
}
#editPage .edit-chip--connection.is-disconnected {
border-color: #fecaca;
background: rgba(254, 242, 242, 0.94);
color: #991b1b;
}
#editPage .vehicle-card .thumb {
max-height: 240px !important;
}
#editPage .edit-maintenance-heading--desktop {
display: flex !important;
align-items: center;
gap: 8px;
margin: 0 0 12px !important;
}
#editPage .edit-maintenance-heading--mobile {
display: none !important;
}
#editPage .edit-maintenance-subtitle--desktop {
display: none !important;
}
#editPage .vehicle-card .vehicle-photo {
height: auto !important;
max-height: 240px !important;
object-position: center !important;
display: block !important;
}
#editPage .vehicle-card .blinker-overlay {
height: 100% !important;
object-position: center !important;
}
#editPage .vehicle-info {
padding: 1.3rem 1.2rem 1.6rem !important;
background: #fff !important;
}
#editPage .edit-hero-head-wrap {
grid-template-columns: 48px minmax(0, 1fr);
gap: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
}
#editPage .edit-brand-logo {
width: 48px;
height: 48px;
border-radius: 12px;
}
#editPage .edit-hero-head h2 {
margin: 0;
font-size: 1.14rem;
line-height: 1.2;
}
#editPage .edit-hero-head p {
margin: 6px 0 0;
font-size: 0.82rem;
color: #64748b;
}
#editPage .edit-detail-list {
display: grid;
gap: 4px;
}
#editPage .vehicle-row {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
padding: 0.75rem 0.75rem !important;
margin: 0.25rem 0 !important;
border-radius: 12px !important;
background: #f8fafc !important;
}
#editPage .vehicle-row label {
font-size: 0.78rem !important;
font-weight: 600 !important;
color: #64748b !important;
margin: 0 !important;
padding: 0 !important;
flex: 0;
width: auto;
}
#editPage .vehicle-value {
font-size: 0.95rem !important;
justify-content: space-between !important;
padding-top: 2px !important;
width: 100% !important;
line-height: 1.25 !important;
margin: 0 !important;
}
#editPage .vehicle-value .value-text {
flex: 1 1 auto;
margin: 0 !important;
padding: 0 !important;
}
#editPage .edit-icon {
opacity: 1 !important;
transform: none !important;
width: 18px;
height: 18px;
}
#editPage #editForm .field--vehicle-documents,
#editPage .vehicle-documents-shell {
display: contents;
}
#editPage .edit-header-maintenance-btn {
display: inline-flex;
}
#editPage .vehicle-doc-card--maintenance {
display: none;
}
}
@media (min-width: 751px) {
#editPage .edit-maintenance-heading--mobile {
display: none;
}
#editPage .edit-maintenance-heading--desktop {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
}
#editPage .edit-maintenance-subtitle--desktop {
display: block;
}
#editPage #editForm .field--maintenance-only {
display: none;
}
#editPage #editForm .form-grid {
grid-template-columns: minmax(0, 1fr);
}
#editPage #editForm .field--vehicle-documents {
grid-column: 1 / -1;
}
}
@media (min-width: 751px) {
#editPage .edit-shell {
display: grid;
gap: 16px;
}
#editPage .edit-panel {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
#editPage .edit-hero-card {
margin: 0;
border-radius: 0;
box-shadow: none;
grid-template-columns: minmax(330px, 42%) minmax(0, 1fr);
min-height: 420px;
}
#editPage .edit-hero-media {
min-height: 420px;
background: #fff;
}
#editPage .edit-hero-media .vehicle-photo,
#editPage .edit-hero-media .blinker-overlay {
height: 100% !important;
object-fit: cover;
object-position: center right;
}
#editPage .edit-hero-chips {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
z-index: 3;
}
#editPage .edit-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 999px;
padding: 6px 10px;
border: 1px solid #dbe7f3;
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
backdrop-filter: blur(2px);
}
#editPage .edit-chip i,
#editPage .edit-chip svg {
width: 13px;
height: 13px;
}
#editPage .edit-chip--status.is-active {
border-color: #bbf7d0;
background: rgba(236, 253, 243, 0.94);
color: #166534;
}
#editPage .edit-chip--status.is-maintenance {
border-color: #fed7aa;
background: rgba(255, 247, 237, 0.94);
color: #9a3412;
}
#editPage .edit-chip--status.is-offroad,
#editPage .edit-chip--status.is-sold,
#editPage .edit-chip--status.is-unknown {
border-color: #cbd5e1;
background: rgba(241, 245, 249, 0.94);
color: #334155;
}
#editPage .edit-chip--connection.is-connected {
border-color: #bfdbfe;
background: rgba(239, 246, 255, 0.94);
color: #1e40af;
}
#editPage .edit-chip--connection.is-disconnected {
border-color: #fecaca;
background: rgba(254, 242, 242, 0.94);
color: #991b1b;
}
#editPage .edit-hero-info {
padding: 1.5rem 1.5rem 1.35rem;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#editPage .edit-hero-head-wrap {
grid-template-columns: 58px minmax(0, 1fr);
gap: 16px;
margin-bottom: 14px;
padding-bottom: 12px;
}
#editPage .edit-brand-logo {
width: 58px;
height: 58px;
}
#editPage .edit-hero-head h2 {
margin: 0;
font-size: 1.35rem;
line-height: 1.15;
color: #0f172a;
letter-spacing: -0.01em;
}
#editPage .edit-hero-head p {
margin: 6px 0 0;
font-size: 0.86rem;
color: #64748b;
}
#editPage .edit-detail-list {
display: grid;
gap: 6px;
}
#editPage .edit-detail-list .vehicle-row {
margin: 0;
padding: 0.6rem 0.65rem;
border-radius: 10px;
border: 1px solid transparent;
background: rgba(248, 250, 252, 0.74);
}
#editPage .edit-detail-list .vehicle-row:hover {
border-color: #dbe7f3;
background: #fff;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}
#editPage .edit-documents-panel {
margin-bottom: 0;
border: 1px solid #e2e8f0;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
border-radius: 14px;
}
#editPage .vehicle-doc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1621px) {
#editPage .vehicle-doc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas: none;
}
}
/* Locations page */
#locationsPage .table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
border-radius: 14px;
}
#locationsPage .table th,
#locationsPage .table td {
padding: 10px 12px;
border-bottom: 1px solid #eef2f7;
text-align: left;
}
#locationsPage .table th {
font-size: 12px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #667085;
}
/* Settings page */
#settingsPage {
--action: #1f6a44;
}
#settingsPage .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
vertical-align: middle;
line-height: 1.2;
}
#settingsPage .btn i,
#settingsPage .btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
display: block;
}
#settingsPage .btn .btn-label {
display: inline-block;
vertical-align: middle;
}
#settingsPage .btn.primary,
#settingsPage .btn.danger {
color: #fff;
}
#settingsPage .btn.primary:hover,
#settingsPage .btn.danger:hover {
opacity: 0.9;
}
#settingsPage .btn.ghost:hover i.feather-trash-2 {
color: var(--red);
}
#settingsPage .settings-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
}
#settingsPage .settings-tab {
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #334155;
border-radius: 10px;
padding: 8px 13px;
font-size: 0.86rem;
font-weight: 700;
cursor: pointer;
transition:
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease,
transform 0.16s ease;
}
#settingsPage .settings-tab:hover {
border-color: #9bc9ad;
transform: translateY(-1px);
}
#settingsPage .settings-tab.active {
border-color: #2f7b56;
background: #edf7f1;
color: #14532d;
}
#settingsPage .table-wrap {
overflow-x: auto;
}
#settingsPage .settings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
text-align: left;
}
#settingsPage .settings-table th,
#settingsPage .settings-table td {
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--border);
}
#settingsPage .settings-table th {
color: var(--muted);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.03em;
white-space: nowrap;
}
#settingsPage .settings-table td {
color: var(--text);
vertical-align: middle;
}
#settingsPage .settings-table tr:hover td {
background: #f9fafb;
}
#settingsPage .access-matrix .module-cell strong {
display: block;
font-size: 0.95rem;
margin-bottom: 2px;
}
#settingsPage .access-matrix .module-help {
font-size: 0.78rem;
color: #64748b;
}
#settingsPage .access-matrix .access-col {
text-align: center;
width: 118px;
}
#settingsPage .access-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
}
#settingsPage .access-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--action);
cursor: pointer;
}
#settingsPage .role-label {
display: inline-block;
padding: 4px 10px;
border-radius: 8px;
font-weight: 600;
font-size: 0.8rem;
text-transform: capitalize;
}
#settingsPage .role-label.admin,
#settingsPage .role-label.role-label--invite {
background: rgba(31, 106, 68, 0.12);
color: var(--action);
}
#settingsPage .role-label.mechanic {
background: rgba(22, 163, 74, 0.1);
color: var(--green);
}
#settingsPage .role-label.driver {
background: rgba(22, 101, 52, 0.12);
color: #166534;
}
#settingsPage .role-label.valid {
background: rgba(22, 163, 74, 0.1);
color: #16a34a;
}
#settingsPage .role-label.expired {
background: rgba(220, 38, 38, 0.1);
color: #dc2626;
}
#settingsPage .role-label.role-label--reset {
background: rgba(234, 179, 8, 0.1);
color: #b45309;
}
#settingsPage .profile-role-display {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
border: 1px solid var(--border);
border-radius: 12px;
background: #f8fafc;
padding: 12px;
}
#settingsPage .profile-role-display__icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #e2e8f0;
color: #334155;
}
#settingsPage .profile-role-display__icon svg {
width: 18px;
height: 18px;
}
#settingsPage .profile-role-display__text {
display: flex;
flex-direction: column;
gap: 2px;
}
#settingsPage .profile-role-display__text strong {
font-size: 0.95rem;
color: #0f172a;
}
#settingsPage .profile-role-display__text small {
font-size: 0.78rem;
color: #64748b;
}
#settingsPage .profile-role-display--admin .profile-role-display__icon {
background: rgba(21, 128, 61, 0.14);
color: #166534;
}
#settingsPage .profile-role-display--mechanic .profile-role-display__icon {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
}
#settingsPage .form-grid {
display: grid;
gap: 1.2rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
#settingsPage .alert-settings-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
}
#settingsPage .settings-paragraph {
margin: 4px 0 0;
color: #64748b;
font-size: 0.9rem;
line-height: 1.4;
}
#settingsPage .settings-paragraph--topless {
margin-top: 0;
}
#settingsPage .alert-settings-form {
display: grid;
gap: 1rem;
}
#settingsPage .alert-settings-form--stacked {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #e2e8f0;
}
#settingsPage .alert-settings-layout {
display: grid;
grid-template-columns: repeat(2, minmax(280px, 1fr));
gap: 12px;
}
#settingsPage .alert-group-card {
background: #fff;
border: 1px solid #dbe1ea;
border-radius: 12px;
padding: 14px;
grid-column: 1 / -1;
}
#settingsPage .alert-group-card h3 {
margin: 0;
font-size: 0.95rem;
}
#settingsPage .alert-group-card .settings-help {
margin: 6px 0 12px;
}
#settingsPage .alert-group-card--full {
grid-column: 1 / -1;
}
#settingsPage .settings-grid-two {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 10px;
}
#settingsPage .settings-grid-two--wide {
grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr);
}
#settingsPage .settings-grid-three {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 10px;
}
#settingsPage .alert-settings-form .field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
#settingsPage .alert-settings-form .field label {
font-size: 0.85rem;
font-weight: 600;
color: #334155;
}
#settingsPage .alert-settings-form .field input,
#settingsPage .alert-settings-form .field select,
#settingsPage .alert-settings-form .field textarea {
font-size: 0.95rem;
width: 100%;
}
#settingsPage .alert-settings-form .field textarea {
min-height: 132px;
resize: vertical;
line-height: 1.5;
}
#settingsPage .alert-settings-form .field input:focus,
#settingsPage .alert-settings-form .field select:focus,
#settingsPage .alert-settings-form .field textarea:focus {
outline: none;
}
#settingsPage .input-with-unit {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
#settingsPage .input-with-unit:focus-within {
border-color: var(--action);
box-shadow: 0 0 0 3px rgba(31, 106, 68, 0.16);
}
#settingsPage .input-with-unit input {
border: none;
padding: 0.8rem 0.75rem;
border-radius: 10px;
width: 100%;
min-width: 0;
}
#settingsPage .input-with-unit input:focus {
outline: none;
box-shadow: none;
}
#settingsPage .input-with-unit span {
font-size: 0.8rem;
color: #64748b;
font-weight: 600;
padding: 0 10px;
border-left: 1px solid #e5e7eb;
}
#settingsPage .alert-settings-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-top: 4px;
}
#settingsPage .settings-help {
font-size: 0.78rem;
color: var(--muted);
}
#settingsPage .settings-token-panel {
margin-top: 14px;
padding: 14px;
border-radius: 12px;
border: 1px dashed #cbd5e1;
background: #f8fbff;
display: grid;
gap: 10px;
}
#settingsPage .settings-token-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#settingsPage .settings-token-panel__head strong {
font-size: 0.84rem;
color: #0f172a;
}
#settingsPage .settings-token-panel__head span {
font-size: 0.76rem;
color: #64748b;
font-weight: 700;
}
#settingsPage .settings-template-editor {
position: relative;
border: 1px solid #d7e0eb;
border-radius: 10px;
background: #fff;
overflow: visible;
}
#settingsPage .settings-template-editor:focus-within {
border-color: #0ea5e9;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}
#settingsPage .settings-template-editor__preview {
position: absolute;
inset: 0;
z-index: 1;
overflow: auto;
padding: 0.8rem 0.85rem;
border: 0;
border-radius: 0;
background: transparent;
color: #334155;
font-size: 0.95rem;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
pointer-events: none;
}
#settingsPage .settings-template-editor textarea.is-templated {
position: relative;
z-index: 2;
background: transparent;
border: 0;
box-shadow: none;
color: transparent;
caret-color: #0f172a;
}
#settingsPage .settings-template-editor textarea.is-templated:focus {
border: 0;
box-shadow: none;
}
#settingsPage .settings-template-editor textarea.is-templated::placeholder {
color: #94a3b8;
}
#settingsPage .settings-template-tag {
padding: 0;
border-radius: 4px;
background: rgba(37, 99, 235, 0.14);
color: #1d4ed8;
font-weight: inherit;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}
#settingsPage .settings-hashtag-dropdown {
position: absolute;
z-index: 6;
min-width: 220px;
max-width: min(280px, calc(100% - 16px));
max-height: min(280px, 45vh);
display: grid;
gap: 4px;
padding: 6px;
border: 1px solid #cfd9e6;
border-radius: 10px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
overflow-y: auto;
overscroll-behavior: contain;
}
#settingsPage .settings-hashtag-dropdown.is-hidden {
display: none;
}
#settingsPage .settings-hashtag-option {
display: grid;
gap: 2px;
width: 100%;
padding: 7px 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: #0f172a;
text-align: left;
cursor: pointer;
transition:
background-color 180ms ease,
transform 180ms ease;
}
#settingsPage .settings-hashtag-option strong {
font-size: 0.78rem;
color: #2563eb;
}
#settingsPage .settings-hashtag-option span {
font-size: 0.72rem;
color: #64748b;
}
#settingsPage .settings-hashtag-option:hover,
#settingsPage .settings-hashtag-option.is-active {
background: rgba(37, 99, 235, 0.08);
transform: translateY(-1px);
}
#settingsPage .settings-token-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#settingsPage .settings-token-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid #d8e3f0;
background: #ffffff;
color: #334155;
font-size: 0.76rem;
}
#settingsPage .settings-token-pill code {
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
font-size: 0.74rem;
font-weight: 700;
color: #0369a1;
}
#settingsPage .settings-sensitive-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
#settingsPage .settings-sensitive-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
#settingsPage .settings-sensitive-badge--ok {
color: #166534;
background: rgba(220, 252, 231, 0.95);
}
#settingsPage .settings-sensitive-badge--pending {
color: #92400e;
background: rgba(254, 243, 199, 0.95);
}
#settingsPage .settings-credentials-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#settingsPage .settings-secret-card {
display: grid;
gap: 12px;
padding: 14px;
border-radius: 14px;
border: 1px solid #dbe4ee;
background: linear-gradient(
180deg,
rgba(248, 250, 252, 0.96) 0%,
rgba(255, 255, 255, 1) 100%
);
}
#settingsPage .settings-secret-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#settingsPage .settings-secret-card__head h4 {
margin: 0;
font-size: 0.92rem;
color: #0f172a;
}
#settingsPage .settings-secret-card__head span {
font-size: 0.74rem;
font-weight: 700;
color: #64748b;
}
#settingsPage .form-grid input,
#settingsPage .form-grid select {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.85rem 0.9rem;
font-size: 0.95rem;
width: 100%;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
#settingsPage .form-grid .field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
padding-right: 2.2rem;
}
#settingsPage .form-grid .field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
#settingsPage .form-grid .field label,
#settingsPage .form-grid .field .field-label {
font-size: 0.85rem;
font-weight: 600;
color: #334155;
}
#settingsPage .form-grid .field--full {
grid-column: 1 / -1;
}
#settingsPage .add-user-grid {
grid-template-columns: repeat(2, minmax(260px, 1fr));
grid-template-areas:
"first-name last-name"
"email password"
"role role"
"language language"
"submit submit";
}
#settingsPage .add-user-grid .field--first-name {
grid-area: first-name;
}
#settingsPage .add-user-grid .field--last-name {
grid-area: last-name;
}
#settingsPage .add-user-grid .field--email {
grid-area: email;
}
#settingsPage .add-user-grid .field--password {
grid-area: password;
}
#settingsPage .add-user-grid .settings-input-with-actions {
position: relative;
display: flex;
align-items: center;
}
#settingsPage .add-user-grid .settings-input-with-actions input {
display: block;
width: 100%;
padding-right: 74px;
}
#settingsPage .add-user-grid .settings-input-action-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border: 1px solid #dbe4f2;
border-radius: 7px;
background: #f8fafc;
color: #334155;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
line-height: 1;
padding: 0;
cursor: pointer;
transition:
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease;
}
#settingsPage .add-user-grid #add_password_generate {
right: 38px;
}
#settingsPage .add-user-grid #add_password_toggle {
right: 8px;
}
#settingsPage .add-user-grid .settings-input-action-btn:hover {
border-color: #9bc9ad;
background: #edf7f1;
color: #14532d;
}
#settingsPage .add-user-grid .settings-input-action-btn:focus-visible {
outline: 2px solid #166534;
outline-offset: 2px;
}
#settingsPage .add-user-grid .settings-input-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
}
#settingsPage .add-user-grid .settings-input-action-btn svg {
width: 14px;
height: 14px;
}
#settingsPage .add-user-grid .settings-input-icon-wrap.is-hidden {
display: none;
}
#settingsPage .add-user-grid .field--role {
grid-area: role;
}
#settingsPage .add-user-grid .field--language {
grid-area: language;
}
#settingsPage .add-user-grid > button[type="submit"] {
grid-area: submit;
}
#settingsPage .add-user-grid .settings-role-selector {
display: grid;
grid-template-columns: repeat(var(--role-count, 2), minmax(0, 1fr));
width: 100%;
}
#settingsPage .add-user-grid .settings-role-option {
display: block;
width: 100%;
}
#settingsPage .add-user-grid .settings-role-option span {
width: 100%;
min-width: 0;
}
#settingsPage .settings-role-selector {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#settingsPage .settings-role-option {
position: relative;
}
#settingsPage .settings-role-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
#settingsPage .settings-role-option span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 116px;
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #f8fafc;
color: #334155;
padding: 0.58rem 0.95rem;
font-size: 0.86rem;
font-weight: 700;
cursor: pointer;
transition:
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease,
transform 0.16s ease,
box-shadow 0.16s ease;
}
#settingsPage .settings-role-option span:hover {
border-color: #9bc9ad;
transform: translateY(-1px);
}
#settingsPage .settings-role-option input[type="radio"]:checked + span {
border-color: #2f7b56;
background: #edf7f1;
color: #14532d;
box-shadow: 0 0 0 1px rgba(31, 106, 68, 0.2);
}
#settingsPage .settings-role-option input[type="radio"]:focus-visible + span {
outline: 2px solid #166534;
outline-offset: 2px;
}
#settingsPage .alert-settings-form select {
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.8rem 0.9rem;
font-size: 0.95rem;
width: 100%;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
#settingsPage .form-grid input:focus,
#settingsPage .form-grid select:focus,
#settingsPage .alert-settings-form select:focus {
border-color: var(--action);
box-shadow: 0 0 0 3px rgba(31, 106, 68, 0.16);
outline: none;
}
#settingsPage .form-grid button {
grid-column: 1 / -1;
justify-self: start;
margin-top: 0.4rem;
}
#settingsPage .alert {
padding: 0.9rem 1.1rem;
border-radius: var(--radius);
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
margin-bottom: 1rem;
animation: settingsFadeIn 0.3s ease;
}
#settingsPage .alert.success {
background: #ecfdf5;
border: 1px solid #6ee7b7;
color: #065f46;
}
#settingsPage .alert.error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
@keyframes settingsFadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 720px) {
.purge-form {
position: static;
margin-top: 1rem;
margin-bottom: 0;
width: 100%;
justify-content: stretch;
}
.purge-form .btn {
width: 100%;
justify-content: center;
}
#settingsPage .settings-password-resets {
display: flex;
flex-direction: column;
}
#settingsPage .settings-password-resets .table-wrap {
order: 2;
}
#settingsPage .settings-password-resets .purge-form {
order: 3;
margin-top: 12px;
}
#settingsPage .settings-table th,
#settingsPage .settings-table td {
padding: 0.6rem;
font-size: 0.9rem;
}
#settingsPage .form-grid {
grid-template-columns: 1fr;
}
#settingsPage .add-user-grid {
grid-template-columns: 1fr;
grid-template-areas:
"first-name"
"last-name"
"email"
"password"
"role"
"language"
"submit";
}
#settingsPage .add-user-grid .settings-role-selector {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#settingsPage .alert-settings-head {
flex-direction: column;
align-items: flex-start;
}
#settingsPage .settings-grid-two {
grid-template-columns: 1fr;
}
#settingsPage .settings-grid-two--wide {
grid-template-columns: 1fr;
}
#settingsPage .settings-grid-three {
grid-template-columns: 1fr;
}
#settingsPage .alert-settings-actions {
flex-direction: column;
align-items: stretch;
}
#settingsPage .alert-settings-actions .btn {
width: 100%;
}
#settingsPage .form-grid button {
width: 100%;
justify-self: stretch;
}
}
@media (max-width: 950px) {
#settingsPage .alert-settings-layout {
grid-template-columns: 1fr;
}
}
/* Maintenance page */
#maintenancePage .vehicle-card.small {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #dbe7f3;
border-radius: 16px;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
overflow: hidden;
display: grid;
grid-template-columns: minmax(280px, 1.08fr) minmax(0, 1.92fr);
align-items: stretch;
margin-bottom: 1.6rem;
}
#maintenancePage .vehicle-card.small .vehicle-photo {
width: 100%;
height: 100%;
object-fit: cover;
background: #f3f4f6;
object-position: center right;
opacity: 1;
transform: none;
animation: vehicleImageRevealMaintenance 0.8s ease both;
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
#maintenancePage .vehicle-card.small .vehicle-photo.loaded {
opacity: 1;
transform: translateX(0);
}
#maintenancePage .vehicle-card.small .blinker-overlay {
object-position: center right;
opacity: 1;
transform: none;
animation:
vehicleImageRevealMaintenance 0.8s ease both,
blinkerReal var(--blink-duration, 1.1s) infinite;
animation-delay: 0s, var(--blink-delay, 0s);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
#maintenancePage .vehicle-card.small .blinker-overlay.loaded {
opacity: 1;
transform: translateX(0);
}
#maintenancePage .vehicle-card.small .thumb {
height: 100%;
}
#maintenancePage .vehicle-card.small .vehicle-info {
padding: 1.25rem 1.35rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#maintenancePage .vehicle-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
#maintenancePage .vehicle-card.small h2 {
margin: 0;
font-size: 1.22rem;
color: #0f172a;
font-weight: 800;
letter-spacing: -0.01em;
}
#maintenancePage .meta-line {
margin-top: 5px;
font-size: 0.82rem;
color: var(--muted);
display: flex;
flex-wrap: wrap;
gap: 4px 9px;
align-items: center;
}
#maintenancePage .meta-line .dot {
opacity: 0.6;
}
#maintenancePage .fuel,
#maintenancePage .year {
font-weight: 500;
}
#maintenancePage .service-badge {
padding: 4px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
#maintenancePage .service-badge.ok {
background: #ecfdf5;
color: var(--green);
border-color: rgba(22, 163, 74, 0.3);
}
#maintenancePage .service-badge.overdue {
background: #fef2f2;
color: var(--red);
border-color: rgba(220, 38, 38, 0.3);
}
#maintenancePage .km-row {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
margin-top: 4px;
}
#maintenancePage .km-block label {
display: block;
font-size: 0.75rem;
color: var(--muted);
margin-bottom: 2px;
}
#maintenancePage .km-block strong {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}
#maintenancePage .km-titles {
display: flex;
}
#maintenancePage .km-values-mobile {
display: flex;
}
@media (min-width: 751px) {
#maintenancePage .km-values-mobile {
display: none;
}
}
@media (max-width: 750px) {
#maintenancePage .km-progress-header {
display: none;
}
}
#maintenancePage .service-progress {
margin-top: 10px;
}
#maintenancePage .service-progress-bar {
position: relative;
width: 100%;
height: 9px;
background: #dfe7f2;
border-radius: 999px;
overflow: hidden;
}
#maintenancePage .service-progress-fill {
position: absolute;
inset: 0;
width: 0;
background: var(--green);
transition: width 0.35s ease;
}
#maintenancePage .service-progress-bar.warn .service-progress-fill {
background: var(--orange);
}
#maintenancePage .service-progress-bar.overdue .service-progress-fill {
background: var(--red);
}
#maintenancePage .service-progress-meta {
margin-top: 6px;
font-size: 0.76rem;
color: var(--muted);
}
#maintenancePage .service-progress-meta .danger {
color: var(--red);
font-weight: 600;
}
#maintenancePage .km-header {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-top: 10px;
margin-bottom: 6px;
}
#maintenancePage .km-col {
display: flex;
flex-direction: column;
padding: 9px 10px;
border: 1px solid rgba(203, 213, 225, 0.8);
border-radius: 11px;
background: rgba(255, 255, 255, 0.72);
}
#maintenancePage .km-col label {
font-size: 0.7rem;
color: var(--muted);
margin-bottom: 3px;
}
#maintenancePage .km-col strong {
font-size: 0.98rem;
font-weight: 700;
color: var(--text);
}
#maintenancePage .km-col.text-right {
text-align: right;
}
@media (max-width: 750px) {
#maintenancePage .vehicle-card.small {
grid-template-columns: 1fr;
border-radius: 16px;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
#maintenancePage .vehicle-card.small .vehicle-photo {
width: 100%;
height: auto;
max-height: 240px;
object-position: center;
}
#maintenancePage .vehicle-card.small .vehicle-info {
padding: 1.1rem 1rem 1.2rem;
background: #fff;
}
#maintenancePage .vehicle-header-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
#maintenancePage .km-header {
grid-template-columns: minmax(0, 1fr);
}
#maintenancePage .km-col.text-right {
text-align: left;
}
}
#maintenancePage .status-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 1rem 0;
}
@media (min-width: 760px) {
#maintenancePage .status-tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1240px) {
#maintenancePage .status-tiles {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
#maintenancePage .tile {
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 18px 10px 10px;
cursor: pointer;
color: inherit;
text-decoration: none;
transition: transform 0.15s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
#maintenancePage .tile:hover {
transform: translateY(-2px);
}
#maintenancePage .tile i {
width: 28px;
height: 28px;
margin-bottom: 6px;
}
#maintenancePage .tile strong {
font-size: 0.9rem;
margin-bottom: 4px;
}
#maintenancePage .tile-footer {
width: 100%;
text-align: center;
font-size: 0.8rem;
font-weight: 600;
border-top: 1px solid #e5e7eb;
padding-top: 6px;
margin-top: 6px;
color: var(--muted);
}
#maintenancePage .tile.good .tile-footer {
color: var(--green);
}
#maintenancePage .tile.warn .tile-footer {
color: var(--orange);
}
#maintenancePage .tile.bad .tile-footer {
color: var(--red);
}
#maintenancePage .alert.success {
background: #ecfdf5;
border: 1px solid #6ee7b7;
color: #065f46;
}
#maintenancePage .quickform {
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem 1.25rem;
margin-bottom: 1.2rem;
display: none;
}
#maintenancePage .quickform.active {
display: block;
animation: maintenanceFadeIn 0.25s ease;
}
@keyframes vehicleImageRevealEdit {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes vehicleImageRevealMaintenance {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
#maintenancePage .quickform-title {
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
#maintenancePage .quickform-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#maintenancePage [data-quickform-toggle] svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
}
#maintenancePage .quickform.is-expanded [data-quickform-toggle] {
display: none !important;
}
#maintenancePage .quickform-body {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #dbe4f2;
}
@media (max-width: 620px) {
#maintenancePage .quickform-head {
flex-wrap: wrap;
align-items: flex-start;
}
}
#maintenancePage .quickform .field {
margin-bottom: 0.7rem;
}
#maintenancePage .quickform label {
display: block;
font-weight: 600;
margin-bottom: 3px;
}
#maintenancePage .quickform input,
#maintenancePage .quickform textarea {
width: 100%;
max-width: 100%;
min-width: 0;
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px;
box-sizing: border-box;
}
#maintenancePage .quickform .input-with-action > input {
padding-right: 44px;
}
#maintenancePage .quickform .input-with-action--suggestion > input {
padding-right: 110px;
}
#maintenancePage .quickform .input-with-action--live > input {
padding-left: 34px;
}
#maintenancePage .quickform .input-action-btn--suggestion {
width: auto;
min-width: 88px;
height: 26px;
padding: 0 10px;
border: 1px solid rgba(37, 99, 235, 0.18);
border-radius: 999px;
background: rgba(37, 99, 235, 0.08);
color: #1d4ed8;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.01em;
}
#maintenancePage .quickform .input-action-btn--suggestion:hover {
background: rgba(37, 99, 235, 0.14);
color: #1e3a8a;
}
@media (max-width: 480px) {
#maintenancePage .quickform .input-with-action--suggestion > input {
padding-right: 98px;
}
#maintenancePage .quickform .input-action-btn--suggestion {
min-width: 78px;
padding: 0 8px;
font-size: 0.7rem;
}
}
#maintenancePage .quickform-submit {
margin-top: 6px;
}
#maintenancePage .maintenance-action-context {
--context-preview-height: 160px;
margin: 0.85rem 0 1rem;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
#maintenancePage .maintenance-action-context[hidden] {
display: none !important;
}
#maintenancePage .maintenance-action-context__head {
display: grid;
gap: 3px;
}
#maintenancePage .maintenance-action-context__eyebrow {
margin: 0;
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 700;
color: #475569;
}
#maintenancePage .maintenance-action-context__title {
margin: 0;
font-size: 1rem;
color: #0f172a;
}
#maintenancePage .maintenance-action-context__metrics {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: minmax(0, 1fr);
gap: 8px;
}
#maintenancePage .maintenance-action-context__metric {
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
padding: 8px 9px;
display: grid;
gap: 3px;
}
#maintenancePage .maintenance-action-context__metric-label {
font-size: 0.72rem;
color: #64748b;
line-height: 1.2;
}
#maintenancePage .maintenance-action-context__metric-value {
font-size: 0.86rem;
color: #0f172a;
line-height: 1.25;
}
#maintenancePage .maintenance-action-context__metric-value.is-good {
color: var(--green);
}
#maintenancePage .maintenance-action-context__metric-value.is-warn {
color: var(--orange);
}
#maintenancePage .maintenance-action-context__metric-value.is-bad {
color: var(--red);
}
#maintenancePage .maintenance-action-context__document {
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #fff;
padding: 8px;
display: grid;
gap: 6px;
}
#maintenancePage .maintenance-action-context__document[hidden] {
display: none !important;
}
#maintenancePage .maintenance-action-context__doc-title {
margin: 0;
font-weight: 700;
color: #0f172a;
font-size: 0.84rem;
}
#maintenancePage .maintenance-action-context__preview {
height: var(--context-preview-height);
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #f8fafc;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#maintenancePage .maintenance-action-context__preview a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
cursor: zoom-in;
}
#maintenancePage .maintenance-action-context__preview img {
width: 100%;
height: 100%;
object-fit: contain;
background: #eef2f7;
}
#maintenancePage .maintenance-action-context__preview.is-empty {
border-style: dashed;
background: #f8fafc;
}
#maintenancePage .maintenance-action-context__empty {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.8rem;
color: #64748b;
text-align: center;
}
@media (min-width: 700px) {
#maintenancePage .maintenance-action-context__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1040px) {
#maintenancePage .maintenance-action-context {
--context-preview-height: 240px;
grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.45fr);
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas:
"head document"
"metrics document";
align-items: stretch;
}
#maintenancePage .maintenance-action-context__head {
grid-area: head;
}
#maintenancePage .maintenance-action-context__metrics {
grid-area: metrics;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: repeat(3, minmax(0, 1fr));
height: 100%;
min-height: 0;
}
#maintenancePage .maintenance-action-context__metric {
align-content: center;
}
#maintenancePage .maintenance-action-context__document {
grid-area: document;
align-self: stretch;
}
}
#maintenancePage .maintenance-history__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
#maintenancePage .maintenance-history__head h2 {
margin: 0;
}
#maintenancePage .maintenance-history__count {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #334155;
padding: 4px 10px;
font-size: 0.74rem;
font-weight: 700;
white-space: nowrap;
}
#maintenancePage .history-list {
display: grid;
gap: 12px;
}
#maintenancePage .history-empty {
border: 1px dashed #cbd5e1;
border-radius: 14px;
background: #f8fafc;
padding: 18px 16px;
display: grid;
place-items: center;
gap: 8px;
text-align: center;
color: #64748b;
}
#maintenancePage .history-empty p {
margin: 0;
}
#maintenancePage .history-empty i,
#maintenancePage .history-empty svg {
width: 18px;
height: 18px;
}
#maintenancePage .history-item {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
#maintenancePage .history-item:not(:last-child)::after {
content: "";
position: absolute;
left: 21px;
top: 48px;
bottom: -12px;
width: 2px;
background: linear-gradient(180deg, #dbe4f2 0%, rgba(219, 228, 242, 0) 100%);
}
#maintenancePage .history-icon {
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #1d4ed8;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
}
#maintenancePage .history-icon i,
#maintenancePage .history-icon svg {
width: 18px;
height: 18px;
}
#maintenancePage .history-item--service .history-icon {
border-color: #99f6e4;
background: #ecfeff;
color: #0f766e;
}
#maintenancePage .history-item--inspection .history-icon {
border-color: #bbf7d0;
background: #f0fdf4;
color: #15803d;
}
#maintenancePage .history-item--insurance .history-icon {
border-color: #bfdbfe;
background: #eff6ff;
color: #1d4ed8;
}
#maintenancePage .history-item--license .history-icon {
border-color: #fde68a;
background: #fffbeb;
color: #b45309;
}
#maintenancePage .history-item--repair .history-icon {
border-color: #fecaca;
background: #fef2f2;
color: #b91c1c;
}
#maintenancePage .history-item--modification .history-icon {
border-color: #cbd5e1;
background: #f8fafc;
color: #334155;
}
#maintenancePage .history-main {
border: 1px solid #e2e8f0;
border-radius: 14px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
padding: 11px 12px;
display: grid;
gap: 10px;
}
#maintenancePage .history-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
#maintenancePage .history-title {
margin: 0;
font-size: 0.95rem;
font-weight: 800;
color: #0f172a;
line-height: 1.25;
}
#maintenancePage .history-date {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid #dbe4f2;
background: #f8fafc;
padding: 4px 9px;
font-size: 0.74rem;
font-weight: 700;
color: #334155;
white-space: nowrap;
}
#maintenancePage .history-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#maintenancePage .history-chip {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
border: 1px solid #dbe4f2;
background: #fff;
padding: 3px 9px;
font-size: 0.76rem;
color: #334155;
font-weight: 600;
}
#maintenancePage .history-chip i,
#maintenancePage .history-chip svg {
width: 14px;
height: 14px;
color: #64748b;
}
#maintenancePage .history-details {
border: 1px dashed #cbd5e1;
border-radius: 10px;
background: #f8fafc;
padding: 8px 9px;
color: #1e293b;
font-size: 0.84rem;
line-height: 1.45;
}
#maintenancePage .history-next-list {
display: grid;
gap: 7px;
}
#maintenancePage .history-next {
border: 1px solid #bfdbfe;
border-radius: 10px;
background: #eff6ff;
color: #1e3a8a;
padding: 7px 9px;
font-size: 0.8rem;
}
#maintenancePage .history-next strong {
color: #1e40af;
}
@media (max-width: 760px) {
#maintenancePage .maintenance-history__count {
display: none;
}
#maintenancePage .maintenance-history__head {
flex-direction: column;
align-items: flex-start;
}
#maintenancePage .history-item {
position: relative;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
#maintenancePage .history-item::after {
display: none;
}
#maintenancePage .history-icon {
position: absolute;
top: 10px;
right: 10px;
width: 34px;
height: 34px;
border-radius: 10px;
}
#maintenancePage .history-main {
padding-right: 12px;
}
#maintenancePage .history-header,
#maintenancePage .history-meta,
#maintenancePage .history-details {
padding-right: 38px;
}
#maintenancePage .history-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
@media (max-width: 560px) {
#maintenancePage .maintenance-action-context {
padding: 0.75rem 0.8rem;
--context-preview-height: 120px;
}
}
#maintenancePage .maintenance-document-field {
margin-top: 10px;
padding: 12px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
display: grid;
gap: 10px;
}
#maintenancePage .maintenance-doc-title {
margin: 0;
font-weight: 700;
color: #0f172a;
}
#maintenancePage .maintenance-doc-preview {
height: 150px;
border: 1px dashed #cbd5e1;
border-radius: 10px;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#maintenancePage .maintenance-doc-preview.has-image {
border-style: solid;
}
#maintenancePage .maintenance-doc-preview a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
cursor: zoom-in;
}
#maintenancePage .maintenance-doc-preview img {
width: 100%;
height: 100%;
object-fit: contain;
background: #f1f5f9;
}
#maintenancePage .maintenance-doc-preview-note {
margin: 0;
font-size: 0.78rem;
color: #64748b;
}
#maintenancePage .maintenance-doc-empty {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #64748b;
font-size: 0.8rem;
}
#maintenancePage .maintenance-doc-empty small {
font-size: 0.72rem;
color: #475569;
max-width: 100%;
word-break: break-word;
text-align: center;
line-height: 1.2;
}
#maintenancePage .maintenance-doc-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
@media (max-width: 740px) {
#maintenancePage .maintenance-doc-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#maintenancePage .maintenance-doc-preview {
height: 132px;
}
}
#maintenancePage .quickform .maintenance-doc-upload-btn {
position: relative;
overflow: hidden;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 8px;
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
min-height: 42px;
padding: 8px 10px;
cursor: pointer;
transition:
border-color 0.16s ease,
background 0.16s ease;
margin: 0;
color: inherit;
}
#maintenancePage .quickform .maintenance-doc-upload-btn--button {
text-align: left;
font: inherit;
width: 100%;
}
#maintenancePage .quickform .maintenance-doc-upload-btn:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
#maintenancePage .quickform .maintenance-doc-upload-btn i {
width: 16px;
height: 16px;
color: #475569;
}
#maintenancePage .quickform .maintenance-doc-upload-btn span {
font-weight: 600;
font-size: 0.82rem;
line-height: 1;
}
#maintenancePage .quickform .maintenance-doc-upload-btn small {
display: none;
}
#maintenancePage .quickform .maintenance-doc-upload-btn input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
#maintenancePage .quickform .maintenance-doc-upload-btn--camera {
background: #f8fafc;
}
#maintenancePage .quickform .maintenance-doc-upload-btn.is-disabled {
opacity: 0.6;
pointer-events: none;
transform: none;
}
#maintenancePage .quickform .maintenance-doc-upload-btn:disabled {
opacity: 0.6;
pointer-events: none;
transform: none;
}
#maintenancePage .maintenance-doc-help {
margin: 0;
color: var(--muted);
font-size: 0.8rem;
}
#maintenancePage .maintenance-mobile-modal .maintenance-mobile-modal__content {
width: min(96vw, 460px);
max-width: 460px;
text-align: left;
}
#maintenancePage .maintenance-mobile-modal__qr-wrap {
margin-top: 8px;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
}
#maintenancePage .maintenance-mobile-modal__qr-layer {
width: 220px;
height: 220px;
max-width: 100%;
position: relative;
}
#maintenancePage #vehicleDocumentMobileQr {
width: 220px;
height: 220px;
max-width: 100%;
border-radius: 8px;
background: #fff;
}
#maintenancePage .maintenance-mobile-modal__copy-btn {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.16s ease;
}
#maintenancePage
.maintenance-mobile-modal__qr-layer.is-copy-ready:hover
.maintenance-mobile-modal__copy-btn,
#maintenancePage .maintenance-mobile-modal__copy-btn:focus-visible {
opacity: 1;
pointer-events: auto;
}
#maintenancePage .maintenance-mobile-modal__copy-btn[disabled] {
display: none;
}
#maintenancePage .maintenance-mobile-modal__link[hidden],
#maintenancePage .maintenance-mobile-modal__qr-wrap[hidden],
#maintenancePage .maintenance-mobile-modal__review[hidden] {
display: none !important;
}
#maintenancePage .maintenance-mobile-modal__link {
display: block;
margin-top: 12px;
font-size: 0.8rem;
color: #1d4ed8;
word-break: break-all;
}
#maintenancePage .maintenance-mobile-modal__status {
margin-top: 10px;
border-radius: 10px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #334155;
padding: 9px 10px;
font-size: 0.85rem;
font-weight: 600;
}
#maintenancePage .maintenance-mobile-modal__status.is-success {
border-color: #86efac;
background: #ecfdf5;
color: #166534;
}
#maintenancePage .maintenance-mobile-modal__status.is-error {
border-color: #fdba74;
background: #fff7ed;
color: #9a3412;
}
#maintenancePage .maintenance-mobile-modal__review {
margin-top: 10px;
display: grid;
gap: 10px;
}
#maintenancePage .maintenance-mobile-modal__review-preview {
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#maintenancePage .maintenance-mobile-modal__review-preview img {
display: block;
width: 100%;
max-height: 52vh;
object-fit: contain;
background: #fff;
}
@keyframes maintenanceFadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: none;
}
}
#maintenancePage .timeline {
display: flex;
flex-direction: column;
gap: 8px;
}
#maintenancePage .log-item {
display: flex;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
#maintenancePage .log-item i {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 4px;
}
#maintenancePage .log-item h4 {
margin: 0;
font-size: 0.95rem;
}
#maintenancePage .log-item small {
color: var(--muted);
}
/* Driver costs page */
#driverCostsPage .alert.success {
background: #ecfdf5;
border: 1px solid #86efac;
color: #166534;
}
#driverCostsPage .driver-costs-form-card {
position: static;
top: auto;
}
#driverCostsPage .driver-costs-main {
display: flex;
flex-direction: column;
}
#driverCostsPage .driver-costs-form-card {
order: 1;
}
#driverCostsPage .driver-costs-list-card {
order: 2;
}
#driverCostsPage[data-is-admin="1"] .driver-costs-list-card {
order: 1;
}
#driverCostsPage[data-is-admin="1"] .driver-costs-form-card {
order: 2;
}
#driverCostsPage .driver-costs-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
#driverCostsPage .driver-costs-kicker span {
display: inline-block;
border-radius: 999px;
padding: 4px 10px;
background: #dcfce7;
color: #166534;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#driverCostsPage .driver-costs-kicker small {
color: var(--muted);
font-size: 0.82rem;
font-weight: 600;
}
#driverCostsPage .driver-costs-upload-wrap {
margin-top: 10px;
padding: 12px;
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
}
#driverCostsPage .driver-costs-type-buttons {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#driverCostsPage .driver-costs-type-btn {
border: 1px solid #dbe4f2;
background: #fff;
color: #1e293b;
border-radius: 10px;
min-height: 42px;
padding: 8px 10px;
font-size: 0.86rem;
font-weight: 700;
cursor: pointer;
transition:
border-color 0.14s ease,
background 0.14s ease,
transform 0.14s ease;
}
#driverCostsPage .driver-costs-type-btn:hover {
border-color: #93c5fd;
transform: translateY(-1px);
}
#driverCostsPage .driver-costs-type-btn.active {
border-color: #1d4ed8;
background: #eff6ff;
color: #1e40af;
}
#driverCostsPage .driver-costs-other-wrap.is-hidden {
display: none;
}
#driverCostsPage .driver-costs-vehicle-trigger {
width: 100%;
min-height: 48px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
text-align: left;
transition:
border-color 0.16s ease,
transform 0.16s ease;
}
#driverCostsPage .driver-costs-vehicle-trigger:hover {
border-color: #93c5fd;
transform: translateY(-1px);
}
#driverCostsPage .driver-costs-vehicle-trigger:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
#driverCostsPage .driver-costs-vehicle-trigger i {
width: 18px;
height: 18px;
color: #475569;
}
#driverCostsPage .driver-costs-vehicle-trigger__text {
min-width: 0;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#driverCostsPage .driver-costs-vehicle-trigger__placeholder {
font-size: 0.78rem;
color: #64748b;
font-weight: 700;
}
#driverCostsPage .driver-costs-vehicle-modal .modal-content {
width: min(760px, 94vw);
max-width: 760px;
max-height: 88vh;
padding: 14px;
text-align: left;
display: flex;
flex-direction: column;
gap: 12px;
}
#driverCostsPage .driver-costs-vehicle-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#driverCostsPage .driver-costs-vehicle-modal__head h3 {
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1rem;
}
#driverCostsPage .driver-costs-vehicle-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 52vh;
overflow: auto;
padding-right: 2px;
}
#driverCostsPage .driver-costs-vehicle-option {
width: 100%;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
display: grid;
grid-template-columns: 80px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 8px;
cursor: pointer;
text-align: left;
}
#driverCostsPage .driver-costs-vehicle-option:hover {
border-color: #93c5fd;
background: #f8fbff;
}
#driverCostsPage .driver-costs-vehicle-option.is-active {
border-color: #1d4ed8;
background: #eff6ff;
}
#driverCostsPage .driver-costs-vehicle-option.is-filtered-out {
display: none;
}
#driverCostsPage .driver-costs-vehicle-option__thumb {
border-radius: 10px;
height: 58px;
width: 80px;
overflow: hidden;
background: #f1f5f9;
flex-shrink: 0;
}
#driverCostsPage .driver-costs-vehicle-option__thumb .vehicle-photo {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
background: #fff;
}
#driverCostsPage .driver-costs-vehicle-option__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
#driverCostsPage .driver-costs-vehicle-option__top {
display: flex;
align-items: center;
gap: 8px;
}
#driverCostsPage .driver-costs-vehicle-option__body strong {
font-size: 0.92rem;
color: #0f172a;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.25;
max-height: 2.5em;
}
#driverCostsPage .driver-costs-vehicle-option__body small {
color: #64748b;
font-size: 0.78rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#driverCostsPage .driver-costs-vehicle-option__check {
color: #94a3b8;
display: inline-flex;
}
#driverCostsPage .driver-costs-vehicle-option__check i {
width: 18px;
height: 18px;
}
#driverCostsPage
.driver-costs-vehicle-option.is-active
.driver-costs-vehicle-option__check {
color: #1d4ed8;
}
#driverCostsPage .driver-costs-upload-title {
margin: 0 0 10px;
font-weight: 700;
}
#driverCostsPage .driver-costs-upload-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#driverCostsPage .driver-costs-upload-grid--single {
grid-template-columns: 1fr;
}
#driverCostsPage .driver-costs-upload {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
padding: 12px;
cursor: pointer;
transition:
border-color 0.16s ease,
transform 0.16s ease;
}
#driverCostsPage .driver-costs-upload--button {
text-align: left;
color: inherit;
font: inherit;
width: 100%;
}
#driverCostsPage .driver-costs-upload:hover {
border-color: #93c5fd;
transform: translateY(-1px);
}
#driverCostsPage .driver-costs-upload i {
width: 18px;
height: 18px;
}
#driverCostsPage .driver-costs-upload span {
font-weight: 700;
}
#driverCostsPage .driver-costs-upload small {
color: var(--muted);
font-size: 0.8rem;
}
#driverCostsPage #expensePhotos,
#driverCostsPage #expenseCamera {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
#driverCostsPage .driver-costs-upload--camera {
background: linear-gradient(170deg, #ffffff 0%, #ecfeff 100%);
}
#driverCostsPage
.driver-costs-mobile-modal
.driver-costs-mobile-modal__content {
width: min(96vw, 460px);
max-width: 460px;
text-align: left;
}
#driverCostsPage .driver-costs-mobile-modal__qr-wrap {
margin-top: 8px;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
}
#driverCostsPage .driver-costs-mobile-modal__qr-layer {
width: 220px;
height: 220px;
max-width: 100%;
position: relative;
}
#driverCostsPage #driverCostsMobileQr {
width: 220px;
height: 220px;
max-width: 100%;
border-radius: 8px;
background: #fff;
}
#driverCostsPage .driver-costs-mobile-modal__link {
display: block;
margin-top: 12px;
font-size: 0.8rem;
color: #1d4ed8;
word-break: break-all;
}
#driverCostsPage .driver-costs-mobile-modal__copy-btn {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.16s ease;
}
#driverCostsPage
.driver-costs-mobile-modal__qr-layer.is-copy-ready:hover
.driver-costs-mobile-modal__copy-btn,
#driverCostsPage .driver-costs-mobile-modal__copy-btn:focus-visible {
opacity: 1;
pointer-events: auto;
}
#driverCostsPage .driver-costs-mobile-modal__copy-btn[disabled] {
display: none;
}
#driverCostsPage .driver-costs-mobile-modal__qr-wrap[hidden],
#driverCostsPage .driver-costs-mobile-modal__link[hidden],
#driverCostsPage .driver-costs-mobile-modal__review[hidden] {
display: none !important;
}
#driverCostsPage .driver-costs-mobile-modal__status {
margin-top: 10px;
border-radius: 10px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #334155;
padding: 9px 10px;
font-size: 0.85rem;
font-weight: 600;
}
#driverCostsPage .driver-costs-mobile-modal__status.is-success {
border-color: #86efac;
background: #ecfdf5;
color: #166534;
}
#driverCostsPage .driver-costs-mobile-modal__status.is-error {
border-color: #fdba74;
background: #fff7ed;
color: #9a3412;
}
#driverCostsPage .driver-costs-mobile-modal__review {
margin-top: 10px;
display: grid;
gap: 10px;
}
#driverCostsPage .driver-costs-mobile-modal__review .modal-note {
margin: 0;
}
#driverCostsPage .driver-costs-mobile-modal__review-preview {
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#driverCostsPage .driver-costs-mobile-modal__review-preview img {
display: block;
width: 100%;
max-height: 52vh;
object-fit: contain;
background: #fff;
}
#driverCostsPage .driver-costs-mobile-modal__review-preview img[src=""],
#driverCostsPage .driver-costs-mobile-modal__review-preview img:not([src]) {
display: none;
}
#driverCostsPage .driver-costs-mobile-modal__review-actions {
margin-top: 0;
}
#driverCostsPage .driver-costs-crop-modal .driver-costs-crop-modal__content {
width: min(96vw, 460px);
max-width: 460px;
text-align: left;
}
#driverCostsPage .driver-costs-crop-canvas-wrap {
margin-top: 14px;
display: flex;
justify-content: center;
padding: 16px;
border: 1px solid #dbe4f2;
border-radius: 20px;
background:
radial-gradient(
circle at top,
rgba(255, 255, 255, 0.95),
rgba(241, 245, 249, 0.94)
),
linear-gradient(
135deg,
rgba(219, 234, 254, 0.45),
rgba(226, 232, 240, 0.82)
);
}
#driverCostsPage #driverCostsCropCanvas {
width: min(84vw, 320px);
height: min(calc(84vw * 1.25), 400px);
max-width: 320px;
max-height: 400px;
border-radius: 14px;
border: 4px solid #fff;
cursor: grab;
touch-action: none;
background: #fff;
box-shadow:
0 18px 36px rgba(15, 23, 42, 0.16),
0 0 0 1px rgba(148, 163, 184, 0.3);
}
#driverCostsPage #driverCostsCropCanvas:active {
cursor: grabbing;
}
#driverCostsPage .driver-costs-crop-zoom {
margin-top: 16px;
padding: 14px 16px;
border: 1px solid #dbe4f2;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#driverCostsPage .driver-costs-crop-zoom__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
#driverCostsPage .driver-costs-crop-zoom__header label {
margin: 0;
}
#driverCostsPage .driver-costs-crop-zoom__value {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
padding: 4px 10px;
border-radius: 999px;
background: #e2e8f0;
color: #0f172a;
font-size: 0.8rem;
font-weight: 700;
}
#driverCostsPage .driver-costs-crop-zoom__control {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
#driverCostsPage .driver-costs-crop-zoom__hint {
color: #64748b;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#driverCostsPage #driverCostsCropZoom {
--range-progress: 0%;
width: 100%;
margin: 0;
appearance: none;
-webkit-appearance: none;
background: transparent;
accent-color: #2563eb;
}
#driverCostsPage #driverCostsCropZoom:focus {
outline: none;
}
#driverCostsPage #driverCostsCropZoom::-webkit-slider-runnable-track {
height: 8px;
border-radius: 999px;
background: linear-gradient(
90deg,
#2563eb 0%,
#2563eb var(--range-progress),
#dbe4f2 var(--range-progress),
#dbe4f2 100%
);
}
#driverCostsPage #driverCostsCropZoom::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -6px;
border: 3px solid #fff;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}
#driverCostsPage #driverCostsCropZoom::-moz-range-track {
height: 8px;
border: 0;
border-radius: 999px;
background: #dbe4f2;
}
#driverCostsPage #driverCostsCropZoom::-moz-range-progress {
height: 8px;
border-radius: 999px;
background: #2563eb;
}
#driverCostsPage #driverCostsCropZoom::-moz-range-thumb {
width: 20px;
height: 20px;
border: 3px solid #fff;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}
#driverCostsPage .is-hidden-device {
display: none !important;
}
#driverCostsPage .driver-costs-help {
margin: 10px 0 0;
color: var(--muted);
font-size: 0.82rem;
}
#driverCostsPage .driver-costs-preview {
list-style: none;
margin: 10px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
#driverCostsPage .driver-costs-preview__item {
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
padding: 8px;
font-size: 0.84rem;
display: flex;
align-items: center;
gap: 10px;
}
#driverCostsPage .driver-costs-preview__thumb {
width: 48px;
height: 48px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: #e2e8f0;
color: #334155;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
#driverCostsPage .driver-costs-preview__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#driverCostsPage .driver-costs-preview__meta {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
#driverCostsPage .driver-costs-preview__title {
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#driverCostsPage .driver-costs-preview__sub {
color: var(--muted);
font-size: 0.78rem;
}
#driverCostsPage .driver-costs-preview__remove {
width: 30px;
height: 30px;
border: 1px solid #fecaca;
background: #fff1f2;
color: #b91c1c;
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#driverCostsPage .driver-costs-preview__remove:hover {
background: #ffe4e6;
border-color: #fca5a5;
}
#driverCostsPage .driver-costs-actions {
margin-top: 14px;
display: flex;
justify-content: flex-end;
}
#driverCostsPage .driver-costs-list-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
#driverCostsPage .driver-costs-list-head h2 {
margin: 0;
}
#driverCostsPage .driver-costs-summary {
display: inline-flex;
align-items: center;
gap: 7px;
}
#driverCostsPage .driver-costs-chip {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 5px 10px;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
#driverCostsPage .driver-costs-chip--pending {
background: #fff7ed;
color: #c2410c;
}
#driverCostsPage .driver-costs-chip--processed {
background: #ecfdf5;
color: #166534;
}
#driverCostsPage .driver-costs-filter-form {
display: flex;
gap: 8px;
margin-bottom: 14px;
flex-wrap: wrap;
}
#driverCostsPage .driver-costs-list {
display: flex;
flex-direction: column;
gap: 12px;
}
#driverCostsPage .driver-cost-item {
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #fff;
padding: 14px;
}
#driverCostsPage .driver-cost-item__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
#driverCostsPage .driver-cost-item__amount {
margin: 0;
font-size: 1.22rem;
font-weight: 800;
}
#driverCostsPage .driver-cost-item__meta {
margin: 4px 0 0;
color: var(--muted);
font-size: 0.86rem;
}
#driverCostsPage .driver-cost-status {
display: inline-flex;
border-radius: 999px;
padding: 5px 10px;
font-size: 0.76rem;
font-weight: 700;
white-space: nowrap;
}
#driverCostsPage .driver-cost-status--pending {
color: #9a3412;
background: #ffedd5;
}
#driverCostsPage .driver-cost-status--processed {
color: #166534;
background: #dcfce7;
}
#driverCostsPage .driver-cost-item__details {
margin-top: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
#driverCostsPage .driver-cost-item__details span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #334155;
font-size: 0.84rem;
}
#driverCostsPage .driver-cost-item__details i {
width: 14px;
height: 14px;
color: #64748b;
}
#driverCostsPage .driver-cost-item__note {
margin: 10px 0 0;
color: #0f172a;
font-size: 0.9rem;
}
#driverCostsPage .driver-cost-item__photos {
margin-top: 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 8px;
}
#driverCostsPage .driver-cost-item__photos a {
border-radius: 10px;
overflow: hidden;
border: 1px solid #e2e8f0;
display: block;
}
#driverCostsPage .driver-cost-item__photos img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
#driverCostsPage .driver-cost-item__admin-form {
margin-top: 12px;
border-top: 1px dashed #dbe4f2;
padding-top: 10px;
display: flex;
align-items: flex-end;
gap: 8px;
flex-wrap: wrap;
}
#driverCostsPage .driver-cost-item__admin-form label {
font-size: 0.82rem;
font-weight: 700;
color: var(--muted);
}
#driverCostsPage .driver-cost-item__admin-form select {
min-width: 220px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 10px;
}
@media (max-width: 980px) {
#driverCostsPage .driver-costs-form-card {
position: static;
}
}
@media (max-width: 740px) {
#driverCostsPage .driver-costs-type-buttons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#driverCostsPage .driver-costs-upload-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#driverCostsPage .driver-cost-item__details {
grid-template-columns: 1fr;
}
#driverCostsPage .driver-costs-vehicle-modal .modal-content {
width: min(96vw, 96vw);
max-height: 92vh;
padding: 10px;
}
#driverCostsPage .driver-costs-vehicle-option {
grid-template-columns: 72px minmax(0, 1fr) auto;
gap: 8px;
padding: 7px;
}
#driverCostsPage .driver-costs-vehicle-option__thumb {
width: 72px;
height: 52px;
}
#driverCostsPage .driver-costs-list-head {
flex-direction: column;
align-items: flex-start;
}
#driverCostsPage .driver-costs-summary {
display: none;
}
#driverCostsPage .driver-costs-actions {
justify-content: stretch;
}
#driverCostsPage .driver-costs-submit {
width: 100%;
}
#driverCostsPage .driver-cost-item__admin-form select {
min-width: 0;
width: 100%;
}
#driverCostsPage .driver-cost-item__admin-form .btn {
width: 100%;
justify-content: center;
}
#driverCostsPage .driver-costs-crop-modal .driver-costs-crop-modal__content {
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
max-height: none;
overflow-y: auto;
border-radius: 0;
box-shadow: none;
padding: calc(10px + env(safe-area-inset-top)) 10px
calc(10px + env(safe-area-inset-bottom));
}
#driverCostsPage .driver-costs-crop-modal.active {
align-items: stretch;
justify-content: stretch;
}
#driverCostsPage .driver-costs-crop-canvas-wrap {
margin-top: 10px;
padding: 10px;
border-radius: 16px;
}
#driverCostsPage #driverCostsCropCanvas {
width: min(74vw, 280px);
height: min(calc(74vw * 1.25), 350px);
max-width: 280px;
max-height: 350px;
border-width: 3px;
}
#driverCostsPage .driver-costs-crop-zoom {
margin-top: 10px;
padding: 10px;
border-radius: 12px;
}
#driverCostsPage .driver-costs-crop-zoom__header {
margin-bottom: 6px;
gap: 8px;
}
#driverCostsPage .driver-costs-crop-zoom__header label {
font-size: 0.8rem;
}
#driverCostsPage .driver-costs-crop-zoom__value {
min-width: 40px;
padding: 2px 8px;
font-size: 0.74rem;
}
#driverCostsPage .driver-costs-crop-zoom__control {
gap: 8px;
}
#driverCostsPage .driver-costs-crop-zoom__hint {
font-size: 0.66rem;
letter-spacing: 0.03em;
}
#driverCostsPage #driverCostsCropZoom::-webkit-slider-runnable-track {
height: 6px;
}
#driverCostsPage #driverCostsCropZoom::-webkit-slider-thumb {
width: 16px;
height: 16px;
margin-top: -5px;
border-width: 2px;
}
#driverCostsPage #driverCostsCropZoom::-moz-range-track {
height: 6px;
}
#driverCostsPage #driverCostsCropZoom::-moz-range-progress {
height: 6px;
}
#driverCostsPage #driverCostsCropZoom::-moz-range-thumb {
width: 16px;
height: 16px;
border-width: 2px;
}
}
#settingsPage.profile-page .profile-form {
align-items: start;
}
#settingsPage.profile-page .profile-autosave-status {
margin: 8px 0 14px;
padding: 10px 12px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
color: #334155;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.01em;
transition:
border-color 0.2s ease,
background 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
#settingsPage.profile-page .profile-autosave-status.is-saving {
border-color: #93c5fd;
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
color: #1d4ed8;
}
#settingsPage.profile-page .profile-autosave-status.is-success {
border-color: #86efac;
background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%);
color: #166534;
box-shadow: 0 10px 22px rgba(22, 101, 52, 0.1);
}
#settingsPage.profile-page .profile-autosave-status.is-error {
border-color: #fdba74;
background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
color: #9a3412;
}
#settingsPage.profile-page .profile-autosave-error {
margin: 0 0 12px;
}
#settingsPage.profile-page .profile-autosave-error[hidden] {
display: none !important;
}
#settingsPage.profile-page .profile-form .field.profile-autosave--saving input,
#settingsPage.profile-page .profile-form .field.profile-autosave--saving select,
#settingsPage.profile-page
.profile-form
.field.profile-autosave--saving
textarea {
border-color: #93c5fd;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}
#settingsPage.profile-page .profile-form .field.profile-autosave--saved input,
#settingsPage.profile-page .profile-form .field.profile-autosave--saved select,
#settingsPage.profile-page
.profile-form
.field.profile-autosave--saved
textarea {
border-color: #86efac;
background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}
#settingsPage.profile-page .profile-form .field.profile-autosave--error input,
#settingsPage.profile-page .profile-form .field.profile-autosave--error select,
#settingsPage.profile-page
.profile-form
.field.profile-autosave--error
textarea {
border-color: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
#settingsPage.profile-page .profile-upload-trigger.profile-autosave--saving,
#settingsPage.profile-page .profile-doc-card__preview.profile-autosave--saving,
#settingsPage.profile-page
.profile-photo-editor__preview.profile-autosave--saving {
border-color: #93c5fd !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
#settingsPage.profile-page .profile-upload-trigger.profile-autosave--saved,
#settingsPage.profile-page .profile-doc-card__preview.profile-autosave--saved,
#settingsPage.profile-page
.profile-photo-editor__preview.profile-autosave--saved {
border-color: #86efac !important;
background: linear-gradient(170deg, #ffffff 0%, #f0fdf4 100%) !important;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
#settingsPage.profile-page .profile-upload-trigger.profile-autosave--error,
#settingsPage.profile-page .profile-doc-card__preview.profile-autosave--error,
#settingsPage.profile-page
.profile-photo-editor__preview.profile-autosave--error {
border-color: #f59e0b !important;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
#settingsPage.profile-page .profile-group {
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #fff;
padding: 14px;
display: grid;
gap: 12px;
}
#settingsPage.profile-page .profile-group__title {
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1rem;
color: #0f172a;
}
#settingsPage.profile-page .profile-group__index {
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 800;
color: #1e40af;
background: #dbeafe;
}
#settingsPage.profile-page .profile-group__label {
display: block;
margin: 0 0 8px 0;
font-size: 0.86rem;
font-weight: 700;
color: #64748b;
}
#settingsPage.profile-page .profile-group__grid {
display: grid;
gap: 12px;
}
#settingsPage.profile-page .profile-group__grid--account {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#settingsPage.profile-page .profile-group__grid--address {
grid-template-columns:
minmax(240px, 2.1fr)
minmax(110px, 0.85fr)
minmax(90px, 0.65fr)
minmax(110px, 0.85fr)
minmax(170px, 1.15fr)
minmax(160px, 1fr);
}
#settingsPage.profile-page .profile-address-field--street {
grid-column: 1;
}
#settingsPage.profile-page .profile-address-field--number {
grid-column: 2;
}
#settingsPage.profile-page .profile-address-field--bus {
grid-column: 3;
}
#settingsPage.profile-page .profile-address-field--postal {
grid-column: 4;
}
#settingsPage.profile-page .profile-address-field--city {
grid-column: 5;
}
#settingsPage.profile-page .profile-address-field--country {
grid-column: 6;
}
@media (max-width: 1280px) {
#settingsPage.profile-page .profile-group__grid--address {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
#settingsPage.profile-page .profile-address-field--street {
grid-column: span 6;
}
#settingsPage.profile-page .profile-address-field--number {
grid-column: span 2;
}
#settingsPage.profile-page .profile-address-field--bus {
grid-column: span 2;
}
#settingsPage.profile-page .profile-address-field--postal {
grid-column: span 2;
}
#settingsPage.profile-page .profile-address-field--city {
grid-column: span 6;
}
#settingsPage.profile-page .profile-address-field--country {
grid-column: span 6;
}
}
#settingsPage.profile-page .profile-group__media {
display: grid;
gap: 8px;
}
#settingsPage.profile-page .profile-form__actions {
display: flex;
justify-content: flex-end;
padding-top: 4px;
}
#settingsPage.profile-page .profile-phone-field {
display: grid;
grid-template-columns: minmax(154px, 0.9fr) minmax(0, 1.4fr);
gap: 10px;
}
#settingsPage.profile-page .profile-phone-field__country,
#settingsPage.profile-page .profile-phone-field__number {
width: 100%;
}
#settingsPage.profile-page .profile-photo-editor {
--profile-photo-size: 132px;
display: grid;
grid-template-columns: var(--profile-photo-size) minmax(0, 1fr);
width: 100%;
justify-self: stretch;
gap: 14px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
padding: 12px;
}
#settingsPage.profile-page .profile-photo-editor__preview-wrap {
display: grid;
gap: 8px;
align-content: start;
}
#settingsPage.profile-page .profile-photo-editor__preview {
width: var(--profile-photo-size);
height: var(--profile-photo-size);
border-radius: 12px;
border: 1px dashed #cbd5e1;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 0.85rem;
overflow: hidden;
}
#settingsPage.profile-page .profile-photo-editor__content {
display: grid;
gap: 10px;
align-content: start;
}
#settingsPage.profile-page .profile-photo-editor__head h4 {
margin: 0;
color: #0f172a;
font-size: 0.9rem;
}
#settingsPage.profile-page .profile-photo-editor__head p {
margin: 5px 0 0;
color: #64748b;
font-size: 0.78rem;
line-height: 1.35;
}
#settingsPage.profile-page .profile-photo-editor__preview.has-image {
border-style: solid;
}
#settingsPage.profile-page
.profile-photo-editor__preview.has-image
.profile-empty-state,
#settingsPage.profile-page
.profile-doc-card__preview.has-image
.profile-empty-state {
display: none;
}
#settingsPage.profile-page .profile-photo-editor__preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#settingsPage.profile-page .profile-photo-editor__preview img[hidden],
#settingsPage.profile-page
.profile-photo-editor__preview
.profile-empty-state[hidden] {
display: none !important;
}
#settingsPage.profile-page .profile-photo-editor__actions {
display: grid;
gap: 8px;
}
#settingsPage.profile-page .profile-photo-editor__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#settingsPage.profile-page
.profile-photo-editor__buttons
> .profile-upload-trigger,
#settingsPage.profile-page .profile-doc-card__buttons > .profile-upload-trigger,
#settingsPage.profile-page
.profile-photo-editor__buttons
> button.profile-upload-trigger,
#settingsPage.profile-page
.profile-doc-card__buttons
> button.profile-upload-trigger {
grid-column: span 1;
width: 100%;
min-width: 0;
justify-self: stretch;
margin-top: 0;
}
#settingsPage.profile-page .profile-upload-trigger {
position: relative;
overflow: hidden;
width: 100%;
min-height: 42px;
border: 1px solid #dbe4f2 !important;
border-radius: 10px;
background: #fff !important;
color: #0f172a !important;
display: inline-flex !important;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 10px;
transition:
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease;
}
#settingsPage.profile-page .profile-upload-trigger:hover {
border-color: #cbd5e1 !important;
background: #f8fafc !important;
}
#settingsPage.profile-page .profile-upload-trigger--camera {
background: #f8fafc !important;
}
#settingsPage.profile-page .profile-upload-trigger--button {
text-align: left;
cursor: pointer;
}
#settingsPage.profile-page .profile-upload-trigger i {
width: 16px;
height: 16px;
color: #475569;
}
#settingsPage.profile-page .profile-upload-trigger span {
font-weight: 600;
font-size: 0.82rem;
color: #0f172a;
line-height: 1;
}
#settingsPage.profile-page .profile-upload-trigger small {
display: none;
}
#settingsPage.profile-page .profile-upload-trigger input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
#settingsPage.profile-page .profile-remove-check {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
font-size: 0.82rem;
font-weight: 700;
color: #9a3412;
border: 1px solid #fed7aa;
background: #fff7ed;
border-radius: 10px;
padding: 8px 10px;
}
#settingsPage.profile-page .profile-remove-check input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: #ea580c;
}
#settingsPage.profile-page .profile-remove-check--wide {
width: fit-content;
}
#settingsPage.profile-page .profile-empty-state {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #64748b;
text-align: center;
}
#settingsPage.profile-page .profile-empty-state svg {
width: 16px;
height: 16px;
color: #94a3b8;
}
#settingsPage.profile-page .profile-empty-state--small {
font-size: 0.8rem;
}
#settingsPage.profile-page .profile-doc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#settingsPage.profile-page .profile-doc-grid--single {
grid-template-columns: 1fr;
}
#settingsPage.profile-page .profile-doc-group-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
#settingsPage.profile-page .profile-doc-group {
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #f8fafc;
padding: 10px;
display: grid;
gap: 10px;
}
@media (min-width: 1040px) {
#settingsPage.profile-page .profile-doc-group-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#settingsPage.profile-page .profile-doc-group:not(.is-single) {
grid-column: 1 / -1;
}
}
#settingsPage.profile-page .profile-doc-group.is-empty {
background: #fcfdff;
}
#settingsPage.profile-page .profile-doc-group__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
#settingsPage.profile-page .profile-doc-group__head h4 {
margin: 0;
color: #0f172a;
font-size: 0.92rem;
}
#settingsPage.profile-page .profile-doc-group__head p {
margin: 2px 0 0;
color: #64748b;
font-size: 0.8rem;
}
#settingsPage.profile-page .profile-doc-group__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
border-radius: 999px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #334155;
font-size: 0.72rem;
font-weight: 700;
padding: 4px 8px;
white-space: nowrap;
}
#settingsPage.profile-page .profile-doc-group__badge.is-ready {
border-color: #bbf7d0;
background: #ecfdf3;
color: #166534;
}
#settingsPage.profile-page .profile-doc-card {
border: 1px solid #dbe4f2;
border-radius: 13px;
background: #fff;
padding: 10px;
display: grid;
gap: 9px;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
#settingsPage.profile-page .profile-doc-card:hover {
border-color: #cbd5e1;
background: #fcfdff;
}
#settingsPage.profile-page .profile-doc-card h3 {
margin: 0;
font-size: 0.78rem;
color: #334155;
letter-spacing: 0.03em;
text-transform: uppercase;
}
#settingsPage.profile-page .profile-doc-card p {
margin: 0;
font-size: 0.78rem;
line-height: 1.35;
color: #64748b;
}
#settingsPage.profile-page .profile-doc-card__preview {
height: 132px;
border: 1px dashed #cbd5e1;
border-radius: 10px;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #64748b;
font-size: 0.8rem;
}
#settingsPage.profile-page .profile-doc-card__preview a {
display: block;
width: 100%;
height: 100%;
}
#settingsPage.profile-page .profile-doc-card__preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
#settingsPage.profile-page .profile-doc-card__actions {
display: grid;
gap: 6px;
align-items: center;
}
#settingsPage.profile-page .profile-doc-card__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#settingsPage.profile-page .profile-crop-modal .profile-crop-modal__content {
width: min(96vw, 460px);
max-width: 460px;
text-align: left;
}
#settingsPage.profile-page .profile-crop-modal__content h3 {
margin-bottom: 6px;
}
#settingsPage.profile-page .profile-crop-modal__content .modal-note {
margin-bottom: 0;
color: #475569;
}
#settingsPage.profile-page
.profile-mobile-modal
.profile-mobile-modal__content {
width: min(96vw, 460px);
max-width: 460px;
text-align: left;
}
#settingsPage.profile-page .profile-mobile-modal__qr-wrap {
margin-top: 8px;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
}
#settingsPage.profile-page .profile-mobile-modal__qr-layer {
width: 220px;
height: 220px;
max-width: 100%;
position: relative;
}
#settingsPage.profile-page #profilePhotoMobileQr {
width: 220px;
height: 220px;
max-width: 100%;
border-radius: 8px;
background: #fff;
}
#settingsPage.profile-page .profile-mobile-modal__link {
display: block;
margin-top: 12px;
font-size: 0.8rem;
color: #1d4ed8;
word-break: break-all;
}
#settingsPage.profile-page .profile-mobile-modal__copy-btn {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.16s ease;
}
#settingsPage.profile-page
.profile-mobile-modal__qr-layer.is-copy-ready:hover
.profile-mobile-modal__copy-btn,
#settingsPage.profile-page .profile-mobile-modal__copy-btn:focus-visible {
opacity: 1;
pointer-events: auto;
}
#settingsPage.profile-page .profile-mobile-modal__copy-btn[disabled] {
display: none;
}
#settingsPage.profile-page .profile-mobile-modal__qr-wrap[hidden],
#settingsPage.profile-page .profile-mobile-modal__link[hidden],
#settingsPage.profile-page .profile-mobile-modal__review[hidden] {
display: none !important;
}
#settingsPage.profile-page .profile-mobile-modal__status {
margin-top: 10px;
border-radius: 10px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #334155;
padding: 9px 10px;
font-size: 0.85rem;
font-weight: 600;
}
#settingsPage.profile-page .profile-mobile-modal__status.is-success {
border-color: #86efac;
background: #ecfdf5;
color: #166534;
}
#settingsPage.profile-page .profile-mobile-modal__status.is-error {
border-color: #fdba74;
background: #fff7ed;
color: #9a3412;
}
#settingsPage.profile-page .profile-mobile-modal__review {
margin-top: 10px;
display: grid;
gap: 10px;
}
#settingsPage.profile-page .profile-mobile-modal__review .modal-note {
margin: 0;
}
#settingsPage.profile-page .profile-mobile-modal__review-preview {
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#settingsPage.profile-page .profile-mobile-modal__review-preview img {
display: block;
width: 100%;
max-height: 52vh;
object-fit: contain;
background: #fff;
}
#settingsPage.profile-page .profile-mobile-modal__review-preview img[src=""],
#settingsPage.profile-page
.profile-mobile-modal__review-preview
img:not([src]) {
display: none;
}
#settingsPage.profile-page .profile-mobile-modal__review-actions {
margin-top: 0;
}
#settingsPage.profile-page .profile-crop-canvas-wrap {
margin-top: 14px;
display: flex;
justify-content: center;
padding: 20px;
border: 1px solid #dbe4f2;
border-radius: 24px;
background:
radial-gradient(
circle at top,
rgba(255, 255, 255, 0.95),
rgba(241, 245, 249, 0.94)
),
linear-gradient(
135deg,
rgba(219, 234, 254, 0.45),
rgba(226, 232, 240, 0.82)
);
}
#settingsPage.profile-page #profilePhotoCropCanvas {
width: min(82vw, 320px);
height: min(82vw, 320px);
max-width: 320px;
max-height: 320px;
border-radius: 12px;
border: 6px solid #fff;
cursor: grab;
touch-action: none;
background: #fff;
box-shadow:
0 18px 36px rgba(15, 23, 42, 0.16),
0 0 0 1px rgba(148, 163, 184, 0.3);
}
#settingsPage.profile-page #profilePhotoCropCanvas:active {
cursor: grabbing;
}
#settingsPage.profile-page .profile-crop-zoom {
margin-top: 16px;
padding: 14px 16px;
border: 1px solid #dbe4f2;
border-radius: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#settingsPage.profile-page .profile-crop-zoom__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
#settingsPage.profile-page .profile-crop-zoom__header label {
margin: 0;
}
#settingsPage.profile-page .profile-crop-zoom__value {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
padding: 4px 10px;
border-radius: 999px;
background: #e2e8f0;
color: #0f172a;
font-size: 0.8rem;
font-weight: 700;
}
#settingsPage.profile-page .profile-crop-zoom__control {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
#settingsPage.profile-page .profile-crop-zoom__hint {
color: #64748b;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#settingsPage.profile-page #profilePhotoZoom {
--range-progress: 0%;
width: 100%;
margin: 0;
appearance: none;
-webkit-appearance: none;
background: transparent;
accent-color: #2563eb;
}
#settingsPage.profile-page #profilePhotoZoom:focus {
outline: none;
}
#settingsPage.profile-page #profilePhotoZoom::-webkit-slider-runnable-track {
height: 8px;
border-radius: 999px;
background: linear-gradient(
90deg,
#2563eb 0%,
#2563eb var(--range-progress),
#dbe4f2 var(--range-progress),
#dbe4f2 100%
);
}
#settingsPage.profile-page #profilePhotoZoom::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -6px;
border: 3px solid #fff;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}
#settingsPage.profile-page #profilePhotoZoom::-moz-range-track {
height: 8px;
border: 0;
border-radius: 999px;
background: #dbe4f2;
}
#settingsPage.profile-page #profilePhotoZoom::-moz-range-progress {
height: 8px;
border-radius: 999px;
background: #2563eb;
}
#settingsPage.profile-page #profilePhotoZoom::-moz-range-thumb {
width: 20px;
height: 20px;
border: 3px solid #fff;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}
@media (max-width: 820px) {
#settingsPage.profile-page .profile-form,
#settingsPage.profile-page .profile-doc-group-grid,
#settingsPage.profile-page .profile-doc-grid {
gap: 14px;
}
#settingsPage.profile-page .profile-group__grid--account,
#settingsPage.profile-page .profile-group__grid--address {
grid-template-columns: 1fr;
}
#settingsPage.profile-page .profile-address-field--street,
#settingsPage.profile-page .profile-address-field--number,
#settingsPage.profile-page .profile-address-field--bus,
#settingsPage.profile-page .profile-address-field--postal,
#settingsPage.profile-page .profile-address-field--city,
#settingsPage.profile-page .profile-address-field--country {
grid-column: auto;
}
#settingsPage.profile-page .profile-phone-field {
grid-template-columns: 1fr;
}
#settingsPage.profile-page .profile-photo-editor {
grid-template-columns: 1fr;
width: 100%;
}
#settingsPage.profile-page .profile-photo-editor__preview-wrap {
grid-template-columns: 118px minmax(0, 1fr);
align-items: center;
column-gap: 10px;
}
#settingsPage.profile-page .profile-doc-group__head {
flex-direction: column;
align-items: flex-start;
}
#settingsPage.profile-page .profile-photo-editor__preview {
width: 118px;
height: 118px;
}
#settingsPage.profile-page .profile-photo-editor__buttons,
#settingsPage.profile-page .profile-doc-card__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#settingsPage.profile-page .profile-crop-modal .profile-crop-modal__content {
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
max-height: none;
overflow-y: auto;
border-radius: 0;
box-shadow: none;
padding: calc(10px + env(safe-area-inset-top)) 10px
calc(10px + env(safe-area-inset-bottom));
}
#settingsPage.profile-page .profile-crop-modal.active {
align-items: stretch;
justify-content: stretch;
}
#settingsPage.profile-page .profile-crop-canvas-wrap {
margin-top: 10px;
padding: 10px;
border-radius: 16px;
}
#settingsPage.profile-page #profilePhotoCropCanvas {
width: min(74vw, 280px);
height: min(74vw, 280px);
max-width: 280px;
max-height: 280px;
border-width: 4px;
}
#settingsPage.profile-page .profile-crop-zoom {
margin-top: 10px;
padding: 10px;
border-radius: 12px;
}
#settingsPage.profile-page .profile-crop-zoom__header {
margin-bottom: 6px;
gap: 8px;
}
#settingsPage.profile-page .profile-crop-zoom__header label {
font-size: 0.8rem;
}
#settingsPage.profile-page .profile-crop-zoom__value {
min-width: 40px;
padding: 2px 8px;
font-size: 0.74rem;
}
#settingsPage.profile-page .profile-crop-zoom__control {
gap: 8px;
}
#settingsPage.profile-page .profile-crop-zoom__hint {
font-size: 0.66rem;
letter-spacing: 0.03em;
}
#settingsPage.profile-page #profilePhotoZoom::-webkit-slider-runnable-track {
height: 6px;
}
#settingsPage.profile-page #profilePhotoZoom::-webkit-slider-thumb {
width: 16px;
height: 16px;
margin-top: -5px;
border-width: 2px;
}
#settingsPage.profile-page #profilePhotoZoom::-moz-range-track {
height: 6px;
}
#settingsPage.profile-page #profilePhotoZoom::-moz-range-progress {
height: 6px;
}
#settingsPage.profile-page #profilePhotoZoom::-moz-range-thumb {
width: 16px;
height: 16px;
border-width: 2px;
}
#settingsPage.profile-page .profile-remove-check--wide {
width: 100%;
}
}
@media (max-width: 560px) {
#settingsPage.profile-page .profile-doc-grid {
grid-template-columns: 1fr;
gap: 14px;
}
#settingsPage.profile-page .profile-photo-editor__preview-wrap {
grid-template-columns: 1fr;
align-items: start;
}
#settingsPage.profile-page .profile-doc-card__preview {
height: 120px;
}
#settingsPage.profile-page .profile-photo-editor__buttons,
#settingsPage.profile-page .profile-doc-card__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
#checkinPage #checkinFeedback[hidden] {
display: none !important;
}
#checkinPage.is-loading .checkin-calendar,
#checkinPage.is-loading .checkin-availability-list,
#checkinPage.is-loading .checkin-planner-results {
position: relative;
overflow: hidden;
opacity: 0.76;
pointer-events: none;
}
#checkinPage.is-loading .checkin-calendar::after,
#checkinPage.is-loading .checkin-availability-list::after,
#checkinPage.is-loading .checkin-planner-results::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 34%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.2) 66%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-130%);
animation: appLoadingSheen 1.15s ease-in-out infinite;
pointer-events: none;
}
#checkinPage .checkin-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
}
#checkinPage .checkin-card-head h2 {
margin: 0;
}
#checkinPage .checkin-card-head .sub {
margin: 6px 0 0;
color: #64748b;
}
#checkinPage .checkin-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: end;
}
#checkinPage .checkin-toolbar__cluster {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 12px;
}
#checkinPage .checkin-toolbar__section {
display: grid;
gap: 6px;
}
#checkinPage .checkin-toolbar__section--nav {
margin-left: auto;
}
#checkinPage .checkin-toolbar__label {
padding: 0 4px;
color: #64748b;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#checkinPage .checkin-toolbar__group {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
#checkinPage .checkin-toolbar__group--segmented,
#checkinPage .checkin-toolbar__group--nav {
gap: 4px;
padding: 4px;
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #f8fafc;
}
#checkinPage .checkin-calendar-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: #475569;
font-size: 0.9rem;
}
#checkinPage .checkin-focus-notice {
margin-bottom: 12px;
border: 1px solid #fed7aa;
background: #fff7ed;
color: #9a3412;
border-radius: 12px;
padding: 10px 12px;
font-weight: 600;
}
#checkinPage .checkin-focus-notice[hidden] {
display: none !important;
}
#checkinPage .checkin-toggle-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
border: 1px solid #dbe4f2;
border-radius: 14px;
padding: 14px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#checkinPage .checkin-toggle-card__copy {
display: grid;
gap: 4px;
}
#checkinPage .checkin-toggle-card__copy small {
color: #64748b;
}
#checkinPage .checkin-toggle-card__control {
position: relative;
width: 54px;
height: 30px;
flex: 0 0 auto;
}
#checkinPage .checkin-toggle-card__control input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
#checkinPage .checkin-toggle-card__control span {
position: absolute;
inset: 0;
border-radius: 999px;
background: #cbd5e1;
transition: background 0.18s ease;
}
#checkinPage .checkin-toggle-card__control span::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 999px;
background: #fff;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
transition: transform 0.18s ease;
}
#checkinPage .checkin-toggle-card__control input:checked + span {
background: #2563eb;
}
#checkinPage .checkin-toggle-card__control input:checked + span::after {
transform: translateX(24px);
}
#checkinPage .checkin-toggle-card__control input:focus-visible + span {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
#checkinPage .checkin-calendar {
min-height: 220px;
position: relative;
z-index: 1;
}
#checkinPage .checkin-calendar-card {
position: relative;
}
#checkinPage .checkin-toolbar__group--segmented .chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 38px;
padding: 8px 12px;
border: 0;
border-radius: 10px;
background: transparent;
color: #475569;
}
#checkinPage .checkin-toolbar__group--segmented .chip i,
#checkinPage .checkin-toolbar__group--segmented .chip svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
#checkinPage .checkin-toolbar__group--segmented .chip:hover {
background: #fff;
color: #0f172a;
}
#checkinPage .checkin-toolbar__group--segmented .chip:focus-visible,
#checkinPage .checkin-nav-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
#checkinPage .checkin-toolbar__group--segmented .chip.active {
background: #fff;
color: #1d4ed8;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
#checkinPage .checkin-nav-btn {
min-height: 38px;
padding: 8px 12px;
border: 0;
border-radius: 10px;
color: #475569;
}
#checkinPage .checkin-nav-btn:hover {
background: #fff;
color: #0f172a;
}
#checkinPage .checkin-nav-btn--today {
border: 1px solid #dbe4f2;
background: #fff;
color: #0f172a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
#checkinPage .checkin-nav-btn--today:hover {
background: #fff;
}
#checkinPage .checkin-nav-btn__label {
white-space: nowrap;
}
#checkinPage .checkin-calendar-meta {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
}
#checkinPage .checkin-planner-form {
display: grid;
gap: 16px;
}
#checkinPage .checkin-planner-panel {
border: 1px solid #dbe4f2;
border-radius: 18px;
padding: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
display: grid;
gap: 16px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}
#checkinPage .checkin-planner-panel--single {
max-width: 920px;
}
#checkinPage .checkin-planner-panel__head {
display: flex;
align-items: flex-start;
gap: 12px;
}
#checkinPage .checkin-planner-panel__head h3 {
margin: 0;
font-size: 1rem;
}
#checkinPage .checkin-planner-panel__head p {
margin: 4px 0 0;
color: #64748b;
line-height: 1.45;
}
#checkinPage .checkin-planner-slot-stack {
display: grid;
gap: 12px;
}
#checkinPage .checkin-planner-slot-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#checkinPage .checkin-quick-duration {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#checkinPage .checkin-quick-duration .chip {
background: #fff;
border: 1px solid #dbe4f2;
min-width: 52px;
}
#checkinPage .checkin-quick-duration .chip.active {
border-color: #163300;
background: #eef9d8;
color: #163300;
}
#checkinPage .checkin-planner-summary {
display: grid;
gap: 10px;
}
#checkinPage .checkin-planner-summary__item {
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 14px;
background: rgba(255, 255, 255, 0.86);
padding: 12px 14px;
display: grid;
gap: 4px;
}
#checkinPage .checkin-planner-summary__item span {
color: #64748b;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
#checkinPage .checkin-planner-summary__item strong {
color: #0f172a;
line-height: 1.45;
}
#checkinPage .checkin-planner-actions {
justify-content: flex-start;
}
#checkinPage .checkin-planner-actions .btn {
min-width: 260px;
}
#checkinPage .checkin-empty-state {
border: 1px dashed #cbd5e1;
border-radius: 14px;
padding: 18px;
text-align: center;
color: #64748b;
background: #f8fafc;
font-weight: 600;
}
#checkinPage .checkin-timeline-wrap {
overflow: auto;
border: 1px solid #dbe4f2;
border-radius: 18px;
background: #fff;
box-shadow: none;
}
#checkinPage .checkin-timeline {
display: grid;
grid-template-columns: 92px minmax(1344px, 1fr);
min-width: 1436px;
align-items: start;
}
#checkinPage .checkin-time-corner {
height: 56px;
background: #f8fafc;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
position: sticky;
top: 0;
left: 0;
z-index: 4;
}
#checkinPage .checkin-time-axis {
display: grid;
grid-template-columns: repeat(24, 56px);
height: 56px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
position: sticky;
top: 0;
z-index: 3;
}
#checkinPage .checkin-time-axis__label {
padding: 10px 8px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
color: #64748b;
font-size: 0.76rem;
font-weight: 700;
border-left: 1px solid #edf2f7;
}
#checkinPage .checkin-day-row__label.is-today {
background: #eff6ff;
}
#checkinPage .checkin-day-row__label {
min-height: 76px;
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
background: #fff;
position: sticky;
left: 0;
z-index: 2;
}
#checkinPage .checkin-day-row__label strong {
font-size: 0.86rem;
color: #0f172a;
text-transform: capitalize;
}
#checkinPage .checkin-day-row__label span {
font-size: 0.78rem;
color: #64748b;
}
#checkinPage .checkin-day-row__body {
position: relative;
min-width: 1344px;
border-top: 1px solid #e2e8f0;
background:
linear-gradient(
90deg,
rgba(248, 250, 252, 0.55),
rgba(255, 255, 255, 0.92)
),
#fff;
}
#checkinPage .checkin-hour-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(24, 56px);
}
#checkinPage .checkin-hour-row {
border-left: 1px solid #edf2f7;
}
#checkinPage .checkin-slot-grid,
#checkinPage .checkin-ride-layer,
#checkinPage .checkin-event-layer {
position: absolute;
inset: 0;
}
#checkinPage .checkin-slot-button {
position: absolute;
top: 0;
border: 0;
background: transparent;
padding: 0;
cursor: crosshair;
z-index: 1;
}
#checkinPage .checkin-slot-button:hover,
#checkinPage .checkin-slot-button.is-selected {
background: rgba(37, 99, 235, 0.12);
}
#checkinPage .checkin-slot-button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: -2px;
}
#checkinPage .checkin-ride-overlay {
position: absolute;
border-radius: 12px;
background: rgba(245, 158, 11, 0.18);
border: 1px solid rgba(217, 119, 6, 0.28);
color: #9a3412;
padding: 6px 8px;
font-size: 0.76rem;
font-weight: 700;
overflow: hidden;
display: flex;
align-items: flex-start;
pointer-events: none;
z-index: 2;
}
#checkinPage .checkin-event {
position: absolute;
border-radius: 14px;
border: 1px solid #93c5fd;
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
color: #1d4ed8;
padding: 10px 10px 8px;
text-align: left;
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
display: grid;
gap: 4px;
z-index: 3;
}
#checkinPage button.checkin-event {
cursor: pointer;
}
#checkinPage button.checkin-event:hover {
transform: translateY(-1px);
}
#checkinPage button.checkin-event:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.22);
outline-offset: 2px;
}
#checkinPage .checkin-event.is-locked {
border-color: #fdba74;
background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
color: #9a3412;
box-shadow: 0 10px 22px rgba(154, 52, 18, 0.12);
}
#checkinPage .checkin-event strong {
font-size: 0.82rem;
line-height: 1.1;
}
#checkinPage .checkin-event__meta {
font-size: 0.74rem;
color: #475569;
}
#checkinPage .checkin-event__tag {
width: fit-content;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
#checkinPage .checkin-focus-window {
position: absolute;
top: 4px;
bottom: 4px;
border: 2px dashed rgba(220, 38, 38, 0.45);
border-radius: 12px;
background: rgba(254, 226, 226, 0.12);
z-index: 1;
pointer-events: none;
}
#checkinPage .checkin-focus-anchor {
position: absolute;
width: 1px;
height: 1px;
top: 50%;
}
#checkinPage .checkin-focus-window--vertical {
top: auto;
left: 2px;
right: 2px;
bottom: auto;
}
#checkinPage .checkin-hour-grid--vertical {
grid-template-columns: none;
grid-template-rows: repeat(24, 56px);
}
#checkinPage .checkin-slot-button--vertical {
left: 0;
right: 0;
width: 100%;
}
#checkinPage .checkin-mobile-day {
display: none;
}
#checkinPage .checkin-month-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
}
#checkinPage .checkin-month-grid__weekday {
padding: 6px 10px;
text-transform: capitalize;
color: #64748b;
font-size: 0.8rem;
font-weight: 800;
}
#checkinPage .checkin-month-cell {
min-height: 180px;
border: 1px solid #dbe4f2;
border-radius: 16px;
background: #fff;
padding: 12px;
display: grid;
align-content: start;
gap: 10px;
box-shadow: none;
}
#checkinPage .checkin-month-cell.is-outside-month {
background: #f8fafc;
opacity: 0.75;
}
#checkinPage .checkin-month-cell.is-today {
border-color: #93c5fd;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}
#checkinPage .checkin-month-cell.is-focused {
border-color: #f97316;
}
#checkinPage .checkin-month-cell__head {
display: flex;
justify-content: space-between;
align-items: center;
}
#checkinPage .checkin-month-cell__head strong {
font-size: 1rem;
}
#checkinPage .checkin-month-cell__head span {
color: #64748b;
font-size: 0.78rem;
}
#checkinPage .checkin-month-cell__counts,
#checkinPage .checkin-driver-result__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#checkinPage .checkin-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
font-size: 0.74rem;
font-weight: 800;
}
#checkinPage .checkin-pill--ride {
background: #fff7ed;
color: #9a3412;
}
#checkinPage .checkin-pill--ok {
background: #ecfdf5;
color: #166534;
}
#checkinPage .checkin-month-cell__items {
display: grid;
gap: 6px;
}
#checkinPage .checkin-month-entry {
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
padding: 8px 9px;
font-size: 0.78rem;
text-align: left;
color: #0f172a;
}
#checkinPage button.checkin-month-entry {
cursor: pointer;
}
#checkinPage .checkin-month-entry.is-locked,
#checkinPage .checkin-month-entry--ride {
background: #fff7ed;
color: #9a3412;
border-color: #fed7aa;
}
#checkinPage .checkin-heatmap-wrap {
overflow: auto;
border: 1px solid #dbe4f2;
border-radius: 18px;
background: #fff;
box-shadow: none;
}
#checkinPage .checkin-heatmap {
min-width: 820px;
}
#checkinPage .checkin-heatmap__header,
#checkinPage .checkin-heatmap__row {
display: grid;
grid-template-columns: 220px repeat(auto-fit, minmax(64px, 1fr));
}
#checkinPage .checkin-heatmap__driver-col,
#checkinPage .checkin-heatmap__day-col,
#checkinPage .checkin-heatmap__cell {
border-top: 1px solid #edf2f7;
border-left: 1px solid #edf2f7;
min-height: 62px;
padding: 10px;
}
#checkinPage .checkin-heatmap__driver-col:first-child,
#checkinPage .checkin-heatmap__day-col:first-child,
#checkinPage .checkin-heatmap__cell:first-child {
border-left: 0;
}
#checkinPage .checkin-heatmap__driver-col {
display: grid;
gap: 3px;
align-content: center;
position: sticky;
left: 0;
z-index: 1;
background: #fff;
}
#checkinPage .checkin-heatmap__header .checkin-heatmap__driver-col {
z-index: 2;
background: #f8fafc;
}
#checkinPage .checkin-heatmap__driver-col span {
color: #64748b;
font-size: 0.76rem;
}
#checkinPage .checkin-heatmap__day-col {
font-size: 0.78rem;
font-weight: 800;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
}
#checkinPage .checkin-heatmap__cell {
display: grid;
gap: 2px;
align-content: center;
justify-items: center;
font-weight: 800;
color: #0f172a;
}
#checkinPage .checkin-heatmap__cell small {
font-size: 0.68rem;
color: #475569;
}
#checkinPage .checkin-heatmap__cell[data-intensity="0"] {
background: #f8fafc;
}
#checkinPage .checkin-heatmap__cell[data-intensity="1"] {
background: rgba(191, 219, 254, 0.5);
}
#checkinPage .checkin-heatmap__cell[data-intensity="2"] {
background: rgba(147, 197, 253, 0.65);
}
#checkinPage .checkin-heatmap__cell[data-intensity="3"] {
background: rgba(96, 165, 250, 0.7);
}
#checkinPage .checkin-heatmap__cell[data-intensity="4"] {
background: rgba(29, 78, 216, 0.78);
color: #fff;
}
#checkinPage .checkin-heatmap-mobile {
display: none;
}
#checkinPage .checkin-availability-list,
#checkinPage .checkin-driver-result-list {
display: grid;
gap: 12px;
}
#checkinPage .checkin-list-item,
#checkinPage .checkin-driver-result {
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #fff;
padding: 14px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
}
#checkinPage .checkin-list-item.is-locked {
border-color: #fed7aa;
background: #fff7ed;
}
#checkinPage .checkin-list-item--ride {
border-color: #fde68a;
background: linear-gradient(180deg, #fffdfa 0%, #fff7ed 100%);
}
#checkinPage .checkin-list-item__main,
#checkinPage .checkin-driver-result__main {
display: grid;
gap: 6px;
}
#checkinPage .checkin-list-item__main p,
#checkinPage .checkin-driver-result__main p {
margin: 0;
color: #334155;
}
#checkinPage .checkin-list-item__meta,
#checkinPage .checkin-driver-result__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #64748b;
font-size: 0.78rem;
font-weight: 700;
}
#checkinPage .checkin-list-item__note {
color: #9a3412;
font-size: 0.8rem;
}
#checkinPage .checkin-results-block {
display: grid;
gap: 12px;
}
#checkinPage .checkin-results-block__head {
display: grid;
gap: 4px;
}
#checkinPage .checkin-results-block__head h3 {
margin: 0 0 4px;
}
#checkinPage .checkin-results-block__head p {
margin: 0;
}
#checkinPage .checkin-planner-results[hidden] {
display: none !important;
}
#checkinPage .checkin-planner-results {
display: grid;
gap: 16px;
margin-top: 18px;
}
#checkinPage .checkin-driver-result--match {
border-color: #93c5fd;
background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}
#checkinPage .checkin-driver-result.is-excluded {
border-color: #fed7aa;
background: #fff7ed;
}
#checkinPage .checkin-driver-result__actions {
display: flex;
align-items: center;
}
#checkinPage .checkin-list-item__actions {
display: flex;
align-items: center;
}
#checkinPage .checkin-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
#checkinPage .checkin-inline-message {
margin-top: 10px;
border-radius: 12px;
padding: 10px 12px;
font-weight: 600;
background: #f8fafc;
color: #334155;
border: 1px solid #dbe4f2;
}
#checkinPage .checkin-inline-message[hidden] {
display: none !important;
}
#checkinPage .checkin-inline-message.is-error {
background: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
#checkinPage .checkin-inline-message.is-info {
background: #eff6ff;
border-color: #bfdbfe;
color: #1d4ed8;
}
#checkinPage .checkin-assign-summary {
margin-top: 12px;
display: grid;
gap: 10px;
}
#checkinPage .checkin-assign-summary__group {
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #f8fafc;
padding: 12px;
display: grid;
gap: 3px;
}
#checkinPage .checkin-assign-summary__group span {
color: #475569;
}
@media (max-width: 920px) {
#checkinPage .checkin-card-head,
#checkinPage .checkin-calendar-meta,
#checkinPage .checkin-list-item,
#checkinPage .checkin-driver-result {
flex-direction: column;
align-items: stretch;
}
#checkinPage .checkin-toolbar {
grid-template-columns: 1fr;
align-items: stretch;
}
#checkinPage .checkin-toolbar__cluster {
align-items: stretch;
}
#checkinPage .checkin-toolbar__section--nav {
margin-left: 0;
}
#checkinPage .checkin-month-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
#checkinPage .checkin-toolbar {
display: grid;
gap: 10px;
}
#checkinPage .checkin-toolbar__cluster {
display: grid;
gap: 10px;
}
#checkinPage .checkin-toolbar__section {
width: 100%;
}
#checkinPage #checkinViewToggle.checkin-toolbar__group--segmented {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
}
#checkinPage #checkinModeToggle.checkin-toolbar__group--segmented {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
#checkinPage .checkin-toolbar__group--segmented .chip {
width: 100%;
min-width: 0;
padding-inline: 10px;
}
#checkinPage .checkin-toolbar__group--segmented .chip span {
overflow: hidden;
text-overflow: ellipsis;
}
#checkinPage .checkin-toolbar__group--nav {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
width: 100%;
}
#checkinPage .checkin-nav-btn {
justify-content: center;
padding-inline: 10px;
}
#checkinPage .checkin-nav-btn__label {
display: none;
}
#checkinPage .checkin-heatmap-mobile {
display: grid;
gap: 12px;
}
#checkinPage .checkin-heatmap-mobile__card {
border: 1px solid #dbe4f2;
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
#checkinPage .checkin-heatmap-mobile__head {
padding: 12px 14px;
display: grid;
gap: 2px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-bottom: 1px solid #e2e8f0;
}
#checkinPage .checkin-heatmap-mobile__head strong {
color: #0f172a;
font-size: 0.92rem;
}
#checkinPage .checkin-heatmap-mobile__head span {
color: #64748b;
font-size: 0.72rem;
}
#checkinPage .checkin-heatmap-mobile__days {
display: grid;
}
#checkinPage .checkin-heatmap-mobile__day {
display: grid;
grid-template-columns: 56px 12px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 10px 14px;
border-top: 1px solid #edf2f7;
}
#checkinPage .checkin-heatmap-mobile__day:first-child {
border-top: 0;
}
#checkinPage .checkin-heatmap-mobile__day-meta {
display: grid;
gap: 2px;
text-align: left;
}
#checkinPage .checkin-heatmap-mobile__day-meta strong {
font-size: 0.78rem;
color: #0f172a;
text-transform: capitalize;
}
#checkinPage .checkin-heatmap-mobile__day-meta span {
font-size: 0.68rem;
color: #64748b;
}
#checkinPage .checkin-heatmap-mobile__day-bar {
align-self: stretch;
border-radius: 999px;
background: #f1f5f9;
overflow: hidden;
position: relative;
}
#checkinPage .checkin-heatmap-mobile__day-bar span {
position: absolute;
inset: 0;
border-radius: 999px;
background: #cbd5e1;
}
#checkinPage .checkin-heatmap-mobile__day-stats {
display: grid;
gap: 2px;
}
#checkinPage .checkin-heatmap-mobile__day-stats strong {
font-size: 0.78rem;
color: #0f172a;
}
#checkinPage .checkin-heatmap-mobile__day-stats span {
font-size: 0.68rem;
color: #64748b;
}
#checkinPage
.checkin-heatmap-mobile__day[data-intensity="0"]
.checkin-heatmap-mobile__day-bar
span {
background: #e2e8f0;
}
#checkinPage
.checkin-heatmap-mobile__day[data-intensity="1"]
.checkin-heatmap-mobile__day-bar
span {
background: rgba(191, 219, 254, 0.9);
}
#checkinPage
.checkin-heatmap-mobile__day[data-intensity="2"]
.checkin-heatmap-mobile__day-bar
span {
background: rgba(147, 197, 253, 0.95);
}
#checkinPage
.checkin-heatmap-mobile__day[data-intensity="3"]
.checkin-heatmap-mobile__day-bar
span {
background: rgba(96, 165, 250, 0.95);
}
#checkinPage
.checkin-heatmap-mobile__day[data-intensity="4"]
.checkin-heatmap-mobile__day-bar
span {
background: rgba(29, 78, 216, 0.98);
}
#checkinPage .checkin-mobile-day {
display: grid;
gap: 0;
border: 1px solid #dbe4f2;
border-radius: 16px;
overflow: hidden;
background: #fff;
}
#checkinPage .checkin-mobile-day__head {
padding: 12px 14px;
border-bottom: 1px solid #e2e8f0;
background: #fff;
display: grid;
gap: 2px;
}
#checkinPage .checkin-mobile-day__head.is-today {
background: #eff6ff;
}
#checkinPage .checkin-mobile-day__head strong {
font-size: 0.92rem;
color: #0f172a;
text-transform: capitalize;
}
#checkinPage .checkin-mobile-day__head span {
font-size: 0.76rem;
color: #64748b;
}
#checkinPage .checkin-mobile-day__grid {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
align-items: start;
}
#checkinPage .checkin-mobile-day-time {
display: grid;
grid-template-rows: repeat(24, 56px);
background: #f8fafc;
border-right: 1px solid #e2e8f0;
}
#checkinPage .checkin-mobile-day-time__label {
padding: 0 8px;
display: flex;
align-items: flex-start;
justify-content: flex-end;
color: #64748b;
font-size: 0.68rem;
font-weight: 700;
border-top: 1px solid #edf2f7;
}
#checkinPage .checkin-mobile-day__body {
position: relative;
height: 1344px;
background:
linear-gradient(
180deg,
rgba(248, 250, 252, 0.55),
rgba(255, 255, 255, 0.92)
),
#fff;
}
#checkinPage .checkin-timeline-wrap {
border-radius: 16px;
}
#checkinPage .checkin-timeline {
grid-template-columns: minmax(1344px, 1fr);
min-width: 1344px;
}
#checkinPage .checkin-time-corner {
display: none;
}
#checkinPage .checkin-time-axis {
height: 68px;
grid-column: 1;
}
#checkinPage .checkin-time-axis__label {
padding: 6px 0;
font-size: 0.62rem;
align-items: center;
justify-content: center;
writing-mode: vertical-rl;
text-orientation: mixed;
}
#checkinPage .checkin-day-row__label {
grid-column: 1;
position: relative;
left: auto;
min-height: 0;
padding: 10px 8px;
border-right: 0;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
z-index: 1;
}
#checkinPage .checkin-day-row__label strong {
font-size: 0.8rem;
}
#checkinPage .checkin-day-row__label span {
font-size: 0.72rem;
}
#checkinPage .checkin-day-row__body {
grid-column: 1;
min-width: 1344px;
}
#checkinPage .checkin-planner-panel {
padding: 14px;
}
#checkinPage .checkin-planner-slot-row {
grid-template-columns: 1fr;
}
#checkinPage .checkin-month-grid {
grid-template-columns: 1fr;
}
#checkinPage .checkin-heatmap__header,
#checkinPage .checkin-heatmap__row {
grid-template-columns: 180px repeat(auto-fit, minmax(60px, 1fr));
}
#checkinPage .checkin-event {
padding: 8px 8px 6px;
}
#checkinPage .checkin-event strong {
font-size: 0.76rem;
}
#checkinPage .checkin-event__meta {
font-size: 0.68rem;
}
#checkinPage .checkin-planner-actions .btn {
width: 100%;
min-width: 0;
}
}
/* App breadcrumb */
.app-breadcrumb {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 8px;
width: fit-content;
max-width: 100%;
margin: 0 0 14px;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid #dce6db;
background: #f7fbf7;
color: #334155;
font-size: 0.82rem;
font-weight: 600;
}
.app-breadcrumb a,
.app-breadcrumb span {
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
}
.app-breadcrumb svg {
width: 14px;
height: 14px;
}
.app-breadcrumb a:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.35);
outline-offset: 2px;
border-radius: 8px;
}
/* Keep spacing from breadcrumb to KPI stats identical across pages */
.app-breadcrumb + .fleet-stats {
margin-top: 0 !important;
}
@media (max-width: 760px) {
.app-breadcrumb {
width: 100%;
border-radius: 12px;
}
}
@media (max-width: 560px) {
.app-breadcrumb {
font-size: 0.76rem;
}
}
/* Contacts page */
#contactsPage {
--contacts-accent: var(--primary);
--contacts-accent-soft: #edf4ed;
--contacts-border: #dbe4f2;
--contacts-surface: #f8fafc;
}
#contactsPage .contacts-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid #dce6db;
background: #f7fbf7;
color: #334155;
font-size: 0.82rem;
font-weight: 600;
}
#contactsPage .contacts-breadcrumb a,
#contactsPage .contacts-breadcrumb span {
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
}
#contactsPage .contacts-breadcrumb svg {
width: 14px;
height: 14px;
}
#contactsPage .contacts-workspace {
display: grid;
grid-template-columns: 310px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
#contactsPage .contacts-sidebar {
display: grid;
gap: 14px;
align-self: start;
}
#contactsPage .contacts-filters,
#contactsPage .contacts-table {
margin-bottom: 0;
border: 1px solid #d5e0f0;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}
#contactsPage .contacts-filters {
display: grid;
gap: 12px;
background: linear-gradient(140deg, #ffffff 0%, #f8fafc 100%);
}
#contactsPage .contacts-workspace .contacts-admin-create {
margin-bottom: 0;
}
#contactsPage .contacts-filters__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
#contactsPage .contacts-filters__head h2,
#contactsPage .contacts-admin-create__head h2 {
margin: 0;
font-size: 1.08rem;
color: #0f172a;
}
#contactsPage .contacts-filters__reset {
border: 1px solid #d4deed;
background: #fff;
color: #334155;
border-radius: 9px;
padding: 6px 10px;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
#contactsPage .contacts-filters__reset:hover {
border-color: #bdcce3;
background: #f8fafc;
}
#contactsPage .contacts-count-badge {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
border: 1px solid #d7e2f1;
background: #f8fafc;
padding: 4px 9px;
font-size: 0.74rem;
color: #475569;
font-weight: 700;
width: fit-content;
}
#contactsPage .contacts-count-badge--table {
background: #ffffff;
}
#contactsPage .contacts-filters__label {
font-size: 0.8rem;
color: #475569;
font-weight: 700;
}
#contactsPage .contacts-filters__search-wrap {
position: relative;
}
#contactsPage .contacts-filters__search-wrap svg {
position: absolute;
left: 10px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
color: #64748b;
pointer-events: none;
}
#contactsPage .contacts-filters__search {
width: 100%;
border: 1px solid #d0d9e8;
border-radius: 9px;
padding: 10px 11px 10px 34px;
background: #fff;
}
#contactsPage .contacts-filters__search:focus {
outline: 2px solid rgba(37, 99, 235, 0.28);
outline-offset: 1px;
border-color: #3b82f6;
}
#contactsPage .contacts-filters__roles {
border: 0;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
#contactsPage .contacts-filters__roles legend {
font-size: 0.8rem;
color: #475569;
font-weight: 700;
margin-bottom: 2px;
}
#contactsPage .contacts-role-filter {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 7px 8px;
border: 1px solid #dbe4f2;
border-radius: 9px;
background: #fff;
cursor: pointer;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
#contactsPage .contacts-role-filter:hover {
border-color: #c6d6eb;
background: #f8fafc;
}
#contactsPage .contacts-role-filter:focus-within {
border-color: #93c5fd;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
#contactsPage .contacts-role-filter__input {
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--contacts-accent);
}
#contactsPage .contacts-role-filter__text {
font-size: 0.9rem;
color: #0f172a;
font-weight: 600;
}
#contactsPage .contacts-role-filter__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
padding: 1px 6px;
border-radius: 999px;
border: 1px solid #dbe4f2;
background: #f8fafc;
font-size: 0.72rem;
color: #64748b;
font-weight: 700;
}
#contactsPage .contacts-table {
padding: 14px;
background: linear-gradient(140deg, #ffffff 0%, #f8fafc 100%);
}
#contactsPage .contacts-table__toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
#contactsPage .contacts-table__title h2 {
margin: 0;
font-size: 1.08rem;
color: #0f172a;
}
#contactsPage .contacts-table__title p {
margin: 3px 0 0;
font-size: 0.84rem;
color: #64748b;
}
#contactsPage .contacts-table__body {
display: grid;
gap: 9px;
}
#contactsPage .contacts-table-item {
display: grid;
grid-template-columns: minmax(0, 1fr);
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #fff;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
#contactsPage .contacts-table-item--active-driver {
border-color: #60a5fa;
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2);
}
#contactsPage .contacts-table-item--active-driver:hover {
border-color: #3b82f6;
box-shadow: 0 10px 22px rgba(59, 130, 246, 0.14);
}
#contactsPage
.contacts-table-item:not(.contacts-table-item--active-driver):hover {
border-color: #c7d6ea;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
#contactsPage .contacts-table-item.is-hidden {
display: none !important;
}
#contactsPage .contacts-table-divider {
height: 1px;
margin: 3px 6px 1px;
background: #d7e3f4;
}
#contactsPage .contacts-row {
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
}
#contactsPage .contacts-row__main {
min-width: 0;
color: inherit;
text-decoration: none;
border-radius: 10px;
}
#contactsPage .contacts-row__main:hover .contacts-contact-copy strong {
color: #0f3ea8;
}
#contactsPage .contacts-row__main:focus-visible,
#contactsPage .contacts-icon-btn:focus-visible,
#contactsPage .contacts-col--toggle:focus-visible,
#contactsPage .contacts-filters__reset:focus-visible,
#contactsPage .contacts-breadcrumb a:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.35);
outline-offset: 2px;
}
#contactsPage .contacts-col {
min-width: 0;
}
#contactsPage .contacts-col--contact {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
align-items: center;
gap: 12px;
}
#contactsPage .contacts-contact-avatar {
width: 46px;
height: 46px;
border-radius: 12px;
border: 1px solid #dbe4f2;
background: #f1f5f9;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
#contactsPage .contacts-contact-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#contactsPage .contacts-contact-avatar__fallback {
font-size: 0.84rem;
font-weight: 700;
color: #334155;
}
#contactsPage .contacts-contact-copy {
min-width: 0;
}
#contactsPage .contacts-contact-copy strong {
display: block;
margin: 0;
font-size: 0.97rem;
color: #0f172a;
font-weight: 700;
line-height: 1.2;
}
#contactsPage .contacts-contact-subtitle {
display: block;
margin-top: 3px;
color: #526274;
font-size: 0.83rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#contactsPage .contacts-contact-meta {
margin-top: 7px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#contactsPage .contacts-contact-chip {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
border: 1px solid #dbe4f2;
background: #f8fafc;
color: #475569;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
padding: 4px 8px;
max-width: 100%;
}
#contactsPage .contacts-contact-chip svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
}
#contactsPage .contacts-contact-chip--role {
border-color: #cadac7;
background: var(--contacts-accent-soft);
color: var(--contacts-accent);
}
#contactsPage .contacts-col--actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
}
#contactsPage .contacts-col__empty {
color: #64748b;
font-size: 0.76rem;
font-weight: 600;
}
#contactsPage .contacts-icon-btn {
min-height: 34px;
border: 1px solid #dbe4f2;
border-radius: 9px;
background: #fff;
color: #334155;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
padding: 0 10px;
text-decoration: none;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
#contactsPage .contacts-icon-btn:hover {
border-color: #c4d3e7;
background: #f8fafc;
}
#contactsPage .contacts-icon-btn svg {
width: 14px;
height: 14px;
}
#contactsPage .contacts-icon-btn span {
font-size: 0.74rem;
font-weight: 700;
}
#contactsPage .contacts-col--toggle {
width: 30px;
height: 30px;
color: #64748b;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 8px;
border: 1px solid #dbe4f2;
background: #fff;
}
#contactsPage .contacts-col--toggle-label {
display: none;
}
#contactsPage .contacts-col--toggle:hover {
border-color: #c4d3e7;
background: #f8fafc;
}
#contactsPage .contacts-col--toggle svg {
width: 14px;
height: 14px;
}
#contactsPage .contacts-empty {
margin: 2px 0 0;
padding: 11px 12px;
border: 1px dashed #cbd5e1;
border-radius: 9px;
color: #475569;
background: #fff;
font-size: 0.9rem;
font-weight: 600;
}
@media (max-width: 1180px) {
#contactsPage .contacts-workspace {
grid-template-columns: 290px minmax(0, 1fr);
}
#contactsPage .contacts-contact-chip {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (max-width: 980px) {
#contactsPage .contacts-workspace {
grid-template-columns: 1fr;
grid-template-areas:
"filters"
"create"
"table";
}
#contactsPage .contacts-filters {
position: static;
}
}
@media (max-width: 760px) {
#contactsPage .contacts-breadcrumb {
width: 100%;
border-radius: 12px;
}
#contactsPage .contacts-filters {
padding: 10px;
gap: 8px;
border-radius: 10px;
}
#contactsPage .contacts-filters__head h2,
#contactsPage .contacts-admin-create__head h2 {
font-size: 0.96rem;
}
#contactsPage .contacts-filters__reset {
padding: 5px 8px;
border-radius: 8px;
font-size: 0.72rem;
}
#contactsPage .contacts-count-badge {
font-size: 0.7rem;
padding: 3px 8px;
}
#contactsPage .contacts-filters__label,
#contactsPage .contacts-filters__roles legend {
font-size: 0.74rem;
}
#contactsPage .contacts-filters__search-wrap svg {
left: 9px;
width: 14px;
height: 14px;
}
#contactsPage .contacts-filters__search {
border-radius: 8px;
padding: 8px 9px 8px 30px;
font-size: 0.88rem;
}
#contactsPage .contacts-filters__roles {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
#contactsPage .contacts-filters__roles legend {
grid-column: 1 / -1;
margin-bottom: 0;
}
#contactsPage .contacts-role-filter {
gap: 6px;
padding: 6px 7px;
border-radius: 8px;
}
#contactsPage .contacts-role-filter__input {
width: 14px;
height: 14px;
}
#contactsPage .contacts-role-filter__text {
font-size: 0.8rem;
line-height: 1.2;
}
#contactsPage .contacts-role-filter__count {
min-width: 18px;
padding: 1px 5px;
font-size: 0.68rem;
}
#contactsPage .contacts-table {
padding: 10px;
}
#contactsPage .contacts-table__toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: 10px;
row-gap: 4px;
}
#contactsPage .contacts-table__title {
display: contents;
}
#contactsPage .contacts-table__title h2 {
grid-column: 1;
min-width: 0;
}
#contactsPage .contacts-table__title p {
grid-column: 1 / -1;
margin-top: 2px;
}
#contactsPage .contacts-count-badge--table {
grid-column: 2;
grid-row: 1;
justify-self: end;
white-space: nowrap;
}
#contactsPage .contacts-row {
grid-template-columns: 1fr;
grid-template-areas:
"contact"
"actions"
"toggle";
gap: 0;
padding: 0;
}
#contactsPage .contacts-row__main,
#contactsPage .contacts-col--contact {
grid-area: contact;
}
#contactsPage .contacts-row__main {
display: block;
padding: 10px;
border-radius: 0;
}
#contactsPage .contacts-col--actions {
grid-area: actions;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 10px;
border-top: 1px solid #e2e8f0;
justify-content: stretch;
align-items: stretch;
gap: 8px;
}
#contactsPage .contacts-icon-btn {
min-width: 0;
width: 100%;
}
#contactsPage .contacts-col--toggle {
grid-area: toggle;
width: auto;
height: auto;
padding: 10px;
border: 0;
border-top: 1px solid #e2e8f0;
border-radius: 0;
background: transparent;
justify-content: flex-start;
gap: 8px;
color: #334155;
align-self: stretch;
margin-top: 0;
}
#contactsPage .contacts-col--toggle-label {
display: inline-block;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.2;
}
#contactsPage .contacts-contact-chip {
max-width: 100%;
}
}
@media (max-width: 520px) {
#contactsPage .contacts-filters {
padding: 9px;
gap: 7px;
}
#contactsPage .contacts-filters__roles {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
#contactsPage .contacts-filters__roles legend {
margin-bottom: 0;
}
#contactsPage .contacts-role-filter {
gap: 5px;
padding: 5px 6px;
border-radius: 7px;
}
#contactsPage .contacts-role-filter__input {
width: 13px;
height: 13px;
}
#contactsPage .contacts-role-filter__text {
font-size: 0.76rem;
line-height: 1.15;
}
#contactsPage .contacts-role-filter__count {
min-width: 16px;
padding: 1px 4px;
font-size: 0.64rem;
}
#contactsPage .contacts-contact-avatar {
width: 42px;
height: 42px;
}
#contactsPage .contacts-contact-copy strong {
font-size: 0.92rem;
}
#contactsPage .contacts-contact-subtitle {
font-size: 0.78rem;
}
}
@media (prefers-reduced-motion: reduce) {
#contactsPage .contacts-table-item,
#contactsPage .contacts-filters__reset,
#contactsPage .contacts-role-filter,
#contactsPage .contacts-icon-btn {
transition: none !important;
}
}
/* Shared breadcrumb */
.page-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid #dce6db;
background: #f7fbf7;
color: #334155;
font-size: 0.82rem;
font-weight: 600;
}
.page-breadcrumb a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #334155;
text-decoration: none;
}
.page-breadcrumb svg {
width: 14px;
height: 14px;
}
.page-breadcrumb > span {
color: #0f172a;
}
.page-breadcrumb a:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: 8px;
}
@media (max-width: 760px) {
.page-breadcrumb {
width: 100%;
border-radius: 12px;
}
}
@media (max-width: 560px) {
.page-breadcrumb {
font-size: 0.76rem;
}
}
/* Contact detail page */
#contactDetailPage {
--contact-accent: var(--primary);
--contact-accent-strong: var(--primary-700);
--contact-accent-soft: #edf4ed;
--contact-highlight: var(--secundary);
--contact-border: #dbe4f2;
--contact-surface: #f8fafc;
}
#contactDetailPage .contact-detail-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid #dce6db;
background: #f7fbf7;
color: #334155;
font-size: 0.82rem;
font-weight: 600;
}
#contactDetailPage .contact-detail-breadcrumb a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #334155;
text-decoration: none;
}
#contactDetailPage .contact-detail-breadcrumb svg {
width: 14px;
height: 14px;
}
#contactDetailPage .contact-detail-breadcrumb > span {
color: #0f172a;
}
#contactDetailPage .contact-detail-hero {
position: relative;
overflow: hidden;
border-color: #d5e0f0;
background: linear-gradient(140deg, #ffffff 0%, #f7fbf7 58%, #fefbf2 100%);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}
#contactDetailPage .contact-detail-hero > * {
position: relative;
z-index: 1;
}
#contactDetailPage .contact-detail-hero__halo {
position: absolute;
right: -120px;
top: -90px;
width: 300px;
height: 240px;
border-radius: 999px;
background: radial-gradient(
circle,
rgba(217, 199, 147, 0.42) 0%,
rgba(217, 199, 147, 0) 72%
);
pointer-events: none;
}
#contactDetailPage .contact-detail-hero__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
#contactDetailPage .contact-detail-identity {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
#contactDetailPage .contact-detail-avatar {
width: 74px;
height: 74px;
border-radius: 18px;
border: 1px solid #ced9e8;
background: #e2e8f0;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex: 0 0 auto;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
#contactDetailPage .contact-detail-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#contactDetailPage .contact-detail-avatar__fallback {
font-size: 1rem;
font-weight: 800;
color: #334155;
}
#contactDetailPage .contact-detail-identity__copy {
min-width: 0;
}
#contactDetailPage .contact-detail-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 7px;
}
#contactDetailPage .contact-detail-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe4f2;
background: #ffffff;
color: #334155;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.74rem;
font-weight: 700;
line-height: 1.2;
}
#contactDetailPage .contact-detail-badge--primary {
border-color: #cadac7;
background: var(--contact-accent-soft);
color: var(--contact-accent-strong);
}
#contactDetailPage .contact-detail-identity__copy h2 {
margin: 0 0 3px;
color: #0f172a;
font-size: clamp(1.18rem, 1.5vw, 1.48rem);
letter-spacing: -0.02em;
}
#contactDetailPage .contact-detail-identity__copy p {
margin: 0;
color: #516173;
font-size: 0.92rem;
}
#contactDetailPage .contact-detail-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
#contactDetailPage .contact-detail-actions .btn {
border-color: #cdd8e9;
cursor: pointer;
}
#contactDetailPage .contact-detail-actions__empty {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 2px;
color: #64748b;
font-size: 0.85rem;
font-weight: 600;
}
#contactDetailPage .contact-detail-layout {
margin-top: 14px;
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
#contactDetailPage .contact-detail-missing-card {
margin-top: 14px;
border: 1px solid #d8e1ef;
background:
linear-gradient(
135deg,
rgba(248, 250, 252, 0.98),
rgba(241, 245, 249, 0.94)
),
#fff;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
#contactDetailPage .contact-detail-missing-card__copy {
display: grid;
gap: 10px;
}
#contactDetailPage .contact-detail-missing-card__eyebrow {
display: inline-flex;
width: fit-content;
padding: 4px 9px;
border-radius: 999px;
background: rgba(245, 158, 11, 0.12);
color: #9a6700;
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#contactDetailPage .contact-detail-missing-card h3 {
margin: 0;
color: #0f172a;
font-size: 1.08rem;
}
#contactDetailPage .contact-detail-missing-card p {
margin: 0;
color: #526274;
max-width: 68ch;
}
#contactDetailPage .contact-detail-missing-card__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#contactDetailPage .contact-detail-missing-card__chip {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid #d8e1ef;
background: rgba(255, 255, 255, 0.9);
color: #334155;
font-size: 0.8rem;
font-weight: 700;
}
#contactDetailPage .contact-detail-missing-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
}
#contactDetailPage .contact-detail-info,
#contactDetailPage .contact-detail-documents {
border-color: #d5e0f0;
}
#contactDetailPage .contact-detail-section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 11px;
}
#contactDetailPage .contact-detail-section-head h3,
#contactDetailPage .contact-detail-documents h3 {
margin: 0;
font-size: 1.08rem;
color: #0f172a;
}
#contactDetailPage .contact-detail-grid {
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#contactDetailPage .contact-detail-item {
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
padding: 11px 12px;
display: grid;
gap: 8px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
#contactDetailPage .contact-detail-item:hover {
border-color: #c9d8ee;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
#contactDetailPage .contact-detail-item--wide {
grid-column: 1 / -1;
}
#contactDetailPage .contact-detail-grid-divider {
grid-column: 1 / -1;
height: 1px;
margin: 4px 0;
background: #dbe4f2;
}
@media (min-width: 768px) {
#contactDetailPage .contact-detail-grid-divider {
margin: 14px 0 12px;
}
}
#contactDetailPage .contact-detail-grid dt {
margin: 0;
font-size: 0.79rem;
letter-spacing: 0.01em;
color: #526274;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
}
#contactDetailPage .contact-detail-item__icon {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid #d8e3f3;
background: #f8fbff;
color: #2b4c7e;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
#contactDetailPage .contact-detail-item__icon svg {
width: 14px;
height: 14px;
stroke-width: 2.2;
}
#contactDetailPage .contact-detail-grid dd {
margin: 0;
color: #0f172a;
font-size: 0.93rem;
font-weight: 600;
line-height: 1.35;
word-break: break-word;
}
#contactDetailPage .contact-detail-grid dd a {
color: inherit;
text-decoration: none;
}
#contactDetailPage .contact-detail-value-link {
display: inline;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: var(--contact-accent-strong);
font-weight: 600;
letter-spacing: 0;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition:
color 0.18s ease,
text-decoration-color 0.18s ease;
}
#contactDetailPage .contact-detail-value-link:visited {
color: var(--contact-accent-strong);
}
#contactDetailPage .contact-detail-value-link:hover {
color: var(--contact-accent);
text-decoration-color: currentColor;
}
#contactDetailPage .contact-detail-documents__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
#contactDetailPage .contact-detail-documents__subtitle {
margin: 4px 0 0;
color: #64748b;
font-size: 0.85rem;
}
#contactDetailPage .contact-doc-group-grid {
display: grid;
gap: 12px;
}
#contactDetailPage .contact-doc-group {
border: 1px solid #dbe4f2;
border-radius: 14px;
background: #fff;
padding: 12px;
display: grid;
gap: 10px;
}
#contactDetailPage .contact-doc-group.is-empty {
background: #fcfdff;
}
#contactDetailPage .contact-doc-group__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
#contactDetailPage .contact-doc-group__head h4 {
margin: 0;
color: #0f172a;
font-size: 0.92rem;
}
#contactDetailPage .contact-doc-group__head p {
margin: 2px 0 0;
color: #64748b;
font-size: 0.8rem;
}
#contactDetailPage .contact-doc-group__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
border-radius: 999px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #334155;
font-size: 0.72rem;
font-weight: 700;
padding: 4px 8px;
white-space: nowrap;
}
#contactDetailPage .contact-doc-group__badge.is-ready {
border-color: #bbf7d0;
background: #ecfdf3;
color: #166534;
}
#contactDetailPage .contact-doc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
#contactDetailPage .contact-doc-card {
border: 1px solid #dbe4f2;
border-radius: 13px;
background: #fff;
padding: 10px;
display: grid;
gap: 9px;
grid-template-rows: auto minmax(132px, 1fr) auto;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
#contactDetailPage .contact-doc-card:not(.is-empty):hover {
border-color: #cbd5e1;
background: #fcfdff;
}
#contactDetailPage .contact-doc-card.is-empty {
background: #fcfdff;
}
#contactDetailPage .contact-doc-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
#contactDetailPage .contact-doc-card h5 {
margin: 0;
font-size: 0.78rem;
color: #334155;
letter-spacing: 0.03em;
text-transform: uppercase;
}
#contactDetailPage .contact-doc-card__preview {
height: 132px;
border: 1px dashed #cbd5e1;
border-radius: 11px;
background: #f8fafc;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#contactDetailPage .contact-doc-card__preview-link {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#contactDetailPage .contact-doc-card__preview img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: #f1f5f9;
}
#contactDetailPage .contact-doc-card__overlay {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
background: rgba(15, 23, 42, 0.82);
color: #fff;
border-radius: 8px;
padding: 5px 8px;
font-size: 0.72rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
opacity: 0;
transform: translateY(4px);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
#contactDetailPage
.contact-doc-card__preview-link:hover
.contact-doc-card__overlay,
#contactDetailPage
.contact-doc-card__preview-link:focus-visible
.contact-doc-card__overlay {
opacity: 1;
transform: translateY(0);
}
#contactDetailPage .contact-doc-card__empty,
#contactDetailPage .contact-doc-card__file {
color: #64748b;
font-size: 0.84rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
#contactDetailPage .contact-doc-card__open {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
border: 1px solid #d5e0f0;
border-radius: 9px;
min-height: 42px;
padding: 7px 10px;
color: #334155;
text-decoration: none;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
#contactDetailPage .contact-doc-card__open:hover {
border-color: #bccce5;
background: #f8fafc;
color: #0f172a;
}
#contactDetailPage .contact-doc-card.is-empty .contact-doc-card__preview {
border-style: solid;
}
#contactDetailPage .contact-detail-breadcrumb a:focus-visible,
#contactDetailPage .contact-detail-actions .btn:focus-visible,
#contactDetailPage .contact-detail-grid dd a:focus-visible,
#contactDetailPage .contact-doc-card__preview-link:focus-visible,
#contactDetailPage .contact-doc-card__open:focus-visible {
outline: 2px solid var(--contact-accent);
outline-offset: 2px;
border-radius: 8px;
}
@media (max-width: 960px) {
#contactDetailPage .contact-detail-missing-card {
flex-direction: column;
align-items: stretch;
}
#contactDetailPage .contact-detail-missing-card__actions {
justify-content: flex-start;
}
#contactDetailPage .contact-detail-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
#contactDetailPage .contact-detail-breadcrumb {
width: 100%;
border-radius: 12px;
}
#contactDetailPage .contact-detail-hero__top {
flex-direction: column;
align-items: stretch;
}
#contactDetailPage .contact-detail-actions {
justify-content: flex-start;
}
#contactDetailPage .contact-detail-actions .btn {
flex: 1 1 190px;
justify-content: center;
}
#contactDetailPage .contact-detail-grid,
#contactDetailPage .contact-doc-grid {
grid-template-columns: 1fr;
}
#contactDetailPage .contact-detail-item--wide {
grid-column: auto;
}
#contactDetailPage .contact-doc-card__preview {
height: 120px;
}
}
@media (max-width: 560px) {
#contactDetailPage .contact-detail-breadcrumb {
font-size: 0.76rem;
}
#contactDetailPage .contact-detail-avatar {
width: 66px;
height: 66px;
}
}
@media (prefers-reduced-motion: reduce) {
#contactDetailPage .contact-doc-card,
#contactDetailPage .contact-doc-card__overlay,
#contactDetailPage .contact-doc-card__open {
transition: none !important;
}
}
@media (max-width: 820px) {
.app-breadcrumb,
.page-breadcrumb,
#contactsPage .contacts-breadcrumb,
#contactDetailPage .contact-detail-breadcrumb {
display: none !important;
}
}
/* Settings refresh */
body#settingsPage:not(.profile-page) {
--settings-accent: #1f6a44;
--settings-accent-strong: #14532d;
--settings-accent-soft: #edf7f1;
}
body#settingsPage:not(.profile-page) .settings-tabs {
padding: 8px;
border: 1px solid #d2e2d8;
border-radius: 16px;
background: linear-gradient(140deg, #ffffff 0%, #f5faf7 100%);
box-shadow: 0 10px 24px rgba(20, 83, 45, 0.08);
margin-bottom: 16px;
}
body#settingsPage:not(.profile-page) .settings-tab {
border-radius: 999px;
}
body#settingsPage:not(.profile-page) .settings-tab.active {
border-color: #8ec3a6;
background: var(--settings-accent-soft);
color: var(--settings-accent-strong);
}
body#settingsPage:not(.profile-page) .section-card[data-settings-tab] {
border: 1px solid #d5e3da;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
body#settingsPage:not(.profile-page) .alert-group-card {
border-color: #d0e1d6;
background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
}
body#settingsPage:not(.profile-page) .input-with-unit:focus-within,
body#settingsPage:not(.profile-page) .form-grid input:focus,
body#settingsPage:not(.profile-page) .form-grid select:focus,
body#settingsPage:not(.profile-page) .alert-settings-form select:focus {
border-color: var(--settings-accent);
box-shadow: 0 0 0 3px rgba(31, 106, 68, 0.18);
}
body#settingsPage:not(.profile-page) .settings-general-hub {
display: grid;
gap: 14px;
background: linear-gradient(135deg, #ffffff 0%, #eef7f1 52%, #f8fbf9 100%);
border-color: #c9dccf;
position: relative;
}
body#settingsPage:not(.profile-page) .settings-general-hub__head {
padding-right: min(44vw, 430px);
}
body#settingsPage:not(.profile-page)
.settings-general-hub__head
.settings-paragraph {
margin-top: 6px;
max-width: 68ch;
}
body#settingsPage:not(.profile-page) .settings-general-hub__stats {
display: grid;
grid-template-columns: repeat(5, minmax(120px, 1fr));
gap: 10px;
}
body#settingsPage:not(.profile-page) .settings-general-stat {
border: 1px solid #cbddd1;
border-radius: 12px;
background: rgba(255, 255, 255, 0.94);
padding: 11px 12px;
display: grid;
gap: 6px;
}
body#settingsPage:not(.profile-page) .settings-general-stat span {
font-size: 0.76rem;
color: #516559;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
body#settingsPage:not(.profile-page) .settings-general-stat strong {
font-size: clamp(1rem, 1.9vw, 1.35rem);
color: #0f172a;
line-height: 1.1;
}
body#settingsPage:not(.profile-page) .settings-general-hub__actions {
position: absolute;
top: 1.9rem;
right: 2rem;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
z-index: 1;
}
body#settingsPage:not(.profile-page)
.settings-general-hub__actions
.btn.primary {
background: linear-gradient(
180deg,
var(--settings-accent) 0%,
var(--settings-accent-strong) 100%
);
border-color: transparent;
}
body#settingsPage:not(.profile-page) .settings-general-hub__actions .btn.ghost {
border-color: #bfd6c6;
background: #ffffff;
color: #1b4f34;
}
@media (max-width: 1100px) {
body#settingsPage:not(.profile-page) .settings-general-hub__head {
padding-right: min(48vw, 390px);
}
body#settingsPage:not(.profile-page) .settings-general-hub__stats {
grid-template-columns: repeat(3, minmax(120px, 1fr));
}
}
@media (max-width: 980px) {
body#settingsPage:not(.profile-page) .settings-general-hub__head {
padding-right: 0;
}
body#settingsPage:not(.profile-page) .settings-general-hub__actions {
position: static;
top: auto;
right: auto;
justify-content: flex-start;
margin-top: 2px;
}
}
@media (max-width: 760px) {
body#settingsPage:not(.profile-page) .settings-general-hub__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body#settingsPage:not(.profile-page) .settings-general-hub__actions .btn {
width: 100%;
justify-content: center;
}
}
/* Contacts add user */
#contactsPage .contacts-admin-create {
margin-bottom: 14px;
border-color: #cfe4ec;
background: linear-gradient(140deg, #ffffff 0%, #f2fbfe 100%);
box-shadow: 0 10px 28px rgba(8, 145, 178, 0.08);
}
#contactsPage .contacts-admin-create__head {
margin-bottom: 10px;
}
#contactsPage .contacts-admin-create__head p {
margin: 6px 0 0;
color: #475569;
font-size: 0.88rem;
}
#contactsPage .contacts-admin-create__trigger {
min-height: 42px;
}
#contactsPage .contacts-mobile-add-btn {
margin: 0;
}
#contactsPage .contacts-workspace .contacts-admin-create {
margin-bottom: 0;
}
#contactsPage .contacts-add-user-modal .modal-content {
width: min(92vw, 760px);
max-width: 760px;
text-align: left;
}
#contactsPage .contacts-add-user-form {
display: grid;
grid-template-columns: repeat(4, minmax(180px, 1fr));
gap: 10px;
align-items: end;
}
#contactsPage .contacts-add-user-form--modal {
margin-top: 12px;
grid-template-columns: repeat(2, minmax(220px, 1fr));
}
#contactsPage .contacts-add-user-form--modal .field--full {
grid-column: 1 / -1;
}
#contactsPage .contacts-role-more {
display: grid;
gap: 8px;
}
#contactsPage .contacts-role-more summary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0.58rem 0.8rem;
border: 1px dashed #c5d4ea;
border-radius: 10px;
background: #fff;
color: #475569;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
list-style: none;
transition:
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease;
}
#contactsPage .contacts-role-more summary::-webkit-details-marker {
display: none;
}
#contactsPage .contacts-role-more summary:hover {
border-color: #93c5fd;
color: #1e40af;
}
#contactsPage .contacts-role-more[open] summary {
background: #f8fbff;
border-color: #bfd4f6;
color: #1e40af;
}
#contactsPage .contacts-role-more[open] summary {
display: none;
}
#contactsPage .contacts-role-more__options {
display: grid;
gap: 8px;
}
#contactsPage .contacts-add-user-form .field {
display: grid;
gap: 5px;
}
#contactsPage .contacts-add-user-form .field label {
font-size: 0.8rem;
font-weight: 700;
color: #334155;
}
#contactsPage .contacts-add-user-form .field input,
#contactsPage .contacts-add-user-form .field select {
border: 1px solid #cbdbe8;
border-radius: 10px;
padding: 10px 11px;
background: #fff;
}
#contactsPage .contacts-add-user-form .field input:focus,
#contactsPage .contacts-add-user-form .field select:focus {
border-color: #0891b2;
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.16);
outline: none;
}
#contactsPage .contacts-add-user-form__submit {
min-height: 42px;
}
#contactsPage .contacts-add-user-form--modal .contacts-add-user-form__submit {
grid-column: 1 / -1;
}
@media (max-width: 1180px) {
#contactsPage .contacts-add-user-form {
grid-template-columns: repeat(2, minmax(180px, 1fr));
}
#contactsPage .contacts-add-user-form__submit {
grid-column: 1 / -1;
width: 100%;
}
}
@media (max-width: 980px) {
#contactsPage .contacts-admin-create {
display: none;
}
#contactsPage .contacts-admin-create__trigger {
width: 100%;
justify-content: center;
}
}
@media (max-width: 620px) {
#contactsPage .contacts-add-user-form {
grid-template-columns: 1fr;
}
#contactsPage .contacts-add-user-modal .modal-content {
width: 100% !important;
max-width: 100% !important;
}
}
/* Contact detail admin */
#contactDetailPage .contact-detail-admin {
border-color: #d0e4eb;
background: linear-gradient(145deg, #ffffff 0%, #f4fbfe 100%);
}
#contactDetailPage .contact-detail-admin__summary {
margin: 0;
color: #516173;
font-size: 0.88rem;
}
#contactDetailPage .contact-detail-admin__actions {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#contactDetailPage .contact-edit-modal .modal-content {
width: min(92vw, 560px);
max-width: 560px;
text-align: left;
}
#contactDetailPage .contact-detail-admin-form {
display: grid;
gap: 10px;
}
#contactDetailPage .contact-detail-admin-form .field {
display: grid;
gap: 5px;
}
#contactDetailPage .contact-detail-admin-form__inline-fields {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 8px;
}
#contactDetailPage .contact-detail-admin-form__inline-field {
min-width: 0;
}
#contactDetailPage .contact-detail-admin-form label {
font-size: 0.8rem;
font-weight: 700;
color: #334155;
}
#contactDetailPage .contact-detail-admin-form input,
#contactDetailPage .contact-detail-admin-form select {
border: 1px solid #cbdbe8;
border-radius: 10px;
padding: 10px 11px;
background: #fff;
}
#contactDetailPage .contact-detail-admin-form input:focus,
#contactDetailPage .contact-detail-admin-form select:focus {
border-color: #0891b2;
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.16);
outline: none;
}
#contactDetailPage .contact-detail-admin-form--modal {
margin-top: 12px;
}
@media (min-width: 681px) {
#contactDetailPage .contact-detail-admin-form--modal {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
#contactDetailPage .contact-detail-admin-form--delete-modal {
grid-template-columns: minmax(0, 1fr);
}
#contactDetailPage
.contact-detail-admin-form--delete-modal
> .contact-detail-admin-delete {
grid-column: 1 / -1;
}
#contactDetailPage .contact-detail-admin-form--modal .field--full,
#contactDetailPage .contact-detail-admin-form--modal > button[type="submit"] {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
#contactDetailPage .contact-detail-admin-form__inline-fields {
grid-template-columns: 1fr;
}
}
#contactDetailPage .contact-detail-admin-delete {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #d7e6ec;
display: grid;
gap: 8px;
}
#contactDetailPage .contact-detail-admin-delete p {
margin: 0;
font-size: 0.82rem;
color: #64748b;
}
#contactDetailPage .contact-detail-admin-delete .btn[disabled] {
cursor: not-allowed;
opacity: 0.58;
}
@media (max-width: 620px) {
#contactDetailPage .contact-detail-admin__actions .btn {
width: 100%;
justify-content: center;
}
}
#homePage .home-alarm-banner {
--home-alarm-accent: #b45309;
--home-alarm-border: rgba(148, 163, 184, 0.24);
margin: 0 0 22px;
padding: 18px 20px;
border-radius: 18px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px 20px;
align-items: center;
border: 1px solid var(--home-alarm-border);
border-left: 4px solid var(--home-alarm-accent);
background: #ffffff;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
#homePage .home-alarm-banner--danger {
--home-alarm-accent: #b91c1c;
}
#homePage .home-alarm-banner--warning {
--home-alarm-accent: #b45309;
}
#homePage .home-alarm-banner--success {
--home-alarm-accent: #166534;
}
#homePage .home-alarm-banner__main {
min-width: 0;
display: grid;
gap: 10px;
}
#homePage .home-alarm-banner__header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
#homePage .home-alarm-banner__icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--home-alarm-accent);
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.18);
}
#homePage .home-alarm-banner__icon svg {
width: 18px;
height: 18px;
}
#homePage .home-alarm-banner__intro {
min-width: 0;
}
#homePage .home-alarm-banner__eyebrow {
margin: 0 0 2px;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #64748b;
font-weight: 700;
}
#homePage .home-alarm-banner__intro h2 {
margin: 0;
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
line-height: 1.2;
color: #0f172a;
}
#homePage .home-alarm-banner__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#homePage .home-alarm-banner__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border-radius: 999px;
background: transparent;
border: 0;
color: #475569;
font-size: 0.9rem;
}
#homePage .home-alarm-banner__meta-item svg {
width: 13px;
height: 13px;
color: #64748b;
}
#homePage .home-alarm-banner__action {
display: flex;
align-items: center;
}
#homePage .home-alarm-banner__form {
margin: 0;
}
#homePage .home-alarm-banner__action .btn,
#homePage .home-alarm-banner__form .btn {
min-width: 190px;
justify-content: center;
}
#homePage .home-alarm-banner__state {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: #ffffff;
font-size: 0.78rem;
font-weight: 700;
color: #475569;
white-space: nowrap;
}
#homePage .home-alarm-banner__state--danger {
color: #b91c1c;
border-color: rgba(220, 38, 38, 0.24);
}
#homePage .home-alarm-banner__state--warning {
color: #b45309;
border-color: rgba(245, 158, 11, 0.26);
}
#homePage .home-alarm-banner__state--success {
color: #166534;
border-color: rgba(34, 197, 94, 0.24);
}
#alarmPage .alarm-stats {
margin-bottom: 24px;
}
#alarmPage .alarm-stats .fleet-stat {
cursor: default;
transition: none;
}
#alarmPage .alarm-stats .fleet-stat:hover,
#alarmPage .alarm-stats .fleet-stat.active {
transform: none;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
background: var(--card);
}
@media (max-width: 840px) {
#settingsPage .settings-credentials-grid {
grid-template-columns: 1fr;
}
#settingsPage .settings-sensitive-head,
#settingsPage .settings-token-panel__head,
#settingsPage .alert-settings-actions {
grid-template-columns: 1fr;
display: grid;
}
}
#alarmPage .alarm-board {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
gap: 24px;
align-items: stretch;
}
#alarmPage .alarm-board__list,
#alarmPage .alarm-board__action {
min-width: 0;
}
#alarmPage .alarm-board__list {
order: 2;
}
#alarmPage .alarm-board__action {
order: 1;
position: sticky;
top: 18px;
}
#alarmPage .alarm-board__action > .section-card {
margin-bottom: 0;
}
#alarmPage .alarm-mobile-action-launch {
display: none;
margin-bottom: 12px;
}
#alarmPage .alarm-action-modal-close {
display: none;
}
#alarmPage .alarm-action-backdrop {
display: none;
}
#alarmPage .alarm-lane + .alarm-lane {
margin-top: 20px;
}
#alarmPage .alarm-lane--tabs {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-height: 0;
}
#alarmPage .alarm-lane__head--tabs {
margin-bottom: 14px;
}
#alarmPage .alarm-lane-tabs {
display: inline-flex;
gap: 8px;
padding: 4px;
border-radius: 999px;
background: rgba(226, 232, 240, 0.72);
}
#alarmPage .alarm-lane-tab {
border: 0;
border-radius: 999px;
background: transparent;
color: #334155;
font-size: 0.78rem;
font-weight: 700;
padding: 8px 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
}
#alarmPage .alarm-lane-tab span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
border-radius: 999px;
padding: 0 6px;
background: rgba(148, 163, 184, 0.25);
color: #1e293b;
font-size: 0.7rem;
}
#alarmPage .alarm-lane-tab.is-active {
background: #fff;
color: #0f172a;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
#alarmPage .alarm-tab-pane {
display: none;
min-height: 0;
}
#alarmPage .alarm-tab-pane.is-active {
display: block;
min-height: 0;
}
#alarmPage .alarm-lane__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
#alarmPage .alarm-lane__count {
min-width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.06);
color: #0f172a;
font-weight: 700;
}
#alarmPage .alarm-empty-state {
padding: 18px;
border-radius: 18px;
border: 1px dashed #cbd5e1;
background: #f8fafc;
color: #64748b;
}
#alarmPage [data-alarm-ride-search-empty].is-hidden {
display: none;
}
#alarmPage .alarm-empty-state--large {
display: grid;
gap: 14px;
padding: 28px;
}
#alarmPage .alarm-empty-state--large p {
margin: 0;
}
#alarmPage .alarm-ride-list {
display: grid;
gap: 14px;
}
#alarmPage .alarm-ride-search {
margin-bottom: 12px;
}
#alarmPage .alarm-ride-search__input {
width: 100%;
height: 42px;
border: 1px solid #cfd9e6;
border-radius: 12px;
background: #fff;
color: #0f172a;
padding: 0 12px;
font-size: 0.9rem;
}
#alarmPage .alarm-ride-search__input::placeholder {
color: #94a3b8;
}
#alarmPage .alarm-ride-search__input:focus {
outline: none;
border-color: #93c5fd;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
#alarmPage .alarm-live-indicator {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-size: 0.72rem;
font-weight: 700;
color: #b45309;
text-transform: uppercase;
letter-spacing: 0.03em;
}
#alarmPage .alarm-live-indicator__dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: #f59e0b;
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
animation: alarmLivePulse 1.6s ease-out infinite;
}
@keyframes alarmLivePulse {
0% {
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
}
70% {
box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
}
}
#alarmPage .alarm-ride-card {
border: 1px solid #e2e8f0;
border-radius: 22px;
overflow: hidden;
background: #fff;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
#alarmPage .alarm-ride-card.is-hidden {
display: none;
}
#alarmPage .alarm-ride-card.is-selected {
border-color: rgba(37, 99, 235, 0.26);
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
}
#alarmPage .alarm-ride-card:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}
#alarmPage .alarm-ride-card__link {
display: grid;
gap: 8px;
padding: 12px 14px;
border: 0;
outline: none;
box-shadow: none;
color: inherit;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
#alarmPage .alarm-ride-card__link:focus,
#alarmPage .alarm-ride-card__link:active,
#alarmPage .alarm-ride-card__link:focus-visible {
outline: none;
box-shadow: none;
}
#alarmPage .alarm-ride-card__link::-webkit-details-marker {
display: none;
}
#alarmPage .alarm-ride-card__link::marker {
content: "";
}
#alarmPage .alarm-ride-card__expand {
display: grid;
gap: 14px;
padding: 0 18px 18px;
border-top: 1px solid #eef2f7;
}
#alarmPage .alarm-ride-card[open] .alarm-ride-card__expand {
border-top: 0;
}
#alarmPage .alarm-ride-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
#alarmPage .alarm-ride-card__note {
display: inline-flex;
align-items: center;
gap: 8px;
margin: -2px 0 0;
color: #64748b;
font-size: 0.78rem;
line-height: 1.45;
}
#alarmPage .alarm-ride-card__note svg {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: #94a3b8;
}
#alarmPage .alarm-ride-card__inline-form {
margin: 0;
}
#alarmPage .alarm-action-btn {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid transparent;
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease,
transform 180ms ease,
box-shadow 180ms ease;
}
#alarmPage .alarm-action-btn:hover {
transform: translateY(-1px);
}
#alarmPage .alarm-action-btn svg {
width: 15px;
height: 15px;
}
#alarmPage .alarm-action-btn--open {
background: rgba(37, 99, 235, 0.1);
border-color: rgba(37, 99, 235, 0.18);
color: #1d4ed8;
}
#alarmPage .alarm-action-btn--open:hover {
background: rgba(37, 99, 235, 0.16);
border-color: rgba(37, 99, 235, 0.26);
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
}
#alarmPage .alarm-action-btn--confirm {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.22);
color: #166534;
}
#alarmPage .alarm-action-btn--confirm:hover {
background: rgba(34, 197, 94, 0.18);
border-color: rgba(22, 163, 74, 0.28);
box-shadow: 0 10px 20px rgba(34, 197, 94, 0.12);
}
#alarmPage .alarm-action-btn--danger {
background: rgba(226, 232, 240, 0.7);
border-color: rgba(203, 213, 225, 0.95);
color: #475569;
}
#alarmPage .alarm-action-btn--danger:hover {
background: rgba(226, 232, 240, 0.95);
border-color: rgba(148, 163, 184, 0.75);
box-shadow: 0 10px 20px rgba(148, 163, 184, 0.2);
}
#alarmPage .alarm-ride-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#alarmPage .alarm-ride-card__when {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
flex: 0 0 auto;
gap: 6px;
min-width: 0;
}
#alarmPage .alarm-ride-card__when strong {
margin: 0;
color: #0f172a;
font-size: 0.84rem;
line-height: 1.1;
}
#alarmPage .alarm-ride-card__when span {
color: #64748b;
font-size: 0.84rem;
line-height: 1.1;
}
@media (min-width: 768px) {
#alarmPage .alarm-ride-card__when {
display: grid;
gap: 1px;
min-width: 72px;
}
#alarmPage .alarm-ride-card__when strong {
font-size: 0.95rem;
}
#alarmPage .alarm-ride-card__when span {
font-size: 0.74rem;
line-height: 1.2;
}
}
#alarmPage .alarm-ride-card__identity {
min-width: 0;
flex: 1 1 auto;
}
#alarmPage .alarm-ride-card__identity h3 {
margin: 0 0 2px;
font-size: 0.95rem;
line-height: 1.25;
}
#alarmPage .alarm-ride-card__identity p {
margin: 0;
color: #64748b;
font-size: 0.84rem;
}
#alarmPage .alarm-ride-card__identity-note {
display: inline-flex;
margin-top: 3px;
color: #94a3b8;
font-size: 0.72rem;
line-height: 1.35;
}
#alarmPage .alarm-ride-card__layers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#alarmPage .alarm-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 9px;
border-radius: 999px;
font-size: 0.69rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
#alarmPage .alarm-status-badge--danger {
color: #991b1b;
background: rgba(254, 226, 226, 0.95);
}
#alarmPage .alarm-status-badge--warning {
color: #92400e;
background: rgba(254, 243, 199, 0.95);
}
#alarmPage .alarm-status-badge--success {
color: #166534;
background: rgba(220, 252, 231, 0.95);
}
#alarmPage .alarm-status-badge--neutral {
color: #334155;
background: rgba(226, 232, 240, 0.95);
}
#alarmPage .alarm-status-badge--planned {
color: #7e22ce;
background: rgba(243, 232, 255, 0.98);
border: 1px solid rgba(216, 180, 254, 0.9);
}
#alarmPage .alarm-layer-pill {
display: grid;
gap: 2px;
min-width: 0;
width: 100%;
padding: 10px 12px;
border-radius: 16px;
font-size: 0.82rem;
font-weight: 600;
}
#alarmPage .alarm-layer-pill strong {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
#alarmPage .alarm-layer-pill__label {
color: inherit;
font-size: 0.85rem;
font-weight: 700;
}
#alarmPage .alarm-layer-pill__detail {
color: inherit;
opacity: 0.8;
font-size: 0.78rem;
line-height: 1.35;
}
#alarmPage .alarm-layer-pill--danger {
color: #991b1b;
background: rgba(254, 226, 226, 0.96);
}
#alarmPage .alarm-layer-pill--warning {
color: #92400e;
background: rgba(254, 243, 199, 0.96);
}
#alarmPage .alarm-layer-pill--success {
color: #166534;
background: rgba(220, 252, 231, 0.96);
}
#alarmPage .alarm-layer-pill--admin {
color: #4338ca;
background: rgba(224, 231, 255, 0.96);
}
#alarmPage .alarm-layer-pill--neutral {
color: #334155;
background: rgba(226, 232, 240, 0.95);
}
#alarmPage .alarm-mobile-inline {
display: none;
padding: 0 18px 18px;
}
#alarmPage .alarm-action-card,
#alarmPage .alarm-driver-panel {
display: grid;
gap: 18px;
}
#alarmPage .alarm-action-card__summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 4px;
}
#alarmPage .alarm-action-card__summary h2 {
margin: 0 0 1px;
font-size: 1.15rem;
}
#alarmPage .alarm-action-card__summary p {
margin: 0;
color: #64748b;
}
#alarmPage .alarm-kicker {
margin: 0 0 24px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #2563eb;
}
#alarmPage .alarm-form,
#alarmPage .alarm-form__section {
display: grid;
gap: 16px;
}
#alarmPage .alarm-form__section-head p {
margin: 6px 0 0;
}
#alarmPage .alarm-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
#alarmPage .alarm-form-grid .field--full {
grid-column: 1 / -1;
}
#alarmPage .alarm-toggle-row {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
#alarmPage .alarm-toggle-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid #dbe4ee;
background: linear-gradient(
180deg,
rgba(248, 250, 252, 0.92) 0%,
rgba(255, 255, 255, 1) 100%
);
cursor: pointer;
transition:
border-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
}
#alarmPage .alarm-toggle-card:hover {
border-color: rgba(37, 99, 235, 0.32);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
#alarmPage .alarm-toggle-card__copy {
display: grid;
gap: 4px;
}
#alarmPage .alarm-toggle-card__copy strong {
color: #0f172a;
font-size: 0.96rem;
}
#alarmPage .alarm-toggle-card__copy span {
color: #64748b;
font-size: 0.88rem;
line-height: 1.45;
}
#alarmPage .alarm-driver-id-hint {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start;
gap: 12px;
margin-top: 10px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(226, 232, 240, 0.96);
background: rgba(248, 250, 252, 0.92);
opacity: 1;
transform: translateY(0);
transition:
opacity 180ms ease,
transform 220ms ease,
margin-top 220ms ease;
}
#alarmPage .alarm-driver-id-hint-wrap {
max-height: 160px;
overflow: hidden;
transition:
max-height 240ms ease,
opacity 180ms ease;
}
#alarmPage .alarm-driver-id-hint-wrap.is-hidden {
max-height: 0;
overflow: hidden;
}
#alarmPage .alarm-driver-id-hint.is-hidden,
#alarmPage .alarm-driver-id-hint__link.is-hidden {
display: none;
}
#alarmPage .alarm-driver-id-hint-wrap.is-hidden .alarm-driver-id-hint {
opacity: 0;
transform: translateY(-6px);
margin-top: 0;
}
#alarmPage .alarm-driver-id-hint__copy {
display: grid;
gap: 3px;
}
#alarmPage .alarm-driver-id-hint__copy strong {
color: #0f172a;
font-size: 0.8rem;
}
#alarmPage .alarm-driver-id-hint__copy span {
color: #64748b;
font-size: 0.79rem;
line-height: 1.45;
}
#alarmPage .alarm-driver-id-hint__link {
color: #2563eb;
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
#alarmPage .alarm-driver-id-hint__link:hover {
color: #1d4ed8;
}
@media (min-width: 1100px) {
#alarmPage .alarm-board__list {
overflow: hidden;
}
#alarmPage .alarm-board__list > .section-card {
margin-bottom: 0;
height: 100%;
}
#alarmPage .alarm-lane--tabs {
height: 100%;
overflow: hidden;
}
#alarmPage .alarm-tab-pane.is-active {
height: 100%;
overflow-y: visible;
padding-right: 4px;
}
}
#alarmPage .field {
position: relative;
}
#alarmPage .alarm-driver-search-dropdown {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 12;
display: grid;
gap: 4px;
max-height: 220px;
overflow-y: auto;
padding: 6px;
border: 1px solid #cfd9e6;
border-radius: 10px;
background: rgba(255, 255, 255, 0.99);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}
#alarmPage .alarm-driver-search-dropdown.is-hidden {
display: none;
}
#alarmPage .alarm-driver-search-option {
display: block;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: #0f172a;
text-align: left;
cursor: pointer;
transition: background-color 160ms ease;
}
#alarmPage .alarm-driver-search-option:hover,
#alarmPage .alarm-driver-search-option.is-active {
background: rgba(37, 99, 235, 0.08);
}
#alarmPage .alarm-toggle {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
#alarmPage .alarm-toggle input {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
#alarmPage .alarm-toggle > span {
position: relative;
display: inline-flex;
width: 56px;
height: 32px;
border-radius: 999px;
background: #cbd5e1;
transition:
background-color 180ms ease,
box-shadow 180ms ease;
}
#alarmPage .alarm-toggle > span::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 24px;
height: 24px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
transition: transform 180ms ease;
}
#alarmPage .alarm-toggle input:checked + span {
background: #22c55e;
}
#alarmPage .alarm-toggle input:checked + span::after {
transform: translateX(24px);
}
#alarmPage .alarm-toggle input:focus-visible + span {
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}
#alarmPage .alarm-form__help span,
#alarmPage .alarm-driver-panel__head p {
margin: 0;
color: #64748b;
}
#alarmPage .alarm-form__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 4px;
}
#alarmPage .alarm-form__help {
display: grid;
gap: 4px;
max-width: 420px;
}
#alarmPage .alarm-driver-panel__head h2,
#alarmPage .alarm-driver-panel__head h4 {
margin: 0;
}
#alarmPage .alarm-driver-focus {
padding: 18px;
border-radius: 20px;
background: linear-gradient(
135deg,
rgba(255, 251, 235, 0.98) 0%,
rgba(255, 255, 255, 1) 100%
);
border: 1px solid rgba(245, 158, 11, 0.18);
display: grid;
gap: 8px;
}
#alarmPage .alarm-driver-panel__form {
margin-top: 8px;
}
#alarmPage .alarm-driver-panel__status {
display: inline-flex;
padding: 10px 12px;
border-radius: 14px;
font-weight: 700;
}
#alarmPage .alarm-driver-panel__status--danger {
color: #991b1b;
background: rgba(254, 226, 226, 0.96);
}
#alarmPage .alarm-driver-panel__status--warning {
color: #92400e;
background: rgba(254, 243, 199, 0.96);
}
#alarmPage .alarm-driver-panel__status--success {
color: #166534;
background: rgba(220, 252, 231, 0.96);
}
#alarmPage .alarm-driver-panel__status--neutral {
color: #334155;
background: rgba(226, 232, 240, 0.95);
}
#alarmPage .btn--wide {
width: 100%;
justify-content: center;
}
@media (max-width: 1180px) {
#alarmPage .alarm-board {
grid-template-columns: 1fr;
}
#alarmPage .alarm-board__action {
position: static;
}
}
@media (max-width: 840px) {
#homePage .home-alarm-banner {
grid-template-columns: 1fr;
gap: 14px;
}
#homePage .home-alarm-banner__action {
width: 100%;
}
#homePage .home-alarm-banner__action .btn,
#homePage .home-alarm-banner__form,
#homePage .home-alarm-banner__form .btn {
width: 100%;
min-width: 0;
}
#homePage .home-alarm-banner__header {
grid-template-columns: auto minmax(0, 1fr);
}
#homePage .home-alarm-banner__state {
grid-column: 1 / -1;
justify-self: start;
}
#alarmPage .alarm-form__footer {
grid-template-columns: 1fr;
display: grid;
}
#alarmPage .alarm-form-grid {
grid-template-columns: 1fr;
}
#alarmPage .alarm-driver-id-hint {
grid-template-columns: 1fr;
display: grid;
}
#alarmPage .alarm-mobile-action-launch {
display: block;
}
#alarmPage .alarm-board__action {
display: none;
position: fixed;
left: max(8px, env(safe-area-inset-left));
right: max(8px, env(safe-area-inset-right));
top: max(8px, env(safe-area-inset-top));
bottom: calc(
var(--app-mobile-nav-height, 74px) + env(safe-area-inset-bottom) + 8px
);
z-index: 1200;
overflow: hidden;
background: transparent;
}
#alarmPage.is-action-modal-open .alarm-board__action {
display: block;
}
#alarmPage .alarm-board__action > .section-card {
position: relative;
height: 100%;
max-height: 100%;
overflow-y: auto;
border-radius: 16px;
}
#alarmPage .alarm-action-modal-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 34px;
height: 34px;
border: 1px solid #dbe4f2;
border-radius: 10px;
background: #fff;
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
}
#alarmPage .alarm-action-modal-close svg {
width: 16px;
height: 16px;
}
#alarmPage .alarm-action-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 1080;
background: rgba(15, 23, 42, 0.4);
}
#alarmPage.is-action-modal-open .alarm-action-backdrop {
display: block;
}
#alarmPage .alarm-mobile-inline {
display: block;
}
#alarmPage .alarm-board__list {
order: 1;
width: 100%;
min-width: 0;
}
#alarmPage .alarm-board__list > .section-card {
margin-bottom: 0;
min-width: 0;
overflow: hidden;
}
#alarmPage .alarm-lane--tabs,
#alarmPage .alarm-lane__head--tabs,
#alarmPage .alarm-tab-pane {
min-width: 0;
}
#alarmPage .alarm-lane__head--tabs {
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
#alarmPage .alarm-lane-tabs {
width: 100%;
max-width: 100%;
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scroll-snap-type: x mandatory;
}
#alarmPage .alarm-lane-tab {
flex: 0 0 calc((100% - 8px) / 2);
min-width: 0;
justify-content: center;
scroll-snap-align: start;
}
#alarmPage .alarm-ride-card__expand {
padding: 0 14px 14px;
}
#alarmPage .alarm-ride-card__actions {
justify-content: stretch;
}
#alarmPage .alarm-ride-card__actions .btn,
#alarmPage .alarm-ride-card__actions .alarm-action-btn {
width: 100%;
justify-content: center;
}
}
body.alarm-modal-scroll-lock {
overflow: hidden;
}
@media (max-width: 560px) {
#homePage .home-alarm-banner {
padding: 16px;
border-radius: 16px;
}
#homePage .home-alarm-banner__header {
gap: 10px;
}
#homePage .home-alarm-banner__icon {
width: 38px;
height: 38px;
border-radius: 10px;
}
#homePage .home-alarm-banner__meta {
display: grid;
grid-template-columns: 1fr;
}
#homePage .home-alarm-banner__meta-item {
width: 100%;
font-size: 0.88rem;
}
#alarmPage .alarm-ride-card__top,
#alarmPage .alarm-action-card__summary {
grid-template-columns: 1fr;
display: grid;
}
#alarmPage .alarm-ride-card__meta,
#alarmPage .alarm-ride-card__details,
#alarmPage .alarm-ride-card__layers {
flex-direction: column;
align-items: flex-start;
}
#alarmPage .alarm-ride-card__layers {
grid-template-columns: 1fr;
}
}
@media (min-width: 1120px) {
.app-shell--developer-mode {
padding-top: 54px;
padding-bottom: 52px;
}
.developer-mode-toolbar {
position: fixed;
left: 0;
right: 0;
z-index: 1200;
min-height: 44px;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(248, 250, 252, 0.96);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
color: #0f172a;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.developer-mode-toolbar--top {
top: 0;
}
.developer-mode-toolbar--bottom {
bottom: 0;
gap: 12px;
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}
.developer-mode-toolbar__section {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.developer-mode-toolbar__section--meta {
flex: 0 1 auto;
}
.developer-mode-toolbar__section--controls {
flex: 0 0 auto;
}
.developer-mode-toolbar__section--actions {
flex: 1 1 auto;
justify-content: flex-end;
}
.developer-mode-toolbar__tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 28px;
padding: 0 10px;
border-radius: 999px;
background: #0f172a;
color: #f8fafc;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.developer-mode-toolbar__text {
white-space: nowrap;
font-size: 0.8rem;
font-weight: 700;
color: #0f172a;
}
.developer-mode-toolbar__text--muted {
font-weight: 600;
color: #64748b;
}
.developer-mode-toolbar__text--muted.is-error {
color: #b91c1c;
}
.developer-mode-toolbar__field {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 0 8px;
height: 32px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #ffffff;
}
.developer-mode-toolbar__field span {
font-size: 0.74rem;
font-weight: 700;
color: #64748b;
white-space: nowrap;
}
.developer-mode-toolbar__field--scenario {
min-width: 260px;
}
.developer-mode-toolbar__select {
min-width: 110px;
border: 0;
background: transparent;
color: #0f172a;
font-size: 0.78rem;
font-weight: 600;
outline: none;
}
.developer-mode-toolbar__button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 12px;
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #ffffff;
color: #0f172a;
text-decoration: none;
font-size: 0.76rem;
font-weight: 700;
transition:
background-color 140ms ease,
border-color 140ms ease,
color 140ms ease;
}
.developer-mode-toolbar__button:hover,
.developer-mode-toolbar__button.is-active {
background: #0f172a;
border-color: #0f172a;
color: #ffffff;
}
.developer-mode-toolbar__button--primary {
background: #e2e8f0;
}
.developer-mode-toolbar__events {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 2px;
}
.developer-mode-log-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 360px;
padding: 0 10px;
height: 30px;
border: 1px solid #dbe4f2;
border-radius: 999px;
background: #ffffff;
color: #334155;
font-size: 0.74rem;
white-space: nowrap;
}
.developer-mode-log-chip strong,
.developer-mode-log-chip time {
font-size: 0.68rem;
font-weight: 800;
color: #64748b;
}
.developer-mode-log-chip span {
overflow: hidden;
text-overflow: ellipsis;
}
.developer-mode-log-chip--success {
border-color: rgba(34, 197, 94, 0.35);
}
.developer-mode-log-chip--warning {
border-color: rgba(245, 158, 11, 0.35);
}
.developer-mode-log-chip--error {
border-color: rgba(239, 68, 68, 0.35);
}
.app-shell--developer-mobile-preview .app-shell__main {
display: flex;
justify-content: center;
align-items: flex-start;
padding-left: 26px;
padding-right: 26px;
}
.app-shell--developer-mobile-preview .container {
width: 412px !important;
max-width: 412px !important;
min-height: 915px !important;
height: 915px !important;
overflow: auto !important;
margin: 0 auto !important;
border: 12px solid #0f172a;
border-radius: 34px;
background: #ffffff;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.08),
0 22px 54px rgba(15, 23, 42, 0.24);
}
body#locationsPage .app-shell--developer-mobile-preview .container {
overflow: hidden !important;
}
}
@media (max-width: 1119px) {
.developer-mode-toolbar {
display: none !important;
}
}
.access-toggle--inline {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 700;
}
/* Settings - Mailing tab */
#settingsPage .settings-mailing .settings-mailing-toolbar {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px);
gap: 12px;
margin: 10px 0 12px;
}
#settingsPage .settings-mailing .settings-mailing-toolbar .field {
margin: 0;
}
#settingsPage .settings-mailing .settings-mailing-toolbar .field span {
display: block;
font-size: 0.78rem;
color: #64748b;
margin-bottom: 6px;
font-weight: 700;
letter-spacing: 0.01em;
}
#settingsPage .settings-mailing .settings-mailing-toolbar input,
#settingsPage .settings-mailing .settings-mailing-toolbar select {
width: 100%;
}
#settingsPage .settings-mailing .settings-mailing-table-wrap {
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: auto;
background: #fff;
}
#settingsPage .settings-processes .settings-mailing-table-wrap {
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: auto;
background: #fff;
margin-top: 12px;
}
#settingsPage .settings-mailing .settings-mailing-table-wrap--cron {
max-height: 280px;
}
#settingsPage .settings-mailing .settings-mailing-table-wrap--mail {
max-height: 460px;
}
#settingsPage
.settings-mailing
.settings-mailing-table-wrap
.settings-table
thead
th {
position: sticky;
top: 0;
z-index: 1;
background: #f8fafc;
}
#settingsPage
.settings-processes
.settings-mailing-table-wrap
.settings-table
thead
th {
position: sticky;
top: 0;
z-index: 1;
background: #f8fafc;
}
@media (max-width: 720px) {
#settingsPage .settings-mailing .settings-mailing-toolbar {
grid-template-columns: 1fr;
}
}
/* Settings - Password reset table uses same layout as mailing */
#settingsPage .settings-password-resets .settings-password-toolbar {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px);
gap: 12px;
margin: 10px 0 12px;
}
#settingsPage .settings-password-resets .settings-password-toolbar .field {
margin: 0;
}
#settingsPage .settings-password-resets .settings-password-toolbar .field span {
display: block;
font-size: 0.78rem;
color: #64748b;
margin-bottom: 6px;
font-weight: 700;
letter-spacing: 0.01em;
}
#settingsPage .settings-password-resets .settings-password-toolbar input,
#settingsPage .settings-password-resets .settings-password-toolbar select {
width: 100%;
}
#settingsPage .settings-password-resets .settings-mailing-table-wrap {
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: auto;
background: #fff;
max-height: 460px;
}
#settingsPage
.settings-password-resets
.settings-mailing-table-wrap
.settings-table
thead
th {
position: sticky;
top: 0;
z-index: 1;
background: #f8fafc;
}
@media (max-width: 720px) {
#settingsPage .settings-password-resets .settings-password-toolbar {
grid-template-columns: 1fr;
}
}
#settingsPage .cron-chip-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#settingsPage .cron-process-detail {
display: grid;
gap: 8px;
}
#settingsPage .cron-error-list {
display: grid;
gap: 4px;
border-left: 3px solid #dc2626;
padding-left: 8px;
}
#settingsPage .cron-error-list span {
font-size: 0.78rem;
color: #991b1b;
}
#settingsPage .cron-chip {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid #dbe4f2;
border-radius: 999px;
padding: 3px 9px;
background: #f8fafc;
font-size: 0.78rem;
line-height: 1.2;
color: #1e293b;
}
#settingsPage .cron-chip i,
#settingsPage .cron-chip svg {
width: 12px;
height: 12px;
color: #64748b;
flex: 0 0 auto;
}
#settingsPage .cron-chip strong {
font-weight: 700;
color: #475569;
}
#settingsPage .cron-chip em {
font-style: normal;
font-weight: 800;
color: #0f172a;
}
#settingsPage .cron-chip--danger {
border-color: #fecaca;
background: #fef2f2;
}
#settingsPage .cron-chip--danger i,
#settingsPage .cron-chip--danger strong,
#settingsPage .cron-chip--danger em {
color: #b91c1c;
}
#settingsPage .cron-age {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 3px 8px;
min-width: 92px;
font-size: 0.74rem;
font-weight: 700;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#settingsPage .cron-age--fresh {
background: #dcfce7;
color: #166534;
}
#settingsPage .cron-age--warn {
background: #fef3c7;
color: #92400e;
}
#settingsPage .cron-age--stale {
background: #fee2e2;
color: #991b1b;
}
#settingsPage .log-datetime {
display: inline-flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
#settingsPage .log-datetime strong {
font-weight: 500;
color: #0f172a;
}
#settingsPage .log-datetime span {
font-size: 0.84em;
color: #64748b;
}
/* Settings - Developer mode */
#settingsPage .settings-developer-mode .settings-developer-mode__layout {
padding-left: 0;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
#settingsPage .settings-developer-mode .settings-developer-mode__status {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#settingsPage .settings-developer-mode .settings-developer-mode__status strong {
font-size: 0.82rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #64748b;
}
#settingsPage .settings-developer-mode .settings-developer-mode__badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 5px 10px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.01em;
}
#settingsPage .settings-developer-mode .settings-developer-mode__badge--on {
background: #dcfce7;
color: #166534;
}
#settingsPage .settings-developer-mode .settings-developer-mode__badge--off {
background: #fee2e2;
color: #991b1b;
}
#settingsPage .settings-developer-mode .settings-developer-mode__toggle {
padding: 2px 0;
border: 0;
border-radius: 0;
background: transparent;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
#settingsPage
.settings-developer-mode
.settings-developer-mode__toggle
input[type="checkbox"] {
margin: 0;
}
/* Trip logs */
#tripLogsPage .triplogs-kpi-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(4, minmax(200px, 1fr));
margin: 18px 0 26px;
}
#tripLogsPage .triplogs-kpi {
padding: 18px;
border: 1px solid #dbe1ea;
border-radius: 14px;
}
#tripLogsPage .triplogs-kpi__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
color: #475569;
font-weight: 700;
}
#tripLogsPage .triplogs-kpi strong {
display: block;
font-size: 1.8rem;
line-height: 1.1;
color: #0f172a;
}
#tripLogsPage .triplogs-kpi small {
color: #64748b;
}
#tripLogsPage .triplogs-kpi__warning {
color: #b45309;
}
#tripLogsPage .triplogs-filters-card {
margin: 8px 0 18px;
padding: 16px;
border: 1px solid #dbe4f2;
border-radius: 14px;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
#tripLogsPage .triplogs-filters {
display: grid;
gap: 10px;
}
#tripLogsPage .triplogs-filters-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
align-items: end;
}
#tripLogsPage .triplogs-filters .field {
margin: 0;
min-width: 0;
}
#tripLogsPage .triplogs-filters .field span {
display: block;
margin-bottom: 4px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #64748b;
}
#tripLogsPage .triplogs-field-date-range {
grid-column: auto;
}
#tripLogsPage .triplogs-date-range {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: end;
gap: 8px;
}
#tripLogsPage .triplogs-date-range label {
display: grid;
gap: 4px;
}
#tripLogsPage .triplogs-date-range label span {
margin: 0;
font-size: 0.72rem;
color: #94a3b8;
}
#tripLogsPage .triplogs-date-range__sep {
align-self: center;
color: #94a3b8;
font-weight: 700;
margin-top: 14px;
}
#tripLogsPage .triplogs-field-vehicle,
#tripLogsPage .triplogs-field-driver {
grid-column: auto;
}
#tripLogsPage .triplogs-field-search {
min-width: 0;
}
#tripLogsPage .triplogs-field-search input {
width: 100%;
}
#tripLogsPage .triplogs-filter-actions {
display: flex;
align-items: center;
gap: 10px;
}
#tripLogsPage .triplogs-result-count {
color: #64748b;
margin: 22px 0 14px;
}
#tripLogsPage .table-wrap {
overflow-x: visible;
}
/* dezelfde basislook als settings-tabellen */
#tripLogsPage .settings-mailing-table-wrap {
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: auto;
background: #fff;
margin-bottom: 20px;
}
#tripLogsPage .settings-mailing-table-wrap--mail {
max-height: none;
}
#tripLogsPage .settings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
text-align: left;
}
#tripLogsPage .settings-table th,
#tripLogsPage .settings-table td {
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--border);
}
#tripLogsPage .settings-table th {
color: var(--muted);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.03em;
white-space: nowrap;
}
#tripLogsPage .settings-table td {
color: var(--text);
vertical-align: middle;
}
#tripLogsPage .settings-mailing-table-wrap--mail .settings-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: #f8fafc;
}
#tripLogsPage .settings-table td.triplogs-col-datetime {
white-space: nowrap;
}
#tripLogsPage .settings-table tr:hover td {
background: #f9fafb;
}
#tripLogsPage .settings-table tr.triplogs-row-live td {
background: #f0fdf4;
}
#tripLogsPage .settings-table tr.triplogs-row-live:hover td {
background: #dcfce7;
}
#tripLogsPage .triplogs-sort-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: inherit;
}
#tripLogsPage .triplogs-sort-link svg {
width: 14px;
height: 14px;
}
#tripLogsPage .triplogs-sort-link.is-active {
color: #0f172a;
}
#tripLogsPage .triplogs-subline {
display: block;
margin-top: 2px;
font-size: 0.78rem;
color: #64748b;
}
#tripLogsPage .triplogs-speed-danger {
color: #b91c1c;
font-weight: 700;
}
#tripLogsPage .triplogs-muted {
color: #94a3b8;
}
#tripLogsPage .triplogs-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 3px 10px;
font-size: 0.76rem;
font-weight: 700;
}
#tripLogsPage .triplogs-badge--events {
background: #fef3c7;
color: #92400e;
}
#tripLogsPage .triplogs-badge--ok {
background: #dcfce7;
color: #166534;
}
#tripLogsPage .triplogs-badge--warning {
background: #fef3c7;
color: #92400e;
}
#tripLogsPage .triplogs-badge--incident {
background: #fee2e2;
color: #b91c1c;
}
#tripLogsPage .triplogs-badge--live {
margin-left: 6px;
background: #dcfce7;
color: #166534;
border: 1px solid #86efac;
gap: 6px;
}
#tripLogsPage .triplogs-badge--live.is-hidden {
display: none;
}
#tripLogsPage .triplogs-live-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #16a34a;
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
animation: triplogsLivePulse 1.8s ease-out infinite;
}
@keyframes triplogsLivePulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
}
70% {
box-shadow: 0 0 0 7px rgba(22, 163, 74, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
}
}
#tripLogsPage .triplogs-details-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #0f172a;
font-weight: 700;
}
#tripLogsPage .triplogs-details-link svg {
width: 14px;
height: 14px;
}
#tripLogsPage .triplogs-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 24px 0 4px;
}
#tripLogsPage .triplogs-pagination__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #0f172a;
}
#tripLogsPage .triplogs-pagination__link.is-disabled {
pointer-events: none;
color: #94a3b8;
}
#tripLogsPage .triplogs-pagination__current {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid #dbe4f2;
}
#tripLogsPage .triplogs-empty-state {
text-align: center;
padding: 28px 16px;
}
#tripLogsPage .triplogs-empty-state svg {
width: 24px;
height: 24px;
color: #94a3b8;
}
#tripLogsPage .triplogs-empty-state h2 {
margin: 10px 0 4px;
}
#tripLogsPage .triplogs-empty-state p {
margin: 0;
color: #64748b;
}
#tripLogsPage .triplogs-detail-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.35);
z-index: 1100;
animation: triplogsDetailBackdropIn 180ms ease-out both;
}
#tripLogsPage .triplogs-detail-backdrop.is-closing {
animation: triplogsDetailBackdropOut 160ms ease-in both;
}
#tripLogsPage .triplogs-detail-panel {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: min(760px, 100vw);
background: #fff;
border-left: 1px solid #dbe4f2;
z-index: 1110;
display: flex;
flex-direction: column;
animation: triplogsDetailPanelIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
#tripLogsPage .triplogs-detail-panel.is-closing {
animation: triplogsDetailPanelOut 190ms cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes triplogsDetailBackdropIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes triplogsDetailPanelIn {
from {
opacity: 0;
transform: translateX(24px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes triplogsDetailBackdropOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes triplogsDetailPanelOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(18px);
}
}
#tripLogsPage .triplogs-detail-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 22px 24px 18px;
border-bottom: 1px solid #e2e8f0;
}
#tripLogsPage .triplogs-detail-panel__head h2 {
margin: 0;
}
#tripLogsPage .triplogs-detail-panel__head p {
margin: 6px 0 0;
color: #64748b;
font-size: 0.9rem;
}
#tripLogsPage .triplogs-detail-panel__body {
flex: 1;
overflow-y: auto;
padding: 18px 20px 22px;
display: grid;
gap: 16px;
}
#tripLogsPage .triplogs-detail-panel__summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#tripLogsPage .triplogs-detail-kpi {
border: 1px solid #dbe4f2;
border-radius: 12px;
background: #f8fafc;
padding: 11px 12px;
}
#tripLogsPage .triplogs-detail-kpi small {
display: block;
color: #64748b;
font-size: 0.78rem;
}
#tripLogsPage .triplogs-detail-kpi strong {
display: block;
margin-top: 5px;
font-size: 1rem;
color: #0f172a;
}
#tripLogsPage .triplogs-detail-panel__head-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
#tripLogsPage .triplogs-detail-panel__close {
width: 30px;
height: 30px;
border: 1px solid #dbe4f2;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0f172a;
}
#tripLogsPage .triplogs-detail-panel__section {
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
padding: 16px;
}
#tripLogsPage .triplogs-detail-panel__section h3 {
margin: 0 0 14px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1rem;
}
#tripLogsPage .triplogs-mini-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
font-size: 0.75rem;
line-height: 1;
color: #854d0e;
background: #fef3c7;
margin-left: 6px;
}
#tripLogsPage .triplogs-detail-kv {
margin: 0;
display: grid;
gap: 10px;
}
#tripLogsPage .triplogs-detail-kv--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#tripLogsPage .triplogs-detail-kv div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
border-bottom: 1px dashed #e2e8f0;
padding-bottom: 8px;
}
#tripLogsPage .triplogs-detail-kv div:last-child {
border-bottom: none;
padding-bottom: 0;
}
#tripLogsPage .triplogs-detail-kv dt {
color: #64748b;
font-size: 0.84rem;
white-space: nowrap;
}
#tripLogsPage .triplogs-detail-kv dd {
margin: 0;
text-align: right;
color: #0f172a;
font-size: 0.9rem;
font-weight: 600;
overflow-wrap: anywhere;
}
#tripLogsPage .triplogs-event-timeline {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
#tripLogsPage .triplogs-event-timeline li {
display: grid;
grid-template-columns: 12px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
#tripLogsPage .triplogs-event-dot {
width: 10px;
height: 10px;
border-radius: 999px;
margin-top: 5px;
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.04);
}
#tripLogsPage .triplogs-event-dot--low {
background: #3b82f6;
}
#tripLogsPage .triplogs-event-dot--medium {
background: #f59e0b;
}
#tripLogsPage .triplogs-event-dot--high {
background: #dc2626;
}
#tripLogsPage .triplogs-event-timeline strong {
display: block;
font-size: 0.83rem;
color: #0f172a;
}
#tripLogsPage .triplogs-event-timeline p {
margin: 4px 0 0;
font-size: 0.9rem;
}
#tripLogsPage .triplogs-event-timeline small {
color: #64748b;
display: block;
margin-top: 2px;
}
#tripLogsPage .triplogs-detail-json {
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
padding: 10px 12px;
}
#tripLogsPage .triplogs-detail-json summary {
cursor: pointer;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
#tripLogsPage .triplogs-detail-json pre {
margin: 10px 0 0;
padding: 12px;
border-radius: 8px;
background: #0f172a;
color: #e2e8f0;
max-height: 260px;
overflow: auto;
font-size: 0.73rem;
}
#tripLogsPage .triplogs-detail-panel__footer {
margin-top: auto;
padding: 14px 20px 16px;
border-top: 1px solid #e2e8f0;
background: #fff;
}
#tripLogsPage .triplogs-detail-panel__footer .btn.dark {
width: 100%;
justify-content: center;
}
#tripLogsPage #tripLogsRefreshButton.is-loading {
opacity: 0.7;
}
@media (min-width: 1024px) {
#tripLogsPage .triplogs-table-wrap {
max-height: calc(100vh - 430px);
overflow-y: auto;
overflow-x: visible;
}
}
@media (max-width: 1280px) {
#tripLogsPage .triplogs-kpi-grid {
grid-template-columns: repeat(2, minmax(220px, 1fr));
}
#tripLogsPage .triplogs-filters-grid {
grid-template-columns: repeat(2, minmax(240px, 1fr));
}
#tripLogsPage .triplogs-field-search,
#tripLogsPage .triplogs-field-date-range,
#tripLogsPage .triplogs-field-vehicle,
#tripLogsPage .triplogs-field-driver {
grid-column: auto;
}
}
@media (max-width: 640px) {
#tripLogsPage .triplogs-kpi-grid {
grid-template-columns: 1fr;
}
#tripLogsPage .triplogs-filters-card {
padding: 16px 14px;
}
#tripLogsPage .triplogs-filters-grid {
grid-template-columns: 1fr;
}
#tripLogsPage .triplogs-field-search,
#tripLogsPage .triplogs-field-date-range,
#tripLogsPage .triplogs-field-vehicle,
#tripLogsPage .triplogs-field-driver {
grid-column: span 1;
}
#tripLogsPage .triplogs-date-range {
grid-template-columns: 1fr;
gap: 6px;
}
#tripLogsPage .triplogs-date-range__sep {
display: none;
}
#tripLogsPage .triplogs-detail-panel {
width: 100vw;
}
#tripLogsPage .triplogs-detail-panel__head {
padding: 18px 16px 14px;
}
#tripLogsPage .triplogs-detail-panel__body {
padding: 14px 12px 18px;
gap: 12px;
}
#tripLogsPage .triplogs-detail-panel__summary,
#tripLogsPage .triplogs-detail-kv--two {
grid-template-columns: 1fr;
}
#tripLogsPage .triplogs-detail-panel__section {
padding: 14px 12px;
}
#tripLogsPage .triplogs-detail-panel__footer {
padding: 12px;
}
}