/* ================================
   STOCK ERP LOGIN CSS
   ================================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    height:100%;
}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(135deg,#0f172a,#1e293b,#334155);

    overflow-x:hidden;

}

/*=========================
Login Wrapper
==========================*/

.login-wrapper{

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 0;

}

/*=========================
Brand Area
==========================*/

.brand-area{

    color:#fff;

    padding-right:70px;

}

.brand-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:14px;

    margin-bottom:20px;

    backdrop-filter:blur(10px);

}

.brand-title{

    font-size:56px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.brand-desc{

    font-size:17px;

    opacity:.9;

    line-height:30px;

    margin-bottom:40px;

}

/*=========================
Feature List
==========================*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:16px;

    color:#fff;

}

.feature-item i{

    width:45px;

    height:45px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

/*=========================
Login Card
==========================*/

.login-card{

    background:#fff;

    border-radius:20px;

    padding:45px;

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

}

/*=========================
Logo
==========================*/

.login-logo{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

}

/*=========================
Heading
==========================*/

.login-card h3{

    font-weight:700;

    color:#0f172a;

}

.login-card p{

    color:#64748b;

}

/*=========================
Form
==========================*/

.form-label{

    font-weight:600;

    color:#334155;

}

.input-group{

    height:52px;

}

.input-group-text{

    background:#f8fafc;

    border-right:none;

}

.form-control{

    border-left:none;

    height:52px;

    font-size:15px;

    box-shadow:none!important;

}

.form-control:focus{

    border-color:#ced4da;

}

/*=========================
Password Icon
==========================*/

.password-toggle{

    cursor:pointer;

    background:#f8fafc;

}

/*=========================
Remember
==========================*/

.form-check-label{

    font-size:14px;

    color:#64748b;

}

/*=========================
Button
==========================*/

.btn-login{

    height:52px;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

    background:#2563eb;

    border:none;

    transition:.3s;

}

.btn-login:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

/*=========================
Responsive
==========================*/

@media(max-width:992px){

.brand-area{

display:none;

}

.login-card{

padding:35px 25px;

}

}

@media(max-width:576px){

.login-wrapper{

padding:20px;

}

.login-card{
    max-width: 420px;
    margin: auto;
    padding: 35px;
}

.login-logo{

width:70px;

height:70px;

font-size:28px;

}

.login-card h3{

font-size:24px;

}
}
.page-wrapper {
            padding: 25px;
        }

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

        .page-title {
            font-size: 24px;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        .page-subtitle {
            color: #6b7280;
            font-size: 14px;
            margin-top: 4px;
        }

        .card-box {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

        .filter-card {
            padding: 20px;
            margin-bottom: 20px;
        }

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

        .form-control,
        .form-select {
            height: 42px;
            border-radius: 7px;
            font-size: 14px;
        }

        .btn-primary {
            height: 42px;
            border-radius: 7px;
            font-weight: 600;
        }

        .btn-reset {
            height: 42px;
            border-radius: 7px;
            background: #f3f4f6;
            border: 1px solid #d1d5db;
        }

        .table-card {
            overflow: hidden;
        }

        .table-header {
            padding: 18px 20px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-title {
            font-weight: 700;
            color: #111827;
            margin: 0;
            font-size: 16px;
        }

        .table-responsive {
            min-height: 300px;
        }

        table {
            margin-bottom: 0 !important;
        }

        table thead th {
            background: #f8fafc !important;
            color: #374151;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
            padding: 13px 12px;
            border-bottom: 1px solid #e5e7eb;
        }

        table tbody td {
            font-size: 13px;
            color: #374151;
            padding: 13px 12px;
            vertical-align: middle;
            white-space: nowrap;
        }

        table tbody tr:hover {
            background: #f9fafb;
        }

        .invoice-no {
            font-weight: 700;
            color: #2563eb;
        }

        .amount {
            font-weight: 600;
        }

        .badge-status {
            padding: 5px 9px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
        }

        .status-completed {
            background: #dcfce7;
            color: #166534;
        }

        .status-draft {
            background: #fef3c7;
            color: #92400e;
        }

        .status-cancelled {
            background: #fee2e2;
            color: #991b1b;
        }

        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 3px;
        }

        .action-btn:hover {
            background: #f3f4f6;
        }

        .view-btn {
            color: #2563eb;
        }

        .print-btn {
            color: #16a34a;
        }

        .loading-box {
            padding: 60px 20px;
            text-align: center;
            color: #6b7280;
        }

        .empty-box {
            padding: 60px 20px;
            text-align: center;
            color: #6b7280;
        }

        .empty-box i {
            font-size: 40px;
            margin-bottom: 12px;
            color: #9ca3af;
        }

        .pagination-wrapper {
            padding: 15px 20px;
            border-top: 1px solid #e5e7eb;
        }

        .summary-box {
            font-size: 13px;
            color: #6b7280;
        }

        .summary-box strong {
            color: #111827;
        }

        /* Modal */

        .modal-header {
            background: #f8fafc;
        }

        .modal-title {
            font-weight: 700;
        }

        .detail-label {
            font-size: 12px;
            color: #6b7280;
        }

        .detail-value {
            font-size: 14px;
            font-weight: 600;
            color: #111827;
        }

        .detail-box {
            background: #f8fafc;
            border-radius: 8px;
            padding: 12px;
            height: 100%;
        }

        .purchase-detail-table th {
            font-size: 12px;
            background: #f8fafc;
        }

        .purchase-detail-table td {
            font-size: 13px;
        }