:root{
    --header-height:84px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI;
}

body{
    background:#f4f6f8;
}

.app-container{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* HEADER */

.app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:84px;
    background:#163b63;
    display:flex;
    align-items:center;
    z-index:9999;
    padding:0 20px;
    box-sizing:border-box;
}

.logo{

    height:60px;
    width:auto;
    display:block;
    background:#ffffff;
    padding:4px;
    border-radius:6px;
}

.company-name{

    margin-left:18px;
    font-size:34px;
    font-weight:700;
    color:#ffffff;
    letter-spacing:0.3px;
}



/* MENU TOGGLE */

.menu-toggle{

    margin-left:auto;
    background:none;
    border:none;
    font-size:28px;
    color:#ffffff;
    cursor:pointer;
    display:none;
}


/* MAIN */

.main-layout{
    display:flex;
    flex:1;
    overflow:hidden;
}

.main-wrapper{
    display:flex;
    margin-top:var(--header-height);
    min-height:calc(100vh - var(--header-height));
}

/* SIDEBAR */

.sidebar{
    width:280px;
    background:#ffffff;
    border-right:1px solid #dbe2ea;
    overflow-y:auto;
    position:fixed;
    top:var(--header-height);
    bottom:30px;
    left:0;
    z-index:2000;
}

.sidebar a{

    display:block;

    padding:10px 12px;

    text-decoration:none;

    color:#163b63;

    border-radius:6px;

    margin-bottom:4px;

    margin-left:12px;

    font-size:15px;
}

.sidebar a:hover{
    background:#edf2f7;
}

.sidebar-backdrop{
    display:none;
}

/* CONTENT */

.content-area{
    position:relative;
    flex:1;
    margin-left:280px;
    margin-top:var(--header-height);
    margin-bottom:30px;
    padding:30px;
    width:calc(100% - 280px);
    min-height:calc(100vh - var(--header-height) - 30px);
    overflow-x:auto;
    overflow-y:auto;
    box-sizing:border-box;
    z-index:1;
}

.page-content{
    background:white;

    border-radius:10px;

    padding:25px;

    flex:1;

    overflow-y:auto;

}

/* CONTENT SCROLLBAR */

.content-area::-webkit-scrollbar,
.page-content::-webkit-scrollbar{

    width:8px;
}

.content-area::-webkit-scrollbar-thumb,
.page-content::-webkit-scrollbar-thumb{

    background:#b8c2cc;

    border-radius:10px;
}

/* FOOTER */

.app-footer{

    height:30px;
    background:#163b63;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:100;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media screen and (max-width: 992px){

    .company-name{
        font-size:18px;
    }

    .sidebar{
        width:220px;
    }

}

/* TABLETS */

@media screen and (max-width: 768px){

    .content-area{

        margin-left:0;

        width:100%;

        margin-top:0;

        margin-bottom:50px;

        min-height:auto;

        padding:15px;
    }

    .app-header{
        position:relative;
        flex-direction:column;
        justify-content:center;
        height:auto;
        padding:15px;
        text-align:center;
    }

    .company-name{
        margin-left:0;
        margin-top:10px;
        font-size:18px;
    }

    .phase-tabs{
        overflow-x:auto;
        white-space:nowrap;
    }

    .phase-tab{
        padding:15px 18px;
        font-size:14px;
    }

    .main-layout{
        position:relative;
    }

    .sidebar{

        position:fixed;
        top:0;
        left:-260px;
        width:250px;
        height:100vh;
        height:100dvh;
        padding-top:var(--header-height);
        background:#ffffff;
        z-index:999;
        transition:0.3s ease;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        touch-action:pan-y;
        border-right:1px solid #d9e1e8;
    }
    .sidebar.sidebar-open{

        left:0;
    }

    .sidebar-backdrop{
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.4);
        z-index:998;
        opacity:0;
        pointer-events:none;
        transition:opacity 0.3s ease;
    }

    .sidebar-backdrop.sidebar-backdrop-visible{
        opacity:1;
        pointer-events:auto;
    }

    .sidebar a{

        display:block;
        margin-right:0;
        white-space:normal;
    }

    .content-area{
        padding:15px;
    }

    .menu-toggle{

        display:block;
    }

}

/* MOBILE */

@media screen and (max-width: 480px){

    .content-area{

        margin-left:0;

        width:100%;
    }

    .app-header{

        min-height:100px;
    }

    .logo{
        height:38px;
    }

    .company-name{
        font-size:16px;
        line-height:1.4;
    }

    .phase-tab{
        padding:12px 15px;
        font-size:13px;
    }

    .sidebar{
        padding-left:12px;
        padding-right:12px;
        padding-bottom:12px;
    }

    .sidebar a{
        display:block;
        margin-right:0;
    }

    .content-area{
        padding:10px;
        overflow:auto;
        min-height:300px;
    }

    .page-content{
        padding:15px;
        border-radius:6px;
    }

    .app-footer{
        font-size:11px;
        text-align:center;
        padding:10px;
        height:auto;
    }
    .menu-toggle{

        display:block;
    }

}

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

.login-body{
    margin:0;
    min-height:100vh;
    background:linear-gradient(135deg,#163b63,#0d2238);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}

.login-page-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:100%;
    max-width:450px;
    background:#ffffff;
    border-radius:18px;
    padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

.login-logo-section{
    text-align:center;
    margin-bottom:30px;
}

.login-logo{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:15px;
}

.login-logo-section h1{
    font-size:28px;
    line-height:1.3;
    color:#163b63;
    margin-bottom:10px;
}

.login-logo-section p{
    color:#64748b;
    font-size:15px;
}

.login-alert{
    background:#fee2e2;
    color:#b91c1c;
    padding:14px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-group label{
    margin-bottom:8px;
    font-weight:600;
    color:#163b63;
}

.form-group input{
    height:48px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:0 14px;
    font-size:15px;
    outline:none;
    transition:0.3s ease;
}

.form-group input:focus{
    border-color:#163b63;
    box-shadow:0 0 0 3px rgba(22,59,99,0.15);
}

.login-btn{
    height:50px;
    border:none;
    border-radius:10px;
    background:#163b63;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s ease;
}

.login-btn:hover{
    transform:translateY(-2px);
    background:#0f2b48;
}

.header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:20px;
}

.logged-user{
    color:#ffffff;
    font-size:16px;
    font-weight:600;
}

.sidebar-module{
    font-size:14px;
    font-weight:700;
    color:#163b63;
    padding:10px 15px 5px;
}

.user-section{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.logout-btn{
    border:none;
    background:#ffffff;
    color:#163b63;
    padding:4px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}

.logout-btn:hover{
    background:#dbeafe;
}

/* =========================================
   SIDEBAR COLLAPSE
========================================= */

.sidebar-phase{

    border-bottom:1px solid #e5e7eb;
}

.sidebar-title{

    width:100%;

    border:none;

    background:none;

    text-align:left;

    padding:14px 16px;

    font-size:16px;

    font-weight:700;

    color:#163b63;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;
}

.sidebar-title:hover{

    background:#eff6ff;
}

.phase-arrow{

    font-size:12px;
}

.sidebar-phase-content{

    padding-left:8px;
}

.sidebar-module-title{

    width:100%;

    border:none;

    background:none;

    text-align:left;

    padding:10px 14px;

    font-size:15px;

    font-weight:700;

    color:#163b63;

    cursor:pointer;
}

.sidebar-module-title:hover{

    background:#edf2f7;
}

.sidebar-module-links{

    margin-left:10px;
}

.sidebar-module-links a{

    display:block;

    padding:10px 35px;

    color:#334155;

    text-decoration:none;

    font-size:14px;
}

.sidebar-module-links a:hover{

    background:#f1f5f9;
}

.menu-hidden{

    display:none;
}






/* =========================================
   CONTENT AREA
========================================= */


.content-card{

    background:#ffffff;

    padding:30px;

    border-radius:10px;

    max-width:600px;
}

.form-container{

    margin-top:20px;
}

.form-group{
    display:flex;

    flex-direction:column;
    margin-bottom:20px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

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

    width:100%;

    padding:12px;

    border:1px solid #cbd5e1;

    border-radius:6px;

    background:#ffffff;

    font-size:15px;
}

.primary-btn{

    background:#163b63;

    color:#ffffff;

    border:none;

    padding:12px 20px;

    border-radius:6px;

    cursor:pointer;
}

.primary-btn:hover{

    background:#0f2d4b;
}

.alert{

    padding:14px;

    border-radius:6px;

    margin-bottom:20px;
}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;
}

.alert-success{

    background:#dcfce7;

    color:#166534;
}

/* =========================================================
   MODERN PERMISSION UI
========================================================= */

.permission-page-header{

    margin-bottom:25px;
}

.permission-layout{

    display:flex;
    flex-direction:column;
    gap:25px;
}

.phase-block{

    margin-top:10px;
}

.phase-title{

    color:#163b63;
    font-size:24px;
    margin-bottom:15px;
    border-bottom:2px solid #dbeafe;
    padding-bottom:10px;
}

.module-title{

    font-size:18px;
    font-weight:700;
    color:#334155;
    margin-bottom:10px;
}

.permission-card{

    background:#ffffff;
    border:1px solid #dbe2ea;
    border-radius:10px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.permission-card-header{

    font-size:16px;
    font-weight:700;
    color:#163b63;
}

.permission-options{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.permission-options label{

    display:flex;
    align-items:center;
    gap:8px;
    background:#f8fafc;
    padding:10px 14px;
    border-radius:8px;
    cursor:pointer;
}

.permission-options input{

    width:18px;
    height:18px;
}

.role-selection-card{

    background:#ffffff;
    padding:20px;
    border-radius:10px;
    margin-bottom:25px;
}

/* MOBILE */

@media screen and (max-width:768px){

    .content-area{

        margin-left:0;

        width:100%;
    }

    .permission-options{

        flex-direction:column;
        gap:10px;
    }

    .permission-options label{

        width:100%;
    }

    .phase-title{

        font-size:20px;
    }

}

/* =========================================================
   STAFF MANAGEMENT
========================================================= */

.staff-page{

    max-width:1200px;

    margin:0 auto;
}

.staff-title{

    font-size:32px;

    font-weight:700;

    color: #1a1a1a;

    margin-bottom:25px;
}

.staff-section {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* Action section needs overflow:visible so the material
   search results panel can drop below the section boundary.
   overflow:hidden on .staff-section clips position:absolute
   children regardless of z-index. */
#actionSection {
    overflow: visible;
}

/* Searchable material dropdown panel */
.mat-search-results-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mat-search-results-panel:empty {
    display: none;
}

.mat-search-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.mat-search-item:hover {
    background: #eff6ff;
}

.mat-search-item:last-child {
    border-bottom: none;
}

.mat-search-item .mat-code {
    color: #64748b;
    font-size: 12px;
    margin-right: 6px;
}

.mat-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.mat-search-input:focus {
    border-color: #163b63;
    box-shadow: 0 0 0 3px rgba(22,59,99,0.12);
}

.staff-section-header,
.card-header {
    background: #ffffff;
    color: #1a1a1a;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.2px;
}

.staff-section-body,
.card-body {
    padding: 20px 18px;
}

.staff-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:20px;
}

.staff-form-group{

    display:flex;

    flex-direction:column;
}

.staff-form-group label{

    font-weight:600;

    color:#334155;

    margin-bottom:6px;
}

.staff-section table th{

    text-align:left !important;

    font-weight:600;

    color:#334155;

    padding-bottom:8px;

    vertical-align:bottom;
}

.staff-section table{

    width:100%;

    border-collapse:separate;

    border-spacing:0 10px;
}

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

    width:100%;

    padding:12px;

    border:1px solid #cbd5e1;

    border-radius:8px;

    font-size:14px;
}

.staff-form-group textarea{

    resize:vertical;

    min-height:120px;
}

.staff-radio-group{

    display:flex;

    gap:25px;

    flex-wrap:wrap;
}

.staff-radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;
}

.kyc-box{

    border:1px dashed #cbd5e1;

    padding:15px;

    border-radius:8px;

    margin-bottom:15px;
}

.help-text{

    font-size:12px;

    color:#64748b;

    margin-top:5px;
}

.staff-save-btn{

    background:#163b63;

    color:#ffffff;

    border:none;

    padding:14px 25px;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;
}

.staff-save-btn:hover{

    background:#0f2d4b;
}

/* =========================================================
   STAFF MANAGEMENT - mobile responsiveness
========================================================= */

@media screen and (max-width:768px){

    .staff-title{

        font-size:24px;
    }

    .staff-grid{

        grid-template-columns:1fr;
    }

    .staff-section-header{

        font-size:16px;
    }

    .staff-radio-group{

        flex-direction:column;

        gap:10px;
    }

}

/* =========================================================
   Master setup - Master data library
========================================================= */

.mdl-card{
    border:1px solid #cbd5e1;
    border-radius:8px;
    padding:16px;
    cursor:default;
    background:#ffffff;
}
.mdl-card-main{ cursor:pointer; }
.mdl-card-title{
    font-weight:700;
    font-size:16px;
    margin-bottom:6px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.mdl-badge{
    font-size:11px;
    font-weight:600;
    color:#163b63;
    background:#eff6ff;
    padding:3px 8px;
    border-radius:12px;
}
.mdl-card-purpose{ color:#334155; font-size:14px; margin-bottom:4px; }
.mdl-card-example{ color:#64748b; font-size:12px; margin-bottom:6px; }
.mdl-card-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.mdl-close-btn{
    background:#e2e8f0;
    color:#334155;
    border:none;
    padding:12px 16px;
    border-radius:6px;
    cursor:pointer;
}
.mdl-close-btn:hover{ background:#cbd5e1; }
.mdl-accordion-header{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.mdl-accordion-body.mdl-collapsed{ display:none; }
.mdl-card.mdl-hidden{ display:none; }
.mdl-accordion.mdl-hidden{ display:none; }

@media screen and (max-width:768px){
    .mdl-card-actions{ flex-direction:column; }
    .mdl-card-actions button{ width:100%; }
}

/* ============================================================
   PROJECT DETAILS - breadcrumb + child tabs
   (paste this block into style.css - do not create a separate
   CSS file for it, per project convention)
   ============================================================ */

.ppd-breadcrumb{
    display:block;
    font-size:13px;
    line-height:20px;
    min-height:20px;
    color:#163b63;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 2px 10px 2px;
    margin-bottom:14px;
    border-bottom:1px solid #e2e8f0;
}
.ppd-crumb{
    display:inline-block;
    cursor:pointer;
}
.ppd-crumb:hover{
    text-decoration:underline;
}
.ppd-crumb-sep{
    margin:0 6px;
    color:#94a3b8;
}
.ppd-tab{
    padding:8px 16px;
    font-size:13px;
    cursor:pointer;
    color:#64748b;
    border-bottom:2px solid transparent;
}
.ppd-tab-active{
    color:#163b63;
    font-weight:600;
    border-bottom-color:#163b63;
}

@media screen and (max-width:768px){
    .ppd-breadcrumb{
        font-size:12px;
    }
}

/* =========================================================
   VENDOR PAGE - wide data tables (Address / Contact /
   Sister Concerns / Material Details) must scroll
   horizontally on small screens instead of being clipped by
   .staff-section's overflow:hidden. Applies to any
   .staff-section table site-wide - a general fix, not just
   the Vendor page.
========================================================= */

.staff-section-body{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.staff-section table{
    min-width:640px;
}

@media screen and (max-width:768px){
    .staff-section table{
        min-width:720px;
    }
}

/* =========================================================
   VENDOR PAGE - Vendor Type checkboxes, styled to match the
   rest of the theme (brand navy #163b63, pill/chip look
   consistent with .mdl-badge) instead of bare browser
   checkboxes with no spacing.
========================================================= */

.vendor-type-checkbox-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    margin:0 8px 10px 0;
    border:1px solid #cbd5e1;
    border-radius:20px;
    background:#f8fafc;
    font-size:14px;
    font-weight:500;
    color:#334155;
    cursor:pointer;
    transition:border-color 0.2s, background 0.2s, color 0.2s;
}

.vendor-type-checkbox-label:hover{
    border-color:#163b63;
    background:#eff6ff;
}

.vendor-type-checkbox-label input.vendor-type-cb{
    width:16px;
    height:16px;
    accent-color:#163b63;
    cursor:pointer;
    margin:0;
}

/* Highlight the whole chip when its checkbox is checked */
.vendor-type-checkbox-label:has(input.vendor-type-cb:checked){
    border-color:#163b63;
    background:#163b63;
    color:#ffffff;
}

.invalid-feedback{
    color:#dc2626;
    font-size:13px;
    margin-top:6px;
}

@media screen and (max-width:768px){
    .vendor-type-checkbox-label{
        width:100%;
        margin-right:0;
    }
}

/* =========================================================
   Responsive Tables for Mobile - vendor page
========================================================= */

@media screen and (max-width:768px){

    .ven-responsive-table{

        width:100%;

        border:0;
    }

    .ven-responsive-table thead{

        display:none;
    }

    .ven-responsive-table,
    .ven-responsive-table tbody,
    .ven-responsive-table tr,
    .ven-responsive-table td{

        display:block;

        width:100%;
    }

    .ven-responsive-table tr{

        border:1px solid #dbe2ea;

        border-radius:8px;

        background:#ffffff;

        padding:15px;

        margin-bottom:18px;
    }

    .ven-responsive-table td{

        display:flex;

        flex-direction:column;

        border:none;

        padding:8px 0;
    }

    .ven-responsive-table td::before{

        content:attr(data-label);

        font-weight:600;

        color:#334155;

        margin-bottom:6px;
    }

    .ven-responsive-table td input,
    .ven-responsive-table td select,
    .ven-responsive-table td textarea,
    .ven-responsive-table td button{

        width:100%;
    }

    .ven-responsive-table td:last-child{

        padding-top:15px;
    }

}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI;
}

body{
    background:#f4f6f8;
}

.app-container{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* HEADER */

.app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:84px;
    background:#163b63;
    display:flex;
    align-items:center;
    z-index:9999;
    padding:0 20px;
    box-sizing:border-box;
}

.logo{

    height:60px;
    width:auto;
    display:block;
    background:#ffffff;
    padding:4px;
    border-radius:6px;
}

.company-name{

    margin-left:18px;
    font-size:34px;
    font-weight:700;
    color:#ffffff;
    letter-spacing:0.3px;
}



/* MENU TOGGLE */

.menu-toggle{

    margin-left:auto;
    background:none;
    border:none;
    font-size:28px;
    color:#ffffff;
    cursor:pointer;
    display:none;
}


/* MAIN */

.main-layout{
    display:flex;
    flex:1;
    overflow:hidden;
}

.main-wrapper{
    display:flex;
    margin-top:var(--header-height);
    min-height:calc(100vh - var(--header-height));
}

/* SIDEBAR */

.sidebar{
    width:280px;
    background:#ffffff;
    border-right:1px solid #dbe2ea;
    overflow-y:auto;
    position:fixed;
    top:var(--header-height);
    bottom:30px;
    left:0;
    z-index:2000;
}

.sidebar a{

    display:block;

    padding:10px 12px;

    text-decoration:none;

    color:#163b63;

    border-radius:6px;

    margin-bottom:4px;

    margin-left:12px;

    font-size:15px;
}

.sidebar a:hover{
    background:#edf2f7;
}

/* CONTENT */

.content-area{
    position:relative;
    flex:1;
    margin-left:280px;
    margin-top:var(--header-height);
    margin-bottom:30px;
    padding:30px;
    width:calc(100% - 280px);
    min-height:calc(100vh - var(--header-height) - 30px);
    overflow-x:auto;
    overflow-y:auto;
    box-sizing:border-box;
    z-index:1;
}

.page-content{
    background:white;

    border-radius:10px;

    padding:25px;

    flex:1;

    overflow-y:auto;

}

/* CONTENT SCROLLBAR */

.content-area::-webkit-scrollbar,
.page-content::-webkit-scrollbar{

    width:8px;
}

.content-area::-webkit-scrollbar-thumb,
.page-content::-webkit-scrollbar-thumb{

    background:#b8c2cc;

    border-radius:10px;
}

/* FOOTER */

.app-footer{

    height:30px;
    background:#163b63;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:100;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media screen and (max-width: 992px){

    .company-name{
        font-size:18px;
    }

    .sidebar{
        width:220px;
    }

}

/* TABLETS */

@media screen and (max-width: 768px){

    .content-area{

        margin-left:0;

        width:100%;

        margin-top:0;

        margin-bottom:50px;

        min-height:auto;

        padding:15px;
    }

    .app-header{
        position:relative;
        flex-direction:column;
        justify-content:center;
        height:auto;
        padding:15px;
        text-align:center;
    }

    .company-name{
        margin-left:0;
        margin-top:10px;
        font-size:18px;
    }

    .phase-tabs{
        overflow-x:auto;
        white-space:nowrap;
    }

    .phase-tab{
        padding:15px 18px;
        font-size:14px;
    }

    .main-layout{
        position:relative;
    }

    .sidebar{

        position:fixed;
        top:0;
        left:-260px;
        width:250px;
        height:100vh;
        height:100dvh;
        padding-top:var(--header-height);
        background:#ffffff;
        z-index:999;
        transition:0.3s ease;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        touch-action:pan-y;
        border-right:1px solid #d9e1e8;
    }
    .sidebar.sidebar-open{

        left:0;
    }

    .sidebar-backdrop{
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.4);
        z-index:998;
        opacity:0;
        pointer-events:none;
        transition:opacity 0.3s ease;
    }

    .sidebar-backdrop.sidebar-backdrop-visible{
        opacity:1;
        pointer-events:auto;
    }

    .sidebar a{

        display:block;
        margin-right:0;
        white-space:normal;
    }

    .content-area{
        padding:15px;
    }

    .menu-toggle{

        display:block;
    }

}

/* MOBILE */

@media screen and (max-width: 480px){

    .content-area{

        margin-left:0;

        width:100%;
    }

    .app-header{

        min-height:100px;
    }

    .logo{
        height:38px;
    }

    .company-name{
        font-size:16px;
        line-height:1.4;
    }

    .phase-tab{
        padding:12px 15px;
        font-size:13px;
    }

    .sidebar{
        padding-left:12px;
        padding-right:12px;
        padding-bottom:12px;
    }

    .sidebar a{
        display:block;
        margin-right:0;
    }

    .content-area{
        padding:10px;
        overflow:auto;
        min-height:300px;
    }

    .page-content{
        padding:15px;
        border-radius:6px;
    }

    .app-footer{
        font-size:11px;
        text-align:center;
        padding:10px;
        height:auto;
    }
    .menu-toggle{

        display:block;
    }

}

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

.login-body{
    margin:0;
    min-height:100vh;
    background:linear-gradient(135deg,#163b63,#0d2238);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}

.login-page-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:100%;
    max-width:450px;
    background:#ffffff;
    border-radius:18px;
    padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

.login-logo-section{
    text-align:center;
    margin-bottom:30px;
}

.login-logo{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:15px;
}

.login-logo-section h1{
    font-size:28px;
    line-height:1.3;
    color:#163b63;
    margin-bottom:10px;
}

.login-logo-section p{
    color:#64748b;
    font-size:15px;
}

.login-alert{
    background:#fee2e2;
    color:#b91c1c;
    padding:14px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-group label{
    margin-bottom:8px;
    font-weight:600;
    color:#163b63;
}

.form-group input{
    height:48px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:0 14px;
    font-size:15px;
    outline:none;
    transition:0.3s ease;
}

.form-group input:focus{
    border-color:#163b63;
    box-shadow:0 0 0 3px rgba(22,59,99,0.15);
}

.login-btn{
    height:50px;
    border:none;
    border-radius:10px;
    background:#163b63;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s ease;
}

.login-btn:hover{
    transform:translateY(-2px);
    background:#0f2b48;
}

.header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:20px;
}

.logged-user{
    color:#ffffff;
    font-size:16px;
    font-weight:600;
}

.sidebar-module{
    font-size:14px;
    font-weight:700;
    color:#163b63;
    padding:10px 15px 5px;
}

.user-section{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.logout-btn{
    border:none;
    background:#ffffff;
    color:#163b63;
    padding:4px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}

.logout-btn:hover{
    background:#dbeafe;
}

/* =========================================
   SIDEBAR COLLAPSE
========================================= */

.sidebar-phase{

    border-bottom:1px solid #e5e7eb;
}

.sidebar-title{

    width:100%;

    border:none;

    background:none;

    text-align:left;

    padding:14px 16px;

    font-size:16px;

    font-weight:700;

    color:#163b63;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;
}

.sidebar-title:hover{

    background:#eff6ff;
}

.phase-arrow{

    font-size:12px;
}

.sidebar-phase-content{

    padding-left:8px;
}

.sidebar-module-title{

    width:100%;

    border:none;

    background:none;

    text-align:left;

    padding:10px 14px;

    font-size:15px;

    font-weight:700;

    color:#163b63;

    cursor:pointer;
}

.sidebar-module-title:hover{

    background:#edf2f7;
}

.sidebar-module-links{

    margin-left:10px;
}

.sidebar-module-links a{

    display:block;

    padding:10px 35px;

    color:#334155;

    text-decoration:none;

    font-size:14px;
}

.sidebar-module-links a:hover{

    background:#f1f5f9;
}

.menu-hidden{

    display:none;
}






/* =========================================
   CONTENT AREA
========================================= */


.content-card{

    background:#ffffff;

    padding:30px;

    border-radius:10px;

    max-width:600px;
}

.form-container{

    margin-top:20px;
}

.form-group{
    display:flex;

    flex-direction:column;
    margin-bottom:20px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

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

    width:100%;

    padding:12px;

    border:1px solid #cbd5e1;

    border-radius:6px;

    background:#ffffff;

    font-size:15px;
}

.primary-btn{

    background:#163b63;

    color:#ffffff;

    border:none;

    padding:12px 20px;

    border-radius:6px;

    cursor:pointer;
}

.primary-btn:hover{

    background:#0f2d4b;
}

.alert{

    padding:14px;

    border-radius:6px;

    margin-bottom:20px;
}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;
}

.alert-success{

    background:#dcfce7;

    color:#166534;
}

/* =========================================================
   MODERN PERMISSION UI
========================================================= */

.permission-page-header{

    margin-bottom:25px;
}

.permission-layout{

    display:flex;
    flex-direction:column;
    gap:25px;
}

.phase-block{

    margin-top:10px;
}

.phase-title{

    color:#163b63;
    font-size:24px;
    margin-bottom:15px;
    border-bottom:2px solid #dbeafe;
    padding-bottom:10px;
}

.module-title{

    font-size:18px;
    font-weight:700;
    color:#334155;
    margin-bottom:10px;
}

.permission-card{

    background:#ffffff;
    border:1px solid #dbe2ea;
    border-radius:10px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.permission-card-header{

    font-size:16px;
    font-weight:700;
    color:#163b63;
}

.permission-options{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.permission-options label{

    display:flex;
    align-items:center;
    gap:8px;
    background:#f8fafc;
    padding:10px 14px;
    border-radius:8px;
    cursor:pointer;
}

.permission-options input{

    width:18px;
    height:18px;
}

.role-selection-card{

    background:#ffffff;
    padding:20px;
    border-radius:10px;
    margin-bottom:25px;
}

/* MOBILE */

@media screen and (max-width:768px){

    .content-area{

        margin-left:0;

        width:100%;
    }

    .permission-options{

        flex-direction:column;
        gap:10px;
    }

    .permission-options label{

        width:100%;
    }

    .phase-title{

        font-size:20px;
    }

}

/* =========================================================
   STAFF MANAGEMENT
========================================================= */

.staff-page{

    max-width:1200px;

    margin:0 auto;
}

.staff-title{

    font-size:32px;

    font-weight:700;

    color: #1a1a1a;

    margin-bottom:25px;
}

.staff-section {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* Action section needs overflow:visible so the material
   search results panel can drop below the section boundary.
   overflow:hidden on .staff-section clips position:absolute
   children regardless of z-index. */
#actionSection {
    overflow: visible;
}

/* Searchable material dropdown panel */
.mat-search-results-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mat-search-results-panel:empty {
    display: none;
}

.mat-search-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.mat-search-item:hover {
    background: #eff6ff;
}

.mat-search-item:last-child {
    border-bottom: none;
}

.mat-search-item .mat-code {
    color: #64748b;
    font-size: 12px;
    margin-right: 6px;
}

.mat-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.mat-search-input:focus {
    border-color: #163b63;
    box-shadow: 0 0 0 3px rgba(22,59,99,0.12);
}

.staff-section-header,
.card-header {
    background: #ffffff;
    color: #1a1a1a;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.2px;
}

.staff-section-body,
.card-body {
    padding: 20px 18px;
}

.staff-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:20px;
}

.staff-form-group{

    display:flex;

    flex-direction:column;
}

.staff-form-group label{

    font-weight:600;

    color:#334155;

    margin-bottom:6px;
}

.staff-section table th{

    text-align:left !important;

    font-weight:600;

    color:#334155;

    padding-bottom:8px;

    vertical-align:bottom;
}

.staff-section table{

    width:100%;

    border-collapse:separate;

    border-spacing:0 10px;
}

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

    width:100%;

    padding:12px;

    border:1px solid #cbd5e1;

    border-radius:8px;

    font-size:14px;
}

.staff-form-group textarea{

    resize:vertical;

    min-height:120px;
}

.staff-radio-group{

    display:flex;

    gap:25px;

    flex-wrap:wrap;
}

.staff-radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;
}

.kyc-box{

    border:1px dashed #cbd5e1;

    padding:15px;

    border-radius:8px;

    margin-bottom:15px;
}

.help-text{

    font-size:12px;

    color:#64748b;

    margin-top:5px;
}

.staff-save-btn{

    background:#163b63;

    color:#ffffff;

    border:none;

    padding:14px 25px;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;
}

.staff-save-btn:hover{

    background:#0f2d4b;
}

/* =========================================================
   STAFF MANAGEMENT - mobile responsiveness
========================================================= */

@media screen and (max-width:768px){

    .staff-title{

        font-size:24px;
    }

    .staff-grid{

        grid-template-columns:1fr;
    }

    .staff-section-header{

        font-size:16px;
    }

    .staff-radio-group{

        flex-direction:column;

        gap:10px;
    }

}

/* =========================================================
   Master setup - Master data library
========================================================= */

.mdl-card{
    border:1px solid #cbd5e1;
    border-radius:8px;
    padding:16px;
    cursor:default;
    background:#ffffff;
}
.mdl-card-main{ cursor:pointer; }
.mdl-card-title{
    font-weight:700;
    font-size:16px;
    margin-bottom:6px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.mdl-badge{
    font-size:11px;
    font-weight:600;
    color:#163b63;
    background:#eff6ff;
    padding:3px 8px;
    border-radius:12px;
}
.mdl-card-purpose{ color:#334155; font-size:14px; margin-bottom:4px; }
.mdl-card-example{ color:#64748b; font-size:12px; margin-bottom:6px; }
.mdl-card-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.mdl-close-btn{
    background:#e2e8f0;
    color:#334155;
    border:none;
    padding:12px 16px;
    border-radius:6px;
    cursor:pointer;
}
.mdl-close-btn:hover{ background:#cbd5e1; }
.mdl-accordion-header{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.mdl-accordion-body.mdl-collapsed{ display:none; }
.mdl-card.mdl-hidden{ display:none; }
.mdl-accordion.mdl-hidden{ display:none; }

@media screen and (max-width:768px){
    .mdl-card-actions{ flex-direction:column; }
    .mdl-card-actions button{ width:100%; }
}

/* ============================================================
   PROJECT DETAILS - breadcrumb + child tabs
   (paste this block into style.css - do not create a separate
   CSS file for it, per project convention)
   ============================================================ */

.ppd-breadcrumb{
    display:block;
    font-size:13px;
    line-height:20px;
    min-height:20px;
    color:#163b63;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 2px 10px 2px;
    margin-bottom:14px;
    border-bottom:1px solid #e2e8f0;
}
.ppd-crumb{
    display:inline-block;
    cursor:pointer;
}
.ppd-crumb:hover{
    text-decoration:underline;
}
.ppd-crumb-sep{
    margin:0 6px;
    color:#94a3b8;
}
.ppd-tab{
    padding:8px 16px;
    font-size:13px;
    cursor:pointer;
    color:#64748b;
    border-bottom:2px solid transparent;
}
.ppd-tab-active{
    color:#163b63;
    font-weight:600;
    border-bottom-color:#163b63;
}

@media screen and (max-width:768px){
    .ppd-breadcrumb{
        font-size:12px;
    }
}

/* =========================================================
   VENDOR PAGE - wide data tables (Address / Contact /
   Sister Concerns / Material Details) must scroll
   horizontally on small screens instead of being clipped by
   .staff-section's overflow:hidden. Applies to any
   .staff-section table site-wide - a general fix, not just
   the Vendor page.
========================================================= */

.staff-section-body{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.staff-section table{
    min-width:640px;
}

@media screen and (max-width:768px){
    .staff-section table{
        min-width:720px;
    }
}

/* =========================================================
   VENDOR PAGE - Vendor Type checkboxes, styled to match the
   rest of the theme (brand navy #163b63, pill/chip look
   consistent with .mdl-badge) instead of bare browser
   checkboxes with no spacing.
========================================================= */

.vendor-type-checkbox-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    margin:0 8px 10px 0;
    border:1px solid #cbd5e1;
    border-radius:20px;
    background:#f8fafc;
    font-size:14px;
    font-weight:500;
    color:#334155;
    cursor:pointer;
    transition:border-color 0.2s, background 0.2s, color 0.2s;
}

.vendor-type-checkbox-label:hover{
    border-color:#163b63;
    background:#eff6ff;
}

.vendor-type-checkbox-label input.vendor-type-cb{
    width:16px;
    height:16px;
    accent-color:#163b63;
    cursor:pointer;
    margin:0;
}

/* Highlight the whole chip when its checkbox is checked */
.vendor-type-checkbox-label:has(input.vendor-type-cb:checked){
    border-color:#163b63;
    background:#163b63;
    color:#ffffff;
}

.invalid-feedback{
    color:#dc2626;
    font-size:13px;
    margin-top:6px;
}

@media screen and (max-width:768px){
    .vendor-type-checkbox-label{
        width:100%;
        margin-right:0;
    }
}

/* =========================================================
   Responsive Tables for Mobile - vendor page
========================================================= */

@media screen and (max-width:768px){

    .ven-responsive-table{

        width:100%;

        border:0;
    }

    .ven-responsive-table thead{

        display:none;
    }

    .ven-responsive-table,
    .ven-responsive-table tbody,
    .ven-responsive-table tr,
    .ven-responsive-table td{

        display:block;

        width:100%;
    }

    .ven-responsive-table tr{

        border:1px solid #dbe2ea;

        border-radius:8px;

        background:#ffffff;

        padding:15px;

        margin-bottom:18px;
    }

    .ven-responsive-table td{

        display:flex;

        flex-direction:column;

        border:none;

        padding:8px 0;
    }

    .ven-responsive-table td::before{

        content:attr(data-label);

        font-weight:600;

        color:#334155;

        margin-bottom:6px;
    }

    .ven-responsive-table td input,
    .ven-responsive-table td select,
    .ven-responsive-table td textarea,
    .ven-responsive-table td button{

        width:100%;
    }

    .ven-responsive-table td:last-child{

        padding-top:15px;
    }

}

/* =====================================================================
   PROJECT EXECUTION PLANNER + SHORTAGE CALENDAR
   (shared buttons/forms/tables used by both pages)
===================================================================== */

.btn{
    display:inline-block;
    padding:10px 18px;
    border-radius:8px;
    border:1px solid transparent;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}
.btn-primary{
    background:#163b63;
    color:#ffffff;
}
.btn-primary:hover{ background:#0f2c4c; }
.btn-primary:disabled{ background:#94a3b8; cursor:not-allowed; }

.btn-secondary{
    background:#ffffff;
    color:#163b63;
    border-color:#163b63;
}
.btn-secondary:hover{ background:#eff6ff; }

.btn-danger-outline{
    background:#ffffff;
    color:#b91c1c;
    border-color:#fca5a5;
    padding:6px 12px;
    font-size:13px;
}
.btn-danger-outline:hover{ background:#fef2f2; }
.btn-danger-outline:disabled{ color:#94a3b8; border-color:#e2e8f0; cursor:not-allowed; }

/* Generic master-data form (Add New / Edit Existing pages) */
.mode-switch{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
    flex-wrap:wrap;
}
.mode-switch label{
    font-weight:600;
    color:#1e293b;
    cursor:pointer;
}
.master-form{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:20px;
    margin-bottom:24px;
    max-width:640px;
}
.form-row{
    margin-bottom:14px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.form-row label{
    font-weight:600;
    font-size:13px;
    color:#334155;
}
.form-row input,
.form-row select{
    padding:10px 12px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    font-size:14px;
}
.form-row input:focus,
.form-row select:focus{
    outline:none;
    border-color:#163b63;
    box-shadow:0 0 0 3px rgba(22,59,99,0.12);
}
.section-title{
    font-size:18px;
    font-weight:700;
    color:#163b63;
    margin:24px 0 12px;
}

.data-table{
    width:100%;
    border-collapse:collapse;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:8px;
    overflow:hidden;
}
.data-table th{
    background:#f1f5f9;
    text-align:left;
    padding:10px 12px;
    font-size:13px;
    color:#334155;
    border-bottom:1px solid #e2e8f0;
}
.data-table td{
    padding:10px 12px;
    font-size:14px;
    border-bottom:1px solid #f1f5f9;
    color:#1e293b;
}
.data-table tbody tr:hover{ background:#f8fafc; }

.alert-warning{
    background:#fffbeb;
    border:1px solid #fcd34d;
    color:#92400e;
    padding:10px 14px;
    border-radius:8px;
    margin-bottom:10px;
    font-size:14px;
}

/* ---------------------------------------------------------------
   Project Execution Planner specific layout

   NOTE: .staff-section is already defined site-wide with
   overflow:hidden (see earlier in this file), which clips any
   position:absolute dropdown panel inside it - the same issue the
   codebase already worked around once for #actionSection. These two
   sections hold the project/version/activity search dropdowns, so
   they need the same override.
--------------------------------------------------------------- */
#schedProjectVersionSection,
#schedAddActivitySection{
    overflow:visible;
}
.staff-section .card-header{
    background:#f8fafc;
    border-radius:10px 10px 0 0;
}

.sched-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:18px;
}
.sched-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:220px;
    position:relative;
}
.sched-field label{
    font-size:13px;
    font-weight:600;
    color:#334155;
}
.sched-actions{
    display:flex;
    gap:10px;
    align-items:center;
}

.view-toggle{
    display:inline-flex;
    border:1px solid #cbd5e1;
    border-radius:8px;
    overflow:hidden;
}
.view-btn{
    padding:9px 16px;
    background:#ffffff;
    border:none;
    border-right:1px solid #cbd5e1;
    cursor:pointer;
    font-size:13px;
    color:#334155;
}
.view-btn:last-child{ border-right:none; }
.view-btn.active{
    background:#163b63;
    color:#ffffff;
}

.sched-gantt-table th,
.sched-gantt-table td{ white-space:nowrap; }
.sched-gantt-table .crew-input,
.sched-gantt-table .machine-input{
    width:64px;
    padding:6px 8px;
    border:1px solid #cbd5e1;
    border-radius:6px;
}
.sched-activity-name{
    cursor:pointer;
    color:#163b63;
    font-weight:600;
    white-space:normal !important;
    min-width:220px;
}
.sched-activity-name:hover{ text-decoration:underline; }

.sched-row-critical{ background:#fff1f2; }
.sched-row-scope{ background:#f0fdf4; }

.sched-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    margin-left:6px;
}
.sched-badge-critical{ background:#fecaca; color:#7f1d1d; }
.sched-badge-scope{ background:#bbf7d0; color:#14532d; }

.sched-detail-panel{
    position:fixed;
    top:0;
    right:0;
    width:380px;
    max-width:90vw;
    height:100vh;
    background:#ffffff;
    border-left:1px solid #e2e8f0;
    box-shadow:-4px 0 16px rgba(0,0,0,0.08);
    padding:24px;
    overflow-y:auto;
    z-index:10000;
}
.sched-detail-panel h3{ color:#163b63; margin-bottom:12px; }
.sched-detail-panel p{ margin-bottom:10px; font-size:14px; color:#334155; }
.sched-detail-panel ul{ margin-left:18px; font-size:14px; color:#334155; }

.sched-modal-overlay{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(15,23,42,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10001;
}
.sched-modal{
    background:#ffffff;
    border-radius:10px;
    width:460px;
    max-width:92vw;
    max-height:85vh;
    overflow-y:auto;
}
.sched-modal-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
}
.sched-radio-label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    color:#1e293b;
    cursor:pointer;
}
.sched-scope-row{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-bottom:10px;
}
.sched-scope-row .scopeActivityQty{
    width:120px;
    padding:10px 12px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    font-size:14px;
}

@media (max-width: 768px){
    .sched-toolbar{ flex-direction:column; align-items:stretch; }
    .sched-field{ min-width:0; }
    .sched-detail-panel{ width:100%; }
}

/* =====================================================================
   SHORTAGE CALENDAR - line box (mode + year), separated from the rest
   of the page controls per spec
===================================================================== */
.cal-line-box{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:28px;
    background:#f8fafc;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:14px 18px;
    margin-bottom:20px;
}
.cal-line-group{
    display:flex;
    align-items:center;
    gap:10px;
}
.cal-line-label{
    font-weight:700;
    font-size:13px;
    color:#163b63;
    text-transform:uppercase;
    letter-spacing:0.3px;
}
.cal-line-group input[type="number"]{
    width:110px;
    padding:8px 10px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    font-size:14px;
}
.cal-line-group input[type="number"]:focus{
    outline:none;
    border-color:#163b63;
    box-shadow:0 0 0 3px rgba(22,59,99,0.12);
}

#calAddSection{
    transition:opacity .15s ease;
}

 
/* =====================================================================
   PROJECT SCHEDULE - drag-and-drop reordering handle
===================================================================== */
.sched-drag-handle{
    cursor: grab;
    text-align: center;
    color: #94a3b8;
    width: 28px;
    user-select: none;
}
.sched-drag-handle:active{ cursor: grabbing; }
 
tr[draggable="true"]{
    transition: background-color .1s ease;
}
tr.sched-dragging{
    opacity: 0.4;
    background: #eff6ff;
}


/* =====================================================================
   PROJECT SCHEDULE - wide dropdowns for long schedule/details-version
   names (fixes "dropdown not fully visible" - the field/panel were too
   narrow for names like "Narpavi Residence - V1 Schedule v1")
===================================================================== */
.sched-wide-input{
    width: 420px;
    max-width: 100%;
}
.sched-wide-panel{
    min-width: 420px;
    max-width: 640px;
}
.sched-wide-panel .mat-search-item{
    white-space: normal;
    word-break: break-word;
}
 
/* =====================================================================
   PROJECT SCHEDULE - stepper control for crew/machine count, replacing
   a bare number box with an explicit -/+ control
===================================================================== */
.sched-stepper{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sched-stepper-btn{
    width: 26px;
    height: 26px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    color: #163b63;
    line-height: 1;
}
.sched-stepper-btn:hover{ background:#eff6ff; }
.sched-stepper input.crew-input,
.sched-stepper input.machine-input{
    width: 48px;
    text-align: center;
    padding: 4px 2px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
/* Hide the native up/down spinner since our own -/+ buttons replace it */
.sched-stepper input[type="number"]::-webkit-inner-spin-button,
.sched-stepper input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.sched-stepper input[type="number"]{
    -moz-appearance: textfield;
    appearance: textfield;
}

.ps-newly-synced { border-left: 4px solid #16a34a !important; background: #f0fdf4 !important; }
.ps-new-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 700;
    color: #fff; background: #16a34a; border-radius: 3px; vertical-align: middle;
}
/* ====================================================================
   Appended from Quick Ledger (ported pages: Purchases, Petty Cash,
   Vouchers, Voucher Sign, DB Backup). Not deduped against the rules
   above -- purely additive, per the porting brief.
   ==================================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI;
}

:root{
    /* Overridden by JS (see layout/master.php) to the header's actual
       measured height — this default only matters for the brief instant
       before that JS runs, or if it's somehow unavailable. Desktop's
       header height never changes (84px, fixed), but on mobile the
       header switches to height:auto and stacks its contents (logo,
       title, the account dropdown when shown, name, logout, hamburger)
       vertically — its real height varies by device, font rendering,
       and even by which account (if any) is selected, so no single
       hardcoded pixel value can ever reliably match it. A confirmed,
       reported bug: hardcoded guesses here (60px for the sidebar, 120px
       for the content area) were shorter than the header's real
       rendered height on the reporter's phone, so the fixed header
       visually covered the top of both the sidebar and the page content
       — exactly "the menu isn't fully visible" / "the page title is
       missing". Measuring the real height in JS and feeding it back
       here fixes this regardless of device or content differences.
    */
    --header-height:84px;
}

body{
    background:#f4f6f8;
}

.app-container{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* HEADER */

.app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:84px;
    background:#163b63;
    display:flex;
    align-items:center;
    z-index:9999;
    padding:0 20px;
    box-sizing:border-box;
}

.logo{

    height:60px;
    width:auto;
    display:block;
    background:#ffffff;
    padding:4px;
    border-radius:6px;
}

.company-name{

    margin-left:18px;
    font-size:34px;
    font-weight:700;
    color:#ffffff;
    letter-spacing:0.3px;
}



/* MENU TOGGLE */

.menu-toggle{

    margin-left:auto;
    background:none;
    border:none;
    font-size:28px;
    color:#ffffff;
    cursor:pointer;
    display:none;
}


/* MAIN */

.main-layout{
    display:flex;
    flex:1;
    overflow:hidden;
}

.main-wrapper{
    display:flex;
    margin-top:var(--header-height);
    min-height:calc(100vh - var(--header-height));
}

/* SIDEBAR */

.sidebar{
    width:280px;
    background:#ffffff;
    border-right:1px solid #dbe2ea;
    overflow-y:auto;
    position:fixed;
    top:var(--header-height);
    bottom:30px;
    left:0;
    z-index:2000;
}

.sidebar a{

    display:block;

    padding:10px 12px;

    text-decoration:none;

    color:#163b63;

    border-radius:6px;

    margin-bottom:4px;

    margin-left:12px;

    font-size:15px;
}

.sidebar a:hover{
    background:#edf2f7;
}

.sidebar-backdrop{
    display:none;
}

/* CONTENT */

.content-area{
    position:relative;
    flex:1;
    margin-left:280px;
    margin-top:var(--header-height);
    margin-bottom:30px;
    padding:30px;
    width:calc(100% - 280px);
    min-height:calc(100vh - var(--header-height) - 30px);
    overflow-x:auto;
    overflow-y:auto;
    box-sizing:border-box;
    z-index:1;
}

.page-content{
    background:white;

    border-radius:10px;

    padding:25px;

    flex:1;

    overflow-y:auto;

}

/* CONTENT SCROLLBAR */

.content-area::-webkit-scrollbar,
.page-content::-webkit-scrollbar{

    width:8px;
}

.content-area::-webkit-scrollbar-thumb,
.page-content::-webkit-scrollbar-thumb{

    background:#b8c2cc;

    border-radius:10px;
}

/* FOOTER */

.app-footer{

    height:30px;
    background:#163b63;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:100;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media screen and (max-width: 992px){

    .company-name{
        font-size:18px;
    }

    .sidebar{
        width:220px;
    }

    .fixed-action-bar{
        left:220px;
    }

}

/* TABLETS */

@media screen and (max-width: 768px){

    .content-area{

        margin-left:0;

        width:100%;

        /* Explicitly zeroed, not just omitted — a real, confirmed bug:
           leaving this property out entirely does NOT mean "no
           margin", it means the desktop rule above (margin-top:var(
           --header-height)) keeps cascading through unless something
           more specific overrides it. Since --header-height is
           JS-measured from the real (often tall, stacked) mobile
           header, that leftover margin was adding the header's full
           height as EXTRA blank space on top of the space it already
           naturally takes up in normal document flow — pushing the
           page's own title (and everything else) down by double the
           header's height, sometimes clean off the visible screen.
           Confirmed directly by rendering this exact CSS in a real
           browser at a phone-sized viewport before and after this fix. */
        margin-top:0;

        margin-bottom:50px;

        min-height:auto;

        padding:15px;
    }

    /* Confirmed root cause of "menu not fully visible" / "page title
       missing" on real phones: the header is position:fixed on
       desktop, but on mobile it wraps into several stacked rows (logo,
       title, the account dropdown when shown, name, logout, hamburger)
       and its real height becomes unpredictable — no fixed pixel value
       (and, it turned out, not even a JS-measured one, since a SEPARATE
       rule at the 480px breakpoint kept re-enabling position:fixed
       independently) could reliably keep the sidebar and content
       positioned below it. Taking the header OUT of position:fixed on
       mobile removes the entire problem at its root: it just flows
       normally at the top of the page like any other element, and
       everything below it follows automatically, at any height, on any
       device, with no compensation logic needed anywhere. */
    .app-header{
        position:relative;
        flex-direction:column;
        justify-content:center;
        height:auto;
        padding:15px;
        text-align:center;
    }

    .company-name{
        margin-left:0;
        margin-top:10px;
        font-size:18px;
    }

    .phase-tabs{
        overflow-x:auto;
        white-space:nowrap;
    }

    .phase-tab{
        padding:15px 18px;
        font-size:14px;
    }

    .main-layout{
        position:relative;
    }

    .sidebar{

        /* top:0 + height:100dvh (with a 100vh fallback), pushing the
           actual content down with padding-top instead of trying to
           offset the box's own position/height by subtracting the
           header's height — a real, confirmed bug in the previous
           approach: calc(100vh - var(--header-height)) compounds two
           separate sources of inaccuracy into one number. 100vh on iOS
           Safari specifically does NOT reliably match the actual
           visible viewport (it's calculated as if the browser's address
           bar/toolbar were fully collapsed, which they usually aren't),
           so the box ended up shorter than the real screen regardless
           of how accurately --header-height was measured — reported
           directly: "the sidebar is shorter... last few items are not
           accessible". 100dvh (dynamic viewport height) is the
           standard, purpose-built fix for exactly this — it tracks the
           browser's ACTUAL current visible viewport, toolbars included,
           and updates live as they show/hide. Unsupported browsers
           simply ignore the second (dvh) declaration and keep the vh
           fallback above it. Padding-top (not a top offset) means the
           padding is itself part of the scrollable area — content
           starts visually below the header, but the box's own bottom
           edge is always the guaranteed-real bottom of the screen, so
           there's no separate height calculation left to get wrong.
        */
        position:fixed;
        top:0;
        left:-260px;
        width:250px;
        height:100vh;
        height:100dvh;
        padding-top:var(--header-height);
        background:#ffffff;
        /* Raised from 999 to 3000 — a real, confirmed bug: on mobile
           .fixed-action-bar (Clear/+Add Row/Save) spans the full screen
           width (left:0) and has z-index:2500, which used to sit ABOVE
           this sidebar drawer (999) whenever both were on screen at
           once, covering the bottom portion of the open drawer with the
           button bar. On desktop this never showed up because the
           action bar's left:280px already keeps it clear of the
           sidebar's own horizontal space entirely — it's specifically
           the mobile drawer-overlay behavior that needs to win here.
        */
        z-index:3000;
        transition:0.3s ease;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        /* Confirmed by the reporter's own description ("while scrolling,
           the background screen scrolls instead of the sidebar menu")
           — a well-known iOS Safari behavior called scroll chaining:
           once a nested scrollable element (this sidebar) reaches its
           own scroll boundary, the browser can pass the REMAINING
           scroll gesture through to whatever's behind it, scrolling the
           background page instead. overscroll-behavior:contain tells
           the browser to stop the scroll right at this element's edge
           instead of handing it off. Paired with locking the body's own
           scroll entirely while the drawer is open (see toggleSidebar()
           in master.php) as a second, more forceful layer of the same
           fix — there's then nothing behind the sidebar left to scroll
           at all while it's open. */
        overscroll-behavior:contain;
        touch-action:pan-y;
        border-right:1px solid #d9e1e8;
    }
    .sidebar.sidebar-open{

        left:0;
    }

    .sidebar-backdrop{
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.4);
        /* Raised from 998 to 2900 to match the sidebar's own new
           z-index:3000 above — stays just below the drawer, but now
           also above .fixed-action-bar (2500), so the button bar
           correctly dims along with the rest of the page while the
           drawer is open, instead of poking through on top of it. */
        z-index:2900;
        opacity:0;
        pointer-events:none;
        transition:opacity 0.3s ease;
    }

    .sidebar-backdrop.sidebar-backdrop-visible{
        opacity:1;
        pointer-events:auto;
    }

    .sidebar a{

        display:block;
        margin-right:0;
        white-space:normal;
    }

    .content-area{
        padding:15px;
    }

    .menu-toggle{

        display:block;
    }

}

/* MOBILE */

@media screen and (max-width: 480px){

    .content-area{

        margin-left:0;

        width:100%;
    }

    .app-header{
        /* A real, confirmed additional bug on top of the earlier fix:
           this OVERRODE the header back to position:fixed at this
           narrower breakpoint — which covers virtually every actual
           phone screen (~390-430px wide), not just "small tablets".
           So even after fixing the 768px breakpoint's hardcoded offset,
           real phones hit THIS rule instead and were right back to a
           floating header with nothing correctly compensating for its
           height. Removed entirely — the 768px breakpoint below already
           makes the header flow normally (not fixed) on every mobile
           size, which is the actual, robust fix: with the header back
           in the normal document flow, there's nothing to compensate
           for at all, at any screen width.
        */

        min-height:100px;
    }

    .logo{
        height:38px;
    }

    .company-name{
        font-size:16px;
        line-height:1.4;
    }

    .phase-tab{
        padding:12px 15px;
        font-size:13px;
    }

    .sidebar{
        /* padding-left/right/bottom only, NOT the shorthand — the 768px
           breakpoint sets padding-top:var(--header-height) specifically
           to push the sidebar's content down below the header (see
           that rule's comment); the plain "padding" shorthand here
           would silently reset that back to 12px, right back to the
           same "items hidden behind the header" bug that padding-top
           was added to fix in the first place. */
        padding-left:12px;
        padding-right:12px;
        padding-bottom:12px;
    }

    .sidebar a{
        display:block;
        margin-right:0;
    }

    .content-area{
        padding:10px;
        overflow:auto;
        min-height:300px;
    }

    .page-content{
        padding:15px;
        border-radius:6px;
    }

    .app-footer{
        font-size:11px;
        text-align:center;
        padding:0 10px;
        height:30px;
    }
    .menu-toggle{

        display:block;
    }

}

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

.login-body{
    margin:0;
    min-height:100vh;
    background:linear-gradient(135deg,#163b63,#0d2238);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}

.login-page-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:100%;
    max-width:450px;
    background:#ffffff;
    border-radius:18px;
    padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

.login-logo-section{
    text-align:center;
    margin-bottom:30px;
}

.login-logo{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:15px;
}

.login-logo-section h1{
    font-size:28px;
    line-height:1.3;
    color:#163b63;
    margin-bottom:10px;
}

.login-logo-section p{
    color:#64748b;
    font-size:15px;
}

.login-alert{
    background:#fee2e2;
    color:#b91c1c;
    padding:14px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-group label{
    margin-bottom:8px;
    font-weight:600;
    color:#163b63;
}

.form-group input{
    height:48px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:0 14px;
    font-size:15px;
    outline:none;
    transition:0.3s ease;
}

.form-group input:focus{
    border-color:#163b63;
    box-shadow:0 0 0 3px rgba(22,59,99,0.15);
}

.login-btn{
    height:50px;
    border:none;
    border-radius:10px;
    background:#163b63;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s ease;
}

.login-btn:hover{
    transform:translateY(-2px);
    background:#0f2b48;
}

.header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:20px;
}

.logged-user{
    color:#ffffff;
    font-size:16px;
    font-weight:600;
}

.sidebar-module{
    font-size:14px;
    font-weight:700;
    color:#163b63;
    padding:10px 15px 5px;
}

.user-section{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.logout-btn{
    border:none;
    background:#ffffff;
    color:#163b63;
    padding:4px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}

.logout-btn:hover{
    background:#dbeafe;
}

/* =========================================
   SIDEBAR COLLAPSE
========================================= */

.sidebar-phase{

    border-bottom:1px solid #e5e7eb;
}

.sidebar-title{

    width:100%;

    border:none;

    background:none;

    text-align:left;

    padding:14px 16px;

    font-size:16px;

    font-weight:700;

    color:#163b63;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;
}

.sidebar-title:hover{

    background:#eff6ff;
}

.phase-arrow{

    font-size:12px;
}

.sidebar-phase-content{

    padding-left:8px;
}

.sidebar-module-title{

    width:100%;

    border:none;

    background:none;

    text-align:left;

    padding:10px 14px;

    font-size:15px;

    font-weight:700;

    color:#163b63;

    cursor:pointer;
}

.sidebar-module-title:hover{

    background:#edf2f7;
}

.sidebar-module-links{

    margin-left:10px;
}

.sidebar-module-links a{

    display:block;

    padding:10px 35px;

    color:#334155;

    text-decoration:none;

    font-size:14px;
}

.sidebar-module-links a:hover{

    background:#f1f5f9;
}

.menu-hidden{

    display:none;
}






/* =========================================
   CONTENT AREA
========================================= */


.content-card{

    background:#ffffff;

    padding:30px;

    border-radius:10px;

    max-width:600px;
}

.form-container{

    margin-top:20px;
}

.form-group{
    display:flex;

    flex-direction:column;
    margin-bottom:20px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

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

    width:100%;

    padding:12px;

    border:1px solid #cbd5e1;

    border-radius:6px;

    background:#ffffff;

    font-size:15px;
}

.primary-btn{

    background:#163b63;

    color:#ffffff;

    border:none;

    padding:12px 20px;

    border-radius:6px;

    cursor:pointer;
}

.primary-btn:hover{

    background:#0f2d4b;
}

.alert{

    padding:14px;

    border-radius:6px;

    margin-bottom:20px;
}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;
}

.alert-success{

    background:#dcfce7;

    color:#166534;
}

/* =========================================================
   MODERN PERMISSION UI
========================================================= */

.permission-page-header{

    margin-bottom:25px;
}

.permission-layout{

    display:flex;
    flex-direction:column;
    gap:25px;
}

.phase-block{

    margin-top:10px;
}

.phase-title{

    color:#163b63;
    font-size:24px;
    margin-bottom:15px;
    border-bottom:2px solid #dbeafe;
    padding-bottom:10px;
}

.module-title{

    font-size:18px;
    font-weight:700;
    color:#334155;
    margin-bottom:10px;
}

.permission-card{

    background:#ffffff;
    border:1px solid #dbe2ea;
    border-radius:10px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.permission-card-header{

    font-size:16px;
    font-weight:700;
    color:#163b63;
}

.permission-options{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.permission-options label{

    display:flex;
    align-items:center;
    gap:8px;
    background:#f8fafc;
    padding:10px 14px;
    border-radius:8px;
    cursor:pointer;
}

.permission-options input{

    width:18px;
    height:18px;
}

.role-selection-card{

    background:#ffffff;
    padding:20px;
    border-radius:10px;
    margin-bottom:25px;
}

/* MOBILE */

@media screen and (max-width:768px){

    .content-area{

        margin-left:0;

        width:100%;
    }

    .permission-options{

        flex-direction:column;
        gap:10px;
    }

    .permission-options label{

        width:100%;
    }

    .phase-title{

        font-size:20px;
    }

}

/* =========================================================
   STAFF MANAGEMENT
========================================================= */

.staff-page{

    max-width:1200px;

    margin:0 auto;
}

.staff-title{

    font-size:32px;

    font-weight:700;

    color: 1a1a1a;

    margin-bottom:25px;
}

.staff-section {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* Action section needs overflow:visible so the material
   search results panel can drop below the section boundary.
   overflow:hidden on .staff-section clips position:absolute
   children regardless of z-index. */
#actionSection {
    overflow: visible;
}

/* Searchable material dropdown panel — position:fixed (not absolute) is
   deliberate: it's appended straight to <body> and given JS-computed
   coordinates so it always escapes any scrollable/clipped ancestor
   (.staff-section's overflow:hidden, .excel-table-wrapper's implicit
   overflow-y:auto from having overflow-x:auto — a well-known CSS
   quirk where the two can't be set independently). top/left/width are
   set inline per-instance by the JS that positions it. */
.mat-search-results-panel {
    position: fixed;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mat-search-results-panel:empty {
    display: none;
}

.mat-search-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.mat-search-item:hover {
    background: #eff6ff;
}

/* Keyboard-highlighted row (Arrow Up/Down) in a searchable dropdown —
   same treatment as :hover so keyboard and mouse users see the same
   visual feedback for "this is what Enter will pick". */
.mat-search-item.active {
    background: #dbeafe;
}

.mat-search-item:last-child {
    border-bottom: none;
}

.mat-search-item .mat-code {
    color: #64748b;
    font-size: 12px;
    margin-right: 6px;
}

.mat-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.mat-search-input:focus {
    border-color: #163b63;
    box-shadow: 0 0 0 3px rgba(22,59,99,0.12);
}

.staff-section-header,
.card-header {
    background: #ffffff;
    color: #1a1a1a;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.2px;
}

.staff-section-body,
.card-body {
    padding: 20px 18px;
}

.staff-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:20px;
}

.staff-form-group{

    display:flex;

    flex-direction:column;
}

.staff-form-group label{

    font-weight:600;

    color:#334155;

    margin-bottom:6px;
}

.staff-section table th{

    text-align:left !important;

    font-weight:600;

    color:#334155;

    padding-bottom:8px;

    vertical-align:bottom;
}

.staff-section table{

    width:100%;

    border-collapse:separate;

    border-spacing:0 10px;
}

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

    width:100%;

    padding:12px;

    border:1px solid #cbd5e1;

    border-radius:8px;

    font-size:14px;
}

.staff-form-group textarea{

    resize:vertical;

    min-height:120px;
}

.staff-radio-group{

    display:flex;

    gap:25px;

    flex-wrap:wrap;
}

.staff-radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;
}

.kyc-box{

    border:1px dashed #cbd5e1;

    padding:15px;

    border-radius:8px;

    margin-bottom:15px;
}

.help-text{

    font-size:12px;

    color:#64748b;

    margin-top:5px;
}

.staff-save-btn{

    background:#163b63;

    color:#ffffff;

    border:none;

    padding:14px 25px;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;
}

.staff-save-btn:hover{

    background:#0f2d4b;
}

/* =========================================================
   STAFF MANAGEMENT - mobile responsiveness
========================================================= */

@media screen and (max-width:768px){

    .staff-title{

        font-size:24px;
    }

    .staff-grid{

        grid-template-columns:1fr;
    }

    .staff-section-header{

        font-size:16px;
    }

    .staff-radio-group{

        flex-direction:column;

        gap:10px;
    }

}

/* =========================================================
   PURCHASES — button variants
========================================================= */

.secondary-btn,
.success-btn,
.danger-btn{
    border:none;
    padding:12px 20px;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
}

.secondary-btn{ background:#e2e8f0; color:#1e293b; }
.secondary-btn:hover{ background:#cbd5e1; }

.success-btn{ background:#15803d; color:#ffffff; }
.success-btn:hover{ background:#116530; }

.danger-btn{ background:#dc2626; color:#ffffff; }
.danger-btn:hover{ background:#b91c1c; }

.alert-info{ background:#dbeafe; color:#1e40af; }

/* =========================================================
   PURCHASES — filter row (Edit Existing)
========================================================= */

.purchase-filter-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    align-items:end;
}

/* =========================================================
   PURCHASES — excel-like grid
   Desktop / tablet: real <table>, sticky header, horizontal
   scroll if there are more columns than fit the viewport.
   Phone: each row collapses into a stacked card — see the
   max-width:480px block below.
========================================================= */

.excel-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
}

.excel-toolbar-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* Fixed action bar — keeps Fetch Customer Names / Add Row / Clear / Save
   reachable without scrolling back to the top of a long grid. Also
   RELOCATED to a direct child of <body> by JS (see relocateFixedActionBar
   in the page script) — position:fixed alone wasn't enough, since its
   original parent (.content-area) sets overflow-x/overflow-y:auto, which
   still visually clips a fixed-position descendant in real browsers (the
   same reason .mat-search-results-panel is appended straight to <body>
   too). Sits at bottom:30px, directly above the site's own 30px-tall
   .app-footer, rather than overlapping it at bottom:0. z-index is above
   .app-footer (100) and .sidebar (2000) so nothing can render over it. */
.fixed-action-bar{
    position:fixed;
    left:280px;
    right:0;
    bottom:30px;
    background:#ffffff;
    border-top:1px solid #cbd5e1;
    padding:10px 18px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
    z-index:2500;
    box-shadow:0 -4px 12px rgba(0,0,0,0.08);
}

/* Leaves enough breathing room at the bottom of the page so the fixed bar
   (plus the site footer below it) never sits on top of / hides the grid's
   last row. */
.fixed-action-bar-spacer{
    height:94px;
}

.excel-table-wrapper{
    overflow-x:auto;
    border:1px solid #e2e8f0;
    border-radius:8px;
}

.excel-table{
    width:100%;
    border-collapse:collapse;
    min-width:900px; /* forces horizontal scroll on tablet instead of squashing columns */
}

.excel-table thead th{
    position:sticky;
    top:0;
    background:#f8fafc;
    text-align:left;
    padding:10px 12px;
    font-size:13px;
    font-weight:700;
    color:#334155;
    border-bottom:2px solid #e2e8f0;
    white-space:nowrap;
}

.excel-table td{
    padding:6px 8px;
    border-bottom:1px solid #f1f5f9;
}

.excel-table td input{
    width:100%;
    box-sizing:border-box;
    padding:8px;
    border:1px solid #e2e8f0;
    border-radius:4px;
    font-size:13px;
}

.excel-table td input[type="number"]{
    min-width:130px;
}

.excel-table td input[type="date"]{
    min-width:150px;
}

.excel-table td input:focus{
    outline:none;
    border-color:#163b63;
    box-shadow:0 0 0 2px rgba(22,59,99,0.12);
}

.excel-col-action{ width:60px; text-align:center; }

.excel-col-sync{ width:36px; text-align:center; }

.sync-badge{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    padding:2px 7px;
    border-radius:10px;
    white-space:nowrap;
    cursor:default;
}
.sync-badge.outbound{ background:#dbeafe; color:#1e40af; }
.sync-badge.inbound{ background:#dcfce7; color:#166534; }

.fetch-dropdown-menu{
    position:absolute;
    bottom:100%;
    top:auto;
    left:0;
    margin-bottom:4px;
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:8px;
    box-shadow:0 -8px 24px rgba(0,0,0,0.12);
    z-index:2600;
    min-width:240px;
    overflow:hidden;
}
.fetch-dropdown-item{
    display:block;
    width:100%;
    text-align:left;
    padding:10px 14px;
    background:#fff;
    border:none;
    border-bottom:1px solid #f1f5f9;
    cursor:pointer;
    font-size:14px;
    color:#1e293b;
}
.fetch-dropdown-item:last-child{ border-bottom:none; }
.fetch-dropdown-item:hover{ background:#f8fafc; }

.sync-picker-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.5);
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sync-picker-box{
    background:#fff;
    border-radius:10px;
    padding:20px;
    width:min(420px, 90vw);
    max-height:80vh;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.sync-picker-box h3{ margin:0; font-size:16px; }
.sync-picker-list{
    overflow-y:auto;
    max-height:50vh;
    border:1px solid #e2e8f0;
    border-radius:6px;
    padding:8px;
}
.sync-picker-list label{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 4px;
    font-size:14px;
    cursor:pointer;
}
.sync-picker-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.row-remove-btn{
    background:#fee2e2;
    color:#991b1b;
    border:none;
    border-radius:4px;
    width:28px;
    height:28px;
    cursor:pointer;
    font-weight:700;
}

.row-remove-btn:hover{ background:#fecaca; }

.row-extraction-failed td{ background:#fffbeb; }

.row-duplicate td{
    background:#fee2e2;
    border-top:1px solid #fca5a5;
    border-bottom:1px solid #fca5a5;
}

.row-duplicate td:first-child{ border-left:1px solid #fca5a5; }
.row-duplicate td:last-child{ border-right:1px solid #fca5a5; }

/* =========================================================
   PURCHASES — responsive layouts
   Layout A (>768px, desktop/laptop):
     Full table, sidebar-style filters inline above it, exactly
     like the reference desktop-app screenshot.
   Layout B (481–768px, tablet):
     Same table, but it scrolls horizontally inside its own box
     rather than the whole page — toolbar buttons wrap to a
     second line instead of overflowing.
   Layout C (<=480px, phone):
     The table stops behaving like a table at all. Each row
     becomes its own card; each cell stacks as a label:value
     line (label comes from the th text via data-label). This
     is the standard "responsive table -> card list" pattern —
     scanning one bill at a time beats scrolling a cramped grid
     sideways on a 6" screen.
========================================================= */

@media screen and (max-width:768px){

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

    .excel-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .excel-toolbar-actions{
        justify-content:stretch;
    }

    .excel-toolbar-actions button{
        flex:1;
    }

    .fixed-action-bar{
        left:0;
        bottom:30px;
        flex-direction:column;
        align-items:stretch;
        max-height:60vh;
        overflow-y:auto;
    }

    .fixed-action-bar button{
        width:100%;
    }

    /* The bar stacks into up to 4 full-width rows here instead of one row,
       so it needs a lot more clearance below the grid than the desktop
       spacer provides. */
    .fixed-action-bar-spacer{
        height:260px;
    }
}

@media screen and (max-width:480px){

    .excel-table-wrapper{
        overflow-x:visible;
        border:none;
    }

    .excel-table{
        min-width:0;
    }

    .excel-table thead{
        display:none; /* headers reappear per-cell via data-label instead */
    }

    .excel-table,
    .excel-table tbody,
    .excel-table tr,
    .excel-table td{
        display:block;
        width:100%;
    }

    .excel-table tr{
        margin-bottom:14px;
        border:1px solid #e2e8f0;
        border-radius:8px;
        padding:8px;
        background:#ffffff;
    }

    .excel-table tr.row-extraction-failed{ border-color:#fbbf24; background:#fffbeb; }
    .excel-table tr.row-duplicate{ border-color:#fca5a5; background:#fee2e2; }

    .excel-table td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
        border-bottom:1px solid #f8fafc;
        padding:8px 4px;
    }

    .excel-table td::before{
        content:attr(data-label);
        font-weight:600;
        color:#64748b;
        font-size:12px;
        flex:0 0 40%;
    }

    .excel-table td input{
        flex:1;
        text-align:right;
    }

    .excel-col-action{
        justify-content:flex-end;
    }
}


/* =========================================================
   GST VS PURCHASE BILLS — report page
========================================================= */

.gst-purchase-actions{
    display:flex;
    gap:10px;
    align-items:flex-end;
}

.status-matched{ color:#15803d; font-weight:600; white-space:nowrap; }
.status-mismatch{ color:#b45309; font-weight:600; }

/* Read-only report table — same grid look as the editable ones, but plain
   text cells instead of <input> boxes (nothing here is ever edited). */
.report-table td{
    padding:10px 12px;
    font-size:13px;
}

.report-print-header{ display:none; }

/* =========================================================
   PRINT / "Export as PDF" (window.print() — no server-side PDF
   library needed, every modern browser offers Save-as-PDF here)
========================================================= */

@media print{

    .no-print{ display:none !important; }

    .only-print,
    .report-print-header{ display:block !important; }

    body{ background:#ffffff; }

    .staff-page, .staff-section{
        box-shadow:none;
        border:none;
    }

    .report-section{
        break-inside:avoid;
        page-break-inside:avoid;
        margin-bottom:18px;
    }

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

    .report-table th, .report-table td{
        border:1px solid #cbd5e1;
        padding:6px 8px;
        font-size:11px;
    }

    .row-duplicate td{
        background:#fef3c7 !important; /* mismatch rows still stand out in print, just lighter than on-screen */
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    .excel-table-wrapper{
        overflow:visible;
        border:none;
    }

    /* Force the phone card-layout media query off when printing on a
       normal-width page — a printed page is never 480px wide, but some
       browsers still evaluate print layout against the screen's viewport. */
    .excel-table thead{ display:table-header-group !important; }
    .excel-table, .excel-table tbody, .excel-table tr, .excel-table td{
        display:revert !important;
    }
    .excel-table td::before{ content:none !important; }
}
/* =========================================================
   Universal account selector (header)
========================================================= */

.account-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px;
}

.account-selector label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.account-selector select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.95);
    font-size: 13px;
    max-width: 220px;
}

@media screen and (max-width: 768px) {
    .account-selector {
        margin: 8px 0;
        width: 100%;
    }
    .account-selector select {
        max-width: none;
        flex: 1;
    }
}

/* =====================================================================
   Responsive additions — Material Stock / Bill Templates round
   (also covers Purchases' new material-line-items sub-UI, and closes a
   few gaps left over from the previous round's Purchases / Petty Cash /
   Vouchers / Reports pages — see README section (f)).
===================================================================== */

/* ---- Bill Templates: tag-input synonym editor ---- */
.bt-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
}
.bt-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    white-space: nowrap;
}
.bt-tag-chip a { color: #3730a3; text-decoration: none; font-weight: 700; }
.bt-tag-text {
    border: none;
    outline: none;
    flex: 1;
    min-width: 140px;
    font-size: 13px;
    padding: 4px 2px;
}

/* ---- Purchases: material-line-items and combined-item sub-rows wrap
   onto multiple lines on narrow screens instead of overflowing. ---- */
.material-line-row, .combined-item-row {
    flex-wrap: wrap;
}
.material-line-row input, .combined-item-row input, .combined-item-row .combined-item-project {
    min-width: 0;
}

/* ---- Bill Templates: reference-region canvas — width is always
   percentage-based (never a fixed pixel width) so it scales to its
   container; internal resolution (canvas.width/height) stays the
   original image/PDF pixel size, and the JS scales pointer/touch
   coordinates against the RENDERED size vs that internal resolution,
   so drawn boxes stay accurate at any screen width. ---- */
#btCanvasWrap {
    max-width: 100%;
}
#btBaseCanvas, #btDrawCanvas {
    max-width: 100%;
}

/* ---- Generic: filter rows (date range + dropdowns + buttons) stack
   vertically under 768px across every report/entry page in both this
   round and the previous one (Purchases, Petty Cash, Vouchers,
   Purchase Ledger / Money Given Ledger / Money Spent Ledger / Material
   Stock Report). Rows using inline flex + flex-wrap already reflow;
   this rule catches ones that used a fixed row layout without it. ---- */
@media screen and (max-width: 768px) {
    .purchase-filter-row,
    .purchase-bulk-entry-row,
    .form-row[style*="display:flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .form-row[style*="display:flex"] > * {
        min-width: 0 !important;
        width: 100% !important;
    }
    .staff-radio-group {
        flex-direction: column;
        gap: 8px;
    }
    .excel-toolbar {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
    .excel-toolbar-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ---- Vouchers public signing page + Voucher Show/Create: make sure
   their own excel/table-like areas scroll horizontally rather than
   overflow the page on a phone, matching every other table in the app. ---- */
@media screen and (max-width: 768px) {
    .voucher-line-items-table-wrapper,
    .signature-pad-wrapper {
        overflow-x: auto;
        max-width: 100%;
    }
}


/* ============================================================================
   ROUND 4 ADDITIONS — append these to the end of assets/css/style.css
   ============================================================================
   Fixes the "textboxes placed very closely together" look on the
   Purchases page's per-row Materials cell (single-mode material lines
   and Combined-mode project/item sub-rows). The existing rule
   ".excel-table td input{ width:100% }" was overriding these smaller
   inline-flex inputs, making every one of them want the FULL cell
   width and squeeze against its neighbours. These rules restore the
   fixed widths the inline styles already intended, with proper
   spacing between them. Nothing here changes any other page. */

.excel-table td .material-line-row input,
.excel-table td .combined-item-row input {
    width: auto;
}

.material-line-row,
.combined-item-row {
    padding: 4px 0;
}

.material-line-row + .material-line-row,
.combined-item-row + .combined-item-row {
    border-top: 1px dashed #e2e8f0;
    padding-top: 10px;
}

.combined-rows-holder {
    margin-bottom: 8px;
}

.cell-materials-combined-note {
    padding: 6px 0;
}

/* Bill Templates page — synonym rows */
.bt-tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px;
    min-height: 44px;
}

.bt-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bt-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
}

.bt-tag-chip a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 700;
}

.bt-tag-text {
    border: none;
    outline: none;
    flex: 1;
    min-width: 160px;
    padding: 6px 4px;
}

.bt-sample-thumb {
    transition: box-shadow 0.15s ease;
}

.bt-sample-thumb:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}


/* ============================================================================
   VENDOR BILLS MODULE — append these to the end of assets/css/style.css.
   Reuses .bt-tag-input / .bt-tag-chip / .bt-tag-list / .bt-tag-text from
   the Bill Templates round (should already be in your file) for the
   Vendor Formats "teach" screen's synonym tags — only new classes below
   are the review modal and the status badges.
   ============================================================================ */

.vb-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: 30px 16px;
    overflow-y: auto;
}

.vb-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.vb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 16px;
}

.vb-modal-body {
    padding: 18px;
    overflow-y: auto;
}

.vb-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.vb-status-review   { background: #fef3c7; color: #92400e; }
.vb-status-approved { background: #dcfce7; color: #166534; }
.vb-status-rejected { background: #fee2e2; color: #991b1b; }


/* ============================================================================
   PHONE CARD LAYOUT - boxes cut off at the right / labels missing
   ----------------------------------------------------------------------------
   ".staff-section table { min-width:720px }" (used for horizontal scrolling on
   tablets) also applied to the phone "card" layout of .excel-table, so each card
   was 720px wide inside a 350px box and the text boxes were pushed out of sight.
   On phones the card layout must fit the screen. The captions themselves come
   from assets/js/mobile-table-labels.js.
   ============================================================================ */
@media screen and (max-width:480px){

    .staff-section .excel-table,
    .staff-section-body .excel-table,
    .excel-table-wrapper .excel-table{
        min-width:0;
        width:100%;
    }

    .excel-table td{
        min-width:0;
        box-sizing:border-box;
    }

    /* caption on the left, control fills the rest of the line */
    .excel-table td > input,
    .excel-table td > select,
    .excel-table td > textarea,
    .excel-table td > div{
        flex:1 1 auto;
        min-width:0;
        max-width:60%;
        box-sizing:border-box;
    }

    .excel-table td > input[type="checkbox"],
    .excel-table td > input[type="radio"]{
        flex:0 0 auto;
        max-width:none;
    }

    /* cells that hold a whole block of rows (materials, items) use the full width */
    .excel-table td > .material-line-row,
    .excel-table td > .combined-rows-holder,
    .excel-table td > .combined-item-row{
        max-width:100%;
    }

    .excel-table td::before{
        flex:0 0 36%;
        padding-right:6px;
        word-break:break-word;
    }
}