body {

font-family: Arial, sans-serif;

margin:0;

background:#f2f4f7;

}


.header {

background:#0b3d91;

color:white;

padding:20px;

text-align:center;

}


.container {

padding:20px;

}


.card {

background:white;

padding:20px;

border-radius:10px;

margin-top:20px;

}


button {

background:#0b3d91;

color:white;

border:none;

padding:12px 20px;

border-radius:5px;

font-size:16px;

}

button:hover {

opacity:0.8;

}

input, select {


width:100%;

padding:10px;

font-size:16px;

box-sizing:border-box;


}

.asset-registration{
    max-width:1100px;
    margin:auto;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.step-indicator{
    font-weight:bold;
    padding:8px 14px;
    border-radius:6px;
}

.form-section{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid #ddd;
}

.form-section h4{
    margin-bottom:15px;
}

.section-note{
    margin-top:-5px;
    margin-bottom:15px;
    font-size:14px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

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

.full-width{
    grid-column:1 / -1;
}

.form-group label{
    margin-bottom:6px;
    font-weight:600;
}

.required{
    font-weight:bold;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    box-sizing:border-box;
    padding:10px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:14px;
}

.form-group textarea{
    resize:vertical;
}

.form-actions{
    display:flex;
    justify-content:space-between;
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #ddd;
}

.button-primary,
.button-secondary{
    padding:10px 20px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-weight:600;
}

@media(max-width:700px){

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

    .full-width{
        grid-column:auto;
    }

    .page-header{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

}

.technical-status{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 15px;

    margin-bottom:20px;

    border-radius:6px;

    border:1px solid #ddd;

    font-size:14px;

}


.technical-status strong{

    font-size:13px;

}


.technical-grid{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:18px;

}


.technical-input{

    display:flex;

    align-items:center;

}


.technical-input input{

    flex:1;

}


.technical-input span{

    padding:10px;

    min-width:45px;

    text-align:center;

    font-size:13px;

}


@media(max-width:700px){

    .technical-grid{

        grid-template-columns:1fr;

    }

}

.document-add-action{
    margin-top:15px;
}

.document-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:12px;

    margin-bottom:10px;

    border:1px solid #ddd;

    border-radius:6px;

}

.document-file{

    margin-top:4px;

    font-size:13px;

}

.remove-document{

    padding:7px 10px;

    border:1px solid #ccc;

    border-radius:5px;

    cursor:pointer;

}

.empty-document{

    padding:15px;

    border:1px dashed #ccc;

    border-radius:6px;

    text-align:center;

}

.home-controls{

    display:flex;

    gap:10px;

    margin-bottom:20px;

}


.home-controls select,
.home-controls input{

    padding:10px;

    border:1px solid #ccc;

    border-radius:6px;

}


.home-controls select{

    min-width:180px;

}


.home-controls input{

    flex:1;

}


.dashboard-summary{

    display:flex;

    gap:15px;

    margin:20px 0;

}


.kpi-card{

    flex:1;

    padding:15px;

    border:1px solid #ddd;

    border-radius:8px;

    text-align:center;

}


.kpi-card strong{

    display:block;

    font-size:24px;

    margin-top:5px;

}


.asset-table-header,
.asset-row{

    display:grid;

    grid-template-columns:
        180px 1fr 120px;

    gap:15px;

    align-items:center;

}


.asset-table-header{

    padding:12px;

    font-weight:bold;

    background:#f1f1f1;

    border-bottom:2px solid #ccc;

}


.asset-row{

    padding:14px 12px;

    border-bottom:1px solid #ddd;

    cursor:pointer;

}


.asset-row:hover{

    background:#f7f7f7;

}


.asset-id{

    font-weight:bold;

}


.asset-status{

    text-align:left;

}


.empty-state{

    padding:30px;

    text-align:center;

    color:#777;

}


@media(max-width:700px){

    .home-controls{

        flex-direction:column;

    }


    .asset-table-header{

        display:none;

    }


    .asset-row{

        display:grid;

        grid-template-columns:
            1fr auto;

        gap:4px;

        padding:14px 10px;

    }


    .asset-id{

        grid-column:1;

    }


    .asset-name{

        grid-column:1;

        font-size:14px;

    }


    .asset-status{

        grid-column:2;

        grid-row:1 / span 2;

        text-align:right;

    }


    .dashboard-summary{

        overflow-x:auto;

    }


    .kpi-card{

        min-width:120px;

    }

}

/* =========================
   S6 CMMS HOME PAGE
========================= */

.home-page{

    max-width:1100px;

    margin:0 auto;

    padding:20px;

}


.page-title{

    text-align:center;

    margin-bottom:5px;

}


.page-subtitle{

    text-align:center;

    margin-top:0;

    font-weight:normal;

}


.site-selector{

    display:flex;

    justify-content:center;

    margin:25px auto;

}


.site-selector label{

    display:block;

    margin-bottom:6px;

    font-weight:bold;

}


.site-selector select{

    width:320px;

    padding:11px 14px;

    border:1px solid #ccc;

    border-radius:6px;

    background:white;

    font-size:15px;

    text-align:center;

}


.section-title{

    text-align:center;

    margin-top:30px;

    margin-bottom:15px;

}


.summary-grid{

    display:grid;

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

    gap:15px;

}


.summary-card{

    padding:18px;

    text-align:center;

    border:1px solid #ddd;

    border-radius:8px;

    background:white;

}


.summary-card span{

    display:block;

    font-size:13px;

    font-weight:bold;

}


.summary-card strong{

    display:block;

    margin-top:8px;

    font-size:28px;

}


.add-asset-area{

    text-align:center;

    margin-bottom:15px;

}


.button-primary{

    padding:11px 18px;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-weight:bold;

}


.asset-search{

    margin-bottom:10px;

}


.asset-search input{

    width:100%;

    box-sizing:border-box;

    padding:12px;

    border:1px solid #bbb;

    border-radius:6px;

    font-size:15px;

}


.asset-table-header,
.asset-row{

    display:grid;

    grid-template-columns:
        190px 1fr 120px;

    gap:15px;

    align-items:center;

}


.asset-table-header{

    padding:12px;

    background:#f1f1f1;

    border-bottom:2px solid #ccc;

    font-weight:bold;

}


.asset-row{

    padding:13px 12px;

    border-bottom:1px solid #ddd;

}


.asset-link{

    border:none;

    background:none;

    padding:0;

    color:#0066cc;

    font-weight:bold;

    cursor:pointer;

    font-size:inherit;

}


.asset-link:hover{

    text-decoration:underline;

}


.empty-state{

    text-align:center;

    padding:30px;

    color:#777;

}


@media(max-width:700px){

    .home-page{

        padding:12px;

    }


    .summary-grid{

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

        gap:10px;

    }


    .summary-card{

        padding:14px 8px;

    }


    .summary-card strong{

        font-size:22px;

    }


    .asset-table-header{

        display:none;

    }


    .asset-row{

        grid-template-columns:
            1fr auto;

        gap:5px 10px;

        padding:14px 8px;

    }


    .asset-id{

        grid-column:1;

    }


    .asset-name{

        grid-column:1;

        font-size:14px;

    }


    .asset-status{

        grid-column:2;

        grid-row:1 / span 2;

        text-align:right;

    }


    .add-asset-area{

        text-align:left;

    }

}

/* =========================
   ASSET DETAIL
========================= */


/* Top action row */

.asset-detail-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

}


/* Back button */

.back-button{

    display:inline-block;

    padding:9px 14px;

    border:1px solid #999;

    border-radius:6px;

    background:#f5f5f5;

    color:#222;

    font-weight:bold;

    cursor:pointer;

}


.back-button:hover{

    background:#e5e5e5;

}


/* Print / PDF button */

.print-button{

    display:inline-block;

    padding:9px 14px;

    border:1px solid #999;

    border-radius:6px;

    background:#f5f5f5;

    color:#222;

    font-weight:bold;

    cursor:pointer;

}


.print-button:hover{

    background:#e5e5e5;

}


/* Asset heading */

.asset-detail-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:20px;

    border:1px solid #ddd;

    border-radius:8px;

    background:white;

}


.asset-detail-id{

    font-weight:bold;

    color:#0066cc;

}


.asset-detail-header h2{

    margin:6px 0;

}


.asset-status-badge{

    padding:8px 12px;

    border-radius:6px;

    background:#eee;

    color:#222;

    font-weight:bold;

}


/* Detail sections */

.detail-section{

    margin-top:20px;

    padding:20px;

    border:1px solid #ddd;

    border-radius:8px;

    background:white;

}


.detail-section h3{

    margin-top:0;

}


/* Asset information grid */

.detail-grid{

    display:grid;

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

    gap:18px;

}


.detail-grid span{

    display:block;

    font-size:12px;

    color:#777;

    margin-bottom:4px;

}


.detail-grid strong{

    display:block;

}


/* Technical data */

.technical-list{

    border-top:1px solid #ddd;

}


.technical-row{

    display:grid;

    grid-template-columns:
        1fr 1fr 100px;

    gap:15px;

    padding:10px 0;

    border-bottom:1px solid #eee;

}


/* Documents */

.document-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #eee;

}


.document-row a{

    font-weight:bold;

}


/* History */

.history-row{

    padding:12px 0;

    border-bottom:1px solid #eee;

}


.history-row span{

    margin-left:10px;

    color:#777;

}


/* =========================
   MOBILE
========================= */

@media(max-width:700px){

    .asset-detail-top{

        flex-direction:column;

        align-items:stretch;

    }


    .back-button,
    .print-button{

        width:100%;

        text-align:center;

    }


    .asset-detail-header{

        flex-direction:column;

        gap:15px;

    }


    .detail-grid{

        grid-template-columns:
            1fr 1fr;

    }


    .technical-row{

        grid-template-columns:
            1fr;

        gap:4px;

    }


    .document-row{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

}


/* =========================
   PRINT
========================= */

@media print{

    .back-button,
    .print-button{

        display:none !important;

    }


    body{

        background:white;

    }


    .detail-section,
    .asset-detail-header{

        break-inside:avoid;

    }

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}


.history-form{

    border-top:1px solid #ddd;

    padding-top:15px;

}


.form-group{

    margin-bottom:15px;

}


.form-group label{

    display:block;

    margin-bottom:5px;

    font-weight:bold;

}


.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    box-sizing:border-box;

    padding:9px;

    border:1px solid #bbb;

    border-radius:6px;

    font-family:inherit;

}


.history-form-actions{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:20px;

}


@media(max-width:700px){

    .section-header{

        flex-direction:column;

        align-items:stretch;

    }


    .history-form-actions{

        flex-direction:column;

    }


    .history-form-actions button{

        width:100%;

    }

}

.photo-upload-buttons{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}


.selected-photo-name{

    margin-top:8px;

    font-size:13px;

    color:#666;

}


@media(max-width:700px){

    .photo-upload-buttons{

        flex-direction:column;

    }


    .photo-upload-buttons button{

        width:100%;

    }

}

/* =========================
   SITE MASTER
========================= */

.site-master-actions{

    display:flex;

    justify-content:flex-start;

    margin-bottom:15px;

}


.site-table-header{

    display:grid;

    grid-template-columns:
        110px
        80px
        1.5fr
        110px
        140px
        1.5fr
        120px;

    gap:12px;

    align-items:center;

    padding:12px 14px;

    background:#f5f5f5;

    border:1px solid #ddd;

    border-bottom:none;

    border-radius:8px 8px 0 0;

    font-weight:bold;

}


.site-row{

    display:grid;

    grid-template-columns:
        110px
        80px
        1.5fr
        110px
        140px
        1.5fr
        120px;

    gap:12px;

    align-items:center;

    padding:14px;

    background:white;

    border:1px solid #ddd;

    border-top:none;

}


.site-row:hover{

    background:#fafafa;

}


.site-id-link{

    font-weight:bold;

    color:#0066cc;

    cursor:pointer;

}


.site-id-link:hover{

    text-decoration:underline;

}


.site-status-badge{

    display:inline-block;

    padding:5px 9px;

    border-radius:6px;

    background:#eee;

    font-size:13px;

    font-weight:bold;

}


@media(max-width:1000px){

    .site-table-header,
    .site-row{

        grid-template-columns:
            100px
            70px
            1.4fr
            90px
            120px
            1.4fr
            110px;

        gap:8px;

        font-size:13px;

    }

}


@media(max-width:750px){

    .site-table-header{

        display:none;

    }


    .site-row{

        display:block;

        padding:15px;

        margin-bottom:10px;

        border:1px solid #ddd;

        border-radius:8px;

    }


    .site-row > div{

        display:flex;

        justify-content:space-between;

        padding:6px 0;

        border-bottom:1px solid #eee;

    }


    .site-row > div:last-child{

        border-bottom:none;

    }


    .site-row > div:nth-child(1)::before{

        content:"Site ID";

        font-weight:bold;

    }


    .site-row > div:nth-child(2)::before{

        content:"Code";

        font-weight:bold;

    }


    .site-row > div:nth-child(3)::before{

        content:"Site Name";

        font-weight:bold;

    }


    .site-row > div:nth-child(4)::before{

        content:"Type";

        font-weight:bold;

    }


    .site-row > div:nth-child(5)::before{

        content:"District";

        font-weight:bold;

    }


    .site-row > div:nth-child(6)::before{

        content:"Treatment";

        font-weight:bold;

    }


    .site-row > div:nth-child(7)::before{

        content:"Status";

        font-weight:bold;

    }

}


/* =========================================================
   PROCESS AREA TABLE
========================================================= */

.process-area-table-header,
.process-area-row {

    display: grid;

    grid-template-columns:
        1.2fr
        1fr
        1.5fr
        1.3fr
        1fr
        1.2fr
        1.5fr
        0.9fr;

    gap: 12px;

    align-items: center;

}


/* HEADER */

.process-area-table-header {

    padding: 12px 14px;

    font-weight: 700;

    background: #f5f5f5;

    border-bottom: 2px solid #ddd;

}


/* ROW */

.process-area-row {

    padding: 14px;

    border-bottom: 1px solid #e5e5e5;

    background: #fff;

}


/* STATUS */

.process-area-row .site-status-badge {

    display: inline-block;

    white-space: nowrap;

}


/* BUTTON */

.process-area-row button {

    white-space: nowrap;

}


/* SMALLER SCREEN */

@media(max-width: 1200px){

    #siteProcessAreas {

        overflow-x: auto;

    }

    .process-area-table-header,
    .process-area-row {

        min-width: 1100px;

    }

}


/* =========================================================
   USER MANAGEMENT
========================================================= */

.user-table-header,
.user-table-row {

    display: grid;

    grid-template-columns:
        1fr
        2fr
        1fr
        1fr
        0.8fr
        1.5fr;

    gap: 12px;

    align-items: center;

}


.user-table-header {

    font-weight: 600;

    padding:
        12px 16px;

    border-bottom:
        2px solid #ddd;

}


.user-table-row {

    padding:
        14px 16px;

    border-bottom:
        1px solid #eee;

}


.user-table-row button {

    white-space:
        nowrap;

}

/* =========================
   LOGIN PAGE
========================= */

.login-page {

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:30px 20px;

    box-sizing:border-box;

}


/* LOGO */

.login-logo {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-bottom:25px;

}


.login-logo-mark {

    font-size:32px;

    font-weight:bold;

    color:#0b3d91;

}


.login-logo-text {

    font-size:32px;

    font-weight:bold;

    color:#222;

}


/* LOGIN CARD */

.login-card {

    width:100%;

    max-width:400px;

    background:white;

    padding:30px;

    border:1px solid #ddd;

    border-radius:10px;

    box-sizing:border-box;

    box-shadow:0 4px 15px rgba(0,0,0,0.08);

}


/* LOGIN HEADER */

.login-header {

    text-align:center;

    margin-bottom:25px;

}


.login-header h2 {

    margin:0;

    font-size:24px;

}


/* LOGIN FORM */

.login-form {

    width:100%;

}


.login-button {

    width:100%;

    margin-top:10px;

}


/* LOGIN ERROR */

.login-error {

    margin-top:12px;

    padding:10px;

    border-radius:6px;

    background:#f8d7da;

    color:#842029;

    font-size:14px;

}


/* FORGOT PASSWORD */

.forgot-password {

    text-align:center;

    margin-top:18px;

}


.link-button {

    background:none;

    border:none;

    padding:0;

    color:#0b3d91;

    font-size:14px;

    cursor:pointer;

}


.link-button:hover {

    opacity:1;

    text-decoration:underline;

}


/* MOBILE */

@media(max-width:700px) {

    .login-page {

        padding:20px 15px;

    }


    .login-card {

        padding:25px 20px;

    }


    .login-logo-mark,
    .login-logo-text {

        font-size:28px;

    }

}

.login-header {
    text-align:center;
    margin-bottom:25px;
}

.login-logo {
    width:180px;
    max-width:80%;
    height:auto;
    display:block;
    margin:0 auto 20px;
}

.login-header h2 {
    margin:0;
    font-size:20px;
    font-weight:600;
    line-height:1.4;
}

/* =========================
   HOME PAGE NAVIGATION
========================= */

.account-menu{

    display:flex;

    gap:8px;

    align-items:center;

}


.admin-actions{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

    padding:10px 0;

    border-bottom:1px solid #ddd;

}


.admin-actions span{

    font-size:13px;

    font-weight:bold;

    color:#666;

    margin-right:5px;

}


@media(max-width:700px){

    .account-menu{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }


    .account-menu button{

        width:100%;

    }


    .admin-actions{

        flex-wrap:wrap;

    }

}

/* =========================================================
   S6 CMMS — ASSET REGISTRY VISUAL CLEANUP
   CSS ONLY
========================================================= */

.home-page{
    max-width:1200px;
    margin:0 auto;
    padding:30px;
}


/* =========================================================
   HEADER
========================================================= */

.home-page .page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-bottom:25px;

    padding-bottom:20px;

    border-bottom:1px solid #e1e5ea;

}


.home-page .page-title{

    margin:0;

    text-align:left;

    font-size:28px;

    font-weight:600;

    color:#1f2937;

}


.user-info{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:7px;

    font-size:13px;

    color:#6b7280;

}


.user-info strong{

    color:#374151;

}


.user-info span{

    padding-left:10px;

    border-left:1px solid #d1d5db;

}


/* =========================================================
   ACCOUNT ACTIONS
========================================================= */

.account-menu{

    display:flex;

    align-items:center;

    gap:8px;

}


.account-menu button{

    padding:8px 13px;

    font-size:13px;

    font-weight:500;

    background:#fff;

    color:#374151;

    border:1px solid #d1d5db;

    border-radius:6px;

}


.account-menu button:hover{

    background:#f8fafc;

}


/* =========================================================
   ADMINISTRATION
========================================================= */

.admin-actions{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0 0 25px 0;

    padding:10px 14px;

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:7px;

}


.admin-actions span{

    margin-right:8px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:#6b7280;

}


.admin-actions button{

    padding:7px 12px;

    font-size:13px;

    font-weight:500;

    background:white;

    color:#374151;

    border:1px solid #d1d5db;

    border-radius:5px;

}


.admin-actions button:hover{

    background:#f3f4f6;

}


/* =========================================================
   SITE SELECTOR
========================================================= */

.site-selector{

    display:flex;

    justify-content:flex-start;

    margin:0 0 28px 0;

}


.site-selector select{

    width:300px;

    padding:11px 14px;

    border:1px solid #d1d5db;

    border-radius:7px;

    background:#fff;

    color:#374151;

    font-size:14px;

    text-align:left;

}


/* =========================================================
   SECTION TITLES
========================================================= */

.home-page .section-title{

    margin:0 0 14px 0;

    text-align:left;

    font-size:16px;

    font-weight:600;

    color:#374151;

}


/* =========================================================
   SUMMARY
========================================================= */

.summary-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:35px;

}


.summary-card{

    padding:20px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:8px;

    text-align:left;

}


.summary-card span{

    display:block;

    font-size:12px;

    font-weight:600;

    color:#6b7280;

    letter-spacing:.3px;

}


.summary-card strong{

    display:block;

    margin-top:8px;

    font-size:27px;

    font-weight:600;

    color:#1f2937;

}


/* =========================================================
   ADD ASSET
========================================================= */

.add-asset-area{

    display:flex;

    justify-content:flex-end;

    margin:-5px 0 12px 0;

}


.add-asset-area .button-primary{

    padding:10px 18px;

    background:#0b3d91;

    color:white;

    border-radius:6px;

    font-size:14px;

}


.add-asset-area .button-primary:hover{

    opacity:.9;

}


/* =========================================================
   SEARCH
========================================================= */

.asset-search{

    margin-bottom:10px;

}


.asset-search input{

    padding:11px 14px;

    background:white;

    border:1px solid #d1d5db;

    border-radius:6px;

    font-size:14px;

}


.asset-search input:focus{

    outline:none;

    border-color:#0b3d91;

    box-shadow:0 0 0 2px rgba(11,61,145,.08);

}


/* =========================================================
   ASSET TABLE
========================================================= */

.asset-table-header,
.asset-row{

    grid-template-columns:
        190px
        1fr
        120px;

}


.asset-table-header{

    padding:11px 14px;

    background:#f8fafc;

    color:#6b7280;

    border:1px solid #e5e7eb;

    border-bottom:none;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.3px;

}


.asset-row{

    padding:14px;

    background:white;

    border:1px solid #e5e7eb;

    border-top:none;

    color:#374151;

}


.asset-row:hover{

    background:#f8fafc;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .home-page{

        padding:18px 12px;

    }


    .home-page .page-header{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }


    .home-page .page-title{

        font-size:24px;

    }


    .user-info{

        flex-wrap:wrap;

        gap:7px;

    }


    .account-menu{

        justify-content:flex-start;

    }


    .admin-actions{

        flex-wrap:wrap;

    }


    .admin-actions span{

        width:100%;

        margin-bottom:3px;

    }


    .site-selector{

        width:100%;

    }


    .site-selector select{

        width:100%;

    }


    .summary-grid{

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

        gap:10px;

    }


    .summary-card{

        padding:15px;

    }


    .summary-card strong{

        font-size:22px;

    }


    .add-asset-area{

        justify-content:flex-start;

    }

}

/* =========================================================
   S6 CMMS — SITE MASTER STANDARD UI
   Align Site Master with Asset Registry visual structure
   CSS ONLY — NO FUNCTIONAL CHANGES
========================================================= */

.site-master {

    max-width:1200px;

    margin:0 auto;

    padding:30px;

    box-sizing:border-box;

}


/* =========================================================
   PAGE TOP
========================================================= */

.site-master > .asset-detail-top {

    display:flex;

    justify-content:flex-start;

    align-items:center;

    margin-bottom:20px;

}


.site-master .back-button {

    padding:8px 14px;

    background:#fff;

    color:#374151;

    border:1px solid #d1d5db;

    border-radius:6px;

    font-size:13px;

    font-weight:500;

}


.site-master .back-button:hover {

    background:#f8fafc;

}


/* =========================================================
   PAGE HEADER
========================================================= */

.site-master > .page-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

    padding-bottom:20px;

    border-bottom:1px solid #e1e5ea;

}


.site-master .page-header h2 {

    margin:0;

    font-size:28px;

    font-weight:600;

    color:#1f2937;

}


.site-master .page-header h3 {

    margin:5px 0 0;

    font-size:16px;

    font-weight:400;

    color:#6b7280;

}


/* =========================================================
   SITE MASTER REGISTER ACTION
========================================================= */

.site-master-actions {

    display:flex;

    justify-content:flex-end;

    margin:0 0 12px 0;

}


.site-master-actions .button-primary {

    padding:10px 18px;

    background:#0b3d91;

    color:white;

    border:none;

    border-radius:6px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

}


.site-master-actions .button-primary:hover {

    opacity:.9;

}


/* =========================================================
   SITE TABLE
========================================================= */

.site-master .site-table-header {

    display:grid;

    grid-template-columns:
        110px
        80px
        1.5fr
        110px
        120px
        1.5fr
        120px;

    gap:12px;

    align-items:center;

    padding:11px 14px;

    background:#f8fafc;

    color:#6b7280;

    border:1px solid #e5e7eb;

    border-bottom:none;

    border-radius:7px 7px 0 0;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.3px;

}


.site-master .site-row {

    display:grid;

    grid-template-columns:
        110px
        80px
        1.5fr
        110px
        120px
        1.5fr
        120px;

    gap:12px;

    align-items:center;

    padding:14px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-top:none;

    color:#374151;

    font-size:14px;

}


.site-master .site-row:hover {

    background:#f8fafc;

}


/* =========================================================
   SITE ID LINK
========================================================= */

.site-master .site-id-link {

    color:#0066cc;

    font-weight:600;

    cursor:pointer;

}


.site-master .site-id-link:hover {

    text-decoration:underline;

}


/* =========================================================
   STATUS
========================================================= */

.site-master .site-status-badge {

    display:inline-block;

    padding:5px 9px;

    border-radius:6px;

    background:#f1f3f5;

    color:#374151;

    font-size:12px;

    font-weight:600;

}


/* =========================================================
   SITE DETAIL HEADER
========================================================= */

.site-master .asset-detail-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:20px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:8px;

}


.site-master .asset-detail-id {

    color:#0066cc;

    font-size:13px;

    font-weight:600;

}


.site-master .asset-detail-header h2 {

    margin:6px 0;

    color:#1f2937;

    font-size:24px;

    font-weight:600;

}


.site-master .asset-detail-header p {

    margin:0;

    color:#6b7280;

    font-size:13px;

}


/* =========================================================
   DETAIL ACTIONS
========================================================= */

.site-detail-actions {

    display:flex;

    align-items:center;

    gap:10px;

}


.site-detail-actions .button-secondary {

    padding:9px 14px;

    background:#fff;

    color:#374151;

    border:1px solid #d1d5db;

    border-radius:6px;

    font-size:13px;

    font-weight:500;

    cursor:pointer;

}


.site-detail-actions .button-secondary:hover {

    background:#f8fafc;

}


/* =========================================================
   DETAIL SECTIONS
========================================================= */

.site-master .detail-section {

    margin-top:20px;

    padding:20px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:8px;

}


.site-master .detail-section h3 {

    margin:0 0 18px 0;

    color:#374151;

    font-size:16px;

    font-weight:600;

}


/* =========================================================
   DETAIL GRID
========================================================= */

.site-master .detail-grid {

    display:grid;

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

    gap:18px;

}


.site-master .detail-grid > div {

    min-width:0;

}


.site-master .detail-grid strong {

    display:block;

    margin-bottom:5px;

    color:#6b7280;

    font-size:12px;

    font-weight:600;

}


.site-master .detail-grid span {

    display:block;

    color:#1f2937;

    font-size:14px;

}


/* =========================================================
   SITE FORMS
========================================================= */

.site-master label {

    display:block;

    margin-bottom:6px;

    color:#374151;

    font-size:13px;

    font-weight:600;

}


.site-master input,
.site-master select,
.site-master textarea {

    width:100%;

    box-sizing:border-box;

    padding:10px 12px;

    border:1px solid #d1d5db;

    border-radius:6px;

    background:#fff;

    color:#374151;

    font-family:inherit;

    font-size:14px;

}


.site-master input:focus,
.site-master select:focus,
.site-master textarea:focus {

    outline:none;

    border-color:#0b3d91;

    box-shadow:
        0 0 0 2px rgba(11,61,145,.08);

}


.site-master input:disabled {

    background:#f3f4f6;

    color:#6b7280;

}


/* =========================================================
   FORM SECTION
========================================================= */

.site-master .form-section {

    margin-top:20px;

    padding:20px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:8px;

}


.site-master .form-section h4 {

    margin:0 0 20px 0;

    color:#374151;

    font-size:16px;

    font-weight:600;

}


/* =========================================================
   FORM ACTIONS
========================================================= */

.site-master .technical-form-actions {

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #e5e7eb;

}


.site-master .technical-form-actions button {

    padding:10px 18px;

    border-radius:6px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

}


.site-master .technical-form-actions .button-primary {

    background:#0b3d91;

    color:#fff;

    border:none;

}


.site-master .technical-form-actions .button-secondary {

    background:#fff;

    color:#374151;

    border:1px solid #d1d5db;

}


.site-master .technical-form-actions button:hover {

    opacity:.9;

}


/* =========================================================
   EMPTY / ERROR
========================================================= */

.site-master .empty-state {

    padding:35px;

    text-align:center;

    color:#6b7280;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:8px;

}


.site-master .error-message {

    padding:20px;

    background:#fff;

    border:1px solid #f0caca;

    border-radius:8px;

    color:#842029;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:750px){

    .site-master {

        padding:18px 12px;

    }


    .site-master > .page-header {

        flex-direction:column;

        align-items:flex-start;

        gap:5px;

    }


    .site-master .page-header h2 {

        font-size:24px;

    }


    .site-master-actions {

        justify-content:flex-start;

    }


    .site-master .site-table-header {

        display:none;

    }


    .site-master .site-row {

        display:block;

        padding:15px;

        margin-bottom:10px;

        border:1px solid #e5e7eb;

        border-radius:8px;

    }


    .site-master .site-row > div {

        display:flex;

        justify-content:space-between;

        gap:15px;

        padding:7px 0;

        border-bottom:1px solid #eee;

    }


    .site-master .site-row > div:last-child {

        border-bottom:none;

    }


    .site-master .site-row > div:nth-child(1)::before {

        content:"Site ID";

        font-weight:600;

    }


    .site-master .site-row > div:nth-child(2)::before {

        content:"Code";

        font-weight:600;

    }


    .site-master .site-row > div:nth-child(3)::before {

        content:"Site Name";

        font-weight:600;

    }


    .site-master .site-row > div:nth-child(4)::before {

        content:"Type";

        font-weight:600;

    }


    .site-master .site-row > div:nth-child(5)::before {

        content:"District";

        font-weight:600;

    }


    .site-master .site-row > div:nth-child(6)::before {

        content:"Treatment";

        font-weight:600;

    }


    .site-master .site-row > div:nth-child(7)::before {

        content:"Status";

        font-weight:600;

    }


    .site-master .detail-grid {

        grid-template-columns:1fr 1fr;

    }


    .site-master .asset-detail-header {

        flex-direction:column;

    }


    .site-detail-actions {

        width:100%;

        justify-content:space-between;

        flex-wrap:wrap;

    }

}


@media(max-width:500px){

    .site-master .detail-grid {

        grid-template-columns:1fr;

    }


    .site-master .technical-form-actions {

        flex-direction:column;

    }


    .site-master .technical-form-actions button {

        width:100%;

    }

}

/* =========================================================
   TECHNICAL DATA EDIT FORM
========================================================= */

.technical-edit-form{
    margin-top:20px;
}

.technical-form-header{
    margin-bottom:20px;
}

.technical-form-header h3{
    margin:0 0 8px 0;
}

.technical-standard-section{
    margin-top:15px;
}

.technical-edit-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.technical-edit-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:center;
    padding:14px 16px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:7px;
}

.technical-parameter{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.technical-parameter label{
    font-weight:600;
    color:#374151;
}

.technical-parameter span{
    font-size:12px;
    color:#6b7280;
}

.technical-value input{
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:6px;
    font-size:14px;
}

.technical-value input:focus{
    outline:none;
    border-color:#0b3d91;
    box-shadow:0 0 0 2px rgba(11,61,145,.08);
}

.technical-edit-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #ddd;
}


/* MOBILE */

@media(max-width:700px){

    .technical-edit-row{
        grid-template-columns:1fr;
        gap:8px;
        padding:13px;
    }

    .technical-edit-actions{
        flex-direction:column;
    }

    .technical-edit-actions button{
        width:100%;
    }

}

/* =========================================================
   ASSET HISTORY TABLE
========================================================= */

.history-table-wrapper{

    width:100%;

    overflow-x:auto;

    margin-top:15px;

}


.history-table-header,
.history-table-row{

    display:grid;

    grid-template-columns:
        100px
        130px
        1.5fr
        1.5fr
        1.5fr
        130px
        90px
        110px
        75px;

    gap:12px;

    align-items:start;

    min-width:1200px;

}


/* HEADER */

.history-table-header{

    padding:12px 14px;

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-bottom:2px solid #d1d5db;

    font-size:12px;

    font-weight:700;

    color:#6b7280;

    text-transform:uppercase;

    letter-spacing:.3px;

}


/* ROW */

.history-table-row{

    padding:14px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-top:none;

    font-size:13px;

    color:#374151;

}


.history-table-row:hover{

    background:#f8fafc;

}


/* DATE */

.history-date{

    font-weight:600;

    white-space:nowrap;

}


/* EVENT */

.history-event{

    font-weight:600;

}


/* TEXT FIELDS */

.history-description,
.history-finding,
.history-action{

    line-height:1.5;

    word-break:break-word;

}


/* PERFORMED BY */

.history-performed{

    word-break:break-word;

}


/* COST */

.history-cost{

    text-align:right;

    white-space:nowrap;

}


/* STATUS */

.history-status{

    white-space:nowrap;

}


/* ACTION */

.history-actions{

    display:flex;

    justify-content:flex-start;

}


.history-actions button{

    padding:7px 10px;

    font-size:12px;

}


/* =========================================================
   MOBILE / SMALL SCREEN
========================================================= */

@media(max-width:1200px){

    .history-table-wrapper{

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

}