Sven
75e2bf2bec
Ergänzt die lesende Historien-API mit Verlaufsanzeige und ordnet Auftragskunden dem effektiven Zahler zu. Enthält VS-Code-Debugkonfiguration, Dokumentation und Regressionstests. Validiert mit Frontend-Build, 76 Backend-Tests und 25 Browsertests. Live-Datenbankprüfung wegen fehlender Erreichbarkeit offen.
3048 lines
51 KiB
CSS
3048 lines
51 KiB
CSS
:root {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: #24233b;
|
|
background: #f3f4f9;
|
|
font-synthesis: none;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
font-weight: 400;
|
|
--purple: #4031a0;
|
|
--purple-dark: #272062;
|
|
--border: #e7e7f0;
|
|
--muted: #858596;
|
|
--ink: #26253c;
|
|
--surface: #fff;
|
|
--soft: #f5f4fc;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
button,
|
|
a,
|
|
input,
|
|
select,
|
|
textarea {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
button,
|
|
a {
|
|
transition:
|
|
background 0.15s,
|
|
color 0.15s,
|
|
border-color 0.15s;
|
|
}
|
|
button {
|
|
color: inherit;
|
|
}
|
|
a {
|
|
color: var(--purple);
|
|
text-decoration: none;
|
|
}
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible,
|
|
tr:focus-visible {
|
|
outline: 3px solid #afa3ef;
|
|
outline-offset: 2px;
|
|
}
|
|
input,
|
|
textarea,
|
|
select {
|
|
border: 1px solid #dedee9;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #302f43;
|
|
padding: 9px 10px;
|
|
min-width: 0;
|
|
outline-offset: 0;
|
|
transition: border-color 0.15s;
|
|
}
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: #8873d4;
|
|
}
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: #9898a9;
|
|
}
|
|
input[type="checkbox"] {
|
|
accent-color: var(--purple);
|
|
width: 14px;
|
|
height: 14px;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
}
|
|
input[type="date"],
|
|
input[type="datetime-local"] {
|
|
color-scheme: light;
|
|
}
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
select {
|
|
padding-right: 30px;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
color: #262438;
|
|
}
|
|
h1 {
|
|
font-size: 29px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.9px;
|
|
line-height: 1.25;
|
|
}
|
|
h2 {
|
|
font-size: 17px;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
h3 {
|
|
font-size: 14px;
|
|
}
|
|
small {
|
|
font-size: 11px;
|
|
}
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
.normal {
|
|
font-weight: 400;
|
|
}
|
|
.align-right {
|
|
text-align: right !important;
|
|
}
|
|
.full {
|
|
width: 100%;
|
|
}
|
|
.truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
white-space: nowrap;
|
|
padding: 9px 13px;
|
|
border: 1px solid #dedee9;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
min-height: 36px;
|
|
}
|
|
.button:hover {
|
|
background: #f8f7fc;
|
|
border-color: #c9c4df;
|
|
}
|
|
.button.primary {
|
|
color: #fff;
|
|
background: var(--purple);
|
|
border-color: var(--purple);
|
|
box-shadow: 0 2px 3px #34217812;
|
|
}
|
|
.button.primary:hover {
|
|
background: #352788;
|
|
}
|
|
.button.selected {
|
|
background: #f0edf9;
|
|
border-color: #bcb0e2;
|
|
color: var(--purple);
|
|
}
|
|
.button.danger {
|
|
background: #c92f4c;
|
|
border-color: #c92f4c;
|
|
color: #fff;
|
|
}
|
|
.button.danger-quiet {
|
|
color: #be3b51;
|
|
}
|
|
.button.danger-quiet:hover {
|
|
background: #fff1f3;
|
|
}
|
|
.icon-button {
|
|
border: 0;
|
|
background: transparent;
|
|
width: 29px;
|
|
height: 29px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #858496;
|
|
border-radius: 5px;
|
|
padding: 3px;
|
|
}
|
|
.icon-button:hover {
|
|
background: #eeecf8;
|
|
color: var(--purple);
|
|
}
|
|
.text-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--purple);
|
|
padding: 6px 0;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.text-button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.eyebrow {
|
|
display: block;
|
|
letter-spacing: 1.6px;
|
|
font-weight: 600;
|
|
font-size: 9px;
|
|
color: #8c86a5;
|
|
margin-bottom: 7px;
|
|
}
|
|
.topbar {
|
|
height: 73px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 34px;
|
|
border-bottom: 1px solid #f1f0f6;
|
|
}
|
|
.product-lockup,
|
|
.topbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.wordmark {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
font-size: 30px;
|
|
color: #302672;
|
|
font-weight: 800;
|
|
font-style: italic;
|
|
letter-spacing: -1.6px;
|
|
}
|
|
.wordmark > span {
|
|
font-size: 12px;
|
|
letter-spacing: 0.1px;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
color: #877da9;
|
|
border: 1px solid #d5cde7;
|
|
border-radius: 4px;
|
|
padding: 0 4px;
|
|
line-height: 19px;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
.product-divider {
|
|
height: 25px;
|
|
width: 1px;
|
|
background: #e4e1ed;
|
|
margin: 0 18px;
|
|
}
|
|
.product-caption {
|
|
font-size: 9px;
|
|
letter-spacing: 1.25px;
|
|
font-weight: 600;
|
|
color: #8e89a1;
|
|
}
|
|
.topbar-right {
|
|
gap: 18px;
|
|
}
|
|
.organization {
|
|
font-size: 11px;
|
|
color: #777384;
|
|
}
|
|
.header-logo {
|
|
width: 130px;
|
|
height: auto;
|
|
object-fit: contain;
|
|
margin-left: 1px;
|
|
}
|
|
.user-avatar {
|
|
height: 31px;
|
|
width: 31px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: #efedf8;
|
|
border: 1px solid #e2ddef;
|
|
color: #57448f;
|
|
font-size: 11px;
|
|
border-radius: 50%;
|
|
margin-left: 9px;
|
|
font-weight: 700;
|
|
}
|
|
.connection-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
letter-spacing: 0.6px;
|
|
font-size: 8px;
|
|
font-weight: 600;
|
|
color: #818493;
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 4px;
|
|
padding: 4px 6px;
|
|
}
|
|
.connection-badge i,
|
|
.online-dot {
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
background: #45ad85;
|
|
border-radius: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
.connection-badge.disconnected {
|
|
color: #a77543;
|
|
}
|
|
.connection-badge.disconnected i {
|
|
background: #d89550;
|
|
}
|
|
.main-nav {
|
|
background: linear-gradient(90deg, #302779, #292168);
|
|
height: 54px;
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: space-between;
|
|
padding: 0 29px;
|
|
box-shadow: 0 3px 7px #29206716;
|
|
}
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.nav-links > button {
|
|
display: flex;
|
|
gap: 9px;
|
|
align-items: center;
|
|
padding: 0 18px;
|
|
background: transparent;
|
|
border: 0;
|
|
position: relative;
|
|
color: #c6c1e6;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
.nav-links > button.active {
|
|
color: #fff;
|
|
background: #ffffff0d;
|
|
}
|
|
.nav-links > button.active:after {
|
|
content: "";
|
|
height: 3px;
|
|
background: #a99af7;
|
|
position: absolute;
|
|
left: 15px;
|
|
right: 15px;
|
|
bottom: 0;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
.nav-links > button:hover {
|
|
background: #ffffff0f;
|
|
color: #fff;
|
|
}
|
|
.nav-links > button > span {
|
|
font-size: 10px;
|
|
color: #e4defe;
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
background: #ffffff14;
|
|
}
|
|
.nav-context {
|
|
color: #beb8df;
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding-right: 8px;
|
|
}
|
|
.nav-context .online-dot {
|
|
background: #97d2b1;
|
|
}
|
|
main {
|
|
max-width: 1810px;
|
|
margin: auto;
|
|
padding: 0 35px;
|
|
}
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #9692a7;
|
|
font-size: 10px;
|
|
padding-top: 21px;
|
|
}
|
|
.breadcrumb > span {
|
|
margin-left: auto;
|
|
color: #9793a5;
|
|
font-size: 10px;
|
|
}
|
|
.page-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 26px 0 24px;
|
|
gap: 20px;
|
|
}
|
|
.page-heading .eyebrow {
|
|
font-size: 9px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.page-heading h1 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.page-heading p {
|
|
color: #8b879b;
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
}
|
|
.count-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 26px;
|
|
padding: 3px 7px;
|
|
border: 1px solid #dfdbe9;
|
|
background: #ece9f5;
|
|
color: #706292;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
line-height: 17px;
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
vertical-align: middle;
|
|
}
|
|
.heading-actions {
|
|
display: flex;
|
|
gap: 9px;
|
|
margin-top: 10px;
|
|
}
|
|
.metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 15px;
|
|
margin-bottom: 23px;
|
|
}
|
|
.metric {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 9px;
|
|
padding: 19px 20px 18px;
|
|
box-shadow: 0 2px 4px #24204702;
|
|
min-height: 110px;
|
|
}
|
|
.metric > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.metric-label {
|
|
font-size: 11px;
|
|
color: #8a859c;
|
|
margin-bottom: 6px;
|
|
font-weight: 500;
|
|
}
|
|
.metric strong {
|
|
font-size: 27px;
|
|
letter-spacing: -0.9px;
|
|
line-height: 1.3;
|
|
font-weight: 600;
|
|
color: #302b46;
|
|
}
|
|
.metric-detail {
|
|
font-size: 10px;
|
|
color: #a39cac;
|
|
margin-top: 6px;
|
|
}
|
|
.metric-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 39px;
|
|
height: 39px;
|
|
border-radius: 9px;
|
|
margin-top: 4px;
|
|
background: #f0edf9;
|
|
color: #7960bd;
|
|
}
|
|
.metric-icon.amber {
|
|
background: #fff5e8;
|
|
color: #dba24d;
|
|
}
|
|
.metric-icon.blue {
|
|
background: #edf4fe;
|
|
color: #6a93d0;
|
|
}
|
|
.metric-icon.green {
|
|
background: #ebf7f0;
|
|
color: #67ae86;
|
|
}
|
|
.panel {
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 9px;
|
|
box-shadow: 0 3px 6px #2e214503;
|
|
overflow: hidden;
|
|
}
|
|
.panel-tabs {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 18px;
|
|
border-bottom: 1px solid #edebf3;
|
|
height: 57px;
|
|
}
|
|
.tabs {
|
|
display: flex;
|
|
gap: 24px;
|
|
height: 100%;
|
|
}
|
|
.tabs > button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #8b859b;
|
|
position: relative;
|
|
padding: 0 0 2px;
|
|
}
|
|
.tabs > button > span {
|
|
font-size: 9px;
|
|
background: #f2f0f7;
|
|
color: #a198b1;
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
}
|
|
.tabs > button.active {
|
|
color: #514192;
|
|
}
|
|
.tabs > button.active > span {
|
|
background: #eee9fa;
|
|
color: #8b71c6;
|
|
}
|
|
.tabs > button.active:after {
|
|
content: "";
|
|
position: absolute;
|
|
height: 2px;
|
|
background: #7560b9;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.view-toggle {
|
|
display: flex;
|
|
border: 1px solid #e8e4ef;
|
|
border-radius: 5px;
|
|
padding: 3px;
|
|
gap: 2px;
|
|
}
|
|
.view-toggle button {
|
|
height: 25px;
|
|
width: 29px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #aca3bc;
|
|
border-radius: 3px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.view-toggle button.active {
|
|
background: #f0ebfa;
|
|
color: #81709c;
|
|
}
|
|
.filter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 17px 18px;
|
|
}
|
|
.filter-row select {
|
|
font-size: 11px;
|
|
width: 143px;
|
|
padding: 9px 10px;
|
|
height: 35px;
|
|
color: #898296;
|
|
}
|
|
.filter-row select:nth-of-type(2) {
|
|
width: 147px;
|
|
}
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
border: 1px solid #e4e0ec;
|
|
border-radius: 6px;
|
|
color: #a8a0b8;
|
|
padding-left: 11px;
|
|
min-width: 180px;
|
|
}
|
|
.search-box input {
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 9px 11px;
|
|
font-size: 11px;
|
|
flex: 1;
|
|
width: 100%;
|
|
color: #534963;
|
|
}
|
|
.search-box input:focus {
|
|
outline: none;
|
|
}
|
|
.search-box:focus-within {
|
|
border-color: #a08bbb;
|
|
box-shadow: 0 0 0 2px #b9a5e624;
|
|
}
|
|
.filter-row .search-box {
|
|
flex: 1;
|
|
margin-right: 3px;
|
|
}
|
|
.filter-row .button {
|
|
font-size: 11px;
|
|
min-height: 35px;
|
|
padding: 8px 11px;
|
|
color: #837a92;
|
|
}
|
|
.filter-dot {
|
|
height: 5px;
|
|
width: 5px;
|
|
background: var(--purple);
|
|
border-radius: 50%;
|
|
}
|
|
.filter-row .export-button {
|
|
margin-left: 3px;
|
|
}
|
|
.expanded-filters {
|
|
padding: 0 18px 17px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 14px;
|
|
background: #fff;
|
|
}
|
|
.expanded-filters .field {
|
|
margin: 0;
|
|
min-width: 150px;
|
|
}
|
|
.expanded-filters .field:first-child {
|
|
width: 260px;
|
|
}
|
|
.expanded-filters .text-button {
|
|
margin-left: auto;
|
|
align-self: center;
|
|
padding-top: 17px;
|
|
}
|
|
.table-scroll {
|
|
overflow-x: auto;
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 11px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
.data-table thead {
|
|
background: #f7f6fb;
|
|
}
|
|
.data-table th {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: #91879f;
|
|
padding: 11px 16px;
|
|
border-top: 1px solid #eeebf3;
|
|
border-bottom: 1px solid #ebe8f2;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
.data-table th:first-child,
|
|
.data-table td:first-child {
|
|
padding-left: 20px;
|
|
}
|
|
.data-table td {
|
|
padding: 16px 16px;
|
|
border-bottom: 1px solid #f0edf5;
|
|
color: #766b85;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
}
|
|
.data-table tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
.data-table tbody tr {
|
|
transition: background 0.1s;
|
|
}
|
|
.data-table tbody tr[tabindex],
|
|
.order-table tbody tr {
|
|
cursor: pointer;
|
|
}
|
|
.data-table tbody tr:hover {
|
|
background: #faf9fe;
|
|
}
|
|
.data-table td strong {
|
|
color: #6a597f;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
}
|
|
.data-table .order-number {
|
|
color: #61507e;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
.cell-sub {
|
|
display: block;
|
|
font-size: 9px;
|
|
color: #a99db4;
|
|
line-height: 1.6;
|
|
margin-top: 4px;
|
|
}
|
|
.data-table td .cell-sub {
|
|
font-size: 9px;
|
|
}
|
|
.customer-cell {
|
|
max-width: 180px;
|
|
}
|
|
.order-table {
|
|
min-width: 1120px;
|
|
}
|
|
.order-table th,
|
|
.order-table td {
|
|
padding-right: 13px;
|
|
padding-left: 13px;
|
|
}
|
|
.order-table td {
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.order-table td:nth-child(4) {
|
|
min-width: 172px;
|
|
}
|
|
.order-table th:nth-child(4) > span {
|
|
margin: 0 4px;
|
|
}
|
|
.order-table td:last-child {
|
|
padding-right: 15px;
|
|
padding-left: 0;
|
|
}
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 9px;
|
|
padding: 4px 7px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
background: #f0ecf8;
|
|
color: #9381b0;
|
|
}
|
|
.badge > i {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: currentColor;
|
|
border-radius: 100%;
|
|
}
|
|
.badge.pending {
|
|
color: #c49b57;
|
|
background: #fff8e9;
|
|
}
|
|
.badge.offered {
|
|
color: #8971b9;
|
|
background: #f4effb;
|
|
}
|
|
.badge.progress {
|
|
color: #6d94c8;
|
|
background: #edf4fd;
|
|
}
|
|
.badge.complete {
|
|
color: #63a885;
|
|
background: #edf8f1;
|
|
}
|
|
.badge.cancelled {
|
|
color: #ae8293;
|
|
background: #f8f0f3;
|
|
}
|
|
.route-cell {
|
|
font-size: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
}
|
|
.route-cell > span {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
color: #786488;
|
|
position: relative;
|
|
}
|
|
.route-cell small {
|
|
font-size: 9px;
|
|
max-width: 110px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #aa9eb3;
|
|
}
|
|
.stop-dot {
|
|
display: inline-block;
|
|
height: 6px;
|
|
width: 6px;
|
|
border: 1.5px solid #8f80b4;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
.stop-dot.end {
|
|
background: #9484b7;
|
|
border-color: #9484b7;
|
|
border-radius: 2px;
|
|
}
|
|
.stop-dot.done {
|
|
background: #55ae81;
|
|
border-color: #55ae81;
|
|
}
|
|
.route-cell > span:first-child > .stop-dot:after {
|
|
content: "";
|
|
width: 1px;
|
|
height: 16px;
|
|
background: #d8d1e7;
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 1px;
|
|
}
|
|
.courier-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-size: 10px;
|
|
color: #8b779a;
|
|
}
|
|
.mini-avatar {
|
|
height: 27px;
|
|
width: 27px;
|
|
background: #f4eef8;
|
|
color: #9a85ab;
|
|
border: 1px solid #ece4f2;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
.courier-cell > span:last-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.courier-cell small {
|
|
font-size: 9px;
|
|
color: #b1a2bd;
|
|
}
|
|
.unassigned {
|
|
font-size: 10px;
|
|
color: #b5a9bd;
|
|
font-style: italic;
|
|
}
|
|
.vehicle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: #9b8aaa;
|
|
font-size: 10px;
|
|
}
|
|
.data-table td.price-cell {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #765f88;
|
|
}
|
|
.table-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 19px;
|
|
border-top: 1px solid #eeebf4;
|
|
gap: 15px;
|
|
color: #aa9bb4;
|
|
font-size: 10px;
|
|
min-height: 60px;
|
|
}
|
|
.refresh-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 9px;
|
|
margin-left: auto;
|
|
margin-right: 18px;
|
|
color: #ac9bb4;
|
|
}
|
|
.refresh-checkbox input {
|
|
height: 12px;
|
|
width: 12px;
|
|
accent-color: #8971b1;
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.pagination .icon-button {
|
|
height: 24px;
|
|
width: 24px;
|
|
border: 1px solid #ebe6f0;
|
|
border-radius: 4px;
|
|
}
|
|
.pagination > span {
|
|
font-size: 9px;
|
|
color: #9b88ac;
|
|
}
|
|
.app-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24px 0;
|
|
font-size: 9px;
|
|
color: #b0a2ba;
|
|
}
|
|
.app-footer > span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.app-footer i {
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
background: #b9afc4;
|
|
margin: 0 3px;
|
|
}
|
|
.app-footer .online-dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
margin-left: 3px;
|
|
background: #92baa5;
|
|
}
|
|
.alert {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
border: 1px solid;
|
|
border-radius: 7px;
|
|
margin-bottom: 16px;
|
|
font-size: 12px;
|
|
}
|
|
.alert.error {
|
|
background: #fff2f2;
|
|
border-color: #f0cbce;
|
|
color: #ad4653;
|
|
}
|
|
.alert > .icon-button {
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
.alert > span {
|
|
flex: 1;
|
|
}
|
|
.toast {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
position: fixed;
|
|
bottom: 25px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 13px 20px;
|
|
background: #2b6751;
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 5px 25px #13312525;
|
|
z-index: 120;
|
|
font-size: 12px;
|
|
max-width: 90vw;
|
|
}
|
|
.empty {
|
|
padding: 65px 20px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.empty-icon {
|
|
background: #f2eef8;
|
|
color: #a18bb9;
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.empty h3 {
|
|
font-size: 15px;
|
|
color: #756286;
|
|
margin-bottom: 6px;
|
|
}
|
|
.empty p {
|
|
color: #aa9bb5;
|
|
max-width: 400px;
|
|
font-size: 12px;
|
|
}
|
|
.empty .button {
|
|
margin-top: 18px;
|
|
}
|
|
.loading-panel,
|
|
.boot {
|
|
min-height: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
color: #807092;
|
|
}
|
|
.boot {
|
|
height: 100vh;
|
|
}
|
|
.section-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 23px 23px 20px;
|
|
gap: 20px;
|
|
}
|
|
.section-toolbar h2 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #766080;
|
|
}
|
|
.section-toolbar .muted {
|
|
font-size: 10px;
|
|
display: block;
|
|
margin-top: 5px;
|
|
}
|
|
.section-toolbar input[type="date"] {
|
|
font-size: 11px;
|
|
color: #8f789f;
|
|
}
|
|
.section-toolbar .search-box {
|
|
width: 300px;
|
|
}
|
|
.section-toolbar.compact {
|
|
padding: 15px 0;
|
|
}
|
|
.section-toolbar h2 .count-pill {
|
|
margin-left: 5px;
|
|
}
|
|
.plate {
|
|
border: 1px solid #e8e1eb;
|
|
border-left: 4px solid #8b89bf;
|
|
border-radius: 4px;
|
|
background: #fcfbfe;
|
|
padding: 3px 6px;
|
|
font-size: 10px;
|
|
letter-spacing: 0.4px;
|
|
color: #8e749a;
|
|
}
|
|
.dispatch-board {
|
|
padding: 0 18px 20px;
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 13px;
|
|
overflow-x: auto;
|
|
min-height: 440px;
|
|
}
|
|
.board-column {
|
|
flex: 1;
|
|
min-width: 245px;
|
|
background: #f6f4fa;
|
|
border: 1px solid #eee8f4;
|
|
border-radius: 7px;
|
|
padding: 12px;
|
|
}
|
|
.board-column > h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15px;
|
|
}
|
|
.board-column > h3 > span:last-child {
|
|
font-size: 10px;
|
|
color: #a08cad;
|
|
font-weight: 400;
|
|
}
|
|
.dispatch-card {
|
|
text-align: left;
|
|
width: 100%;
|
|
display: block;
|
|
background: #fff;
|
|
border: 1px solid #e9e0f0;
|
|
border-radius: 7px;
|
|
padding: 13px;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0 2px 3px #41245504;
|
|
color: #887295;
|
|
}
|
|
.dispatch-card:hover {
|
|
border-color: #c4abd5;
|
|
background: #fffefe;
|
|
}
|
|
.card-line {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
.dispatch-card .card-line {
|
|
font-size: 10px;
|
|
color: #a090ae;
|
|
}
|
|
.dispatch-card .card-line strong {
|
|
color: #846990;
|
|
font-size: 11px;
|
|
}
|
|
.dispatch-card h4 {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
margin: 11px 0 6px;
|
|
color: #867092;
|
|
}
|
|
.dispatch-card > p {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
color: #a38ab0;
|
|
}
|
|
.card-bottom {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 9px;
|
|
border-top: 1px solid #f1eaf6;
|
|
margin-top: 13px;
|
|
padding-top: 11px;
|
|
color: #b298bc;
|
|
}
|
|
.card-bottom b {
|
|
font-weight: 500;
|
|
color: #967a9f;
|
|
}
|
|
.tour-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
padding: 0 22px 22px;
|
|
gap: 17px;
|
|
}
|
|
.tour-card {
|
|
border: 1px solid #e9e1ef;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.tour-card > header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 16px;
|
|
background: #f8f5fb;
|
|
border-bottom: 1px solid #ece4f2;
|
|
}
|
|
.tour-card header h3 {
|
|
font-size: 12px;
|
|
color: #846b92;
|
|
}
|
|
.tour-card header span {
|
|
font-size: 9px;
|
|
color: #b19abc;
|
|
}
|
|
.tour-card header .mini-avatar {
|
|
width: 35px;
|
|
height: 35px;
|
|
font-size: 10px;
|
|
}
|
|
.tour-order {
|
|
display: flex;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 16px 13px;
|
|
gap: 11px;
|
|
border: 0;
|
|
border-bottom: 1px solid #f0e9f5;
|
|
background: #fff;
|
|
}
|
|
.tour-order:hover {
|
|
background: #fcfaff;
|
|
}
|
|
.tour-order > div {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.tour-time {
|
|
color: #b096bb;
|
|
font-size: 10px;
|
|
padding-top: 3px;
|
|
}
|
|
.tour-order h4 {
|
|
color: #95739f;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
margin: 8px 0 11px;
|
|
}
|
|
.tour-order .card-line strong {
|
|
font-size: 11px;
|
|
color: #9877a2;
|
|
}
|
|
.tour-order p {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #ad92b8;
|
|
font-size: 9px;
|
|
white-space: normal;
|
|
margin-top: 8px;
|
|
}
|
|
.invoice-metrics {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.report-toolbar {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin: -6px 0 18px;
|
|
color: #a189ad;
|
|
font-size: 11px;
|
|
}
|
|
.report-toolbar select {
|
|
font-size: 11px;
|
|
}
|
|
.report-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
.chart-panel {
|
|
padding: 25px 25px 30px;
|
|
}
|
|
.chart-panel h2 {
|
|
font-size: 14px;
|
|
color: #93739a;
|
|
}
|
|
.chart-panel > p {
|
|
font-size: 10px;
|
|
margin-top: 5px;
|
|
color: #b89cc0;
|
|
}
|
|
.bar-chart {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 21px;
|
|
margin-top: 27px;
|
|
}
|
|
.chart-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 10px;
|
|
color: #ac88b0;
|
|
}
|
|
.chart-row > span {
|
|
width: 116px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.chart-row > strong {
|
|
width: 22px;
|
|
text-align: right;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
}
|
|
.chart-track {
|
|
flex: 1;
|
|
height: 8px;
|
|
border-radius: 6px;
|
|
background: #f6eff9;
|
|
overflow: hidden;
|
|
}
|
|
.chart-track > i {
|
|
display: block;
|
|
background: #b396cc;
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
min-width: 0;
|
|
}
|
|
.chart-track > i.pending {
|
|
background: #dbc38e;
|
|
}
|
|
.chart-track > i.offered {
|
|
background: #baa5d0;
|
|
}
|
|
.chart-track > i.progress {
|
|
background: #a3b9d7;
|
|
}
|
|
.chart-track > i.complete {
|
|
background: #a0cdb8;
|
|
}
|
|
.chart-track > i.cancelled {
|
|
background: #d9b2c2;
|
|
}
|
|
.chart-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #b396cc;
|
|
}
|
|
.chart-dot.pending {
|
|
background: #dbc38e;
|
|
}
|
|
.chart-dot.progress {
|
|
background: #a3b9d7;
|
|
}
|
|
.chart-dot.complete {
|
|
background: #a0cdb8;
|
|
}
|
|
.chart-dot.cancelled {
|
|
background: #d9b2c2;
|
|
}
|
|
.modal-backdrop,
|
|
.drawer-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: #21163455;
|
|
backdrop-filter: blur(2px);
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 26px;
|
|
}
|
|
.modal-backdrop {
|
|
z-index: 70;
|
|
}
|
|
.modal {
|
|
width: min(570px, 100%);
|
|
max-height: calc(100dvh - 52px);
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 25px 90px #20113740;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.modal.modal-wide {
|
|
width: min(980px, 100%);
|
|
}
|
|
.modal-heading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding: 24px 26px 21px;
|
|
border-bottom: 1px solid #ece6f2;
|
|
background: #fdfcfe;
|
|
}
|
|
.modal-heading h2 {
|
|
font-size: 20px;
|
|
color: #665070;
|
|
font-weight: 600;
|
|
}
|
|
.modal-heading p {
|
|
font-size: 11px;
|
|
color: #a58aae;
|
|
margin-top: 5px;
|
|
}
|
|
.modal > form {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.modal-body {
|
|
overflow-y: auto;
|
|
padding: 24px 26px;
|
|
min-height: 0;
|
|
}
|
|
.modal-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
padding: 17px 26px;
|
|
border-top: 1px solid #ece6f2;
|
|
background: #fdfcfe;
|
|
flex-shrink: 0;
|
|
}
|
|
.modal-footer > .muted {
|
|
margin-right: auto;
|
|
font-size: 10px;
|
|
}
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
margin-bottom: 17px;
|
|
}
|
|
.field > span {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: #98739c;
|
|
}
|
|
.field > input,
|
|
.field > select,
|
|
.field > textarea {
|
|
width: 100%;
|
|
font-size: 12px;
|
|
color: #84628b;
|
|
border-color: #e8ddee;
|
|
background: #fff;
|
|
}
|
|
.field input::placeholder,
|
|
.field textarea::placeholder {
|
|
color: #bda7c3;
|
|
}
|
|
.field.wide {
|
|
grid-column: 1/-1;
|
|
}
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0 17px;
|
|
}
|
|
.form-grid.cols-3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.form-grid.address-row {
|
|
grid-template-columns: 1fr 1.8fr;
|
|
gap: 10px;
|
|
}
|
|
.form-section {
|
|
margin-bottom: 25px;
|
|
padding-bottom: 13px;
|
|
border-bottom: 1px solid #f0e6f4;
|
|
}
|
|
.form-section:last-of-type {
|
|
margin-bottom: 0;
|
|
border: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.form-section h3 {
|
|
font-size: 12px;
|
|
color: #8f6795;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.form-section h3 > span {
|
|
font-size: 10px;
|
|
color: #b89dc2;
|
|
border: 1px solid #ecdfef;
|
|
border-radius: 4px;
|
|
padding: 3px 5px;
|
|
}
|
|
.form-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.form-section-header h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
.stop-editor {
|
|
border: 1px solid #eddfef;
|
|
border-radius: 7px;
|
|
margin-bottom: 15px;
|
|
padding: 15px 16px 0;
|
|
background: #fefcff;
|
|
}
|
|
.stop-editor-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.stop-number {
|
|
height: 25px;
|
|
width: 25px;
|
|
background: #e9ddf1;
|
|
border: 1px solid #d9c6e4;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #a17cac;
|
|
border-radius: 6px;
|
|
font-size: 10px;
|
|
}
|
|
.stop-number.pickup {
|
|
background: #f7f1fa;
|
|
border-color: #e4d7ed;
|
|
}
|
|
.stop-editor-heading > select {
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
color: #ad85b4;
|
|
font-size: 11px;
|
|
}
|
|
.stop-controls {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 3px;
|
|
}
|
|
.form-price {
|
|
background: #f6f0fa;
|
|
border: 1px solid #eee1f3;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 16px;
|
|
font-size: 11px;
|
|
color: #ad85b5;
|
|
margin-top: 4px;
|
|
}
|
|
.form-price strong {
|
|
color: #976ca0;
|
|
font-size: 18px;
|
|
}
|
|
.form-hint {
|
|
font-size: 10px;
|
|
color: #bda4c7;
|
|
margin-top: 10px;
|
|
}
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
color: #a781b3;
|
|
font-size: 11px;
|
|
margin: 5px 0 10px;
|
|
}
|
|
.drawer-backdrop {
|
|
justify-content: flex-end;
|
|
padding: 0;
|
|
background: #21163430;
|
|
backdrop-filter: none;
|
|
}
|
|
.detail-drawer {
|
|
height: 100dvh;
|
|
max-width: 100%;
|
|
width: 480px;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: -10px 0 50px #3823491a;
|
|
}
|
|
.drawer-heading {
|
|
padding: 24px 26px 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.drawer-heading h2 {
|
|
font-size: 26px;
|
|
letter-spacing: -0.7px;
|
|
color: #755281;
|
|
font-weight: 600;
|
|
}
|
|
.drawer-heading .eyebrow {
|
|
font-size: 8px;
|
|
color: #b797bf;
|
|
margin-bottom: 4px;
|
|
}
|
|
.drawer-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 26px 20px;
|
|
color: #b196bd;
|
|
font-size: 10px;
|
|
}
|
|
.drawer-tabs {
|
|
display: flex;
|
|
padding: 0 26px;
|
|
border-bottom: 1px solid #f0e4f5;
|
|
gap: 27px;
|
|
background: #fffcff;
|
|
}
|
|
.drawer-tabs button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: #b69dc0;
|
|
padding: 12px 0;
|
|
font-size: 11px;
|
|
position: relative;
|
|
}
|
|
.drawer-tabs button.active {
|
|
color: #9e78ad;
|
|
}
|
|
.drawer-tabs button.active:after {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 2px;
|
|
content: "";
|
|
background: #b396c5;
|
|
}
|
|
.drawer-tabs button span {
|
|
font-size: 9px;
|
|
padding: 2px 5px;
|
|
background: #f4eaf8;
|
|
border-radius: 4px;
|
|
margin-left: 3px;
|
|
}
|
|
.drawer-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 26px;
|
|
}
|
|
.detail-section {
|
|
border-bottom: 1px solid #f3e9f7;
|
|
padding: 22px 0;
|
|
}
|
|
.section-label {
|
|
display: block;
|
|
font-size: 8px;
|
|
letter-spacing: 1.3px;
|
|
font-weight: 600;
|
|
color: #bf9cc9;
|
|
margin-bottom: 13px;
|
|
}
|
|
.section-label > span {
|
|
padding: 2px 5px;
|
|
border: 1px solid #f1e3f6;
|
|
border-radius: 3px;
|
|
margin-left: 3px;
|
|
}
|
|
.detail-section h3 {
|
|
color: #a076ac;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.detail-section > p {
|
|
color: #bb98c8;
|
|
font-size: 11px;
|
|
margin-top: 7px;
|
|
}
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 17px 15px;
|
|
margin-top: 17px;
|
|
}
|
|
.detail-grid > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.detail-grid span {
|
|
font-size: 9px;
|
|
color: #c5a7d0;
|
|
}
|
|
.detail-grid strong {
|
|
font-size: 11px;
|
|
color: #ac85b8;
|
|
font-weight: 500;
|
|
}
|
|
.stops-timeline {
|
|
padding: 0;
|
|
}
|
|
.timeline-stop {
|
|
position: relative;
|
|
display: flex;
|
|
gap: 13px;
|
|
padding-bottom: 24px;
|
|
}
|
|
.timeline-stop:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
.timeline-marker {
|
|
height: 22px;
|
|
width: 22px;
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
border: 1px solid #dac6e4;
|
|
border-radius: 50%;
|
|
background: #fdf9ff;
|
|
color: #b490c4;
|
|
font-size: 9px;
|
|
z-index: 1;
|
|
}
|
|
.timeline-stop.completed .timeline-marker {
|
|
background: #f0f9f4;
|
|
border-color: #b9dec8;
|
|
color: #80b297;
|
|
}
|
|
.timeline-stop:before {
|
|
position: absolute;
|
|
content: "";
|
|
top: 22px;
|
|
bottom: 0;
|
|
left: 10px;
|
|
width: 1px;
|
|
background: #e8d9ee;
|
|
}
|
|
.timeline-stop:last-child:before {
|
|
display: none;
|
|
}
|
|
.timeline-stop > div {
|
|
flex: 1;
|
|
padding-top: 1px;
|
|
}
|
|
.stop-kind {
|
|
font-size: 9px;
|
|
color: #c0a1cb;
|
|
}
|
|
.timeline-stop h4 {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #a27aaf;
|
|
margin-top: 7px;
|
|
}
|
|
.timeline-stop p {
|
|
font-size: 10px;
|
|
color: #bd9bc9;
|
|
line-height: 1.8;
|
|
margin-top: 4px;
|
|
}
|
|
.timeline-stop .stop-note {
|
|
background: #faf4fd;
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
.success-text {
|
|
color: #77af8e;
|
|
font-size: 9px;
|
|
}
|
|
.assign-row {
|
|
display: flex;
|
|
gap: 9px;
|
|
}
|
|
.assign-row select {
|
|
flex: 1;
|
|
font-size: 11px;
|
|
color: #b08cbd;
|
|
}
|
|
.detail-section .field {
|
|
margin-top: 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
.price-summary {
|
|
padding: 15px;
|
|
background: #faf5fd;
|
|
border: 1px solid #f0e4f7;
|
|
border-radius: 7px;
|
|
margin-top: 19px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.price-summary > span {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 10px;
|
|
color: #b18bbe;
|
|
}
|
|
.price-summary > span:last-child {
|
|
padding-top: 10px;
|
|
border-top: 1px solid #efdef5;
|
|
font-weight: 500;
|
|
color: #9e72ae;
|
|
}
|
|
.price-summary strong {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
.info-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 10px;
|
|
color: #b697c5;
|
|
background: #f7f2fc;
|
|
border-radius: 6px;
|
|
padding: 11px;
|
|
margin-top: 12px;
|
|
}
|
|
.note-box {
|
|
white-space: pre-wrap;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
background: #fffbf0;
|
|
color: #b19e7b !important;
|
|
border: 1px solid #f5edcf;
|
|
}
|
|
.drawer-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
padding: 17px 25px 23px;
|
|
border-top: 1px solid #f0e4f6;
|
|
box-shadow: 0 -5px 20px #40235102;
|
|
}
|
|
.drawer-actions > .button:not(.full) {
|
|
flex: 1;
|
|
font-size: 10px;
|
|
min-height: 32px;
|
|
}
|
|
.drawer-actions > .full {
|
|
margin-top: 5px;
|
|
}
|
|
.history-list {
|
|
padding: 25px 0;
|
|
}
|
|
.history-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 40px 0;
|
|
color: var(--muted);
|
|
}
|
|
.history-error .alert {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.history-item {
|
|
display: flex;
|
|
gap: 14px;
|
|
position: relative;
|
|
padding-bottom: 24px;
|
|
}
|
|
.history-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #c4a6d1;
|
|
flex-shrink: 0;
|
|
margin-top: 5px;
|
|
z-index: 1;
|
|
border: 2px solid #f7effb;
|
|
box-shadow: 0 0 0 1px #e4d1ee;
|
|
}
|
|
.history-item:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 13px;
|
|
bottom: 0;
|
|
left: 3px;
|
|
background: #eee1f4;
|
|
width: 1px;
|
|
}
|
|
.history-item:last-child:before {
|
|
display: none;
|
|
}
|
|
.history-item strong {
|
|
font-size: 11px;
|
|
color: #a17ab5;
|
|
font-weight: 500;
|
|
}
|
|
.history-item p {
|
|
font-size: 10px;
|
|
color: #b695c6;
|
|
margin-top: 5px;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.history-item small {
|
|
display: block;
|
|
font-size: 9px;
|
|
color: #c4afd2;
|
|
margin-top: 7px;
|
|
}
|
|
.invoice-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 5px 0 40px;
|
|
}
|
|
.invoice-brand img {
|
|
width: 165px;
|
|
}
|
|
.invoice-address {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-bottom: 33px;
|
|
}
|
|
.invoice-address small {
|
|
letter-spacing: 1.3px;
|
|
font-size: 8px;
|
|
color: #bca2c9;
|
|
}
|
|
.invoice-address h3 {
|
|
font-size: 14px;
|
|
color: #a380b0;
|
|
margin-top: 12px;
|
|
}
|
|
.invoice-address h2 {
|
|
font-size: 19px;
|
|
color: #9b73ac;
|
|
}
|
|
.invoice-address p {
|
|
font-size: 11px;
|
|
line-height: 1.9;
|
|
color: #b69ec7;
|
|
margin-top: 9px;
|
|
}
|
|
.invoice-totals {
|
|
width: 300px;
|
|
margin: 25px 0 0 auto;
|
|
}
|
|
.invoice-totals > p {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
font-size: 11px;
|
|
color: #b192bf;
|
|
}
|
|
.invoice-totals strong {
|
|
font-weight: 500;
|
|
color: #9f7fb1;
|
|
}
|
|
.invoice-totals > p.total {
|
|
border-top: 1px solid #eadcf1;
|
|
margin-top: 7px;
|
|
padding-top: 16px;
|
|
color: #9873ae;
|
|
font-size: 13px;
|
|
}
|
|
.invoice-totals .total strong {
|
|
font-size: 18px;
|
|
}
|
|
.invoice-note {
|
|
margin-top: 40px;
|
|
font-size: 9px;
|
|
color: #c7b6d4;
|
|
border-top: 1px solid #f0e9f6;
|
|
padding-top: 15px;
|
|
}
|
|
.readonly-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
border: 1px solid #e5def0;
|
|
background: #f0edf7;
|
|
padding: 10px 13px;
|
|
border-radius: 6px;
|
|
color: #9a8ba7;
|
|
font-size: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.readonly-notice > svg {
|
|
color: #a395b3;
|
|
flex-shrink: 0;
|
|
}
|
|
.readonly-notice strong {
|
|
font-weight: 500;
|
|
color: #8c7b9d;
|
|
margin-right: 6px;
|
|
}
|
|
.readonly-notice a {
|
|
margin-left: auto;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
color: #8b78a4;
|
|
font-size: 10px;
|
|
}
|
|
.offline-panel {
|
|
padding: 60px 25px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 330px;
|
|
}
|
|
.offline-panel h2 {
|
|
margin: 20px 0 10px;
|
|
color: #80668f;
|
|
}
|
|
.offline-panel p {
|
|
max-width: 620px;
|
|
color: #a691b2;
|
|
line-height: 1.8;
|
|
font-size: 12px;
|
|
}
|
|
.offline-panel .muted {
|
|
font-size: 11px;
|
|
max-width: 540px;
|
|
margin: 8px 0 24px;
|
|
color: #b19ebd;
|
|
}
|
|
.offline-icon {
|
|
width: 69px;
|
|
height: 69px;
|
|
border-radius: 16px;
|
|
color: #ab95bd;
|
|
background: #f3edf9;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.login-page {
|
|
display: grid;
|
|
grid-template-columns: 46% 54%;
|
|
min-height: 100dvh;
|
|
background: #fff;
|
|
}
|
|
.login-art {
|
|
background: linear-gradient(135deg, #302579, #252066);
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 75px 13%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.login-art:before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(#ffffff03 1px, transparent 1px),
|
|
linear-gradient(90deg, #ffffff03 1px, transparent 1px);
|
|
background-size: 39px 39px;
|
|
mask-image: linear-gradient(120deg, transparent, #000);
|
|
}
|
|
.login-art:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 550px;
|
|
height: 550px;
|
|
border: 1px solid #ffffff07;
|
|
border-radius: 50%;
|
|
bottom: -295px;
|
|
right: -310px;
|
|
box-shadow:
|
|
0 0 0 55px #ffffff03,
|
|
0 0 0 110px #ffffff02,
|
|
0 0 0 165px #ffffff02;
|
|
}
|
|
.login-product {
|
|
position: absolute;
|
|
top: 46px;
|
|
left: 13%;
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
letter-spacing: -1.8px;
|
|
font-style: italic;
|
|
}
|
|
.login-product > span {
|
|
font-size: 11px;
|
|
letter-spacing: 1px;
|
|
font-weight: 400;
|
|
margin-left: 7px;
|
|
font-style: normal;
|
|
vertical-align: super;
|
|
color: #b5a8e8;
|
|
}
|
|
.login-art .eyebrow {
|
|
color: #a79dce;
|
|
font-size: 9px;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 27px;
|
|
}
|
|
.login-art h1 {
|
|
font-size: clamp(38px, 4.3vw, 66px);
|
|
font-weight: 500;
|
|
letter-spacing: -2.7px;
|
|
line-height: 1.13;
|
|
color: #fff;
|
|
position: relative;
|
|
}
|
|
.login-art > p {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #a9a1cb;
|
|
margin-top: 26px;
|
|
line-height: 1.9;
|
|
max-width: 260px;
|
|
}
|
|
.login-route {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 42px;
|
|
max-width: 220px;
|
|
}
|
|
.login-route > span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid #9d8cc8;
|
|
border-radius: 50%;
|
|
background: #514284;
|
|
color: #d4c9e8;
|
|
}
|
|
.login-route > i {
|
|
height: 1px;
|
|
width: 75px;
|
|
background: linear-gradient(90deg, #7d6caa, #9780c0);
|
|
}
|
|
.login-route > span:last-child {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: #7e66b0;
|
|
border: 0;
|
|
box-shadow: 0 0 0 7px #7864a321;
|
|
}
|
|
.login-art-footer {
|
|
position: absolute;
|
|
left: 13%;
|
|
bottom: 40px;
|
|
color: #9488b6;
|
|
font-size: 10px;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
.login-main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
padding: 70px 25px;
|
|
}
|
|
.login-form {
|
|
width: 370px;
|
|
max-width: 100%;
|
|
}
|
|
.login-logo {
|
|
width: 176px;
|
|
display: block;
|
|
margin-bottom: 51px;
|
|
}
|
|
.login-form .eyebrow {
|
|
font-size: 9px;
|
|
color: #a093b6;
|
|
letter-spacing: 1.5px;
|
|
margin-bottom: 9px;
|
|
}
|
|
.login-form h2 {
|
|
font-size: 25px;
|
|
font-weight: 600;
|
|
color: #6c557f;
|
|
letter-spacing: -0.8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.login-form > .muted {
|
|
font-size: 12px;
|
|
color: #a28cba;
|
|
margin-bottom: 29px;
|
|
line-height: 1.7;
|
|
}
|
|
.login-form .field {
|
|
margin-bottom: 19px;
|
|
gap: 8px;
|
|
}
|
|
.login-form .field > span {
|
|
font-size: 11px;
|
|
color: #9b7fb4;
|
|
}
|
|
.login-form .field input {
|
|
font-size: 13px;
|
|
padding: 12px;
|
|
color: #7f5e98;
|
|
border-color: #e7dcef;
|
|
border-radius: 6px;
|
|
}
|
|
.login-submit {
|
|
width: 100%;
|
|
margin-top: 6px;
|
|
min-height: 43px;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
padding: 10px 15px;
|
|
}
|
|
.connection-note {
|
|
margin-top: 25px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
border: 1px solid #ece4f2;
|
|
background: #faf7fd;
|
|
border-radius: 7px;
|
|
padding: 13px 14px;
|
|
color: #aa95bb;
|
|
}
|
|
.connection-note > svg {
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
color: #b7a2c6;
|
|
}
|
|
.connection-note strong {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #a78dbb;
|
|
}
|
|
.connection-note p {
|
|
font-size: 10px;
|
|
line-height: 1.75;
|
|
color: #b5a0c6;
|
|
margin-top: 5px;
|
|
}
|
|
.connection-note .text-button {
|
|
font-size: 9px;
|
|
color: #a18cb2;
|
|
margin-right: 13px;
|
|
margin-top: 3px;
|
|
font-weight: 500;
|
|
}
|
|
.connection-note.connected {
|
|
background: #f5faf6;
|
|
border-color: #deeee1;
|
|
}
|
|
.connection-note.connected strong,
|
|
.connection-note.connected > svg {
|
|
color: #81a88b;
|
|
}
|
|
.connection-note.disconnected {
|
|
background: #fdfaf5;
|
|
border-color: #f0e6d9;
|
|
}
|
|
.connection-note.disconnected strong,
|
|
.connection-note.disconnected > svg {
|
|
color: #b49a75;
|
|
}
|
|
.connection-note.disconnected p {
|
|
color: #baab95;
|
|
}
|
|
.connection-note.disconnected .text-button {
|
|
color: #ab9274;
|
|
}
|
|
.login-footer {
|
|
position: absolute;
|
|
bottom: 28px;
|
|
color: #c0afcf;
|
|
font-size: 9px;
|
|
}
|
|
@media (min-width: 1550px) {
|
|
.order-table td {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.data-table td {
|
|
font-size: 12px;
|
|
}
|
|
.order-table .route-cell {
|
|
font-size: 11px;
|
|
}
|
|
.route-cell small {
|
|
max-width: 150px;
|
|
}
|
|
.customer-cell {
|
|
max-width: 210px;
|
|
}
|
|
.topbar,
|
|
main {
|
|
padding-left: 45px;
|
|
padding-right: 45px;
|
|
}
|
|
.main-nav {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
}
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.nav-links {
|
|
gap: 0;
|
|
}
|
|
.nav-links > button {
|
|
padding: 0 12px;
|
|
font-size: 11px;
|
|
}
|
|
.nav-context {
|
|
display: none;
|
|
}
|
|
.topbar {
|
|
padding: 0 25px;
|
|
}
|
|
main {
|
|
padding: 0 25px;
|
|
}
|
|
.organization,
|
|
.product-caption,
|
|
.product-divider {
|
|
display: none;
|
|
}
|
|
.tour-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.metric {
|
|
padding: 17px 16px;
|
|
}
|
|
.metric strong {
|
|
font-size: 25px;
|
|
}
|
|
.metric-icon {
|
|
width: 33px;
|
|
height: 33px;
|
|
}
|
|
.metric-detail {
|
|
font-size: 9px;
|
|
}
|
|
.metrics {
|
|
gap: 12px;
|
|
}
|
|
.order-table {
|
|
min-width: 1050px;
|
|
}
|
|
.order-table td,
|
|
.order-table th {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
.filter-row select {
|
|
width: 125px;
|
|
}
|
|
.filter-row select:nth-of-type(2) {
|
|
width: 140px;
|
|
}
|
|
.topbar-right {
|
|
gap: 14px;
|
|
}
|
|
.form-grid.cols-3 {
|
|
gap: 0 13px;
|
|
}
|
|
.page-heading h1 {
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
@media (max-width: 900px) {
|
|
.metrics {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.main-nav {
|
|
padding: 0 14px;
|
|
overflow-x: auto;
|
|
}
|
|
.nav-links > button {
|
|
padding: 0 14px;
|
|
white-space: nowrap;
|
|
}
|
|
.page-heading {
|
|
align-items: flex-start;
|
|
margin-top: 22px;
|
|
}
|
|
.page-heading p {
|
|
max-width: 330px;
|
|
line-height: 1.7;
|
|
}
|
|
.heading-actions .button > span {
|
|
display: none;
|
|
}
|
|
.filter-row {
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.filter-row .search-box {
|
|
flex: 1 1 60%;
|
|
}
|
|
.filter-row select:nth-of-type(2) {
|
|
flex: 1;
|
|
}
|
|
.filter-row select {
|
|
width: 135px;
|
|
}
|
|
.expanded-filters {
|
|
flex-wrap: wrap;
|
|
}
|
|
.expanded-filters .field:first-child {
|
|
width: auto;
|
|
flex: 1 1 100%;
|
|
}
|
|
.expanded-filters .field {
|
|
flex: 1;
|
|
}
|
|
.expanded-filters .text-button {
|
|
padding-top: 0;
|
|
align-self: flex-end;
|
|
}
|
|
.report-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.invoice-metrics {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.invoice-metrics .metric-icon {
|
|
display: none;
|
|
}
|
|
.invoice-metrics .metric strong {
|
|
font-size: 21px;
|
|
}
|
|
.form-grid.cols-3 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.form-grid.cols-3 > .address-row {
|
|
grid-column: 1/-1;
|
|
grid-template-columns: 1fr 3fr;
|
|
}
|
|
.login-art {
|
|
padding: 80px 10%;
|
|
}
|
|
.login-art h1 {
|
|
font-size: 46px;
|
|
}
|
|
.login-page {
|
|
grid-template-columns: 42% 58%;
|
|
}
|
|
.login-product {
|
|
left: 10%;
|
|
}
|
|
.login-art .eyebrow {
|
|
font-size: 7px;
|
|
letter-spacing: 1.3px;
|
|
}
|
|
.login-art > p {
|
|
font-size: 11px;
|
|
}
|
|
.login-art-footer {
|
|
left: 10%;
|
|
font-size: 8px;
|
|
}
|
|
.login-form {
|
|
width: 330px;
|
|
}
|
|
.login-form h2 {
|
|
font-size: 23px;
|
|
}
|
|
.readonly-notice {
|
|
align-items: flex-start;
|
|
}
|
|
.readonly-notice strong {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
.readonly-notice a {
|
|
align-self: center;
|
|
}
|
|
.app-footer {
|
|
font-size: 8px;
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.topbar {
|
|
height: 63px;
|
|
padding: 0 17px;
|
|
}
|
|
.wordmark {
|
|
font-size: 25px;
|
|
}
|
|
.wordmark > span {
|
|
font-size: 9px;
|
|
line-height: 15px;
|
|
}
|
|
.topbar-right {
|
|
gap: 11px;
|
|
}
|
|
.header-logo {
|
|
width: 96px;
|
|
}
|
|
.connection-badge {
|
|
display: none;
|
|
}
|
|
.user-avatar {
|
|
display: none;
|
|
}
|
|
.main-nav {
|
|
height: 49px;
|
|
padding: 0 5px;
|
|
}
|
|
.nav-links > button {
|
|
font-size: 10px;
|
|
padding: 0 12px;
|
|
gap: 6px;
|
|
}
|
|
.nav-links > button svg {
|
|
width: 14px;
|
|
}
|
|
main {
|
|
padding: 0 16px;
|
|
}
|
|
.breadcrumb {
|
|
padding-top: 15px;
|
|
font-size: 9px;
|
|
}
|
|
.breadcrumb > span {
|
|
display: none;
|
|
}
|
|
.page-heading {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin: 20px 0 20px;
|
|
}
|
|
.page-heading h1 {
|
|
font-size: 26px;
|
|
}
|
|
.page-heading p {
|
|
font-size: 11px;
|
|
max-width: none;
|
|
}
|
|
.heading-actions {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
margin: 0;
|
|
}
|
|
.heading-actions .button:first-child {
|
|
margin-right: auto;
|
|
}
|
|
.heading-actions .button > span {
|
|
display: inline;
|
|
}
|
|
.metric {
|
|
padding: 13px 12px;
|
|
min-height: 103px;
|
|
position: relative;
|
|
}
|
|
.metrics {
|
|
gap: 9px;
|
|
margin-bottom: 17px;
|
|
}
|
|
.metric-label {
|
|
font-size: 10px;
|
|
}
|
|
.metric strong {
|
|
font-size: 24px;
|
|
}
|
|
.metric-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 37px;
|
|
}
|
|
.metric-icon svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
.metric-detail {
|
|
font-size: 8px;
|
|
max-width: 130px;
|
|
}
|
|
.tabs {
|
|
gap: 18px;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
.tabs button {
|
|
font-size: 10px;
|
|
gap: 4px;
|
|
}
|
|
.panel-tabs {
|
|
padding: 0 13px;
|
|
height: 49px;
|
|
}
|
|
.tabs button span {
|
|
font-size: 8px;
|
|
padding: 1px 4px;
|
|
}
|
|
.view-toggle {
|
|
display: none;
|
|
}
|
|
.filter-row {
|
|
padding: 13px;
|
|
}
|
|
.filter-row .search-box {
|
|
flex: 1 1 100%;
|
|
margin: 0;
|
|
}
|
|
.filter-row select {
|
|
width: calc(50% - 5px);
|
|
flex: 1 1 calc(50% - 5px);
|
|
}
|
|
.filter-row .button {
|
|
flex: 1;
|
|
font-size: 10px;
|
|
}
|
|
.filter-row .button:last-child {
|
|
margin-left: 0;
|
|
}
|
|
.expanded-filters {
|
|
padding: 0 13px 13px;
|
|
gap: 9px;
|
|
}
|
|
.expanded-filters .field {
|
|
min-width: 120px;
|
|
}
|
|
.table-footer {
|
|
padding: 11px 13px;
|
|
font-size: 9px;
|
|
}
|
|
.refresh-checkbox {
|
|
display: none;
|
|
}
|
|
.section-toolbar {
|
|
padding: 17px;
|
|
flex-wrap: wrap;
|
|
gap: 14px;
|
|
}
|
|
.section-toolbar h2 {
|
|
font-size: 13px;
|
|
}
|
|
.section-toolbar .search-box {
|
|
width: 100%;
|
|
}
|
|
.section-toolbar .muted {
|
|
font-size: 9px;
|
|
}
|
|
.tour-grid {
|
|
grid-template-columns: 1fr;
|
|
padding: 0 16px 16px;
|
|
}
|
|
.invoice-metrics {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.invoice-metrics .metric {
|
|
min-height: 85px;
|
|
padding: 14px 16px;
|
|
}
|
|
.invoice-metrics .metric strong {
|
|
font-size: 24px;
|
|
}
|
|
.invoice-metrics .metric-icon {
|
|
display: grid;
|
|
position: static;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
.invoice-metrics .metric-detail {
|
|
max-width: none;
|
|
font-size: 9px;
|
|
}
|
|
.invoice-metrics .metric-icon svg {
|
|
width: 20px;
|
|
}
|
|
.report-toolbar {
|
|
justify-content: space-between;
|
|
font-size: 10px;
|
|
}
|
|
.report-toolbar select {
|
|
font-size: 10px;
|
|
}
|
|
.chart-panel {
|
|
padding: 20px;
|
|
}
|
|
.chart-row {
|
|
font-size: 9px;
|
|
}
|
|
.chart-row > span {
|
|
width: 90px;
|
|
}
|
|
.chart-row > strong {
|
|
font-size: 10px;
|
|
}
|
|
.modal-backdrop {
|
|
padding: 9px;
|
|
}
|
|
.modal {
|
|
max-height: calc(100dvh - 18px);
|
|
border-radius: 9px;
|
|
}
|
|
.modal-heading {
|
|
padding: 18px;
|
|
}
|
|
.modal-heading h2 {
|
|
font-size: 17px;
|
|
}
|
|
.modal-heading p {
|
|
font-size: 10px;
|
|
}
|
|
.modal-body {
|
|
padding: 18px;
|
|
}
|
|
.modal-footer {
|
|
padding: 13px 18px;
|
|
gap: 7px;
|
|
}
|
|
.modal-footer .button {
|
|
padding: 8px 10px;
|
|
font-size: 11px;
|
|
}
|
|
.modal-footer > .muted {
|
|
display: none;
|
|
}
|
|
.form-grid.cols-3,
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.form-grid.address-row {
|
|
grid-template-columns: 1fr 2fr;
|
|
}
|
|
.form-grid.cols-3 > .address-row {
|
|
grid-template-columns: 1fr 2fr;
|
|
}
|
|
.form-section h3 {
|
|
font-size: 11px;
|
|
}
|
|
.form-section-header .text-button {
|
|
font-size: 10px;
|
|
}
|
|
.stop-editor {
|
|
padding: 12px 12px 0;
|
|
}
|
|
.detail-drawer {
|
|
width: 100%;
|
|
}
|
|
.drawer-heading {
|
|
padding: 20px 22px 14px;
|
|
}
|
|
.drawer-body {
|
|
padding: 0 22px;
|
|
}
|
|
.drawer-status {
|
|
padding: 0 22px 16px;
|
|
}
|
|
.drawer-tabs {
|
|
padding: 0 22px;
|
|
}
|
|
.drawer-actions {
|
|
padding: 14px 22px 20px;
|
|
}
|
|
.invoice-address {
|
|
flex-direction: column;
|
|
gap: 25px;
|
|
}
|
|
.invoice-brand img {
|
|
width: 128px;
|
|
}
|
|
.invoice-totals {
|
|
max-width: 100%;
|
|
}
|
|
.app-footer {
|
|
font-size: 8px;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
.app-footer > span:first-child {
|
|
display: none;
|
|
}
|
|
.app-footer > span:last-child {
|
|
margin-left: auto;
|
|
}
|
|
.readonly-notice {
|
|
font-size: 9px;
|
|
gap: 7px;
|
|
padding: 10px;
|
|
}
|
|
.readonly-notice a {
|
|
font-size: 8px;
|
|
}
|
|
.readonly-notice strong {
|
|
font-size: 9px;
|
|
}
|
|
.offline-panel {
|
|
padding: 36px 22px;
|
|
}
|
|
.offline-panel h2 {
|
|
font-size: 16px;
|
|
}
|
|
.offline-panel p {
|
|
font-size: 11px;
|
|
}
|
|
.offline-panel .muted {
|
|
font-size: 10px;
|
|
}
|
|
.login-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.login-art {
|
|
display: none;
|
|
}
|
|
.login-main {
|
|
min-height: 100dvh;
|
|
padding: 42px 25px 60px;
|
|
}
|
|
.login-form {
|
|
width: 360px;
|
|
}
|
|
.login-logo {
|
|
width: 155px;
|
|
margin-bottom: 36px;
|
|
}
|
|
.login-form h2 {
|
|
font-size: 25px;
|
|
}
|
|
.login-footer {
|
|
bottom: 21px;
|
|
}
|
|
.connection-note {
|
|
margin-top: 22px;
|
|
}
|
|
}
|
|
@media print {
|
|
body {
|
|
background: #fff;
|
|
}
|
|
body * {
|
|
visibility: hidden;
|
|
}
|
|
.modal-backdrop,
|
|
.modal,
|
|
.invoice-print,
|
|
.invoice-print * {
|
|
visibility: visible;
|
|
}
|
|
.modal-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: #fff;
|
|
padding: 0;
|
|
display: block;
|
|
backdrop-filter: none;
|
|
}
|
|
.modal {
|
|
max-height: none;
|
|
width: 100% !important;
|
|
max-width: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
display: block;
|
|
}
|
|
.modal-heading,
|
|
.modal-footer {
|
|
display: none;
|
|
}
|
|
.invoice-print {
|
|
padding: 25px;
|
|
overflow: visible;
|
|
color: #000;
|
|
}
|
|
.invoice-print * {
|
|
color: #000 !important;
|
|
}
|
|
.invoice-print .data-table {
|
|
white-space: normal;
|
|
}
|
|
.invoice-print .data-table td,
|
|
.invoice-print .data-table th {
|
|
padding: 10px;
|
|
}
|
|
.invoice-print .data-table tr {
|
|
break-inside: avoid;
|
|
}
|
|
.invoice-note {
|
|
margin-top: 35px;
|
|
}
|
|
.invoice-print .wordmark {
|
|
color: #4031a0 !important;
|
|
}
|
|
@page {
|
|
size: A4;
|
|
margin: 15mm;
|
|
}
|
|
}
|
|
/* Contrast keeps dense operational information readable. */
|
|
.data-table td {
|
|
color: #63596f;
|
|
}
|
|
.data-table td strong {
|
|
color: #554861;
|
|
}
|
|
.data-table .order-number {
|
|
color: #594575;
|
|
}
|
|
.data-table th {
|
|
color: #83768f;
|
|
}
|
|
.data-table td .cell-sub,
|
|
.cell-sub {
|
|
color: #9a8ca4;
|
|
}
|
|
.courier-cell {
|
|
color: #867093;
|
|
}
|
|
.courier-cell small {
|
|
color: #a18aae;
|
|
}
|
|
.vehicle {
|
|
color: #8c799b;
|
|
}
|
|
.unassigned {
|
|
color: #a99ab3;
|
|
}
|
|
.route-cell > span {
|
|
color: #7c648e;
|
|
}
|
|
.route-cell small {
|
|
color: #a28bae;
|
|
}
|
|
.price-cell {
|
|
color: #694e7e !important;
|
|
}
|
|
.data-scope {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
color: #92869e;
|
|
font-size: 10px;
|
|
margin: 0 1px 13px;
|
|
}
|
|
.data-scope strong {
|
|
font-weight: 600;
|
|
color: #80718f;
|
|
}
|
|
.nav-links > button:disabled {
|
|
opacity: 0.36;
|
|
}
|
|
.field > span {
|
|
color: #8b709b;
|
|
}
|
|
.field > input,
|
|
.field > select,
|
|
.field > textarea {
|
|
color: #705380;
|
|
}
|
|
.modal-heading h2,
|
|
.drawer-heading h2 {
|
|
color: #705181;
|
|
}
|
|
.timeline-stop h4 {
|
|
color: #8c639b;
|
|
}
|
|
.timeline-stop p,
|
|
.detail-section > p {
|
|
color: #a68ab3;
|
|
}
|
|
.detail-grid strong {
|
|
color: #9670a4;
|
|
}
|
|
.chart-panel h2,
|
|
.section-toolbar h2 {
|
|
color: #80648e;
|
|
}
|
|
.login-form h2 {
|
|
color: #5d456f;
|
|
}
|
|
.login-form > .muted {
|
|
color: #9780aa;
|
|
}
|
|
.login-form .field > span {
|
|
color: #8a6ea1;
|
|
}
|
|
.connection-note.disconnected strong {
|
|
color: #9c805e;
|
|
}
|
|
.connection-note.disconnected p {
|
|
color: #ab967d;
|
|
}
|
|
.connection-note.disconnected .text-button {
|
|
color: #997c59;
|
|
}
|
|
.readonly-notice {
|
|
color: #91819f;
|
|
}
|
|
.data-table tbody tr:focus-visible {
|
|
outline-offset: -3px;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.data-scope {
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
.date-filter-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
padding: 15px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: #fcfbfe;
|
|
}
|
|
.date-filter-caption {
|
|
align-self: center;
|
|
margin-right: 3px;
|
|
color: #766785;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.date-filter-row .field {
|
|
width: 155px;
|
|
margin: 0;
|
|
gap: 4px;
|
|
}
|
|
.date-filter-row .field > span {
|
|
font-size: 9px;
|
|
}
|
|
.date-filter-row .field > input {
|
|
height: 35px;
|
|
font-size: 11px;
|
|
}
|
|
.date-filter-row .button {
|
|
min-height: 35px;
|
|
}
|
|
.date-filter-summary {
|
|
align-self: center;
|
|
margin-left: auto;
|
|
color: #94849f;
|
|
font-size: 10px;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.date-filter-row {
|
|
gap: 10px;
|
|
padding: 13px;
|
|
}
|
|
.date-filter-caption {
|
|
flex-basis: 100%;
|
|
}
|
|
.date-filter-row .field {
|
|
flex: 1 1 calc(50% - 5px);
|
|
width: auto;
|
|
}
|
|
}
|