/* PAGE */

.lifted-page{
    height:100%;
    background:#f3f0ea;
    overflow:hidden;
}

.content-box{
    height:100%;
    display:flex;
    flex-direction:column;
}

/* FILTER BAR */

.filter-bar{
    height:52px;

    background:#efefef;

    border-bottom:1px solid #d5d5d5;

    display:flex;
    align-items:center;
    gap:28px;

    padding:0 12px;
}

.date-group{
    display:flex;
    align-items:center;
    gap:12px;
}

.date-group label{
    font-size:14px;
    font-weight:700;
    color:#111;
    white-space:nowrap;
}

.date-group input{
    width:112px;
    height:28px;

    border:1px solid #cfd5db;
    border-radius:6px;

    background:#f8f8f8;

    text-align:center;

    font-size:14px;
    color:#333;

    outline:none;
}

/* BUTTON */

.fetch-btn{
    height:38px;
    min-width:102px;

    border:none;
    border-radius:6px;

    background:#ffbf00;
    color:#000;

    font-size:15px;
    font-weight:500;

    cursor:pointer;
}

/* TOTAL */

.header-row{
    height:40px;

    display:flex;
    align-items:center;

    padding:0 14px;

    background:#f5f3ef;

    border-bottom:1px solid #cfcfcf;
}

.total{
    font-size:15px;
    color:#111;
}

.total strong{
    font-weight:700;
}

/* TABLE WRAPPER */

.table-wrapper{
    flex:1;

    overflow-x:auto;
    overflow-y:auto;

    background:#f5f3ef;

    padding-left:20px;
    padding-right:20px;

    position:relative;
}

/* TABLE */

.lifted-table{
    width:100%;

    border-collapse:collapse;

    table-layout:auto;

    min-width:1200px;
}

.lifted-table thead{
    position:sticky;
    top:0;
    z-index:10;
}

/* HEADERS */

.lifted-table th{
    background:#ddd6cf;

    border:1px solid #c5c5c5;

    padding:4px;

    text-align:left;

    font-size:13px;
    font-weight:600;
    color:#333;

    vertical-align:middle;
}

/* HEADER INPUTS */

.lifted-table th input{
    width:100%;
    height:28px;

    border:1px solid #cfd5da;
    border-radius:5px;

    background:#f8f9fb;

    padding:0 6px;

    box-sizing:border-box;

    font-size:13px;

    outline:none;
}

/* BODY */

.lifted-table td{
    border:1px solid #d1d1d1;

    background:#f8f8f8;

    padding:7px 6px;

    font-size:13px;
    color:#000;

    line-height:1.55;

    vertical-align:middle;
}

.lifted-table tbody tr{
    height:68px;
}

.lifted-table tbody tr:nth-child(even) td{
    background:#f2efeb;
}

/* ACTIONS COLUMN */

.lifted-table td:last-child{
    text-align:center;
}

/* COLUMN WIDTHS */

.lifted-table th:nth-child(1),
.lifted-table td:nth-child(1){
    width:52px;
    text-align:center;
}

.lifted-table th:nth-child(2),
.lifted-table td:nth-child(2){
    width:110px;
}

.lifted-table th:nth-child(3),
.lifted-table td:nth-child(3){
    width:170px;
}

.lifted-table th:nth-child(4),
.lifted-table td:nth-child(4){
    width:130px;
}

.lifted-table th:nth-child(5),
.lifted-table td:nth-child(5){
    width:90px;
    text-align:center;
}

.lifted-table th:nth-child(6),
.lifted-table td:nth-child(6){
    width:130px;
}

.lifted-table th:nth-child(7),
.lifted-table td:nth-child(7){
    width:130px;
}

.lifted-table th:nth-child(8),
.lifted-table td:nth-child(8){
    width:210px;
}

.lifted-table th:nth-child(9),
.lifted-table td:nth-child(9){
    width:80px;
}

.lifted-table th:nth-child(10),
.lifted-table td:nth-child(10){
    width:80px;
}

.lifted-table th:nth-child(11),
.lifted-table td:nth-child(11){
    width:100px;
    text-align:center;
}

/* ACTION BUTTON */

.action-cell{
    position:relative;
}

.action-btn{
    border:none;
    background:none;

    color:#f5a623;

      font-size: 13px;
    font-weight: 800;

    letter-spacing:2px;

    cursor:pointer;

    line-height:1;
}

/* DROPDOWN */

.action-menu{
    position:absolute;

    top:34px;
    right:0;

    width:185px;

    background:#fff;

    border:1px solid #d9d9d9;
    border-radius:8px;

    box-shadow:0 4px 14px rgba(0,0,0,.18);

    padding:6px 0;

    display:none;

    z-index:999999;
}

.action-menu.show{
    display:block;
}

/* MENU ITEMS */

.action-menu button{
    width:100%;

    border:none;
    background:#fff;

    display:flex;
    align-items:center;
    gap:10px;

    padding:11px 14px;

    font-size:14px;
    color:#333;

    cursor:pointer;
}

.action-menu button:hover{
    background:#f5f5f5;
}

/* ICONS */

.action-menu i{
    color:#f5a623;
    font-size:15px;
    width:16px;
}

/* SCROLLBAR */

.table-wrapper::-webkit-scrollbar{
    width:10px;
    height:10px;
}

.table-wrapper::-webkit-scrollbar-thumb{
    background:#8b8b8b;
    border-radius:10px;
}

.table-wrapper::-webkit-scrollbar-track{
    background:#ececec;
}

/* DRAWER */

.vehicle-drawer{
    position:fixed;

    top:0;
    right:-100%;

    width:1020px;
    max-width:100%;

    height:100vh;

    background:#efefef;

    z-index:999999;

    transition:.35s ease;

    overflow-y:auto;

    box-shadow:-4px 0 16px rgba(0,0,0,.18);
}

.vehicle-drawer.show{
    right:0;
}

/* HEADER */

.drawer-header{
    height:42px;

    background:#1565ea;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 16px;

    position:sticky;
    top:0;

    z-index:50;
}

.drawer-header h2{
    color:#fff;

    font-size:18px;
    font-weight:700;

    margin:0;
}

.drawer-close{
    border:none;
    background:none;

    color:#fff;

    font-size:20px;

    cursor:pointer;
}

/* TOP */

.drawer-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:16px 22px 10px;
}

.vehicle-id{
    font-size:14px;
    color:#222;
}

.vehicle-id strong{
    font-size:24px;
    font-weight:700;
    margin-left:4px;
}

.vehicle-status{
    display:flex;
    align-items:center;
    gap:10px;
}

.vehicle-status label{
    font-size:14px;
    color:#333;
}

.vehicle-status select{
    width:155px;
    height:30px;

    border:1px solid #cfd3d7;
    border-radius:6px;

    padding:0 10px;

    background:#f6f6f6;
}

/* BODY */

.drawer-body{
    padding:0 22px 30px;
}

/* SECTIONS */

.form-section{
    background:#f7f7f7;

    border:1px solid #d7d7d7;
    border-radius:6px;

    padding:16px;

    margin-bottom:16px;
}

/* GRIDS */

.vehicle-row,
.vehicle-details-grid,
.manager-grid,
.yard-grid,
.auction-grid,
.bottom-grid,
.notes-grid,
.date-row,
.auction-info-row{
    display:grid;
    gap:28px;
}

/* TOP GRID */

.vehicle-row{
    grid-template-columns:1fr 1fr 1fr;
}

/* DETAILS */

.vehicle-details-grid{
    grid-template-columns:1fr 1fr;
}

.vehicle-details-left,
.vehicle-details-right,
.yard-col,
.auction-col,
.bottom-col{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* MANAGER */

.manager-grid{
    grid-template-columns:1fr 1fr 1fr;
}

/* YARD */

.yard-grid{
    grid-template-columns:1fr 1fr;
}

/* AUCTION */

.auction-grid{
    grid-template-columns:1fr 1fr;
}

/* NOTES */

.notes-grid{
    grid-template-columns:1fr 1fr;
}

/* BOTTOM */

.bottom-grid{
    grid-template-columns:1fr 1fr;
}

/* DATES */

.date-row{
    grid-template-columns:1fr 1fr 1fr;
}

/* INFO */

.auction-info-row{
    grid-template-columns:1fr 1fr 1fr;
}

/* FIELD */

.vehicle-field,
.notes-field,
.date-field,
.auction-info-item{
    display:flex;
    align-items:center;
    gap:10px;
}

.vehicle-field label,
.notes-field label,
.date-field label,
.auction-info-item label{
    width:145px;

    font-size:14px;
    color:#333;

    flex-shrink:0;
}

.vehicle-field span{
    color:#d40000;
}

/* INPUTS */

.vehicle-field input,
.vehicle-field select,
.notes-field textarea,
.date-field input,
.auction-info-item input,
.rto-input,
.challan-table input,
.challan-header input,
.challan-footer input{
    width:100%;
    height:30px;

    border:1px solid #cfd3d7;
    border-radius:6px;

    background:#f6f6f6;

    padding:0 10px;

    font-size:14px;

    box-sizing:border-box;

    outline:none;
}

.vehicle-field select{
    cursor:pointer;
}

.notes-field textarea{
    height:80px;
    padding-top:8px;
    resize:none;
}

/* TEXT */

.vehicle-text span{
    font-size:14px;
    color:#222;
}

/* DUAL INPUT */

.dual-input{
    display:flex;
    gap:10px;
    width:100%;
}

.dual-input input{
    flex:1;
}

/* YES NO */

.yes-no-head{
    display:flex;
    justify-content:flex-end;
    gap:105px;

    margin-bottom:-2px;

    padding-right:18px;

    font-size:13px;
    color:#333;
}

/* TABLE */

.challan-table{
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
}

.challan-table th{
    background:#ececec;
    border:1px solid #d4d4d4;
    padding:8px;
    text-align:left;
}

.challan-table td{
    border:1px solid #d4d4d4;
    padding:8px;
}

/* FOOTER */

.challan-footer{
    margin-top:12px;

    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
}

.challan-footer input{
    width:160px;
}

/* RTO */

.rto-section{
    display:flex;
    align-items:center;
    gap:16px;
}

.rto-label{
    font-size:14px;
    font-weight:600;
}

/* BUTTON */

.save-row{
    display:flex;
    justify-content:flex-end;

    margin-top:18px;
}

.live-btn-save{
    min-width:110px;
    height:38px;

    border:none;
    border-radius:6px;

    background:#ff9f0a;
    color:#fff;

    font-size:15px;
    font-weight:600;

    cursor:pointer;
}

/* CHECKBOX */

.auto-check{
    width:20px !important;
    height:20px !important;

    accent-color:#1565ea;
}

/* LINK BTN */

.manager-link-btn{
    width:32px;
    height:30px;

    border:none;
    border-radius:6px;

    background:#1565ea;
    color:#fff;

    cursor:pointer;

    flex-shrink:0;
}

/* VAHAN DRAWER */

.vahan-drawer{
    position:fixed;

    top:0;
    right:-100%;

    width:1180px;
    max-width:100%;

    height:100vh;

    background:#efefef;

    z-index:999999;

    transition:.35s ease;

    overflow-y:auto;
}

.vahan-drawer.show{
    right:0;
}

/* HEADER */

.vahan-header{
    height:36px;

    background:#1565ea;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 18px;
}

.vahan-header h2{
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin:0;
}

.vahan-close{
    border:none;
    background:none;

    color:#fff;

    font-size:18px;

    cursor:pointer;
}

/* TABS */

.vahan-tabs{
    display:flex;
    gap:8px;

    padding:6px 6px 0;
}

.vahan-tabs button{
    height:42px;

    border:none;
    border-radius:6px 6px 0 0;

    padding:0 18px;

    background:#e8e8e8;

    cursor:pointer;

    font-size:14px;
}

.vahan-tabs .active{
    background:#fff;
}

/* TOPBAR */

.vahan-topbar{
    height:56px;

    background:#1f232a;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 14px;

    color:#fff;
}

.update-btn{
    border:none;

    background:#00c7f3;

    height:32px;

    padding:0 18px;

    border-radius:5px;

    cursor:pointer;
}

/* BODY */
/* VAHAN BODY */

.vahan-body{
    display:grid;
    grid-template-columns:460px 1fr 1fr;
    gap:0px;

    padding:0;
    background:#efefef;
}

/* ALL COLUMNS */

.vahan-col{
    padding:14px 24px 18px;
    min-height:100%;
    box-sizing:border-box;
}

/* CENTER COLUMN */

.vahan-body .vahan-col:nth-child(2){
    border-left:1px solid #cfcfcf;
}
/* RIGHT COLUMN */

.vahan-body .vahan-col:nth-child(3){
    padding-left:26px;
}

/* LEFT FORM */

.vahan-field{
    display:grid;

    grid-template-columns:110px 14px 1fr;

    align-items:center;

    gap:12px;

    margin-bottom:10px;
}

.vahan-field label{
    font-size:14px;
    color:#333;
    line-height:20px;
}

.vahan-field span{
    color:#666;
    text-align:center;
}

/* RIGHT INFO */

.vahan-info{
    display:grid;

    grid-template-columns:150px 20px;

    align-items:center;

    gap:12px;

    margin-bottom:16px;
}

.vahan-info label{
    font-size:14px;
    color:#333;
    line-height:18px;
}

.vahan-info span{
    color:#666;
}

/* INPUTS */

.vahan-field input,
.vahan-field select{
    width:100%;
    height:30px;

    border:1px solid #cfd3d7;
    border-radius:4px;

    background:#f7f7f7;

    padding:0 10px;

    font-size:14px;
    color:#333;

    box-sizing:border-box;
}

/* SAVE BUTTON */

.vahan-save-row{
    display:flex;
    justify-content:end;
    margin-top:46px;
}

.vahan-save-btn{
    min-width:60px;
    height:38px;

    border:none;
    border-radius:6px;

    background:#1565ea;
    color:#fff;

    font-size:15px;
    font-weight:600;

    cursor:pointer;
}

/* TAB CONTENT */

.vahan-tab-content{
    display:none;
}

.vahan-tab-content.active{
    display:block;
}

/* CHALLAN TAB */

.challan-tab-wrap{
    padding:20px 60px;
    background:#efefef;
    min-height:520px;
}

.challan-details-table{
    width:100%;
    border-collapse:collapse;
}

.challan-details-table th,
.challan-details-table td{
    border:1px solid #cfcfcf;
}

.challan-details-table th{
    background:#ececec;
    padding:4px;
}

.challan-details-table th input{
    width:100%;
    height:28px;

    border:1px solid #cfd3d7;
    border-radius:4px;

    background:#f7f7f7;

    padding:0 10px;

    box-sizing:border-box;
}

.no-data-row td{
    height:52px;

    text-align:center;

    background:#f8f8f8;

    font-size:14px;
}

.total-row td{
    background:#f2efeb;

    font-weight:700;

    padding:6px;
}

.total-row td:first-child{
    text-align:right;
}

.amount-head{
    width:90px;
}
/* IMAGE BODY */

.image-body{
    display:flex;

    gap:18px;

    height:calc(100vh - 94px);

    padding:10px 10px 20px;

    overflow:hidden;
}

/* LEFT SIDE */

.image-grid{
    width:670px;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:16px;

    overflow-y:auto;

    padding-right:6px;
}

/* RIGHT PREVIEW */

.image-preview{
    flex:1;

    background:#efefef;

    border-left:1px solid #d3d3d3;

    position:relative;

    overflow:hidden;
}

/* PREVIEW IMAGE */

.preview-image{
    position:absolute;

    inset:0;

    background-repeat:no-repeat;

    background-size:230%;

    background-position:center;

    opacity:0;

    transition:opacity .15s ease;
}

/* CARD */

.image-card{
    height:148px;

    background:#f7f7f7;

    border:1px solid #d8d8d8;
    border-radius:4px;

    overflow:hidden;

    position:relative;

    cursor:zoom-in;
}

.image-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* TOP ICONS */

.image-top-icons{
    position:absolute;

    top:6px;
    left:6px;
    right:6px;

    display:flex;
    justify-content:space-between;

    z-index:5;
}

.image-top-icons i{
    font-size:13px;
    color:#555;
}

/* UPLOAD */

.upload-card{
    display:flex;
    align-items:center;
    justify-content:center;
}

.upload-card span{
    font-size:70px;
    color:#c9c9c9;
}

/* SCROLL */

.image-grid::-webkit-scrollbar{
    width:10px;
}

.image-grid::-webkit-scrollbar-thumb{
    background:#8d8d8d;
    border-radius:10px;
}

.image-grid::-webkit-scrollbar-track{
    background:#ececec;
}

/* IMAGE DRAWER */
/* IMAGE DRAWER */

.image-drawer{
    position:fixed;

    top:0;
    right:-100%;

    width:1020px;
    max-width:100%;

    height:100vh;

    background:#efefef;

    z-index:999999;

    transition:.35s ease;

    overflow:hidden;

    box-shadow:-4px 0 16px rgba(0,0,0,.18);
}

.image-drawer.show{
    right:0;
}

/* HEADER */

.image-header{
    height:40px;

    background:#1565ea;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 14px;
}

.image-header h2{
    margin:0;

    color:#fff;

    font-size:18px;
    font-weight:700;
}

.image-close{
    border:none;
    background:none;

    color:#fff;

    font-size:18px;

    cursor:pointer;
}

/* TOOLBAR */

.image-toolbar{
    width:660px;

    height:54px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 8px;

    background:#efefef;
}

.toolbar-box{
    flex:1;

    height:40px;

    border:1px solid #d4d4d4;

    background:#f5f5f5;
}

.toolbar-icons{
    display:flex;
    align-items:center;

    gap:3px;

    margin-left:8px;
}

.toolbar-icons button{
    width:22px;
    height:22px;

    border:1px solid #c9c9c9;
    border-radius:3px;

    background:#fff;

    color:#f29b18;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
}

/* IMAGE BODY */

.image-body{
    display:flex;

    align-items:flex-start;

    gap:14px;

    height:calc(100vh - 94px);

    padding:10px 8px 20px;

    overflow:hidden;
}

/* LEFT GRID */

.image-grid{
    width:660px;

    min-width:660px;

    height:100%;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:16px;

    overflow-y:scroll;

    overflow-x:hidden;

    padding-right:6px;

    align-content:start;
}

/* RIGHT PREVIEW */

.image-preview{
    width:320px;

    min-width:320px;

    height:100%;

    background:#efefef;

    border-left:1px solid #d8d8d8;

    position:relative;

    overflow:hidden;
}

/* PREVIEW IMAGE */

.preview-image{
    position:absolute;

    inset:0;

    background-repeat:no-repeat;

    background-size:230%;

    background-position:center;

    opacity:0;

    transition:opacity .15s ease;
}

/* CARD */

.image-card{
    height:148px;

    background:#f7f7f7;

    border:1px solid #d8d8d8;
    border-radius:4px;

    overflow:hidden;

    position:relative;

    cursor:zoom-in;
}

/* IMAGE */

.image-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* TOP ICONS */

.image-top-icons{
    position:absolute;

    top:6px;
    left:6px;
    right:6px;

    display:flex;
    justify-content:space-between;

    z-index:5;
}

.image-top-icons i{
    font-size:13px;
    color:#555;
}

/* EMPTY CARD */

.upload-card{
    display:flex;
    align-items:center;
    justify-content:center;
}

.upload-card span{
    font-size:70px;
    color:#c9c9c9;
}

/* SCROLLBAR */

.image-grid::-webkit-scrollbar{
    width:12px;
}

.image-grid::-webkit-scrollbar-thumb{
    background:#8b8b8b;
    border-radius:10px;
}

.image-grid::-webkit-scrollbar-track{
    background:#ececec;
}


/* STATUS DRAWER */

.status-drawer{
    position:fixed;

    top:0;
    right:-100%;

    width:955px;
    max-width:100%;

    height:100vh;

    background:#efefef;

    z-index:999999;

    transition:.35s ease;

    overflow:hidden;
}

.status-drawer.show{
    right:0;
}

/* HEADER */

.status-header{
    height:40px;

    background:#1565ea;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 16px;
}

.status-header h2{
    margin:0;

    color:#fff;

    font-size:18px;
    font-weight:700;
}

.status-close{
    border:none;
    background:none;

    color:#fff;

    font-size:18px;

    cursor:pointer;
}

/* BODY */

.status-body{
    padding:18px 22px;
}

/* TABS */

.status-tabs{
    display:flex;
    align-items:center;

    gap:36px;

    margin-bottom:10px;
}

.status-tabs button{
    border:none;
    background:none;

    padding:0;

    font-size:14px;

    color:#5a5a5a;

    cursor:pointer;
}

.status-tabs button.active{
    color:#222;
}

/* CONTENT */

.status-content{
    min-height:78px;

    border:1px solid #d6d6d6;

    background:#f5f5f5;

    padding:20px;
}

/* BUTTON */

.status-submit-btn{
    min-width:76px;
    height:38px;

    border:none;
    border-radius:6px;

    background:#1565ea;
    color:#fff;

    font-size:15px;
    font-weight:600;

    cursor:pointer;
}