body { background:#f5f7fb; color:#17202a; font-family: 'Lexend';}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/../fonts/Lexend-Black.woff2') format('woff2'),
        url('../fonts/../fonts/Lexend-Black.woff') format('woff');
    font-weight: 900;    font-style: normal;    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-Bold.woff2') format('woff2'),
        url('../fonts/Lexend-Bold.woff') format('woff');
    font-weight: bold;    font-style: normal;    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-ExtraBold.woff2') format('woff2'),
        url('../fonts/Lexend-ExtraBold.woff') format('woff');
    font-weight: bold;    font-style: normal;    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-ExtraLight.woff2') format('woff2'),
        url('../fonts/Lexend-ExtraLight.woff') format('woff');
    font-weight: 200;    font-style: normal;    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-Light.woff2') format('woff2'),
        url('../fonts/Lexend-Light.woff') format('woff');
    font-weight: 300;    font-style: normal;    font-display: swap;}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-Medium.woff2') format('woff2'),
        url('../fonts/Lexend-Medium.woff') format('woff');
    font-weight: 500;    font-style: normal;    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-Regular.woff2') format('woff2'),
        url('../fonts/Lexend-Regular.woff') format('woff');
    font-weight: normal;    font-style: normal;    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-SemiBold.woff2') format('woff2'),
        url('../fonts/Lexend-SemiBold.woff') format('woff');
    font-weight: 600;    font-style: normal;    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-Thin.woff2') format('woff2'),
        url('../fonts/Lexend-Thin.woff') format('woff');
    font-weight: 100;    font-style: normal;    font-display: swap;
}

.app-shell { min-height:100vh; display:flex; }
.sidebar { width:240px; position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; background:#151618; color:#fff; z-index:1030; }
.sidebar-brand { padding:20px 22px; color:#fff; text-decoration:none; font:700 22px Georgia,serif; border-bottom:1px solid #39414a; }
.sidebar-nav { padding:12px 0; flex:1; overflow-y:auto; }
.sidebar-nav a { display:block; color:#cbd2d9; text-decoration:none; padding:11px 22px; border-left:3px solid transparent; }
.sidebar-nav a:hover { color:#fff; background:#2b323a; border-left-color:#4d9cff; }
.sidebar-user { padding:18px 22px; border-top:1px solid #39414a; display:flex; flex-direction:column; }
.sidebar-user span { color:#aeb7c1; font-size:13px; }
.app-content { width:calc(100% - 240px); margin-left:240px; }
.mobile-header { display:none; align-items:center; gap:12px; padding:10px 14px; background:#fff; border-bottom:1px solid #dde3ea; }
.page-title { font-weight:700; margin-bottom:1rem; }
.card { border-radius:8px; border-color:#dde3ea; }
.table th { white-space:nowrap; }
.excel-sheet { background:white; border:1px solid #aeb7c2; padding:14px; overflow:auto; }
.excel-sheet table { width:100%; min-width:860px; border-collapse:collapse; font-size:13px; }
.excel-sheet th,.excel-sheet td { border:1px solid #6d7681; padding:5px 7px; vertical-align:middle; }
.excel-title { background:#d9ead3; text-align:center; font-weight:700; font-size:18px; }
.section-title { background:#cfe2f3; font-weight:700; text-transform:uppercase; }
.subhead { background:#eeeeee; font-weight:700; }
.calc-cell { background:#fff2cc; font-weight:700; }
.locked-banner { background:#fff3cd; border:1px solid #ffe69c; padding:10px; border-radius:6px; }
.w-90 { width:90px; } .w-130 { width:130px; } .w-180 { width:180px; }
input[readonly] { background:#f1f3f5; }
.image-preview { width:100%; max-width:260px; aspect-ratio:4/3; object-fit:contain; border:1px dashed #9aa6b2; background:#f8fafc; }
.form-section { margin-bottom:18px; }
.form-section-title { margin:0; padding:9px 12px; background:#cfe2f3; border:1px solid #7c8793; font-size:14px; font-weight:700; text-transform:uppercase; }
.cost-table td,.cost-table th { min-width:90px; }
.cost-table .particular-col { min-width:190px; }
.material-components { display:grid; gap:16px; }
.material-component { max-width:100%; min-width:900px; }
.material-sheet { width:100%; border-collapse:collapse; table-layout:fixed; background:#fff; font-size:13px; }
.material-sheet th,.material-sheet td { border:1px solid #30343a; height:27px; padding:1px 4px; }
.material-sheet th { font-weight:700; }
.material-sheet th:first-child,.material-sheet td:first-child { width:32%; }
.material-sheet td:nth-child(2),.material-sheet th:nth-child(2) { width:15%; }
.material-sheet td:nth-child(3),.material-sheet th:nth-child(3) { width:20%; }
.material-sheet td:nth-child(4),.material-sheet th:nth-child(4) { width:16%; }
.material-sheet td:nth-child(5),.material-sheet th:nth-child(5) { width:17%; }
.material-sheet .sheet-spacer { height:14px; background:#fafafa; }
.sheet-input { width:100%; height:23px; border:0; border-radius:0; padding:1px 3px; background:transparent; }
.sheet-input:focus { outline:2px solid #86b7fe; outline-offset:-2px; }
.material-sheet .bootstrap-select { width:100% !important; vertical-align:middle; }
.material-sheet .bootstrap-select > .dropdown-toggle { height:25px; min-height:25px; padding:1px 22px 1px 3px; border:0; border-radius:0; background:transparent; color:#17202a; font-size:13px; }
.material-sheet .bootstrap-select > .dropdown-toggle:focus { outline:2px solid #86b7fe !important; outline-offset:-2px; box-shadow:none; }
.material-sheet .bootstrap-select .dropdown-menu { border-radius:0; font-size:13px; }
.material-sheet .bootstrap-select .bs-searchbox { padding:4px; }
.material-sheet .bootstrap-select .bs-searchbox .form-control { height:27px; min-height:27px; border-radius:0; }
.material-sheet .bootstrap-select .dropdown-item { padding:4px 8px; white-space:normal; }
.percent-input { display:flex; align-items:center; }
.percent-input input { flex:1; min-width:0; }
.percent-input span { padding-right:3px; font-weight:700; }
.status-badge { display:inline-block; border-radius:4px; padding:4px 8px; font-size:12px; font-weight:700; text-transform:capitalize; }
.status-draft { background:#eef1f4; color:#495057; }
.status-confirmed { background:#d9f2e6; color:#146c43; }
.status-locked { background:#fde2e2; color:#a61b1b; }
#costSheetBody a {    text-decoration: none;    color: #000000;}

.login-screen img {   margin: 0 auto;    display: block;}
.login-screen button {  background: #1a1c1d;    border: none;    text-transform: uppercase;}
.login-screen button:hover {  background: #1a1c1d;}
.log-body {    background: #646464;}
.form-control:focus {border-color: none; box-shadow: none;}
.login-screen a {   color: #1a1c1d;   text-decoration: none;}
.alert.alert-danger {   padding: 5px 10px !important;}
.del-btn img {    width: 34px;}
.cost2-table input {    font-weight: bolder;}

@media only screen and (max-width: 1480px) and (min-width: 1280px){
    .card-body .table {    font-size: 15px;}
    .card-body {    padding: 10px;}
    .table th {    white-space: nowrap;    font-weight: 500;}
    .del-btn img {    width: 26px;}
    
    
}

@media only screen and (max-width: 1490px) and (min-width: 1080px){
    .lkp-de {   display: flex;   align-items: center;     padding: 15px 0 !important;     gap: 5px;}
    
}

@media (max-width: 900px) {
  .sidebar { transform:translateX(-100%); transition:transform .2s ease; }
  .sidebar.open { transform:translateX(0); }
  .app-content { width:100%; margin-left:0; }
  .mobile-header { display:flex; }
}
@media print { .sidebar,.mobile-header,.no-print,.btn { display:none!important; } .app-content { width:100%; margin:0; } body { background:white; } main { padding:0!important; } .excel-sheet { border:0; padding:0; } }