*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.login-container{
    width:100%;
    max-width:400px;
    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

.logo-circle{
    margin: auto;
}

h1{
    text-align:center;
    margin-top:20px;
    color:#2563eb;
}

.subtitle{
    text-align:center;
    color:#666;
    margin-top:10px;
    margin-bottom:30px;
}

label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

input{
    width:100%;
    padding:12px;
    margin-bottom:20px;

    border:1px solid #ddd;
    border-radius:10px;
}

input:focus{
    outline:none;
    border-color:#2563eb;
}

button{
    width:100%;
    padding:14px;

    border:none;
    border-radius:10px;

    background:#2563eb;
    color:white;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;
}

button:hover{
    background:#1d4ed8;
}

.version{
    text-align:center;
    margin-top:20px;
    color:#888;
}

/* ===========================
   DASHBOARD V2
=========================== */

body{
    background:#f8f9fc;
    font-family:Arial, sans-serif;
    margin:0;
    padding:0;
}

.dashboard{
    max-width: 1200px;
    margin: auto;
}


.closed{
    background:#fff0f6;
}


.pending span{
    color:#FDBA21;
}

.claimed span{
    color:#2563EB;
}

.closed span{
    color:#EC4899;
}


.chart-box{
    position: relative;
}

.total-requests{
    position:absolute;
    top:58%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    pointer-events:none;
}

.total-requests h2{
    margin:0;
    font-size:32px;
    font-weight:bold;
}

.total-requests p{
    margin:0;
    color:#666;
    font-size:12px;
}


.action-card{
    cursor: pointer;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* ===========================
   CREATE TRANSFER PAGE
=========================== */

.form-container{
    max-width:700px;
    margin:auto;
    padding:20px;
}

.page-header{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
}

.page-header a{
    text-decoration:none;
    color:black;
    font-size:24px;
}

.form-card{
    background:white;
    padding:25px;
    border-radius:20px;
    box-shadow:0 4px 15px rgba(0,0,0,0.05);
}

.form-card label{
    display:block;
    margin-top:15px;
    margin-bottom:8px;
    font-weight:bold;
}

.form-card select,
.form-card input,
.form-card textarea{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:10px;
    margin-bottom:10px;
    box-sizing:border-box;
}

.secondary-btn{
    width:100%;
    background:#2563EB;
    color:white;
    border:none;
    padding:12px;
    border-radius:10px;
    cursor:pointer;
    margin-top:10px;
}

.items-table{
    margin-bottom: 20px;
}


.button-group{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}

.cancel-btn{
    background:#ddd;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
}

.submit-btn{
    background:#ec4899;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
}

/* ===========================
   VIEW TRANSFERS PAGE
=========================== */

.transfer-card{
    background:white;
    padding:20px;
    border-radius:20px;
    margin-bottom:15px;
    box-shadow:0 4px 15px rgba(0,0,0,0.05);

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

.status{
    padding: 8px 15px;
    border-radius: 20px;
}

.pending-status{
    background: #FFF8E8;
}

.claimed-status{
    background: #EEF5FF;
}


.view-btn{
    background:#2563EB;
    color:white;
    border:none;
    padding:10px 15px;
    border-radius:10px;
    cursor:pointer;
}

/* ==========================================
   TRANSFER DETAILS (LIFECYCLE PAGE)
========================================== */

.status-card{
    background:#ffffff;
    border-radius:20px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.status-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.status-top h2{
    margin:0;
    color:#222;
}

.status-top p{
    margin-top:8px;
    color:#666;
}

.status{
    font-weight:bold;
}

.pending-status{
    color:#F59E0B;
}

.claimed-status{
    color:#2563EB;
}

.packed-status{
    color:#9333EA;
}

.dispatched-status{
    color:#EC4899;
}

.received-status{
    color:#0891B2;
}

.completed-status{
    color:#16A34A;
}


/* ==========================================
   PROGRESS TRACKER
========================================== */

.progress-container{
    display:flex;
    justify-content:space-between;
    position:relative;
    margin-top:20px;
    padding:10px 0;
}

.progress-line{
    top: 22px;
    left: 6%;
    right: 6%;
    height: 4px;
    background: #e5e7eb;
    z-index: 1;
}

.progress-step{
    width:16%;
    position:relative;
    text-align:center;
    z-index:2;
}

.progress-step .circle{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#d1d5db;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    font-size:18px;
}

.progress-step.completed .circle{
    background:#16A34A;
}

.progress-step.current .circle{
    background:#2563EB;
}

.progress-step p{
    margin-top:10px;
    font-size:13px;
    font-weight:600;
    color:#555;
}


/* ==========================================
   TRANSFER INFORMATION
========================================== */


/* ==========================================
   TRANSFER ITEMS TABLE
========================================== */

.items-table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}

.items-table th{
    background:#2563EB;
    color:white;
    padding:14px;
    text-align:left;
}

.items-table td{
    padding:14px;
    border-bottom:1px solid #ececec;
}

.items-table tr:hover{
    background:#f8fafc;
}


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

.timeline{
    margin-top:20px;
}

.timeline-item{
    display:flex;
    align-items:flex-start;
    margin-bottom:25px;
}

.timeline-icon{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#16A34A;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:20px;
    flex-shrink:0;
}

.current-icon{
    background:#F59E0B;
}

.timeline-content h4{
    margin:0;
    color:#222;
}

.timeline-content p{
    margin:5px 0;
    color:#666;
}

.timeline-content small{
    color:#999;
}


/* ==========================================
   ACTION SECTION
========================================== */

.action-description{
    color:#666;
    margin-bottom:20px;
    line-height:1.5;
}

.primary-btn{
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 15px;
    transition: 0.3s;
}

.primary-btn{
    background:#2563EB;
    color:white;
}

.primary-btn:hover{
    background:#1D4ED8;
}


.primary-btn i{
    margin-right: 10px;
}


/* ==========================================
   COMPLETED MESSAGE
========================================== */

.completed-message{
    text-align:center;
    padding:30px;
    background:#ECFDF5;
    border-radius:15px;
}

.completed-message i{
    font-size:55px;
    color:#16A34A;
    margin-bottom:15px;
}

.completed-message h3{
    margin-bottom:10px;
    color:#166534;
}

.completed-message p{
    color:#555;
}


/* ==========================================
   HIDE UNUSED BUTTONS
========================================== */

.hidden{
    display:none;
}


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

@media(max-width:768px){

    .progress-container{
        overflow-x:auto;
        gap:15px;
        justify-content:flex-start;
        padding-bottom:10px;
    }

    .progress-line{
        display:none;
    }

    .progress-step{
        min-width:80px;
    }

    .progress-step .circle{
        width:40px;
        height:40px;
        font-size:16px;
    }

    .progress-step p{
        font-size:12px;
    }

    .items-table th,
    .items-table td{
        padding:10px;
        font-size:14px;
    }

    .detail-row{
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
    }

}

/* ===========================
   REPORT DISCREPANCY PAGE
=========================== */


/* ==========================================
   MY PROFILE PAGE
========================================== */


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

.profile-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.profile-header h1{
    margin:0;
    font-size:28px;
    color:#222;
}

.back-button{
    width:45px;
    height:45px;
    border-radius:50%;
    background:white;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#2563EB;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}


/* ==========================================
   PROFILE CARD
========================================== */

.profile-card{

    background:linear-gradient(135deg,#2563EB,#EC4899);
    color:white;

    border-radius:25px;

    padding:35px 20px;

    text-align:center;

    margin-bottom:25px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}

.profile-avatar{

    width:100px;
    height:100px;

    margin:auto;
    margin-bottom:20px;

    border-radius:50%;

    background:white;

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

    color:#EC4899;

    font-size:42px;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.profile-card h2{

    margin:0;

    font-size:28px;

}

.employee-role{

    margin-top:8px;

    font-size:17px;

    opacity:.95;

}

.employee-branch{

    margin-top:6px;

    font-size:15px;

    opacity:.85;

}


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

.profile-section{

    background:white;

    border-radius:20px;

    padding:20px;

    margin-bottom:20px;

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

}

.profile-section h3{

    margin-top:0;

    margin-bottom:20px;

    color:#222;

    font-size:22px;

}


/* ==========================================
   INFORMATION ROWS
========================================== */

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid #ececec;

}

.info-row:last-child{

    border-bottom:none;

}

.info-row span{

    color:#666;

}

.info-row strong{

    color:#222;

}


/* ==========================================
   ACCOUNT SETTINGS
========================================== */

.setting-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    text-decoration:none;

    color:#222;

    border-bottom:1px solid #ececec;

    transition:.25s;

}

.setting-item:last-child{

    border-bottom:none;

}

.setting-item:hover{

    color:#2563EB;

}

.setting-item div{

    display:flex;

    align-items:center;

    gap:12px;

}

.setting-item i{

    font-size:18px;

}

.version-item{

    cursor:default;

}

.version-item span{

    color:#888;

    font-weight:bold;

}


/* ==========================================
   LOGOUT BUTTON
========================================== */

.logout-btn{
    width: 100%;
    border: none;
    font-size: 17px;
    cursor: pointer;
    margin-bottom: 25px;
}


.logout-btn i{

    margin-right:10px;

}


/* ==========================================
   ACTIVE NAVIGATION
========================================== */


.bottom-nav a.active-nav i{

    color:#EC4899;

}


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

@media(max-width:768px){

    .profile-card{

        padding:30px 15px;

    }

    .profile-avatar{

        width:85px;
        height:85px;

        font-size:34px;

    }

    .profile-card h2{

        font-size:24px;

    }

    .profile-section{

        padding:18px;

    }

    .profile-section h3{

        font-size:20px;

    }

    .info-row{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .setting-item{

        padding:16px 0;

    }

}


/* ==========================================
   ADMIN DETAILS PAGE
========================================== */

/* ==========================================
   ADMIN DASHBOARD
========================================== */

.dashboard{
    padding:20px;
    padding-bottom:100px;
    background:#f8f9fc;
    min-height:100vh;
}


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

.dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#ffffff;
    padding:20px;
    border-radius:20px;
    margin-bottom:20px;
    box-shadow:0 4px 15px rgba(0,0,0,.06);
}

.logo-section{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo-circle{
    width:70px;
    height:70px;
    border-radius:50%;
    background:linear-gradient(135deg,#2563EB,#EC4899);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    font-size:22px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.logo-section h1{
    margin:0;
    color:#222;
    font-size:28px;
}

.logo-section p{
    margin-top:5px;
    color:#777;
}

.notification{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#f3f4f6;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    cursor:pointer;
    transition:.3s;
}

.notification:hover{
    background:#2563EB;
    color:white;
}


/* ==========================================
   CARDS
========================================== */

.card{
    background:#ffffff;
    border-radius:20px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 4px 15px rgba(0,0,0,.06);
}

.card h2{
    margin-top:0;
    color:#222;
}


/* ==========================================
   OVERVIEW CARDS
========================================== */

.overview-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:20px;
}

.overview-item{
    border-radius:18px;
    padding:25px;
    text-align:center;
    transition:.3s;
}

.overview-item:hover{
    transform:translateY(-5px);
}

.overview-item i{
    font-size:34px;
    margin-bottom:15px;
}

.overview-item h3{
    margin:10px 0;
    color:#333;
}

.overview-item span{
    display:block;
    font-size:40px;
    font-weight:bold;
    margin:10px 0;
}

.overview-item p{
    margin:0;
    color:#666;
}


/* CARD COLOURS */

.pending{
    background:#FFF8E6;
}

.pending i{
    color:#F59E0B;
}

.claimed{
    background:#EEF4FF;
}

.claimed i{
    color:#2563EB;
}

.dispatched{
    background:#FFF1F2;
}

.dispatched i{
    color:#EC4899;
}

.discrepancy{
    background:#FEE2E2;
}

.discrepancy i{
    color:#DC2626;
}

.employees{
    background:#ECFDF5;
}

.employees i{
    color:#10B981;
}

.products{
    background:#F3F4F6;
}

.products i{
    color:#4B5563;
}


/* ==========================================
   ANALYTICS
========================================== */


.analytics-header select{
    padding:10px 15px;
    border-radius:10px;
    border:1px solid #ddd;
    outline:none;
    cursor:pointer;
}

.charts{
    margin-top: 20px;
}

.chart-box{
    height: 340px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}


/* ==========================================
   RECENT ACTIVITY
========================================== */

.activity-list{
    margin-top:15px;
}

.activity-item{
    display:flex;
    gap:15px;
    align-items:flex-start;
    padding:18px 0;
    border-bottom:1px solid #ececec;
}

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

.activity-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:20px;
    flex-shrink:0;
}

.blue{
    background:#2563EB;
}

.green{
    background:#10B981;
}

.orange{
    background:#F59E0B;
}

.pink{
    background:#EC4899;
}

.activity-item h4{
    margin:0;
    color:#222;
}

.activity-item p{
    margin:5px 0;
    color:#555;
}

.activity-item small{
    color:#888;
}


/* ==========================================
   QUICK ACTIONS
========================================== */

.quick-actions {
    display: grid;

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

    gap: 18px;
    margin-top: 20px;
}

.action-card{
    background:#f9fafb;
    border-radius:18px;
    padding:25px;
    text-align:center;
    text-decoration:none;
    color:#222;
    transition:.3s;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.action-card:hover{
    transform:translateY(-5px);
    background:#2563EB;
    color:white;
}

.action-card i{
    font-size:34px;
    margin-bottom:15px;
}

.action-card p{
    margin:0;
    font-weight:600;
}


/* ==========================================
   BOTTOM NAVIGATION
========================================== */

.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:white;
    display:flex;
    justify-content:space-around;
    padding:15px 0;
    box-shadow:0 -3px 10px rgba(0,0,0,.1);
    z-index:999;
}

.bottom-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    text-decoration:none;
    color:#555;
    transition:.3s;
}

.bottom-nav a i{
    font-size:18px;
}

.bottom-nav a.active-nav{
    color:#EC4899;
    font-weight:bold;
}


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

@media(max-width:992px){

    .overview-cards{
        grid-template-columns:repeat(2,1fr);
    }

    .quick-actions{
        grid-template-columns:repeat(2,1fr);
    }


}

@media(max-width:768px){

    .dashboard-header{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .overview-cards{
        grid-template-columns:1fr;
    }

    .quick-actions{
        grid-template-columns:1fr 1fr;
    }

    .chart-box{
        height:300px;
    }

    .logo-section h1{
        font-size:24px;
    }

}

@media(max-width:480px){

    .quick-actions{
        grid-template-columns:1fr;
    }

    .activity-item{
        gap:10px;
    }

    .activity-icon{
        width:42px;
        height:42px;
        font-size:16px;
    }

    .bottom-nav span{
        font-size:11px;
    }

}

/* ======================================================
   EMPLOYEES PAGE
====================================================== */

/* Toolbar */

.employee-toolbar{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    align-items:center;
}

.search-box{
    flex:1;
    min-width:260px;
    display:flex;
    align-items:center;
    background:#f7f9fc;
    border:1px solid #ddd;
    border-radius:14px;
    padding:12px 16px;
}

.search-box i{
    color:#777;
    margin-right:10px;
}

.search-box input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    font-size:15px;
}

.employee-toolbar select{
    padding:12px 15px;
    border-radius:12px;
    border:1px solid #ddd;
    background:white;
    cursor:pointer;
}


/* Section Header */

.section-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;

}

.section-header h2{

    margin:0;

}

.add-btn{

    background:#2563EB;
    color:white;
    border:none;
    border-radius:12px;
    padding:13px 22px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;

}

.add-btn:hover{

    background:#1d4ed8;

}

.add-btn i{

    margin-right:8px;

}


/* Employee Cards */

.employee-cards{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    gap:25px;

}

.employee-card{
    background: white;
    border-radius: 22px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,.06);
}


.menu-btn{

    position:absolute;
    top:20px;
    right:20px;

    width:40px;
    height:40px;
    padding:0;

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

    border:none;
    border-radius:10px;

    background:transparent;

    cursor:pointer;

    font-size:20px;

    color:#888;

}

.menu-btn:hover{

    background:#f3f4f6;
    color:#2563EB;

}


/* Employee Header */

.employee-top{
    display: flex;
    align-items: center;
    gap: 18px;
}

.employee-avatar{

    width:65px;
    height:65px;
    border-radius:50%;

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

    font-size:22px;
    font-weight:bold;
    color:white;

    background:linear-gradient(135deg,#2563EB,#EC4899);

}

.employee-top h3{
    color: #222;
}


/* Employee Details */


.detail-row{
    padding-bottom: 12px;
}


/* Status */

.status-badge{
    justify-self: end;
}


.status-badge.inactive{

    background:#fee2e2;
    color:#dc2626;

}


/* Modal */


.modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn{

    border:none;
    background:none;
    font-size:24px;
    cursor:pointer;

}

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;
    margin-bottom:8px;
    font-weight:600;

}

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

    width:100%;
    box-sizing:border-box;

    padding:13px;

    border-radius:12px;
    border:1px solid #ddd;

    outline:none;

}

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

    border-color:#2563EB;

}


/* Responsive */

@media(max-width:768px){

    .employee-toolbar{

        flex-direction:column;
        align-items:stretch;

    }

    .section-header{

        flex-direction:column;
        align-items:flex-start;
        gap:15px;

    }

    .add-btn{

        width:100%;

    }

    .employee-cards{

        grid-template-columns:1fr;

    }

    .employee-card{

        padding:20px;

    }


}

/* ======================================================
   PRODUCTS PAGE
====================================================== */

/* Product Cards */

.employee-card{
    position: relative;
}


/* ==========================================
   PRODUCT AVATAR
========================================== */

.product-avatar{

    width:65px;
    height:65px;

    border-radius:50%;

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

    background:linear-gradient(135deg,#2563EB,#EC4899);

    color:white;

    font-size:22px;

    font-weight:bold;

    letter-spacing:1px;

    box-shadow:0 5px 15px rgba(37,99,235,.25);

    flex-shrink:0;

}

/* Product Details */

.employee-details{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.detail-row{
    grid-template-columns: 110px 15px 1fr;
}


.detail-label{

    color:#666;
    font-weight:600;

}

.detail-colon{

    text-align:center;
    color:#999;
    font-weight:bold;

}

.detail-value{

    text-align:right;
    font-weight:600;
    color:#222;

}


/* Product Status */

.status-badge.active{

    background:#DCFCE7;
    color:#15803D;

}


/* ==========================================
   PRODUCT ACTION MENU
========================================== */

.product-menu {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 100;
}

.product-menu-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: #f7f9fc;
    color: #6b7280;
    cursor: pointer;
    transition: 0.25s;
}

.product-menu-btn:hover {
    background: #2563eb;
    color: #ffffff;
}

.product-menu-dropdown {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    width: 220px;
    overflow: hidden;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    z-index: 101;
}

.product-menu.active .product-menu-dropdown {
    display: block;
}

.product-menu-dropdown a,
.product-menu-dropdown .product-status-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: none;
    background: transparent;
    color: #444444;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: 0.25s;
}

.product-menu-dropdown a:hover,
.product-menu-dropdown .product-status-button:hover {
    background: #f5f7fb;
}

.product-menu-dropdown i {
    width: 18px;
}

.product-status-form {
    margin: 0;
    padding: 0;
}


/* Add Product Modal */

.modal textarea{

    width:100%;

    resize:none;

    padding:12px;

    border:1px solid #ddd;

    border-radius:12px;

    outline:none;

    box-sizing:border-box;

    font-family:inherit;

}

.modal textarea:focus{

    border-color:#2563EB;

}


/* Save Button */

.save-btn{

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#2563EB;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.save-btn:hover{

    background:#1D4ED8;

}


/* Responsive */

@media(max-width:768px){

    .detail-row{

        grid-template-columns:90px 10px 1fr;

    }

    .employee-avatar{

        width:58px;
        height:58px;

        font-size:24px;

    }

    .employee-top h3{

        font-size:20px;

    }

    .menu-dropdown{

        width:200px;

    }

}

@media(max-width:480px){

    .detail-row{

        grid-template-columns:80px 10px 1fr;

    }

    .employee-card{

        padding:20px;

    }

    .employee-top{

        gap:12px;

    }

}

/* ======================================================
   TRANSFER MANAGEMENT PAGE
====================================================== */

/* Transfer ID */

.transfer-id{

    font-size:22px;

    font-weight:bold;

    color:#2563EB;

    margin-bottom:18px;

}


/* Transfer Route */

.transfer-route{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    background:#F8F9FC;

    padding:15px;

    border-radius:15px;

    margin-bottom:25px;

    font-weight:600;

    color:#444;

}

.transfer-route i{

    color:#2563EB;

    font-size:18px;

}


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

.status-badge.pending{

    background:#FEF3C7;

    color:#D97706;

}

.status-badge.claimed{

    background:#DBEAFE;

    color:#2563EB;

}

.status-badge.packed,
.status-badge.packing{

    background:#EDE9FE;
    color:#7C3AED;

}

.status-badge.dispatched{

    background:#FCE7F3;
    color:#EC4899;

}

.status-badge.received{

    background:#CFFAFE;

    color:#0891B2;

}

.status-badge.completed,
.status-badge.closed{

    background:#DCFCE7;
    color:#16A34A;

}


/* ==========================================
   PROGRESS TRACKER
========================================== */

.progress-tracker{

    margin-top:30px;

    padding:0 8px;

}

/* circles + line */

.progress-line{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.progress-line::before{

    content:"";

    position:absolute;

    left:18px;
    right:18px;

    top:50%;

    transform:translateY(-50%);

    height:4px;

    background:#E5E7EB;

    border-radius:10px;

    z-index:0;

}

.step{

    width:18px;

    height:18px;

    border-radius:50%;

    background:#fff;

    border:4px solid #D1D5DB;

    position:relative;

    z-index:2;

}

.step.completed{

    background:#2563EB;

    border-color:#2563EB;

}

/* labels */

.progress-labels{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:12px;

    font-weight:600;

    color:#666;

    padding:0 2px;

}

/* ==========================================
   TRANSFER CARD
========================================== */

.employee-card{

    transition:.25s;

}


/* ==========================================
   TRANSFER MODAL
========================================== */


.modal-header{

    border-bottom:1px solid #ECECEC;

    padding-bottom:15px;

    margin-bottom:20px;

}


/* ==========================================
   EXPORT BUTTON
========================================== */


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

@media(max-width:768px){

    .transfer-route{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

    .transfer-route i{

        transform:rotate(90deg);

    }

    .transfer-id{

        text-align:center;

    }

    .progress-labels{

        font-size:10px;

    }

}

@media(max-width:480px){

    .progress-labels{

        font-size:9px;

    }

    .step{

        width:16px;

        height:16px;

    }

    .transfer-id{

        font-size:20px;

    }

}

/* ======================================================
   REPORTS PAGE
====================================================== */

/* Summary Cards */

.active-card{

    background:#EEFDF5;

}

.active-card i{

    color:#16A34A;

}


/* ==========================================
   ANALYTICS
========================================== */

.analytics-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.analytics-header h2{

    margin:0;

}

.charts{

    display:grid;

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

    gap:25px;

}

.chart-box{

    background:#F8F9FC;

    border-radius:18px;

    padding:20px;

    border:1px solid #ECECEC;

    transition:.3s;

}

.chart-box:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.chart-box h3{

    margin-top:0;

    margin-bottom:20px;

    color:#374151;

    text-align:center;

}

.chart-box canvas{

    width:100% !important;

    height:260px !important;

}


/* ==========================================
   REPORT CARDS
========================================== */


.employee-card:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.employee-top{

    margin-top:18px;

    margin-bottom:15px;

}

.employee-top h3{

    margin:0;

    font-size:22px;

}

.employee-top p{

    margin-top:6px;

    color:#777;

}

.product-avatar{

    margin:auto;

}


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

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}

.status-badge.completed{

    background:#DCFCE7;

    color:#15803D;

}


/* ==========================================
   EXPORT BUTTON
========================================== */

.add-btn{

    display:flex;

    align-items:center;

    gap:10px;

}


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

@media(max-width:992px){

    .charts{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .analytics-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .chart-box canvas{

        height:220px !important;

    }

}

@media(max-width:480px){

    .overview-cards{

        grid-template-columns:1fr;

    }

    .chart-box{

        padding:15px;

    }

    .employee-top h3{

        font-size:18px;

    }

    .chart-box canvas{

        height:200px !important;

    }

}

/* ==========================================
   LOGIN ERROR MESSAGE
========================================== */

.error-message{

    width:100%;

    background:#ffe5e5;

    color:#b30000;

    border:1px solid #ffb3b3;

    border-radius:10px;

    padding:12px;

    margin-bottom:20px;

    text-align:center;

    font-size:14px;

    font-weight:600;

    box-sizing:border-box;

}

/* ===========================
   LOGOUT BUTTON
=========================== */

.logout-btn{

    background:#DC2626;
    color:#fff;

    padding:10px 18px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.3s;

}

.logout-btn:hover{

    background:#B91C1C;

}

/* ===============================
   REGISTER EMPLOYEE MODAL
================================ */

.modal{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.45);

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

    z-index:9999;

}

.modal-content{

    background:#fff;

    width:550px;

    max-width:90%;

    max-height:90vh;

    overflow-y:auto;

    border-radius:18px;

    padding:25px;

    animation:popup .25s ease;

}

@keyframes popup{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.dropdown-btn{

    width:100%;

    background:none;

    border:none;

    padding:12px 18px;

    text-align:left;

    cursor:pointer;

    font-size:15px;

    color:#444;

    display:flex;

    align-items:center;

    gap:10px;

}

.dropdown-btn:hover{

    background:#F7F7F7;

}


.employee-menu{

    position:absolute;

    top:55px;

    right:15px;

    width:220px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    overflow:hidden;

    display:none;

    z-index:100;

}

.employee-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    text-decoration:none;

    color:#333;

    font-size:14px;

}

.employee-menu a:hover{

    background:#f5f5f5;

}

.employee-menu i{

    width:18px;

}

.danger-link{

    color:#dc2626 !important;

}

.success-link{

    color:#16a34a !important;

}

.employee-details-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.details-navigation {
    display: flex;
    align-items: center;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.back-btn:hover {
    color: #111827;
}

.employee-profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
}

.employee-profile-avatar {
    width: 105px;
    height: 105px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fce7f3;
    color: #db2777;
    font-size: 40px;
}

.employee-profile-summary {
    flex: 1;
}

.employee-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.profile-label {
    margin: 0 0 5px;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.employee-name-row h1 {
    margin: 0;
    color: #111827;
    font-size: 27px;
}

.employee-username {
    margin: 6px 0 0;
    color: #6b7280;
}

.employee-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status-active {
    color: #15803d;
    background: #dcfce7;
}

.status-inactive {
    color: #b91c1c;
    background: #fee2e2;
}

.profile-summary-items {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 25px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

.summary-item > i {
    color: #db2777;
    font-size: 18px;
}

.summary-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.summary-item span {
    color: #9ca3af;
    font-size: 12px;
}

.summary-item strong {
    color: #374151;
    font-size: 14px;
}

.employee-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.details-card {
    padding: 24px;
}

.details-card:last-child {
    grid-column: 1 / -1;
}

.details-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}

.details-heading-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #db2777;
    background: #fce7f3;
}

.details-card-heading h2 {
    margin: 0;
    color: #111827;
    font-size: 17px;
}

.details-card-heading p {
    margin: 4px 0 0;
    color: #9ca3af;
    font-size: 13px;
}

.details-list {
    display: flex;
    flex-direction: column;
}

.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row span {
    color: #6b7280;
    font-size: 14px;
}

.detail-row strong {
    color: #1f2937;
    font-size: 14px;
    text-align: right;
}

.employee-error-card {
    padding: 45px 25px;
    text-align: center;
}

.error-icon {
    margin-bottom: 16px;
    color: #dc2626;
    font-size: 42px;
}

.employee-error-card h2 {
    margin: 0 0 10px;
}

.employee-error-card p {
    margin: 0;
    color: #6b7280;
}

@media (max-width: 800px) {
    .employee-profile-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-name-row {
        width: 100%;
        flex-direction: column;
    }

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

    .details-card:last-child {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .detail-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .detail-row strong {
        text-align: left;
    }
}

.edit-employee-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding-top: 24px;
}

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

.edit-employee-form label {
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

.edit-employee-form input,
.edit-employee-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    outline: none;
}

.edit-employee-form input:focus,
.edit-employee-form select:focus {
    border-color: #db2777;
    box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.12);
}

.edit-employee-form input[readonly] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

.edit-employee-form small {
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.5;
}

.edit-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

@media (max-width: 700px) {
    .edit-employee-form {
        grid-template-columns: 1fr;
    }
}

.employee-status-form {
    margin: 0;
    padding: 0;
}

.employee-menu .status-menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: none;
    background: transparent;
    color: #333;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

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

.employee-menu .status-menu-button i {
    width: 18px;
}

.alert-message {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.alert-error {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}

.alert-message i {
    font-size: 17px;
}

.reset-password-card {
    padding: 24px;
}

.reset-employee-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 18px;
    border-radius: 12px;
    background: #f9fafb;
}

.reset-employee-avatar {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fce7f3;
    color: #db2777;
    font-size: 22px;
}

.reset-employee-summary span {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.reset-employee-summary h3 {
    margin: 4px 0;
    color: #111827;
    font-size: 17px;
}

.reset-employee-summary p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.password-warning {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    background: #fffbeb;
}

.password-warning > i {
    margin-top: 3px;
    font-size: 18px;
}

.password-warning strong {
    font-size: 14px;
}

.password-warning p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

.reset-password-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

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

.reset-password-form label {
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    width: 100%;
    padding: 12px 46px 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    outline: none;
}

.password-input-wrapper input:focus {
    border-color: #db2777;
    box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.12);
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);

    width: 36px;
    height: 36px;
    padding: 0;

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

    border: none;
    border-radius: 8px;

    background: transparent;
    color: #6b7280;

    cursor: pointer;
}

.password-toggle:hover {
    background: #f3f4f6;
    color: #db2777;
}

.reset-password-form small {
    min-height: 18px;
    color: #9ca3af;
    font-size: 12px;
}

.password-match-success {
    color: #15803d !important;
}

.password-match-error {
    color: #dc2626 !important;
}

@media (max-width: 700px) {
    .reset-password-form {
        grid-template-columns: 1fr;
    }
}

.filter-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.product-count {
    color: #9ca3af;
    font-size: 15px;
    font-weight: 500;
}

/* ==========================================
   PRODUCT MENU — FINAL OVERRIDES
========================================== */

.section-header .add-btn {
    width: auto;
    flex-shrink: 0;
}

.employee-card .product-menu {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 200;
}

.employee-card .product-menu-btn {
    width: 40px !important;
    height: 40px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: #f7f9fc !important;
    color: #6b7280 !important;
    font-size: 18px;
    cursor: pointer;
}

.employee-card .product-menu-btn:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}

.employee-card .product-menu-dropdown {
    display: none;
    position: absolute;
    top: 46px;
    right: 0;
    width: 220px;
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 201;
}

.employee-card .product-menu.active .product-menu-dropdown {
    display: block;
}

.employee-card .product-menu-dropdown a,
.employee-card .product-menu-dropdown .product-status-button {
    width: 100%;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: none;
    border-radius: 0;
    background: transparent !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.employee-card .product-menu-dropdown a {
    color: #374151;
}

.employee-card .product-menu-dropdown a:hover,
.employee-card .product-menu-dropdown .product-status-button:hover {
    background: #f5f7fb !important;
}

.employee-card .product-menu-dropdown i {
    width: 18px;
    flex-shrink: 0;
}

.employee-card .product-status-form {
    margin: 0;
    padding: 0;
}

.employee-card .product-status-button.danger-link {
    color: #dc2626 !important;
}

.employee-card .product-status-button.success-link {
    color: #16a34a !important;
}

/* ==========================================
   ADMIN TRANSFER CARD MENU
========================================== */

.employee-card {
    position: relative;
    overflow: visible !important;
}


.transfer-card-menu {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 100;
}


.transfer-menu-button {
    all: unset;
    box-sizing: border-box;

    width: 40px;
    height: 40px;

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

    border-radius: 10px;

    color: #6b7280;
    background: transparent;

    cursor: pointer;
}


.transfer-menu-button:hover {
    background: #f3f4f6;
    color: #2563eb;
}


.transfer-menu-dropdown {
    display: none;

    position: absolute;
    top: 46px;
    right: 0;

    min-width: 180px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.12);

    z-index: 1000;
}


.transfer-card-menu.active
.transfer-menu-dropdown {
    display: block;
}


.transfer-menu-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    padding: 11px 12px;

    color: #374151;
    text-decoration: none;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;
}


.transfer-menu-dropdown a:hover {
    color: #2563eb;
    background: #eff6ff;
}

/* ==========================================
   ADMIN TRANSFER PROGRESS BAR — FINAL FIX
========================================== */

.employee-card .progress-tracker {
    position: relative;
    margin-top: 30px;
    padding: 0 8px 10px;
}


/* Reset styles inherited from the lifecycle page */

.employee-card .progress-line {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: 18px !important;

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

    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    background: transparent !important;
    z-index: auto !important;
    overflow: visible !important;
}


/* The horizontal line */

.employee-card .progress-line::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 9px;
    right: 9px;

    transform: translateY(-50%);

    width: auto;
    height: 4px;

    background: #e5e7eb;
    border-radius: 10px;

    z-index: 0;
}


/* The circles */

.employee-card .progress-line .step {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    flex: 0 0 18px;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    z-index: 2 !important;
}


/* Labels below the line */

.employee-card .progress-labels {
    position: static !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    font-size: 12px;
    font-weight: 600;
    color: #666;
}


/* Individual labels */

.employee-card .progress-labels span {
    position: static !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 1.4 !important;

    transform: none !important;
    white-space: nowrap;
}

/* ==========================================
   ADMIN TRANSFER FILTERS
========================================== */

.transfer-filter-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


.transfer-filter-form .search-box {
    flex: 1 1 240px;
}


.transfer-filter-form select {
    flex: 1 1 170px;
    min-width: 160px;
}


.transfer-filter-button {
    all: unset;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 18px;

    color: #ffffff;
    background: #2563eb;

    border-radius: 10px;

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

    cursor: pointer;
}


.transfer-filter-button:hover {
    background: #1d4ed8;
}


.transfer-clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 44px;
    padding: 0 16px;

    color: #4b5563;
    background: #f3f4f6;

    border-radius: 10px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}


.transfer-clear-filter:hover {
    color: #dc2626;
    background: #fee2e2;
}


@media (max-width: 700px) {

    .transfer-filter-form {
        align-items: stretch;
    }

    .transfer-filter-form .search-box,
    .transfer-filter-form select,
    .transfer-filter-button,
    .transfer-clear-filter {
        flex: 1 1 100%;
        width: 100%;
    }

}

/* ==========================================
   ADMIN TRANSFER HISTORY
========================================== */

.admin-transfer-timeline .timeline-content p {
    margin: 5px 0;
}


.admin-transfer-timeline .timeline-content strong {
    color: #374151;
}


.admin-transfer-timeline .timeline-remarks {
    margin-top: 9px !important;
    padding: 10px 12px;

    color: #4b5563;
    background: #f9fafb;

    border-left: 3px solid #2563eb;
    border-radius: 6px;
}


.admin-transfer-timeline .timeline-content small {
    display: block;
    margin-top: 8px;

    color: #6b7280;
}

/* ==========================================
   ADMIN TRANSFER DISCREPANCIES
========================================== */

.discrepancy-summary-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin: 20px 0;
    padding: 18px;

    color: #991b1b;
    background: #fef2f2;

    border: 1px solid #fecaca;
    border-radius: 12px;
}

.discrepancy-summary-banner.resolved {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.discrepancy-summary-banner.resolved
.discrepancy-summary-icon {
    color: #16a34a;
    background: #dcfce7;
}

.discrepancy-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    color: #dc2626;
    background: #fee2e2;

    border-radius: 50%;
}


.discrepancy-summary-banner h3 {
    margin: 0 0 5px;
}


.discrepancy-summary-banner p {
    margin: 0;
}


.discrepancy-card-list {
    display: grid;
    gap: 18px;
}


.discrepancy-report-card {
    padding: 20px;

    background: #ffffff;

    border: 1px solid #fecaca;
    border-left: 5px solid #dc2626;
    border-radius: 12px;
}


.discrepancy-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 18px;
}


.discrepancy-report-header h3 {
    margin: 5px 0 0;

    color: #111827;
}


.discrepancy-report-number {
    color: #6b7280;

    font-size: 13px;
    font-weight: 600;
}


.discrepancy-missing-badge {
    flex-shrink: 0;

    padding: 7px 11px;

    color: #991b1b;
    background: #fee2e2;

    border-radius: 999px;

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


.discrepancy-quantity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    margin-bottom: 18px;
}


.discrepancy-quantity-grid div {
    padding: 13px;

    text-align: center;

    background: #f9fafb;

    border: 1px solid #e5e7eb;
    border-radius: 9px;
}


.discrepancy-quantity-grid span {
    display: block;

    margin-bottom: 5px;

    color: #6b7280;
    font-size: 12px;
}


.discrepancy-quantity-grid strong {
    color: #111827;
    font-size: 18px;
}


.discrepancy-description {
    padding: 14px;

    background: #f9fafb;

    border-radius: 9px;
}


.discrepancy-description p {
    margin: 8px 0 0;

    color: #4b5563;
    line-height: 1.6;
}


.discrepancy-reporter {
    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid #e5e7eb;
}


.discrepancy-reporter p {
    margin: 4px 0;

    color: #4b5563;
}


.discrepancy-reporter small {
    display: block;

    margin-top: 8px;

    color: #6b7280;
}


.discrepancy-empty-state i {
    color: #16a34a;
}


@media (max-width: 600px) {

    .discrepancy-report-header {
        flex-direction: column;
    }

    .discrepancy-quantity-grid {
        grid-template-columns: 1fr;
    }

}

/* ==========================================
   TRANSFER DISCREPANCY INDICATOR
========================================== */

.transfer-discrepancy-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: fit-content;

    margin: 14px 0 4px;
    padding: 8px 12px;

    color: #991b1b;
    background: #fee2e2;

    border: 1px solid #fecaca;
    border-radius: 999px;

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


.transfer-discrepancy-badge i {
    color: #dc2626;
}

.transfer-discrepancy-badge.resolved {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.transfer-discrepancy-badge.resolved i {
    color: #16a34a;
}

/* ==========================================
   ADMIN TRANSFER DETAILS PROGRESS BAR
========================================== */

.status-card .progress-tracker {
    position: relative;

    margin-top: 30px;
    padding: 0 10px 10px;
}


/* Reset conflicting lifecycle progress-line styles */

.status-card .progress-tracker .progress-line {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: 20px !important;

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

    margin: 0 0 14px !important;
    padding: 0 !important;

    background: transparent !important;

    z-index: auto !important;
    overflow: visible !important;
}


/* Horizontal line connecting the circles */

.status-card .progress-tracker .progress-line::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 10px;
    right: 10px;

    transform: translateY(-50%);

    height: 4px;

    background: #e5e7eb;
    border-radius: 10px;

    z-index: 0;
}


/* Progress circles */

.status-card .progress-tracker .progress-line .step {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex: 0 0 20px;

    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;

    background: #ffffff;
    border: 4px solid #d1d5db;
    border-radius: 50%;

    z-index: 2 !important;
}


/* Completed circles */

.status-card .progress-tracker .progress-line .step.completed {
    background: #2563eb;
    border-color: #2563eb;
}


/* Labels below the progress line */

.status-card .progress-tracker .progress-labels {
    position: static !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    color: #555;
    font-size: 13px;
    font-weight: 600;
}


/* Individual labels */

.status-card .progress-tracker .progress-labels span {
    position: static !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 4px !important;

    text-align: center !important;
    line-height: 1.4 !important;

    transform: none !important;
    white-space: nowrap;
}


/* Smaller screens */

@media (max-width: 600px) {

    .status-card .progress-tracker {
        padding-left: 0;
        padding-right: 0;
    }

    .status-card .progress-tracker .progress-labels {
        font-size: 10px;
    }

}

/* ==========================================
   ADMIN DASHBOARD REAL ANALYTICS
========================================== */

.analytics-header form {
    margin: 0;
}


.analytics-period-label {
    margin: 4px 0 20px;

    color: #6b7280;
    font-size: 14px;
}


.analytics-period-label strong {
    color: #374151;
}

/* ==========================================
   ADMIN REPORTS
========================================== */

.report-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}


.report-filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;

    flex: 1 1 220px;
}


.report-filter-field label {
    color: #374151;

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


.report-filter-field select {
    width: 100%;
}


.report-apply-button {
    all: unset;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 18px;

    color: #ffffff;
    background: #2563eb;

    border-radius: 10px;

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

    cursor: pointer;
}


.report-apply-button:hover {
    background: #1d4ed8;
}


.report-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 16px;

    color: #4b5563;
    background: #f3f4f6;

    border-radius: 10px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}


.report-clear-button:hover {
    color: #dc2626;
    background: #fee2e2;
}


.report-period-summary {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 18px;
    padding-top: 16px;

    color: #6b7280;

    border-top: 1px solid #e5e7eb;

    font-size: 14px;
}


.report-period-summary i {
    color: #2563eb;
}


.report-period-summary strong {
    color: #374151;
}


.report-section-description {
    margin: 5px 0 0;

    color: #6b7280;
    font-size: 14px;
}


.report-table-container {
    width: 100%;
    overflow-x: auto;
}


.report-table {
    width: 100%;
    min-width: 650px;
}


.report-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    color: #2563eb;
    background: #eff6ff;

    border-radius: 50%;

    font-weight: 800;
}


.report-no-discrepancies i {
    color: #16a34a;
}


.report-discrepancy-list {
    display: grid;
    gap: 18px;
}


.report-discrepancy-card {
    padding: 20px;

    background: #ffffff;

    border: 1px solid #fecaca;
    border-left: 5px solid #dc2626;
    border-radius: 12px;
}


.report-discrepancy-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}


.report-discrepancy-top h3 {
    margin: 5px 0 0;

    color: #111827;
}


.report-transfer-reference {
    color: #6b7280;

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


.report-discrepancy-description {
    margin-top: 16px;
    padding: 14px;

    color: #4b5563;
    background: #f9fafb;

    border-radius: 9px;

    line-height: 1.6;
}


.report-discrepancy-footer {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(140px, 1fr))
        auto;
    gap: 15px;
    align-items: end;

    margin-top: 17px;
    padding-top: 15px;

    border-top: 1px solid #e5e7eb;
}


.report-discrepancy-footer div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.report-discrepancy-footer span {
    color: #6b7280;
    font-size: 12px;
}


.report-discrepancy-footer strong {
    color: #374151;
    font-size: 14px;
}


.report-view-transfer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 40px;
    padding: 0 14px;

    color: #2563eb;
    background: #eff6ff;

    border-radius: 9px;

    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}


.report-view-transfer:hover {
    color: #ffffff;
    background: #2563eb;
}


@media (max-width: 800px) {

    .report-discrepancy-footer {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 600px) {

    .report-filter-form {
        align-items: stretch;
    }


    .report-filter-field,
    .report-apply-button,
    .report-clear-button {
        flex: 1 1 100%;
        width: 100%;
    }


    .report-discrepancy-top {
        flex-direction: column;
    }


    .report-discrepancy-footer {
        grid-template-columns: 1fr;
    }


    .report-view-transfer {
        width: 100%;
    }

}

/* ==========================================
   REPORT EMPLOYEE ACTIVITY
========================================== */

.report-activity-table {
    min-width: 900px;
}


.report-employee-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.report-employee-name strong {
    color: #111827;
}


.report-employee-name small {
    color: #6b7280;
    font-size: 12px;
}


.report-account-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    border-radius: 999px;

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


.report-account-badge.is-active {
    color: #15803d;
    background: #dcfce7;
}


.report-account-badge.is-inactive {
    color: #b91c1c;
    background: #fee2e2;
}

/* ==========================================
   REPORT CSV EXPORT
========================================== */

.report-export-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-decoration: none;
    white-space: nowrap;
}


@media (max-width: 600px) {

    .report-export-button {
        width: 100%;
        margin-top: 12px;
    }

}

/* ==========================================
   ADMIN AUDIT LOGS
========================================== */

.audit-section-description {
    margin: 5px 0 0;

    color: #6b7280;
    font-size: 14px;
}


.audit-filter-form {
    display: grid;
    grid-template-columns:
        minmax(260px, 2fr)
        repeat(4, minmax(150px, 1fr));
    gap: 14px;
    align-items: end;
}


.audit-search-field,
.audit-filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.audit-search-field label,
.audit-filter-field label {
    color: #374151;

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


.audit-search-input {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 44px;
    padding: 0 13px;

    background: #ffffff;

    border: 1px solid #d1d5db;
    border-radius: 10px;
}


.audit-search-input:focus-within {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}


.audit-search-input i {
    color: #9ca3af;
}


.audit-search-input input {
    width: 100%;

    padding: 0;

    color: #111827;
    background: transparent;

    border: none;
    outline: none;
}


.audit-filter-field select {
    width: 100%;
}


.audit-filter-actions {
    display: flex;
    gap: 10px;

    grid-column: 1 / -1;
}


.audit-period-summary {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 18px;
    padding-top: 16px;

    color: #6b7280;

    border-top: 1px solid #e5e7eb;

    font-size: 14px;
}


.audit-period-summary i {
    color: #2563eb;
}


.audit-period-summary strong {
    color: #374151;
}


.audit-log-list {
    display: grid;
    gap: 16px;
}


.audit-log-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 13px;
}


.audit-log-card:hover {
    border-color: #bfdbfe;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06);
}


.audit-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 12px;

    font-size: 18px;
}


.audit-action-icon.employee {
    color: #2563eb;
    background: #dbeafe;
}


.audit-action-icon.product {
    color: #db2777;
    background: #fce7f3;
}


.audit-action-icon.transfer {
    color: #7c3aed;
    background: #ede9fe;
}


.audit-action-icon.security {
    color: #15803d;
    background: #dcfce7;
}


.audit-action-icon.other {
    color: #d97706;
    background: #fef3c7;
}


.audit-log-content {
    min-width: 0;
}


.audit-log-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}


.audit-log-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


.audit-log-title-row h3 {
    margin: 0;

    color: #111827;
}


.audit-log-heading p {
    margin: 7px 0 0;

    color: #4b5563;

    line-height: 1.6;
}


.audit-log-id {
    flex: 0 0 auto;

    color: #6b7280;

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


.audit-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}


.audit-category-badge.employee {
    color: #1d4ed8;
    background: #dbeafe;
}


.audit-category-badge.product {
    color: #be185d;
    background: #fce7f3;
}


.audit-category-badge.transfer {
    color: #6d28d9;
    background: #ede9fe;
}


.audit-category-badge.security {
    color: #15803d;
    background: #dcfce7;
}


.audit-category-badge.other {
    color: #b45309;
    background: #fef3c7;
}


.audit-log-meta {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(130px, 1fr));
    gap: 15px;

    margin-top: 16px;
    padding-top: 15px;

    border-top: 1px solid #e5e7eb;
}


.audit-log-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}


.audit-log-meta span {
    color: #6b7280;

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

    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.audit-log-meta strong {
    color: #374151;

    font-size: 13px;
    overflow-wrap: anywhere;
}


.audit-log-meta small {
    color: #6b7280;

    font-size: 12px;
}


.audit-transfer-link {
    color: #2563eb;

    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}


.audit-transfer-link:hover {
    text-decoration: underline;
}


.audit-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid #e5e7eb;
}


.audit-page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}


.audit-page-button,
.audit-page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 12px;

    color: #374151;
    background: #ffffff;

    border: 1px solid #d1d5db;
    border-radius: 9px;

    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}


.audit-page-number {
    min-width: 38px;
    padding: 0 9px;
}


.audit-page-button:hover,
.audit-page-number:hover,
.audit-page-number.active {
    color: #ffffff;
    background: #2563eb;

    border-color: #2563eb;
}


.audit-page-button.disabled {
    color: #9ca3af;
    background: #f3f4f6;

    cursor: not-allowed;
}


.audit-page-ellipsis {
    color: #6b7280;
}


@media (max-width: 1150px) {

    .audit-filter-form {
        grid-template-columns:
            repeat(2, minmax(180px, 1fr));
    }


    .audit-search-field {
        grid-column: 1 / -1;
    }


    .audit-log-meta {
        grid-template-columns:
            repeat(3, minmax(130px, 1fr));
    }

}


@media (max-width: 700px) {

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


    .audit-search-field {
        grid-column: auto;
    }


    .audit-filter-actions {
        flex-direction: column;
    }


    .audit-filter-actions .report-apply-button,
    .audit-filter-actions .report-clear-button {
        width: 100%;
    }


    .audit-log-card {
        grid-template-columns: 1fr;
    }


    .audit-log-heading {
        flex-direction: column;
    }


    .audit-log-meta {
        grid-template-columns: 1fr 1fr;
    }


    .audit-pagination {
        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .audit-log-meta {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   ADMIN DISCREPANCY MANAGEMENT
========================================================= */


/* -------------------------
   PAGE
-------------------------- */

.discrepancy-page {
    padding-bottom: 100px;
}


/* -------------------------
   SUMMARY CARDS
-------------------------- */

.discrepancy-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}


.discrepancy-summary-card {
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}


.discrepancy-summary-card h3 {
    margin: 0 0 6px;
    font-size: 18px;
}


.discrepancy-summary-card p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}


.discrepancy-summary-card .transfer-id {
    margin-top: 18px;
    font-size: 32px;
    font-weight: 800;
}


.open-summary {
    border-left: 5px solid #ef4444;
}


.open-summary .transfer-id {
    color: #dc2626;
}


.resolved-summary {
    border-left: 5px solid #22c55e;
}


.resolved-summary .transfer-id {
    color: #16a34a;
}


/* -------------------------
   DISCREPANCY LIST
-------------------------- */

.discrepancy-list {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(360px, 1fr)
    );
    gap: 22px;
    margin-top: 20px;
}


/* -------------------------
   INDIVIDUAL REPORT CARD
-------------------------- */

.discrepancy-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.discrepancy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}


/* -------------------------
   CARD HEADER
-------------------------- */

.discrepancy-card .employee-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}


.discrepancy-card .employee-top h3 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}


.discrepancy-card .employee-top p {
    margin: 6px 0 0;
    color: #2563eb;
    font-weight: 700;
}


/* -------------------------
   RESOLUTION STATUS
-------------------------- */

.discrepancy-card .status-badge.open {
    background: #fee2e2;
    color: #b91c1c;
}


.discrepancy-card .status-badge.resolved {
    background: #dcfce7;
    color: #15803d;
}


/* -------------------------
   DETAILS
-------------------------- */

.discrepancy-card .employee-details {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
}


.discrepancy-card .detail-row {
    display: grid;
    grid-template-columns: 150px 15px 1fr;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #e5e7eb;
}


.discrepancy-card .detail-row:last-child {
    border-bottom: none;
}


.discrepancy-card .detail-label {
    color: #64748b;
    font-size: 14px;
}


.discrepancy-card .detail-value {
    color: #111827;
    word-break: break-word;
}


/* -------------------------
   EMPLOYEE DESCRIPTION
-------------------------- */

.discrepancy-card > div[style*="background:#f8fafc"] {
    border-left: 4px solid #f59e0b;
}


.discrepancy-card > div[style*="background:#f8fafc"] strong {
    color: #92400e;
}


.discrepancy-card > div[style*="background:#f8fafc"] p {
    color: #374151;
}


/* -------------------------
   RESOLUTION AREA
-------------------------- */

.discrepancy-card > div[style*="background:#f0fdf4"] {
    border-left: 4px solid #22c55e;
}


.discrepancy-card > div[style*="background:#f0fdf4"] strong {
    color: #166534;
}


/* -------------------------
   RESOLUTION FORM
-------------------------- */

.discrepancy-card form {
    padding-top: 4px;
}


.discrepancy-card form label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}


.discrepancy-card form textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.discrepancy-card form textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* -------------------------
   BUTTONS
-------------------------- */

.discrepancy-card .add-btn,
.discrepancy-card .primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    margin-top: 12px;
}


/* -------------------------
   MOBILE
-------------------------- */

@media (max-width: 700px) {

    .discrepancy-summary-grid {
        grid-template-columns: 1fr;
    }


    .discrepancy-list {
        grid-template-columns: 1fr;
    }


    .discrepancy-card {
        padding: 18px;
    }


    .discrepancy-card .detail-row {
        grid-template-columns: 120px 10px 1fr;
    }

}

/* =========================================================
   EMPLOYEE REPORTS
========================================================= */

.employee-report-page {
    padding-bottom: 100px;
}


.employee-report-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 20px 0;
}


.employee-report-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}


.employee-report-card > i {
    font-size: 24px;
    margin-bottom: 5px;
}


.employee-report-number {
    font-size: 30px;
    font-weight: 800;
}


.employee-report-card strong {
    font-size: 15px;
}


.employee-report-card p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}


.employee-report-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}


.employee-report-status {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.employee-report-status strong {
    font-size: 20px;
}


@media (max-width: 900px) {

    .employee-report-summary {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .employee-report-summary {
        grid-template-columns: 1fr;
    }


    .employee-report-status-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .report-table-container {
        overflow-x: auto;
    }

}

/* Small Report button inside Receipt Check */

.discrepancy-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;

    padding: 7px 12px;

    background: #DC2626;
    color: white;

    border-radius: 8px;

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

    text-decoration: none;

    white-space: nowrap;
    cursor: pointer;
}

.discrepancy-report-btn:hover {
    background: #B91C1C;
}

.branch-phone-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}


/* ==========================================
   BRANCH PHONE ACTION BUTTONS
========================================== */

.branch-phone-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.branch-phone-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.branch-phone-edit-btn,
.branch-phone-delete-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    padding: 0 !important;

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

    border-radius: 9px;
    cursor: pointer;

    opacity: 1 !important;
    flex: 0 0 36px;
}

/* EDIT — BLUE */
.branch-phone-edit-btn {
    background: #dbeafe !important;
    color: #2563eb !important;
    border: 1px solid #93c5fd !important;
}

.branch-phone-edit-btn:hover {
    background: #2563eb !important;
    color: white !important;
}

/* DELETE — RED */
.branch-phone-delete-btn {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
}

.branch-phone-delete-btn:hover {
    background: #dc2626 !important;
    color: white !important;
}

/* Make icons clearly visible */
.branch-phone-edit-btn i,
.branch-phone-delete-btn i {
    color: inherit !important;
    opacity: 1 !important;
}

/* ==========================================
   BRANCH CONTACT ROW
========================================== */

.branch-contact-row {
    margin: 1em 0;
}

.branch-contact-row > i {
    margin-right: 4px;
}

/* ==========================================
   EMPLOYEE CHANGE PASSWORD
========================================== */

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

.change-password-form .edit-form-actions {
    grid-column: 1;
}

/* ==========================================
   CANCELLED TRANSFER
========================================== */

.cancelled-status {
    color: #dc2626;
}


.cancelled-progress-message {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 16px;
    margin-top: 15px;

    color: #991b1b;
    background: #fef2f2;

    border: 1px solid #fecaca;
    border-radius: 10px;
}


.cancelled-transfer-banner {
    display: flex;
    gap: 14px;

    padding: 18px;
    margin-bottom: 20px;

    color: #991b1b;
    background: #fef2f2;

    border: 1px solid #fecaca;
    border-radius: 14px;
}


.cancelled-transfer-banner h3 {
    margin-top: 0;
    margin-bottom: 10px;
}


.cancelled-transfer-banner p {
    margin: 6px 0;
}


.cancelled-transfer-icon {
    font-size: 22px;
    color: #dc2626;
}


.cancel-transfer-panel {
    margin-top: 22px;
    padding: 18px;

    background: #fff7f7;

    border: 1px solid #fecaca;
    border-radius: 12px;
}


.cancel-transfer-panel h3 {
    margin-top: 0;
    color: #b91c1c;
}


.cancel-transfer-panel label {
    display: block;

    margin-top: 14px;
    margin-bottom: 8px;

    font-weight: 600;
}


.cancel-transfer-panel textarea {
    width: 100%;

    padding: 12px;

    border: 1px solid #ddd;
    border-radius: 10px;

    resize: vertical;

    box-sizing: border-box;
    font-family: inherit;
}


.danger-btn {
    width: 100%;

    margin-top: 12px;
    padding: 12px;

    color: white;
    background: #dc2626;

    border: none;
    border-radius: 10px;

    cursor: pointer;
    font-weight: 600;
}


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


.cancelled-action-message {
    padding: 20px;

    text-align: center;

    color: #991b1b;
    background: #fef2f2;

    border: 1px solid #fecaca;
    border-radius: 12px;
}


.cancelled-action-message i {
    font-size: 24px;
    color: #dc2626;
}

.status-badge.cancelled {
    background: #FEE2E2;
    color: #DC2626;
}

/* ==========================================
   BRANCH STATUS MANAGEMENT
========================================== */

.branch-status-form {
    margin-top: 18px;
}


.branch-status-btn {
    width: 100%;

    padding: 11px 14px;

    border: none;
    border-radius: 10px;

    font-weight: 600;
    cursor: pointer;
}


.branch-status-btn.deactivate {
    color: #b91c1c;
    background: #fee2e2;
}


.branch-status-btn.deactivate:hover {
    background: #fecaca;
}


.branch-status-btn.activate {
    color: #166534;
    background: #dcfce7;
}


.branch-status-btn.activate:hover {
    background: #bbf7d0;
}

/* Branch category in Admin Audit Logs */
.audit-category-badge.branch {
    color: #0369a1;
    background: #e0f2fe;
}

/* ==========================================
   IN-APP NOTIFICATION BELL
========================================== */

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-wrapper {
    position: relative;
}

.notification {
    position: relative;
    border: none;
    color: #374151;
    text-decoration: none;
}

.notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    z-index: 1200;
    width: 360px;
    max-width: calc(100vw - 30px);
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15);
}

.notification-dropdown.open {
    display: block;
}

.notification-dropdown-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.notification-dropdown-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-dropdown-header strong {
    color: #111827;
}

.notification-dropdown-header span {
    color: #6b7280;
    font-size: 12px;
}

.notification-dropdown-header form,
.notification-item-form {
    margin: 0;
}

.notification-mark-all {
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.notification-list {
    display: flex;
    flex-direction: column;
}

.notification-item {
    width: 100%;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
    display: grid;
    grid-template-columns: 36px 1fr 10px;
    gap: 10px;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
}

.notification-item:hover {
    background: #f9fafb;
}

.notification-item.unread {
    background: #eff6ff;
}

.notification-item.unread:hover {
    background: #dbeafe;
}

.notification-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-item-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notification-item-content strong {
    color: #111827;
    font-size: 14px;
}

.notification-item-content > span {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.4;
}

.notification-item-content small {
    color: #9ca3af;
    font-size: 11px;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: #2563eb;
}

.notification-empty {
    min-height: 120px;
    padding: 24px;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.notification-empty i {
    font-size: 24px;
}

@media (max-width: 600px) {

    .header-actions {
        gap: 8px;
    }

    .notification-dropdown {
        position: fixed;
        top: 78px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 100px);
    }
}

/* ==========================================
   ADMIN TRANSFER DISCREPANCY RESOLUTION
========================================== */

.discrepancy-report-card.resolved {
    border-color: #bbf7d0;
    border-left-color: #16a34a;
}

/* ======================================================
   MOBILE RESPONSIVENESS PASS — PHASE 1
   Global application structure
   Added after the existing rules so desktop styling
   remains unchanged while phone layouts are normalized.
====================================================== */

/* Give app pages a predictable fluid width. */
.dashboard {
    width: 100%;
    min-width: 0;
}

/* Prevent flexible children from forcing page overflow. */
.dashboard-header,
.logo-section,
.header-actions,
.card,
.section-header,
.activity-item,
.notification-item {
    min-width: 0;
}

.logo-section > div,
.section-header > div,
.notification-item-content {
    min-width: 0;
}

/* Header-specific logout should behave like a compact action,
   not inherit the full-width profile-page logout rule. */
.header-actions .logout-btn {
    width: auto;
    margin-bottom: 0;
    white-space: nowrap;
}

/* Bottom navigation items should share the available width
   instead of allowing long labels to widen the page. */
.bottom-nav {
    gap: 0;
}

.bottom-nav a {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
}

.bottom-nav a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive media/content safety. */
.dashboard img,
.dashboard svg,
.dashboard canvas {
    max-width: 100%;
}


/* ------------------------------------------------------
   TABLET / SMALL LAPTOP
------------------------------------------------------ */

@media (max-width: 768px) {

    .dashboard {
        padding: 14px;
        padding-bottom: 92px;
    }

    /* Keep identity and actions on the same header when
       possible instead of forcing a tall desktop-style stack. */
    .dashboard-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .logo-section {
        flex: 1 1 220px;
        gap: 12px;
    }

    .logo-circle {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        font-size: 17px;
    }

    .logo-section h1 {
        margin: 0;
        text-align: left;
        font-size: 22px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .logo-section p {
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.35;
    }

    .header-actions {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 8px;
    }

    .notification {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        font-size: 18px;
    }

    .header-actions .logout-btn {
        min-height: 44px;
        padding: 10px 13px;
        font-size: 14px;
    }

    .card {
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .section-header {
        gap: 12px;
        margin-bottom: 18px;
    }

    /* Dashboard summaries are more useful as compact
       two-column mobile cards than one very long column. */
    .overview-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .overview-item {
        min-width: 0;
        padding: 17px 10px;
        border-radius: 14px;
    }

    .overview-item i {
        margin-bottom: 8px;
        font-size: 25px;
    }

    .overview-item h3 {
        margin: 6px 0;
        font-size: 14px;
    }

    .overview-item span {
        margin: 6px 0;
        font-size: 29px;
    }

    .overview-item p {
        font-size: 12px;
    }

    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .action-card {
        min-width: 0;
        padding: 18px 10px;
        border-radius: 14px;
    }

    .action-card i {
        margin-bottom: 9px;
        font-size: 25px;
    }

    .action-card p {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .chart-box {
        height: 280px;
    }

    .activity-item {
        gap: 10px;
        padding: 14px 0;
    }

    .activity-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        font-size: 16px;
    }

    .activity-item h4,
    .activity-item p {
        overflow-wrap: anywhere;
    }

    .bottom-nav {
        padding: 10px 4px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .bottom-nav a {
        gap: 4px;
    }

    .bottom-nav a i {
        font-size: 17px;
    }

    .bottom-nav a span {
        font-size: 10px;
    }

    .notification-dropdown {
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 92px);
        border-radius: 14px;
    }

    .notification-dropdown-header {
        padding: 13px 14px;
    }

    .notification-item {
        grid-template-columns: 34px minmax(0, 1fr) 8px;
        gap: 9px;
        padding: 12px 14px;
    }

    .notification-item-icon {
        width: 34px;
        height: 34px;
    }
}


/* ------------------------------------------------------
   PHONE
------------------------------------------------------ */

@media (max-width: 480px) {

    .dashboard {
        padding: 10px;
        padding-bottom: 84px;
    }

    .dashboard-header {
        gap: 9px;
        padding: 12px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .logo-section {
        flex: 1 1 150px;
        gap: 9px;
    }

    .logo-circle {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 14px;
    }

    .logo-section h1 {
        font-size: 19px;
    }

    /* Page subtitles consume a lot of the header on phones.
       The page content still carries the full description. */
    .dashboard-header .logo-section p {
        display: none;
    }

    .header-actions {
        gap: 6px;
    }

    .notification {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 16px;
    }

    .notification-count {
        top: -4px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        font-size: 10px;
    }

    .header-actions .logout-btn {
        min-height: 40px;
        padding: 9px 10px;
        font-size: 13px;
    }

    .header-actions .logout-btn i {
        margin: 0;
    }

    .card {
        padding: 13px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .card h2,
    .section-header h2 {
        font-size: 20px;
        line-height: 1.25;
    }

    .section-header {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 15px;
    }

    .section-header .add-btn {
        flex-shrink: 0;
        padding: 10px 12px;
        font-size: 13px;
    }

    .overview-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .overview-item {
        padding: 14px 8px;
    }

    .overview-item i {
        font-size: 22px;
    }

    .overview-item span {
        font-size: 26px;
    }

    /* Preserve two useful action columns even under the
       older 480px rule that previously forced one column. */
    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .action-card {
        padding: 15px 8px;
    }

    .chart-box {
        height: 245px;
    }

    .bottom-nav {
        padding-top: 8px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .bottom-nav a {
        padding-left: 2px;
        padding-right: 2px;
    }

    .bottom-nav a i {
        font-size: 16px;
    }

    .bottom-nav a span {
        font-size: 9px;
    }

    .notification-dropdown {
        top: 62px;
        right: 8px;
        left: 8px;
        max-height: calc(100dvh - 76px);
    }

    .notification-dropdown-header {
        gap: 8px;
        padding: 12px;
    }

    .notification-mark-all {
        font-size: 11px;
    }

    .notification-item {
        padding: 11px 12px;
    }

    .notification-item-content strong {
        font-size: 13px;
    }

    .notification-item-content > span {
        font-size: 12px;
    }

    /* Login page mobile breathing room. */
    .login-container {
        margin: 12px;
        padding: 24px 18px;
        border-radius: 16px;
    }
}


/* ------------------------------------------------------
   VERY SMALL PHONE
------------------------------------------------------ */

@media (max-width: 340px) {

    .dashboard {
        padding: 8px;
        padding-bottom: 82px;
    }

    .dashboard-header {
        padding: 10px;
    }

    .logo-section {
        flex-basis: 135px;
    }

    .logo-circle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 13px;
    }

    .logo-section h1 {
        font-size: 17px;
    }

    .notification {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    /* Admin logout keeps only its universally-understood
       icon when horizontal space becomes extremely tight. */
    .header-actions .logout-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        justify-content: center;
        overflow: hidden;
        font-size: 0;
    }

    .header-actions .logout-btn i {
        font-size: 14px;
    }

    .card {
        padding: 11px;
    }

    .bottom-nav a span {
        font-size: 8px;
    }
}

/* ======================================================
   MOBILE RESPONSIVENESS PASS — PHASE 2
   Employee transfer workflow:
   Create Transfer, View Transfers, Transfer Details
   Built on top of Phase 1 using the current STC ZIP.
====================================================== */

/* ------------------------------------------------------
   SHARED TRANSFER / FORM SAFETY
------------------------------------------------------ */

.form-container {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-container *,
.form-container *::before,
.form-container *::after {
    box-sizing: border-box;
}

.form-card,
.status-card {
    min-width: 0;
}

.form-card input,
.form-card select,
.form-card textarea {
    max-width: 100%;
}

.form-card textarea {
    overflow-wrap: anywhere;
}

.page-header h1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.detail-row span,
.detail-row strong,
.timeline-content,
.cancelled-transfer-banner > div {
    min-width: 0;
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------
   CREATE TRANSFER
------------------------------------------------------ */

#transferForm .action-description {
    max-width: 100%;
    overflow-wrap: anywhere;
}

#transferForm .items-table {
    margin-bottom: 0;
}

#transferForm .report-table-container {
    width: 100%;
    max-width: 100%;
}


/* ------------------------------------------------------
   EMPLOYEE VIEW TRANSFERS
------------------------------------------------------ */

#transferList .transfer-card > div:first-child {
    min-width: 0;
}

#transferList .transfer-card h3,
#transferList .transfer-card p {
    overflow-wrap: anywhere;
}

#transferList .view-btn {
    text-decoration: none;
    text-align: center;
}


/* ------------------------------------------------------
   TRANSFER DETAILS
------------------------------------------------------ */

.form-container > .status-card .status-top > div {
    min-width: 0;
}

.form-container > .status-card .status {
    display: inline-block;
}

.form-container .timeline-content {
    flex: 1 1 auto;
}

.form-container .cancelled-transfer-banner {
    min-width: 0;
}

.form-container .cancelled-progress-message span,
.form-container .info-message,
.form-container .completed-message p,
.form-container .cancelled-action-message {
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------
   TABLET / SMALL SCREEN
------------------------------------------------------ */

@media (max-width: 768px) {

    .form-container {
        max-width: 100%;
        padding: 14px;
        margin: 0 auto;
    }

    .page-header {
        gap: 12px;
        margin-bottom: 14px;
    }

    .page-header a {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        font-size: 18px;
    }

    .page-header h1 {
        margin: 0;
        font-size: 24px;
        line-height: 1.2;
    }

    .form-card,
    .status-card {
        padding: 18px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .form-card h2,
    .form-card h3,
    .status-card h2 {
        overflow-wrap: anywhere;
    }

    /* 16px prevents iOS Safari from zooming form fields. */
    .form-card input,
    .form-card select,
    .form-card textarea {
        min-height: 46px;
        padding: 11px 12px;
        font-size: 16px;
        border-radius: 10px;
    }

    .form-card textarea {
        min-height: 110px;
    }

    .secondary-btn,
    .submit-btn,
    .cancel-btn,
    .primary-btn,
    .danger-btn {
        min-height: 46px;
    }

    /* Create-transfer item table stays contained on phone. */
    #transferForm .report-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }

    #transferForm .items-table {
        min-width: 560px;
    }

    #transferForm .items-table th,
    #transferForm .items-table td {
        white-space: nowrap;
    }

    /* Employee transfer cards use a useful 2-column top row
       instead of squeezing all three elements horizontally. */
    #transferList .transfer-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px;
        padding: 16px;
        border-radius: 16px;
    }

    #transferList .transfer-card > div:nth-child(2) {
        align-self: start;
        justify-self: end;
    }

    #transferList .transfer-card .status {
        display: inline-block;
        padding: 7px 11px;
        white-space: nowrap;
        font-size: 12px;
    }

    #transferList .view-btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Search should never retain its old 260px minimum width. */
    .form-container .search-box {
        width: 100%;
        min-width: 0;
    }

    .form-container .search-box input {
        min-width: 0;
        margin-bottom: 0;
        padding: 0;
        min-height: 0;
        font-size: 16px;
    }

    .status-top {
        margin-bottom: 18px;
    }

    .progress-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 8px;
        padding: 8px 2px 12px;
    }

    .progress-step {
        min-width: 74px;
        scroll-snap-align: start;
    }

    .progress-step .circle {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .progress-step p {
        font-size: 11px;
        line-height: 1.2;
    }

    /* Transfer-details tables do not all have an outer
       scrolling wrapper, so make the table itself scrollable. */
    .form-container .items-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .form-container .items-table thead,
    .form-container .items-table tbody,
    .form-container .items-table tr {
        width: max-content;
        min-width: 100%;
    }

    .form-container .items-table th,
    .form-container .items-table td {
        min-width: 110px;
        padding: 10px;
        font-size: 13px;
        vertical-align: top;
    }

    .form-container .items-table th:first-child,
    .form-container .items-table td:first-child {
        min-width: 150px;
    }

    .form-container .items-table input,
    .form-container .items-table select,
    .form-container .items-table textarea {
        min-width: 110px;
        width: 100%;
    }

    .detail-row {
        padding: 12px 0;
    }

    .timeline-item {
        margin-bottom: 20px;
    }

    .timeline-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        margin-right: 12px;
        font-size: 14px;
    }

    .timeline-content h4 {
        font-size: 15px;
    }

    .timeline-content p {
        font-size: 13px;
    }

    .cancelled-transfer-banner {
        padding: 15px;
        gap: 11px;
    }

    .cancel-transfer-panel {
        padding: 15px;
    }

    .completed-message {
        padding: 22px 16px;
    }

    .completed-message i {
        font-size: 42px;
    }
}


/* ------------------------------------------------------
   PHONE
------------------------------------------------------ */

@media (max-width: 480px) {

    .form-container {
        padding: 10px;
    }

    .page-header {
        gap: 9px;
        margin-bottom: 10px;
    }

    .page-header a {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 10px;
        font-size: 16px;
    }

    .page-header h1 {
        font-size: 21px;
    }

    .form-card,
    .status-card {
        padding: 14px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .form-card h2 {
        font-size: 20px;
    }

    .form-card h3 {
        font-size: 17px;
    }

    .form-card label {
        margin-top: 13px;
        margin-bottom: 6px;
        font-size: 14px;
    }

    .action-description {
        margin-bottom: 14px;
        font-size: 13px;
    }

    /* Create-transfer actions become large, easy tap targets. */
    .button-group {
        flex-direction: column-reverse;
        gap: 8px;
        margin-top: 16px;
    }

    .button-group .cancel-btn,
    .button-group .submit-btn {
        width: 100%;
        min-height: 46px;
        margin: 0;
    }

    #transferForm hr {
        margin: 16px 0;
    }

    #transferList .transfer-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 14px;
        margin-bottom: 10px;
    }

    #transferList .transfer-card h3 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 17px;
    }

    #transferList .transfer-card p {
        margin: 6px 0;
        font-size: 13px;
        line-height: 1.4;
    }

    #transferList .view-btn {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .status-top {
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .status-top h2 {
        font-size: 20px;
    }

    .status-top p {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.4;
    }

    .form-container > .status-card .status {
        margin-top: 4px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .progress-container {
        margin-top: 10px;
    }

    .progress-step {
        min-width: 68px;
    }

    .progress-step .circle {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .progress-step p {
        font-size: 10px;
    }

    .form-container .items-table th,
    .form-container .items-table td {
        min-width: 100px;
        padding: 9px;
        font-size: 12px;
    }

    .form-container .items-table th:first-child,
    .form-container .items-table td:first-child {
        min-width: 135px;
    }

    .detail-row {
        gap: 4px;
        padding: 10px 0;
        font-size: 13px;
    }

    .detail-row strong {
        font-size: 13px;
    }

    .timeline {
        margin-top: 14px;
    }

    .timeline-item {
        margin-bottom: 16px;
    }

    .timeline-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        margin-right: 10px;
        font-size: 12px;
    }

    .timeline-content h4 {
        font-size: 14px;
    }

    .timeline-content p,
    .timeline-content small {
        font-size: 12px;
    }

    .primary-btn,
    .danger-btn,
    .secondary-btn {
        padding: 12px;
        font-size: 14px;
    }

    .primary-btn i,
    .secondary-btn i,
    .danger-btn i {
        margin-right: 7px;
    }

    .cancelled-progress-message,
    .info-message,
    .cancelled-action-message {
        font-size: 13px;
        line-height: 1.45;
    }

    .cancelled-transfer-banner {
        flex-direction: column;
        gap: 8px;
        padding: 13px;
    }

    .cancelled-transfer-icon {
        font-size: 19px;
    }

    .cancelled-transfer-banner h3 {
        margin-bottom: 7px;
        font-size: 17px;
    }

    .cancelled-transfer-banner p {
        font-size: 13px;
    }

    .cancel-transfer-panel {
        margin-top: 16px;
        padding: 13px;
    }

    .completed-message {
        padding: 18px 13px;
    }

    .completed-message i {
        font-size: 36px;
        margin-bottom: 10px;
    }

    .completed-message h3 {
        font-size: 18px;
    }

    .completed-message p {
        font-size: 13px;
    }

    .discrepancy-report-btn {
        width: 100%;
        min-height: 40px;
        margin-top: 4px;
    }
}


/* ------------------------------------------------------
   VERY SMALL PHONE
------------------------------------------------------ */

@media (max-width: 340px) {

    .form-container {
        padding: 8px;
    }

    .page-header h1 {
        font-size: 19px;
    }

    .form-card,
    .status-card {
        padding: 12px;
    }

    #transferList .transfer-card {
        grid-template-columns: 1fr;
    }

    #transferList .transfer-card > div:nth-child(2) {
        justify-self: start;
    }

    #transferList .view-btn {
        grid-column: 1;
    }

    .progress-step {
        min-width: 64px;
    }
}

/* ======================================================
   MOBILE RESPONSIVENESS PASS — PHASE 3
   Remaining Employee pages:
   Issues, Reports, Profile, Change Password,
   Report Discrepancy

   Baseline:
   - Current STC ZIP for page structure
   - Phase 2 style.css for all existing responsive rules
====================================================== */


/* ------------------------------------------------------
   EMPLOYEE ISSUES / DISCREPANCIES
------------------------------------------------------ */

.discrepancy-page .employee-toolbar {
    width: 100%;
    min-width: 0;
}

.discrepancy-page .search-box {
    min-width: 0;
}

.discrepancy-page .discrepancy-summary-card,
.discrepancy-page .discrepancy-card {
    min-width: 0;
}

.discrepancy-page .discrepancy-card .employee-top > div {
    min-width: 0;
}

.discrepancy-page .discrepancy-card h3,
.discrepancy-page .discrepancy-card p,
.discrepancy-page .detail-value {
    overflow-wrap: anywhere;
}

.discrepancy-page .transfer-filter-button,
.discrepancy-page .transfer-clear-filter {
    white-space: nowrap;
}


/* ------------------------------------------------------
   EMPLOYEE REPORTS
------------------------------------------------------ */

.employee-report-page,
.employee-report-page .form-card,
.employee-report-summary,
.employee-report-status-grid,
.employee-report-card,
.employee-report-status {
    min-width: 0;
}

.employee-report-card p,
.employee-report-card strong,
.employee-report-status,
.employee-report-page td,
.employee-report-page th {
    overflow-wrap: anywhere;
}

.employee-report-page .report-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ------------------------------------------------------
   EMPLOYEE PROFILE
------------------------------------------------------ */

.profile-header,
.profile-card,
.profile-section,
.setting-item,
.info-row {
    min-width: 0;
}

.profile-card h2,
.employee-role,
.employee-branch,
.info-row strong,
.info-row span,
.setting-item span,
.setting-item strong {
    overflow-wrap: anywhere;
}

.setting-item > div {
    min-width: 0;
}


/* ------------------------------------------------------
   CHANGE PASSWORD
------------------------------------------------------ */

.change-password-form,
.change-password-form .form-group,
.change-password-form .edit-form-actions {
    min-width: 0;
}

.change-password-form input {
    max-width: 100%;
    box-sizing: border-box;
}


/* ------------------------------------------------------
   REPORT DISCREPANCY
------------------------------------------------------ */

.form-container .alert-message {
    min-width: 0;
}

.form-container .alert-message span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.form-container .info-message {
    max-width: 100%;
    box-sizing: border-box;
}


/* ------------------------------------------------------
   TABLET / SMALL SCREEN
------------------------------------------------------ */

@media (max-width: 768px) {

    /* ==============================
       EMPLOYEE ISSUES
    ============================== */

    .discrepancy-page {
        padding-bottom: 92px;
    }

    .discrepancy-page .discrepancy-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .discrepancy-page .discrepancy-summary-card {
        padding: 17px;
        border-radius: 14px;
    }

    .discrepancy-page .discrepancy-summary-card h3 {
        font-size: 16px;
    }

    .discrepancy-page .discrepancy-summary-card p {
        font-size: 12px;
        line-height: 1.4;
    }

    .discrepancy-page .discrepancy-summary-card .transfer-id {
        margin-top: 12px;
        font-size: 28px;
    }

    .discrepancy-page .employee-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
        gap: 10px;
        align-items: stretch;
    }

    .discrepancy-page .employee-toolbar .search-box {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 46px;
        padding: 0 13px;
        box-sizing: border-box;
    }

    .discrepancy-page .employee-toolbar .search-box input {
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 0;
        font-size: 16px;
    }

    .discrepancy-page .employee-toolbar select {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 15px;
    }

    .discrepancy-page .transfer-filter-button,
    .discrepancy-page .transfer-clear-filter {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .discrepancy-page .discrepancy-list {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 14px;
    }

    .discrepancy-page .discrepancy-card {
        padding: 17px;
        border-radius: 15px;
    }

    .discrepancy-page .discrepancy-card .employee-top {
        gap: 10px;
        margin-bottom: 14px;
    }

    .discrepancy-page .discrepancy-card .employee-top h3 {
        font-size: 18px;
    }

    .discrepancy-page .discrepancy-card .employee-details {
        padding: 13px;
    }

    .discrepancy-page .discrepancy-card .detail-row {
        grid-template-columns: 125px 10px minmax(0, 1fr);
        gap: 4px;
        padding: 8px 0;
    }

    .discrepancy-page .discrepancy-card .primary-btn,
    .discrepancy-page .discrepancy-card .add-btn {
        min-height: 44px;
    }


    /* ==============================
       EMPLOYEE REPORTS
    ============================== */

    .employee-report-page {
        padding-bottom: 92px;
    }

    .employee-report-page .section-header {
        flex-direction: row;
        align-items: flex-start;
    }

    .employee-report-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 14px 0;
    }

    .employee-report-card {
        padding: 17px;
        border-radius: 14px;
        gap: 5px;
    }

    .employee-report-card > i {
        font-size: 22px;
    }

    .employee-report-number {
        font-size: 27px;
    }

    .employee-report-card strong {
        font-size: 14px;
    }

    .employee-report-card p {
        font-size: 12px;
        line-height: 1.4;
    }

    .employee-report-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 14px;
    }

    .employee-report-status {
        gap: 8px;
        padding: 12px;
        border-radius: 10px;
    }

    .employee-report-status strong {
        flex: 0 0 auto;
        font-size: 18px;
    }

    .employee-report-page .report-table-container {
        border-radius: 10px;
    }

    .employee-report-page .report-table-container .items-table {
        min-width: 650px;
    }

    .employee-report-page .view-transfer-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
    }


    /* ==============================
       PROFILE
    ============================== */

    .profile-header {
        gap: 11px;
        margin-bottom: 14px;
    }

    .profile-header .back-button {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 12px;
    }

    .profile-header h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .profile-card {
        padding: 25px 15px;
        border-radius: 18px;
        margin-bottom: 14px;
    }

    .profile-avatar {
        width: 78px;
        height: 78px;
        margin-bottom: 14px;
        font-size: 31px;
    }

    .profile-card h2 {
        font-size: 23px;
    }

    .employee-role {
        font-size: 15px;
    }

    .employee-branch {
        font-size: 13px;
    }

    .profile-section {
        padding: 16px;
        border-radius: 15px;
        margin-bottom: 12px;
    }

    .profile-section h3 {
        margin-bottom: 14px;
        font-size: 19px;
    }

    .info-row {
        gap: 5px;
        padding: 12px 0;
    }

    .info-row span {
        font-size: 13px;
    }

    .info-row strong {
        font-size: 14px;
        line-height: 1.4;
    }

    .setting-item {
        gap: 12px;
        padding: 14px 0;
    }

    .setting-item > div {
        flex: 1 1 auto;
    }

    .setting-item > i:last-child {
        flex: 0 0 auto;
    }

    .profile-section .logout-btn {
        min-height: 46px;
        margin-bottom: 0;
    }


    /* ==============================
       CHANGE PASSWORD
    ============================== */

    .change-password-form .form-group {
        margin-bottom: 14px;
    }

    .change-password-form .form-group input {
        min-height: 46px;
        padding: 11px 12px;
        font-size: 16px;
        border-radius: 10px;
    }

    .change-password-form .edit-form-actions {
        width: 100%;
        padding-top: 4px;
    }

    .change-password-form .clear-filter-btn,
    .change-password-form .filter-btn {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }


    /* ==============================
       REPORT DISCREPANCY
    ============================== */

    .form-container .alert-message {
        padding: 12px 14px;
        border-radius: 10px;
        line-height: 1.4;
    }

    .form-container .alert-message i {
        flex: 0 0 auto;
    }

    .form-container .info-message {
        padding: 13px;
        line-height: 1.45;
    }

    .form-container textarea[name="description"] {
        width: 100%;
        min-height: 120px;
        box-sizing: border-box;
        font-size: 16px;
    }
}


/* ------------------------------------------------------
   PHONE
------------------------------------------------------ */

@media (max-width: 480px) {

    /* ==============================
       EMPLOYEE ISSUES
    ============================== */

    .discrepancy-page .discrepancy-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .discrepancy-page .discrepancy-summary-card {
        padding: 14px 12px;
    }

    .discrepancy-page .discrepancy-summary-card h3 {
        font-size: 15px;
    }

    .discrepancy-page .discrepancy-summary-card .transfer-id {
        font-size: 25px;
    }

    .discrepancy-page .employee-toolbar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .discrepancy-page .employee-toolbar .search-box,
    .discrepancy-page .employee-toolbar select {
        grid-column: 1 / -1;
    }

    .discrepancy-page .transfer-filter-button,
    .discrepancy-page .transfer-clear-filter {
        width: 100%;
        padding: 10px;
        font-size: 13px;
    }

    .discrepancy-page .discrepancy-card {
        padding: 14px;
    }

    .discrepancy-page .discrepancy-card .employee-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .discrepancy-page .discrepancy-card .status-badge {
        justify-self: start;
    }

    .discrepancy-page .discrepancy-card .detail-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 9px 0;
    }

    .discrepancy-page .discrepancy-card .detail-colon {
        display: none;
    }

    .discrepancy-page .discrepancy-card .detail-label {
        font-size: 12px;
        font-weight: 600;
    }

    .discrepancy-page .discrepancy-card .detail-value {
        font-size: 13px;
    }

    .discrepancy-page .discrepancy-card .primary-btn,
    .discrepancy-page .discrepancy-card .add-btn {
        width: 100%;
        margin-top: 10px;
    }


    /* ==============================
       EMPLOYEE REPORTS
    ============================== */

    .employee-report-page .section-header {
        gap: 9px;
    }

    .employee-report-page .section-header > i {
        flex: 0 0 auto;
        font-size: 24px !important;
    }

    /* Keep the four high-level figures compact as 2 x 2
       instead of creating a long single-column report. */
    .employee-report-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .employee-report-card {
        padding: 14px 11px;
    }

    .employee-report-card > i {
        font-size: 20px;
    }

    .employee-report-number {
        font-size: 24px;
    }

    .employee-report-card strong {
        font-size: 13px;
    }

    .employee-report-card p {
        font-size: 11px;
    }

    .employee-report-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .employee-report-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px;
    }

    .employee-report-status strong {
        font-size: 17px;
    }

    .employee-report-page .report-table-container .items-table {
        min-width: 600px;
    }

    .employee-report-page .report-table-container th,
    .employee-report-page .report-table-container td {
        padding: 9px;
        font-size: 12px;
    }


    /* ==============================
       PROFILE
    ============================== */

    .profile-header {
        gap: 9px;
        margin-bottom: 10px;
    }

    .profile-header .back-button {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 10px;
    }

    .profile-header h1 {
        font-size: 21px;
    }

    .profile-card {
        padding: 20px 12px;
        border-radius: 15px;
    }

    .profile-avatar {
        width: 68px;
        height: 68px;
        margin-bottom: 11px;
        font-size: 27px;
    }

    .profile-card h2 {
        font-size: 20px;
    }

    .employee-role {
        margin-top: 6px;
        font-size: 14px;
    }

    .employee-branch {
        margin-top: 4px;
        font-size: 12px;
    }

    .profile-section {
        padding: 13px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .profile-section h3 {
        margin-bottom: 10px;
        font-size: 17px;
    }

    .info-row {
        padding: 10px 0;
    }

    .setting-item {
        gap: 9px;
        padding: 12px 0;
        font-size: 13px;
    }

    .setting-item div {
        gap: 9px;
    }

    .setting-item i {
        font-size: 16px;
    }

    .profile-section .logout-btn {
        width: 100%;
        min-height: 44px;
        font-size: 14px;
    }


    /* ==============================
       CHANGE PASSWORD
    ============================== */

    .change-password-form .edit-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    .change-password-form .clear-filter-btn,
    .change-password-form .filter-btn {
        width: 100%;
        min-height: 46px;
        margin: 0;
    }

    .change-password-form .form-group label {
        font-size: 14px;
    }


    /* ==============================
       REPORT DISCREPANCY
    ============================== */

    .form-container .alert-message {
        align-items: flex-start;
        gap: 9px;
        padding: 11px 12px;
        font-size: 13px;
    }

    .form-container .info-message {
        font-size: 13px;
    }

    /* Mismatch details are easier to scan vertically
       than with label/value pairs squeezed on one row. */
    .form-container .form-card > .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }

    .form-container .form-card > .detail-row > strong {
        font-size: 12px;
        color: #6b7280;
    }

    .form-container .form-card > .detail-row > span,
    .form-container .form-card > .detail-row > span strong {
        font-size: 14px;
        color: #111827;
    }

    .form-container textarea[name="description"] {
        min-height: 130px;
    }
}


/* ------------------------------------------------------
   VERY SMALL PHONE
------------------------------------------------------ */

@media (max-width: 340px) {

    .discrepancy-page .discrepancy-summary-grid,
    .employee-report-summary,
    .employee-report-status-grid {
        grid-template-columns: 1fr;
    }

    .discrepancy-page .employee-toolbar {
        grid-template-columns: 1fr;
    }

    .discrepancy-page .employee-toolbar .search-box,
    .discrepancy-page .employee-toolbar select,
    .discrepancy-page .transfer-filter-button,
    .discrepancy-page .transfer-clear-filter {
        grid-column: 1;
    }

    .profile-card {
        padding: 18px 10px;
    }

    .profile-section {
        padding: 11px;
    }
}

/* ======================================================
   MOBILE RESPONSIVENESS PASS — PHASE 4
   Admin application:
   Employees, Employee Details/Edit/Password Reset,
   Branches, Branch Details/Edit, Products, Transfers,
   Transfer Details, Discrepancies, Reports, Audit Logs

   Baseline:
   - Current STC ZIP for page structure
   - Phase 3 style.css for all prior responsive rules
====================================================== */


/* ------------------------------------------------------
   GLOBAL ADMIN MANAGEMENT SAFETY
------------------------------------------------------ */

.employee-toolbar,
.employee-cards,
.employee-card,
.employee-top,
.employee-details,
.employee-menu,
.product-menu,
.product-menu-dropdown,
.transfer-card-menu,
.transfer-menu-dropdown,
.employee-details-page,
.employee-profile-header,
.employee-profile-summary,
.employee-name-row,
.profile-summary-items,
.employee-details-grid,
.details-card,
.details-card-heading,
.edit-employee-form,
.reset-password-form,
.branch-contact-row,
.branch-phone-list,
.branch-phone-item,
.branch-phone-actions,
.report-filter-form,
.report-filter-field,
.report-period-summary,
.report-table-container,
.report-discrepancy-card,
.report-discrepancy-top,
.report-discrepancy-footer,
.audit-filter-form,
.audit-search-field,
.audit-filter-field,
.audit-search-input,
.audit-log-list,
.audit-log-card,
.audit-log-content,
.audit-log-heading,
.audit-log-meta,
.audit-pagination {
    min-width: 0;
}

.employee-card h3,
.employee-card p,
.employee-details,
.employee-info,
.employee-meta,
.detail-value,
.employee-profile-summary,
.employee-profile-summary h1,
.employee-username,
.summary-item,
.summary-item strong,
.details-card-heading,
.details-card-heading p,
.report-period-summary,
.report-discrepancy-description,
.report-discrepancy-footer,
.audit-log-heading,
.audit-log-content,
.audit-log-content p,
.audit-log-meta {
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------
   ADMIN FILTER TOOLBARS
------------------------------------------------------ */

.employee-toolbar .search-box {
    min-width: 0;
}

.employee-toolbar select {
    max-width: 100%;
}

.filter-btn,
.clear-filter-btn,
.transfer-filter-button,
.transfer-clear-filter {
    white-space: nowrap;
}


/* ------------------------------------------------------
   ADMIN CARDS + THREE-DOT MENUS
------------------------------------------------------ */

.employee-card {
    position: relative;
}

.employee-menu,
.product-menu-dropdown,
.transfer-menu-dropdown {
    max-width: calc(100vw - 32px);
}

.employee-menu a,
.employee-menu button,
.product-menu-dropdown a,
.product-menu-dropdown button,
.transfer-menu-dropdown a,
.transfer-menu-dropdown button {
    box-sizing: border-box;
}


/* ------------------------------------------------------
   BRANCH CONTACTS
------------------------------------------------------ */

.branch-contact-row,
.branch-phone-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.branch-phone-actions {
    flex: 0 0 auto;
}


/* ------------------------------------------------------
   MODALS
------------------------------------------------------ */

.modal-content {
    box-sizing: border-box;
}

.modal-content input,
.modal-content select,
.modal-content textarea,
.modal-content button {
    max-width: 100%;
    box-sizing: border-box;
}


/* ------------------------------------------------------
   ADMIN TRANSFERS
------------------------------------------------------ */

.transfer-route {
    min-width: 0;
}

.transfer-route > div,
.transfer-route span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.transfer-discrepancy-badge {
    max-width: 100%;
}

.transfer-menu-dropdown {
    z-index: 150;
}


/* ------------------------------------------------------
   ADMIN TRANSFER DETAILS / DISCREPANCY RESOLUTION
------------------------------------------------------ */

.admin-transfer-timeline,
.discrepancy-card-list,
.discrepancy-report-card,
.discrepancy-report-header,
.discrepancy-quantity-grid,
.discrepancy-description,
.discrepancy-reporter {
    min-width: 0;
}

.discrepancy-report-card,
.discrepancy-description,
.discrepancy-reporter,
.timeline-remarks {
    overflow-wrap: anywhere;
}

.discrepancy-report-card textarea {
    max-width: 100%;
    box-sizing: border-box;
}


/* ------------------------------------------------------
   ADMIN REPORTS
------------------------------------------------------ */

.report-filter-form select,
.audit-filter-form select,
.audit-search-input input {
    max-width: 100%;
    box-sizing: border-box;
}

.report-table-container {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.report-table-container .items-table {
    width: 100%;
}

.report-discrepancy-footer > div {
    min-width: 0;
}


/* ------------------------------------------------------
   AUDIT LOGS
------------------------------------------------------ */

.audit-log-title-row,
.audit-log-meta {
    min-width: 0;
}

.audit-pagination,
.audit-page-numbers {
    max-width: 100%;
}


/* ======================================================
   TABLET / SMALL LAPTOP
====================================================== */

@media (max-width: 900px) {

    /* ----------------------------------
       ADMIN SEARCH / FILTER TOOLBARS
    ---------------------------------- */

    .employee-toolbar {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }

    .employee-toolbar .search-box {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 46px;
        padding: 0 13px;
        box-sizing: border-box;
    }

    .employee-toolbar .search-box input {
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 0;
        font-size: 16px;
    }

    .employee-toolbar select {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 15px;
        box-sizing: border-box;
    }

    .employee-toolbar .filter-btn,
    .employee-toolbar .clear-filter-btn,
    .employee-toolbar .transfer-filter-button,
    .employee-toolbar .transfer-clear-filter {
        width: 100%;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }


    /* ----------------------------------
       EMPLOYEES / BRANCHES / PRODUCTS
    ---------------------------------- */

    .employee-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .employee-card {
        padding: 18px;
        border-radius: 16px;
    }

    .employee-top {
        gap: 13px;
    }

    .employee-avatar,
    .product-avatar {
        flex: 0 0 auto;
    }

    .menu-btn,
    .product-menu-btn,
    .transfer-menu-button {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .employee-menu,
    .product-menu-dropdown,
    .transfer-menu-dropdown {
        right: 10px;
        width: min(220px, calc(100vw - 42px));
    }

    .branch-phone-list {
        gap: 8px;
    }

    .branch-phone-item {
        gap: 9px;
    }


    /* ----------------------------------
       REGISTER / PRODUCT / BRANCH MODALS
    ---------------------------------- */

    .modal {
        padding: 14px;
        box-sizing: border-box;
    }

    .modal-content {
        width: min(560px, 100%);
        max-width: 100%;
        max-height: calc(100dvh - 28px);
        padding: 20px;
        border-radius: 16px;
    }

    .modal-header {
        gap: 12px;
    }

    .modal-header h2 {
        overflow-wrap: anywhere;
    }

    .modal-content .form-group input,
    .modal-content .form-group select,
    .modal-content .form-group textarea {
        min-height: 46px;
        font-size: 16px;
    }

    .modal-content .save-btn {
        min-height: 46px;
    }


    /* ----------------------------------
       EMPLOYEE + BRANCH DETAIL PAGES
    ---------------------------------- */

    .employee-details-page {
        gap: 14px;
    }

    .details-navigation .back-btn {
        min-height: 42px;
        padding: 0 4px;
    }

    .employee-profile-header {
        gap: 18px;
        padding: 20px;
        border-radius: 16px;
    }

    .employee-profile-avatar {
        width: 82px;
        height: 82px;
        flex: 0 0 82px;
        font-size: 32px;
    }

    .employee-name-row {
        gap: 12px;
    }

    .employee-name-row h1 {
        font-size: 24px;
        line-height: 1.25;
    }

    .profile-summary-items {
        gap: 16px;
        margin-top: 18px;
    }

    .summary-item {
        flex: 1 1 140px;
    }

    .employee-details-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .details-card:last-child {
        grid-column: auto;
    }

    .details-card {
        padding: 18px;
        border-radius: 16px;
    }

    .details-card-heading {
        gap: 11px;
        padding-bottom: 14px;
    }

    .details-heading-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .details-list .detail-row {
        gap: 12px;
    }


    /* ----------------------------------
       EDIT EMPLOYEE / EDIT BRANCH /
       RESET PASSWORD
    ---------------------------------- */

    .edit-employee-form,
    .reset-password-form {
        width: 100%;
        max-width: 100%;
    }

    .edit-employee-form .form-group input,
    .edit-employee-form .form-group select,
    .reset-password-form .form-group input {
        width: 100%;
        min-height: 46px;
        padding: 11px 12px;
        box-sizing: border-box;
        font-size: 16px;
    }

    .edit-form-actions {
        gap: 10px;
    }

    .edit-form-actions .filter-btn,
    .edit-form-actions .clear-filter-btn {
        min-height: 46px;
    }

    .reset-employee-summary {
        min-width: 0;
    }

    .password-input-wrapper {
        width: 100%;
        min-width: 0;
    }


    /* ----------------------------------
       ADMIN TRANSFER LIST
    ---------------------------------- */

    .transfer-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .transfer-filter-form .search-box {
        grid-column: 1 / -1;
    }

    .transfer-route {
        gap: 8px;
    }

    .employee-card .progress-tracker {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .employee-card .progress-line,
    .employee-card .progress-labels {
        min-width: 470px;
    }


    /* ----------------------------------
       ADMIN TRANSFER DETAILS
    ---------------------------------- */

    .form-container .progress-tracker {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .form-container .progress-tracker .progress-line,
    .form-container .progress-tracker .progress-labels {
        min-width: 520px;
    }

    .discrepancy-card-list {
        gap: 13px;
    }

    .discrepancy-report-card {
        padding: 17px;
        border-radius: 14px;
    }

    .discrepancy-report-header {
        gap: 10px;
    }

    .discrepancy-quantity-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .discrepancy-report-card textarea {
        min-height: 105px;
        font-size: 16px;
    }

    .discrepancy-report-card .add-btn {
        min-height: 44px;
    }


    /* ----------------------------------
       ADMIN DISCREPANCIES
    ---------------------------------- */

    .discrepancy-page .discrepancy-list {
        grid-template-columns: 1fr;
    }


    /* ----------------------------------
       ADMIN REPORTS
    ---------------------------------- */

    .report-filter-form {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: end;
    }

    .report-filter-field {
        width: 100%;
        min-width: 0;
    }

    .report-filter-field select {
        min-height: 46px;
        padding: 10px 12px;
        font-size: 16px;
    }

    .report-apply-button,
    .report-clear-button {
        width: 100%;
        min-height: 46px;
    }

    .report-period-summary {
        align-items: flex-start;
        line-height: 1.45;
    }

    .charts {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .report-table-container {
        border-radius: 10px;
    }

    .report-table {
        min-width: 650px;
    }

    .report-activity-table {
        min-width: 850px;
    }

    .report-discrepancy-footer {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .report-view-transfer {
        min-height: 42px;
    }


    /* ----------------------------------
       AUDIT LOGS
    ---------------------------------- */

    .audit-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .audit-search-field {
        grid-column: 1 / -1;
    }

    .audit-search-input {
        min-height: 46px;
    }

    .audit-search-input input {
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
    }

    .audit-filter-field select {
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 15px;
        box-sizing: border-box;
    }

    .audit-filter-actions {
        grid-column: 1 / -1;
        width: 100%;
    }

    .audit-filter-actions .report-apply-button,
    .audit-filter-actions .report-clear-button {
        flex: 1 1 0;
    }

    .audit-log-card {
        gap: 13px;
        padding: 16px;
    }

    .audit-log-heading {
        gap: 10px;
    }

    .audit-pagination {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .audit-page-numbers {
        flex-wrap: nowrap;
    }
}


/* ======================================================
   PHONE
====================================================== */

@media (max-width: 600px) {

    /* ----------------------------------
       FILTER TOOLBARS
    ---------------------------------- */

    .employee-toolbar,
    .transfer-filter-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .employee-toolbar .search-box,
    .employee-toolbar select,
    .employee-toolbar .filter-btn,
    .employee-toolbar .clear-filter-btn,
    .employee-toolbar .transfer-filter-button,
    .employee-toolbar .transfer-clear-filter,
    .transfer-filter-form .search-box,
    .transfer-filter-form select,
    .transfer-filter-form .transfer-filter-button,
    .transfer-filter-form .transfer-clear-filter {
        grid-column: 1;
        width: 100%;
    }

    .filter-btn,
    .clear-filter-btn,
    .transfer-filter-button,
    .transfer-clear-filter {
        min-height: 44px;
        margin: 0;
    }


    /* ----------------------------------
       SECTION HEADERS / ADD BUTTONS
    ---------------------------------- */

    .dashboard .section-header {
        align-items: flex-start;
        gap: 10px;
    }

    .dashboard .section-header > div {
        min-width: 0;
    }

    .dashboard .section-header .add-btn {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 10px 12px;
        font-size: 13px;
    }


    /* ----------------------------------
       EMPLOYEES / BRANCHES / PRODUCTS
    ---------------------------------- */

    .employee-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .employee-card {
        padding: 15px;
        border-radius: 14px;
    }

    .employee-top {
        align-items: flex-start;
        gap: 11px;
    }

    .employee-avatar,
    .product-avatar {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        font-size: 18px;
    }

    .employee-card h3 {
        font-size: 17px;
    }

    .employee-card .employee-details {
        margin-top: 12px;
    }

    .employee-card .detail-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 8px 0;
    }

    .employee-card .detail-colon {
        display: none;
    }

    .employee-card .detail-label {
        font-size: 12px;
        font-weight: 600;
    }

    .employee-card .detail-value {
        font-size: 13px;
    }

    .menu-btn,
    .product-menu-btn,
    .transfer-menu-button {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .employee-menu,
    .product-menu-dropdown,
    .transfer-menu-dropdown {
        top: 48px;
        right: 8px;
        width: min(218px, calc(100vw - 48px));
    }

    .employee-menu a,
    .employee-menu .status-menu-button,
    .product-menu-dropdown a,
    .product-menu-dropdown button,
    .transfer-menu-dropdown a,
    .transfer-menu-dropdown button {
        min-height: 43px;
        padding: 11px 14px;
        font-size: 13px;
    }

    .branch-contact-row,
    .branch-phone-item {
        align-items: flex-start;
        gap: 8px;
    }

    .branch-phone-actions {
        gap: 5px;
    }

    .branch-phone-edit-btn,
    .branch-phone-delete-btn {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }


    /* ----------------------------------
       MODALS
    ---------------------------------- */

    .modal {
        align-items: flex-end;
        padding: 8px;
    }

    .modal-content {
        width: 100%;
        max-height: calc(100dvh - 16px);
        padding: 16px;
        border-radius: 16px 16px 12px 12px;
    }

    .modal-header {
        margin-bottom: 12px;
    }

    .modal-header h2 {
        font-size: 19px;
    }

    .close-btn {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .modal-content .form-group {
        margin-bottom: 12px;
    }

    .modal-content .save-btn {
        width: 100%;
    }


    /* ----------------------------------
       EMPLOYEE / BRANCH DETAILS
    ---------------------------------- */

    .employee-details-page {
        gap: 10px;
    }

    .details-navigation .back-btn {
        min-height: 40px;
        font-size: 13px;
    }

    .employee-profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
        padding: 15px;
        border-radius: 14px;
    }

    .employee-profile-avatar {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
        font-size: 26px;
    }

    .employee-profile-summary {
        width: 100%;
    }

    .employee-name-row {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
    }

    .employee-name-row h1 {
        font-size: 21px;
    }

    .employee-status-badge {
        padding: 6px 10px;
        font-size: 11px;
    }

    .profile-summary-items {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 10px;
        margin-top: 15px;
    }

    .summary-item {
        min-width: 0;
        padding: 10px;
        background: #f9fafb;
        border-radius: 10px;
    }

    .summary-item > i {
        flex: 0 0 auto;
    }

    .summary-item span {
        font-size: 11px;
    }

    .summary-item strong {
        font-size: 13px;
    }

    .employee-details-grid {
        gap: 10px;
    }

    .details-card {
        padding: 14px;
        border-radius: 14px;
    }

    .details-card-heading {
        align-items: flex-start;
        gap: 9px;
        padding-bottom: 12px;
    }

    .details-heading-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 14px;
    }

    .details-card-heading h2 {
        font-size: 16px;
    }

    .details-card-heading p {
        font-size: 12px;
        line-height: 1.4;
    }

    .details-list .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }

    .details-list .detail-row > span:first-child,
    .details-list .detail-row > strong:first-child {
        font-size: 12px;
        color: #6b7280;
    }


    /* ----------------------------------
       EDIT / RESET PASSWORD
    ---------------------------------- */

    .edit-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    .edit-form-actions .filter-btn,
    .edit-form-actions .clear-filter-btn {
        width: 100%;
        margin: 0;
    }

    .reset-employee-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .reset-employee-avatar {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .password-warning {
        padding: 12px;
        font-size: 13px;
        line-height: 1.45;
    }


    /* ----------------------------------
       ADMIN TRANSFER CARDS
    ---------------------------------- */

    .transfer-route {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 6px;
        align-items: center;
    }

    .transfer-route > div:first-child {
        text-align: left;
    }

    .transfer-route > div:last-child {
        text-align: right;
    }

    .transfer-route .fa-arrow-right {
        flex: 0 0 auto;
    }

    .employee-card .progress-tracker {
        margin-top: 12px;
    }

    .employee-card .progress-line,
    .employee-card .progress-labels {
        min-width: 440px;
    }

    .transfer-discrepancy-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        font-size: 11px;
    }


    /* ----------------------------------
       ADMIN TRANSFER DETAILS
    ---------------------------------- */

    .form-container .progress-tracker .progress-line,
    .form-container .progress-tracker .progress-labels {
        min-width: 480px;
    }

    .discrepancy-report-card {
        padding: 14px;
    }

    .discrepancy-report-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

    .discrepancy-report-number {
        font-size: 13px;
    }

    .discrepancy-quantity-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .discrepancy-quantity-grid div {
        padding: 10px;
    }

    .discrepancy-description,
    .discrepancy-reporter {
        padding: 11px;
        font-size: 13px;
    }

    .discrepancy-report-card .form-group textarea {
        min-height: 120px;
    }

    .discrepancy-report-card .add-btn {
        width: 100%;
        margin-top: 8px;
    }


    /* ----------------------------------
       ADMIN DISCREPANCIES
    ---------------------------------- */

    .discrepancy-page .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .discrepancy-page .product-count {
        display: inline;
    }


    /* ----------------------------------
       ADMIN REPORTS
    ---------------------------------- */

    .report-filter-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .report-filter-field,
    .report-apply-button,
    .report-clear-button {
        grid-column: 1;
        width: 100%;
    }

    .report-period-summary {
        gap: 8px;
        font-size: 13px;
    }

    .report-period-summary i {
        margin-top: 3px;
        flex: 0 0 auto;
    }

    .charts {
        gap: 10px;
    }

    .charts .card,
    .charts > div {
        min-width: 0;
    }

    .report-table-container {
        overflow-x: auto;
    }

    .report-table-container th,
    .report-table-container td {
        padding: 9px;
        font-size: 12px;
        white-space: nowrap;
    }

    .report-discrepancy-card {
        padding: 14px;
        border-left-width: 4px;
    }

    .report-discrepancy-top {
        flex-direction: column;
        gap: 8px;
    }

    .report-discrepancy-description {
        margin-top: 12px;
        padding: 11px;
        font-size: 13px;
        line-height: 1.5;
    }

    .report-discrepancy-footer {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .report-view-transfer,
    .report-export-button {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }


    /* ----------------------------------
       AUDIT LOGS
    ---------------------------------- */

    .audit-filter-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .audit-search-field,
    .audit-filter-field,
    .audit-filter-actions {
        grid-column: 1;
    }

    .audit-filter-actions {
        flex-direction: column;
        gap: 8px;
    }

    .audit-filter-actions .report-apply-button,
    .audit-filter-actions .report-clear-button {
        width: 100%;
    }

    .audit-period-summary {
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        line-height: 1.45;
    }

    .audit-log-list {
        gap: 10px;
    }

    .audit-log-card {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 13px;
        border-radius: 12px;
    }

    .audit-action-icon {
        width: 38px;
        height: 38px;
        font-size: 14px;
        border-radius: 10px;
    }

    .audit-log-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .audit-log-title-row {
        width: 100%;
    }

    .audit-log-content p {
        font-size: 13px;
        line-height: 1.45;
    }

    .audit-log-meta {
        flex-wrap: wrap;
        gap: 6px 10px;
        font-size: 11px;
    }

    .audit-pagination {
        gap: 6px;
    }

    .audit-page-button,
    .audit-page-number {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
        font-size: 12px;
    }
}


/* ======================================================
   STANDARD PHONE
====================================================== */

@media (max-width: 480px) {

    .dashboard .section-header {
        flex-direction: column;
    }

    .dashboard .section-header .add-btn {
        width: 100%;
        justify-content: center;
    }


    /* Employee/branch/product cards */
    .employee-card {
        padding: 13px;
    }

    .employee-top {
        padding-right: 38px;
    }


    /* Details/profile summary */
    .profile-summary-items {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .summary-item {
        padding: 9px;
    }


    /* Reports */
    .report-period-summary {
        flex-direction: row;
    }

    .report-table {
        min-width: 610px;
    }

    .report-activity-table {
        min-width: 790px;
    }


    /* Audit */
    .audit-log-card {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 11px;
    }

    .audit-action-icon {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}


/* ======================================================
   VERY SMALL PHONE
====================================================== */

@media (max-width: 340px) {

    .profile-summary-items {
        grid-template-columns: 1fr;
    }

    .employee-menu,
    .product-menu-dropdown,
    .transfer-menu-dropdown {
        width: calc(100vw - 32px);
        right: 0;
    }

    .transfer-route {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .transfer-route > div,
    .transfer-route > div:first-child,
    .transfer-route > div:last-child {
        text-align: left;
    }

    .transfer-route .fa-arrow-right {
        transform: rotate(90deg);
        justify-self: start;
    }

    .audit-log-card {
        grid-template-columns: 1fr;
    }

    .audit-action-icon {
        width: 36px;
        height: 36px;
    }
}

/* ======================================================
   MOBILE RESPONSIVENESS PASS — PHASE 5
   Final cross-system polish / edge-case pass

   Focus:
   - 320px / narrow-screen protection
   - alerts, empty states, buttons, charts, tables
   - long text / IDs / usernames
   - modals and notification overlay
   - touch-device interaction
   - safe-area handling

   Baseline:
   - Current STC ZIP for page structure
   - Phase 4 style.css for all prior responsive rules
====================================================== */


/* ------------------------------------------------------
   SHARED CONTENT SAFETY
------------------------------------------------------ */

.dashboard *,
.form-container *,
.login-container * {
    box-sizing: border-box;
}

.dashboard,
.form-container,
.login-container,
.card,
.form-card,
.status-card,
.details-card,
.employee-card,
.profile-card,
.profile-section {
    max-width: 100%;
}

.dashboard h1,
.dashboard h2,
.dashboard h3,
.dashboard h4,
.form-container h1,
.form-container h2,
.form-container h3,
.form-container h4,
.login-container h1,
.login-container h2,
.detail-value,
.employee-username,
.transfer-id,
.report-transfer-reference,
.audit-transfer-link {
    overflow-wrap: anywhere;
    word-break: normal;
}


/* ------------------------------------------------------
   ALERTS / STATUS MESSAGES
------------------------------------------------------ */

.alert-message,
.success-message,
.error-message,
.info-message,
.password-warning,
.cancelled-action-message,
.cancelled-progress-message {
    max-width: 100%;
    box-sizing: border-box;
}

.alert-message > div,
.success-message > div,
.error-message > div,
.info-message > div {
    min-width: 0;
}

.alert-message span,
.success-message span,
.error-message span,
.info-message span,
.password-warning,
.cancelled-action-message,
.cancelled-progress-message {
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------
   EMPTY STATES
------------------------------------------------------ */

.empty-state,
.discrepancy-empty-state,
.report-no-discrepancies,
.notification-empty {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.empty-state h3,
.empty-state p,
.discrepancy-empty-state h3,
.discrepancy-empty-state p,
.report-no-discrepancies,
.notification-empty {
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------
   BUTTON / LINK SAFETY
------------------------------------------------------ */

.add-btn,
.primary-btn,
.secondary-btn,
.submit-btn,
.cancel-btn,
.danger-btn,
.filter-btn,
.clear-filter-btn,
.transfer-filter-button,
.transfer-clear-filter,
.report-apply-button,
.report-clear-button,
.report-export-button,
.report-view-transfer,
.view-btn,
.save-btn,
.back-btn,
.back-button,
.logout-btn {
    max-width: 100%;
    box-sizing: border-box;
}

.add-btn span,
.primary-btn span,
.secondary-btn span,
.submit-btn span,
.cancel-btn span,
.danger-btn span,
.filter-btn span,
.clear-filter-btn span {
    min-width: 0;
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------
   CHART SAFETY
------------------------------------------------------ */

.chart-box,
.charts,
.charts > *,
.analytics-header {
    min-width: 0;
    max-width: 100%;
}

.chart-box canvas {
    width: 100% !important;
    max-width: 100% !important;
}


/* ------------------------------------------------------
   TABLE WRAPPER SAFETY
------------------------------------------------------ */

.report-table-container {
    position: relative;
}

/* Prevent a wide table from contributing to the page width
   when it already lives in an intended scrolling container. */
.report-table-container > table,
.report-table-container > .items-table {
    max-width: none;
}


/* ------------------------------------------------------
   TOUCH DEVICES
------------------------------------------------------ */

@media (hover: none) and (pointer: coarse) {

    /* Hover lifts feel awkward on touch and may remain
       visually "stuck" after tapping. */
    .action-card:hover,
    .employee-card:hover,
    .overview-item:hover {
        transform: none;
    }

    .notification,
    .notification-bell-btn,
    .menu-btn,
    .product-menu-btn,
    .transfer-menu-button,
    .close-btn,
    .branch-phone-edit-btn,
    .branch-phone-delete-btn,
    .password-toggle {
        touch-action: manipulation;
    }
}


/* ======================================================
   TABLET / PHONE
====================================================== */

@media (max-width: 768px) {

    /* ----------------------------------
       GLOBAL PAGE SPACING
    ---------------------------------- */

    body {
        min-width: 0;
    }

    .dashboard,
    .form-container {
        overflow-wrap: anywhere;
    }


    /* ----------------------------------
       ALERTS
    ---------------------------------- */

    .alert-message,
    .success-message,
    .error-message,
    .info-message {
        gap: 10px;
        line-height: 1.45;
    }

    .alert-message > i,
    .success-message > i,
    .error-message > i,
    .info-message > i {
        flex: 0 0 auto;
        margin-top: 2px;
    }


    /* ----------------------------------
       EMPTY STATES
    ---------------------------------- */

    .empty-state,
    .discrepancy-empty-state,
    .report-no-discrepancies {
        padding: 28px 16px;
        text-align: center;
    }

    .empty-state i,
    .discrepancy-empty-state i {
        font-size: 36px;
        margin-bottom: 10px;
    }

    .empty-state h3,
    .discrepancy-empty-state h3 {
        margin-bottom: 7px;
        font-size: 18px;
    }

    .empty-state p,
    .discrepancy-empty-state p {
        font-size: 13px;
        line-height: 1.5;
    }


    /* ----------------------------------
       CHART HEADERS
    ---------------------------------- */

    .analytics-header {
        gap: 10px;
    }

    .analytics-header > div {
        min-width: 0;
    }

    .analytics-header h2,
    .analytics-header h3 {
        overflow-wrap: anywhere;
    }

    .analytics-period-label {
        flex: 0 0 auto;
        white-space: nowrap;
    }


    /* ----------------------------------
       NOTIFICATION OVERLAY
    ---------------------------------- */

    .notification-dropdown {
        z-index: 1000;
        overscroll-behavior: contain;
    }

    .notification-list {
        min-width: 0;
    }

    .notification-item-form,
    .notification-item {
        width: 100%;
        max-width: 100%;
    }


    /* ----------------------------------
       MODALS
    ---------------------------------- */

    .modal-content {
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .modal-content form {
        min-width: 0;
        max-width: 100%;
    }


    /* ----------------------------------
       BOTTOM NAV SAFE AREA
    ---------------------------------- */

    .bottom-nav {
        min-height: 62px;
        padding-bottom:
            calc(9px + env(safe-area-inset-bottom));
    }

    .dashboard {
        padding-bottom:
            calc(92px + env(safe-area-inset-bottom));
    }


    /* ----------------------------------
       PASSWORD TOGGLE FIELD
    ---------------------------------- */

    .password-input-wrapper {
        position: relative;
    }

    .password-input-wrapper input {
        width: 100%;
        padding-right: 48px !important;
    }

    .password-toggle {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


    /* ----------------------------------
       LONG DATA VALUES
    ---------------------------------- */

    .detail-value,
    .employee-username,
    .report-transfer-reference,
    .audit-transfer-link {
        max-width: 100%;
    }
}


/* ======================================================
   PHONE
====================================================== */

@media (max-width: 480px) {

    /* ----------------------------------
       TYPOGRAPHY / SPACING CONSISTENCY
    ---------------------------------- */

    .dashboard p,
    .form-container p {
        line-height: 1.45;
    }

    .card > :first-child,
    .form-card > :first-child,
    .details-card > :first-child {
        margin-top: 0;
    }

    .card > :last-child,
    .form-card > :last-child,
    .details-card > :last-child {
        margin-bottom: 0;
    }


    /* ----------------------------------
       ALERTS
    ---------------------------------- */

    .alert-message,
    .success-message,
    .error-message,
    .info-message {
        align-items: flex-start;
        padding: 11px 12px;
        font-size: 13px;
    }


    /* ----------------------------------
       EMPTY STATES
    ---------------------------------- */

    .empty-state,
    .discrepancy-empty-state,
    .report-no-discrepancies {
        padding: 23px 12px;
    }

    .empty-state i,
    .discrepancy-empty-state i {
        font-size: 32px;
    }

    .empty-state h3,
    .discrepancy-empty-state h3 {
        font-size: 17px;
    }


    /* ----------------------------------
       CHARTS
    ---------------------------------- */

    .analytics-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .analytics-period-label {
        white-space: normal;
        font-size: 12px;
    }

    .chart-box {
        height: 230px;
    }


    /* ----------------------------------
       BUTTON TEXT
    ---------------------------------- */

    .add-btn,
    .primary-btn,
    .secondary-btn,
    .submit-btn,
    .cancel-btn,
    .danger-btn,
    .filter-btn,
    .clear-filter-btn,
    .transfer-filter-button,
    .transfer-clear-filter,
    .report-apply-button,
    .report-clear-button,
    .report-export-button,
    .report-view-transfer,
    .view-btn,
    .save-btn {
        line-height: 1.25;
    }


    /* ----------------------------------
       NOTIFICATION DROPDOWN
    ---------------------------------- */

    .notification-dropdown {
        max-width: calc(100vw - 16px);
    }

    .notification-dropdown-header h3 {
        font-size: 15px;
    }

    .notification-item-content small {
        font-size: 10px;
    }


    /* ----------------------------------
       LOGIN
    ---------------------------------- */

    .login-container {
        width: auto;
        max-width: calc(100vw - 20px);
        margin: 10px;
        padding: 22px 16px;
    }

    .login-container h1 {
        font-size: 24px;
    }

    .login-container .subtitle {
        font-size: 13px;
        line-height: 1.45;
    }

    .login-container input,
    .login-container select {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        font-size: 16px;
    }

    .login-container button {
        min-height: 46px;
    }


    /* ----------------------------------
       NAV LABEL CONSISTENCY
    ---------------------------------- */

    .bottom-nav a {
        min-width: 0;
    }

    .bottom-nav a span {
        line-height: 1.1;
    }
}


/* ======================================================
   VERY SMALL PHONE — 320/340px EDGE CASES
====================================================== */

@media (max-width: 340px) {

    .dashboard-header,
    .card,
    .form-card,
    .status-card,
    .details-card,
    .employee-card,
    .profile-section {
        border-radius: 12px;
    }

    .dashboard-header {
        gap: 7px;
    }

    .logo-section {
        min-width: 0;
    }

    .logo-section h1 {
        overflow-wrap: anywhere;
    }

    /* Keep two-column dashboard metrics only where each
       card still has enough usable width. */
    .overview-cards,
    .quick-actions {
        grid-template-columns: 1fr;
    }

    .overview-item,
    .action-card {
        padding: 13px 10px;
    }

    .section-header h2,
    .card h2 {
        font-size: 18px;
    }

    .analytics-header h2,
    .analytics-header h3 {
        font-size: 17px;
    }

    .chart-box {
        height: 215px;
    }

    .notification-dropdown {
        left: 6px;
        right: 6px;
        max-width: calc(100vw - 12px);
    }

    .notification-item {
        grid-template-columns:
            32px minmax(0, 1fr) 7px;
        gap: 7px;
        padding: 10px;
    }

    .notification-item-icon {
        width: 32px;
        height: 32px;
    }

    .login-container {
        max-width: calc(100vw - 12px);
        margin: 6px;
        padding: 20px 13px;
    }

    .bottom-nav a span {
        font-size: 8px;
    }
}

/* ============================================================
   STC v1.1 PWA PHASE 2 — INSTALL POP TRANSFER
   ============================================================ */

.pwa-install-button {
    position: fixed;
    right: 18px;
    left: auto;

    /* Override STC's original global button { width:100%; } rule. */
    width: auto;
    bottom: calc(
        18px + env(safe-area-inset-bottom)
    );
    z-index: 2500;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    max-width: calc(100vw - 36px);
    padding: 10px 16px;
    margin: 0;
    white-space: nowrap;

    border: 0;
    border-radius: 999px;

    background: #2563eb;
    color: #ffffff;

    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    box-shadow:
        0 10px 28px
        rgba(17, 24, 39, 0.20);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}


.pwa-install-button[hidden] {
    display: none !important;
}


.pwa-install-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 12px 30px
        rgba(17, 24, 39, 0.24);
}


.pwa-install-button:active {
    transform: translateY(0);
}


.pwa-install-button:focus-visible {
    outline:
        3px solid
        rgba(37, 99, 235, 0.32);

    outline-offset: 3px;
}


.pwa-install-button:disabled {
    opacity: 0.65;
    cursor: wait;
}


.pwa-install-icon {
    display: inline-grid;
    place-items: center;

    width: 22px;
    height: 22px;

    border: 2px solid currentColor;
    border-radius: 7px;

    font-size: 16px;
    line-height: 1;
}


@media (max-width: 768px) {

    body.pwa-has-bottom-nav
    .pwa-install-button {

        bottom: calc(
            82px + env(safe-area-inset-bottom)
        );
    }


    .pwa-install-button {
        right: 12px;
        left: auto;
        width: auto;
        max-width: calc(100vw - 24px);
        min-height: 44px;
        padding: 9px 14px;
        font-size: 13px;
    }
}

/* ============================================================
   STC v1.1 PWA PHASE 3B — DEVICE PUSH CONTROLS
   ============================================================ */

.push-device-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 12px 16px;

    border-bottom: 1px solid #e5e7eb;

    background: #f8fafc;
}


.push-device-copy {
    min-width: 0;

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


.push-device-copy strong {
    color: #111827;

    font-size: 13px;
    line-height: 1.25;
}


.push-device-status {
    color: #6b7280;

    font-size: 11px;
    line-height: 1.35;

    overflow-wrap: anywhere;
}


.push-device-toggle {
    flex: 0 0 auto;

    width: auto !important;
    min-height: 34px;

    margin: 0;
    padding: 7px 11px;

    border: 1px solid #2563eb;
    border-radius: 9px;

    background: #ffffff;
    color: #2563eb;

    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}


.push-device-toggle:hover {
    background: #eff6ff;
}


.push-device-toggle:disabled {
    border-color: #d1d5db;

    background: #f3f4f6;
    color: #9ca3af;

    cursor: default;
}


.push-device-control[data-state="enabled"] {
    background: #f0fdf4;
}


.push-device-control[data-state="enabled"]
.push-device-status {
    color: #166534;
}


.push-device-control[data-state="enabled"]
.push-device-toggle {
    border-color: #bbf7d0;

    color: #166534;
}


.push-device-control[data-state="blocked"] {
    background: #fff7ed;
}


.push-device-control[data-state="blocked"]
.push-device-status {
    color: #9a3412;
}


.push-device-control[data-state="error"] {
    background: #fef2f2;
}


.push-device-control[data-state="error"]
.push-device-status {
    color: #b91c1c;
}


@media (max-width: 480px) {

    .push-device-control {
        align-items: flex-start;
        gap: 9px;

        padding: 11px 12px;
    }


    .push-device-toggle {
        min-height: 32px;

        padding: 7px 9px;
    }
}