:root {
    font-family: "DM Sans", sans-serif;
    color: #253b39;
    background: #f5f7f7;
    font-synthesis: none;
    font-size: 14px;
    --green: #247a68;
    --dark: #153632;
    --muted: #7e8d8b;
    --border: #e4eae8;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
button, input, select, textarea {
    font: inherit;
}
button {
    cursor: pointer;
    background: var(--green);
    color: white;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 11px 17px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s, box-shadow 0.15s;
}
button:hover {
    filter: brightness(0.97);
    box-shadow: 0 2px 5px #163a3210;
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
button:focus-visible, a:focus-visible {
    outline: 3px solid #4dac97;
    outline-offset: 3px;
}
input, select, textarea {
    background: #fff;
    border: 1px solid #dbe3e0;
    border-radius: 6px;
    padding: 10px 11px;
    color: #29423e;
    min-width: 0;
    max-width: 100%;
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: #479580;
    box-shadow: 0 0 0 3px #247a6810;
}
input:disabled, select:disabled {
    background: #f5f7f6;
    border-color: transparent;
}
textarea {
    min-height: 100px;
    resize: vertical;
}
h1, h2, h3, p {
    margin-top: 0;
}
h1, h2, h3 {
    font-family: Manrope, "DM Sans", sans-serif;
}
h1 {
    font-size: 29px;
    font-weight: 750;
    letter-spacing: -1.1px;
    margin-bottom: 9px;
}
h2 {
    font-size: 17px;
    letter-spacing: -0.4px;
    margin-bottom: 9px;
}
h3 {
    font-size: 15px;
}
p {
    line-height: 1.6;
    color: #7a8885;
}
small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}
a {
    color: var(--green);
}
.muted {
    color: var(--muted);
}
.secondary {
    background: #fff;
    border-color: #dbe4e0;
    color: #425b54;
}
.text-button {
    padding: 0;
    background: transparent;
    color: var(--green);
    font-size: 12px;
}
.icon-button {
    padding: 7px;
    background: transparent;
    color: #7b8d86;
    border: 0;
}
.error {
    background: #fff0ec !important;
    color: #a64034 !important;
    border-radius: 7px;
    padding: 12px;
}
.notice {
    padding: 14px 18px;
    background: #edf5f1;
    color: #3b665a;
    border-radius: 7px;
    font-size: 13px;
    margin: 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.6;
}
.warning {
    background: #fff5e5;
    color: #927036;
}
.red-text {
    color: #b85e4f;
}
.danger {
    color: #b95148;
}
.full {
    width: 100%;
}
.actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.eyebrow {
    font-size: 9px;
    letter-spacing: 1.7px;
    font-weight: 700;
    color: #81928d;
    display: block;
    margin-bottom: 12px;
}
.app {
    min-height: 100vh;
}
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 232px;
    background: #fff;
    border-right: 1px solid var(--border);
    z-index: 40;
    display: flex;
    flex-direction: column;
    padding: 31px 17px 0;
}
.brand {
    background: transparent;
    padding: 0 10px;
    color: #183a32;
    font-family: Manrope, sans-serif;
    font-size: 35px;
    letter-spacing: -2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-weight: 800;
}
.brand-icon {
    background: #1e6655;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    transform: rotate(-5deg);
    margin-right: 1px;
}
.brand-period {
    color: #4eab8f;
    margin-left: -9px;
}
.workspace-label {
    padding: 31px 14px 23px;
}
.workspace-label > span {
    font-size: 9px;
    letter-spacing: 1.3px;
    font-weight: 700;
    color: #9aa5a0;
}
.workspace-label small {
    font-size: 11px;
    margin-top: 5px;
}
.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sidebar nav button {
    background: transparent;
    color: #74837c;
    padding: 13px 12px;
    justify-content: flex-start;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    gap: 12px;
}
.sidebar nav button.active {
    background: #eaf4ee;
    color: #297259;
    font-weight: 700;
}
.sidebar nav b {
    margin-left: auto;
    font-size: 10px;
    border-radius: 5px;
    background: #d9ecdf;
    padding: 3px 5px;
}
.sidebar nav button:nth-last-child(1) {
    margin-top: 20px;
    border-top: 1px solid #edf0ee;
    border-radius: 0;
    padding-top: 23px;
}
.sidebar-bottom {
    margin-top: auto;
    padding: 30px 0 0;
}
.demo-badge {
    font-size: 10px;
    color: #65937e;
    background: #f3f7f4;
    border: 1px solid #e7efe9;
    border-radius: 6px;
    padding: 10px 11px;
    display: flex;
    gap: 7px;
    align-items: center;
}
.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #58ab87;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #59ab8710;
}
.sidebar-bottom > p {
    font-size: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 24px;
    color: #9aa6a0;
}
.sidebar-profile {
    border-top: 1px solid var(--border);
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 18px 0;
}
.sidebar-profile strong {
    font-size: 11px;
}
.sidebar-profile small {
    font-size: 10px;
}
.sidebar-profile .icon-button {
    margin-left: auto;
}
.avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecdfca;
    color: #8b764f;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
.avatar.small {
    width: 30px;
    height: 30px;
    background: #edf2ed;
    color: #62806a;
}
.main-shell {
    margin-left: 232px;
}
.topbar {
    height: 79px;
    display: flex;
    align-items: center;
    gap: 23px;
    padding: 0 36px;
    border-bottom: 1px solid var(--border);
    background: #ffffffc9;
    position: relative;
    z-index: 20;
}
.breadcrumb {
    font-size: 11px;
    color: #9aa5a0;
    white-space: nowrap;
}
.breadcrumb span {
    margin: 0 12px;
    color: #c6ceca;
}
.breadcrumb strong {
    font-weight: 500;
    color: #5f7268;
}
.global-search {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    position: relative;
    width: 280px;
    color: #96a39e;
}
.global-search input {
    width: 100%;
    background: transparent;
    border: 0;
    padding-left: 0;
    font-size: 11px;
}
.global-search kbd {
    border: 1px solid #e5eae7;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 11px;
}
.notifications {
    position: relative;
}
.notifications i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cc926a;
    position: absolute;
    right: 9px;
    top: 7px;
}
.search-results, .notification-panel {
    position: absolute;
    top: 43px;
    right: 0;
    width: 380px;
    max-width: 85vw;
    background: #fff;
    padding: 10px;
    box-shadow: 0 15px 60px #183b3222;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.search-results button, .notification-panel button {
    background: transparent;
    color: #395349;
    width: 100%;
    justify-content: flex-start;
    padding: 11px;
    text-align: left;
    font-size: 12px;
}
.search-results button:hover, .notification-panel button:hover {
    background: #f2f6f3;
}
.search-results button div {
    flex: 1;
}
.notification-panel button {
    display: block;
    border-bottom: 1px solid var(--border);
}
.notification-panel h3 {
    padding: 10px;
}
.top-avatar {
    background: #f2e9dc;
}
.mobile-menu {
    display: none;
}
main {
    padding: 34px 36px 36px;
    max-width: 1800px;
    margin: auto;
    min-height: calc(100vh - 135px);
}
.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 27px;
}
.page-title p {
    font-size: 12px;
    margin-bottom: 0;
}
.page-title > .actions {
    flex-shrink: 0;
}
.page-title button {
    font-size: 12px;
}
.dashboard-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #edf3ee;
    border: 1px solid #e2ebe3;
    border-radius: 7px;
    padding: 13px 17px;
    font-size: 10px;
    color: #64826a;
    margin-bottom: 22px;
}
.dashboard-banner .live-dot {
    margin-right: 8px;
}
.dashboard-banner > span {
    font-size: 10px;
    color: #94a18f;
}
.banner-sub {
    margin-left: 20px;
    color: #9aaa98;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    margin-bottom: 25px;
}
.stat {
    background: #fff;
    border: 1px solid var(--border);
    padding: 20px;
    display: block;
    text-align: left;
    box-shadow: 0 3px 10px #152b2010;
    color: #364e42;
    border-radius: 9px;
}
.stat-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 500;
    color: #7a8a7f;
    gap: 10px;
}
.stat-label svg {
    color: #849e8b;
    background: #f2f6f0;
    padding: 3px;
    box-sizing: content-box;
    border-radius: 6px;
}
.stat > strong {
    display: block;
    font-family: Manrope, sans-serif;
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -1px;
    margin: 6px 0 12px;
}
.stat > span {
    font-size: 10px;
    color: #95a398;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 23px;
}
.panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 2px 5px #22382c03;
}
.dashboard-grid > .panel {
    margin-bottom: 0;
}
.panel-heading {
    padding: 23px 24px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.panel-heading h2 {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.panel-heading p {
    font-size: 10px;
    margin: 0;
    color: #97a29b;
}
.panel-heading > button {
    font-size: 11px;
}
.count {
    border-radius: 5px;
    background: #f1f5ee;
    font-size: 10px;
    color: #809171;
    padding: 3px 6px;
    font-family: "DM Sans";
    letter-spacing: 0;
}
.count.warm {
    background: #f6ead9;
    color: #a8824e;
}
.case-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    color: #43584b;
    text-align: left;
    border-radius: 0;
    border: 0;
    border-top: 1px solid #eff2ef;
    padding: 16px 23px;
    gap: 12px;
}
.car-tile {
    background: #edf1ea;
    border: 1px solid #e6ebe2;
    width: 49px;
    height: 43px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a8970;
    flex-shrink: 0;
}
.tone-1 {
    background: #efefed;
    color: #82847d;
}
.tone-2 {
    background: #edf1f4;
    color: #7d8e95;
}
.case-row-name {
    flex: 1;
    min-width: 80px;
}
.case-row-name strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
}
.case-row-name span {
    font-size: 9px;
    font-weight: 400;
    display: block;
    color: #9ca79e;
    margin-top: 5px;
}
.case-row-name b {
    margin: 0 6px;
    font-weight: 400;
}
.case-row > svg {
    color: #a9b3a9;
    flex-shrink: 0;
}
.row-date {
    margin-left: 8px;
    min-width: 52px;
    text-align: right;
}
.row-date span {
    display: block;
    color: #a1aba3;
    font-size: 8px;
    font-weight: 400;
}
.row-date strong {
    font-size: 10px;
    font-weight: 500;
    display: block;
    margin-top: 5px;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 5px;
    white-space: nowrap;
    background: #eef1ef;
    color: #7d8c82;
    line-height: 1.3;
}
.badge i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.badge.green {
    background: #eaf5ed;
    color: #55926c;
}
.badge.amber {
    background: #faf0dc;
    color: #b08b41;
}
.badge.blue {
    background: #eaf0f7;
    color: #688bac;
}
.badge.red {
    background: #fbebe5;
    color: #ba7963;
}
.badge.gray {
    background: #f1f2ee;
    color: #8e9685;
}
.attention {
    background: #fffcf6;
    border-color: #eee8dc;
}
.attention .panel-heading {
    border-bottom: 1px solid #f0ebdf;
}
.attention h2 {
    color: #8f7952;
}
.attention h2 svg {
    color: #b19a6a;
}
.alert-list {
    padding: 4px 20px;
}
.alert-row {
    background: transparent;
    border-radius: 0;
    text-align: left;
    color: #756b54;
    padding: 15px 0;
    justify-content: flex-start;
    width: 100%;
    border-bottom: 1px solid #f0ece2;
    gap: 11px;
}
.alert-row:last-child {
    border-bottom: 0;
}
.alert-dot {
    width: 6px;
    height: 6px;
    background: #cda85b;
    border-radius: 50%;
    flex-shrink: 0;
}
.alert-dot.red {
    background: #ce947b;
}
.alert-dot.blue {
    background: #8facc3;
}
.alert-row div {
    flex: 1;
}
.alert-row strong {
    font-size: 10px;
    font-weight: 500;
}
.alert-row p {
    font-size: 9px;
    margin: 4px 0 0;
    color: #aba18d;
}
.alert-row svg {
    color: #c2b69c;
}
.timeline {
    padding: 0 24px 11px;
}
.timeline button {
    background: transparent;
    color: #607263;
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3ef;
    border-radius: 0;
    width: 100%;
    text-align: left;
    gap: 12px;
}
.timeline button:last-child {
    border: 0;
}
.timeline strong {
    font-size: 10px;
    font-weight: 600;
}
.timeline p {
    font-size: 10px;
    margin: 4px 0 0;
    color: #99a297;
}
.timeline time {
    font-size: 9px;
    color: #a7afa4;
    margin-left: auto;
    white-space: nowrap;
    font-weight: 400;
}
.right-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.finance-card {
    background: #244c3e;
    color: #f1f5e9;
    border-radius: 9px;
    padding: 24px;
}
.finance-card > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #a9c1a7;
}
.finance-card > div > span {
    font-size: 9px;
    letter-spacing: 1px;
}
.finance-card > strong {
    font-size: 30px;
    font-family: Manrope;
    letter-spacing: -1px;
    display: block;
    font-weight: 500;
    margin: 20px 0 8px;
}
.finance-card > p {
    font-size: 9px;
    color: #96ae96;
    margin: 0 0 24px;
}
.finance-card button {
    border-top: 1px solid #51745d;
    background: transparent;
    width: 100%;
    justify-content: space-between;
    padding: 15px 0 0;
    border-radius: 0;
    color: #b6cdb0;
    font-weight: 400;
    font-size: 10px;
}
.agenda-card {
    background: #fff;
    border: 1px solid var(--border);
    color: #799273;
    padding: 23px;
    text-align: left;
    justify-content: flex-start;
    gap: 16px;
}
.agenda-card div {
    flex: 1;
}
.agenda-card strong {
    color: #586d51;
    font-size: 11px;
    font-weight: 500;
}
.agenda-card p {
    font-size: 10px;
    margin: 5px 0 0;
    color: #a5ae9f;
}
.app-footer {
    padding: 17px 36px;
    border-top: 1px solid #e8ece6;
    display: flex;
    justify-content: space-between;
    color: #aeb6ab;
    font-size: 9px;
    gap: 10px;
}
.app-footer b {
    font-weight: 400;
    margin-left: 12px;
    color: #b4bbb0;
}
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.filter-bar > input, .search-input {
    flex: 1;
    max-width: 460px;
}
.filter-bar > span {
    font-size: 11px;
    color: #8c9a91;
    margin-left: auto;
}
.search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding-left: 12px;
    border: 1px solid #dfe6e0;
    border-radius: 7px;
    color: #8a9c8e;
}
.search-input input {
    width: 100%;
    border: 0;
    background: transparent;
}
.filter-chips {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.filter-chips button {
    background: transparent;
    color: #829180;
    border: 1px solid #dfe6dc;
    font-size: 11px;
    padding: 9px 12px;
}
.filter-chips button.selected {
    background: #e7f0e4;
    color: #4c7b49;
    border-color: #c9ddc5;
}
.filter-chips span {
    background: #ffffff80;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 9px;
}
.table-wrap {
    overflow-x: auto;
    width: 100%;
}
table {
    border-collapse: collapse;
    width: 100%;
    white-space: nowrap;
    text-align: left;
    font-size: 11px;
}
th {
    background: #f8faf7;
    color: #92a08e;
    text-transform: none;
    font-size: 10px;
    font-weight: 500;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
}
td {
    padding: 18px;
    border-bottom: 1px solid #eef2eb;
    color: #677960;
}
td strong {
    font-size: 11px;
    font-weight: 600;
    color: #486044;
}
td small {
    font-size: 9px;
    color: #9daa98;
    margin-top: 3px;
}
tr:last-child td {
    border-bottom: 0;
}
tr.clickable:hover {
    background: #f7faf5;
    cursor: pointer;
}
.table-sort {
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    justify-content: flex-start;
}
.row-link {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
    display: block;
}
.empty {
    padding: 55px 20px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #a4b1a0;
}
.empty p {
    margin: 15px 0;
    color: #94a18e;
    font-size: 13px;
}
.overlay {
    position: fixed;
    inset: 0;
    background: #102c246b;
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 25px;
}
.modal {
    background: #fff;
    border-radius: 14px;
    width: 700px;
    max-width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding: 27px;
    box-shadow: 0 25px 90px #0e312833;
}
.modal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 23px;
}
.modal-title h2 {
    font-size: 21px;
    margin: 0;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 19px;
}
.form-grid label, .photo-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    color: #6a7f66;
}
.form-grid .wide {
    grid-column: 1/-1;
}
.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    background: #204c3f;
    color: #fff;
    box-shadow: 0 8px 30px #0d392532;
    padding: 13px 19px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 90vw;
    font-size: 12px;
}
.toast .icon-button {
    color: inherit;
}
.loading {
    padding: 80px;
    text-align: center;
    color: #78916e;
}
.back {
    background: transparent;
    color: #7b9272;
    padding: 0;
    margin: 0 0 24px;
    font-size: 11px;
}
.dossier-hero {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-bottom: 29px;
}
.hero-car {
    width: 115px;
    height: 115px;
    background: linear-gradient(130deg, #e2e8db, #f0f2e9);
    border: 1px solid #d9e2d3;
    border-radius: 12px;
    color: #78896a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.hero-car span {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 9px;
}
.hero-title {
    flex: 1;
}
.hero-title h1 {
    font-size: 29px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}
.hero-title p {
    font-size: 11px;
    margin: 10px 0;
}
.hero-title p span {
    margin: 0 7px;
    color: #aeb9a8;
}
.plate {
    font-family: "DM Sans";
    font-size: 12px;
    letter-spacing: 1px;
    border: 1px solid #dce3d5;
    background: #fff;
    color: #5a7052;
    border-radius: 5px;
    padding: 7px 10px;
    white-space: nowrap;
    display: inline-block;
}
.hero-delivery {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.hero-delivery > span {
    font-size: 10px;
    color: #8e9f85;
    display: flex;
    align-items: center;
    gap: 7px;
}
.hero-delivery strong {
    font-size: 13px;
}
.hero-delivery button {
    font-size: 10px;
}
.progress-panel {
    padding: 21px 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 22px;
}
.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #8b9b82;
    margin-bottom: 18px;
}
.progress-header strong {
    color: #5b7350;
    font-weight: 600;
}
.progress-line {
    display: flex;
    gap: 5px;
}
.progress-line > div {
    height: 5px;
    flex: 1;
    background: #eaf0e4;
    border-radius: 5px;
}
.progress-line > div.done {
    background: #63a176;
}
.progress-line > div.current {
    background: #beaa73;
}
.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #9aa98e;
    margin-top: 12px;
}
.tabs {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid #dde6d7;
    margin: 24px 0;
    overflow-x: auto;
}
.tabs button {
    border-radius: 0;
    background: transparent;
    color: #8c9c80;
    font-size: 12px;
    padding: 15px 17px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.tabs button.active {
    color: #457740;
    border-bottom-color: #588a4d;
}
.tabs span {
    background: #ebf1e5;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 9px;
}
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: 22px;
}
.padded {
    padding: 25px;
}
.flush {
    padding: 0;
    margin-bottom: 23px;
}
.description {
    font-size: 14px;
    color: #78906a;
    max-width: 550px;
    margin: 22px 0 30px;
}
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 30px;
}
.info-grid > div > span {
    display: block;
    font-size: 10px;
    color: #9bad90;
    margin-bottom: 8px;
}
.info-grid strong {
    font-size: 12px;
    font-weight: 500;
    color: #5b7450;
    word-break: break-word;
}
.summary-money > strong {
    font-family: Manrope;
    font-size: 29px;
    display: block;
    margin: 20px 0 15px;
    color: #466e40;
}
.summary-money > .text-button {
    display: flex;
    margin-top: 25px;
}
.qr-panel {
    display: flex;
    gap: 17px;
    align-items: center;
}
.qr-panel img {
    width: 100px;
    height: 100px;
}
.qr-panel h3 {
    font-size: 12px;
}
.qr-panel p, .qr-panel a {
    font-size: 10px;
}
.qr-panel small {
    font-size: 9px;
    margin-top: 8px;
}
.work-step {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 0;
    border-bottom: 1px solid #eaf0e4;
}
.work-step:last-child {
    border: 0;
}
.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f4e9;
    color: #9aad87;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
}
.step-number.done {
    background: #e3f0df;
    color: #5c964d;
}
.work-step > div {
    flex: 1;
}
.work-step strong {
    font-size: 12px;
}
.work-step p {
    font-size: 10px;
    margin: 5px 0 0;
    color: #99ad87;
}
.work-step > button {
    font-size: 10px;
}
.damage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.damage-card {
    border: 1px solid #e6e9de;
    background: #fcfdf8;
    padding: 20px;
    border-radius: 8px;
}
.damage-card > svg {
    color: #b5a477;
    margin-right: 15px;
}
.damage-card h3 {
    margin: 20px 0 10px;
}
.damage-card p {
    font-size: 12px;
    margin-bottom: 0;
}
.photo-form {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-end;
}
.photo-form input[type="file"] {
    max-width: 250px;
    font-size: 10px;
}
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 25px;
}
.photo-grid figure {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.photo-grid img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}
.photo-grid figcaption {
    padding: 13px;
}
.photo-grid p {
    font-size: 11px;
    margin: 9px 0 0;
}
.quote-table {
    margin-bottom: 20px;
}
.quote-table th, .quote-table td {
    padding: 11px 7px;
}
.quote-table td input {
    width: 85px;
    font-size: 11px;
}
.quote-table td:first-child {
    min-width: 240px;
}
.quote-table td:first-child input {
    display: block;
    width: 100%;
    margin-top: 5px;
}
.quote-table td:first-child select {
    font-size: 10px;
    width: 100%;
    padding: 7px;
}
.quote-total {
    max-width: 340px;
    margin: 25px 0 25px auto;
}
.quote-total > div {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    color: #8a9b7f;
    font-size: 12px;
}
.quote-total strong {
    font-weight: 500;
    color: #576f4c;
}
.quote-total .grand-total {
    border-top: 1px solid var(--border);
    font-size: 19px;
    margin-top: 8px;
    color: #547848;
}
.quote-total .grand-total strong {
    font-weight: 700;
}
.quote-actions {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}
.quote-actions button {
    font-size: 11px;
}
.invoice-amount {
    font-size: 38px;
    font-family: Manrope;
    color: #44713c;
    margin: 25px 0;
}
.history article {
    display: flex;
    gap: 20px;
    padding: 15px 0;
    position: relative;
}
.history article:not(:last-child):before {
    content: "";
    position: absolute;
    top: 25px;
    bottom: -20px;
    left: 4px;
    border-left: 1px solid #dae6d2;
}
.history-dot {
    width: 9px;
    height: 9px;
    background: #9dbc86;
    border-radius: 50%;
    margin-top: 4px;
    z-index: 1;
    flex-shrink: 0;
}
.history strong {
    font-size: 12px;
}
.history p {
    margin: 6px 0;
    font-size: 12px;
}
.history time {
    font-size: 10px;
    color: #9baf8c;
}
.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(135px, 1fr));
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 20px;
}
.calendar.single {
    grid-template-columns: 1fr;
}
.calendar > section {
    border-right: 1px solid var(--border);
    min-height: 440px;
}
.calendar > section:last-child {
    border: 0;
}
.calendar header {
    padding: 19px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.calendar header span {
    font-size: 10px;
    text-transform: uppercase;
    color: #8ea180;
}
.calendar header strong {
    font-size: 24px;
    font-weight: 500;
    color: #718964;
}
.calendar .today header {
    background: #eff6e8;
}
.calendar .today header strong {
    color: #497837;
}
.day-body {
    padding: 9px;
}
.appointment {
    background: #ecf4e5;
    color: #557d44;
    border: 1px solid #dae8d0;
    padding: 12px 9px;
    width: 100%;
    display: block;
    text-align: left;
    margin-bottom: 9px;
    border-radius: 7px;
    white-space: normal;
}
.appointment.purple {
    background: #eeedf5;
    border-color: #e0dfee;
    color: #8980a6;
}
.appointment > span {
    font-size: 9px;
    font-weight: 400;
    display: block;
    margin-bottom: 12px;
}
.appointment > strong {
    font-size: 11px;
    display: block;
}
.appointment > small {
    font-size: 9px;
    color: inherit;
    opacity: 0.65;
}
.appointment > p {
    font-size: 10px;
    color: inherit;
    margin: 13px 0;
}
.appointment > div {
    font-size: 9px;
    border-top: 1px solid #cfddc6;
    padding-top: 9px;
    opacity: 0.7;
}
.directory-case {
    width: 100%;
    background: #f8faf4;
    color: #657e56;
    text-align: left;
    justify-content: space-between;
    margin-bottom: 9px;
    padding: 14px;
}
.directory-case strong {
    font-size: 12px;
}
.directory-case small {
    font-weight: 400;
}
.mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 25px 0;
}
.mini-stats > div {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 24px;
}
.mini-stats span {
    display: block;
    color: #8c9f7d;
    font-size: 11px;
    margin-bottom: 15px;
}
.mini-stats strong {
    font-size: 26px;
    font-family: Manrope;
    color: #506e41;
}
.replacement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}
.replacement-visual {
    background: linear-gradient(140deg, #e7eddf, #f5f7ee);
    height: 185px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    color: #8a9a7a;
}
.replacement h2 {
    margin-top: 20px;
}
.replacement p {
    font-size: 12px;
}
.booking-dates {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    font-size: 10px;
    color: #9bac8c;
}
.booking-dates strong {
    display: block;
    margin-top: 8px;
    color: #6f875e;
    font-size: 12px;
}
.replacement .full {
    font-size: 11px;
    margin-top: 15px;
}
.integration {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid #eaf0e2;
    font-size: 11px;
    color: #7a9169;
}
.login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.login-story {
    background: #193d32;
    color: #e7efdd;
    padding: 50px 65px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.login-story .brand {
    color: #f2f6e8;
}
.login-story .brand-icon {
    background: #548264;
}
.login-story .eyebrow {
    color: #9fb292;
    font-size: 9px;
}
.login-story h1 {
    font-size: 53px;
    letter-spacing: -2px;
    line-height: 1.22;
    margin: 25px 0;
}
.login-story p {
    color: #a7b99b;
    font-size: 15px;
}
.login-story > small {
    font-size: 10px;
    color: #78916c;
}
.login-car {
    display: flex;
    justify-content: flex-end;
    opacity: 0.22;
    margin-top: 20px;
}
.login-form {
    max-width: 500px;
    width: 100%;
    align-self: center;
    justify-self: center;
    padding: 55px;
}
.login-form h2 {
    font-size: 29px;
    letter-spacing: -1px;
    margin: 15px 0;
}
.login-form > p {
    font-size: 12px;
    margin: 15px 0 30px;
}
.login-user {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #dfe7d8;
    padding: 16px;
    color: #536e45;
    margin: 12px 0;
    gap: 15px;
    justify-content: flex-start;
}
.login-user div {
    flex: 1;
}
.login-user strong {
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
}
.login-user div > span {
    font-size: 10px;
    display: block;
    color: #9daf8e;
    font-weight: 400;
}
.login-user > svg {
    color: #9eb58b;
}
.login-user .avatar {
    background: #ecf2e5;
    color: #7f9d68;
}
.demo-note {
    margin-top: 30px;
    color: #9aac8e;
    font-size: 10px;
    text-align: center;
    line-height: 2;
}
.demo-note .live-dot {
    margin-right: 7px;
}
.demo-note small {
    font-size: 9px;
    color: #b0bda6;
}
.mobile-workshop .sidebar, .mobile-workshop .breadcrumb, .mobile-workshop .app-footer {
    display: none;
}
.mobile-workshop .main-shell {
    margin-left: 0;
    max-width: 900px;
    margin-inline: auto;
}
.mobile-workshop .work-step {
    flex-wrap: wrap;
}
.mobile-workshop .work-step > button {
    width: 100%;
    padding: 22px;
    font-size: 17px;
}
.problem-button {
    width: 100%;
    background: #f7e7d5;
    color: #9c6539;
    padding: 22px;
    font-size: 15px;
    margin-top: 0;
}
.mobile-workshop .hero-car {
    width: 90px;
    height: 90px;
}
.mobile-workshop .hero-title h1 {
    font-size: 25px;
}
.mobile-workshop .hero-delivery {
    align-items: flex-start;
}
.mobile-workshop .dossier-hero {
    flex-wrap: wrap;
}
@media (min-width: 1550px) {
    main {
        padding: 42px 55px;
    }
    .topbar {
        padding-inline: 55px;
    }
    .stats-grid {
        gap: 23px;
    }
    .stat {
        padding: 26px;
    }
    .dashboard-grid {
        gap: 27px;
    }
    .case-row {
        padding-block: 20px;
    }
    .panel-heading {
        padding-block: 26px;
    }
    .alert-row {
        padding-block: 19px;
    }
}
@media (max-width: 1200px) {
    .sidebar {
        width: 205px;
    }
    .main-shell {
        margin-left: 205px;
    }
    main {
        padding: 28px 24px;
    }
    .topbar {
        padding: 0 24px;
    }
    .dashboard-grid {
        grid-template-columns: 1.35fr 1fr;
        gap: 17px;
    }
    .case-row {
        padding: 15px;
        gap: 9px;
    }
    .case-row .row-date {
        display: none;
    }
    .banner-sub {
        display: none;
    }
    .panel-heading {
        padding: 20px 17px;
    }
    .stat {
        padding: 17px;
    }
    .stat-label {
        font-size: 10px;
    }
    .breadcrumb {
        font-size: 10px;
    }
    .global-search {
        width: 225px;
    }
    .hero-title h1 {
        font-size: 23px;
    }
    .hero-car {
        width: 90px;
        height: 90px;
    }
    .hero-delivery strong {
        font-size: 11px;
    }
    .detail-grid {
        grid-template-columns: 1.4fr 1fr;
    }
    .tabs button {
        padding-inline: 13px;
    }
    .replacement-grid {
        gap: 15px;
    }
    .login-story {
        padding: 40px;
    }
    .login-story h1 {
        font-size: 43px;
    }
}
@media (max-width: 1000px) {
    .sidebar {
        width: 190px;
        padding-inline: 12px;
    }
    .sidebar nav button {
        font-size: 11px;
        gap: 9px;
    }
    .main-shell {
        margin-left: 190px;
    }
    .topbar {
        gap: 15px;
    }
    .breadcrumb {
        display: none;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .right-stack {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .agenda-card {
        align-self: start;
    }
    .dashboard-banner {
        font-size: 9px;
    }
    .page-title {
        align-items: flex-start;
    }
    .page-title h1 {
        font-size: 24px;
    }
    .page-title button {
        font-size: 10px;
        padding: 10px;
    }
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .dossier-hero {
        gap: 15px;
    }
    .hero-title h1 {
        font-size: 23px;
    }
    .hero-delivery {
        max-width: 155px;
    }
    .damage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .replacement-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mini-stats strong {
        font-size: 20px;
    }
    .filter-bar {
        flex-wrap: wrap;
    }
    .filter-bar > span {
        margin-left: 0;
    }
    .work-step {
        gap: 10px;
    }
    .work-step > button {
        max-width: 150px;
    }
    .login-story {
        padding: 35px;
    }
    .login-form {
        padding: 35px;
    }
    .login-story h1 {
        font-size: 36px;
    }
}
@media (max-width: 760px) {
    .sidebar {
        transform: translateX(-100%);
        width: 235px;
        transition: transform 0.2s;
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .sidebar-shade {
        position: fixed;
        inset: 0;
        background: #0d332657;
        z-index: 30;
    }
    .main-shell {
        margin-left: 0;
    }
    .mobile-menu {
        display: inline-flex;
    }
    .topbar {
        height: 66px;
        padding: 0 18px;
        gap: 13px;
    }
    .global-search {
        width: auto;
        flex: 1;
    }
    .global-search input {
        font-size: 11px;
    }
    .global-search kbd {
        display: none;
    }
    .top-avatar {
        width: 28px;
        height: 28px;
        font-size: 9px;
    }
    main {
        padding: 26px 18px;
    }
    .page-title {
        flex-wrap: wrap;
        margin-bottom: 21px;
    }
    .page-title h1 {
        font-size: 26px;
    }
    .page-title .eyebrow {
        font-size: 8px;
    }
    .page-title p {
        font-size: 11px;
    }
    .page-title > .actions {
        width: 100%;
    }
    .page-title > .actions > button {
        padding: 11px 15px;
        font-size: 11px;
    }
    .stats-grid {
        gap: 12px;
    }
    .stat {
        padding: 16px;
    }
    .stat > strong {
        font-size: 32px;
    }
    .stat-label svg {
        width: 16px;
        height: 16px;
    }
    .dashboard-banner {
        align-items: flex-start;
        gap: 8px;
        flex-direction: column;
    }
    .dashboard-banner > span {
        font-size: 9px;
        margin-left: 14px;
    }
    .right-stack {
        display: flex;
    }
    .case-row .row-date {
        display: block;
    }
    .case-row-name span {
        font-size: 9px;
    }
    .panel-heading h2 {
        font-size: 13px;
    }
    .panel-heading p {
        font-size: 9px;
    }
    .panel-heading .text-button {
        font-size: 10px;
    }
    .case-row > .badge {
        font-size: 8px;
    }
    .app-footer {
        padding: 15px 18px;
    }
    .app-footer b {
        display: none;
    }
    .filter-chips {
        gap: 6px;
    }
    .filter-chips button {
        font-size: 10px;
        padding: 8px;
    }
    .filter-bar > input, .search-input {
        max-width: 100%;
        flex-basis: 100%;
    }
    .filter-bar select {
        max-width: 100%;
    }
    .dossier-hero {
        flex-wrap: wrap;
        gap: 15px;
    }
    .hero-car {
        width: 75px;
        height: 85px;
    }
    .hero-car svg {
        width: 40px;
    }
    .hero-title h1 {
        font-size: 24px;
        gap: 9px;
    }
    .hero-title .plate {
        font-size: 10px;
    }
    .hero-delivery {
        flex-direction: row;
        max-width: none;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }
    .hero-delivery strong {
        font-size: 12px;
    }
    .hero-delivery .secondary {
        margin-left: auto;
    }
    .tabs {
        gap: 0;
    }
    .tabs button {
        font-size: 11px;
        padding: 14px;
    }
    .padded {
        padding: 20px;
    }
    .detail-grid {
        gap: 0;
    }
    .qr-panel {
        justify-content: flex-start;
    }
    .work-step {
        flex-wrap: wrap;
    }
    .work-step > div {
        min-width: 170px;
    }
    .work-step > button {
        margin-left: auto;
        max-width: none;
    }
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .photo-form > label {
        width: 100%;
    }
    .damage-grid {
        grid-template-columns: 1fr;
    }
    .mini-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mini-stats > div {
        padding: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mini-stats span {
        margin: 0;
    }
    .mini-stats strong {
        font-size: 23px;
    }
    .replacement-grid {
        grid-template-columns: 1fr;
    }
    .calendar > section {
        min-height: 350px;
    }
    .calendar {
        grid-template-columns: repeat(7, 160px);
    }
    .calendar.single {
        grid-template-columns: 1fr;
    }
    .overlay {
        padding: 12px;
    }
    .modal {
        padding: 21px;
        max-height: 94vh;
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .form-grid .wide {
        grid-column: auto;
    }
    .login {
        grid-template-columns: 1fr;
    }
    .login-story {
        padding: 28px;
        min-height: 210px;
    }
    .login-story h1 {
        font-size: 31px;
        margin: 20px 0 10px;
    }
    .login-story .eyebrow, .login-story p, .login-car, .login-story > small {
        display: none;
    }
    .login-story .brand {
        font-size: 30px;
    }
    .login-form {
        padding: 35px 25px;
        max-width: 440px;
    }
    .login-form h2 {
        font-size: 25px;
    }
    .login-user {
        margin: 10px 0;
    }
    .toast {
        bottom: 15px;
        width: calc(100% - 30px);
        font-size: 12px;
    }
    .mobile-workshop .topbar {
        padding-inline: 18px;
    }
    .mobile-workshop .work-step > button {
        max-width: none;
    }
    .mobile-workshop .mobile-menu {
        display: none;
    }
    .notice {
        font-size: 11px;
        flex-wrap: wrap;
    }
}
@media (max-width: 420px) {
    .case-row .row-date {
        display: none;
    }
    .case-row {
        padding: 14px 12px;
    }
    .car-tile {
        width: 38px;
        height: 38px;
    }
    .case-row-name {
        min-width: 70px;
    }
    .case-row-name strong {
        font-size: 11px;
    }
    .case-row-name span {
        font-size: 8px;
    }
    .stats-grid .stat-label {
        font-size: 9px;
    }
    .stat-label svg {
        width: 13px;
        height: 13px;
    }
    .stat > span {
        font-size: 9px;
    }
    .hero-title h1 {
        font-size: 21px;
    }
    .photo-grid {
        grid-template-columns: 1fr;
    }
    .info-grid {
        gap: 20px 13px;
    }
    .info-grid strong {
        font-size: 11px;
    }
}
/* V2 workflows and role-specific workspaces */
.role-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.role-metrics .stat {
    min-width: 0;
}
.role-metrics .stat > strong {
    font-size: 27px;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}
.role-metrics .stat-label {
    line-height: 1.5;
}
.role-metrics .stat-label svg {
    flex-shrink: 0;
}
.load-grid {
    display: grid;
    gap: 22px;
    padding-top: 20px;
}
.load-grid > div > div {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 9px;
}
.load-grid span {
    color: #88988c;
}
.load-grid progress {
    width: 100%;
    height: 8px;
    accent-color: #458671;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
}
.alert-padded {
    padding-inline: 22px;
}
.quote-state-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin: 20px 0 28px;
}
.quote-state-grid > div {
    background: #f5f8f5;
    border: 1px solid #e6ece5;
    border-radius: 8px;
    padding: 17px;
}
.quote-state-grid > div > span:first-child {
    display: block;
    color: #849681;
    font-size: 10px;
    margin-bottom: 11px;
}
.quote-state-grid strong {
    font-size: 12px;
}
.quote-state-grid .badge {
    font-size: 11px;
}
.version-history {
    border-top: 1px solid var(--border);
    margin-top: 30px;
    padding-top: 24px;
}
.version-row {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #edf1e9;
    flex-wrap: wrap;
    font-size: 11px;
}
.version-row > span:not(.badge) {
    color: #92a087;
}
.version-row > button:first-of-type {
    margin-left: auto;
}
.section-spacer {
    margin-top: 30px;
}
.export-checks {
    margin: 25px 0;
}
.export-checks > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eef1ea;
}
.export-checks svg {
    flex-shrink: 0;
}
.export-checks strong {
    font-size: 13px;
}
.export-checks p {
    font-size: 12px;
    margin: 6px 0;
    color: inherit;
}
.check-ok {
    color: #368169;
}
.check-error {
    color: #ba634c;
}
.export-summary {
    display: flex;
    justify-content: space-between;
    background: #f3f7ee;
    padding: 17px;
    border-radius: 7px;
    margin-bottom: 20px;
}
.vat-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 18px;
}
.vat-row label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    color: #728567;
    flex: 1;
}
.vat-row .icon-button {
    margin-bottom: 5px;
}
.accounting-settings th, .accounting-settings td {
    white-space: normal;
    max-width: 230px;
    overflow-wrap: anywhere;
}
.workshop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.workshop-job {
    padding: 24px;
}
.job-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.workshop-job h2 {
    font-size: 23px;
    margin-bottom: 6px;
}
.workshop-job > p {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.job-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 24px 0 18px;
}
.job-stage strong {
    font-size: 13px;
}
.job-parts {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
}
.job-parts > span {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: #839378;
}
.job-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e6ecdf;
    margin-top: 24px;
    padding-top: 20px;
}
.job-footer span {
    font-size: 10px;
    color: #94a487;
}
.job-footer strong {
    display: block;
    color: #597a46;
    font-size: 13px;
    margin-top: 6px;
}
.job-footer button {
    font-size: 12px;
    padding: 13px 19px;
}
.green-text {
    color: #448365;
}
.wrap-cell {
    display: block;
    max-width: 280px;
    white-space: normal;
    line-height: 1.5;
}
@media (max-width: 1200px) {
    .workshop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .role-metrics .stat > strong {
        font-size: 23px;
    }
}
@media (max-width: 900px) {
    .role-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .workshop-job {
        padding: 20px;
    }
    .quote-state-grid {
        gap: 10px;
    }
    .quote-state-grid > div {
        padding: 13px;
    }
}
@media (max-width: 600px) {
    .workshop-grid {
        grid-template-columns: 1fr;
    }
    .quote-state-grid {
        grid-template-columns: 1fr;
    }
    .quote-state-grid > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .quote-state-grid > div > span:first-child {
        margin: 0;
    }
    .vat-row {
        flex-wrap: wrap;
    }
    .vat-row label {
        min-width: 110px;
    }
    .role-metrics {
        gap: 12px;
    }
    .role-metrics .stat > strong {
        font-size: 23px;
    }
    .job-footer button {
        min-height: 48px;
    }
    .accounting-settings .form-actions button {
        width: 100%;
    }
}
/* MV Auto Style : dossier étendu, portail et tablette */
.brand {
    font-size: 20px;
    white-space: nowrap;
}
.login-form {
    max-height: 100vh;
    overflow-y: auto;
    padding-block: 40px;
}
.login-user {
    min-height: 66px;
}
.tabs {
    overflow-x: auto;
    white-space: nowrap;
}
.filter-bar {
    flex-wrap: wrap;
}
.signature-pad canvas {
    max-width: 100%;
    border: 1px solid #cddbd3;
    border-radius: 12px;
    touch-action: none;
    background: white;
}
.saved-signature {
    width: 280px;
    max-width: 100%;
    background: white;
}
.before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.before-after img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    background: #edf2ed;
    border-radius: 12px;
}
.client-portal {
    min-height: 100vh;
    background: #f3f6f2;
}
.client-portal > header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 24px 5%;
    background: #154c40;
    color: white;
}
.client-portal > main {
    max-width: 1160px;
    margin: auto;
    padding: 32px 22px;
}
.portal-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
}
.portal-case {
    color: #1d4035;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 24px;
}
.portal-case.selected {
    border: 2px solid #287660;
}
.client-portal .panel {
    margin-bottom: 22px;
}
.search-results h4 {
    padding: 8px 16px;
    margin: 0;
    background: #edf2ee;
}
.search-results {
    max-height: 65vh;
    overflow: auto;
}
.workshop-grid .panel .actions {
    flex-wrap: wrap;
}
@media (max-width: 700px) {
    .before-after {
        grid-template-columns: 1fr;
    }
    .client-portal > main {
        padding: 20px 12px;
    }
    .filter-bar select {
        max-width: 100%;
    }
    .login-form {
        max-height: none;
    }
    .role-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stat strong {
        font-size: 23px;
    }
    .workshop-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .tabs {
        max-width: 100%;
    }
}
/* Fixed branding/profile, independently scrollable menu, including the mobile drawer. */
.sidebar {
    height: 100dvh;
    overflow: hidden;
    min-height: 0;
}
.sidebar > .brand, .sidebar > .workspace-label, .sidebar-bottom {
    flex-shrink: 0;
}
.sidebar nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c1d0c7 transparent;
    padding-right: 3px;
}
.sidebar nav button {
    flex-shrink: 0;
}
.sidebar nav::-webkit-scrollbar {
    width: 5px;
}
.sidebar nav::-webkit-scrollbar-thumb {
    background: #c1d0c7;
    border-radius: 9px;
}
.sidebar-bottom {
    padding-top: 12px;
    background: #fff;
}
.sidebar-profile > div {
    min-width: 0;
}
.sidebar-profile small {
    overflow-wrap: anywhere;
}
@media (max-height: 720px) {
    .sidebar {
        padding-top: 18px;
    }
    .workspace-label {
        padding-block: 16px;
    }
    .sidebar-bottom > .demo-badge, .sidebar-bottom > p {
        display: none;
    }
    .sidebar-profile {
        padding-block: 12px;
    }
}
.assignment-advice {
    margin: 20px 0;
    background: #f4f7f4;
    padding: 16px;
    border-radius: 12px;
}
.candidate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.candidate-grid article {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.override-panel {
    display: block;
}
.override-panel label {
    display: block;
    margin-block: 12px;
}
.override-panel input {
    display: block;
    width: 100%;
}
.load-card {
    padding: 20px;
    border-left: 4px solid #4c9277;
}
.load-card[data-level="Surcharge"] {
    border-left-color: #be584d;
}
.load-card[data-level="Presque plein"] {
    border-left-color: #ba943e;
}
.load-card progress {
    width: 100%;
}
.presence-table {
    min-width: 820px;
}
.presence-table td {
    vertical-align: top;
}
.presence-cell {
    width: 100%;
    min-height: 58px;
    background: #f4f7f3;
    color: #234a3b;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 10px;
    gap: 5px;
}
.presence-cell.absent {
    background: #f9efe4;
    color: #85522c;
}
.presence-cell small {
    font-size: 11px;
}
.availability-form {
    display: grid;
    gap: 15px;
}
.availability-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.absence-card {
    background: #fff4df;
    border: 1px solid #dfcaa5;
    border-radius: 9px;
    padding: 12px;
    margin-bottom: 10px;
    color: #78552a;
}
.absence-card small {
    display: block;
}
.workload-alerts {
    max-height: 300px;
    overflow: auto;
}
.workload-alerts p {
    padding: 8px 0;
    border-bottom: 1px solid #e9ece8;
}
.workload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
/* MV Auto-Style: retain layouts and use the supplied identity. */
:root {
    --green: #292929;
    --dark: #141414;
    --muted: #727272;
    --border: #e4e4e4;
    color: #262626;
    background: #f6f6f5;
}
.sidebar, .login-story {
    background: #141414;
}
.sidebar .brand {
    padding: 12px 5px;
    height: auto;
    min-height: 85px;
}
.company-logo {
    display: block;
    width: 215px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background: #080808;
    border-radius: 3px;
}
.sidebar nav button.active {
    background: #f4de29;
    color: #151515;
}
.sidebar nav button.active b {
    background: #171717;
    color: #fff;
}
.workspace-label, .sidebar-bottom, .sidebar-profile {
    border-color: #363636;
}
.login-story .eyebrow {
    color: #f3df30;
}
.login-car {
    color: #e2cf35;
}
button:focus-visible, a:focus-visible {
    outline-color: #c49c00;
}
.avatar {
    background: #f5eaae;
    color: #292929;
}
.quick-global > button {
    background: #f2db25;
    color: #151515;
    min-height: 50px;
    box-shadow: 0 3px 15px #0003;
    border: 1px solid #d0b80e;
}
.quick-global {
    position: fixed;
    right: 26px;
    bottom: 24px;
    z-index: 45;
}
.quick-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px #0003;
    border-radius: 12px;
    margin-bottom: 10px;
    max-height: 65dvh;
    overflow-y: auto;
}
.quick-menu button {
    justify-content: flex-start;
    background: #f5f5f3;
    color: #222;
    min-height: 45px;
}
.quick-intake {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.quick-intake label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #282828;
}
.quick-intake input, .quick-intake select, .quick-intake textarea {
    min-width: 0;
    width: 100%;
    font-size: 16px;
}
.quick-intake textarea {
    min-height: 85px;
}
.intake-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.intake-steps {
    display: flex;
    gap: 10px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}
.intake-steps span {
    padding: 8px;
}
.intake-steps .current {
    background: #f6e352;
    color: #171717;
    font-weight: 700;
    border-radius: 5px;
}
.intake-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.intake-options button {
    min-height: 42px;
}
.intake-result {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    background: #f6f6f3;
    color: #222;
    border: 1px solid #ddd;
    text-align: left;
}
.intake-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0 0;
    border-top: 1px solid #ddd;
}
.intake-footer button {
    min-height: 48px;
}
.quick-intake .checkline {
    flex-direction: row;
    align-items: center;
    min-height: 42px;
}
.checkline input {
    width: 20px;
    height: 20px;
}
.camera-button {
    background: #f6e552;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
}
.camera-button input {
    font-size: 13px;
}
.photo-list {
    padding-left: 18px;
    margin: 0;
}
.photo-list li {
    overflow-wrap: anywhere;
    margin: 6px 0;
}
.search-shortcuts {
    display: flex;
    gap: 4px;
    padding: 0 8px 8px;
}
.search-shortcuts button {
    font-size: 12px !important;
    width: auto !important;
    background: #f3e68d !important;
    padding: 8px !important;
}
.app-footer {
    padding-bottom: 85px;
}
.main-shell main {
    min-width: 0;
}
@media (max-width: 768px) {
    .quick-global {
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
    }
    .quick-global > button {
        min-width: 144px;
        min-height: 52px;
    }
    .quick-menu {
        max-width: calc(100vw - 32px);
    }
    .topbar .global-search {
        display: flex;
        flex: 1;
        min-width: 0;
        width: auto;
    }
    .topbar .breadcrumb, .topbar kbd, .topbar .top-avatar {
        display: none;
    }
    .topbar {
        gap: 9px;
        padding: 12px 15px;
    }
    .global-search input {
        width: 100%;
        min-width: 0;
        font-size: 16px;
    }
    .global-search .search-results {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 65px;
        width: auto;
        max-height: 65dvh;
        overflow-y: auto;
    }
    .intake-fields {
        grid-template-columns: 1fr;
    }
    .modal {
        max-width: calc(100vw - 20px);
    }
    .quick-intake {
        gap: 14px;
    }
    .intake-options button {
        padding: 10px 12px;
    }
    .company-logo {
        max-width: 210px;
    }
    .quick-intake .actions {
        flex-wrap: wrap;
    }
    .quick-intake input[type="datetime-local"] {
        max-width: 100%;
        box-sizing: border-box;
    }
}
@media print {
    .quick-global {
        display: none;
    }
}
.secondary, .icon-button, input, select, textarea {
    color: #303030;
}
.secondary {
    border-color: #ddd;
}
.finance-card, .toast:not(.error) {
    background: #242424;
    color: #fff;
}
.dashboard-banner {
    background: #f6f4e8;
    border-color: #e8e2c4;
    color: #585440;
}
.stat {
    color: #303030;
}
.stat-label, .stat > span {
    color: #737373;
}
.stat-label svg {
    color: #777;
    background: #f4f2e6;
}
.presence-cell:not(.absent) {
    background: #f5f5f2;
    color: #303030;
}
.portal-case.selected {
    border-color: #d2b914;
}
.vehicle-quick-photos {
    margin: 16px 0;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.vehicle-quick-photos summary {
    cursor: pointer;
    font-weight: 600;
    padding: 6px 0;
}
.vehicle-quick-photos form {
    margin-top: 12px;
}
input:focus, select:focus, textarea:focus {
    border-color: #b09b18;
    box-shadow: 0 0 0 3px #ebd72224;
}
.case-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}
.case-breadcrumb button {
    background: transparent;
    color: #343434;
    padding: 5px;
    font-size: 12px;
}
.case-context {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #ddd;
}
.case-context.compact {
    padding: 12px 16px;
    gap: 16px;
}
.case-context.compact .hero-car {
    display: none;
}
.case-context.compact h1 {
    font-size: 21px;
    margin: 3px 0;
}
.case-context.compact .hero-delivery strong {
    font-size: 15px;
}
.case-context.compact .hero-title p {
    margin: 4px 0;
}
.case-context.compact .hero-delivery button {
    display: none;
}
.context-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.selected-entity {
    outline: 3px solid #d5b924;
    outline-offset: -3px;
    background: #fffbe3 !important;
    scroll-margin-top: 170px;
}
.history-link {
    display: block;
    margin-top: 8px;
}
.case-context ~ [data-case-content] .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
}
.case-context ~ [data-case-content] .tabs button {
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .case-context {
        padding: 10px !important;
        display: flex !important;
        align-items: center;
        gap: 8px !important;
    }
    .case-context .hero-car {
        display: none;
    }
    .case-context h1, .case-context.compact h1 {
        font-size: 17px;
    }
    .case-context .hero-delivery {
        min-width: 95px;
    }
    .case-context .hero-delivery strong {
        font-size: 12px !important;
    }
    .case-context .hero-delivery button {
        display: none;
    }
    .case-context .hero-title p {
        font-size: 11px;
    }
    .case-context .hero-title .eyebrow {
        font-size: 10px;
    }
    .case-context .hero-delivery > span {
        font-size: 10px;
    }
    .case-breadcrumb {
        font-size: 11px;
    }
    .case-context .hero-title {
        min-width: 0;
    }
    .case-context .plate {
        display: inline-block;
        font-size: 11px;
    }
}
.case-context {
    z-index: 10;
}
@media (max-width: 768px) {
    .case-context.compact {
        flex-wrap: nowrap;
        gap: 10px !important;
    }
    .case-context.compact .hero-title {
        flex: 1;
    }
    .case-context.compact .hero-delivery {
        flex: 0 0 95px;
        width: auto;
        min-width: 0;
    }
    .case-context.compact .hero-delivery strong {
        white-space: normal;
        text-align: right;
    }
    .context-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .context-actions button {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .back + .case-breadcrumb {
        margin-top: 0;
    }
    .case-breadcrumb {
        gap: 2px;
    }
    .case-breadcrumb button {
        padding: 3px;
    }
}