*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
a, button {
    -webkit-tap-highlight-color: transparent;
	-webkit-user-select: none; 
    user-select: none;
    -webkit-touch-callout: none;
}
a, 
a:visited, 
a:active {
    color: inherit;
    text-decoration: none;
}
a:focus {
    outline: none;
}
a:focus-visible {
    outline: 2px solid #1e40af;
    outline-offset: 2px;
    border-radius: 4px;
}
.auth-link,
.auth-form a {
color: #1e40af;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-family: 'Inter', sans-serif;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
input, textarea, select {
    border: 1px solid #d1d5db;
    border-radius: 6px;        
    padding: 10px 12px;
    width: 100%;
    transition: all 0.2s ease-in-out;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
}
a {
    text-decoration: none;
}

@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-v20-cyrillic-ext_latin-regular.woff2') format('woff2'),
		url('fonts/inter-v20-cyrillic-ext_latin-regular.woff') format('woff'), 
        url('fonts/inter-v20-cyrillic-ext_latin-regular.ttf') format('truetype');
}
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter-v20-cyrillic-ext_latin-500.woff2') format('woff2'),
		url('fonts/inter-v20-cyrillic-ext_latin-500.woff') format('woff'), 
        url('fonts/inter-v20-cyrillic-ext_latin-500.ttf') format('truetype');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/inter-v20-cyrillic-ext_latin-700.woff2') format('woff2'),
		url('fonts/inter-v20-cyrillic-ext_latin-700.woff') format('woff'), 
        url('fonts/inter-v20-cyrillic-ext_latin-700.ttf') format('truetype');
}

.table-ptr {
    position: absolute;
    top: 130px; 
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; 
    opacity: 0; 
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.table-ptr .spinner {
    width: 24px;
    height: 24px;
    border-width: 2.5px;
    border-color: #3b82f6 transparent #3b82f6 transparent;
}

.user-menu-wrapper {
    position: relative;
    display: inline-block;
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /*background-color: #1e40af;*/
    /*border:1px solid #e5e7eb;
    background: #f9f9f9;
    color: #5f6875;*/
    border: 1px solid #dfdfdf;
    background: #efefef;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.user-avatar:hover {
    background-color: #e5e7eb;
}

.user-avatar svg {
    width: 16px;
    height: 16px;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    
    box-shadow: 0 2px 9px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    clip-path: inset(0px -20px -20px -20px);
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    z-index: 90;
}

.user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-info {
    padding: 16px;
    background-color: #f9fafb; 
    border-radius: 8px 8px 0 0;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #374151;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.dropdown-item:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.dropdown-item.logout-item:hover {
    /*background-color: #fee2e2;*/
    background-color: #fff;
    color: #dc2626;
}

.dropdown-item.logout-item:hover svg {
    stroke: #dc2626;
}

.inv-col.is-negative {
    position: relative;
    transform: translateX(-6px); 
}

/*HEADER*/
.app-header {
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	/*margin-bottom: 6px;*/
    position: relative;
    z-index: 10;
}

.header-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}
.container {
    margin: 0 auto;
    padding: 0 33px;
}

.site-logo img {
    transition: all 0.2s ease-in-out;
}
.site-logo:hover img {
    filter: brightness(1.2);
}
/*.main-nav {
    margin-right: -40px;
}*/
.main-nav ul {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0; 
    padding: 0;
}
.main-nav a {
	display: inline-block;
    color: #374151;
    transition: background-color 0.2s ease-in-out;
    white-space: nowrap;
    font-size: 14px;
}
.main-nav a:hover {
    color: #111827;
}
.main-nav a.active {
    color: #111827;
}
.main-nav a.active:hover {
    color: #111827;
}
.main-nav a.nav-btn {
    color: #1e40af;
    padding: 5px 15px 7px;
    background-color: #fff;
	border-radius: 6px;
    font-weight: 500;
}
.main-nav a.nav-btn:hover {
    background-color: #d7e4f5;
}
.main-nav a.btn-primary {
    background-color: #1e40af;
	color: #fff;
    padding: 4px 20px 6px;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.main-nav a.btn-primary.disabled {
	opacity: 0.5;
    cursor: default;
	pointer-events: none;
}
.main-nav a.btn-primary:hover {
    background-color: #244dd2;
}
/*/HEADER*/

/*TABLE*/
.app-workspace {
    display: grid;
    grid-template-columns: 1fr 0px; 
    
    height: calc(100vh - 76px);
    overflow: hidden;
	padding: 0 20px 0 33px;
}

.app-workspace.is-open {
    grid-template-columns: 350px 1fr;
    gap: 20px; 
    overflow: hidden;
}

.detail-panel .os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless {
	right: 3px;
	top: 2px;
	top: 43px;
	bottom: 4px;
}

.app-workspace.is-open .list-panel .col {
    display: none; 
}

.app-workspace.is-open .list-panel .col.col-main {
    display: block; 
}

.app-workspace.is-open .table-header {
    display: none !important;
}

.app-workspace.is-open .table-row {
    display: block !important; 
    height: auto !important;   
}

.app-workspace.is-open .list-panel .col {
    display: none !important;
}

.app-workspace.is-open .list-panel .col.col-main {
    display: block !important; 
    width: 100%;              
}

.is-open .table-scroll-area {
	padding-top:15px;
	padding-bottom:15px;
}

.table-header, .table-row {
    display: grid;
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        110px;
    gap: 15px;
    align-items: center;
}

.table-header {
    background-color: #efefef;
    padding: 10px 15px;
    font-size: 11px;
    color: #6b7280;
	color: #111827;
    font-weight: 600;
	border-radius: 5px;
	margin-top: 15px;
	border: 1px solid #dfdfdf;
	padding-right: 15px;
	/*width: calc(100% - 13px);*/
	width: calc(100% - 13px);

}
.table-header .col {
    white-space: normal; 
    line-height: 1.2;
    /*overflow: hidden;
    text-overflow: ellipsis;*/
	white-space: nowrap;
}

.table-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
	padding-top: 8px;
	padding-bottom: 12px;
}
.is-open .table-body {
	padding-top: 0px;
	padding-bottom: 0px;
}

.table-scroll-area .os-scrollbar-vertical {
    top: 8px !important;
    bottom: 12px !important;
}
.is-open .table-scroll-area .os-scrollbar-vertical {
    top: 15px !important;
    bottom: 15px !important;
}

.table-row {
    background-color: #fff;
    padding: 8px 15px;
    border: 1px solid #f3f4f6;
    font-size: 13px; 
    color: #1f2937;
    transition: border-color 0.1s;
	margin-bottom: 6px;
	border-radius: 5px;
	position: relative;
	border-left: 3px solid #e8e8e8;
	white-space: nowrap;
}
.table-row:last-child {
	margin-bottom: 0;
}
.table-row:nth-child(even) {
    background-color: #f9f9f9;
}

.table-row:hover {
    border-color: #f3f4f6;
	background-color: #eff6ff;
	border-left: 3px solid #d0d3f3;
}
.table-row.active-row {
	background-color: #eff6ff;
    border-color: #dfe5ed;
	border-left: 3px solid #383f9d;
    
}




.col-main {
    display: block; 
}
.car-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px; 
    color: #111827;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
    text-transform: uppercase;
}
.is-open .car-title {
	text-overflow: ellipsis;
	overflow: hidden;
}
.car-details-wrap {
    display: flex; 
    gap: 10px;
}
.car-thumb {
    width: 80px;      
    height: auto;     
    border-radius: 4px;
    object-fit: cover;
}
.car-meta {
    font-size: 11px;
    line-height: 1.4;
    color: #6b7280;
}
.car-meta a {
    color: #2563eb;
    text-decoration: underline;
}
.car-meta a:hover {
    text-decoration: none;
}

.code-wrap {
    position: relative;
    padding-right: 18px; 
    display: inline-block; 
}



.copy-btn-absolute {
    position: absolute;
    right: 0;       
    top: 45%;       
    transform: translateY(-50%); 
    
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0; 
    cursor: pointer;
    color: inherit; 
	transition: color 0.2s ease;
}


.copy-btn-absolute:hover {
    color: #333; 
    cursor: pointer;
    transform: translateY(-50%) scale(1.1); 
}

.copy-btn-absolute:active {
    transform: translateY(-50%) scale(0.95);
}

.copy-btn-absolute.copied {
    color: #10b981 !important; 
    cursor: default;
    transform: translateY(-50%) scale(1); 
}

.copy-btn-absolute.copy-blue {
    color: #2563eb; 
    top: 50%;  
}

.copy-btn-absolute.copy-blue:hover {
    color: #1e40af; 
    
    transform: translateY(-50%) scale(1.1);
}

.copy-btn-absolute.copy-blue.copied {
    color: #10b981 !important; 
}

.status-badge {
    display: inline-block;
    padding: 4px 4px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
    width: 100px;
	vertical-align: middle;
}
.badge-green {
    background-color: #dbf5e3;
    color: #16a34a;
    border-color: #ade7c1;
}
.badge-blue {
    color: #1e40af;
    border: 1px solid #b8c4ed;
    background-color: #d7e4f5;
}
.badge-red {
    background-color: #fee2e2;
    color: #ef4444;
    border: 1px solid #fca5a5;
}

.text-sm {
    font-size: 12px;
}
.text-center {
    text-align: center;
}
.col a {
    color: #2563eb;
    text-decoration: underline;
}
.col a:hover {
    text-decoration: none;
}
.table-scroll-area {
    padding-right: 14px;
}

.list-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.os-theme-dark.os-theme-dark {
    --os-handle-bg: #cbd5e1;       
    --os-handle-bg-hover: #94a3b8; 
    --os-handle-bg-active: #64748b;
    
}
/*/TABLE*/

/*DETAIL-PANEL*/

.detail-panel {
    overflow: hidden;
    min-width: 0; 
}
.is-open .detail-panel {
    overflow: visible;
}
.detail-panel {
            min-height: 0; 
            display: flex;
            flex-direction: column;
            
        }

        .detail-panel {
            border: none;
			/*margin: 0 6px 0 0;
			padding: 3px 1px 3px 6px;*/
            border-radius: 8px; 
			
			background: #fff;
    		filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.15));
			position: relative;
        }

        .is-open .detail-panel {
			/*margin: 0 6px 0 0;*/
			/*padding: 3px 1px 3px 6px;*/
			width: calc(100% + 3px);
			margin: 15px 0;
        }

.panel-header {
            padding: 15px 20px;
            border-bottom: 1px solid #f3f4f6;
            font-weight: 600;
            flex-shrink: 0;
        }

        .detail-content {
			display: flex;
    		flex-direction: column;
            flex-grow: 1;
            overflow-y: auto;
        }
        .detail-content {
			padding-right: 20px;
			overflow: hidden;
		}
		
.layout-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
	min-height: 100%;
	padding-right: 10px;
	padding-left: 12px;
}

.top-area {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 20px;
	padding-top: 15px;
	padding-left: 10px;
	position: relative;
    flex-shrink: 0;
}


.bottom-area {
    height: 138px;
    flex-shrink: 0;
	padding-left: 10px;
	padding-bottom: 0;
	display: flex;
    margin-top: auto;
}

.close-btn {
    float: right;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
    position: absolute;
    /*right: -3px;
    top: 4px;*/
    right: -20px;
    top: -2px;
}
.lb-btn.close-btn {
	right: -3px;
    top: 4px;
}

.gray-box {
    /*background-color: #f5f5f5;*/
    width: 100%;
    height: 100%;
}
.gray-box.left-top {
	padding-right: 20px;
	border-right: 1px solid #e5e7eb;
}


.tracking-section {
	padding-top: 15px;
	border-top: 1px solid #e5e7eb;
}

.toggle-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -31px;
    width: 40px;
    overflow: hidden; 
    pointer-events: none; 
    z-index: 10;
}

.panel-toggle {
	width: 24px;
    height: 34px;
    background-color: #fff;
    position: absolute;
    left: -15px;
    top: 12px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 10;
    left: auto !important;
    right: 0 !important;
    pointer-events: auto;
    margin-right: 0;
}

.panel-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: 75% 50%;

    background-color: #1e40af; 
    transition: background-color 0.2s ease;
}

.panel-toggle:hover::after {
    background-color: #1249ff; 
}

.detail-content {
    height: 100%;
    padding-right: 20px;
    flex-grow: 1;
}

.detail-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
    overflow-x: auto;
    width: 100%;
}
.tab-btn {
    background: none;
    border: none;
    padding: 2px 15px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.tab-btn.active {
    color: #1e40af; 
    border-bottom-color: #1e40af;
    font-weight: 600;
}
.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-top: 0;
    margin-bottom: 15px; 
	margin-top: 15px;
}
.info-row {
    display: flex;
    justify-content: space-between; 
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
}
.info-row.only-mob {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: -10px;
	display: none;
}
.info-row .label { color: #6b7280; }
.info-row .value { color: #111827; text-align: right; }
.info-row a { color: #2563eb; text-decoration: underline; }
.info-row a:hover { text-decoration: none; }

.mini-car-card {
    height: 100%; 
    display: flex;
    flex-direction: column;
}
.mini-car-card h3,
.mini-car-card h3.mob {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
	padding-bottom: 14px;
	border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
	/*white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
    overflow: hidden;*/
}
.mini-car-card h3.mob {
	display: none;
}

.mini-car-card-wrapper {
    flex-grow: 1; 
    display: grid;
    grid-template-columns: 1fr 1.5fr; 
    gap: 20px;
    min-height: 0; 
	padding-top: 20px;
}

.mini-meta { 
    font-size: 11px; 
    color: #6b7280; 
    line-height: 1.5; 
}

.mini-meta .vin {
    word-break: break-all;
}
.mini-meta {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.4;
	margin-top: 6px;
	margin-bottom: 28px;
}
.mini-thumb {
    object-fit: cover;
	border-radius: 4px;
}

.keys-info {
    
    display: flex;
    flex-direction: column;
    gap: 6px; 
    
    margin-bottom: 10px;
    padding-top: 6px;
    border-top: 1px solid #e5e7eb;
}

.key-item {
    
    width: 100%; 
    
    
    display: flex;
    justify-content: space-between;
    
    font-size: 13px;
    color: #374151;
	color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
	padding-top: 5px;
	padding-bottom: 11px;
}

.gallery-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
	margin-top: 21px;
}
.photo-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 3px 10px 3px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 9px;
    gap: 10px; 
}

.tab-label {
    display: flex;
    align-items: center;
    gap: 4px;
	letter-spacing: 0.2px;
}

.photo-tab:hover {
    background: #e5e7eb;
}

.photo-tab.active {
    background: #1e40af;
    color: #fff;
    border-color: #1e40af;
}

.photo-tab .count {
    opacity: 0.8;
    font-size: 11px;
	line-height: 18px;
}

.download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: background 0.2s;
    color: inherit;
}
.download-icon svg {
    transform: translateY(-1px); 
    display: block; 
    pointer-events: none; 
}

.download-icon:hover {
    background-color: rgba(255,255,255, 0.9);
}

.photo-tab.active .download-icon:hover {
    background-color: #244dd2;
}

.gallery-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    position: relative;
    min-height: 400px;
}

.thumbnails-track {
    display: flex;
    gap: 10px;
    min-height: 66px;
    overflow-x: auto; 
    padding-bottom: 16px; 
    scroll-snap-type: x mandatory; 
}
.skeleton-image {
	background: #fff;
}

.thumb-item {
    flex: 0 0 calc((100% - 20px) / 3);
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    scroll-snap-align: start; 
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-item:hover {
    opacity: 0.9;
}

.thumb-item.active {
    border-color: #98c4fd;
}

.thumbnails-track.custom-scroll::-webkit-scrollbar {
    height: 6px;
}

.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(2px);
    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.loader-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb; 
    border-top: 4px solid #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.main-image-stage {
    position: relative; 
}
.main-image-stage img,
.thumbnails-track {
    transition: opacity 0.3s ease;
    opacity: 1;
}

@keyframes skeletonPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-bg {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s infinite;
}

.lazy-fade {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.lazy-fade.loaded {
    opacity: 1;
}




.main-image-stage {
    position: relative;
	width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f3f4f6;
}
.main-image-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#gallery-track [data-overlayscrollbars-viewport] {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
}

#gallery-track .thumb-item {
    flex-shrink: 0 !important;  
}

.tracking-section h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
}
.timeline-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.step {
    text-align: center;
    position: relative;
    z-index: 2; 
    padding: 0 5px;
    min-width: 80px;
}
.circle {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    margin: 0 auto 8px auto;
	font-weight: 900;
	position: relative;
    z-index: 3; 
    box-shadow: 0 0 0 20px #fff;
}
.step-label { font-size: 12px; font-weight: 600; color: #9ca3af; margin-bottom: 2px; z-index: 3; position: relative}
.step-date { font-size: 10px; color: #6b7280; }


.step.completed .circle { background: #10b981;  }
.step.completed .step-label { color: #111827; }
.step.completed .step-date { color: #6b7280; }


.step.active .circle { background: #1e40af;  }
.step.active .step-label { color: #1e40af; }
.step.canceled .circle {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    font-size: 11px;
}

.step.canceled .step-label {
    color: #111827;
    font-weight: 600;
}

/*.step.canceled .step-date {
    color: #ef4444;
}*/

.line {
    flex-grow: 1; 
    height: 2px;
    background: #e5e7eb;
    margin-top: -42px;
	z-index: 1;
    min-width: 60px; 
    margin-left: -30px;  
    margin-right: -30px;
}
.line.completed { background: #10b981; }


.route-info {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    margin-bottom: 25px; 
}

.route-point {
    flex-shrink: 0; 
}

.point-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #9ca3af; 
    margin-bottom: 3px;
}

.marker-icon {
    width: 14px; 
    height: 14px;
    opacity: 0.6; 
}

.point-value {
    font-size: 16px;
    font-weight: 500;
    color: #374151; 
}


.route-line {
    flex-grow: 1; 
    height: 1px;
    background-color: #e5e7eb; 
    margin: 0 20px; 
    margin-top: 10px; 
}

.invoice-wrapper {
    margin-top: 30px;
}

.inv-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 15px;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
}
.tab-pane .info-row:last-child,
.invoice-wrapper .inv-row:last-child {
    border-bottom: 1px solid #e5e7eb;
	border: none;
	padding-bottom: 0;
}

.inv-header {
    border-bottom: 1px solid #e5e7eb;
    /*margin-bottom: 5px;*/
    padding: 4px 0 10px;
}
.inv-header .inv-col {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.5px;
}

.inv-col {
    font-size: 14px;
    color: #374151;
    white-space: nowrap;
}

.inv-col.label {
    color: #6b7280;
    white-space: normal;
}

.inv-col.val {
    font-weight: 600;
    color: #111827;
    font-family: 'Courier New', monospace; 
    font-variant-numeric: tabular-nums;
}

.inv-col.date {
    color: #6b7280;
    font-size: 13px;
}

.inv-row {
    display: grid;
    grid-template-columns: 2.2fr 1fr 88px; 
    gap: 10px;
    padding: 5px 0 6px;
    align-items: center;
}
.inv-col:nth-child(3) {
    text-align: right; 
}


.tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-pane.active {
    display: block; 
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.inv-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
	border-top: 1px solid #e5e7eb;
	/*padding: 20px 0 0;*/
	margin-top: 35px;
	padding-top: 10px;
}

.tab-pane-extra {
	display: none;
}
.tab-pane-extra.open {
	display: block;
}
.tab-pane-extra-2 {
	display: none;
}
.tab-pane-extra-2.open {
	display: none;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    width: 100%; 
    font-size: 14px;
    color: #4b5563;
	margin: 2px 0;
}

.sum-val {
    font-weight: 700;
    /*font-variant-numeric: tabular-nums;*/
    color: #111827;
}

.summary-row.paid .sum-val {
    color: #16a34a; 
}

.summary-divider {
    width: 100%;
    height: 1px;
    background: #e5e7eb;
    margin: 10px 0;
}

.summary-row.balance {
    font-size: 16px; 
    color: #111827;
    margin-bottom: 0;
}
.summary-row.balance .sum-val {
    color: #dc2626; 
}

.modern-form {
	margin-top: 28px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px; 
}


.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px; 
}

.form-group label {
    font-size: 14px;
    font-weight: 700; 
    color: #1f2937;
	letter-spacing: 0.5px;  
}

.form-group input {
    width: 100%;
    padding: 10px 12px; 
    font-size: 14px;
    color: #374151; 
    background-color: #fff;
   
    border: 1px solid #d1d5db;
    border-radius: 8px; 
    
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input::placeholder {
    color: #9ca3af; 
}

.form-group input:focus {
    outline: none; 
    border-color: #2563eb; 
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.05); 
}

.submit-btn {
    align-self: flex-start; 
    background-color: #1e40af; 
    color: white;
    font-weight: 500;
    font-size: 12px;
    
    border: none;
    border-radius: 40px;
    padding: 7px 0 7px; 
    cursor: pointer;
    transition: background-color 0.2s;
    
    margin-top: 10px;
	letter-spacing: 0.5px;
	width: 70px;
}

.submit-btn:hover {
    background-color: #244dd2; 
}

input.readonly-input {
    background-color: #e9ecef !important; 
    color: #1f2937 !important;
    pointer-events: none; 
    cursor: not-allowed;
}
.readonly-box {
    display: block;
    width: 100%;
    min-height: 42px;
    height: auto;
    padding: 10px 14px;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.copy-btn-main {
    align-self: flex-start; 
    background-color: #1e40af; 
    color: white;
    font-weight: 500;
    font-size: 12px;
    
    border: none;
    border-radius: 40px;
    padding: 7px 0 7px; 
    cursor: pointer;
    transition: background-color 0.2s;
    
    margin-top: 10px;
	letter-spacing: 0.5px;
	width: 70px;
}

.copy-btn-main:hover {
    background-color: #244dd2; 
}

/*/DETAIL-PANEL*/

/*PAGINATION*/
.pagination-bar {
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 0px;
	box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.08);
	position: relative; 
    z-index: 10;
    background-color: #fff; 
}
.pagination-bar.without-shadow {
	box-shadow: none; 
}
.pagination-container {
    display: flex;
    justify-content: flex-end;
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
    align-items: center;
	opacity: 0;
}
.pagination.show {
	opacity: 1;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px 1px;
    
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    
    color: #898989;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    
    transition: all 0.2s ease-in-out;
    user-select: none;
	max-width: 26px;
}

.page-link:hover {
    border-color: #2563eb;
	border-color: #cce1fb;
	background-color: #eff6ff;
	color: #666;
	border-color: #dfe5ed;
}

.page-item.active .page-link {
    pointer-events: none;
	/*color: #2b2a29;
	background-color: #eff6ff;
	border-color: #dfe5ed;*/
	color: #1e40af;
	background-color: #d7e4f5;
	border-color: #b8c4ed;
}

.page-item.disabled .page-link {
    color: #9ca3af;
    background-color: #f9fafb;
    border-color: #ebebeb;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.page-item.dots {
    color: #9ca3af;
    font-size: 14px;
    padding: 0 4px;
    letter-spacing: 1px;
}

.page-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 65px); 
}
/*/PAGINATION*/

/*LIGHTBOX*/
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.90);
    z-index: 100;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-toolbar {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    flex-shrink: 0;
	z-index: 100;
}

.lb-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
	margin-right: 10px;
}

.lightbox-stage {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /*overflow: hidden;*/
    min-height: 0;
}

.lightbox-image-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
	overflow: visible !important;
}

#lb-main-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.3s ease;
    cursor: zoom-in;
	z-index: 1;
}

#lb-main-image.zoomed {
    /*transform: scale(2);*/
    cursor: grab;
    max-width: none;
    max-height: none;
}

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
}
.lb-nav:hover { background: rgba(255, 255, 255, 0.3); }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

.lightbox-thumbs-container {
    height: 89px;
    /*background: rgba(0, 0, 0, 0.5);*/
    display: flex;
    justify-content: center;
    padding: 10px 0 10px 0;
    flex-shrink: 0;
	position: relative;
    z-index: 100;
	background: rgba(0, 0, 0, 0.4);
}

#lb-thumbs-track {
    width: auto;
    max-width: 90%;
    display: flex;
    gap: 10px;
	overflow-x: auto;     
    overflow-y: hidden;
	
	display: block;  
	width: 100%
}
 
#lb-thumbs-track [data-overlayscrollbars-viewport] {
	display: flex !important;
	gap:10px;
	justify-content: center;
}

#lb-thumbs-track .thumb-item {
    width: 60px;
    height: 60px;
    flex-shrink: 0; 
    flex: none;     
    border: 2px solid transparent;
    opacity: 0.6;
}

#lb-thumbs-track .thumb-item.active {
    border-color: #fff;
    opacity: 1;
}


.lightbox-image-wrapper {
    position: relative;
    overflow: hidden;
}

.lb-ghost-image {
    position: absolute; 
    margin: 0; 
    object-fit: contain;
    
    z-index: 0;
    pointer-events: none;
    /*box-shadow: 10px 10px 30px rgba(0,0,0,0.8);*/
}


@keyframes slideOutLeft {
    0% { transform: translateX(0); opacity: 1; }
	80% { opacity: 0; }
    100% { transform: translateX(-120%); opacity: 0; }
}

@keyframes slideInRight {
    0% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
    0% { transform: translateX(0); opacity: 1; }
	80% { opacity: 0; }
    100% { transform: translateX(120%); opacity: 0; }
}

@keyframes slideInLeft {
    0% { transform: translateX(-120%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.anim-next-out { animation: slideOutLeft 0.2s ease-in-out forwards; }
.anim-next-in  { animation: slideInRight 0.2s ease-in-out forwards; }

.anim-prev-out { animation: slideOutRight 0.2s ease-in-out forwards; }
.anim-prev-in  { animation: slideInLeft 0.2s ease-in-out forwards; }

.lightbox-thumbs-container .thumbnails-track {
    min-height: 75px;
}

#lb-main-image {
    cursor: zoom-in;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#lb-main-image.zoomed {
    cursor: grab;
}
#lb-main-image.zoomed:active {
    cursor: grabbing;
}
/*/LIGHTBOX*/

.list-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    width: 100%;
}

.spinner {
    width: 40px;            
    height: 40px;
    border: 4px solid #f3f3f3;      
    border-top: 4px solid #3b82f6;   
    border-radius: 50%;            
    animation: spin 1s linear infinite; 
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.list-loader {
    display: flex;         
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 50px 0;
}

.os-scrollbar {
    z-index: 100 !important;
}

.mini-car-card-column {
    min-width: 0;
}
.main-image-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1460px) {
.summary-row.balance {
    font-size: 14px;
}
.mini-car-card-column.lft {
min-width: 194px;

}
}
@media (max-width: 1380px) {
.table-header, .table-row {
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 0.7fr) 
        minmax(0, 1.0fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.8fr) 
        minmax(0, 1.0fr) 
        96px;
    gap: 6px;
}
.table-header .col {
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	
}
.table-row {
    white-space: normal;
	text-align: center;
}
.table-header .col:first-child {
	text-align: left;
}
.table-scroll-area .col-main {
	text-align: left;
}
.table-scroll-area .status-badge {
    padding: 4px 2px;
    width: 100%;
	overflow: hidden;
    text-overflow: ellipsis;
}
.app-workspace.is-open {
    grid-template-columns: 280px 1fr;
}
.inv-row {
    grid-template-columns: 2.2fr 1fr 1fr;
}

}
@media (max-width: 1248px) {
.app-workspace.is-open {
	grid-template-columns: 220px 1fr;
}
.app-workspace.is-open .car-title {
    text-overflow: ellipsis;
	overflow: hidden;
}
.top-area {
    grid-template-columns: 0fr 1.35fr;
}
.tab-btn {
    padding: 2px 12px 10px;
} 
.mini-car-card-wrapper {
    grid-template-columns: 0fr 1.5fr;
}
.vin {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.vin strong {
    white-space: nowrap;
    margin-right: 5px;
    flex-shrink: 0;
}

.vin .code-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-grow: 1;
    position: relative;
	padding-right: 0;
}

.vin .vin-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.vin .copy-btn-absolute {
    flex-shrink: 0;
    margin-left: 2px;
    position: static;
    transform: translateY(0%); 
}
.vin .copy-btn-absolute:hover {
    transform: scale(1.1); 
}
.vin .copy-btn-absolute:active {
    transform: scale(0.95);
}
.vin .copy-btn-absolute.copied {
    transform: scale(1); 
}
}
@media (max-width: 1160px) {
.app-workspace {
    padding: 0 20px 0 20px;
}
.app-workspace.is-open {
	grid-template-columns: 206px 1fr;
}
.container {
    padding: 0 33px 0 20px;
}
.app-workspace.is-open .table-row {
    padding: 8px 6px 8px 10px;
}
/*.gray-box {
    min-width: 400px;
}*/
.step {
    padding: 0 2px;
    min-width: 0;
	width: 90px;
}
.circle {
    box-shadow: 0 0 0 10px #fff;
}
	
.line {
    min-width: 60px; 
    margin-left: -30px;  
    margin-right: -30px;
}
.timeline-wrapper {
	align-items: flex-start;
}
.step-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-car-card-wrapper {
    grid-template-columns: 1fr;
	gap: 10px;
	gap: 2px;
}
.thumbnails-track {
    /*padding-bottom: 0;*/
	padding-bottom: 12px;;
}
.mini-car-card-column.rgt {
    order: -1;
}
.line {
	/*display: none;*/
	/*position: absolute;
	width: 10px;*/
	margin-top: 11px;
	
}
.tab-pane-extra {
	display: none;
}
.tab-pane-extra.open {
	display: none;
}
.tab-pane-extra-2 {
	display: block;
}
.tab-pane-extra-2.open {
	display: none;
}
.top-area {
	grid-template-columns: 1fr 388px;
}
.mini-car-card-column.lft {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
    align-items: center;
}
.gallery-title {
    margin-top: 0;
	margin-bottom: 0px;
	grid-column: 1
}
.photos-tabs-section {
    order: -1;
	grid-column: 1;
	grid-column: 1 / -1;
}
.photo-tabs {
	display: flex;
	gap: 5px;
}
.photo-tab {
    padding: 3px 6px 3px 10px;
    gap: 5px;
}
.vin .code-wrap {
	display: inline-block;
	position: relative;
	padding-right: 18px;
	flex-grow: 0;
}
.vin .copy-btn-absolute {
	transform: translateY(-50%);
	position: absolute;
}
.vin .copy-btn-absolute:hover {
    transform: translateY(-50%) scale(1.1); 
}
.vin .copy-btn-absolute:active {
    transform: translateY(-50%) scale(0.95);
}
.vin .copy-btn-absolute.copied {
    transform: translateY(-50%) scale(1); 
}
.mini-meta {
	margin: 0;
    align-items: center;
	/*margin-top: 20px;
	margin-bottom: 20px;*/
}
.keys-info {
	margin: 0;
	padding: 0;
	border: none;
	/*margin-top: 20px;
	margin-bottom: 20px;*/
}
.key-item {
	border: none;
	padding-top: 5px;
    padding-bottom: 6px;
}
.key-item:first-child {
	border-bottom: 1px solid #e5e7eb;
}
.inv-summary {
    margin-top: 10px;
}
.mini-car-card {
    height: auto;
}
.gallery-container {
    min-height: 0;
}
}	
@media (max-width: 1040px) {
.app-workspace.is-open {
	grid-template-columns: 1fr;
}
.is-open .list-panel {
	display: none;
}
.top-area .close-btn {
	display: none;
}    
.top-area {
	grid-template-columns: 1fr 388px;
}
.pagination-bar.mob-hide {
	display: none;
}
.is-open .detail-panel {
    margin: 15px 0 5px;
}
}
@media (max-width: 960px) {
.table-header .col:last-child {
	display: none;
}
.table-row .col:last-child {
	display: none;
}
.table-header, .table-row {
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 0.7fr) 
        minmax(0, 1.0fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.8fr) 
        minmax(0, 1.0fr);
}
}
@media (max-width: 820px) {
.table-header .col:nth-last-child(2) {
	display: none;
}
.table-row .col:nth-last-child(2) {
	display: none;
}
.table-header, .table-row {
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.7fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.8fr);
}
	.top-area {
        grid-template-columns: 1fr 1fr;
    }
	.photo-tab {
        padding: 3px 3px 3px 7px;
        gap: 5px;
    }
.download-icon {
    width: 20px;
    height: 20px;
}
.download-icon svg {
    width: 14px;
    height: 14px;
}
.circle {
    box-shadow: 0 0 0 10px #fff;
}
.inv-row {
    grid-template-columns: 2.0fr 1fr 1fr;
}
}
@media (max-width: 760px) {
.photo-tabs {
    display: grid;
	gap:5px;
}
.photo-tab {
	margin-top: 0;
}
.gallery-title {
    margin-bottom: 10px;
}
.mini-car-card-column.lft {
	gap: 13px;
	align-items: flex-start;
}
.mini-meta {
	grid-column: 1 / -1;
}
.keys-info {
	grid-column: 1 / -1;
}
.table-header .col:nth-last-child(3) {
	display: none;
}
.table-row .col:nth-last-child(3) {
	display: none;
}
.table-header, .table-row {
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.7fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.5fr);
}
.step-date {
	font-size: 0;
}
.step-date::before {
	content: attr(data-short);
	font-size: 11px;
	white-space: nowrap;
}
}
@media (max-width: 660px) {
.table-header .col:nth-last-child(4) {
	display: none;
}
.table-row .col:nth-last-child(4) {
	display: none;
}
.table-header, .table-row {
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.7fr) 
        minmax(0, 0.5fr);
}
.top-area {
	grid-template-columns: 1fr;
}
.gray-box.left-top {
	order: 1;
}
.mini-car-card-wrapper {
    padding-top: 12px;
}
.mini-car-card h3 {
    padding-bottom: 0;
    border-bottom: none;
	display: none;
}
.mini-car-card h3.mob {
	display: inline;
	grid-column: 1 / -1;
	border: none;
	padding: 0;
	margin: 0;
}
.photo-tabs {
	display: flex;
	padding-bottom: 10px;
}
.mini-meta {
grid-column: auto;
}
	.keys-info {
        grid-column: auto;
    }
.gray-box.left-top {
    padding-right: 0;
    border-right: none;
}
/*.gray-box.left-top {
	padding-bottom: 20px;
    }*/
.tab-pane {
	/*padding-bottom: 20px;*/
	padding-bottom: 12px;
}
.bottom-area {
    padding-left: 0;
	display: none;
}
.bottom-area.show-on-mobile {
	display: block;
}
.inv-row {
    grid-template-columns: 2.2fr 1fr 1fr;
}
}
@media (max-width: 620px) {
.table-header .col:nth-last-child(5) {
	display: none;
}
.table-row .col:nth-last-child(5) {
	display: none;
}
.table-header, .table-row {
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 0.5fr) 
        minmax(0, 0.7fr);
}
	.timeline-wrapper {
        flex-wrap: wrap;
		justify-content: normal;
    }    
	.step {
		margin-bottom: 10px;
		width: 25%;
    }
.tracking-section h3 {
	text-align: center;
}
.step-date {
	font-size: 11px;
}
.step-date::before {
	content: none;
}
	
	
.line {
        display: none;
    }
.timeline-wrapper {
    display: flex;
    flex-wrap: wrap; 
    justify-content: flex-start;
    row-gap: 20px; 
    position: relative;
}

.timeline-wrapper .line {
    display: none !important;
}
	
.step {
    width: 25%;
    margin-bottom: 0; 
    position: relative;
}

.step .circle {
    position: relative;
    z-index: 2;
    background: #e5e7eb; 
}
.step.completed .circle { background: #10b981; }
.step.active .circle { background: #1e40af; }

.step:not(:first-child)::before {
    content: '';
        position: absolute;
        top: 12px;
        left: -28%;
        width: 56%;
        height: 2px;
        background: #e5e7eb;
        z-index: 1;
}

.step.completed:not(:first-child)::before {
    background: #10b981;
}

.step:nth-child(8n + 1):not(:first-child)::before {
    left: 0;
    width: 50%;
}

.step:nth-child(8n - 1)::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    width: 50%;
    height: 2px;
    background: #e5e7eb;
    z-index: 1;
}
.step:nth-child(8n - 1):has(+ .line + .step.completed)::after {
    background: #10b981;
}

.step:last-child::after {
    display: none !important;
}

	
}
@media (max-width: 580px) {

.table-header .col:nth-last-child(6) {
	display: none;
}
.table-row .col:nth-last-child(6) {
	display: none;
}
.table-header .col:nth-last-child(7) {
	display: none;
}
.table-row .col:nth-last-child(7) {
	display: none;
}
.table-header, .table-row {
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr) 
        minmax(0, 1.0fr);
}
}
@media (max-width: 480px) {

.table-header .col:nth-last-child(8) {
	display: none;
}
.table-row .col:nth-last-child(8) {
	display: none;
}
.table-header .col:nth-last-child(9) {
	display: none;
}
.table-row .col:nth-last-child(9) {
	display: none;
}
.table-header, .table-row {
    grid-template-columns:
		minmax(0, 2.5fr) 
        minmax(0, 1.0fr);
}
	.table-header .col {
        text-align: right;
        text-overflow: clip;
		overflow: visible;
    }
	.table-header .col:nth-child(2) {
		direction: rtl;
    }
	.app-workspace {
        padding: 0 3px 0 5px;
    }   
	.app-workspace.is-open {
        padding: 0 3px;
		height: auto;
    }     
	.container {
        padding: 0 15px 0 18px;
    }    
	.is-open .detail-panel {
        margin: 0;
    }
.layout-wrapper {
    padding-right: 6px;
    padding-left: 4px;
    gap: 0;
}
.detail-content {
    padding-right: 14px;
}
.detail-panel {
	filter: none;
}
	.mini-car-card-wrapper {
        padding-top: 4px;
    }
.detail-panel .os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless {
	top: 18px;
	bottom: 10px;
}
	.photo-tab {
        padding: 5px 6px 5px 10px;
    }
	.panel-toggle {
        transform: none !important; 
    }
.toggle-wrapper {
	top: 0;
    bottom: auto;
    left: -3px;
    width: 34px;
	height: 66px;
	z-index: 101;
}
.panel-toggle {
    width: 34px;
    height: 34px;
    left: auto;
    top: auto;
	right: 3px !important;
	bottom: 3px;
    border-radius: 0 8px 8px 0;
		box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
}
.panel-toggle::after {
    width: 12px;
	transform: translate(-50%, -50%) rotate(180deg);
}
.detail-panel .spinner {
	margin-top: 50px;
}
.lb-btn.close-btn {
	display: none;
}
.lightbox-toolbar {
	order: 1;
}
.lightbox-thumbs-container {
	order: 2;
}
.prev-btn {
    left: 30px;
}
.next-btn {
    right: 30px;
}
.info-row.only-mob {
	display: flex;
}

    .timeline-wrapper {
        flex-direction: column;
        align-items: flex-start; 
        gap: 0;
		padding-bottom: 10px;
    }

    .timeline-wrapper .line {
        display: none;
    }

    .step {
        display: flex;       
        flex-wrap: wrap;     
        text-align: left;    
        width: 100%;         
        padding-left: 35px;  
        padding-bottom: 20px;
        position: relative;  
        min-width: 0;        
        margin: 0;           
    }

    .step .circle {
        position: absolute;
        left: 0;
        top: 6px;
        margin: 0;
        z-index: 2;
    }

    .step-label, 
    .step-date {
        width: 100%;
    }
    
    .step-label {
        font-size: 14px;
        margin-top: 2px;
    }

    .step::after {
        content: '';
        position: absolute;
        width: 2px;
        background: #e5e7eb;
        
        left: 11px; 
        
        top: 36px; 
        
        height: calc(100% - 24px + 5px); 
        z-index: 1;
    }
    .step.completed::after {
        background: #10b981;
    }

    .step:last-child {
        padding-bottom: 0;
    }
    .step:last-child::after {
        display: none;
    }
#lb-thumbs-track [data-overlayscrollbars-viewport] {
	justify-content: flex-start;
}
.submit-btn, .copy-btn-main {
    width: 100%;
}


.step:nth-child(8n - 1)::after {
        content: '';
        position: absolute;
        width: 2px;
        background: #e5e7eb;
        
        left: 11px; 
        
        top: 36px; 
        
        height: calc(100% - 24px + 5px); 
        z-index: 1;
}    
	.step:not(:first-child)::before {
		display: none;
    }

}
@media (max-width: 440px) {
    .keys-info {
        grid-column: 1 / -1;
    }
    .mini-meta {
        grid-column: 1 / -1;
    }
}
@media (max-width: 420px) {
	/*.step {
		width: 33%;
    }*/
	.photo-tabs {
        display: grid;
    }
}
@media (max-width: 400px) {    
	.tab-btn {
        padding: 2px 5px 10px;
    }
.inv-col {
    font-size: 13px;
}
.main-nav a.btn-primary {
    padding: 4px 15px 6px;
}
.main-nav a.nav-btn {
    padding: 5px 10px 7px;
}
}
@media (max-width: 370px) {
.inv-col {
    font-size: 12px;
}
.inv-col.is-negative {
    transform: translateX(-5px); 
}
.inv-col.date {
    font-size: 12px;
}    
	.tab-btn {
        padding: 2px 1px 10px;
    }
.section-title {
    font-size: 21px;
}
.inv-row {
    grid-template-columns: 1.6fr 1fr 1fr;
}

}