:root {
    --primary-red: #F23545;
    --primary-blue: #394273;
    --primary-light-blue: #2192BF;
    --primary-green: #64BF56;
    --primary-orange: #F29B30;

    --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
    --gradient-danger: linear-gradient(135deg, var(--primary-red), #d32f2f);
    --gradient-success: linear-gradient(135deg, var(--primary-green), #43a047);
    --gradient-warning: linear-gradient(135deg, var(--primary-orange), #f57c00);
    --gradient-info: linear-gradient(135deg, var(--primary-light-blue), #0288d1);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f7fa;
    color: #1a1a2e;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* ==================== CONTAINER FIXES ==================== */
.container,
.container-fluid {
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* ==================== NAVBAR ==================== */
.navbar {
    background: var(--gradient-primary);
    box-shadow: 0 2px 20px rgba(57, 66, 115, 0.2);
    padding: 0.8rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100vw;
}

.navbar .container,
.navbar .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon-small {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    backdrop-filter: blur(5px);
    flex-shrink: 0;
}

.brand-text {
    color: white !important;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.navbar .nav-link:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.navbar .nav-link i {
    margin-right: 6px;
}

.navbar .nav-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: white !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
    padding: 0.5rem;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==================== BUTTONS ==================== */
.btn {
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
}

.btn:active::after {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--gradient-danger);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(242, 53, 69, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(242, 53, 69, 0.4);
    color: white;
}

.btn-success {
    background: var(--gradient-success);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(100, 191, 86, 0.3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(100, 191, 86, 0.4);
    color: white;
}

.btn-warning {
    background: var(--gradient-warning);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(242, 155, 48, 0.3);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(242, 155, 48, 0.4);
    color: white;
}

.btn-info {
    background: var(--gradient-info);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(33, 146, 191, 0.3);
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(33, 146, 191, 0.4);
    color: white;
}

.btn-outline-primary {
    border: 2px solid var(--primary-red);
    color: var(--primary-red);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary-red);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(242, 53, 69, 0.3);
}

.btn-sm {
    padding: 6px 16px;
    font-size: 0.85rem;
    border-radius: 8px;
}

.btn-lg {
    padding: 14px 36px;
    font-size: 1.1rem;
    border-radius: 14px;
}

.btn-secondary {
    background: #6b7280;
    color: white;
    border: none;
}

.btn-secondary:hover {
    background: #4b5563;
    color: white;
    transform: translateY(-2px);
}

/* ==================== CARDS ==================== */
.card {
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    background: white;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    background: var(--gradient-primary);
    color: white;
    padding: 1.25rem 1.5rem;
    border: none;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.card-header h4,
.card-header h5,
.card-header .card-title {
    margin: 0;
    color: white;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
}

/* ==================== DASHBOARD CARDS ==================== */
.dashboard-card {
    padding: 2rem 1.5rem;
    text-align: center;
    border-radius: 16px;
    color: white;
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.6s ease;
}

.dashboard-card:hover::before {
    transform: scale(2);
}

.dashboard-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.dashboard-card i {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.dashboard-card h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.dashboard-card p {
    margin: 0.25rem 0 0.75rem;
    opacity: 0.9;
    font-weight: 500;
}

.dashboard-card .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 20px;
    font-size: 0.85rem;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    width: auto;
}

.dashboard-card .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    color: white;
}

/* Gradient Backgrounds for Dashboard Cards */
.bg-gradient-red {
    background: var(--gradient-danger);
    box-shadow: 0 4px 20px rgba(242, 53, 69, 0.3);
}

.bg-gradient-blue {
    background: var(--gradient-primary);
    box-shadow: 0 4px 20px rgba(57, 66, 115, 0.3);
}

.bg-gradient-light-blue {
    background: var(--gradient-info);
    box-shadow: 0 4px 20px rgba(33, 146, 191, 0.3);
}

.bg-gradient-green {
    background: var(--gradient-success);
    box-shadow: 0 4px 20px rgba(100, 191, 86, 0.3);
}

.bg-gradient-orange {
    background: var(--gradient-warning);
    box-shadow: 0 4px 20px rgba(242, 155, 48, 0.3);
}

/* ==================== STATUS BADGES ==================== */
.status-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

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

.status-pending::before {
    background: #f59e0b;
}

.status-approved {
    background: #d1fae5;
    color: #065f46;
}

.status-approved::before {
    background: #10b981;
}

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

.status-rejected::before {
    background: #ef4444;
}

.status-open {
    background: #dbeafe;
    color: #1e40af;
}

.status-open::before {
    background: #3b82f6;
}

.status-closed {
    background: #e5e7eb;
    color: #4b5563;
}

.status-closed::before {
    background: #9ca3af;
}

/* ==================== FORMS ==================== */
.form-control {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: #fafafa;
    width: 100%;
    max-width: 100%;
}

.form-control:focus {
    border-color: var(--primary-light-blue);
    box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
    background: white;
    outline: none;
}

.form-control-lg {
    padding: 12px 20px;
    font-size: 1.05rem;
}

.form-control-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.form-select {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 16px;
    background-color: #fafafa;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 100%;
}

.form-select:focus {
    border-color: var(--primary-light-blue);
    box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* ==================== TABLES ==================== */
.table {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}

.table thead th {
    background: #f8fafc;
    color: #374151;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
    padding: 12px 16px;
    white-space: nowrap;
}

.table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f5;
}

.table-hover tbody tr {
    transition: all 0.2s ease;
}

.table-hover tbody tr:hover {
    background-color: rgba(33, 146, 191, 0.05);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfc;
}

/* Table Responsive Wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
}

/* ==================== ALERTS ==================== */
.alert {
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-weight: 500;
    width: 100%;
    max-width: 100%;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

/* ==================== FOOTER ==================== */
.footer {
    background: var(--gradient-primary);
    color: rgba(255, 255, 255, 0.9);
    padding: 2.5rem 0;
    margin-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100vw;
}

.footer p {
    margin: 0;
    font-weight: 400;
    opacity: 0.9;
}

.footer a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer a:hover {
    opacity: 0.8;
}

/* ==================== MODALS ==================== */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 100%;
}

.modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
    font-weight: 600;
}

.modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
    flex-wrap: wrap;
}

/* ==================== BREADCRUMB ==================== */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

.breadcrumb-item a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-item.active {
    color: #6b7280;
}

/* ==================== PAGINATION ==================== */
.pagination .page-link {
    border: none;
    color: var(--primary-blue);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    margin: 0 2px;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(57, 66, 115, 0.3);
}

/* ==================== TABS ==================== */
.nav-tabs {
    border-bottom: 2px solid #e5e7eb;
}

.nav-tabs .nav-link {
    border: none;
    color: #6b7280;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-blue);
    background: rgba(57, 66, 115, 0.05);
}

.nav-tabs .nav-link.active {
    color: var(--primary-blue);
    background: transparent;
    border-bottom: 3px solid var(--primary-blue);
    font-weight: 600;
}

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

/* Large devices (desktops, 992px and above) */
@media (min-width: 992px) {
    .container, .container-fluid {
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Medium devices (tablets, 768px to 991px) */
@media (max-width: 991px) {
    .container, .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .navbar {
        padding: 0.5rem 0;
    }

    .brand-text {
        font-size: 1.2rem;
    }

    .card-body {
        padding: 1.25rem;
    }

    .dashboard-card {
        padding: 1.5rem 1rem;
        min-height: 140px;
    }

    .dashboard-card h3 {
        font-size: 1.8rem;
    }

    .dashboard-card i {
        font-size: 2.5rem;
    }
}

/* Small devices (phones, 767px and below) */
@media (max-width: 767px) {
    body {
        font-size: 14px;
    }

    .container, .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .btn {
        padding: 8px 18px;
        font-size: 0.85rem;
    }

    .btn-sm {
        padding: 5px 12px;
        font-size: 0.75rem;
    }

    /* Don't force full width on all buttons */
    .btn:not(.btn-sm):not(.btn-lg) {
        width: 100%;
        justify-content: center;
    }

    .btn-sm, .btn-lg {
        width: auto;
    }

    .card {
        border-radius: 12px;
    }

    .card-header {
        padding: 1rem 1.25rem;
    }

    .card-body {
        padding: 1rem;
    }

    .dashboard-card {
        padding: 1.2rem 0.8rem;
        min-height: 120px;
        border-radius: 12px;
    }

    .dashboard-card h3 {
        font-size: 1.5rem;
    }

    .dashboard-card i {
        font-size: 2rem;
    }

    .dashboard-card p {
        font-size: 0.75rem;
    }

    .table thead th {
        font-size: 0.7rem;
        padding: 8px 10px;
        white-space: normal;
    }

    .table tbody td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .modal-dialog {
        margin: 10px;
    }

    .modal-header {
        padding: 1rem 1.25rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }

    .form-control {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    .form-label {
        font-size: 0.8rem;
    }

    .footer {
        padding: 1.5rem 0;
        margin-top: 2rem;
    }

    .status-badge {
        font-size: 0.7rem;
        padding: 4px 12px;
    }

    .badge {
        font-size: 0.65rem;
        padding: 4px 8px;
    }
}

/* Extra small devices (phones, 576px and below) */
@media (max-width: 576px) {
    body {
        font-size: 13px;
    }

    .container, .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn {
        padding: 6px 14px;
        font-size: 0.8rem;
    }

    .btn-lg {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }

    .card {
        border-radius: 10px;
    }

    .card-header {
        padding: 0.75rem 1rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    .dashboard-card {
        min-height: 100px;
        padding: 1rem 0.5rem;
    }

    .dashboard-card h3 {
        font-size: 1.3rem;
    }

    .dashboard-card i {
        font-size: 1.5rem;
    }

    .dashboard-card .btn {
        font-size: 0.7rem;
        padding: 2px 12px;
        width: auto;
    }

    .table thead th {
        font-size: 0.6rem;
        padding: 6px 8px;
    }

    .table tbody td {
        padding: 6px 8px;
        font-size: 0.7rem;
    }

    .form-control {
        font-size: 0.8rem;
        padding: 6px 10px;
        border-radius: 8px;
    }

    .form-select {
        font-size: 0.8rem;
        padding: 6px 10px;
        border-radius: 8px;
    }

    .modal-content {
        border-radius: 12px;
    }

    .modal-header {
        padding: 0.75rem 1rem;
    }

    .modal-header .modal-title {
        font-size: 0.95rem;
    }

    .modal-body {
        padding: 0.75rem;
    }

    .alert {
        padding: 10px 14px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .footer {
        padding: 1rem 0;
        font-size: 0.8rem;
    }

    .status-badge {
        font-size: 0.6rem;
        padding: 3px 10px;
    }
}

/* Landscape phones */
@media (max-height: 600px) and (orientation: landscape) {
    .dashboard-card {
        min-height: 80px;
        padding: 0.8rem;
    }

    .dashboard-card h3 {
        font-size: 1.2rem;
    }

    .dashboard-card i {
        font-size: 1.2rem;
    }

    .modal-dialog {
        max-height: 90vh;
        margin: 10px auto;
    }

    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ==================== UTILITY CLASSES ==================== */
.text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
    box-shadow: var(--shadow-lg);
}

.rounded-12 {
    border-radius: 12px;
}

.rounded-16 {
    border-radius: 16px;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.d-flex {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-column {
    flex-direction: column !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

/* ==================== SCROLLBAR STYLING ==================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light-blue);
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue);
}

/* ==================== DATA TABLES OVERRIDES ==================== */
.dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 0 5px;
}

.dataTables_wrapper .dataTables_filter {
    float: right !important;
    margin-bottom: 10px !important;
}

.dataTables_wrapper .dataTables_filter input {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    margin-left: 6px;
    background: #fafafa;
    transition: all 0.3s ease;
    max-width: 200px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary-light-blue);
    box-shadow: 0 0 0 3px rgba(33, 146, 191, 0.1);
    outline: none;
    background: white;
}

.dataTables_wrapper .dataTables_length {
    float: left !important;
    margin-bottom: 10px !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.85rem;
    background: #fafafa;
}

.dataTables_wrapper .dataTables_info {
    float: left !important;
    padding-top: 10px !important;
    font-size: 0.85rem;
    color: #6b7280;
}

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    padding-top: 10px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 12px !important;
    margin: 0 2px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    color: #374151 !important;
    background: white !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--gradient-primary) !important;
    color: white !important;
    border-color: var(--primary-blue) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

.dataTables_wrapper .dt-buttons {
    float: left !important;
    margin-bottom: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.dataTables_wrapper .dt-buttons .btn {
    padding: 4px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
    color: #374151 !important;
    margin-right: 4px !important;
    white-space: nowrap !important;
    width: auto !important;
}

.dataTables_wrapper .dt-buttons .btn:hover {
    background: #f8fafc !important;
    border-color: #d1d5db !important;
}

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        max-width: 100% !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_length {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_info {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dt-buttons {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Fix for DataTable responsive in small screens */
@media (max-width: 576px) {
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 2px 8px !important;
        font-size: 0.7rem !important;
    }

    .dataTables_wrapper .dt-buttons .btn {
        padding: 2px 8px !important;
        font-size: 0.7rem !important;
    }
}

/* ==================== MOVED FROM includes/header.php ==================== */
/* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f5f7fa;
            overflow-x: hidden;
        }

        /* ===== WRAPPER ===== */
        .wrapper {
            display: flex;
            width: 100%;
            min-height: 100vh;
        }

        /* ===== SIDEBAR ===== */
        #sidebar {
            min-width: 260px;
            max-width: 260px;
            background: linear-gradient(180deg, var(--primary-blue), #1a237e);
            color: white;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: fixed;
            height: 100vh;
            left: 0;
            top: 0;
            z-index: 1050;
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow: 2px 0 20px rgba(0,0,0,0.15);
        }

        /* Collapsed Sidebar */
        #sidebar.collapsed {
            min-width: 70px;
            max-width: 70px;
        }

        #sidebar.collapsed .sidebar-header h3 span,
        #sidebar.collapsed .sidebar-header .subtitle,
        #sidebar.collapsed ul li a span,
        #sidebar.collapsed ul li a .badge-sidebar,
        #sidebar.collapsed .sidebar-footer .user-details,
        #sidebar.collapsed .sidebar-footer .logout-btn {
            display: none;
        }

        #sidebar.collapsed .sidebar-header h3 {
            justify-content: center;
        }

        #sidebar.collapsed ul li a {
            justify-content: center;
            padding: 11px 0;
        }

        #sidebar.collapsed ul li a i {
            font-size: 1.3rem;
            width: auto;
        }

        #sidebar.collapsed .sidebar-footer .user-info {
            justify-content: center;
        }

        #sidebar.collapsed .sidebar-footer .user-avatar {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        #sidebar.collapsed .sidebar-footer .user-profile-link {
            padding: 0;
        }

        #sidebar .sidebar-header {
            padding: 20px 24px;
            background: rgba(0,0,0,0.15);
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        #sidebar .sidebar-header h3 {
            color: white;
            font-weight: 700;
            font-size: 1.2rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #sidebar .sidebar-header h3 i {
            font-size: 1.4rem;
        }

        #sidebar .sidebar-header .subtitle {
            color: rgba(255,255,255,0.6);
            font-size: 0.7rem;
            margin-top: 4px;
            letter-spacing: 0.5px;
        }

        #sidebar ul.components {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        #sidebar ul li a {
            padding: 11px 24px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,0.75);
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            position: relative;
            white-space: nowrap;
        }

        #sidebar ul li a:hover {
            color: white;
            background: rgba(255,255,255,0.08);
            border-left-color: var(--primary-light-blue);
        }

        #sidebar ul li a.active {
            color: white;
            background: rgba(255,255,255,0.12);
            border-left-color: var(--primary-light-blue);
        }

        #sidebar ul li a i {
            width: 20px;
            text-align: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        #sidebar ul li a .badge-sidebar {
            margin-left: auto;
            background: var(--primary-red);
            color: white;
            padding: 1px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
            flex-shrink: 0;
        }

        #sidebar .sidebar-footer {
            padding: 16px 20px;
            border-top: 1px solid rgba(255,255,255,0.08);
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,0.1);
        }

        #sidebar .sidebar-footer .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        #sidebar .sidebar-footer .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            flex-shrink: 0;
            border: 2px solid rgba(255,255,255,0.1);
        }

        #sidebar .sidebar-footer .user-details {
            flex: 1;
            min-width: 0;
        }

        #sidebar .sidebar-footer .user-details .name {
            font-weight: 600;
            font-size: 0.85rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #sidebar .sidebar-footer .user-details .role {
            font-size: 0.7rem;
            opacity: 0.6;
        }

        #sidebar .sidebar-footer .logout-btn {
            color: rgba(255,255,255,0.6);
            transition: color 0.3s ease;
            padding: 6px 8px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        #sidebar .sidebar-footer .logout-btn:hover {
            color: white;
            background: rgba(255,255,255,0.1);
        }

        /* ===== SIDEBAR SCROLLBAR ===== */
        #sidebar::-webkit-scrollbar {
            width: 4px;
        }

        #sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.05);
        }

        #sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 4px;
        }

        #sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.3);
        }

        /* ===== CONTENT ===== */
        #content {
            width: 100%;
            padding: 20px 20px 40px;
            min-height: 100vh;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-left: 260px;
        }

        /* Content when sidebar is collapsed */
        #sidebar.collapsed ~ #content {
            margin-left: 70px;
        }

        /* ===== TOP NAVBAR ===== */
        .top-navbar {
            background: white;
            padding: 14px 24px;
            border-radius: 14px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .top-navbar .left-section {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .top-navbar .page-title h4 {
            margin: 0;
            font-weight: 700;
            color: var(--primary-blue);
            font-size: 1.15rem;
            white-space: nowrap;
        }

        .top-navbar .page-title p {
            margin: 0;
            font-size: 0.78rem;
            color: #6b7280;
        }

        .top-navbar .navbar-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .top-navbar .navbar-actions .notification-bell {
            position: relative;
            cursor: pointer;
            padding: 6px;
            border-radius: 50%;
            transition: background 0.3s ease;
        }

        .top-navbar .navbar-actions .notification-bell:hover {
            background: #f3f4f6;
        }

        .top-navbar .navbar-actions .notification-bell .badge-dot {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 18px;
            height: 18px;
            background: var(--primary-red);
            border-radius: 50%;
            font-size: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            padding: 0 5px;
            border: 2px solid white;
        }

        .top-navbar .navbar-actions .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            padding: 4px 12px 4px 4px;
            border-radius: 50px;
            transition: background 0.3s ease;
            border: 1px solid transparent;
        }

        .top-navbar .navbar-actions .user-profile:hover {
            background: #f8fafc;
            border-color: #e5e7eb;
        }

        .top-navbar .navbar-actions .user-profile .avatar-sm {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .top-navbar .navbar-actions .user-profile .user-name {
            font-weight: 600;
            font-size: 0.85rem;
            color: #1a1a2e;
            white-space: nowrap;
        }

        /* ===== SIDEBAR TOGGLE BUTTON ===== */
        #sidebarCollapse {
            background: transparent;
            color: var(--primary-blue);
            border: none;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 1.3rem;
            transition: all 0.3s ease;
            flex-shrink: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #sidebarCollapse:hover {
            background: rgba(57, 66, 115, 0.08);
            transform: scale(1.05);
        }

        /* ===== CONTENT AREA ===== */
        .content-area {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            min-height: 400px;
        }

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

        /* Tablets */
        @media (max-width: 992px) {
            #sidebar {
                min-width: 230px;
                max-width: 230px;
            }

            #content {
                margin-left: 230px;
                padding: 16px;
            }

            #sidebar.collapsed ~ #content {
                margin-left: 70px;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {
            #sidebar {
                margin-left: -260px;
                min-width: 260px;
                max-width: 260px;
            }

            #sidebar.active {
                margin-left: 0;
            }

            #content {
                margin-left: 0;
                padding: 12px;
            }

            #sidebarCollapse {
                display: flex;
                font-size: 1.2rem;
                padding: 6px 10px;
            }

            .top-navbar {
                padding: 12px 16px;
                border-radius: 12px;
            }

            .top-navbar .page-title h4 {
                font-size: 1rem;
            }

            .top-navbar .page-title p {
                font-size: 0.7rem;
            }

            .top-navbar .navbar-actions .user-profile .user-name {
                display: none;
            }

            .content-area {
                padding: 16px;
                border-radius: 12px;
            }

            /* Reset collapsed state on mobile */
            #sidebar.collapsed {
                min-width: 260px;
                max-width: 260px;
            }

            #sidebar.collapsed .sidebar-header h3 span,
            #sidebar.collapsed .sidebar-header .subtitle,
            #sidebar.collapsed ul li a span,
            #sidebar.collapsed ul li a .badge-sidebar,
            #sidebar.collapsed .sidebar-footer .user-details,
            #sidebar.collapsed .sidebar-footer .logout-btn {
                display: flex;
            }

            #sidebar.collapsed .sidebar-header h3 {
                justify-content: flex-start;
            }

            #sidebar.collapsed ul li a {
                justify-content: flex-start;
                padding: 11px 24px;
            }

            #sidebar.collapsed ul li a i {
                font-size: 1rem;
                width: 20px;
            }

            #sidebar.collapsed .sidebar-footer .user-info {
                justify-content: flex-start;
            }

            #sidebar.collapsed .sidebar-footer .user-profile-link {
                padding: 4px 8px;
            }
        }

        @media (max-width: 480px) {
            #sidebar {
                min-width: 280px;
                max-width: 280px;
                margin-left: -280px;
            }

            .top-navbar {
                padding: 10px 14px;
                gap: 8px;
            }

            .top-navbar .left-section {
                gap: 8px;
            }

            .top-navbar .page-title h4 {
                font-size: 0.9rem;
            }

            .content-area {
                padding: 12px;
            }

            #sidebarCollapse {
                padding: 5px 8px;
                font-size: 1rem;
            }
        }

        /* ===== OVERLAY FOR MOBILE ===== */
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1040;
            backdrop-filter: blur(2px);
        }

        .sidebar-overlay.active {
            display: block;
        }

        @media (max-width: 768px) {
            .sidebar-overlay.active {
                display: block;
            }
        }

/* ==================== MOVED FROM includes/sidebar.php ==================== */
/* Sidebar Header & Branding */
    .sidebar-header {
        padding: 20px 20px 8px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .sidebar-header h3 {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        font-weight: 700;
        font-size: 1.5rem;
        color: #fff;
    }

    .sidebar-header h3 .brand-logo {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 6px;
        transition: all 0.3s ease;
    }

    .sidebar-header h3 .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
    }

    .sidebar-header h3 .brand-logo:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }

    .sidebar-header h3 span {
        font-weight: 700;
        font-size: 1.5rem;
        color: #fff;
        letter-spacing: 0.5px;
    }

    .sidebar-header .subtitle {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 2px;
        padding-left: 52px;
        font-weight: 400;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    /* Sidebar Footer Profile Link */
    .sidebar-footer .user-profile-link {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: white;
        flex: 1;
        padding: 4px 8px;
        border-radius: 8px;
        transition: all 0.3s ease;
        min-width: 0;
    }

    .sidebar-footer .user-profile-link:hover {
        background: rgba(255, 255, 255, 0.1);
        text-decoration: none;
        color: white;
    }

    .sidebar-footer .user-profile-link .user-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        flex-shrink: 0;
        border: 2px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

    .sidebar-footer .user-profile-link:hover .user-avatar {
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.2);
    }

    .sidebar-footer .user-profile-link .user-details {
        flex: 1;
        min-width: 0;
    }

    .sidebar-footer .user-profile-link .user-details .name {
        font-weight: 600;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.3s ease;
    }

    .sidebar-footer .user-profile-link:hover .user-details .name {
        color: white;
    }

    .sidebar-footer .user-profile-link .user-details .role {
        font-size: 0.7rem;
        opacity: 0.6;
        transition: opacity 0.3s ease;
    }

    .sidebar-footer .user-profile-link:hover .user-details .role {
        opacity: 0.8;
    }

    .sidebar-footer .logout-btn {
        color: rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease;
        padding: 8px 10px;
        border-radius: 8px;
        flex-shrink: 0;
        text-decoration: none;
    }

    .sidebar-footer .logout-btn:hover {
        color: white;
        background: rgba(255, 255, 255, 0.1);
        text-decoration: none;
    }

    .sidebar-footer .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Custom badge styles for pre-qualification status */
    .badge-sidebar {
        background: #e5e7eb;
        color: #374151;
        font-size: 0.6rem;
        padding: 2px 10px;
        border-radius: 12px;
        font-weight: 600;
        margin-left: auto;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .badge-sidebar.badge-pending {
        background: #fef3c7;
        color: #92400e;
    }

    .badge-sidebar.badge-approved {
        background: #d1fae5;
        color: #065f46;
    }

    .badge-sidebar.badge-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    .badge-sidebar.badge-not-submitted {
        background: #e5e7eb;
        color: #374151;
    }

    /* Collapsed sidebar styles */
    #sidebar.collapsed .sidebar-header {
        padding: 16px 12px 8px 12px;
    }

    #sidebar.collapsed .sidebar-header h3 span,
    #sidebar.collapsed .sidebar-header .subtitle,
    #sidebar.collapsed ul li a span,
    #sidebar.collapsed ul li a .badge-sidebar,
    #sidebar.collapsed .sidebar-footer .user-details,
    #sidebar.collapsed .sidebar-footer .logout-btn {
        display: none;
    }

    #sidebar.collapsed .sidebar-header h3 {
        justify-content: center;
        gap: 0;
    }

    #sidebar.collapsed .sidebar-header h3 .brand-logo {
        width: 44px;
        height: 44px;
        padding: 8px;
        border-radius: 12px;
    }

    #sidebar.collapsed ul li a {
        justify-content: center;
        padding: 11px 0;
    }

    #sidebar.collapsed ul li a i {
        font-size: 1.3rem;
        width: auto;
    }

    #sidebar.collapsed .sidebar-footer .user-info {
        justify-content: center;
    }

    #sidebar.collapsed .sidebar-footer .user-avatar {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    #sidebar.collapsed .sidebar-footer .user-profile-link {
        padding: 0;
    }

    /* Mobile: Reset collapsed state */
    @media (max-width: 768px) {
        .sidebar-header {
            padding: 16px 20px 6px 20px;
        }

        .sidebar-header h3 .brand-logo {
            width: 36px;
            height: 36px;
            padding: 5px;
            border-radius: 8px;
        }

        .sidebar-header h3 span {
            font-size: 1.3rem;
        }

        .sidebar-header .subtitle {
            font-size: 0.65rem;
            padding-left: 48px;
        }

        #sidebar.collapsed .sidebar-header h3 span,
        #sidebar.collapsed .sidebar-header .subtitle,
        #sidebar.collapsed ul li a span,
        #sidebar.collapsed ul li a .badge-sidebar,
        #sidebar.collapsed .sidebar-footer .user-details,
        #sidebar.collapsed .sidebar-footer .logout-btn {
            display: flex;
        }

        #sidebar.collapsed .sidebar-header h3 {
            justify-content: flex-start;
            gap: 12px;
        }

        #sidebar.collapsed .sidebar-header h3 .brand-logo {
            width: 36px;
            height: 36px;
            padding: 5px;
            border-radius: 8px;
        }

        #sidebar.collapsed ul li a {
            justify-content: flex-start;
            padding: 11px 24px;
        }

        #sidebar.collapsed ul li a i {
            font-size: 1rem;
            width: 20px;
        }

        #sidebar.collapsed .sidebar-footer .user-info {
            justify-content: flex-start;
        }

        #sidebar.collapsed .sidebar-footer .user-profile-link {
            padding: 4px 8px;
        }
    }

/* ==================== MOVED FROM includes/top_navbar.php ==================== */
/* ===== TOP NAVBAR STYLES ===== */
    .top-navbar {
        background: #ffffff;
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f1f5f9;
        min-height: 72px;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .left-section {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    #sidebarCollapse {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 8px 12px;
        color: #475569;
        transition: all 0.3s ease;
    }

    #sidebarCollapse:hover {
        background: #eef2ff;
        border-color: #818cf8;
        color: #4f46e5;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    }

    .page-title h4 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        letter-spacing: -0.02em;
    }

    .page-title p {
        font-size: 0.75rem;
        color: #94a3b8;
        margin: 0;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .navbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .top-navbar .btn {
        border: none;
        background: transparent;
        padding: 0;
    }

    /* ===== NOTIFICATION BELL ===== */
    .notification-bell {
        position: relative;
        cursor: pointer;
        padding: 10px 14px;
        border-radius: 12px;
        transition: all 0.3s ease;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .notification-bell:hover {
        background: #f1f5f9;
    }

    .notification-bell:active {
        transform: scale(0.92);
    }

    .notification-bell i {
        font-size: 1.35rem;
        color: #64748b;
        transition: all 0.3s ease;
    }

    .notification-bell:hover i {
        color: #4f46e5;
        transform: scale(1.05);
    }

    .notification-bell .badge-dot {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 22px;
        height: 22px;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        border-radius: 50%;
        font-size: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        padding: 0 7px;
        border: 2.5px solid white;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
        animation: pulse-badge 2s infinite;
    }

    @keyframes pulse-badge {
        0% { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35); }
        50% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.7); }
        100% { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35); }
    }

    /* ===== NOTIFICATION DROPDOWN ===== */
    .notification-dropdown-menu {
        padding: 0 !important;
        overflow: hidden;
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        min-width: 460px !important;
        max-width: 90vw !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04) !important;
        background: #ffffff;
        margin-top: 12px !important;
    }

    /* Header */
    .notification-header {
        padding: 20px 24px 16px;
        border-bottom: 1px solid #f1f5f9;
        background: #ffffff;
    }

    .notification-header h6 {
        font-weight: 700;
        color: #0f172a;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .notification-header h6 i {
        color: #4f46e5;
        font-size: 1.1rem;
    }

    .notification-count-badge {
        background: #eef2ff;
        color: #4f46e5;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 2px 12px;
        border-radius: 20px;
        margin-left: 6px;
    }

    .mark-all-read {
        color: #64748b;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 8px;
        transition: all 0.3s ease;
        text-decoration: none;
        background: transparent;
        border: none;
    }

    .mark-all-read:hover {
        color: #4f46e5;
        background: #f1f5f9;
    }

    /* Tabs */
    .notification-tabs {
        display: flex;
        gap: 4px;
        margin-top: 14px;
        background: #f8fafc;
        padding: 4px;
        border-radius: 10px;
    }

    .tab-btn {
        flex: 1;
        padding: 6px 12px;
        border: none;
        background: transparent;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #94a3b8;
        transition: all 0.3s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .tab-btn:hover {
        color: #475569;
        background: rgba(0, 0, 0, 0.02);
    }

    .tab-btn.active {
        background: #ffffff;
        color: #0f172a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .tab-count {
        background: #e2e8f0;
        color: #475569;
        font-size: 0.6rem;
        font-weight: 700;
        padding: 1px 8px;
        border-radius: 20px;
        min-width: 20px;
        text-align: center;
    }

    .tab-btn.active .tab-count {
        background: #eef2ff;
        color: #4f46e5;
    }

    /* Notification Body */
    .notification-body {
        max-height: 420px;
        overflow-y: auto;
        padding: 4px 0;
    }

    .notification-body::-webkit-scrollbar {
        width: 4px;
    }

    .notification-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .notification-body::-webkit-scrollbar-thumb {
        background: #e2e8f0;
        border-radius: 10px;
    }

    /* Notification Item */
    .notification-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 24px;
        text-decoration: none;
        transition: all 0.2s ease;
        border-left: 4px solid transparent;
        cursor: pointer;
        position: relative;
    }

    .notification-item:hover {
        background: #f8fafc;
        text-decoration: none;
    }

    .notification-item:active {
        transform: scale(0.98);
    }

    .notification-item.vendor:hover {
        border-left-color: #f59e0b;
        background: #fffbeb;
    }

    .notification-item.quotation:hover {
        border-left-color: #3b82f6;
        background: #eff6ff;
    }

    /* Notification Icon */
    .notification-icon-wrapper {
        flex-shrink: 0;
    }

    .notification-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        transition: all 0.3s ease;
    }

    .notification-icon.vendor {
        background: #fef3c7;
        color: #d97706;
    }

    .notification-icon.quotation {
        background: #dbeafe;
        color: #2563eb;
    }

    .notification-item:hover .notification-icon {
        transform: scale(1.05);
    }

    /* Notification Content */
    .notification-content {
        flex: 1;
        min-width: 0;
    }

    .notification-category {
        font-size: 0.65rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .notification-category i {
        font-size: 0.6rem;
        color: #94a3b8;
    }

    .notification-message {
        color: #0f172a;
        font-size: 0.88rem;
        font-weight: 500;
        line-height: 1.4;
    }

    .notification-item.vendor:hover .notification-message {
        color: #92400e;
    }

    .notification-item.quotation:hover .notification-message {
        color: #1e40af;
    }

    .notification-time {
        color: #94a3b8;
        font-size: 0.7rem;
        margin-top: 3px;
        display: flex;
        align-items: center;
        font-weight: 500;
    }

    /* Status Badge */
    .notification-status {
        flex-shrink: 0;
        padding-left: 4px;
    }

    .status-badge {
        font-size: 0.6rem;
        font-weight: 700;
        padding: 2px 12px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .status-badge.new {
        background: #dbeafe;
        color: #2563eb;
    }

    .notification-item.vendor .status-badge.new {
        background: #fef3c7;
        color: #d97706;
    }

    .notification-item.quotation .status-badge.new {
        background: #dbeafe;
        color: #2563eb;
    }

    /* Footer */
    .notification-footer {
        padding: 14px 24px;
        border-top: 1px solid #f1f5f9;
        text-align: center;
        background: #fafcff;
    }

    .view-all-link {
        color: #4f46e5;
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        padding: 6px 16px;
        border-radius: 8px;
        background: transparent;
    }

    .view-all-link:hover {
        color: #4f46e5;
        background: #eef2ff;
        text-decoration: none;
    }

    .view-all-link i {
        transition: transform 0.3s ease;
    }

    .view-all-link:hover i {
        transform: translateX(4px);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 48px 24px;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 2rem;
        color: #94a3b8;
    }

    .empty-state-title {
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 4px;
        font-size: 0.95rem;
    }

    .empty-state-subtitle {
        color: #94a3b8;
        font-size: 0.82rem;
        margin: 0;
    }

    /* ===== USER PROFILE ===== */
    .user-profile {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 4px 16px 4px 4px;
        border-radius: 50px;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        background: transparent;
        min-height: 44px;
    }

    .user-profile:hover {
        background: #f8fafc;
        border-color: #e2e8f0;
    }

    .user-profile:active {
        transform: scale(0.96);
    }

    .user-profile .avatar-sm {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 0.85rem;
        flex-shrink: 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
    }

    .user-profile:hover .avatar-sm {
        box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
        transform: scale(1.05);
    }

    .user-profile .user-name {
        font-weight: 600;
        font-size: 0.85rem;
        color: #0f172a;
        white-space: nowrap;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-profile .fa-chevron-down {
        font-size: 0.65rem;
        color: #94a3b8;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .user-profile[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
        color: #4f46e5;
    }

    /* User Dropdown */
    .user-dropdown-menu {
        overflow: hidden;
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        min-width: 280px !important;
        max-width: 90vw !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04) !important;
        background: #ffffff;
        margin-top: 12px !important;
    }

    .user-dropdown-header {
        padding: 24px 24px 20px;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: white;
        border-radius: 16px 16px 0 0;
        position: relative;
        overflow: hidden;
    }

    .user-dropdown-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -30%;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .user-dropdown-header .user-avatar-large {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.4rem;
        flex-shrink: 0;
        border: 3px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 1;
    }

    .user-dropdown-header .user-name-full {
        font-weight: 700;
        font-size: 1rem;
        color: white;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        z-index: 1;
    }

    .user-dropdown-header .user-email {
        font-size: 0.75rem;
        opacity: 0.85;
        color: white;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        z-index: 1;
    }

    .user-dropdown-header .user-role-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 14px;
        border-radius: 20px;
        font-size: 0.6rem;
        font-weight: 600;
        margin-top: 4px;
        color: white;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        position: relative;
        z-index: 1;
        backdrop-filter: blur(4px);
    }

    .user-dropdown-body {
        padding: 6px 0;
    }

    .user-dropdown-body .dropdown-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 24px;
        color: #0f172a;
        font-size: 0.88rem;
        font-weight: 500;
        transition: all 0.2s ease;
        white-space: nowrap;
        border-left: 3px solid transparent;
        margin: 2px 0;
    }

    .user-dropdown-body .dropdown-item:hover {
        background: #f8fafc;
        color: #4f46e5;
        border-left-color: #4f46e5;
    }

    .user-dropdown-body .dropdown-item i {
        width: 20px;
        text-align: center;
        font-size: 1rem;
        color: #94a3b8;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .user-dropdown-body .dropdown-item:hover i {
        color: #4f46e5;
    }

    .user-dropdown-body .dropdown-item.text-danger:hover {
        background: #fef2f2;
        color: #dc2626;
        border-left-color: #dc2626;
    }

    .user-dropdown-body .dropdown-item.text-danger:hover i {
        color: #dc2626;
    }

    .user-dropdown-body .dropdown-divider {
        margin: 4px 0;
        border-color: #f1f5f9;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 992px) {
        .user-profile .user-name {
            max-width: 80px;
            font-size: 0.8rem;
        }

        .notification-dropdown-menu {
            min-width: 400px !important;
        }

        .user-dropdown-menu {
            min-width: 260px !important;
        }
    }

    @media (max-width: 768px) {
        .top-navbar {
            padding: 8px 16px !important;
            min-height: 60px;
        }

        .page-title h4 {
            font-size: 0.95rem !important;
        }

        .page-title p {
            font-size: 0.6rem !important;
            display: none !important;
        }

        #sidebarCollapse {
            padding: 6px 10px !important;
        }

        #sidebarCollapse i {
            font-size: 1rem !important;
        }

        .notification-dropdown-menu {
            min-width: 340px !important;
            max-width: 85vw !important;
            right: -8px !important;
            border-radius: 14px !important;
        }

        .notification-header {
            padding: 16px 18px 12px !important;
        }

        .notification-item {
            padding: 12px 18px !important;
            gap: 12px !important;
        }

        .notification-icon {
            width: 38px !important;
            height: 38px !important;
            font-size: 0.95rem !important;
            border-radius: 10px !important;
        }

        .notification-message {
            font-size: 0.82rem !important;
        }

        .notification-body {
            max-height: 300px !important;
        }

        .user-profile {
            padding: 2px 10px 2px 2px !important;
            gap: 6px !important;
            min-height: 40px;
        }

        .user-profile .avatar-sm {
            width: 32px !important;
            height: 32px !important;
            font-size: 0.75rem !important;
        }

        .user-profile .user-name {
            display: none !important;
        }

        .user-profile .fa-chevron-down {
            display: none !important;
        }

        .user-dropdown-menu {
            min-width: 240px !important;
            max-width: 85vw !important;
            right: -8px !important;
            border-radius: 14px !important;
        }

        .user-dropdown-header {
            padding: 18px !important;
        }

        .user-dropdown-header .user-avatar-large {
            width: 44px !important;
            height: 44px !important;
            font-size: 1.2rem !important;
        }

        .user-dropdown-header .user-name-full {
            font-size: 0.88rem !important;
            max-width: 120px !important;
        }

        .user-dropdown-header .user-email {
            font-size: 0.7rem !important;
            max-width: 120px !important;
        }

        .user-dropdown-body .dropdown-item {
            padding: 8px 18px !important;
            font-size: 0.82rem !important;
        }
    }

    @media (max-width: 480px) {
        .top-navbar {
            padding: 6px 12px !important;
            min-height: 52px;
        }

        .page-title h4 {
            font-size: 0.85rem !important;
        }

        .notification-dropdown-menu {
            min-width: 290px !important;
            max-width: 80vw !important;
            right: -4px !important;
            border-radius: 12px !important;
        }

        .notification-item {
            padding: 10px 14px !important;
            gap: 10px !important;
        }

        .notification-icon {
            width: 34px !important;
            height: 34px !important;
            font-size: 0.8rem !important;
            border-radius: 8px !important;
        }

        .notification-message {
            font-size: 0.75rem !important;
        }

        .notification-header h6 {
            font-size: 0.85rem !important;
        }

        .tab-btn {
            font-size: 0.7rem !important;
            padding: 4px 8px !important;
        }

        .status-badge {
            font-size: 0.5rem !important;
            padding: 1px 8px !important;
        }

        .user-dropdown-menu {
            min-width: 200px !important;
            max-width: 80vw !important;
            right: -4px !important;
            border-radius: 12px !important;
        }

        .user-dropdown-header .user-avatar-large {
            width: 36px !important;
            height: 36px !important;
            font-size: 1rem !important;
        }

        .user-dropdown-header {
            padding: 14px !important;
        }

        .user-dropdown-header .user-name-full {
            font-size: 0.8rem !important;
            max-width: 100px !important;
        }

        .user-dropdown-header .user-email {
            font-size: 0.6rem !important;
            max-width: 100px !important;
        }

        .user-dropdown-body .dropdown-item {
            padding: 6px 14px !important;
            font-size: 0.78rem !important;
        }

        .notification-bell {
            padding: 6px 10px !important;
        }

        .notification-bell i {
            font-size: 1.1rem !important;
        }

        .notification-bell .badge-dot {
            min-width: 18px;
            height: 18px;
            font-size: 0.5rem;
            top: 0px;
            right: 0px;
        }

        .user-profile .avatar-sm {
            width: 28px !important;
            height: 28px !important;
            font-size: 0.65rem !important;
        }
    }

    /* ===== ANIMATIONS ===== */
    .notification-dropdown-menu,
    .user-dropdown-menu {
        animation: dropdownSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes dropdownSlide {
        from {
            opacity: 0;
            transform: translateY(-12px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

/* ==================== PAGE: admin/dashboard.php ==================== */
body[data-page="admin-dashboard"] {
        --primary-blue: #394273;
        --primary-light-blue: #5b6fa5;
        --primary-orange: #f39c12;
        --primary-green: #27ae60;
        --primary-red: #e74c3c;
    }

    body[data-page="admin-dashboard"] /* Dashboard Cards */
    .dashboard-card {
        padding: 20px 25px;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body[data-page="admin-dashboard"] .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    body[data-page="admin-dashboard"] .dashboard-card i {
        font-size: 2.5rem;
        opacity: 0.3;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    body[data-page="admin-dashboard"] .dashboard-card h3 {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 5px;
    }

    body[data-page="admin-dashboard"] .dashboard-card p {
        font-size: 0.85rem;
        opacity: 0.9;
        margin-bottom: 12px;
    }

    body[data-page="admin-dashboard"] .dashboard-card .btn-light {
        border-radius: 20px;
        padding: 4px 18px;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.3s ease;
        align-self: flex-start;
    }

    body[data-page="admin-dashboard"] .dashboard-card .btn-light:hover {
        transform: scale(1.05);
    }

    body[data-page="admin-dashboard"] .bg-gradient-blue {
        background: linear-gradient(135deg, #394273, #5b6fa5);
    }

    body[data-page="admin-dashboard"] .bg-gradient-orange {
        background: linear-gradient(135deg, #e67e22, #f39c12);
    }

    body[data-page="admin-dashboard"] .bg-gradient-light-blue {
        background: linear-gradient(135deg, #3498db, #85c1e9);
    }

    body[data-page="admin-dashboard"] .bg-gradient-green {
        background: linear-gradient(135deg, #27ae60, #2ecc71);
    }

    body[data-page="admin-dashboard"] .bg-gradient-purple {
        background: linear-gradient(135deg, #8e44ad, #9b59b6);
    }

    body[data-page="admin-dashboard"] .bg-gradient-red {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
    }

    body[data-page="admin-dashboard"] .bg-gradient-teal {
        background: linear-gradient(135deg, #1abc9c, #16a085);
    }

    body[data-page="admin-dashboard"] /* Stats row - 6 cards */
    .stats-row-6 .stat-box {
        background: white;
        border-radius: 12px;
        padding: 18px 15px;
        text-align: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        height: 100%;
        border-bottom: 3px solid transparent;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box .stat-label {
        font-size: 0.75rem;
        color: white;
        font-weight: 500;
        margin-top: 2px;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box .stat-icon {
        font-size: 1.4rem;
        margin-bottom: 4px;
        opacity: 0.7;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.total {
        background: var(--primary-blue);
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.total .stat-number {
        color: white;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.pending-vendors {
        background: #f59e0b;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.pending-vendors .stat-number {
        color: white;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.approved-vendors {
        background: #10b981;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.approved-vendors .stat-number {
        color: white;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.demands {
        background: #8e44ad;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.demands .stat-number {
        color: white;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.quotations {
        background: #f39c12;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.quotations .stat-number {
        color: #d97706;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.po {
        background: #1abc9c;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.po .stat-number {
        color: white;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.pending-quotations {
        background: #e74c3c;
    }

    body[data-page="admin-dashboard"] .stats-row-6 .stat-box.pending-quotations .stat-number {
        color: white;
    }

    body[data-page="admin-dashboard"] /* Recent Activity Section */
    .recent-activity-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        height: 100%;
        min-height: 350px;
    }

    body[data-page="admin-dashboard"] .recent-activity-card .card-header-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f1f3f5;
    }

    body[data-page="admin-dashboard"] .recent-activity-card .card-header-custom h5 {
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
        font-size: 1rem;
    }

    body[data-page="admin-dashboard"] .recent-activity-card .card-header-custom .badge-count {
        background: var(--primary-blue);
        color: white;
        border-radius: 20px;
        padding: 2px 10px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    body[data-page="admin-dashboard"] .recent-activity-card .btn-view-all {
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.3s ease;
    }

    body[data-page="admin-dashboard"] .recent-activity-card .btn-view-all:hover {
        color: var(--primary-light-blue);
    }

    body[data-page="admin-dashboard"] /* Activity Items */
    .activity-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        background: #f8fafc;
        transition: all 0.3s ease;
        cursor: pointer;
        border-left: 3px solid transparent;
    }

    body[data-page="admin-dashboard"] .activity-item:hover {
        background: #f0f2f9;
        border-left-color: var(--primary-blue);
        transform: translateX(3px);
    }

    body[data-page="admin-dashboard"] .activity-item:last-child {
        margin-bottom: 0;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-right: 12px;
        font-size: 0.9rem;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-icon.quotation {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-icon.vendor {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-icon.demand {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-icon.po {
        background: #fce4ec;
        color: #c62828;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-info {
        flex: 1;
        min-width: 0;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-info .title {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-info .meta {
        font-size: 0.7rem;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-info .meta i {
        font-size: 0.6rem;
    }

    body[data-page="admin-dashboard"] .activity-item .activity-badge {
        flex-shrink: 0;
        margin-left: 8px;
    }

    body[data-page="admin-dashboard"] .badge-sm {
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    body[data-page="admin-dashboard"] .badge-sm-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="admin-dashboard"] .badge-sm-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="admin-dashboard"] .badge-sm-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="admin-dashboard"] .badge-sm-open {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="admin-dashboard"] .badge-sm-closed {
        background: #e5e7eb;
        color: #374151;
    }

    body[data-page="admin-dashboard"] .no-data-compact {
        text-align: center;
        padding: 30px 15px;
    }

    body[data-page="admin-dashboard"] .no-data-compact i {
        font-size: 2.5rem;
        color: #d1d5db;
        margin-bottom: 10px;
    }

    body[data-page="admin-dashboard"] .no-data-compact h6 {
        color: #6b7280;
        font-weight: 600;
        font-size: 0.9rem;
    }

    body[data-page="admin-dashboard"] .no-data-compact p {
        color: #9ca3af;
        font-size: 0.8rem;
        margin: 0;
    }

    @media (max-width: 1200px) {
        body[data-page="admin-dashboard"] .stats-row-6 .stat-box .stat-number {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 768px) {
        body[data-page="admin-dashboard"] .dashboard-card {
            min-height: 120px;
            padding: 15px 20px;
        }

        body[data-page="admin-dashboard"] .dashboard-card h3 {
            font-size: 1.8rem;
        }

        body[data-page="admin-dashboard"] .dashboard-card i {
            font-size: 2rem;
            right: 15px;
            top: 15px;
        }

        body[data-page="admin-dashboard"] .dashboard-card p {
            font-size: 0.8rem;
        }

        body[data-page="admin-dashboard"] .dashboard-card .btn-light {
            font-size: 0.75rem;
            padding: 3px 15px;
        }

        body[data-page="admin-dashboard"] .stats-row-6 .stat-box {
            padding: 14px 12px;
        }

        body[data-page="admin-dashboard"] .stats-row-6 .stat-box .stat-number {
            font-size: 1.4rem;
        }

        body[data-page="admin-dashboard"] .stats-row-6 .stat-box .stat-label {
            font-size: 0.7rem;
        }

        body[data-page="admin-dashboard"] .recent-activity-card {
            padding: 15px;
            min-height: auto;
            margin-top: 20px;
        }

        body[data-page="admin-dashboard"] .activity-item {
            padding: 8px 10px;
        }

        body[data-page="admin-dashboard"] .activity-item .activity-icon {
            width: 30px;
            height: 30px;
            font-size: 0.8rem;
        }

        body[data-page="admin-dashboard"] .activity-item .activity-info .title {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 576px) {
        body[data-page="admin-dashboard"] .dashboard-card {
            min-height: 100px;
            padding: 12px 15px;
        }

        body[data-page="admin-dashboard"] .dashboard-card h3 {
            font-size: 1.5rem;
        }

        body[data-page="admin-dashboard"] .dashboard-card i {
            font-size: 1.5rem;
            right: 12px;
            top: 12px;
        }

        body[data-page="admin-dashboard"] .dashboard-card p {
            font-size: 0.7rem;
            margin-bottom: 8px;
        }

        body[data-page="admin-dashboard"] .dashboard-card .btn-light {
            font-size: 0.7rem;
            padding: 2px 12px;
        }

        body[data-page="admin-dashboard"] .stats-row-6 .stat-box .stat-number {
            font-size: 1.2rem;
        }

        body[data-page="admin-dashboard"] .activity-item {
            padding: 6px 8px;
        }

        body[data-page="admin-dashboard"] .activity-item .activity-icon {
            width: 25px;
            height: 25px;
            font-size: 0.7rem;
            margin-right: 8px;
        }

        body[data-page="admin-dashboard"] .activity-item .activity-info .title {
            font-size: 0.75rem;
        }
    }

/* ==================== PAGE: admin/users/index.php ==================== */
body[data-page="admin-users-index"] .users-page .stat-card { border: 0; border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }
    body[data-page="admin-users-index"] .users-page .stat-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
    body[data-page="admin-users-index"] .users-page .table-card { border: 0; border-radius: 18px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08); overflow: hidden; }
    body[data-page="admin-users-index"] .users-page .role-badge, body[data-page="admin-users-index"] .users-page .status-badge { border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 700; }
    body[data-page="admin-users-index"] .users-page .role-admin_user { background: #e0f2fe; color: #075985; }
    body[data-page="admin-users-index"] .users-page .role-procurement_head { background: #ede9fe; color: #5b21b6; }
    body[data-page="admin-users-index"] .users-page .role-vendor { background: #dcfce7; color: #166534; }
    body[data-page="admin-users-index"] .users-page .status-pending { background: #fef3c7; color: #92400e; }
    body[data-page="admin-users-index"] .users-page .status-approved { background: #dcfce7; color: #166534; }
    body[data-page="admin-users-index"] .users-page .status-rejected { background: #fee2e2; color: #991b1b; }
    body[data-page="admin-users-index"] .users-page .inline-form { min-width: 290px; }

/* ==================== PAGE: admin/vendors/index.php ==================== */
body[data-page="admin-vendors-index"] /* ===== GLOBAL RESET ===== */
    * {
        box-sizing: border-box;
    }

    body[data-page="admin-vendors-index"] {
        background: #f0f2f5;
    }

    body[data-page="admin-vendors-index"] /* ===== SMOOTH SCROLLING ===== */
    html {
        scroll-behavior: smooth;
    }

    body[data-page="admin-vendors-index"] /* ===== CARDS WITH ELEVATION ===== */
    .card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease, transform 0.2s ease;
        background: #ffffff;
        overflow: hidden;
        margin-bottom: 1.75rem;
    }

    body[data-page="admin-vendors-index"] .card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
    }

    body[data-page="admin-vendors-index"] .card-header {
        padding: 1rem 1.25rem;
        border-bottom: none;
        font-weight: 600;
        letter-spacing: 0.02em;
        flex-wrap: wrap;
        gap: 8px;
    }

    body[data-page="admin-vendors-index"] .card-header .badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
        border-radius: 30px;
    }

    body[data-page="admin-vendors-index"] .card-body {
        padding: 1.25rem;
    }

    body[data-page="admin-vendors-index"] /* ===== TABLE STYLES ===== */
    .table {
        margin-bottom: 0;
        font-size: 0.9rem;
        width: 100%;
    }

    body[data-page="admin-vendors-index"] .table thead th {
        background: #f8fafc;
        color: #1e293b;
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: 2px solid #e9edf2;
        padding: 0.7rem 0.6rem;
        position: sticky;
        top: 0;
        z-index: 5;
        white-space: nowrap;
    }

    body[data-page="admin-vendors-index"] .table tbody td {
        padding: 0.7rem 0.6rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        background: #ffffff;
        transition: background 0.15s ease;
    }

    body[data-page="admin-vendors-index"] .table tbody tr:hover td {
        background: #fafcff;
    }

    body[data-page="admin-vendors-index"] .table tbody tr:last-child td {
        border-bottom: none;
    }

    body[data-page="admin-vendors-index"] /* ===== BADGES ===== */
    .badge-status {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
        border-radius: 30px;
        font-weight: 500;
    }

    body[data-page="admin-vendors-index"] .badge.bg-info {
        background: #e0f2fe !important;
        color: #0369a1 !important;
        font-weight: 500;
        padding: 0.3rem 0.7rem;
        border-radius: 30px;
        font-size: 0.7rem;
    }

    body[data-page="admin-vendors-index"] .badge.bg-success {
        background: #dcfce7 !important;
        color: #15803d !important;
    }

    body[data-page="admin-vendors-index"] .badge.bg-danger {
        background: #fee2e2 !important;
        color: #b91c1c !important;
    }

    body[data-page="admin-vendors-index"] .badge.bg-warning {
        background: #fef9c3 !important;
        color: #854d0e !important;
    }

    body[data-page="admin-vendors-index"] .badge.bg-secondary {
        background: #e5e7eb !important;
        color: #374151 !important;
    }

    body[data-page="admin-vendors-index"] /* ===== PAGE HEADER ===== */
    .page-header {
        padding: 0.5rem 0 1.25rem 0;
    }

    body[data-page="admin-vendors-index"] .page-header h2 {
        font-weight: 700;
        color: #0f172a;
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    body[data-page="admin-vendors-index"] .page-header p {
        color: #64748b;
        font-size: 0.9rem;
        margin-bottom: 0;
    }

    body[data-page="admin-vendors-index"] /* ===== BUTTONS ===== */
    .btn {
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.8rem;
        padding: 0.35rem 0.9rem;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    body[data-page="admin-vendors-index"] .btn-sm {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }

    body[data-page="admin-vendors-index"] .btn-primary {
        background: #3b82f6;
        color: #fff;
    }

    body[data-page="admin-vendors-index"] .btn-primary:hover {
        background: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    }

    body[data-page="admin-vendors-index"] .btn-success {
        background: #22c55e;
        color: #fff;
    }

    body[data-page="admin-vendors-index"] .btn-success:hover {
        background: #16a34a;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    }

    body[data-page="admin-vendors-index"] .btn-danger {
        background: #ef4444;
        color: #fff;
    }

    body[data-page="admin-vendors-index"] .btn-danger:hover {
        background: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
    }

    body[data-page="admin-vendors-index"] .btn-warning {
        background: #f59e0b;
        color: #fff;
    }

    body[data-page="admin-vendors-index"] .btn-warning:hover {
        background: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    }

    body[data-page="admin-vendors-index"] .btn-outline-secondary {
        border: 1px solid #e2e8f0;
        color: #475569;
        background: transparent;
    }

    body[data-page="admin-vendors-index"] .btn-outline-secondary:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    body[data-page="admin-vendors-index"] /* ===== DATATABLES OVERRIDES ===== */
    .dataTables_wrapper .dataTables_filter {
        float: right !important;
        margin-bottom: 10px !important;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_filter input {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 0.35rem 0.8rem;
        font-size: 0.8rem;
        background: #fafcff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        margin-left: 0.5rem;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_filter input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        outline: none;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_length {
        float: left !important;
        margin-bottom: 10px !important;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_length select {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 0.3rem 1.5rem 0.3rem 0.6rem;
        font-size: 0.8rem;
        background: #fafcff;
        appearance: auto;
        cursor: pointer;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_info {
        font-size: 0.8rem;
        color: #64748b;
        padding-top: 0.7rem;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_paginate {
        float: right !important;
        padding-top: 0.7rem !important;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_paginate .paginate_button {
        border-radius: 6px !important;
        border: 1px solid #e2e8f0 !important;
        padding: 0.25rem 0.65rem !important;
        margin: 0 2px !important;
        color: #475569 !important;
        background: #ffffff !important;
        font-size: 0.75rem !important;
        transition: all 0.2s ease;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #ffffff !important;
        font-weight: 600;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
        transform: translateY(-1px);
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons {
        float: left !important;
        margin-bottom: 10px !important;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons .btn {
        border-radius: 6px;
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
        margin-right: 4px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #475569;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons .btn:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons .btn-success {
        background: #22c55e;
        border-color: #22c55e;
        color: #fff;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons .btn-success:hover {
        background: #16a34a;
        border-color: #16a34a;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons .btn-info {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
    }

    body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons .btn-info:hover {
        background: #2563eb;
        border-color: #2563eb;
    }

    body[data-page="admin-vendors-index"] /* ===== EMPTY STATE ===== */
    .empty-state {
        padding: 3rem 1.5rem;
        text-align: center;
    }

    body[data-page="admin-vendors-index"] .empty-state i {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    body[data-page="admin-vendors-index"] .empty-state p {
        color: #94a3b8;
        font-size: 1rem;
        margin-bottom: 0;
    }

    body[data-page="admin-vendors-index"] /* ===== ACTION BUTTONS ===== */
    .action-buttons {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        align-items: center;
    }

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

    /* Tablets */
    @media (max-width: 992px) {
        body[data-page="admin-vendors-index"] .table thead th {
            font-size: 0.65rem;
            padding: 0.5rem 0.4rem;
        }

        body[data-page="admin-vendors-index"] .table tbody td {
            padding: 0.5rem 0.4rem;
            font-size: 0.8rem;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        body[data-page="admin-vendors-index"] .page-header h2 {
            font-size: 1.2rem;
        }

        body[data-page="admin-vendors-index"] .page-header p {
            font-size: 0.8rem;
        }

        body[data-page="admin-vendors-index"] .table thead th,
        body[data-page="admin-vendors-index"] .table tbody td {
            padding: 0.4rem 0.3rem;
            font-size: 0.7rem;
        }

        body[data-page="admin-vendors-index"] .card-header {
            padding: 0.8rem 1rem;
            flex-direction: row;
            flex-wrap: wrap;
        }

        body[data-page="admin-vendors-index"] .card-header h5 {
            font-size: 0.9rem;
        }

        body[data-page="admin-vendors-index"] .card-header .badge {
            font-size: 0.65rem;
        }

        body[data-page="admin-vendors-index"] .card-body {
            padding: 0.8rem;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_filter {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_filter input {
            width: 100% !important;
            max-width: 250px;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_length {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_info {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
            font-size: 0.75rem;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_paginate {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.2rem 0.5rem !important;
            font-size: 0.7rem !important;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons .btn {
            font-size: 0.7rem;
            padding: 0.2rem 0.6rem;
        }

        body[data-page="admin-vendors-index"] .action-buttons {
            flex-wrap: wrap;
            gap: 3px;
        }

        body[data-page="admin-vendors-index"] .action-buttons .btn {
            font-size: 0.65rem;
            padding: 0.2rem 0.5rem;
        }

        body[data-page="admin-vendors-index"] .badge-status {
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="admin-vendors-index"] .badge.bg-info {
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="admin-vendors-index"] .empty-state i {
            font-size: 2.5rem;
        }

        body[data-page="admin-vendors-index"] .empty-state p {
            font-size: 0.9rem;
        }
    }

    /* Small Mobile */
    @media (max-width: 576px) {
        body[data-page="admin-vendors-index"] .page-header h2 {
            font-size: 1rem;
        }

        body[data-page="admin-vendors-index"] .page-header p {
            font-size: 0.75rem;
        }

        body[data-page="admin-vendors-index"] .table thead th,
        body[data-page="admin-vendors-index"] .table tbody td {
            font-size: 0.6rem;
            padding: 0.3rem 0.2rem;
        }

        body[data-page="admin-vendors-index"] .table thead th {
            font-size: 0.55rem;
        }

        body[data-page="admin-vendors-index"] .card-header {
            padding: 0.6rem 0.8rem;
        }

        body[data-page="admin-vendors-index"] .card-header h5 {
            font-size: 0.8rem;
        }

        body[data-page="admin-vendors-index"] .card-body {
            padding: 0.6rem;
        }

        body[data-page="admin-vendors-index"] .btn-sm {
            font-size: 0.55rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_filter input {
            font-size: 0.7rem;
            padding: 0.25rem 0.5rem;
            max-width: 180px;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.15rem 0.4rem !important;
            font-size: 0.6rem !important;
        }

        body[data-page="admin-vendors-index"] .dataTables_wrapper .dt-buttons .btn {
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="admin-vendors-index"] .badge-status {
            font-size: 0.5rem;
            padding: 0.15rem 0.4rem;
        }
    }

    body[data-page="admin-vendors-index"] /* ===== FIX SCROLL SHIVER ===== */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    body[data-page="admin-vendors-index"] .table-responsive::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    body[data-page="admin-vendors-index"] .table-responsive::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }

    body[data-page="admin-vendors-index"] .table-responsive::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

    body[data-page="admin-vendors-index"] .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    body[data-page="admin-vendors-index"] /* ===== STATS CARDS ===== */
    .stat-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 1rem 1.25rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        border-left: 4px solid #3b82f6;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    body[data-page="admin-vendors-index"] .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    body[data-page="admin-vendors-index"] .stat-card .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #0f172a;
    }

    body[data-page="admin-vendors-index"] .stat-card .stat-label {
        font-size: 0.75rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
    }

    body[data-page="admin-vendors-index"] .stat-card.pending {
        border-left-color: #f59e0b;
    }

    body[data-page="admin-vendors-index"] .stat-card.approved {
        border-left-color: #22c55e;
    }

    body[data-page="admin-vendors-index"] .stat-card.rejected {
        border-left-color: #ef4444;
    }

    body[data-page="admin-vendors-index"] .stat-card.total {
        border-left-color: #3b82f6;
    }

    body[data-page="admin-vendors-index"] .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    @media (max-width: 576px) {
        body[data-page="admin-vendors-index"] .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        body[data-page="admin-vendors-index"] .stat-card {
            padding: 0.75rem 1rem;
        }

        body[data-page="admin-vendors-index"] .stat-card .stat-number {
            font-size: 1.2rem;
        }

        body[data-page="admin-vendors-index"] .stat-card .stat-label {
            font-size: 0.65rem;
        }
    }

    body[data-page="admin-vendors-index"] /* Modal form styles */
    .modal .form-control, body[data-page="admin-vendors-index"] .modal .form-select {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    body[data-page="admin-vendors-index"] .modal .form-control:focus, body[data-page="admin-vendors-index"] .modal .form-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }
    body[data-page="admin-vendors-index"] .modal .form-label {
        font-weight: 500;
        font-size: 0.8rem;
        color: #334155;
        margin-bottom: 0.25rem;
    }
    body[data-page="admin-vendors-index"] .modal .modal-header {
        border-bottom: none;
        padding: 1.25rem 1.5rem 0.5rem 1.5rem;
    }
    body[data-page="admin-vendors-index"] .modal .modal-footer {
        border-top: none;
        padding: 0.5rem 1.5rem 1.25rem 1.5rem;
    }
    body[data-page="admin-vendors-index"] .modal .modal-title {
        font-weight: 700;
        color: #0f172a;
    }

    body[data-page="admin-vendors-index"] /* View modal styles */
    .view-detail-item {
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
    body[data-page="admin-vendors-index"] .view-detail-item .label {
        font-size: 0.7rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    body[data-page="admin-vendors-index"] .view-detail-item .value {
        font-size: 0.9rem;
        color: #0f172a;
        font-weight: 500;
        word-break: break-word;
    }

    body[data-page="admin-vendors-index"] /* Success/Error message styling */
    .alert-custom {
        border-radius: 10px;
        padding: 12px 16px;
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 20px;
        border: none;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    body[data-page="admin-vendors-index"] .alert-custom.alert-success {
        background: #dcfce7;
        color: #15803d;
        border-left: 4px solid #22c55e;
    }
    body[data-page="admin-vendors-index"] .alert-custom.alert-danger {
        background: #fee2e2;
        color: #b91c1c;
        border-left: 4px solid #ef4444;
    }
    body[data-page="admin-vendors-index"] .alert-custom i {
        font-size: 18px;
    }

/* ==================== PAGE: auth/login.php ==================== */
body[data-page="auth-login"] {
            background: linear-gradient(135deg, #f5f7fa 0%, #e8edf2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 20px;
        }

        body[data-page="auth-login"] .login-container {
            width: 100%;
            max-width: 450px;
            animation: fadeInUp 0.6s ease;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        body[data-page="auth-login"] .login-card {
            background: white;
            border-radius: 24px;
            padding: 48px 40px;
            box-shadow: 0 20px 60px rgba(57, 66, 115, 0.12);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        body[data-page="auth-login"] .login-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 30px 80px rgba(57, 66, 115, 0.15);
        }

        body[data-page="auth-login"] .brand-header {
            text-align: center;
            margin-bottom: 32px;
        }

        body[data-page="auth-login"] .brand-logo {
            width: 90px;
            height: 90px;
            margin: 0 auto 16px;
            display: block;
        }

        body[data-page="auth-login"] .brand-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        body[data-page="auth-login"] .brand-title {
            font-size: 28px;
            font-weight: 800;
            color: var(--primary-blue);
            letter-spacing: -0.5px;
            margin-bottom: 4px;
        }

        body[data-page="auth-login"] .brand-subtitle {
            font-size: 15px;
            color: #6b7280;
            font-weight: 400;
        }

        body[data-page="auth-login"] .brand-subtitle span {
            color: var(--primary-red);
            font-weight: 600;
        }

        body[data-page="auth-login"] .login-header {
            text-align: center;
            margin-bottom: 32px;
        }

        body[data-page="auth-login"] .login-header h2 {
            font-size: 22px;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 6px;
        }

        body[data-page="auth-login"] .login-header p {
            color: #6b7280;
            font-size: 14px;
        }

        body[data-page="auth-login"] .form-group {
            margin-bottom: 22px;
        }

        body[data-page="auth-login"] .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 6px;
        }

        body[data-page="auth-login"] .input-group-custom {
            position: relative;
        }

        body[data-page="auth-login"] .input-group-custom .input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 16px;
            transition: color 0.3s ease;
        }

        body[data-page="auth-login"] .input-group-custom .form-control {
            padding: 12px 16px 12px 44px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            background: #fafafa;
            height: 50px;
        }

        body[data-page="auth-login"] .input-group-custom .form-control:focus {
            border-color: var(--primary-light-blue);
            box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
            background: white;
        }

        body[data-page="auth-login"] .input-group-custom .form-control:focus+.input-icon,
        body[data-page="auth-login"] .input-group-custom .form-control:focus~.input-icon {
            color: var(--primary-light-blue);
        }

        body[data-page="auth-login"] .input-group-custom .form-control::placeholder {
            color: #9ca3af;
            font-weight: 400;
        }

        body[data-page="auth-login"] .input-group-custom .toggle-password {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            padding: 0;
            font-size: 16px;
            transition: color 0.3s ease;
        }

        body[data-page="auth-login"] .input-group-custom .toggle-password:hover {
            color: var(--primary-blue);
        }

        body[data-page="auth-login"] .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        body[data-page="auth-login"] .form-options .remember-me {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #4b5563;
            cursor: pointer;
        }

        body[data-page="auth-login"] .form-options .remember-me input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--primary-blue);
            cursor: pointer;
        }

        body[data-page="auth-login"] .form-options .forgot-link {
            font-size: 13px;
            color: var(--primary-blue);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        body[data-page="auth-login"] .form-options .forgot-link:hover {
            color: var(--primary-red);
        }

        body[data-page="auth-login"] .btn-login {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            height: 50px;
        }

        body[data-page="auth-login"] .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(57, 66, 115, 0.3);
        }

        body[data-page="auth-login"] .btn-login:active {
            transform: translateY(0);
        }

        body[data-page="auth-login"] .btn-login .spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        body[data-page="auth-login"] .btn-login.loading .btn-text {
            display: none;
        }

        body[data-page="auth-login"] .btn-login.loading .spinner {
            display: block;
        }

        body[data-page="auth-login"] .register-section {
            text-align: center;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #e5e7eb;
        }

        body[data-page="auth-login"] .register-section p {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        body[data-page="auth-login"] .register-section a {
            color: var(--primary-red);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        body[data-page="auth-login"] .register-section a:hover {
            color: var(--primary-blue);
            text-decoration: underline;
        }

        body[data-page="auth-login"] .alert-custom {
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 20px;
            border: none;
        }

        body[data-page="auth-login"] .alert-custom.alert-danger {
            background: #fef2f2;
            color: #dc2626;
            border-left: 4px solid #dc2626;
        }

        body[data-page="auth-login"] .alert-custom.alert-success {
            background: #f0fdf4;
            color: #16a34a;
            border-left: 4px solid #16a34a;
        }

        @media (max-width: 480px) {
            body[data-page="auth-login"] .login-card {
                padding: 32px 24px;
            }

            body[data-page="auth-login"] .brand-title {
                font-size: 24px;
            }

            body[data-page="auth-login"] .brand-logo {
                width: 70px;
                height: 70px;
            }
        }

/* ==================== PAGE: auth/register.php ==================== */
body[data-page="auth-register"] {
            background: linear-gradient(135deg, #f5f7fa 0%, #e8edf2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 20px;
        }

        body[data-page="auth-register"] .register-container {
            width: 100%;
            max-width: 520px;
            animation: fadeInUp 0.6s ease;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        body[data-page="auth-register"] .register-card {
            background: white;
            border-radius: 24px;
            padding: 40px 36px;
            box-shadow: 0 20px 60px rgba(57, 66, 115, 0.12);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        body[data-page="auth-register"] .register-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 30px 80px rgba(57, 66, 115, 0.15);
        }

        body[data-page="auth-register"] .brand-header {
            text-align: center;
            margin-bottom: 28px;
        }

        body[data-page="auth-register"] .brand-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 16px;
            display: block;
        }

        body[data-page="auth-register"] .brand-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        body[data-page="auth-register"] .brand-title {
            font-size: 26px;
            font-weight: 800;
            color: var(--primary-blue);
            letter-spacing: -0.5px;
        }

        body[data-page="auth-register"] .brand-subtitle {
            font-size: 14px;
            color: #6b7280;
            font-weight: 400;
            margin-top: 4px;
        }

        body[data-page="auth-register"] .brand-subtitle span {
            color: var(--primary-red);
            font-weight: 600;
        }

        body[data-page="auth-register"] .register-header {
            text-align: center;
            margin-bottom: 28px;
        }

        body[data-page="auth-register"] .register-header h2 {
            font-size: 22px;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 6px;
        }

        body[data-page="auth-register"] .register-header p {
            color: #6b7280;
            font-size: 14px;
        }

        body[data-page="auth-register"] .form-group {
            margin-bottom: 20px;
        }

        body[data-page="auth-register"] .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 6px;
        }

        body[data-page="auth-register"] .input-group-custom {
            position: relative;
        }

        body[data-page="auth-register"] .input-group-custom .input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 16px;
            transition: color 0.3s ease;
            z-index: 1;
        }

        body[data-page="auth-register"] .input-group-custom .form-control,
        body[data-page="auth-register"] .input-group-custom .form-select {
            padding: 12px 16px 12px 44px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            background: #fafafa;
            height: 50px;
            width: 100%;
        }

        body[data-page="auth-register"] .input-group-custom .form-select {
            padding-right: 40px;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px 12px;
        }

        body[data-page="auth-register"] .input-group-custom .form-control:focus,
        body[data-page="auth-register"] .input-group-custom .form-select:focus {
            border-color: var(--primary-light-blue);
            box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
            background: white;
        }

        body[data-page="auth-register"] .input-group-custom .form-control:focus + .input-icon,
        body[data-page="auth-register"] .input-group-custom .form-select:focus + .input-icon {
            color: var(--primary-light-blue);
        }

        body[data-page="auth-register"] .input-group-custom .form-control::placeholder {
            color: #9ca3af;
            font-weight: 400;
        }

        body[data-page="auth-register"] .input-group-custom .toggle-password {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            padding: 0;
            font-size: 16px;
            transition: color 0.3s ease;
            z-index: 1;
        }

        body[data-page="auth-register"] .input-group-custom .toggle-password:hover {
            color: var(--primary-blue);
        }

        body[data-page="auth-register"] .btn-register {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            height: 50px;
            margin-top: 8px;
        }

        body[data-page="auth-register"] .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(57, 66, 115, 0.3);
        }

        body[data-page="auth-register"] .btn-register:active {
            transform: translateY(0);
        }

        body[data-page="auth-register"] .btn-register .spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        body[data-page="auth-register"] .btn-register.loading .btn-text {
            display: none;
        }

        body[data-page="auth-register"] .btn-register.loading .spinner {
            display: block;
        }

        body[data-page="auth-register"] .login-section {
            text-align: center;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #e5e7eb;
        }

        body[data-page="auth-register"] .login-section p {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        body[data-page="auth-register"] .login-section a {
            color: var(--primary-red);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        body[data-page="auth-register"] .login-section a:hover {
            color: var(--primary-blue);
            text-decoration: underline;
        }

        body[data-page="auth-register"] .alert-custom {
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 20px;
            border: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        body[data-page="auth-register"] .alert-custom.alert-danger {
            background: #fef2f2;
            color: #dc2626;
            border-left: 4px solid #dc2626;
        }

        body[data-page="auth-register"] .alert-custom.alert-success {
            background: #f0fdf4;
            color: #16a34a;
            border-left: 4px solid #16a34a;
        }

        body[data-page="auth-register"] .alert-custom i {
            font-size: 18px;
        }

        body[data-page="auth-register"] .success-message {
            text-align: center;
            padding: 20px 0;
        }

        body[data-page="auth-register"] .success-message .success-icon {
            width: 80px;
            height: 80px;
            background: #f0fdf4;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 40px;
            color: #16a34a;
        }

        body[data-page="auth-register"] .success-message h4 {
            color: #1a1a2e;
            font-weight: 700;
            margin-bottom: 8px;
        }

        body[data-page="auth-register"] .success-message p {
            color: #6b7280;
            font-size: 14px;
        }

        body[data-page="auth-register"] .btn-go-login {
            background: linear-gradient(135deg, var(--primary-green), #43a047);
            border: none;
            color: white;
            padding: 12px 40px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        body[data-page="auth-register"] .btn-go-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(100, 191, 86, 0.3);
            color: white;
        }


        @media (max-width: 480px) {
            body[data-page="auth-register"] .register-card {
                padding: 28px 20px;
            }

            body[data-page="auth-register"] .brand-title {
                font-size: 22px;
            }

            body[data-page="auth-register"] .brand-logo {
                width: 60px;
                height: 60px;
            }
        }

/* ==================== PAGE: auth/verify_otp.php ==================== */
body[data-page="auth-verify-otp"] {
            background: linear-gradient(135deg, #f5f7fa 0%, #e8edf2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 20px;
        }

        body[data-page="auth-verify-otp"] .verify-container {
            width: 100%;
            max-width: 480px;
            animation: fadeInUp 0.6s ease;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        body[data-page="auth-verify-otp"] .verify-card {
            background: white;
            border-radius: 24px;
            padding: 48px 40px;
            box-shadow: 0 20px 60px rgba(57, 66, 115, 0.12);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        body[data-page="auth-verify-otp"] .verify-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 30px 80px rgba(57, 66, 115, 0.15);
        }

        body[data-page="auth-verify-otp"] .brand-header {
            text-align: center;
            margin-bottom: 32px;
        }

        body[data-page="auth-verify-otp"] .brand-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 32px;
            box-shadow: 0 8px 24px rgba(57, 66, 115, 0.25);
        }

        body[data-page="auth-verify-otp"] .brand-title {
            font-size: 28px;
            font-weight: 800;
            color: var(--primary-blue);
            letter-spacing: -0.5px;
        }

        body[data-page="auth-verify-otp"] .brand-subtitle {
            font-size: 15px;
            color: #6b7280;
            font-weight: 400;
            margin-top: 4px;
        }

        body[data-page="auth-verify-otp"] .brand-subtitle span {
            color: var(--primary-red);
            font-weight: 600;
        }

        body[data-page="auth-verify-otp"] .verify-header {
            text-align: center;
            margin-bottom: 28px;
        }

        body[data-page="auth-verify-otp"] .verify-header h2 {
            font-size: 22px;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 6px;
        }

        body[data-page="auth-verify-otp"] .verify-header p {
            color: #6b7280;
            font-size: 14px;
        }

        body[data-page="auth-verify-otp"] .verify-header .email-highlight {
            font-weight: 600;
            color: var(--primary-blue);
        }

        body[data-page="auth-verify-otp"] .otp-input-group {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 25px 0;
        }

        body[data-page="auth-verify-otp"] .otp-input {
            width: 50px;
            height: 60px;
            text-align: center;
            font-size: 24px;
            font-weight: 700;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            transition: all 0.3s ease;
            background: #fafafa;
            color: #1a1a2e;
        }

        body[data-page="auth-verify-otp"] .otp-input:focus {
            border-color: var(--primary-light-blue);
            box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
            background: white;
            outline: none;
        }

        body[data-page="auth-verify-otp"] .otp-input.error {
            border-color: #dc2626;
            box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
        }

        body[data-page="auth-verify-otp"] .btn-verify {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            height: 50px;
        }

        body[data-page="auth-verify-otp"] .btn-verify:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(57, 66, 115, 0.3);
        }

        body[data-page="auth-verify-otp"] .btn-verify:active {
            transform: translateY(0);
        }

        body[data-page="auth-verify-otp"] .btn-verify:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        body[data-page="auth-verify-otp"] .btn-verify .spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        body[data-page="auth-verify-otp"] .btn-verify.loading .btn-text {
            display: none;
        }

        body[data-page="auth-verify-otp"] .btn-verify.loading .spinner {
            display: block;
        }

        body[data-page="auth-verify-otp"] .resend-section {
            text-align: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
        }

        body[data-page="auth-verify-otp"] .resend-section p {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        body[data-page="auth-verify-otp"] .resend-link {
            color: var(--primary-red);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        body[data-page="auth-verify-otp"] .resend-link:hover {
            color: var(--primary-blue);
            text-decoration: underline;
        }

        body[data-page="auth-verify-otp"] .timer-text {
            font-size: 0.9rem;
            color: #6b7280;
            margin-top: 15px;
            text-align: center;
        }

        body[data-page="auth-verify-otp"] .timer-text .countdown {
            font-weight: 700;
            color: var(--primary-red);
        }

        body[data-page="auth-verify-otp"] .alert-custom {
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 20px;
            border: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        body[data-page="auth-verify-otp"] .alert-custom.alert-danger {
            background: #fef2f2;
            color: #dc2626;
            border-left: 4px solid #dc2626;
        }

        body[data-page="auth-verify-otp"] .alert-custom.alert-success {
            background: #f0fdf4;
            color: #166534;
            border-left: 4px solid #22c55e;
        }

        body[data-page="auth-verify-otp"] .alert-custom i {
            font-size: 18px;
        }

        body[data-page="auth-verify-otp"] .success-message {
            text-align: center;
            padding: 10px 0;
        }

        body[data-page="auth-verify-otp"] .success-message .success-icon {
            width: 80px;
            height: 80px;
            background: #f0fdf4;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 40px;
            color: #16a34a;
        }

        body[data-page="auth-verify-otp"] .success-message h4 {
            color: #1a1a2e;
            font-weight: 700;
            margin-bottom: 8px;
        }

        body[data-page="auth-verify-otp"] .success-message p {
            color: #6b7280;
            font-size: 14px;
        }

        body[data-page="auth-verify-otp"] .btn-go-login {
            background: linear-gradient(135deg, var(--primary-green), #43a047);
            border: none;
            color: white;
            padding: 12px 40px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        body[data-page="auth-verify-otp"] .btn-go-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(100, 191, 86, 0.3);
            color: white;
        }

        @media (max-width: 480px) {
            body[data-page="auth-verify-otp"] .verify-card {
                padding: 32px 24px;
            }

            body[data-page="auth-verify-otp"] .brand-title {
                font-size: 24px;
            }

            body[data-page="auth-verify-otp"] .brand-icon {
                width: 60px;
                height: 60px;
                font-size: 26px;
            }

            body[data-page="auth-verify-otp"] .otp-input {
                width: 40px;
                height: 50px;
                font-size: 20px;
            }

            body[data-page="auth-verify-otp"] .otp-input-group {
                gap: 6px;
            }
        }

/* ==================== PAGE: procurement_head/dashboard.php ==================== */
body[data-page="procurement-head-dashboard"] {
        --primary-blue: #394273;
        --primary-light-blue: #5b6fa5;
        --primary-orange: #f39c12;
        --primary-green: #27ae60;
        --primary-red: #e74c3c;
    }

    body[data-page="procurement-head-dashboard"] /* Dashboard Cards */
    .dashboard-card {
        padding: 20px 25px;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body[data-page="procurement-head-dashboard"] .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    body[data-page="procurement-head-dashboard"] .dashboard-card i {
        font-size: 2.5rem;
        opacity: 0.3;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    body[data-page="procurement-head-dashboard"] .dashboard-card h3 {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 5px;
    }

    body[data-page="procurement-head-dashboard"] .dashboard-card p {
        font-size: 0.85rem;
        opacity: 0.9;
        margin-bottom: 12px;
    }

    body[data-page="procurement-head-dashboard"] .dashboard-card .btn-light {
        border-radius: 20px;
        padding: 4px 18px;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.3s ease;
        align-self: flex-start;
    }

    body[data-page="procurement-head-dashboard"] .dashboard-card .btn-light:hover {
        transform: scale(1.05);
    }

    body[data-page="procurement-head-dashboard"] .bg-gradient-blue {
        background: linear-gradient(135deg, #394273, #5b6fa5);
    }

    body[data-page="procurement-head-dashboard"] .bg-gradient-orange {
        background: linear-gradient(135deg, #e67e22, #f39c12);
    }

    body[data-page="procurement-head-dashboard"] .bg-gradient-light-blue {
        background: linear-gradient(135deg, #3498db, #85c1e9);
    }

    body[data-page="procurement-head-dashboard"] .bg-gradient-green {
        background: linear-gradient(135deg, #27ae60, #2ecc71);
    }

    body[data-page="procurement-head-dashboard"] .bg-gradient-purple {
        background: linear-gradient(135deg, #8e44ad, #9b59b6);
    }

    body[data-page="procurement-head-dashboard"] .bg-gradient-red {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
    }

    body[data-page="procurement-head-dashboard"] .bg-gradient-teal {
        background: linear-gradient(135deg, #1abc9c, #16a085);
    }

    body[data-page="procurement-head-dashboard"] /* Stats row - 6 cards */
    .stats-row-6 .stat-box {
        background: white;
        border-radius: 12px;
        padding: 18px 15px;
        text-align: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        height: 100%;
        border-bottom: 3px solid transparent;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box .stat-label {
        font-size: 0.75rem;
        color: white;
        font-weight: 500;
        margin-top: 2px;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box .stat-icon {
        font-size: 1.4rem;
        margin-bottom: 4px;
        opacity: 0.7;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.total {
        background: var(--primary-blue);
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.total .stat-number {
        color: white;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.pending-vendors {
        background: #f59e0b;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.pending-vendors .stat-number {
        color: white;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.approved-vendors {
        background: #10b981;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.approved-vendors .stat-number {
        color: white;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.demands {
        background: #8e44ad;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.demands .stat-number {
        color: white;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.quotations {
        background: #f39c12;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.quotations .stat-number {
        color: #d97706;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.po {
        background: #1abc9c;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.po .stat-number {
        color: white;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.pending-quotations {
        background: #e74c3c;
    }

    body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box.pending-quotations .stat-number {
        color: white;
    }

    body[data-page="procurement-head-dashboard"] /* Recent Activity Section */
    .recent-activity-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        height: 100%;
        min-height: 350px;
    }

    body[data-page="procurement-head-dashboard"] .recent-activity-card .card-header-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f1f3f5;
    }

    body[data-page="procurement-head-dashboard"] .recent-activity-card .card-header-custom h5 {
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
        font-size: 1rem;
    }

    body[data-page="procurement-head-dashboard"] .recent-activity-card .card-header-custom .badge-count {
        background: var(--primary-blue);
        color: white;
        border-radius: 20px;
        padding: 2px 10px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    body[data-page="procurement-head-dashboard"] .recent-activity-card .btn-view-all {
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.3s ease;
    }

    body[data-page="procurement-head-dashboard"] .recent-activity-card .btn-view-all:hover {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-dashboard"] /* Activity Items */
    .activity-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        background: #f8fafc;
        transition: all 0.3s ease;
        cursor: pointer;
        border-left: 3px solid transparent;
    }

    body[data-page="procurement-head-dashboard"] .activity-item:hover {
        background: #f0f2f9;
        border-left-color: var(--primary-blue);
        transform: translateX(3px);
    }

    body[data-page="procurement-head-dashboard"] .activity-item:last-child {
        margin-bottom: 0;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-right: 12px;
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-icon.quotation {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-icon.vendor {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-icon.demand {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-icon.po {
        background: #fce4ec;
        color: #c62828;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-info {
        flex: 1;
        min-width: 0;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-info .title {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-info .meta {
        font-size: 0.7rem;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-info .meta i {
        font-size: 0.6rem;
    }

    body[data-page="procurement-head-dashboard"] .activity-item .activity-badge {
        flex-shrink: 0;
        margin-left: 8px;
    }

    body[data-page="procurement-head-dashboard"] .badge-sm {
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    body[data-page="procurement-head-dashboard"] .badge-sm-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-dashboard"] .badge-sm-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-dashboard"] .badge-sm-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-dashboard"] .badge-sm-open {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="procurement-head-dashboard"] .badge-sm-closed {
        background: #e5e7eb;
        color: #374151;
    }

    body[data-page="procurement-head-dashboard"] .no-data-compact {
        text-align: center;
        padding: 30px 15px;
    }

    body[data-page="procurement-head-dashboard"] .no-data-compact i {
        font-size: 2.5rem;
        color: #d1d5db;
        margin-bottom: 10px;
    }

    body[data-page="procurement-head-dashboard"] .no-data-compact h6 {
        color: #6b7280;
        font-weight: 600;
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-dashboard"] .no-data-compact p {
        color: #9ca3af;
        font-size: 0.8rem;
        margin: 0;
    }

    @media (max-width: 1200px) {
        body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box .stat-number {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-dashboard"] .dashboard-card {
            min-height: 120px;
            padding: 15px 20px;
        }

        body[data-page="procurement-head-dashboard"] .dashboard-card h3 {
            font-size: 1.8rem;
        }

        body[data-page="procurement-head-dashboard"] .dashboard-card i {
            font-size: 2rem;
            right: 15px;
            top: 15px;
        }

        body[data-page="procurement-head-dashboard"] .dashboard-card p {
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-dashboard"] .dashboard-card .btn-light {
            font-size: 0.75rem;
            padding: 3px 15px;
        }

        body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box {
            padding: 14px 12px;
        }

        body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box .stat-number {
            font-size: 1.4rem;
        }

        body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box .stat-label {
            font-size: 0.7rem;
        }

        body[data-page="procurement-head-dashboard"] .recent-activity-card {
            padding: 15px;
            min-height: auto;
            margin-top: 20px;
        }

        body[data-page="procurement-head-dashboard"] .activity-item {
            padding: 8px 10px;
        }

        body[data-page="procurement-head-dashboard"] .activity-item .activity-icon {
            width: 30px;
            height: 30px;
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-dashboard"] .activity-item .activity-info .title {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 576px) {
        body[data-page="procurement-head-dashboard"] .dashboard-card {
            min-height: 100px;
            padding: 12px 15px;
        }

        body[data-page="procurement-head-dashboard"] .dashboard-card h3 {
            font-size: 1.5rem;
        }

        body[data-page="procurement-head-dashboard"] .dashboard-card i {
            font-size: 1.5rem;
            right: 12px;
            top: 12px;
        }

        body[data-page="procurement-head-dashboard"] .dashboard-card p {
            font-size: 0.7rem;
            margin-bottom: 8px;
        }

        body[data-page="procurement-head-dashboard"] .dashboard-card .btn-light {
            font-size: 0.7rem;
            padding: 2px 12px;
        }

        body[data-page="procurement-head-dashboard"] .stats-row-6 .stat-box .stat-number {
            font-size: 1.2rem;
        }

        body[data-page="procurement-head-dashboard"] .activity-item {
            padding: 6px 8px;
        }

        body[data-page="procurement-head-dashboard"] .activity-item .activity-icon {
            width: 25px;
            height: 25px;
            font-size: 0.7rem;
            margin-right: 8px;
        }

        body[data-page="procurement-head-dashboard"] .activity-item .activity-info .title {
            font-size: 0.75rem;
        }
    }

/* ==================== PAGE: procurement_head/vendor_approval.php ==================== */
body[data-page="procurement-head-vendor-approval"] /* ===== GLOBAL RESET ===== */
    * {
        box-sizing: border-box;
    }

    body[data-page="procurement-head-vendor-approval"] {
        background: #f0f2f5;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== SMOOTH SCROLLING ===== */
    html {
        scroll-behavior: smooth;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== CARDS WITH ELEVATION ===== */
    .card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease, transform 0.2s ease;
        background: #ffffff;
        overflow: hidden;
        margin-bottom: 1.75rem;
    }

    body[data-page="procurement-head-vendor-approval"] .card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
    }

    body[data-page="procurement-head-vendor-approval"] .card-header {
        padding: 1rem 1.25rem;
        border-bottom: none;
        font-weight: 600;
        letter-spacing: 0.02em;
        flex-wrap: wrap;
        gap: 8px;
    }

    body[data-page="procurement-head-vendor-approval"] .card-header .badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
        border-radius: 30px;
    }

    body[data-page="procurement-head-vendor-approval"] .card-body {
        padding: 1.25rem;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== TABLE STYLES ===== */
    .table {
        margin-bottom: 0;
        font-size: 0.9rem;
        width: 100%;
    }

    body[data-page="procurement-head-vendor-approval"] .table thead th {
        background: #f8fafc;
        color: #1e293b;
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: 2px solid #e9edf2;
        padding: 0.7rem 0.6rem;
        position: sticky;
        top: 0;
        z-index: 5;
        white-space: nowrap;
    }

    body[data-page="procurement-head-vendor-approval"] .table tbody td {
        padding: 0.7rem 0.6rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        background: #ffffff;
        transition: background 0.15s ease;
    }

    body[data-page="procurement-head-vendor-approval"] .table tbody tr:hover td {
        background: #fafcff;
    }

    body[data-page="procurement-head-vendor-approval"] .table tbody tr:last-child td {
        border-bottom: none;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== BADGES ===== */
    .badge-status {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
        border-radius: 30px;
        font-weight: 500;
    }

    body[data-page="procurement-head-vendor-approval"] .badge.bg-info {
        background: #e0f2fe !important;
        color: #0369a1 !important;
        font-weight: 500;
        padding: 0.3rem 0.7rem;
        border-radius: 30px;
        font-size: 0.7rem;
    }

    body[data-page="procurement-head-vendor-approval"] .badge.bg-success {
        background: #dcfce7 !important;
        color: #15803d !important;
    }

    body[data-page="procurement-head-vendor-approval"] .badge.bg-danger {
        background: #fee2e2 !important;
        color: #b91c1c !important;
    }

    body[data-page="procurement-head-vendor-approval"] .badge.bg-warning {
        background: #fef9c3 !important;
        color: #854d0e !important;
    }

    body[data-page="procurement-head-vendor-approval"] .badge.bg-secondary {
        background: #e5e7eb !important;
        color: #374151 !important;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== PAGE HEADER ===== */
    .page-header {
        padding: 0.5rem 0 1.25rem 0;
    }

    body[data-page="procurement-head-vendor-approval"] .page-header h2 {
        font-weight: 700;
        color: #0f172a;
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    body[data-page="procurement-head-vendor-approval"] .page-header p {
        color: #64748b;
        font-size: 0.9rem;
        margin-bottom: 0;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== BUTTONS ===== */
    .btn {
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.8rem;
        padding: 0.35rem 0.9rem;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    body[data-page="procurement-head-vendor-approval"] .btn-sm {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }

    body[data-page="procurement-head-vendor-approval"] .btn-success {
        background: #22c55e;
        color: #fff;
    }

    body[data-page="procurement-head-vendor-approval"] .btn-success:hover {
        background: #16a34a;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    }

    body[data-page="procurement-head-vendor-approval"] .btn-danger {
        background: #ef4444;
        color: #fff;
    }

    body[data-page="procurement-head-vendor-approval"] .btn-danger:hover {
        background: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
    }

    body[data-page="procurement-head-vendor-approval"] .btn-info {
        background: #3b82f6;
        color: #fff;
    }

    body[data-page="procurement-head-vendor-approval"] .btn-info:hover {
        background: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    }

    body[data-page="procurement-head-vendor-approval"] .btn-outline-secondary {
        border: 1px solid #e2e8f0;
        color: #475569;
        background: transparent;
    }

    body[data-page="procurement-head-vendor-approval"] .btn-outline-secondary:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== FORM ELEMENTS ===== */
    .form-control {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        background: #fafcff;
        width: 100%;
    }

    body[data-page="procurement-head-vendor-approval"] .form-control:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        background: #ffffff;
    }

    body[data-page="procurement-head-vendor-approval"] .form-control-sm {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
        height: 32px;
    }

    body[data-page="procurement-head-vendor-approval"] .input-group .btn {
        border-radius: 0 8px 8px 0;
    }

    body[data-page="procurement-head-vendor-approval"] .input-group .form-control {
        border-radius: 8px 0 0 8px;
    }

    body[data-page="procurement-head-vendor-approval"] .gbms-input-group {
        min-width: 280px;
        display: flex;
        flex-wrap: nowrap;
        gap: 3px;
        width: 100%;
    }

    body[data-page="procurement-head-vendor-approval"] .gbms-input-group .form-control {
        flex: 1 1 auto;
        min-width: 100px;
    }

    body[data-page="procurement-head-vendor-approval"] .gbms-input-group .btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.25rem 0.6rem;
        font-size: 0.7rem;
    }

    body[data-page="procurement-head-vendor-approval"] .action-buttons {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        align-items: center;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== DATATABLES OVERRIDES ===== */
    .dataTables_wrapper .dataTables_filter {
        float: right !important;
        margin-bottom: 10px !important;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_filter input {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 0.35rem 0.8rem;
        font-size: 0.8rem;
        background: #fafcff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        margin-left: 0.5rem;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_filter input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        outline: none;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_length {
        float: left !important;
        margin-bottom: 10px !important;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_length select {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 0.3rem 1.5rem 0.3rem 0.6rem;
        font-size: 0.8rem;
        background: #fafcff;
        appearance: auto;
        cursor: pointer;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_info {
        font-size: 0.8rem;
        color: #64748b;
        padding-top: 0.7rem;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_paginate {
        float: right !important;
        padding-top: 0.7rem !important;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_paginate .paginate_button {
        border-radius: 6px !important;
        border: 1px solid #e2e8f0 !important;
        padding: 0.25rem 0.65rem !important;
        margin: 0 2px !important;
        color: #475569 !important;
        background: #ffffff !important;
        font-size: 0.75rem !important;
        transition: all 0.2s ease;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #ffffff !important;
        font-weight: 600;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
        transform: translateY(-1px);
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons {
        float: left !important;
        margin-bottom: 10px !important;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons .btn {
        border-radius: 6px;
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
        margin-right: 4px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #475569;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons .btn:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons .btn-success {
        background: #22c55e;
        border-color: #22c55e;
        color: #fff;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons .btn-success:hover {
        background: #16a34a;
        border-color: #16a34a;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons .btn-info {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
    }

    body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons .btn-info:hover {
        background: #2563eb;
        border-color: #2563eb;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== ALERTS ===== */
    .alert {
        border-radius: 12px;
        border: none;
        padding: 0.8rem 1rem;
        font-weight: 500;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    body[data-page="procurement-head-vendor-approval"] .alert-success {
        background: #dcfce7;
        color: #166534;
    }

    body[data-page="procurement-head-vendor-approval"] .alert-danger {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-vendor-approval"] .alert .btn-close {
        filter: none;
        opacity: 0.6;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== EMPTY STATE ===== */
    .empty-state {
        padding: 2rem 1.5rem;
        text-align: center;
    }

    body[data-page="procurement-head-vendor-approval"] .empty-state i {
        font-size: 2.5rem;
        color: #cbd5e1;
        margin-bottom: 0.8rem;
    }

    body[data-page="procurement-head-vendor-approval"] .empty-state p {
        color: #94a3b8;
        font-size: 0.9rem;
        margin-bottom: 0;
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== MODAL STYLES ===== */
    .modal-content {
        border-radius: 16px;
        border: none;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    body[data-page="procurement-head-vendor-approval"] .modal-header {
        border-bottom: 2px solid #f1f5f9;
        padding: 1.25rem 1.5rem;
        border-radius: 16px 16px 0 0;
    }

    body[data-page="procurement-head-vendor-approval"] .modal-header h5 {
        font-weight: 700;
        color: #0f172a;
    }

    body[data-page="procurement-head-vendor-approval"] .modal-body {
        padding: 1.5rem;
    }

    body[data-page="procurement-head-vendor-approval"] .modal-footer {
        border-top: 2px solid #f1f5f9;
        padding: 1rem 1.5rem;
        border-radius: 0 0 16px 16px;
    }

    body[data-page="procurement-head-vendor-approval"] .vendor-detail-item {
        display: flex;
        padding: 0.6rem 0;
        border-bottom: 1px solid #f1f5f9;
    }

    body[data-page="procurement-head-vendor-approval"] .vendor-detail-item:last-child {
        border-bottom: none;
    }

    body[data-page="procurement-head-vendor-approval"] .vendor-detail-label {
        font-weight: 600;
        color: #475569;
        width: 130px;
        flex-shrink: 0;
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-vendor-approval"] .vendor-detail-value {
        color: #0f172a;
        font-size: 0.85rem;
        word-break: break-word;
    }

    body[data-page="procurement-head-vendor-approval"] .modal-spinner {
        display: none;
        text-align: center;
        padding: 2rem 0;
    }

    body[data-page="procurement-head-vendor-approval"] .modal-spinner .spinner-border {
        width: 2.5rem;
        height: 2.5rem;
    }

    body[data-page="procurement-head-vendor-approval"] .modal-data-content {
        display: none;
    }

    body[data-page="procurement-head-vendor-approval"] .modal-error {
        display: none;
        color: #dc2626;
        text-align: center;
        padding: 1rem;
        background: #fee2e2;
        border-radius: 8px;
        margin: 0.5rem 0;
    }

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

    /* Tablets */
    @media (max-width: 992px) {
        body[data-page="procurement-head-vendor-approval"] .gbms-input-group {
            min-width: 250px;
        }

        body[data-page="procurement-head-vendor-approval"] .table thead th {
            font-size: 0.65rem;
            padding: 0.5rem 0.4rem;
        }

        body[data-page="procurement-head-vendor-approval"] .table tbody td {
            padding: 0.5rem 0.4rem;
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-vendor-approval"] .vendor-detail-label {
            width: 100px;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        body[data-page="procurement-head-vendor-approval"] .page-header h2 {
            font-size: 1.2rem;
        }

        body[data-page="procurement-head-vendor-approval"] .page-header p {
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-vendor-approval"] .gbms-input-group {
            min-width: 100%;
            flex-wrap: wrap;
        }

        body[data-page="procurement-head-vendor-approval"] .gbms-input-group .form-control {
            flex: 1 1 100%;
            border-radius: 8px;
            min-width: 100%;
        }

        body[data-page="procurement-head-vendor-approval"] .gbms-input-group .btn {
            flex: 1 1 auto;
            border-radius: 8px;
        }

        body[data-page="procurement-head-vendor-approval"] .table thead th,
        body[data-page="procurement-head-vendor-approval"] .table tbody td {
            padding: 0.4rem 0.3rem;
            font-size: 0.7rem;
        }

        body[data-page="procurement-head-vendor-approval"] .card-header {
            padding: 0.8rem 1rem;
            flex-direction: row;
            flex-wrap: wrap;
        }

        body[data-page="procurement-head-vendor-approval"] .card-header h5 {
            font-size: 0.9rem;
        }

        body[data-page="procurement-head-vendor-approval"] .card-header .badge {
            font-size: 0.65rem;
        }

        body[data-page="procurement-head-vendor-approval"] .card-body {
            padding: 0.8rem;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_filter {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_filter input {
            width: 100% !important;
            max-width: 250px;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_length {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_info {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
            font-size: 0.75rem;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_paginate {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.2rem 0.5rem !important;
            font-size: 0.7rem !important;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons {
            float: none !important;
            text-align: center !important;
            width: 100% !important;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons .btn {
            font-size: 0.7rem;
            padding: 0.2rem 0.6rem;
        }

        body[data-page="procurement-head-vendor-approval"] .action-buttons {
            flex-wrap: wrap;
            gap: 3px;
        }

        body[data-page="procurement-head-vendor-approval"] .action-buttons .btn {
            font-size: 0.65rem;
            padding: 0.2rem 0.5rem;
        }

        body[data-page="procurement-head-vendor-approval"] .badge-status {
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="procurement-head-vendor-approval"] .badge.bg-info {
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="procurement-head-vendor-approval"] .empty-state i {
            font-size: 2rem;
        }

        body[data-page="procurement-head-vendor-approval"] .empty-state p {
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-vendor-approval"] .alert {
            padding: 0.7rem 0.8rem;
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-vendor-approval"] .vendor-detail-item {
            flex-direction: column;
            padding: 0.8rem 0;
        }

        body[data-page="procurement-head-vendor-approval"] .vendor-detail-label {
            width: 100%;
            margin-bottom: 0.25rem;
        }

        body[data-page="procurement-head-vendor-approval"] .modal-body {
            padding: 1rem;
        }
    }

    /* Small Mobile */
    @media (max-width: 576px) {
        body[data-page="procurement-head-vendor-approval"] .page-header h2 {
            font-size: 1rem;
        }

        body[data-page="procurement-head-vendor-approval"] .page-header p {
            font-size: 0.75rem;
        }

        body[data-page="procurement-head-vendor-approval"] .table thead th,
        body[data-page="procurement-head-vendor-approval"] .table tbody td {
            font-size: 0.6rem;
            padding: 0.3rem 0.2rem;
        }

        body[data-page="procurement-head-vendor-approval"] .table thead th {
            font-size: 0.55rem;
        }

        body[data-page="procurement-head-vendor-approval"] .card-header {
            padding: 0.6rem 0.8rem;
        }

        body[data-page="procurement-head-vendor-approval"] .card-header h5 {
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-vendor-approval"] .card-body {
            padding: 0.6rem;
        }

        body[data-page="procurement-head-vendor-approval"] .btn-sm {
            font-size: 0.55rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="procurement-head-vendor-approval"] .gbms-input-group .btn {
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="procurement-head-vendor-approval"] .gbms-input-group .form-control-sm {
            font-size: 0.6rem;
            padding: 0.2rem 0.4rem;
            height: 28px;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_filter input {
            font-size: 0.7rem;
            padding: 0.25rem 0.5rem;
            max-width: 180px;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.15rem 0.4rem !important;
            font-size: 0.6rem !important;
        }

        body[data-page="procurement-head-vendor-approval"] .dataTables_wrapper .dt-buttons .btn {
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
        }

        body[data-page="procurement-head-vendor-approval"] .badge-status {
            font-size: 0.5rem;
            padding: 0.15rem 0.4rem;
        }
    }

    body[data-page="procurement-head-vendor-approval"] /* ===== FIX SCROLL SHIVER ===== */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    body[data-page="procurement-head-vendor-approval"] .table-responsive::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    body[data-page="procurement-head-vendor-approval"] .table-responsive::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }

    body[data-page="procurement-head-vendor-approval"] .table-responsive::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

    body[data-page="procurement-head-vendor-approval"] .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* ==================== PAGE: procurement_head/vendor_details.php ==================== */
body[data-page="procurement-head-vendor-details"] .vendor-details-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 15px;
    }

    body[data-page="procurement-head-vendor-details"] .details-header {
        background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
        color: white;
        padding: 30px 35px;
        border-radius: 12px 12px 0 0;
        display: flex;
        align-items: center;
        gap: 25px;
        box-shadow: 0 4px 15px rgba(26, 35, 126, 0.2);
    }

    body[data-page="procurement-head-vendor-details"] .details-header .avatar-large {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        font-weight: 700;
        border: 3px solid rgba(255, 255, 255, 0.25);
        flex-shrink: 0;
        backdrop-filter: blur(5px);
    }

    body[data-page="procurement-head-vendor-details"] .details-header .header-info h3 {
        font-weight: 700;
        margin: 0;
        font-size: 22px;
        letter-spacing: 0.5px;
    }

    body[data-page="procurement-head-vendor-details"] .details-header .header-info .sub-info {
        opacity: 0.9;
        font-size: 14px;
        margin-top: 6px;
    }

    body[data-page="procurement-head-vendor-details"] .details-header .header-info .sub-info i {
        margin-right: 5px;
    }

    body[data-page="procurement-head-vendor-details"] .details-body {
        background: white;
        padding: 30px 35px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    body[data-page="procurement-head-vendor-details"] .detail-section {
        margin-bottom: 30px;
        background: #fafbfc;
        padding: 20px 25px;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    body[data-page="procurement-head-vendor-details"] .detail-section:hover {
        background: #f8f9fa;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    body[data-page="procurement-head-vendor-details"] .detail-section:last-child {
        margin-bottom: 0;
    }

    body[data-page="procurement-head-vendor-details"] .detail-section .section-title {
        font-weight: 700;
        color: #1a237e;
        font-size: 17px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e8eaf6;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-vendor-details"] .detail-section .section-title i {
        color: #3949ab;
        font-size: 18px;
    }

    body[data-page="procurement-head-vendor-details"] .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }

    body[data-page="procurement-head-vendor-details"] .detail-item {
        background: white;
        padding: 14px 18px;
        border-radius: 8px;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    body[data-page="procurement-head-vendor-details"] .detail-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    body[data-page="procurement-head-vendor-details"] .detail-item.full-width {
        grid-column: 1 / -1;
    }

    body[data-page="procurement-head-vendor-details"] .detail-item .label {
        font-size: 12px;
        font-weight: 600;
        color: #78909c;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 5px;
    }

    body[data-page="procurement-head-vendor-details"] .detail-item .value {
        font-size: 14px;
        font-weight: 500;
        color: #263238;
        word-break: break-word;
    }

    body[data-page="procurement-head-vendor-details"] .detail-item .value .badge {
        font-size: 12px;
        padding: 4px 14px;
        font-weight: 600;
    }

    body[data-page="procurement-head-vendor-details"] .status-badge-large {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 20px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    body[data-page="procurement-head-vendor-details"] .status-badge-large.pending {
        background: #fff3e0;
        color: #e65100;
        border: 1px solid #ffcc80;
    }

    body[data-page="procurement-head-vendor-details"] .status-badge-large.approved {
        background: #e8f5e9;
        color: #1b5e20;
        border: 1px solid #81c784;
    }

    body[data-page="procurement-head-vendor-details"] .status-badge-large.rejected {
        background: #fbe9e7;
        color: #b71c1c;
        border: 1px solid #ef9a9a;
    }

    body[data-page="procurement-head-vendor-details"] .status-badge-large i {
        font-size: 8px;
    }

    body[data-page="procurement-head-vendor-details"] .action-buttons {
        display: flex;
        gap: 12px;
        margin-top: 30px;
        padding-top: 25px;
        border-top: 2px solid #e8eaf6;
        flex-wrap: wrap;
    }

    body[data-page="procurement-head-vendor-details"] .action-buttons .btn {
        padding: 10px 28px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-vendor-details"] .action-buttons .btn-back {
        background: #f5f5f5;
        color: #424242;
        border: 1px solid #e0e0e0;
    }

    body[data-page="procurement-head-vendor-details"] .action-buttons .btn-back:hover {
        background: #e8e8e8;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    body[data-page="procurement-head-vendor-details"] .action-buttons .btn-edit {
        background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
        color: white;
        border: none;
    }

    body[data-page="procurement-head-vendor-details"] .action-buttons .btn-edit:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(26, 35, 126, 0.3);
    }

    body[data-page="procurement-head-vendor-details"] .action-buttons .btn-print {
        background: #455a64;
        color: white;
        border: none;
    }

    body[data-page="procurement-head-vendor-details"] .action-buttons .btn-print:hover {
        background: #37474f;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    body[data-page="procurement-head-vendor-details"] .gbms-code-box {
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
        border: 2px solid #66bb6a;
        border-radius: 8px;
        padding: 10px 20px;
        display: inline-block;
        font-family: 'Courier New', monospace;
        font-size: 18px;
        font-weight: 700;
        color: #1b5e20;
        letter-spacing: 1px;
    }

    body[data-page="procurement-head-vendor-details"] .document-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        background: #e3f2fd;
        color: #1565c0;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        transition: all 0.2s ease;
    }

    body[data-page="procurement-head-vendor-details"] .document-link:hover {
        background: #bbdefb;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(21, 101, 192, 0.15);
    }

    body[data-page="procurement-head-vendor-details"] .document-link i {
        font-size: 14px;
    }

    body[data-page="procurement-head-vendor-details"] .no-document {
        color: #bdbdbd;
        font-style: italic;
        font-weight: 400;
    }

    body[data-page="procurement-head-vendor-details"] .filer-badge {
        display: inline-block;
        padding: 4px 18px;
        border-radius: 25px;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.3px;
    }

    body[data-page="procurement-head-vendor-details"] .filer-badge.yes {
        background: #e8f5e9;
        color: #1b5e20;
        border: 1px solid #81c784;
    }

    body[data-page="procurement-head-vendor-details"] .filer-badge.no {
        background: #f5f5f5;
        color: #757575;
        border: 1px solid #e0e0e0;
    }

    body[data-page="procurement-head-vendor-details"] .status-badge {
        padding: 6px 18px;
        border-radius: 25px;
        font-weight: 600;
        font-size: 14px;
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-vendor-details"] .details-header {
            padding: 20px 25px;
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }

        body[data-page="procurement-head-vendor-details"] .details-header .avatar-large {
            width: 60px;
            height: 60px;
            font-size: 26px;
        }

        body[data-page="procurement-head-vendor-details"] .details-header .header-info h3 {
            font-size: 18px;
        }

        body[data-page="procurement-head-vendor-details"] .details-body {
            padding: 20px 25px;
        }

        body[data-page="procurement-head-vendor-details"] .detail-section {
            padding: 15px 18px;
        }

        body[data-page="procurement-head-vendor-details"] .detail-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        body[data-page="procurement-head-vendor-details"] .detail-item {
            padding: 12px 15px;
        }

        body[data-page="procurement-head-vendor-details"] .action-buttons {
            flex-direction: column;
        }

        body[data-page="procurement-head-vendor-details"] .action-buttons .btn {
            width: 100%;
            justify-content: center;
        }
    }

    @media print {
        body[data-page="procurement-head-vendor-details"] .action-buttons {
            display: none !important;
        }

        body[data-page="procurement-head-vendor-details"] .details-body {
            box-shadow: none !important;
            padding: 20px !important;
        }

        body[data-page="procurement-head-vendor-details"] .detail-section {
            background: #f9f9f9 !important;
            break-inside: avoid;
            page-break-inside: avoid;
        }
    }

/* ==================== PAGE: procurement_head/vendor_ledger.php ==================== */
body[data-page="procurement-head-vendor-ledger"] .ledger-stats {
        margin-bottom: 25px;
    }

    body[data-page="procurement-head-vendor-ledger"] .stat-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        text-align: center;
        transition: all 0.3s ease;
        height: 100%;
    }

    body[data-page="procurement-head-vendor-ledger"] .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }

    body[data-page="procurement-head-vendor-ledger"] .stat-card .stat-icon {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    body[data-page="procurement-head-vendor-ledger"] .stat-card .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-blue);
    }

    body[data-page="procurement-head-vendor-ledger"] .stat-card .stat-label {
        color: #6b7280;
        font-size: 0.9rem;
        font-weight: 500;
    }

    body[data-page="procurement-head-vendor-ledger"] .stat-card .stat-amount {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-green);
    }

    body[data-page="procurement-head-vendor-ledger"] .filter-section {
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        margin-bottom: 25px;
    }

    body[data-page="procurement-head-vendor-ledger"] .filter-section .form-label {
        font-weight: 600;
        font-size: 0.85rem;
        color: #374151;
    }

    body[data-page="procurement-head-vendor-ledger"] .filter-section .btn-filter {
        margin-top: 28px;
    }

    body[data-page="procurement-head-vendor-ledger"] /* Improved table container for better visibility */
    .table-container {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        padding: 0;
        overflow: hidden;
        position: relative;
    }

    body[data-page="procurement-head-vendor-ledger"] .table-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        padding: 0 0 20px 0;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    body[data-page="procurement-head-vendor-ledger"] .table-wrapper::-webkit-scrollbar {
        height: 8px;
        background: #f1f1f1;
    }

    body[data-page="procurement-head-vendor-ledger"] .table-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    body[data-page="procurement-head-vendor-ledger"] .table-wrapper::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

    body[data-page="procurement-head-vendor-ledger"] .table-wrapper::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table {
        width: 100%;
        min-width: 1200px;
        margin-bottom: 0;
        border-collapse: collapse;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table th {
        background: #f8fafc;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e5e7eb;
        padding: 10px 12px;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table td {
        padding: 10px 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-vendor-ledger"] /* Fixed column widths */
    .ledger-table th:nth-child(1),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(1) {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        text-align: center;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(2),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(2) {
        min-width: 150px;
        max-width: 200px;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(3),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(3) {
        min-width: 120px;
        max-width: 150px;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(4),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(4) {
        min-width: 120px;
        max-width: 150px;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(5),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(5) {
        min-width: 100px;
        max-width: 120px;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(6),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(6) {
        min-width: 180px;
        max-width: 250px;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(7),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(7),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(8),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(8),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(9),
    body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(9) {
        min-width: 100px;
        max-width: 130px;
        text-align: right;
        font-family: 'Courier New', monospace;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table .vendor-header {
        background: #f8fafc !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        color: #1a1a2e !important;
        border-top: 2px solid #e5e7eb;
        padding: 12px 12px !important;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table .balance-header {
        background: #f0f2f9 !important;
        font-weight: 600 !important;
        color: #394273 !important;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table .balance-row th {
        font-weight: 600 !important;
        background: #f8fafc !important;
    }

    body[data-page="procurement-head-vendor-ledger"] .ledger-table .closing-balance {
        background: #f0f2f9 !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        border-top: 2px solid #e5e7eb;
    }

    body[data-page="procurement-head-vendor-ledger"] .vendor-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="procurement-head-vendor-ledger"] .vendor-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        flex-shrink: 0;
    }

    body[data-page="procurement-head-vendor-ledger"] .vendor-details .name {
        font-weight: 600;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-vendor-ledger"] .vendor-details .email {
        font-size: 0.8rem;
        color: #6b7280;
    }

    body[data-page="procurement-head-vendor-ledger"] .amount-approved {
        color: var(--primary-green);
        font-weight: 700;
    }

    body[data-page="procurement-head-vendor-ledger"] .amount-pending {
        color: var(--primary-orange);
        font-weight: 700;
    }

    body[data-page="procurement-head-vendor-ledger"] .amount-rejected {
        color: var(--primary-red);
        font-weight: 700;
    }

    body[data-page="procurement-head-vendor-ledger"] .badge-status {
        padding: 5px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    body[data-page="procurement-head-vendor-ledger"] .badge-status.badge-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-vendor-ledger"] .badge-status.badge-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-vendor-ledger"] .badge-status.badge-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-vendor-ledger"] .no-data {
        text-align: center;
        padding: 60px 20px;
    }

    body[data-page="procurement-head-vendor-ledger"] .no-data i {
        font-size: 4rem;
        color: #d1d5db;
        margin-bottom: 20px;
    }

    body[data-page="procurement-head-vendor-ledger"] .no-data h5 {
        color: #6b7280;
        font-weight: 600;
    }

    body[data-page="procurement-head-vendor-ledger"] .no-data p {
        color: #9ca3af;
    }

    body[data-page="procurement-head-vendor-ledger"] .export-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    body[data-page="procurement-head-vendor-ledger"] .btn-view-ledger {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
        padding: 6px 16px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="procurement-head-vendor-ledger"] .btn-view-ledger:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(57, 66, 115, 0.3);
        color: white;
    }

    /* Responsive adjustments */
    @media (max-width: 1200px) {
        body[data-page="procurement-head-vendor-ledger"] .ledger-table {
            min-width: 1100px;
        }

        body[data-page="procurement-head-vendor-ledger"] .ledger-table td,
        body[data-page="procurement-head-vendor-ledger"] .ledger-table th {
            padding: 8px 10px;
            font-size: 0.8rem;
        }
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-vendor-ledger"] .stat-card .stat-number {
            font-size: 1.5rem;
        }

        body[data-page="procurement-head-vendor-ledger"] .filter-section .btn-filter {
            margin-top: 10px;
            width: 100%;
        }

        body[data-page="procurement-head-vendor-ledger"] .vendor-info {
            flex-direction: column;
            align-items: flex-start;
        }

        body[data-page="procurement-head-vendor-ledger"] .vendor-avatar {
            width: 32px;
            height: 32px;
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-vendor-ledger"] .ledger-table {
            min-width: 900px;
            font-size: 0.75rem;
        }

        body[data-page="procurement-head-vendor-ledger"] .ledger-table td,
        body[data-page="procurement-head-vendor-ledger"] .ledger-table th {
            padding: 6px 8px;
            font-size: 0.7rem;
        }

        body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(2),
        body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(2) {
            min-width: 100px;
            max-width: 130px;
        }

        body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(6),
        body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(6) {
            min-width: 120px;
            max-width: 150px;
        }

        body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(7),
        body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(7),
        body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(8),
        body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(8),
        body[data-page="procurement-head-vendor-ledger"] .ledger-table th:nth-child(9),
        body[data-page="procurement-head-vendor-ledger"] .ledger-table td:nth-child(9) {
            min-width: 80px;
            max-width: 100px;
        }

        body[data-page="procurement-head-vendor-ledger"] .table-wrapper {
            padding: 0 0 10px 0;
        }

        body[data-page="procurement-head-vendor-ledger"] /* Show scroll indicator on mobile */
        .table-wrapper::after {
            content: '← Scroll →';
            display: block;
            text-align: center;
            font-size: 0.7rem;
            color: #999;
            padding: 5px 0;
            background: #f8fafc;
            border-radius: 0 0 12px 12px;
        }
    }

    body[data-page="procurement-head-vendor-ledger"] /* Select2 Custom Styling to Match Your Design */
    .select2-container--default .select2-selection--single {
        height: 38px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 5px 12px;
        transition: all 0.3s ease;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single:hover {
        border-color: var(--primary-blue);
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(57, 66, 115, 0.1);
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #1a1a2e;
        font-size: 0.95rem;
        line-height: 26px;
        padding-left: 0;
        font-weight: 500;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
        right: 8px;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #6b7280 transparent transparent transparent;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #6b7280 transparent;
    }

    body[data-page="procurement-head-vendor-ledger"] /* Dropdown styling */
    .select2-container--default .select2-dropdown {
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        margin-top: 4px;
        overflow: hidden;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-search--dropdown {
        padding: 10px;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-search--dropdown .select2-search__field {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-search--dropdown .select2-search__field:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(57, 66, 115, 0.1);
        outline: none;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results__option {
        padding: 10px 16px;
        font-size: 0.9rem;
        color: #1a1a2e;
        transition: all 0.2s ease;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results__option[aria-selected=true] {
        background: #f0f2f9;
        color: var(--primary-blue);
        font-weight: 600;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results__option[aria-selected=true]:hover {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results__option .select2-results__option--selected {
        background: #e8ebf3;
    }

    body[data-page="procurement-head-vendor-ledger"] /* Placeholder styling */
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    body[data-page="procurement-head-vendor-ledger"] /* Disabled state */
    .select2-container--default.select2-container--disabled .select2-selection--single {
        background-color: #f3f4f6;
        opacity: 0.7;
    }

    body[data-page="procurement-head-vendor-ledger"] /* Clear button */
    .select2-container--default .select2-selection--single .select2-selection__clear {
        margin-right: 20px;
        font-size: 1.2rem;
        color: #6b7280;
        transition: color 0.3s ease;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single .select2-selection__clear:hover {
        color: var(--primary-red);
    }

    /* Mobile responsive for select2 */
    @media (max-width: 768px) {
        body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single {
            height: 44px;
        }

        body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 32px;
            font-size: 0.9rem;
        }

        body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px;
        }

        body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results__option {
            padding: 12px 16px;
            font-size: 0.95rem;
        }
    }

    body[data-page="procurement-head-vendor-ledger"] /* Scrollbar styling for dropdown */
    .select2-container--default .select2-results>.select2-results__options {
        max-height: 250px;
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
        width: 6px;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
        background: #f8fafc;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 3px;
    }

    body[data-page="procurement-head-vendor-ledger"] .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
        background: #b0b7c4;
    }

/* ==================== PAGE: procurement_head/view_ledger.php ==================== */
body[data-page="procurement-head-view-ledger"] .ledger-view-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    body[data-page="procurement-head-view-ledger"] .ledger-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        padding: 30px;
        border-radius: 16px 16px 0 0;
        margin-bottom: 0;
    }

    body[data-page="procurement-head-view-ledger"] .ledger-header h3 {
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="procurement-head-view-ledger"] .ledger-header .subtitle {
        opacity: 0.9;
        font-size: 0.95rem;
        margin-top: 5px;
    }

    body[data-page="procurement-head-view-ledger"] .ledger-body {
        background: white;
        padding: 30px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    }

    body[data-page="procurement-head-view-ledger"] .section-title {
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 1.1rem;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e7eb;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-view-ledger"] .section-title i {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-view-ledger"] .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 25px;
    }

    body[data-page="procurement-head-view-ledger"] .info-item {
        background: #f8fafc;
        padding: 16px 20px;
        border-radius: 12px;
        border-left: 4px solid var(--primary-light-blue);
    }

    body[data-page="procurement-head-view-ledger"] .info-item .label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    body[data-page="procurement-head-view-ledger"] .info-item .value {
        font-size: 1rem;
        font-weight: 600;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-view-ledger"] .info-item .value .badge-status {
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-view-ledger"] .info-item .value .amount-display {
        font-size: 1.2rem;
    }

    body[data-page="procurement-head-view-ledger"] .info-grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    body[data-page="procurement-head-view-ledger"] .info-card {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px;
    }

    body[data-page="procurement-head-view-ledger"] .info-card .card-title {
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 0.95rem;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="procurement-head-view-ledger"] .info-card .card-title i {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-view-ledger"] .info-card .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #e5e7eb;
    }

    body[data-page="procurement-head-view-ledger"] .info-card .detail-row:last-child {
        border-bottom: none;
    }

    body[data-page="procurement-head-view-ledger"] .info-card .detail-row .label {
        color: #6b7280;
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-view-ledger"] .info-card .detail-row .value {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-view-ledger"] .quotation-details-box {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px;
        margin-top: 20px;
        border-left: 4px solid var(--primary-orange);
    }

    body[data-page="procurement-head-view-ledger"] .quotation-details-box .label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    body[data-page="procurement-head-view-ledger"] .quotation-details-box .content {
        font-size: 0.95rem;
        line-height: 1.8;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-view-ledger"] .action-buttons {
        display: flex;
        gap: 12px;
        margin-top: 25px;
        flex-wrap: wrap;
    }

    body[data-page="procurement-head-view-ledger"] .action-buttons .btn {
        padding: 10px 25px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    body[data-page="procurement-head-view-ledger"] .action-buttons .btn-approve {
        background: linear-gradient(135deg, var(--primary-green), #43a047);
        color: white;
        border: none;
    }

    body[data-page="procurement-head-view-ledger"] .action-buttons .btn-approve:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 191, 86, 0.3);
    }

    body[data-page="procurement-head-view-ledger"] .action-buttons .btn-reject {
        background: linear-gradient(135deg, var(--primary-red), #d32f2f);
        color: white;
        border: none;
    }

    body[data-page="procurement-head-view-ledger"] .action-buttons .btn-reject:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(242, 53, 69, 0.3);
    }

    body[data-page="procurement-head-view-ledger"] .action-buttons .btn-back {
        background: #f3f4f6;
        color: #374151;
        border: none;
    }

    body[data-page="procurement-head-view-ledger"] .action-buttons .btn-back:hover {
        background: #e5e7eb;
    }

    body[data-page="procurement-head-view-ledger"] .status-badge-large {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 24px;
        border-radius: 30px;
        font-size: 1rem;
        font-weight: 700;
    }

    body[data-page="procurement-head-view-ledger"] .status-badge-large.badge-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-view-ledger"] .status-badge-large.badge-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-view-ledger"] .status-badge-large.badge-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-view-ledger"] .status-badge-large i {
        font-size: 1.2rem;
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-view-ledger"] .ledger-header {
            padding: 20px;
        }

        body[data-page="procurement-head-view-ledger"] .ledger-body {
            padding: 20px;
        }

        body[data-page="procurement-head-view-ledger"] .info-grid-2col {
            grid-template-columns: 1fr;
        }

        body[data-page="procurement-head-view-ledger"] .info-grid {
            grid-template-columns: 1fr;
        }

        body[data-page="procurement-head-view-ledger"] .action-buttons {
            flex-direction: column;
        }

        body[data-page="procurement-head-view-ledger"] .action-buttons .btn {
            width: 100%;
            text-align: center;
        }
    }

    @media print {
        body[data-page="procurement-head-view-ledger"] .action-buttons {
            display: none;
        }

        body[data-page="procurement-head-view-ledger"] .ledger-header {
            background: var(--primary-blue) !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        body[data-page="procurement-head-view-ledger"] .ledger-body {
            box-shadow: none;
        }
    }

/* ==================== PAGE: procurement_head/demands/create.php ==================== */
body[data-page="procurement-head-demands-create"] .create-demand-container {
        max-width: 800px;
        margin: 0 auto;
    }

    body[data-page="procurement-head-demands-create"] .form-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    body[data-page="procurement-head-demands-create"] .form-card .card-header-custom {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        padding: 20px 30px;
        border-bottom: none;
    }

    body[data-page="procurement-head-demands-create"] .form-card .card-header-custom h4 {
        color: white;
        margin: 0;
        font-weight: 700;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="procurement-head-demands-create"] .form-card .card-header-custom h4 i {
        font-size: 1.5rem;
    }

    body[data-page="procurement-head-demands-create"] .form-card .card-body-custom {
        padding: 30px;
    }

    body[data-page="procurement-head-demands-create"] .form-group-custom {
        margin-bottom: 24px;
    }

    body[data-page="procurement-head-demands-create"] .form-group-custom label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 6px;
        display: block;
    }

    body[data-page="procurement-head-demands-create"] .form-group-custom label .required {
        color: var(--primary-red);
        margin-left: 4px;
    }

    body[data-page="procurement-head-demands-create"] .form-group-custom .form-control,
    body[data-page="procurement-head-demands-create"] .form-group-custom .form-select {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: #fafafa;
        width: 100%;
    }

    body[data-page="procurement-head-demands-create"] .form-group-custom .form-control:focus,
    body[data-page="procurement-head-demands-create"] .form-group-custom .form-select:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
        background: white;
    }

    body[data-page="procurement-head-demands-create"] .form-group-custom .form-control::placeholder {
        color: #9ca3af;
    }

    body[data-page="procurement-head-demands-create"] .form-group-custom textarea.form-control {
        resize: vertical;
        min-height: 120px;
    }

    body[data-page="procurement-head-demands-create"] .form-group-custom .form-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px 12px;
    }

    body[data-page="procurement-head-demands-create"] .btn-group-custom {
        display: flex;
        gap: 12px;
        margin-top: 8px;
    }

    body[data-page="procurement-head-demands-create"] .btn-group-custom .btn {
        padding: 12px 30px;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    body[data-page="procurement-head-demands-create"] .btn-group-custom .btn-primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        border: none;
        color: white;
        flex: 1;
    }

    body[data-page="procurement-head-demands-create"] .btn-group-custom .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
    }

    body[data-page="procurement-head-demands-create"] .btn-group-custom .btn-outline-secondary {
        border: 2px solid #e5e7eb;
        color: #6b7280;
        background: transparent;
    }

    body[data-page="procurement-head-demands-create"] .btn-group-custom .btn-outline-secondary:hover {
        background: #f8fafc;
        border-color: #d1d5db;
    }

    body[data-page="procurement-head-demands-create"] .alert-custom {
        border-radius: 12px;
        padding: 14px 20px;
        font-weight: 500;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: none;
    }

    body[data-page="procurement-head-demands-create"] .alert-custom.alert-success {
        background: #f0fdf4;
        color: #166534;
        border-left: 4px solid #22c55e;
    }

    body[data-page="procurement-head-demands-create"] .alert-custom.alert-danger {
        background: #fef2f2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    body[data-page="procurement-head-demands-create"] .alert-custom i {
        font-size: 1.2rem;
    }

    body[data-page="procurement-head-demands-create"] .form-hint {
        font-size: 0.8rem;
        color: #6b7280;
        margin-top: 4px;
    }

    body[data-page="procurement-head-demands-create"] .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body[data-page="procurement-head-demands-create"] .success-animation {
        text-align: center;
        padding: 20px 0;
    }

    body[data-page="procurement-head-demands-create"] .success-animation .success-icon {
        width: 80px;
        height: 80px;
        background: #f0fdf4;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 40px;
        color: #16a34a;
    }

    body[data-page="procurement-head-demands-create"] .success-animation h5 {
        color: #1a1a2e;
        font-weight: 700;
        margin-bottom: 8px;
    }

    body[data-page="procurement-head-demands-create"] .success-animation p {
        color: #6b7280;
    }


    @media (max-width: 768px) {
        body[data-page="procurement-head-demands-create"] .form-card .card-body-custom {
            padding: 20px;
        }

        body[data-page="procurement-head-demands-create"] .form-card .card-header-custom {
            padding: 16px 20px;
        }

        body[data-page="procurement-head-demands-create"] .btn-group-custom {
            flex-direction: column;
        }

        body[data-page="procurement-head-demands-create"] .form-row {
            grid-template-columns: 1fr;
        }
    }

    body[data-page="procurement-head-demands-create"] /* ===== SELECT2 CUSTOM STYLING ===== */
    /* Match the form's modern, clean design with gradient accents */

    /* --- Main Selection Box --- */
    .select2-container--default .select2-selection--single {
        height: 48px;
        /* Matches form-control height */
        border: 2px solid #e5e7eb;
        /* Matches form border */
        border-radius: 12px;
        /* Matches form border-radius */
        padding: 8px 16px;
        background: #fafafa;
        /* Matches form background */
        transition: all 0.3s ease;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single:hover {
        border-color: var(--primary-blue);
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single:focus-within {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
        background: white;
    }

    body[data-page="procurement-head-demands-create"] /* --- Selected Text --- */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #1a1a2e;
        font-size: 0.95rem;
        line-height: 28px;
        padding-left: 0;
        font-weight: 500;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    body[data-page="procurement-head-demands-create"] /* --- Dropdown Arrow --- */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px;
        right: 12px;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #9ca3af transparent transparent transparent;
        border-width: 6px 5px 0 5px;
        transition: all 0.3s ease;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #9ca3af transparent;
        border-width: 0 5px 6px 5px;
    }

    body[data-page="procurement-head-demands-create"] /* --- Dropdown Container --- */
    .select2-container--default .select2-dropdown {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        margin-top: 6px;
        overflow: hidden;
        background: white;
    }

    body[data-page="procurement-head-demands-create"] /* --- Search Box in Dropdown --- */
    .select2-container--default .select2-search--dropdown {
        padding: 12px 16px;
        background: #fafafa;
        border-bottom: 2px solid #e5e7eb;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-search--dropdown .select2-search__field {
        border: 2px solid #e5e7eb;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        background: white;
        width: 100%;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-search--dropdown .select2-search__field:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
        outline: none;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
        color: #9ca3af;
    }

    body[data-page="procurement-head-demands-create"] /* --- Options List --- */
    .select2-container--default .select2-results__option {
        padding: 12px 18px;
        font-size: 0.9rem;
        color: #1a1a2e;
        transition: all 0.2s ease;
        cursor: pointer;
        border-bottom: 1px solid #f3f4f6;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results__option:last-child {
        border-bottom: none;
    }

    body[data-page="procurement-head-demands-create"] /* --- Hover State --- */
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
    }

    body[data-page="procurement-head-demands-create"] /* --- Selected State --- */
    .select2-container--default .select2-results__option[aria-selected=true] {
        background: #f0f2f9;
        color: var(--primary-blue);
        font-weight: 600;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results__option[aria-selected=true]:hover {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
    }

    body[data-page="procurement-head-demands-create"] /* --- Clear Button --- */
    .select2-container--default .select2-selection--single .select2-selection__clear {
        margin-right: 24px;
        font-size: 1.4rem;
        color: #9ca3af;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__clear:hover {
        color: var(--primary-red);
        transform: scale(1.1);
    }

    body[data-page="procurement-head-demands-create"] /* --- Disabled State --- */
    .select2-container--default.select2-container--disabled .select2-selection--single {
        background: #f3f4f6;
        opacity: 0.7;
        cursor: not-allowed;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow {
        display: none;
    }

    body[data-page="procurement-head-demands-create"] /* --- Scrollbar Styling --- */
    .select2-container--default .select2-results>.select2-results__options {
        max-height: 260px;
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
        width: 6px;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
        background: #fafafa;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 4px;
    }

    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
        background: #b0b7c4;
    }

    body[data-page="procurement-head-demands-create"] /* --- No Results Message --- */
    .select2-container--default .select2-results__option--load-more,
    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results__option--no-results {
        color: #6b7280;
        font-style: italic;
        text-align: center;
        padding: 16px;
        background: #fafafa;
    }

    /* ===== RESPONSIVE ADJUSTMENTS ===== */
    @media (max-width: 768px) {
        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single {
            height: 44px;
            padding: 6px 14px;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px;
            font-size: 0.9rem;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px;
            right: 10px;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-dropdown {
            border-radius: 10px;
            margin-top: 4px;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-search--dropdown {
            padding: 10px 12px;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-search--dropdown .select2-search__field {
            padding: 8px 12px;
            font-size: 0.85rem;
            border-radius: 8px;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results__option {
            padding: 10px 14px;
            font-size: 0.85rem;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__clear {
            font-size: 1.2rem;
            margin-right: 20px;
        }
    }

    @media (max-width: 480px) {
        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single {
            height: 42px;
            padding: 4px 12px;
            border-radius: 10px;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 32px;
            font-size: 0.85rem;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px;
            right: 8px;
        }

        body[data-page="procurement-head-demands-create"] .select2-container--default .select2-dropdown {
            border-radius: 8px;
        }
    }

    body[data-page="procurement-head-demands-create"] /* ===== ANIMATION & TRANSITIONS ===== */
    .select2-container--default .select2-selection--single,
    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-dropdown,
    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-search--dropdown .select2-search__field,
    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-results__option,
    body[data-page="procurement-head-demands-create"] .select2-container--default .select2-selection--single .select2-selection__clear {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body[data-page="procurement-head-demands-create"] /* ===== FOCUS VISIBLE (Accessibility) ===== */
    .select2-container--default .select2-selection--single:focus-visible {
        outline: 2px solid var(--primary-light-blue);
        outline-offset: 2px;
    }

/* ==================== PAGE: procurement_head/demands/edit.php ==================== */
body[data-page="procurement-head-demands-edit"] .edit-demand-container {
        max-width: 800px;
        margin: 0 auto;
    }

    body[data-page="procurement-head-demands-edit"] .form-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    body[data-page="procurement-head-demands-edit"] .form-card .card-header-custom {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        padding: 20px 30px;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    body[data-page="procurement-head-demands-edit"] .form-card .card-header-custom h4 {
        color: white;
        margin: 0;
        font-weight: 700;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="procurement-head-demands-edit"] .form-card .card-header-custom h4 i {
        font-size: 1.5rem;
    }

    body[data-page="procurement-head-demands-edit"] .form-card .card-header-custom .demand-id {
        background: rgba(255,255,255,0.2);
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        color: white;
    }

    body[data-page="procurement-head-demands-edit"] .form-card .card-body-custom {
        padding: 30px;
    }

    body[data-page="procurement-head-demands-edit"] .form-group-custom {
        margin-bottom: 24px;
    }

    body[data-page="procurement-head-demands-edit"] .form-group-custom label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 6px;
        display: block;
    }

    body[data-page="procurement-head-demands-edit"] .form-group-custom label .required {
        color: var(--primary-red);
        margin-left: 4px;
    }

    body[data-page="procurement-head-demands-edit"] .form-group-custom .form-control,
    body[data-page="procurement-head-demands-edit"] .form-group-custom .form-select {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: #fafafa;
        width: 100%;
    }

    body[data-page="procurement-head-demands-edit"] .form-group-custom .form-control:focus,
    body[data-page="procurement-head-demands-edit"] .form-group-custom .form-select:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
        background: white;
    }

    body[data-page="procurement-head-demands-edit"] .form-group-custom .form-control::placeholder {
        color: #9ca3af;
    }

    body[data-page="procurement-head-demands-edit"] .form-group-custom textarea.form-control {
        resize: vertical;
        min-height: 120px;
    }

    body[data-page="procurement-head-demands-edit"] .form-group-custom .form-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px 12px;
    }

    body[data-page="procurement-head-demands-edit"] .btn-group-custom {
        display: flex;
        gap: 12px;
        margin-top: 8px;
    }

    body[data-page="procurement-head-demands-edit"] .btn-group-custom .btn {
        padding: 12px 30px;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    body[data-page="procurement-head-demands-edit"] .btn-group-custom .btn-primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        border: none;
        color: white;
        flex: 1;
    }

    body[data-page="procurement-head-demands-edit"] .btn-group-custom .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
    }

    body[data-page="procurement-head-demands-edit"] .btn-group-custom .btn-success {
        background: linear-gradient(135deg, var(--primary-green), #43a047);
        border: none;
        color: white;
        flex: 1;
    }

    body[data-page="procurement-head-demands-edit"] .btn-group-custom .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 191, 86, 0.3);
    }

    body[data-page="procurement-head-demands-edit"] .btn-group-custom .btn-outline-secondary {
        border: 2px solid #e5e7eb;
        color: #6b7280;
        background: transparent;
    }

    body[data-page="procurement-head-demands-edit"] .btn-group-custom .btn-outline-secondary:hover {
        background: #f8fafc;
        border-color: #d1d5db;
    }

    body[data-page="procurement-head-demands-edit"] .alert-custom {
        border-radius: 12px;
        padding: 14px 20px;
        font-weight: 500;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: none;
    }

    body[data-page="procurement-head-demands-edit"] .alert-custom.alert-success {
        background: #f0fdf4;
        color: #166534;
        border-left: 4px solid #22c55e;
    }

    body[data-page="procurement-head-demands-edit"] .alert-custom.alert-danger {
        background: #fef2f2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    body[data-page="procurement-head-demands-edit"] .alert-custom i {
        font-size: 1.2rem;
    }

    body[data-page="procurement-head-demands-edit"] .form-hint {
        font-size: 0.8rem;
        color: #6b7280;
        margin-top: 4px;
    }

    body[data-page="procurement-head-demands-edit"] .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body[data-page="procurement-head-demands-edit"] .current-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-demands-edit"] .current-status.open {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-demands-edit"] .current-status.closed {
        background: #f3f4f6;
        color: #6b7280;
    }

    body[data-page="procurement-head-demands-edit"] .status-change-warning {
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        padding: 12px 16px;
        border-radius: 8px;
        margin-top: 10px;
        font-size: 0.85rem;
        color: #92400e;
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-demands-edit"] .form-card .card-body-custom {
            padding: 20px;
        }

        body[data-page="procurement-head-demands-edit"] .form-card .card-header-custom {
            padding: 16px 20px;
        }

        body[data-page="procurement-head-demands-edit"] .btn-group-custom {
            flex-direction: column;
        }

        body[data-page="procurement-head-demands-edit"] .form-row {
            grid-template-columns: 1fr;
        }
    }

/* ==================== PAGE: procurement_head/demands/index.php ==================== */
body[data-page="procurement-head-demands-index"] .demands-container {
        max-width: 100%;
        width: 100%;
    }

    body[data-page="procurement-head-demands-index"] .page-header {
        margin-bottom: 25px;
    }

    body[data-page="procurement-head-demands-index"] .page-header h4 {
        font-weight: 700;
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.3rem;
    }

    body[data-page="procurement-head-demands-index"] .page-header h4 i {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-demands-index"] .page-header p {
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-demands-index"] /* Statistics Cards */
    .stat-box {
        background: white;
        border-radius: 12px;
        padding: 18px 15px;
        text-align: center;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        transition: all 0.3s ease;
        height: 100%;
        border-bottom: 3px solid transparent;
    }

    body[data-page="procurement-head-demands-index"] .stat-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }

    body[data-page="procurement-head-demands-index"] .stat-box .stat-number {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.2;
    }

    body[data-page="procurement-head-demands-index"] .stat-box .stat-label {
        font-size: 0.75rem;
        color: #6b7280;
        font-weight: 500;
        margin-top: 2px;
    }

    body[data-page="procurement-head-demands-index"] .stat-box .stat-icon {
        font-size: 1.2rem;
        margin-bottom: 4px;
        opacity: 0.7;
    }

    body[data-page="procurement-head-demands-index"] .stat-box.total {
        border-bottom-color: var(--primary-blue);
    }
    body[data-page="procurement-head-demands-index"] .stat-box.total .stat-number {
        color: var(--primary-blue);
    }

    body[data-page="procurement-head-demands-index"] .stat-box.open {
        border-bottom-color: #10b981;
    }
    body[data-page="procurement-head-demands-index"] .stat-box.open .stat-number {
        color: #059669;
    }

    body[data-page="procurement-head-demands-index"] .stat-box.closed {
        border-bottom-color: #6b7280;
    }
    body[data-page="procurement-head-demands-index"] .stat-box.closed .stat-number {
        color: #374151;
    }

    body[data-page="procurement-head-demands-index"] .stat-box.quotations {
        border-bottom-color: var(--primary-orange);
    }
    body[data-page="procurement-head-demands-index"] .stat-box.quotations .stat-number {
        color: #d97706;
    }

    body[data-page="procurement-head-demands-index"] .stat-box.pending {
        border-bottom-color: #f59e0b;
    }
    body[data-page="procurement-head-demands-index"] .stat-box.pending .stat-number {
        color: #d97706;
    }

    body[data-page="procurement-head-demands-index"] /* Filter Section */
    .filter-section {
        background: white;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        margin-bottom: 25px;
    }

    body[data-page="procurement-head-demands-index"] .filter-section .form-label {
        font-weight: 600;
        font-size: 0.8rem;
        color: #374151;
        margin-bottom: 4px;
    }

    body[data-page="procurement-head-demands-index"] .filter-section .btn-filter {
        margin-top: 22px;
    }

    body[data-page="procurement-head-demands-index"] .filter-section .form-control,
    body[data-page="procurement-head-demands-index"] .filter-section .form-select {
        font-size: 0.85rem;
        padding: 8px 12px;
        height: 38px;
    }

    body[data-page="procurement-head-demands-index"] /* Main Card */
    .main-card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    body[data-page="procurement-head-demands-index"] .main-card .card-header-custom {
        background: white;
        padding: 14px 18px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    body[data-page="procurement-head-demands-index"] .main-card .card-header-custom h5 {
        margin: 0;
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="procurement-head-demands-index"] .main-card .card-header-custom h5 i {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-demands-index"] .main-card .card-body-custom {
        padding: 0;
    }

    body[data-page="procurement-head-demands-index"] /* Table */
    .table-demands {
        margin: 0;
        font-size: 0.85rem;
        width: 100% !important;
    }

    body[data-page="procurement-head-demands-index"] .table-demands thead th {
        background: #f8fafc;
        color: #374151;
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: 2px solid #e5e7eb;
        padding: 10px 12px;
        white-space: nowrap;
    }

    body[data-page="procurement-head-demands-index"] .table-demands tbody td {
        padding: 10px 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-demands-index"] .table-demands tbody tr:hover {
        background-color: rgba(33, 146, 191, 0.03);
    }

    body[data-page="procurement-head-demands-index"] .demand-title {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-demands-index"] .demand-description {
        font-size: 0.75rem;
        color: #6b7280;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }

    body[data-page="procurement-head-demands-index"] .badge-status {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    body[data-page="procurement-head-demands-index"] .badge-status::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        display: inline-block;
    }

    body[data-page="procurement-head-demands-index"] .badge-status.badge-open {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-demands-index"] .badge-status.badge-open::before {
        background: #10b981;
    }

    body[data-page="procurement-head-demands-index"] .badge-status.badge-closed {
        background: #f3f4f6;
        color: #6b7280;
    }

    body[data-page="procurement-head-demands-index"] .badge-status.badge-closed::before {
        background: #9ca3af;
    }

    body[data-page="procurement-head-demands-index"] .badge-count {
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-block;
        margin: 2px;
    }

    body[data-page="procurement-head-demands-index"] .badge-count:hover {
        transform: scale(1.05);
    }

    body[data-page="procurement-head-demands-index"] .badge-count.total {
        background: #e5e7eb;
        color: #374151;
    }

    body[data-page="procurement-head-demands-index"] .badge-count.pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-demands-index"] .badge-count.approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-demands-index"] .badge-count.rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-demands-index"] .btn-view-demand {
        background: #eff6ff;
        color: #1e40af;
        border: none;
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.7rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    body[data-page="procurement-head-demands-index"] .btn-view-demand:hover {
        background: #dbeafe;
        transform: translateY(-1px);
    }

    body[data-page="procurement-head-demands-index"] .btn-edit-demand {
        background: #fef3c7;
        color: #92400e;
        border: none;
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.7rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    body[data-page="procurement-head-demands-index"] .btn-edit-demand:hover {
        background: #fde68a;
        transform: translateY(-1px);
    }

    body[data-page="procurement-head-demands-index"] /* Quotations List in Modal */
    .quotation-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        background: #f8fafc;
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
        flex-wrap: wrap;
        gap: 6px;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item:hover {
        background: #f0f2f9;
        border-left-color: var(--primary-blue);
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-amount {
        font-weight: 700;
        color: var(--primary-blue);
        min-width: 80px;
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-vendor {
        flex: 1;
        font-weight: 500;
        font-size: 0.85rem;
        min-width: 120px;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-vendor small {
        display: block;
        font-size: 0.7rem;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-status {
        margin-right: 6px;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn {
        padding: 2px 8px;
        font-size: 0.65rem;
        border-radius: 4px;
        font-weight: 600;
        border: none;
        white-space: nowrap;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        cursor: pointer;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-view-sm {
        background: #eff6ff;
        color: #1e40af;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-view-sm:hover {
        background: #dbeafe;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-approve-sm {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-approve-sm:hover {
        background: #a7f3d0;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-reject-sm {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-reject-sm:hover {
        background: #fecaca;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-po-sm {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-po-sm:hover {
        background: #bfdbfe;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-attachment-sm {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn-attachment-sm:hover {
        background: #fde68a;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-title {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.85rem;
        min-width: 150px;
        flex: 1;
    }

    body[data-page="procurement-head-demands-index"] .quotation-item .q-title small {
        display: block;
        font-weight: 400;
        color: #6b7280;
        font-size: 0.7rem;
    }

    body[data-page="procurement-head-demands-index"] .no-data {
        text-align: center;
        padding: 40px 20px;
    }

    body[data-page="procurement-head-demands-index"] .no-data i {
        font-size: 3rem;
        color: #d1d5db;
        margin-bottom: 16px;
    }

    body[data-page="procurement-head-demands-index"] .no-data h5 {
        color: #6b7280;
        font-weight: 600;
        font-size: 1.1rem;
    }

    body[data-page="procurement-head-demands-index"] .no-data p {
        color: #9ca3af;
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-demands-index"] /* Modal */
    .modal-content-custom {
        border: none;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }

    body[data-page="procurement-head-demands-index"] .modal-header-custom {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border-radius: 16px 16px 0 0;
        padding: 16px 20px;
        border-bottom: none;
    }

    body[data-page="procurement-head-demands-index"] .modal-header-custom .modal-title {
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1.1rem;
    }

    body[data-page="procurement-head-demands-index"] .modal-header-custom .btn-close {
        filter: brightness(0) invert(1);
    }

    body[data-page="procurement-head-demands-index"] .modal-body-custom {
        padding: 20px;
    }

    body[data-page="procurement-head-demands-index"] .modal-body-custom .detail-section {
        margin-bottom: 16px;
    }

    body[data-page="procurement-head-demands-index"] .modal-body-custom .detail-section:last-child {
        margin-bottom: 0;
    }

    body[data-page="procurement-head-demands-index"] .modal-body-custom .detail-section .detail-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    body[data-page="procurement-head-demands-index"] .modal-body-custom .detail-section .detail-value {
        font-size: 0.9rem;
        color: #1a1a2e;
        line-height: 1.5;
    }

    body[data-page="procurement-head-demands-index"] .quotations-list {
        max-height: 400px;
        overflow-y: auto;
    }

    body[data-page="procurement-head-demands-index"] .quotations-list::-webkit-scrollbar {
        width: 6px;
    }

    body[data-page="procurement-head-demands-index"] .quotations-list::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }

    body[data-page="procurement-head-demands-index"] .quotations-list::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

    body[data-page="procurement-head-demands-index"] .quotations-list::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    body[data-page="procurement-head-demands-index"] /* DataTables Overrides */
    .dataTables_wrapper .dataTables_filter input {
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        padding: 5px 12px;
        font-size: 0.8rem;
        transition: all 0.3s ease;
        background: #fafafa;
        margin-left: 5px;
    }

    body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dataTables_filter input:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 3px rgba(33, 146, 191, 0.08);
        background: white;
        outline: none;
    }

    body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dataTables_length select {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dataTables_info {
        font-size: 0.8rem;
        padding-top: 10px;
    }

    body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 10px !important;
        font-size: 0.8rem !important;
    }

    body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dt-buttons .btn {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    body[data-page="procurement-head-demands-index"] /* Fix for sidebar collapse - ensure container takes full width */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-page="procurement-head-demands-index"] .demands-container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body[data-page="procurement-head-demands-index"] /* DataTable wrapper should use full width */
    .dataTables_wrapper {
        width: 100% !important;
        overflow-x: auto;
    }

    body[data-page="procurement-head-demands-index"] .table-responsive {
        width: 100% !important;
        overflow-x: auto;
    }

    body[data-page="procurement-head-demands-index"] /* Ensure the table container doesn't have any width restrictions */
    .main-card .card-body-custom {
        padding: 0;
        width: 100%;
        overflow: hidden;
    }

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

    /* Small devices (phones, 576px and below) */
    @media (max-width: 576px) {
        body[data-page="procurement-head-demands-index"] .page-header h4 {
            font-size: 1.1rem;
        }

        body[data-page="procurement-head-demands-index"] .page-header p {
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-demands-index"] .stat-box {
            padding: 12px 10px;
        }

        body[data-page="procurement-head-demands-index"] .stat-box .stat-number {
            font-size: 1.3rem;
        }

        body[data-page="procurement-head-demands-index"] .stat-box .stat-label {
            font-size: 0.65rem;
        }

        body[data-page="procurement-head-demands-index"] .stat-box .stat-icon {
            font-size: 1rem;
        }

        body[data-page="procurement-head-demands-index"] .filter-section {
            padding: 12px;
        }

        body[data-page="procurement-head-demands-index"] .filter-section .form-label {
            font-size: 0.75rem;
        }

        body[data-page="procurement-head-demands-index"] .filter-section .form-control,
        body[data-page="procurement-head-demands-index"] .filter-section .form-select {
            font-size: 0.8rem;
            padding: 6px 10px;
            height: 34px;
        }

        body[data-page="procurement-head-demands-index"] .filter-section .btn-filter {
            margin-top: 16px;
            font-size: 0.8rem;
            padding: 6px 12px;
        }

        body[data-page="procurement-head-demands-index"] .main-card .card-header-custom {
            padding: 10px 12px;
        }

        body[data-page="procurement-head-demands-index"] .main-card .card-header-custom h5 {
            font-size: 0.85rem;
        }

        body[data-page="procurement-head-demands-index"] /* Table mobile view */
        .table-demands {
            font-size: 0.75rem;
        }

        body[data-page="procurement-head-demands-index"] .table-demands thead th {
            font-size: 0.6rem;
            padding: 6px 8px;
        }

        body[data-page="procurement-head-demands-index"] .table-demands tbody td {
            padding: 6px 8px;
            font-size: 0.75rem;
        }

        body[data-page="procurement-head-demands-index"] .demand-title {
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-demands-index"] .demand-description {
            font-size: 0.65rem;
            -webkit-line-clamp: 1;
        }

        body[data-page="procurement-head-demands-index"] .badge-status {
            font-size: 0.6rem;
            padding: 2px 8px;
        }

        body[data-page="procurement-head-demands-index"] .badge-count {
            font-size: 0.55rem;
            padding: 2px 6px;
            margin: 1px;
        }

        body[data-page="procurement-head-demands-index"] .btn-view-demand,
        body[data-page="procurement-head-demands-index"] .btn-edit-demand {
            font-size: 0.6rem;
            padding: 2px 6px;
        }

        body[data-page="procurement-head-demands-index"] .btn-view-demand i,
        body[data-page="procurement-head-demands-index"] .btn-edit-demand i {
            font-size: 0.6rem;
        }

        body[data-page="procurement-head-demands-index"] /* Mobile Quotation Items */
        .quotation-item {
            padding: 8px 10px;
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item .q-amount {
            min-width: auto;
            font-size: 0.85rem;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item .q-vendor {
            font-size: 0.8rem;
            min-width: auto;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item .q-vendor small {
            font-size: 0.65rem;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item .q-title {
            font-size: 0.8rem;
            min-width: auto;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item .q-title small {
            font-size: 0.6rem;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item .q-actions {
            width: 100%;
            justify-content: flex-start;
            gap: 4px;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item .q-actions .btn {
            font-size: 0.6rem;
            padding: 2px 6px;
        }

        body[data-page="procurement-head-demands-index"] /* Modal mobile */
        .modal-header-custom {
            padding: 12px 16px;
        }

        body[data-page="procurement-head-demands-index"] .modal-header-custom .modal-title {
            font-size: 0.95rem;
        }

        body[data-page="procurement-head-demands-index"] .modal-body-custom {
            padding: 14px;
        }

        body[data-page="procurement-head-demands-index"] .modal-body-custom .detail-section .detail-label {
            font-size: 0.65rem;
        }

        body[data-page="procurement-head-demands-index"] .modal-body-custom .detail-section .detail-value {
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-demands-index"] .modal-footer {
            padding: 12px 16px;
            flex-wrap: wrap;
            gap: 6px;
        }

        body[data-page="procurement-head-demands-index"] .modal-footer .btn {
            font-size: 0.8rem;
            padding: 6px 14px;
            flex: 1;
            min-width: 80px;
        }

        body[data-page="procurement-head-demands-index"] /* DataTables mobile */
        .dataTables_wrapper .dataTables_filter input {
            font-size: 0.75rem;
            padding: 4px 8px;
            width: 120px;
        }

        body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dataTables_length select {
            font-size: 0.75rem;
        }

        body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dataTables_info {
            font-size: 0.7rem;
        }

        body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 2px 6px !important;
            font-size: 0.7rem !important;
        }

        body[data-page="procurement-head-demands-index"] .dataTables_wrapper .dt-buttons .btn {
            font-size: 0.6rem;
            padding: 2px 6px;
        }
    }

    /* Medium devices (tablets, 768px and below) */
    @media (max-width: 768px) {
        body[data-page="procurement-head-demands-index"] .stat-box {
            padding: 14px 12px;
        }

        body[data-page="procurement-head-demands-index"] .stat-box .stat-number {
            font-size: 1.4rem;
        }

        body[data-page="procurement-head-demands-index"] .filter-section .btn-filter {
            margin-top: 10px;
            width: 100%;
        }

        body[data-page="procurement-head-demands-index"] .table-demands thead th,
        body[data-page="procurement-head-demands-index"] .table-demands tbody td {
            padding: 8px 10px;
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item {
            flex-wrap: wrap;
            gap: 6px;
        }

        body[data-page="procurement-head-demands-index"] .quotation-item .q-actions {
            width: 100%;
            justify-content: flex-start;
        }
    }

    /* Landscape phones */
    @media (max-height: 600px) and (orientation: landscape) {
        body[data-page="procurement-head-demands-index"] .quotations-list {
            max-height: 250px;
        }

        body[data-page="procurement-head-demands-index"] .modal-body-custom {
            padding: 12px;
        }

        body[data-page="procurement-head-demands-index"] .modal-header-custom {
            padding: 10px 16px;
        }
    }

/* ==================== PAGE: procurement_head/purchase_orders/create_purchase_order.php ==================== */
body[data-page="procurement-head-purchase-orders-create-purchase-order"] {
        --primary-blue: #1a237e;
        --primary-light-blue: #283593;
        --primary-green: #2e7d32;
        --primary-red: #c62828;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 16px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        padding: 32px 40px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        position: relative;
        overflow: hidden;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header h4 {
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 1.5rem;
        position: relative;
        z-index: 1;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header h4 i { font-size: 1.8rem; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header p {
        margin: 8px 0 0;
        opacity: 0.9;
        font-size: 0.95rem;
        position: relative;
        z-index: 1;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header .badge-status {
        background: rgba(255, 255, 255, 0.2);
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-block;
        margin-top: 10px;
        backdrop-filter: blur(4px);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-body {
        background: white;
        padding: 40px;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-md);
        overflow: visible;
        position: relative;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .alert-custom {
        border-radius: var(--radius-md);
        padding: 16px 24px;
        font-weight: 500;
        margin-bottom: 24px;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        border: none;
        animation: slideInDown 0.5s ease;
    }

    @keyframes slideInDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .alert-custom.alert-success {
        background: #f0fdf4;
        color: #166534;
        border-left: 5px solid #22c55e;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .alert-custom.alert-danger {
        background: #fef2f2;
        color: #991b1b;
        border-left: 5px solid #ef4444;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .alert-custom i {
        font-size: 1.4rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .alert-custom .alert-content { flex: 1; }
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .alert-custom .alert-content strong { display: block; margin-bottom: 4px; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card {
        background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
        border-radius: var(--radius-md);
        padding: 24px 28px;
        margin-bottom: 28px;
        border: 2px solid #e8edf4;
        transition: var(--transition);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card:hover {
        border-color: #cbd5e1;
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card .card-title {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
        font-weight: 700;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px 32px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card .info-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card .info-item .label {
        color: #6b7280;
        font-size: 0.8rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card .info-item .value {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 1rem;
        word-break: break-word;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card .info-item .value.amount {
        color: var(--primary-green);
        font-size: 1.3rem;
        font-weight: 700;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card .info-item .value .currency-symbol {
        font-size: 0.9rem;
        opacity: 0.7;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-number-display {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        border: 2px solid #86efac;
        border-radius: var(--radius-md);
        padding: 18px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 28px;
        transition: var(--transition);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-number-display:hover {
        border-color: #4ade80;
        box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.1);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-number-display .label {
        font-weight: 600;
        color: #374151;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.95rem;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-number-display .label i { color: var(--primary-green); }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-number-display .value {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary-green);
        font-family: 'Courier New', monospace;
        letter-spacing: 1px;
        background: rgba(255, 255, 255, 0.7);
        padding: 4px 16px;
        border-radius: var(--radius-sm);
        border: 1px solid #86efac;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-section {
        margin-bottom: 28px;
        overflow: visible;
        position: relative;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-section-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: #374151;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #e5e7eb;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-section-title i {
        color: var(--primary-blue);
        font-size: 1.1rem;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group { margin-bottom: 20px; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 6px;
        display: block;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group label .required {
        color: var(--primary-red);
        margin-left: 4px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-control,
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-select {
        border: 2px solid #e5e7eb;
        border-radius: var(--radius-sm);
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: var(--transition);
        background: #fafafa;
        width: 100%;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-control:hover,
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-select:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-control:focus,
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-select:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(40, 53, 147, 0.1);
        background: white;
        outline: none;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-control[readonly] {
        background: #f1f5f9;
        cursor: not-allowed;
        opacity: 0.8;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group textarea.form-control {
        resize: vertical;
        min-height: 80px;
        font-family: inherit;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-hint {
        font-size: 0.8rem;
        color: #6b7280;
        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-group .form-hint i { color: #9ca3af; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .hidden-field { display: none !important; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-items-card {
        background: #f8fafc;
        border: 2px solid #e5e7eb;
        border-radius: var(--radius-md);
        padding: 20px 24px;
        margin-top: 16px;
        display: none;
        transition: var(--transition);
        overflow: visible;
        position: relative;
        z-index: 10;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-items-card.visible {
        display: block;
        animation: slideInDown 0.5s ease;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-items-card .details-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #374151;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-items-card .details-title i { color: var(--primary-blue); }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table-scroll {
        overflow: visible;
        position: relative;
        z-index: 11;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: white;
        border-radius: var(--radius-sm);
        margin-bottom: 12px;
        overflow: visible;
        position: relative;
        z-index: 12;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table th,
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table td {
        border: 1px solid #e5e7eb;
        padding: 8px 10px;
        font-size: 0.85rem;
        text-align: left;
        vertical-align: middle;
        overflow: visible;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table th {
        background: #eef2ff;
        color: #374151;
        font-weight: 700;
        white-space: nowrap;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table td input {
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 6px 8px;
        font-size: 0.85rem;
        background: #fafafa;
        color: #1a1a2e;
        transition: var(--transition);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table td input:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 3px rgba(40, 53, 147, 0.1);
        background: white;
        outline: none;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table td input[readonly] {
        background: #f1f5f9;
        cursor: not-allowed;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table .col-sr { width: 50px; text-align: center; }
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table .col-qty { width: 110px; }
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table .col-rate { width: 130px; }
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table .col-amt { width: 140px; }
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table .col-action { width: 60px; text-align: center; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-table .sr-cell {
        text-align: center;
        font-weight: 600;
        color: #374151;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-wrapper {
        position: relative;
        width: 100%;
        z-index: 100;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-wrapper.open {
        z-index: 100000;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-input {
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 6px 28px 6px 8px;
        font-size: 0.85rem;
        background: #fafafa;
        color: #1a1a2e;
        transition: var(--transition);
        cursor: pointer;
        font-family: inherit;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-input:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 3px rgba(40, 53, 147, 0.1);
        background: white;
        outline: none;
        cursor: text;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-input::placeholder { color: #9ca3af; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-arrow {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #6b7280;
        font-size: 0.7rem;
        transition: transform 0.2s ease;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-wrapper.open .searchable-select-arrow {
        transform: translateY(-50%) rotate(180deg);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-dropdown {
        position: absolute;
        top: calc(100% + 2px);
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        max-height: 220px;
        overflow-y: auto;
        z-index: 100000;
        display: none;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-dropdown.drop-up {
        top: auto;
        bottom: calc(100% + 2px);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-wrapper.open .searchable-select-dropdown {
        display: block;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-option {
        padding: 8px 12px;
        font-size: 0.85rem;
        color: #1a1a2e;
        cursor: pointer;
        transition: background 0.15s ease;
        border-bottom: 1px solid #f3f4f6;
        line-height: 1.4;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-option:last-child { border-bottom: none; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-option:hover,
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-option.highlighted {
        background: #eef2ff;
        color: var(--primary-blue);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-option.selected {
        background: #e0e7ff;
        font-weight: 600;
        color: var(--primary-blue);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-option .option-code {
        display: inline-block;
        background: #e0e7ff;
        color: var(--primary-blue);
        padding: 1px 6px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 700;
        margin-right: 6px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-no-results {
        padding: 12px;
        text-align: center;
        color: #9ca3af;
        font-size: 0.85rem;
        font-style: italic;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-loading {
        padding: 12px;
        text-align: center;
        color: #6b7280;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .searchable-select-loading .mini-spinner {
        width: 14px;
        height: 14px;
        border: 2px solid #e5e7eb;
        border-top: 2px solid var(--primary-blue);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-remove-btn {
        background: #fee2e2;
        color: #b91c1c;
        border: none;
        border-radius: 6px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        font-size: 0.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-remove-btn:hover { background: #fecaca; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-add-row-btn {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        padding: 10px 20px;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: var(--transition);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-add-row-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-total-row {
        display: flex;
        justify-content: flex-end;
        gap: 16px;
        padding: 8px 4px 0;
        font-weight: 700;
        color: #1a1a2e;
        font-size: 0.95rem;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-total-row .total-label { color: #6b7280; font-weight: 600; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .mt-total-row .total-value {
        color: var(--primary-green);
        min-width: 120px;
        text-align: right;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card {
        background: #f8fafc;
        border: 2px solid #e5e7eb;
        border-radius: var(--radius-md);
        padding: 20px 24px;
        margin-top: 16px;
        display: none;
        transition: var(--transition);
        position: relative;
        z-index: 1;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card.visible {
        display: block;
        animation: slideInDown 0.5s ease;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .details-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #374151;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .details-title i { color: var(--primary-blue); }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .detail-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .detail-item .label {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .detail-item .value {
        font-weight: 500;
        color: #1a1a2e;
        font-size: 0.95rem;
        padding: 4px 0;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .detail-item .value.status-badge {
        display: inline-block;
        padding: 2px 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .detail-item .value.status-badge.active {
        background: #dcfce7;
        color: #166534;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .detail-item .value.status-badge.inactive {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .detail-item .value.status-badge.pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .no-data {
        color: #6b7280;
        font-style: italic;
        padding: 8px 0;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-detail-items {
        margin-top: 18px;
        overflow-x: auto;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-detail-items table {
        width: 100%;
        min-width: 920px;
        border-collapse: collapse;
        background: white;
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-detail-items th,
    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-detail-items td {
        border: 1px solid #e5e7eb;
        padding: 9px 10px;
        font-size: 0.82rem;
        text-align: left;
        vertical-align: top;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-detail-items th {
        background: #eef2ff;
        color: #374151;
        font-weight: 700;
        white-space: nowrap;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-detail-items .muted { color: #6b7280; }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .loading-spinner {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #6b7280;
        padding: 8px 0;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .loading-spinner .spinner {
        width: 20px;
        height: 20px;
        border: 2px solid #e5e7eb;
        border-top: 2px solid var(--primary-blue);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .gbms-details-card .details-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-row {
            grid-template-columns: 1fr;
            gap: 0;
        }
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions {
        display: flex;
        gap: 14px;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 2px solid #f1f5f9;
        flex-wrap: wrap;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions .btn {
        padding: 12px 32px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 0.95rem;
        border: none;
        cursor: pointer;
        min-width: 160px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions .btn-primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        flex: 1;
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions .btn-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        background: linear-gradient(135deg, #1a237e, #1a237e);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions .btn-primary:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions .btn-secondary {
        background: #f1f5f9;
        color: #475569;
        border: 2px solid #e2e8f0;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions .btn-secondary:hover {
        background: #e2e8f0;
        border-color: #cbd5e1;
        transform: translateY(-2px);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions .btn {
        padding: 12px 28px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        border: none;
        cursor: pointer;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions .btn-primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions .btn-secondary {
        background: #f1f5f9;
        color: #475569;
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions .btn-secondary:hover {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header { padding: 24px 20px; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header h4 { font-size: 1.2rem; flex-wrap: wrap; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-body { padding: 20px; border-radius: 0 0 var(--radius-md) var(--radius-md); }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card { padding: 16px 18px; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .quotation-info-card .info-grid { grid-template-columns: 1fr; gap: 12px; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-number-display { flex-direction: column; text-align: center; gap: 12px; padding: 16px 20px; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-number-display .value { font-size: 1.1rem; padding: 4px 12px; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions { flex-direction: column; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions .btn { width: 100%; min-width: unset; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions { flex-direction: column; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions .btn { width: 100%; justify-content: center; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-row { grid-template-columns: 1fr; }
    }

    @media print {
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .form-actions, body[data-page="procurement-head-purchase-orders-create-purchase-order"] .success-actions { display: none !important; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-body { box-shadow: none !important; border: 1px solid #e5e7eb; }
        body[data-page="procurement-head-purchase-orders-create-purchase-order"] .po-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }

    body[data-page="procurement-head-purchase-orders-create-purchase-order"] .spinner-border {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        vertical-align: text-bottom;
        border: 0.2em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border .75s linear infinite;
    }

    @keyframes spinner-border {
        to { transform: rotate(360deg); }
    }

/* ==================== PAGE: procurement_head/purchase_orders/generate_srn.php ==================== */
body[data-page="procurement-head-purchase-orders-generate-srn"] {
        --primary-blue: #1a237e;
        --primary-light-blue: #283593;
        --primary-green: #2e7d32;
        --primary-red: #c62828;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        padding: 32px 40px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        position: relative;
        overflow: hidden;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-header h4 {
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 1.5rem;
        position: relative;
        z-index: 1;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-header h4 i {
        font-size: 1.8rem;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-header p {
        margin: 8px 0 0;
        opacity: 0.9;
        font-size: 0.95rem;
        position: relative;
        z-index: 1;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-header .badge-status {
        background: rgba(255, 255, 255, 0.2);
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-block;
        margin-top: 10px;
        backdrop-filter: blur(4px);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-body {
        background: white;
        padding: 40px;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-md);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .alert-custom {
        border-radius: var(--radius-md);
        padding: 16px 24px;
        font-weight: 500;
        margin-bottom: 24px;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        border: none;
        animation: slideInDown 0.5s ease;
    }

    @keyframes slideInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .alert-custom.alert-success {
        background: #f0fdf4;
        color: #166534;
        border-left: 5px solid #22c55e;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .alert-custom.alert-danger {
        background: #fef2f2;
        color: #991b1b;
        border-left: 5px solid #ef4444;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .alert-custom.alert-warning {
        background: #fffbeb;
        color: #92400e;
        border-left: 5px solid #f59e0b;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .alert-custom i {
        font-size: 1.4rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .alert-custom .alert-content {
        flex: 1;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .alert-custom .alert-content strong {
        display: block;
        margin-bottom: 4px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card {
        background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
        border-radius: var(--radius-md);
        padding: 24px 28px;
        margin-bottom: 28px;
        border: 2px solid #e8edf4;
        transition: var(--transition);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card:hover {
        border-color: #cbd5e1;
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card .card-title {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
        font-weight: 700;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px 32px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card .info-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card .info-item .label {
        color: #6b7280;
        font-size: 0.8rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card .info-item .value {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 1rem;
        word-break: break-word;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-fetch-section {
        background: #f8fafc;
        border: 2px solid #e5e7eb;
        border-radius: var(--radius-md);
        padding: 24px;
        margin-bottom: 24px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-fetch-section .fetch-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        align-items: end;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-fetch-section .fetch-grid .form-group {
        margin-bottom: 0;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-fetch-section .btn-fetch {
        padding: 12px 32px;
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        cursor: pointer;
        white-space: nowrap;
        height: 48px;
        min-width: 140px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-fetch-section .btn-fetch:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-fetch-section .btn-fetch:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-section {
        margin-bottom: 28px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-section-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: #374151;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #e5e7eb;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-section-title i {
        color: var(--primary-blue);
        font-size: 1.1rem;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group {
        margin-bottom: 20px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 6px;
        display: block;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group label .required {
        color: var(--primary-red);
        margin-left: 4px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group .form-control,
    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group .form-select {
        border: 2px solid #e5e7eb;
        border-radius: var(--radius-sm);
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: var(--transition);
        background: #fafafa;
        width: 100%;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group .form-control:hover:not(:read-only) {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group .form-control:focus:not(:read-only) {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(40, 53, 147, 0.1);
        background: white;
        outline: none;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group .form-control:read-only {
        background: #f1f5f9;
        cursor: default;
        opacity: 0.8;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-group textarea.form-control {
        resize: vertical;
        min-height: 80px;
        font-family: inherit;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-row-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .table-responsive {
        overflow-x: auto;
        margin-top: 16px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .table-responsive table {
        width: 100%;
        min-width: 600px;
        border-collapse: collapse;
        background: white;
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .table-responsive th,
    body[data-page="procurement-head-purchase-orders-generate-srn"] .table-responsive td {
        border: 1px solid #e5e7eb;
        padding: 10px 12px;
        font-size: 0.85rem;
        text-align: left;
        vertical-align: middle;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .table-responsive th {
        background: #eef2ff;
        color: #374151;
        font-weight: 700;
        white-space: nowrap;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .table-responsive td .qty-display {
        font-weight: 600;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card {
        background: white;
        border: 2px solid #86efac;
        border-radius: var(--radius-md);
        padding: 20px 24px;
        margin-top: 16px;
        display: none;
        transition: var(--transition);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card.visible {
        display: block;
        animation: slideInDown 0.5s ease;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .details-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #374151;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .details-title i {
        color: var(--primary-green);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .detail-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .detail-item .label {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .detail-item .value {
        font-weight: 500;
        color: #1a1a2e;
        font-size: 0.95rem;
        padding: 4px 0;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .no-data {
        color: #6b7280;
        font-style: italic;
        padding: 8px 0;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .loading-spinner {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #6b7280;
        padding: 8px 0;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .loading-spinner .spinner {
        width: 20px;
        height: 20px;
        border: 2px solid #e5e7eb;
        border-top: 2px solid var(--primary-blue);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions {
        display: flex;
        gap: 14px;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 2px solid #f1f5f9;
        flex-wrap: wrap;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions .btn {
        padding: 12px 32px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 0.95rem;
        border: none;
        cursor: pointer;
        min-width: 160px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions .btn-primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        flex: 1;
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions .btn-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        background: linear-gradient(135deg, #1a237e, #1a237e);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions .btn-primary:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions .btn-secondary {
        background: #f1f5f9;
        color: #475569;
        border: 2px solid #e2e8f0;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions .btn-secondary:hover {
        background: #e2e8f0;
        border-color: #cbd5e1;
        transform: translateY(-2px);
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .status-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .status-badge.success {
        background: #dcfce7;
        color: #166534;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .status-badge.warning {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .status-badge.danger {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .status-badge.secondary {
        background: #e5e7eb;
        color: #374151;
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-header {
            padding: 24px 20px;
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-header h4 {
            font-size: 1.2rem;
            flex-wrap: wrap;
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .srn-body {
            padding: 20px;
            border-radius: 0 0 var(--radius-md) var(--radius-md);
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card {
            padding: 16px 18px;
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .po-info-card .info-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .form-row,
        body[data-page="procurement-head-purchase-orders-generate-srn"] .form-row-3 {
            grid-template-columns: 1fr;
            gap: 0;
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-fetch-section .fetch-grid {
            grid-template-columns: 1fr;
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .gbms-details-card .details-grid {
            grid-template-columns: 1fr;
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions {
            flex-direction: column;
        }

        body[data-page="procurement-head-purchase-orders-generate-srn"] .form-actions .btn {
            width: 100%;
            min-width: unset;
        }
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .spinner-border {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        vertical-align: text-bottom;
        border: 0.2em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border .75s linear infinite;
    }

    @keyframes spinner-border {
        to {
            transform: rotate(360deg);
        }
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .text-center {
        text-align: center;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .mt-3 {
        margin-top: 16px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .mb-3 {
        margin-bottom: 16px;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .fw-bold {
        font-weight: 700;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .text-muted {
        color: #6b7280;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .text-success {
        color: #16a34a;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .text-danger {
        color: #dc2626;
    }

    body[data-page="procurement-head-purchase-orders-generate-srn"] .readonly-indicator {
        font-size: 0.75rem;
        color: #6b7280;
        background: #f1f5f9;
        padding: 2px 10px;
        border-radius: 10px;
        display: inline-block;
        margin-left: 8px;
    }

/* ==================== PAGE: procurement_head/purchase_orders/view_purchase_orders.php ==================== */
body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .po-management-container {
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stats-row {
        margin-bottom: 25px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box {
        background: white;
        border-radius: 12px;
        padding: 18px 20px;
        text-align: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        height: 100%;
        border-bottom: 3px solid transparent;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-label {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 500;
        margin-top: 2px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-icon {
        font-size: 1.4rem;
        margin-bottom: 4px;
        opacity: 0.7;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box.total {
        border-bottom-color: var(--primary-blue);
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box.total .stat-number {
        color: var(--primary-blue);
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box.draft {
        border-bottom-color: #9ca3af;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box.draft .stat-number {
        color: #6b7280;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box.sent {
        border-bottom-color: #f59e0b;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box.sent .stat-number {
        color: #d97706;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box.completed {
        border-bottom-color: var(--primary-green);
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box.completed .stat-number {
        color: var(--primary-green);
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .main-card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        width: 100%;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .main-card .card-header-custom {
        background: white;
        padding: 18px 24px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .main-card .card-header-custom h5 {
        margin: 0;
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .main-card .card-header-custom h5 i {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .table-po {
        margin: 0;
        width: 100% !important;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .table-po thead th {
        background: #f8fafc;
        color: #374151;
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: 2px solid #e5e7eb;
        padding: 14px 16px;
        white-space: nowrap;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .table-po tbody td {
        padding: 12px 16px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status {
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status.draft {
        background: #f3f4f6;
        color: #6b7280;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status.draft .dot {
        background: #9ca3af;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status.sent {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status.sent .dot {
        background: #f59e0b;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status.completed {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status.completed .dot {
        background: #3b82f6;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status.cancelled {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status.cancelled .dot {
        background: #ef4444;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .po-number {
        font-weight: 700;
        color: var(--primary-blue);
        font-family: monospace;
        letter-spacing: 0.5px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .no-data {
        text-align: center;
        padding: 50px 20px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .no-data i {
        font-size: 3rem;
        color: #d1d5db;
        margin-bottom: 12px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .no-data h6 {
        color: #6b7280;
        font-weight: 600;
        margin: 0;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .no-data p {
        color: #9ca3af;
        font-size: 0.85rem;
        margin: 4px 0 0;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] /* Challan View Buttons - Read Only */
    .challan-view-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view {
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.7rem;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: none;
        cursor: pointer;
        background: #f3f4f6;
        color: #6b7280;
        width: 100%;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view.btn-invoice {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view.btn-invoice:hover {
        background: #bfdbfe;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view.btn-delivery {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view.btn-delivery:hover {
        background: #fde68a;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view.btn-missing {
        background: #f3f4f6;
        color: #9ca3af;
        cursor: not-allowed;
        opacity: 0.7;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view.btn-missing:hover {
        transform: none;
        box-shadow: none;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] /* SRN Button Styles */
    .btn-srn-generated {
        background: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-srn-generated:hover {
        background: #a7f3d0;
        color: #064e3b;
        border-color: #6ee7b7;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-srn-generated i {
        margin-right: 3px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-srn-create {
        background: #e5e7eb;
        color: #374151;
        border: 1px solid #d1d5db;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-srn-create:hover {
        background: #d1d5db;
        color: #1f2937;
        border-color: #9ca3af;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] /* DataTables Responsive Fixes */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .card-body-custom {
        padding: 0;
        overflow-x: auto;
        width: 100%;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] /* DataTable wrapper fixes */
    #poTable_wrapper {
        overflow-x: hidden;
        max-width: 100%;
        padding: 10px 15px;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] /* Make DataTable buttons wrap properly */
    #poTable_wrapper .dt-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-bottom: 10px !important;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dt-buttons .btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] /* Fix filter and length controls */
    #poTable_wrapper .dataTables_filter {
        margin-bottom: 10px !important;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dataTables_filter input {
        margin-left: 5px !important;
    }

    body[data-page="procurement-head-purchase-orders-view-purchase-orders"] /* Ensure the table doesn't force overflow */
    #poTable {
        width: 100% !important;
        min-width: 600px;
    }

    /* Responsive Design */
    @media (max-width: 1200px) {

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .table-po thead th,
        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .table-po tbody td {
            padding: 10px 12px;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 992px) {
        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-number {
            font-size: 1.5rem;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box {
            padding: 15px 12px;
        }
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .po-management-container {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box {
            padding: 14px 10px;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-number {
            font-size: 1.4rem;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .table-po thead th,
        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .table-po tbody td {
            padding: 8px 10px;
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .main-card .card-header-custom {
            padding: 12px 15px;
            flex-direction: column;
            align-items: flex-start;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stats-row .col-6 {
            padding-left: 5px;
            padding-right: 5px;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box {
            padding: 12px 8px;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-number {
            font-size: 1.2rem;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dt-buttons .btn {
            padding: 3px 6px !important;
            font-size: 0.65rem !important;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dt-buttons .btn span {
            display: none;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dt-buttons .btn i {
            margin: 0 !important;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper {
            padding: 5px 8px;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dataTables_filter input {
            width: 150px !important;
        }
    }

    @media (max-width: 576px) {
        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .po-management-container {
            padding-left: 5px !important;
            padding-right: 5px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dataTables_filter {
            width: 100% !important;
            margin-top: 8px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dataTables_filter input {
            width: 100% !important;
            max-width: 100% !important;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dataTables_length {
            width: 100% !important;
            margin-bottom: 8px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] #poTable_wrapper .dataTables_length select {
            width: auto !important;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box {
            padding: 10px 6px;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-number {
            font-size: 1rem;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-label {
            font-size: 0.7rem;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .stat-box .stat-icon {
            font-size: 1rem;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-challan-view {
            font-size: 0.6rem;
            padding: 3px 6px;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .btn-group .btn {
            padding: 0.25rem 0.4rem;
            font-size: 0.7rem;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .badge-po-status {
            font-size: 0.6rem;
            padding: 3px 10px;
        }

        body[data-page="procurement-head-purchase-orders-view-purchase-orders"] .po-number {
            font-size: 0.8rem;
        }
    }

/* ==================== PAGE: procurement_head/purchase_orders/view_quotations.php ==================== */
body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-header {
        margin-bottom: 30px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-header h4 {
        font-weight: 700;
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-header h4 i {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .stat-badges {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .stat-badges .stat-item {
        background: white;
        padding: 8px 20px;
        border-radius: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        font-weight: 500;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .stat-badges .stat-item .count {
        font-weight: 700;
        font-size: 1.1rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .stat-badges .stat-item.total {
        color: var(--primary-blue);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .stat-badges .stat-item.pending {
        color: var(--primary-orange);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .stat-badges .stat-item.approved {
        color: var(--primary-green);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .stat-badges .stat-item.rejected {
        color: var(--primary-red);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .alert-custom {
        border-radius: 12px;
        padding: 14px 20px;
        font-weight: 500;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: none;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .alert-custom.alert-success {
        background: #f0fdf4;
        color: #166534;
        border-left: 4px solid #22c55e;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .alert-custom.alert-danger {
        background: #fef2f2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .alert-custom i {
        font-size: 1.2rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table-wrapper {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table-wrapper .table-header {
        padding: 20px 24px;
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table-wrapper .table-header h5 {
        color: white;
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table-wrapper .table-header .badge-total {
        background: rgba(255,255,255,0.2);
        padding: 4px 16px;
        border-radius: 20px;
        color: white;
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table {
        margin: 0;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table thead th {
        background: #f8fafc;
        color: #374151;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e5e7eb;
        padding: 14px 20px;
        white-space: nowrap;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table tbody td {
        padding: 16px 20px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table tbody tr {
        transition: all 0.2s ease;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table tbody tr:hover {
        background-color: rgba(33, 146, 191, 0.04);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table tbody tr:last-child td {
        border-bottom: none;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .vendor-cell {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .vendor-avatar-sm {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .vendor-name {
        font-weight: 600;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .demand-title {
        font-weight: 500;
        color: #1a1a2e;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .demand-title small {
        display: block;
        font-weight: 400;
        color: #6b7280;
        font-size: 0.8rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .amount-display {
        font-weight: 700;
        font-size: 1.05rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .amount-display.approved {
        color: var(--primary-green);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .amount-display.pending {
        color: var(--primary-orange);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .amount-display.rejected {
        color: var(--primary-red);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .badge-status {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .badge-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .badge-status.badge-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .badge-status.badge-approved::before {
        background: #10b981;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .badge-status.badge-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .badge-status.badge-pending::before {
        background: #f59e0b;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .badge-status.badge-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .badge-status.badge-rejected::before {
        background: #ef4444;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn {
        padding: 6px 14px;
        font-size: 0.8rem;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-view {
        background: #eff6ff;
        color: #1e40af;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-view:hover {
        background: #dbeafe;
        transform: translateY(-1px);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-approve {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-approve:hover {
        background: #a7f3d0;
        transform: translateY(-1px);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-reject {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-reject:hover {
        background: #fecaca;
        transform: translateY(-1px);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-processed {
        background: #f3f4f6;
        color: #6b7280;
        cursor: default;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-processed:hover {
        background: #f3f4f6;
        transform: none;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-create-po {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn-create-po:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(57, 66, 115, 0.3);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] /* Attachment Badge */
    .attachment-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        background: #dbeafe;
        color: #1e40af;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .attachment-badge:hover {
        background: #bfdbfe;
        text-decoration: none;
        color: #1e40af;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .attachment-badge i {
        font-size: 0.8rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-content-custom {
        border: none;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-header-custom {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border-radius: 16px 16px 0 0;
        padding: 20px 24px;
        border-bottom: none;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-header-custom .modal-title {
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-header-custom .btn-close {
        filter: brightness(0) invert(1);
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-body-custom {
        padding: 24px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-body-custom .detail-section {
        margin-bottom: 20px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-body-custom .detail-section:last-child {
        margin-bottom: 0;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-body-custom .detail-section .detail-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .modal-body-custom .detail-section .detail-value {
        font-size: 0.95rem;
        color: #1a1a2e;
        line-height: 1.6;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .no-data {
        text-align: center;
        padding: 60px 20px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .no-data i {
        font-size: 4rem;
        color: #d1d5db;
        margin-bottom: 20px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .no-data h5 {
        color: #6b7280;
        font-weight: 600;
    }

    body[data-page="procurement-head-purchase-orders-view-quotations"] .no-data p {
        color: #9ca3af;
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table-wrapper .table-header {
            padding: 16px 20px;
        }

        body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table thead th,
        body[data-page="procurement-head-purchase-orders-view-quotations"] .quotations-table tbody td {
            padding: 12px 16px;
        }

        body[data-page="procurement-head-purchase-orders-view-quotations"] .stat-badges .stat-item {
            padding: 6px 14px;
            font-size: 0.8rem;
        }

        body[data-page="procurement-head-purchase-orders-view-quotations"] .vendor-cell {
            flex-direction: column;
            align-items: flex-start;
        }

        body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group {
            flex-direction: column;
            align-items: stretch;
        }

        body[data-page="procurement-head-purchase-orders-view-quotations"] .btn-action-group .btn {
            width: 100%;
            text-align: center;
        }
    }

/* ==================== PAGE: procurement_head/purchase_orders/view_quotation_details.php ==================== */
body[data-page="procurement-head-purchase-orders-view-quotation-details"] {
        --primary-blue: #1a237e;
        --primary-light-blue: #283593;
        --primary-green: #16a34a;
        --primary-red: #dc2626;
        --primary-orange: #f59e0b;
        --primary-purple: #7c3aed;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
        --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .quotation-detail-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 16px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Header */
    .detail-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        padding: 32px 40px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        position: relative;
        overflow: hidden;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: 10%;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 50%;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header .header-left {
        position: relative;
        z-index: 1;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header h4 {
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 1.5rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header h4 i {
        font-size: 1.8rem;
        opacity: 0.9;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header .header-meta {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 6px;
        flex-wrap: wrap;
        font-size: 0.9rem;
        opacity: 0.9;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header .header-meta span {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header .header-right {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 28px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        animation: pulse-dot 2s infinite;
    }

    @keyframes pulse-dot {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.6;
            transform: scale(1.2);
        }
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.pending {
        background: rgba(254, 243, 199, 0.95);
        color: #92400e;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.pending .dot {
        background: #f59e0b;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.approved {
        background: rgba(209, 250, 229, 0.95);
        color: #065f46;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.approved .dot {
        background: #10b981;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.rejected {
        background: rgba(254, 226, 226, 0.95);
        color: #991b1b;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.rejected .dot {
        background: #ef4444;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Body */
    .detail-body {
        background: white;
        padding: 40px;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-md);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Sections - Screen only */
    .screen-section {
        margin-bottom: 32px;
        animation: fadeInUp 0.6s ease forwards;
        opacity: 0;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .screen-section:nth-child(1) {
        animation-delay: 0.1s;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .screen-section:nth-child(2) {
        animation-delay: 0.2s;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .screen-section:nth-child(3) {
        animation-delay: 0.3s;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .screen-section:nth-child(4) {
        animation-delay: 0.4s;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .screen-section:last-child {
        margin-bottom: 0;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .section-title {
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 1rem;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e7eb;
        display: flex;
        align-items: center;
        gap: 10px;
        letter-spacing: 0.3px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .section-title i {
        color: var(--primary-light-blue);
        font-size: 1.1rem;
        width: 24px;
        text-align: center;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .section-title .section-badge {
        margin-left: auto;
        font-size: 0.7rem;
        padding: 4px 14px;
        border-radius: 50px;
        background: #e5e7eb;
        color: #6b7280;
        font-weight: 600;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Grid */
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item {
        background: #f8fafc;
        padding: 16px 20px;
        border-radius: var(--radius-sm);
        border-left: 4px solid var(--primary-light-blue);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, transparent 50%, rgba(40, 53, 147, 0.03));
        border-radius: 0 0 0 60px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
        background: #f1f5f9;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .label {
        font-size: 0.7rem;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .label i {
        font-size: 0.7rem;
        opacity: 0.6;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .value {
        font-size: 0.95rem;
        font-weight: 600;
        color: #1a1a2e;
        word-break: break-word;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .value .badge {
        font-size: 0.75rem;
        padding: 4px 14px;
        border-radius: 50px;
        font-weight: 600;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .value .amount-highlight {
        color: var(--primary-green);
        font-size: 1.3rem;
        font-weight: 700;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .value .amount-highlight .currency {
        font-size: 0.9rem;
        opacity: 0.7;
        font-weight: 600;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .value small {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 400;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .value .text-muted {
        color: #6b7280;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item.full-width {
        grid-column: 1 / -1;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Color variants */
    .detail-item.blue {
        border-left-color: #3b82f6;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item.green {
        border-left-color: var(--primary-green);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item.orange {
        border-left-color: var(--primary-orange);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item.purple {
        border-left-color: var(--primary-purple);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item.red {
        border-left-color: var(--primary-red);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item.teal {
        border-left-color: #14b8a6;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Description box - Screen only */
    .description-box {
        background: #f8fafc;
        padding: 20px 24px;
        border-radius: var(--radius-sm);
        border-left: 4px solid var(--primary-orange);
        line-height: 1.8;
        color: #1a1a2e;
        margin-top: 16px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .description-box .value {
        font-size: 0.95rem;
        font-weight: 400;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Status Badge in grid */
    .badge-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 16px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .badge-status.badge-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .badge-status.badge-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .badge-status.badge-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Attachment */
    .attachment-box {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        border: 2px dashed #86efac;
        border-radius: var(--radius-md);
        padding: 28px 24px;
        text-align: center;
        transition: var(--transition);
        position: relative;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box:hover {
        border-color: #4ade80;
        box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.1);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box .attachment-icon {
        font-size: 3.5rem;
        color: var(--primary-green);
        margin-bottom: 10px;
        display: block;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box .attachment-name {
        font-weight: 700;
        color: #1a1a2e;
        font-size: 1.05rem;
        margin-bottom: 4px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box .attachment-size {
        font-size: 0.85rem;
        color: #6b7280;
        margin-bottom: 14px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box .btn-download {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
        padding: 10px 28px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box .btn-download:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        color: white;
        background: linear-gradient(135deg, #1a237e, #1a237e);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 14px;
        margin-top: 32px;
        flex-wrap: wrap;
        padding-top: 28px;
        border-top: 2px solid #f1f5f9;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn {
        padding: 11px 32px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 0.9rem;
        border: none;
        cursor: pointer;
        text-decoration: none;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-back {
        background: #f1f5f9;
        color: #475569;
        border: 2px solid #e2e8f0;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-back:hover {
        background: #e2e8f0;
        border-color: #cbd5e1;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-approve {
        background: linear-gradient(135deg, #16a34a, #22c55e);
        color: white;
        box-shadow: var(--shadow-sm);
        border: 2px solid #16a34a;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-approve:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        background: linear-gradient(135deg, #15803d, #16a34a);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-reject {
        background: linear-gradient(135deg, #dc2626, #ef4444);
        color: white;
        box-shadow: var(--shadow-sm);
        border: 2px solid #dc2626;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-reject:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        background: linear-gradient(135deg, #b91c1c, #dc2626);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-create-po {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        box-shadow: var(--shadow-sm);
        border: 2px solid var(--primary-blue);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-create-po:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        background: linear-gradient(135deg, #1a237e, #1a237e);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-print {
        background: #475569;
        color: white;
        border: 2px solid #475569;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-print:hover {
        background: #334155;
        border-color: #334155;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-share {
        background: #7c3aed;
        color: white;
        border: 2px solid #7c3aed;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn-share:hover {
        background: #6d28d9;
        border-color: #6d28d9;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons .btn .spinner-border {
        width: 1rem;
        height: 1rem;
        border-width: 0.15em;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Confirmation Modal */
    .modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 1050;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-overlay.active {
        display: flex;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box {
        background: white;
        border-radius: var(--radius-lg);
        max-width: 480px;
        width: 90%;
        padding: 32px;
        box-shadow: var(--shadow-lg);
        animation: slideUp 0.3s ease;
    }

    @keyframes slideUp {
        from {
            transform: translateY(30px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-icon {
        font-size: 3rem;
        text-align: center;
        margin-bottom: 12px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-icon.warning {
        color: var(--primary-orange);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-icon.success {
        color: var(--primary-green);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-icon.danger {
        color: var(--primary-red);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box h5 {
        font-weight: 700;
        color: #1a1a2e;
        text-align: center;
        margin-bottom: 8px;
        font-size: 1.2rem;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box p {
        color: #6b7280;
        text-align: center;
        font-size: 0.95rem;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn {
        padding: 10px 28px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: var(--transition);
        min-width: 100px;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn-confirm {
        background: var(--primary-blue);
        color: white;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn-confirm:hover {
        background: #1a237e;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn-confirm.danger {
        background: var(--primary-red);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn-confirm.danger:hover {
        background: #b91c1c;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn-confirm.success {
        background: var(--primary-green);
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn-confirm.success:hover {
        background: #15803d;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn-cancel {
        background: #f1f5f9;
        color: #475569;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box .modal-actions .btn-cancel:hover {
        background: #e2e8f0;
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* ====== PRINT VIEW - Only tables visible ====== */
    .print-view {
        display: none;
    }

    @media print {
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Hide ALL screen elements */
        .screen-section,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-grid,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .description-box,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .action-buttons,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .btn,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .btn-back,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .btn-approve,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .btn-reject,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .btn-create-po,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .btn-print,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .btn-share,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .btn-download,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-overlay,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-box,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .modal-actions,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .section-badge,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box .btn-download,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item::before,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header::before,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header::after,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item:hover,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box:hover,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] nav.navbar,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] footer,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .header-actions,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .sidebar,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .main-sidebar,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] #sidebar,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .navbar,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .top-navbar,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .breadcrumb,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .page-header,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .attachment-box,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item .label i,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .section-title i,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .description-box .label i,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .description-box,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-grid,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-item,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .screen-section {
            display: none !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Show print view */
        .print-view {
            display: block !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Reset body for print */
        body {
            background: white !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 9px !important;
            line-height: 1.3 !important;
            color: #000 !important;
            font-family: Arial, Helvetica, sans-serif !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .quotation-detail-container {
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Header - Clean for print */
        .detail-header {
            background: #1a237e !important;
            color: white !important;
            padding: 10px 20px !important;
            border-radius: 0 !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            box-shadow: none !important;
            border-bottom: 2px solid #000 !important;
            display: flex !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header h4 {
            font-size: 14px !important;
            font-weight: 700 !important;
            gap: 5px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header h4 i {
            display: none !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header .header-meta {
            font-size: 8px !important;
            opacity: 0.9 !important;
            gap: 10px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header .header-meta span {
            display: inline-flex !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large {
            padding: 3px 12px !important;
            font-size: 8px !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            box-shadow: none !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            background: #10b981 !important;
            color: white !important;
            display: flex !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large .dot {
            display: none !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.approved {
            background: #10b981 !important;
            color: white !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.pending {
            background: #f59e0b !important;
            color: white !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large.rejected {
            background: #ef4444 !important;
            color: white !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-body {
            padding: 10px 20px !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            border: 1px solid #ddd !important;
            border-top: none !important;
            background: white !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Print sections */
        .print-section {
            margin-bottom: 8px !important;
            page-break-inside: avoid !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-section-title {
            font-size: 10px !important;
            color: #000 !important;
            border-bottom: 1.5px solid #000 !important;
            padding-bottom: 3px !important;
            margin-bottom: 6px !important;
            font-weight: 700 !important;
            letter-spacing: 0.5px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* TABLE STYLES */
        .print-table {
            width: 100% !important;
            border-collapse: collapse !important;
            margin-bottom: 6px !important;
            font-size: 9px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table td {
            padding: 4px 8px !important;
            border: 1px solid #ccc !important;
            vertical-align: top !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .label-cell {
            font-weight: 700 !important;
            background: #f5f5f5 !important;
            width: 15% !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            color: #000 !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .value-cell {
            background: white !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            color: #000 !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .amount {
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #000 !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .amount-label {
            font-weight: 700 !important;
            background: #f5f5f5 !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .status-badge-print {
            font-weight: 700 !important;
            padding: 2px 10px !important;
            display: inline-block !important;
            text-transform: uppercase !important;
            font-size: 8px !important;
            letter-spacing: 0.5px !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .status-badge-print.approved {
            color: #065f46 !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .status-badge-print.pending {
            color: #92400e !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .status-badge-print.rejected {
            color: #991b1b !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .description-cell {
            white-space: pre-line !important;
            line-height: 1.5 !important;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Print Header */
        .print-header {
            display: block !important;
            text-align: center;
            padding: 6px 0 4px 0;
            border-bottom: 2px solid #000;
            margin-bottom: 8px;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-header h2 {
            color: #000;
            font-size: 16px;
            font-weight: 700;
            margin: 0;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-header p {
            color: #555;
            font-size: 8px;
            margin: 2px 0 0 0;
        }

        body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Print Footer */
        .print-footer {
            display: block !important;
            text-align: center;
            padding: 6px 0 0 0;
            margin-top: 8px;
            border-top: 1px solid #ccc;
            font-size: 7px;
            color: #666;
        }

        @media print and (max-width: 768px) {
            body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table td {
                padding: 3px 6px !important;
                font-size: 8px !important;
            }
        }

        @media print and (max-width: 480px) {
            body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header {
                padding: 8px 12px !important;
            }
            body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-body {
                padding: 8px 12px !important;
            }
            body[data-page="procurement-head-purchase-orders-view-quotation-details"] .detail-header h4 {
                font-size: 12px !important;
            }
            body[data-page="procurement-head-purchase-orders-view-quotation-details"] .status-badge-large {
                font-size: 7px !important;
                padding: 2px 8px !important;
            }
            body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table td {
                padding: 2px 4px !important;
                font-size: 7px !important;
            }
            body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-table .amount {
                font-size: 11px !important;
            }
        }
    }

    body[data-page="procurement-head-purchase-orders-view-quotation-details"] /* Hidden print elements */
    .print-header,
    body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-footer {
        display: none;
    }

    @media print {
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-header,
        body[data-page="procurement-head-purchase-orders-view-quotation-details"] .print-footer {
            display: block !important;
        }
    }

/* ==================== PAGE: procurement_head/SRN/index.php ==================== */
body[data-page="procurement-head-srn-index"] {
        --primary-blue: #1a3a5c;
        --primary-light-blue: #2192BF;
        --primary-green: #2e7d32;
        --bg-light: #f8f9fc;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
        --shadow-hover: 0 8px 30px rgba(0,0,0,0.10);
        --radius-lg: 16px;
        --radius-md: 12px;
    }

    body[data-page="procurement-head-srn-index"] * {
        box-sizing: border-box;
    }

    body[data-page="procurement-head-srn-index"] .srn-management-container {
        max-width: 100%;
        width: 100%;
        padding: 0 20px !important;
        background: var(--bg-light);
        min-height: 80vh;
    }

    body[data-page="procurement-head-srn-index"] /* Page Header */
    .page-header-wrapper {
        background: white;
        padding: 24px 28px;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        transition: box-shadow 0.3s ease;
    }

    body[data-page="procurement-head-srn-index"] .page-header-wrapper:hover {
        box-shadow: var(--shadow-hover);
    }

    body[data-page="procurement-head-srn-index"] .page-header-wrapper h4 {
        font-weight: 700;
        color: var(--primary-blue);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.4rem;
    }

    body[data-page="procurement-head-srn-index"] .page-header-wrapper h4 i {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-srn-index"] .page-header-wrapper .header-badge {
        background: #e8f0fe;
        color: var(--primary-blue);
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    body[data-page="procurement-head-srn-index"] .page-header-wrapper p {
        margin: 4px 0 0;
        color: #6b7280;
        font-size: 0.9rem;
    }

    body[data-page="procurement-head-srn-index"] /* Stats Row */
    .stats-row {
        margin-bottom: 25px;
    }

    body[data-page="procurement-head-srn-index"] .stat-card {
        background: white;
        border-radius: var(--radius-lg);
        padding: 20px 24px;
        box-shadow: var(--shadow-sm);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        border-left: 4px solid transparent;
        display: flex;
        align-items: center;
        gap: 18px;
        cursor: default;
    }

    body[data-page="procurement-head-srn-index"] .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    body[data-page="procurement-head-srn-index"] .stat-icon-wrapper {
        width: 52px;
        height: 52px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    body[data-page="procurement-head-srn-index"] .stat-card:hover .stat-icon-wrapper {
        transform: scale(1.05);
    }

    body[data-page="procurement-head-srn-index"] .stat-icon-wrapper.total {
        background: #dbeafe;
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-srn-index"] .stat-icon-wrapper.taxable {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-srn-index"] .stat-icon-wrapper.non-taxable {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-srn-index"] .stat-info {
        flex: 1;
        min-width: 0;
    }

    body[data-page="procurement-head-srn-index"] .stat-info .stat-number {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--primary-blue);
    }

    body[data-page="procurement-head-srn-index"] .stat-info .stat-label {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    body[data-page="procurement-head-srn-index"] .stat-card.total { border-left-color: var(--primary-light-blue); }
    body[data-page="procurement-head-srn-index"] .stat-card.taxable { border-left-color: #065f46; }
    body[data-page="procurement-head-srn-index"] .stat-card.non-taxable { border-left-color: #991b1b; }

    body[data-page="procurement-head-srn-index"] /* Main Card */
    .main-card {
        border: none;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        width: 100%;
        background: white;
        transition: box-shadow 0.3s ease;
    }

    body[data-page="procurement-head-srn-index"] .main-card:hover {
        box-shadow: var(--shadow-hover);
    }

    body[data-page="procurement-head-srn-index"] .main-card .card-header-custom {
        background: white;
        padding: 18px 24px;
        border-bottom: 1px solid #e9edf2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    body[data-page="procurement-head-srn-index"] .main-card .card-header-custom h5 {
        margin: 0;
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="procurement-head-srn-index"] .main-card .card-header-custom h5 i {
        color: var(--primary-light-blue);
    }

    body[data-page="procurement-head-srn-index"] .main-card .card-body-custom {
        padding: 0;
        overflow-x: auto;
        width: 100%;
        background: white !important;
    }

    body[data-page="procurement-head-srn-index"] /* ===== TABLE STYLES ===== */
    .table-srn {
        margin: 0;
        width: 100% !important;
        font-size: 0.9rem;
        table-layout: fixed;
        border-collapse: collapse;
    }

    body[data-page="procurement-head-srn-index"] /* Column width distribution */
    .table-srn colgroup .col-id { width: 4%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-po { width: 8%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-srn { width: 12%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-date { width: 9%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-station { width: 10%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-supplier { width: 10%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-name { width: 10%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-sales-tax { width: 7%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-f-tax { width: 7%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-remarks { width: 12%; }
    body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-actions { width: 11%; }

    body[data-page="procurement-head-srn-index"] .table-srn thead {
        background: #f1f4f9 !important;
    }

    body[data-page="procurement-head-srn-index"] .table-srn thead th {
        background: #f1f4f9 !important;
        color: var(--primary-blue);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e5e7eb;
        padding: 14px 12px;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
        text-align: center;
        vertical-align: middle;
        background-clip: padding-box !important;
    }

    body[data-page="procurement-head-srn-index"] .table-srn thead tr {
        background: #f1f4f9 !important;
    }

    body[data-page="procurement-head-srn-index"] .table-srn thead th:first-child {
        padding-left: 16px;
    }

    body[data-page="procurement-head-srn-index"] .table-srn thead th:last-child {
        padding-right: 16px;
    }

    body[data-page="procurement-head-srn-index"] .table-srn tbody {
        background: white !important;
    }

    body[data-page="procurement-head-srn-index"] .table-srn tbody td {
        padding: 11px 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        background: white;
        transition: background 0.15s ease;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-page="procurement-head-srn-index"] .table-srn tbody td:first-child {
        padding-left: 16px;
    }

    body[data-page="procurement-head-srn-index"] .table-srn tbody td:last-child {
        padding-right: 16px;
    }

    body[data-page="procurement-head-srn-index"] .table-srn tbody tr {
        transition: transform 0.15s ease;
    }

    body[data-page="procurement-head-srn-index"] .table-srn tbody tr:hover td {
        background: #f8fafc;
    }

    body[data-page="procurement-head-srn-index"] .table-srn tbody tr:last-child td {
        border-bottom: none;
    }

    body[data-page="procurement-head-srn-index"] /* SRN Number */
    .srn-number {
        font-weight: 700;
        color: var(--primary-blue);
        font-family: 'Courier New', monospace;
        letter-spacing: 0.5px;
        font-size: 0.85rem;
        background: #f1f4f9;
        padding: 2px 10px;
        border-radius: 6px;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body[data-page="procurement-head-srn-index"] /* Badges */
    .badge-tax {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.68rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    body[data-page="procurement-head-srn-index"] .badge-tax.yes {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="procurement-head-srn-index"] .badge-tax.no {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-srn-index"] /* Truncated Text with Tooltip */
    .truncate-text {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
        cursor: help;
        width: 100%;
    }

    body[data-page="procurement-head-srn-index"] .table-tooltip {
        position: relative;
        cursor: help;
        display: block;
        width: 100%;
    }

    body[data-page="procurement-head-srn-index"] .table-tooltip .tooltip-text {
        visibility: hidden;
        opacity: 0;
        width: 280px;
        background: #1f2937;
        color: white;
        text-align: left;
        padding: 10px 14px;
        border-radius: 8px;
        position: fixed;
        z-index: 1000;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        transition: all 0.2s ease;
        font-size: 0.82rem;
        font-weight: 400;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        pointer-events: none;
        word-wrap: break-word;
        line-height: 1.5;
        max-height: 200px;
        overflow-y: auto;
    }

    body[data-page="procurement-head-srn-index"] .table-tooltip .tooltip-text::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #1f2937;
    }

    body[data-page="procurement-head-srn-index"] .table-tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    body[data-page="procurement-head-srn-index"] /* Empty / No Data State */
    .no-data {
        text-align: center;
        padding: 70px 20px;
    }

    body[data-page="procurement-head-srn-index"] .no-data .empty-icon {
        font-size: 4.5rem;
        color: #d1d5db;
        margin-bottom: 16px;
        opacity: 0.6;
    }

    body[data-page="procurement-head-srn-index"] .no-data h6 {
        color: #374151;
        font-weight: 600;
        margin: 0;
        font-size: 1.2rem;
    }

    body[data-page="procurement-head-srn-index"] .no-data p {
        color: #9ca3af;
        font-size: 0.95rem;
        margin: 6px 0 0;
    }

    body[data-page="procurement-head-srn-index"] /* DataTables Custom Overrides */
    #srnTable_wrapper {
        padding: 16px 20px;
        background: white !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_wrapper {
        background: white !important;
        width: 100% !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_scroll {
        background: white !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_scrollHead {
        background: #f1f4f9 !important;
        overflow: hidden !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_scrollHeadInner {
        background: #f1f4f9 !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_scrollHeadInner table {
        background: #f1f4f9 !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_scrollHeadInner table thead {
        background: #f1f4f9 !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_scrollHeadInner table thead th {
        background: #f1f4f9 !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_scrollBody {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    body[data-page="procurement-head-srn-index"] .dt-buttons {
        background: white !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dt-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dt-buttons .btn {
        padding: 6px 14px !important;
        font-size: 0.78rem !important;
        margin: 0 !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        background: white !important;
        color: #374151 !important;
        transition: all 0.2s ease !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dt-buttons .btn:hover {
        background: #f3f4f6 !important;
        border-color: var(--primary-light-blue) !important;
        transform: translateY(-1px);
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dt-buttons .btn:active {
        transform: translateY(0px);
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_filter {
        display: flex;
        align-items: center;
        gap: 8px;
        background: white !important;
        padding: 4px 0;
        z-index: 5;
        position: relative;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-weight: 500;
        color: #6b7280;
        font-size: 0.85rem;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_filter input {
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        padding: 7px 14px !important;
        font-size: 0.85rem !important;
        outline: none !important;
        transition: all 0.2s ease !important;
        min-width: 200px;
        background: white !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_filter input:focus {
        border-color: var(--primary-light-blue) !important;
        box-shadow: 0 0 0 3px rgba(33, 146, 191, 0.12) !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_length select {
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        padding: 5px 10px !important;
        outline: none !important;
        background: white;
        cursor: pointer;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_length select:focus {
        border-color: var(--primary-light-blue) !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_info {
        color: #6b7280 !important;
        font-size: 0.85rem !important;
        padding: 10px 0 !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_paginate .paginate_button {
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        padding: 6px 14px !important;
        margin: 0 3px !important;
        background: white !important;
        color: #374151 !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_paginate .paginate_button.current {
        background: var(--primary-light-blue) !important;
        color: white !important;
        border-color: var(--primary-light-blue) !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
        background: #f3f4f6 !important;
        border-color: #d1d5db !important;
    }

    body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_paginate .paginate_button.disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }

    body[data-page="procurement-head-srn-index"] /* Action Buttons */
    .action-btn-group {
        display: flex;
        gap: 4px;
        justify-content: center;
        align-items: center;
    }

    body[data-page="procurement-head-srn-index"] .action-btn-group .btn {
        padding: 5px 10px;
        border-radius: 8px;
        font-size: 0.7rem;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
        cursor: pointer;
    }

    body[data-page="procurement-head-srn-index"] .action-btn-group .btn:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    }

    body[data-page="procurement-head-srn-index"] .action-btn-group .btn:active {
        transform: translateY(0px) scale(0.97);
    }

    body[data-page="procurement-head-srn-index"] .btn-view-srn {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="procurement-head-srn-index"] .btn-view-srn:hover {
        background: #bfdbfe;
        color: #1e3a8a;
    }

    body[data-page="procurement-head-srn-index"] .btn-edit-srn {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="procurement-head-srn-index"] .btn-edit-srn:hover {
        background: #fde68a;
        color: #78350f;
    }

    body[data-page="procurement-head-srn-index"] .btn-delete-srn {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="procurement-head-srn-index"] .btn-delete-srn:hover {
        background: #fecaca;
        color: #7f1d1d;
    }

    body[data-page="procurement-head-srn-index"] /* Modal Custom Styles */
    .modal-content {
        border-radius: 16px;
        overflow: hidden;
    }

    body[data-page="procurement-head-srn-index"] .modal-header {
        background: var(--primary-blue);
        color: white;
        border: none;
        padding: 18px 24px;
    }

    body[data-page="procurement-head-srn-index"] .modal-header .btn-close {
        filter: brightness(0) invert(1);
    }

    body[data-page="procurement-head-srn-index"] .modal-body {
        padding: 24px;
        background: #fafbfc;
        max-height: 80vh;
        overflow-y: auto;
    }

    body[data-page="procurement-head-srn-index"] .modal-footer {
        border-top: 1px solid #e9edf2;
        padding: 16px 24px;
    }

    body[data-page="procurement-head-srn-index"] /* Modal Detail Styles - Additional */
    .modal-body .srn-detail-container {
        padding: 4px 0;
    }

    body[data-page="procurement-head-srn-index"] .modal-body .srn-detail-item .value {
        font-size: 0.95rem;
    }

    body[data-page="procurement-head-srn-index"] .modal-body .srn-detail-item .label {
        font-size: 0.7rem;
    }

    body[data-page="procurement-head-srn-index"] #viewSRNModal .modal-body {
        max-height: 70vh;
        overflow-y: auto;
        padding: 20px 24px;
    }

    body[data-page="procurement-head-srn-index"] .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }

    body[data-page="procurement-head-srn-index"] /* Table Responsive */
    .table-responsive {
        background: white !important;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        width: 100% !important;
        overflow-x: auto !important;
    }

    body[data-page="procurement-head-srn-index"] /* DataTables Column Fix - Critical for sidebar collapse */
    .dataTables_scrollHeadInner table,
    body[data-page="procurement-head-srn-index"] .dataTables_scrollBody table {
        width: 100% !important;
        min-width: 100% !important;
    }

    body[data-page="procurement-head-srn-index"] .dataTables_scrollHeadInner table colgroup,
    body[data-page="procurement-head-srn-index"] .dataTables_scrollBody table colgroup {
        display: table-column-group !important;
        width: 100% !important;
    }

    body[data-page="procurement-head-srn-index"] /* Fix for container width transitions */
    #srnTable_wrapper .dt-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Responsive */
    @media (max-width: 1200px) {
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-id { width: 4%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-po { width: 8%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-srn { width: 11%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-date { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-station { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-supplier { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-name { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-sales-tax { width: 7%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-f-tax { width: 7%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-remarks { width: 11%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-actions { width: 16%; }
    }

    @media (max-width: 992px) {
        body[data-page="procurement-head-srn-index"] .srn-management-container {
            padding: 0 15px !important;
        }

        body[data-page="procurement-head-srn-index"] .table-srn thead th,
        body[data-page="procurement-head-srn-index"] .table-srn tbody td {
            padding: 8px 10px;
            font-size: 0.78rem;
        }

        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-id { width: 5%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-po { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-srn { width: 12%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-date { width: 10%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-station { width: 10%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-supplier { width: 10%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-name { width: 10%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-sales-tax { width: 8%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-f-tax { width: 8%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-remarks { width: 12%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-actions { width: 16%; }

        body[data-page="procurement-head-srn-index"] .srn-number {
            font-size: 0.75rem;
            padding: 1px 8px;
        }

        body[data-page="procurement-head-srn-index"] .badge-tax {
            font-size: 0.62rem;
            padding: 3px 10px;
        }
    }

    @media (max-width: 768px) {
        body[data-page="procurement-head-srn-index"] .srn-management-container {
            padding: 0 10px !important;
        }

        body[data-page="procurement-head-srn-index"] .page-header-wrapper {
            padding: 16px 18px;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        body[data-page="procurement-head-srn-index"] .page-header-wrapper h4 {
            font-size: 1.15rem;
        }

        body[data-page="procurement-head-srn-index"] .stat-card {
            padding: 14px 16px;
            gap: 12px;
        }

        body[data-page="procurement-head-srn-index"] .stat-info .stat-number {
            font-size: 1.5rem;
        }

        body[data-page="procurement-head-srn-index"] .stat-icon-wrapper {
            width: 42px;
            height: 42px;
            font-size: 1.2rem;
        }

        body[data-page="procurement-head-srn-index"] .main-card .card-header-custom {
            padding: 12px 16px;
            flex-direction: column;
            align-items: flex-start;
        }

        body[data-page="procurement-head-srn-index"] #srnTable_wrapper {
            padding: 10px 12px;
        }

        body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_filter input {
            min-width: 140px;
            width: 100% !important;
        }

        body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_filter {
            width: 100%;
        }

        body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dataTables_filter label {
            width: 100%;
            flex-wrap: wrap;
        }

        body[data-page="procurement-head-srn-index"] .table-srn thead th,
        body[data-page="procurement-head-srn-index"] .table-srn tbody td {
            padding: 6px 8px;
            font-size: 0.72rem;
        }

        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-id { width: 5%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-po { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-srn { width: 13%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-date { width: 10%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-station { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-supplier { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-name { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-sales-tax { width: 8%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-f-tax { width: 8%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-remarks { width: 12%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-actions { width: 18%; }

        body[data-page="procurement-head-srn-index"] .action-btn-group .btn {
            padding: 3px 7px;
            min-width: 26px;
            min-height: 26px;
            font-size: 0.65rem;
        }

        body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dt-buttons .btn span {
            display: none;
        }

        body[data-page="procurement-head-srn-index"] #srnTable_wrapper .dt-buttons .btn {
            padding: 6px 10px !important;
            font-size: 0.9rem !important;
        }
    }

    @media (max-width: 576px) {
        body[data-page="procurement-head-srn-index"] .srn-management-container {
            padding: 0 5px !important;
        }

        body[data-page="procurement-head-srn-index"] .stat-card {
            padding: 10px 12px;
            gap: 10px;
        }

        body[data-page="procurement-head-srn-index"] .stat-info .stat-number {
            font-size: 1.2rem;
        }

        body[data-page="procurement-head-srn-index"] .stat-info .stat-label {
            font-size: 0.7rem;
        }

        body[data-page="procurement-head-srn-index"] .stat-icon-wrapper {
            width: 34px;
            height: 34px;
            font-size: 1rem;
        }

        body[data-page="procurement-head-srn-index"] .page-header-wrapper h4 {
            font-size: 1rem;
        }

        body[data-page="procurement-head-srn-index"] .table-srn thead th,
        body[data-page="procurement-head-srn-index"] .table-srn tbody td {
            padding: 5px 6px;
            font-size: 0.68rem;
        }

        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-id { width: 5%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-po { width: 10%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-srn { width: 14%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-date { width: 11%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-station { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-supplier { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-name { width: 9%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-sales-tax { width: 8%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-f-tax { width: 8%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-remarks { width: 12%; }
        body[data-page="procurement-head-srn-index"] .table-srn colgroup .col-actions { width: 20%; }

        body[data-page="procurement-head-srn-index"] .srn-number {
            font-size: 0.65rem;
            padding: 1px 6px;
        }

        body[data-page="procurement-head-srn-index"] .badge-tax {
            font-size: 0.58rem;
            padding: 2px 8px;
        }

        body[data-page="procurement-head-srn-index"] .action-btn-group .btn {
            padding: 2px 6px;
            min-width: 22px;
            min-height: 22px;
            font-size: 0.6rem;
        }
    }

/* ==================== PAGE: procurement_head/vendors/create_vendor.php ==================== */
body[data-page="procurement-head-vendors-create-vendor"] .required {
    font-weight: 600;
}

body[data-page="procurement-head-vendors-create-vendor"] .form-label.required::after {
    content: '';
    margin-left: 0;
}

body[data-page="procurement-head-vendors-create-vendor"] .card {
    border: none;
    border-radius: 12px;
}

body[data-page="procurement-head-vendors-create-vendor"] .card-body {
    padding: 2rem;
}

body[data-page="procurement-head-vendors-create-vendor"] h6 {
    font-weight: 600;
    color: #1a1a2e;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body[data-page="procurement-head-vendors-create-vendor"] .card-body {
        padding: 1.25rem;
    }
}

/* ==================== PAGE: procurement_head/vendors/index.php ==================== */
body[data-page="procurement-head-vendors-index"] /* Badge Status Styles */
.badge-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
}

body[data-page="procurement-head-vendors-index"] .badge-status.approved {
    background: #dcfce7;
    color: #16a34a;
}

body[data-page="procurement-head-vendors-index"] .badge-status.pending {
    background: #fef3c7;
    color: #d97706;
}

body[data-page="procurement-head-vendors-index"] .badge-status.rejected {
    background: #fee2e2;
    color: #dc2626;
}

body[data-page="procurement-head-vendors-index"] .badge-verified {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

body[data-page="procurement-head-vendors-index"] .badge-verified.yes {
    background: #dcfce7;
    color: #16a34a;
}

body[data-page="procurement-head-vendors-index"] .badge-verified.no {
    background: #fee2e2;
    color: #dc2626;
}

body[data-page="procurement-head-vendors-index"] /* Detail Rows */
.detail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f5;
}

body[data-page="procurement-head-vendors-index"] .detail-row:last-child {
    border-bottom: none;
}

body[data-page="procurement-head-vendors-index"] .detail-label {
    font-weight: 600;
    color: #6b7280;
    width: 180px;
    flex-shrink: 0;
    font-size: 14px;
}

body[data-page="procurement-head-vendors-index"] .detail-value {
    color: #1a1a2e;
    font-size: 14px;
    word-break: break-word;
}

body[data-page="procurement-head-vendors-index"] /* DataTables Customization */
.dataTables_wrapper .dataTables_length,
body[data-page="procurement-head-vendors-index"] .dataTables_wrapper .dataTables_filter {
    margin-bottom: 20px;
}

body[data-page="procurement-head-vendors-index"] .dataTables_wrapper .dataTables_filter input {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 16px;
    margin-left: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

body[data-page="procurement-head-vendors-index"] .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
    outline: none;
}

body[data-page="procurement-head-vendors-index"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin: 0 3px;
    background: white;
    color: #374151;
    transition: all 0.2s ease;
}

body[data-page="procurement-head-vendors-index"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #0d6efd;
    color: white !important;
    border-color: #0d6efd;
}

body[data-page="procurement-head-vendors-index"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #0d6efd;
    color: white !important;
    border-color: #0d6efd;
}

body[data-page="procurement-head-vendors-index"] /* Action Buttons */
.action-buttons .btn {
    padding: 4px 8px;
    font-size: 12px;
    margin: 0 2px;
}

body[data-page="procurement-head-vendors-index"] /* Modal Styles */
.modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

body[data-page="procurement-head-vendors-index"] .modal-header {
    border-bottom: 2px solid #f1f3f5;
    padding: 20px 28px;
}

body[data-page="procurement-head-vendors-index"] .modal-body {
    padding: 28px;
}

body[data-page="procurement-head-vendors-index"] .modal-footer {
    border-top: 2px solid #f1f3f5;
    padding: 20px 28px;
}

/* Responsive */
@media (max-width: 768px) {
    body[data-page="procurement-head-vendors-index"] .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    body[data-page="procurement-head-vendors-index"] .detail-label {
        width: auto;
    }
}

/* ==================== PAGE: profile/edit.php ==================== */
body[data-page="profile-edit"] .edit-profile-container {
        max-width: 800px;
        margin: 0 auto;
    }

    body[data-page="profile-edit"] .edit-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        padding: 30px;
        border-radius: 16px 16px 0 0;
    }

    body[data-page="profile-edit"] .edit-header h3 {
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="profile-edit"] .edit-header p {
        margin: 6px 0 0;
        opacity: 0.9;
        font-size: 0.95rem;
    }

    body[data-page="profile-edit"] .edit-body {
        background: white;
        padding: 30px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    }

    body[data-page="profile-edit"] .form-group {
        margin-bottom: 22px;
    }

    body[data-page="profile-edit"] .form-group label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 6px;
        display: block;
    }

    body[data-page="profile-edit"] .form-group label .required {
        color: var(--primary-red);
        margin-left: 4px;
    }

    body[data-page="profile-edit"] .form-group .form-control,
    body[data-page="profile-edit"] .form-group .form-select {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: #fafafa;
        width: 100%;
    }

    body[data-page="profile-edit"] .form-group .form-control:focus,
    body[data-page="profile-edit"] .form-group .form-select:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
        background: white;
    }

    body[data-page="profile-edit"] .form-group .form-control::placeholder {
        color: #9ca3af;
    }

    body[data-page="profile-edit"] .form-group textarea.form-control {
        resize: vertical;
        min-height: 80px;
    }

    body[data-page="profile-edit"] .form-group .form-hint {
        font-size: 0.8rem;
        color: #6b7280;
        margin-top: 4px;
    }

    body[data-page="profile-edit"] .form-group .form-hint i {
        margin-right: 4px;
    }

    body[data-page="profile-edit"] .alert-custom {
        border-radius: 12px;
        padding: 14px 20px;
        font-weight: 500;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: none;
    }

    body[data-page="profile-edit"] .alert-custom.alert-success {
        background: #f0fdf4;
        color: #166534;
        border-left: 4px solid #22c55e;
    }

    body[data-page="profile-edit"] .alert-custom.alert-danger {
        background: #fef2f2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    body[data-page="profile-edit"] .alert-custom i {
        font-size: 1.2rem;
    }

    body[data-page="profile-edit"] .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 25px;
        flex-wrap: wrap;
    }

    body[data-page="profile-edit"] .form-actions .btn {
        padding: 10px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    body[data-page="profile-edit"] .form-actions .btn-primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
        flex: 1;
    }

    body[data-page="profile-edit"] .form-actions .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
    }

    body[data-page="profile-edit"] .form-actions .btn-secondary {
        background: #f3f4f6;
        color: #374151;
        border: none;
    }

    body[data-page="profile-edit"] .form-actions .btn-secondary:hover {
        background: #e5e7eb;
    }

    body[data-page="profile-edit"] .password-section {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px;
        margin-top: 10px;
        border: 1px solid #e5e7eb;
    }

    body[data-page="profile-edit"] .password-section .section-label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="profile-edit"] .password-section .section-label i {
        color: var(--primary-light-blue);
    }

    @media (max-width: 768px) {
        body[data-page="profile-edit"] .edit-header {
            padding: 20px;
        }

        body[data-page="profile-edit"] .edit-body {
            padding: 20px;
        }

        body[data-page="profile-edit"] .form-actions {
            flex-direction: column;
        }

        body[data-page="profile-edit"] .form-actions .btn {
            width: 100%;
            text-align: center;
        }
    }

/* ==================== PAGE: profile/pre_qualification_form.php ==================== */
body[data-page="profile-pre-qualification-form"] {
    --primary-blue: #394273;
    --primary-light-blue: #5b6fa5;
    --primary-green: #27ae60;
    --primary-red: #e74c3c;
    --primary-orange: #f39c12;
    --primary-yellow: #f1c40f;
}

body[data-page="profile-pre-qualification-form"] .pre-qualification-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

body[data-page="profile-pre-qualification-form"] .page-header {
    margin-bottom: 30px;
    text-align: center;
}

body[data-page="profile-pre-qualification-form"] .page-header h2 {
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 10px;
}

body[data-page="profile-pre-qualification-form"] .page-header p {
    color: #6b7280;
    font-size: 0.95rem;
}

body[data-page="profile-pre-qualification-form"] .form-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

body[data-page="profile-pre-qualification-form"] .form-section {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 2px solid #f1f3f5;
}

body[data-page="profile-pre-qualification-form"] .form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

body[data-page="profile-pre-qualification-form"] .form-section-title {
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

body[data-page="profile-pre-qualification-form"] .form-section-title i {
    font-size: 1.2rem;
}

body[data-page="profile-pre-qualification-form"] .form-section-title .section-number {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 0.8rem;
    font-weight: 700;
}

body[data-page="profile-pre-qualification-form"] .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #374151;
    margin-bottom: 5px;
}

body[data-page="profile-pre-qualification-form"] .form-label .required {
    color: var(--primary-red);
    margin-left: 3px;
}

body[data-page="profile-pre-qualification-form"] .form-label .required-filer {
    color: var(--primary-red);
    margin-left: 3px;
    display: none;
}

body[data-page="profile-pre-qualification-form"] .form-control, body[data-page="profile-pre-qualification-form"] .form-select {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 10px 14px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

body[data-page="profile-pre-qualification-form"] .form-control:focus, body[data-page="profile-pre-qualification-form"] .form-select:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(57, 66, 115, 0.1);
}

body[data-page="profile-pre-qualification-form"] .form-control.is-invalid {
    border-color: var(--primary-red);
}

body[data-page="profile-pre-qualification-form"] .form-text {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 5px;
}

body[data-page="profile-pre-qualification-form"] .status-badge {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

body[data-page="profile-pre-qualification-form"] .status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

body[data-page="profile-pre-qualification-form"] .status-badge.approved {
    background: #d1fae5;
    color: #065f46;
}

body[data-page="profile-pre-qualification-form"] .status-badge.rejected {
    background: #fee2e2;
    color: #991b1b;
}

body[data-page="profile-pre-qualification-form"] .status-badge.not-submitted {
    background: #e5e7eb;
    color: #374151;
}

body[data-page="profile-pre-qualification-form"] .alert-message {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

body[data-page="profile-pre-qualification-form"] .alert-message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

body[data-page="profile-pre-qualification-form"] .alert-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

body[data-page="profile-pre-qualification-form"] .alert-message.info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

body[data-page="profile-pre-qualification-form"] .alert-message.warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

body[data-page="profile-pre-qualification-form"] .btn-submit {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
}

body[data-page="profile-pre-qualification-form"] .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
    color: white;
}

body[data-page="profile-pre-qualification-form"] .btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body[data-page="profile-pre-qualification-form"] .btn-submit i {
    margin-right: 8px;
}

body[data-page="profile-pre-qualification-form"] .btn-edit {
    background: var(--primary-orange);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

body[data-page="profile-pre-qualification-form"] .btn-edit:hover {
    background: #e67e22;
    transform: translateY(-2px);
    color: white;
}

body[data-page="profile-pre-qualification-form"] .btn-resubmit {
    background: var(--primary-yellow);
    color: #000;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

body[data-page="profile-pre-qualification-form"] .btn-resubmit:hover {
    background: #f39c12;
    transform: translateY(-2px);
    color: #000;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    body[data-page="profile-pre-qualification-form"] .pre-qualification-container {
        padding: 10px;
    }

    body[data-page="profile-pre-qualification-form"] .form-card {
        padding: 20px 15px;
    }

    body[data-page="profile-pre-qualification-form"] .form-section {
        padding-bottom: 20px;
    }

    body[data-page="profile-pre-qualification-form"] .form-section-title {
        font-size: 1rem;
    }

    body[data-page="profile-pre-qualification-form"] .page-header h2 {
        font-size: 1.5rem;
    }

    body[data-page="profile-pre-qualification-form"] .btn-submit {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    body[data-page="profile-pre-qualification-form"] .status-badge {
        font-size: 0.8rem;
        padding: 6px 18px;
    }
}

body[data-page="profile-pre-qualification-form"] /* Read-only view styles */
.view-mode .form-control {
    background-color: #f8fafc;
    border-color: #e5e7eb;
}

body[data-page="profile-pre-qualification-form"] .view-mode .form-control:focus {
    box-shadow: none;
    border-color: #e5e7eb;
}
body[data-page="profile-pre-qualification-form"] .lgl-grp {
    display: none;
}
body[data-page="profile-pre-qualification-form"] .lgl-grp.show {
    display: flex;
}

/* ==================== PAGE: profile/view.php ==================== */
body[data-page="profile-view"] .profile-container {
        max-width: 900px;
        margin: 0 auto;
    }

    body[data-page="profile-view"] .profile-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        padding: 40px 30px;
        border-radius: 16px 16px 0 0;
        display: flex;
        align-items: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    body[data-page="profile-view"] .profile-avatar-large {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        font-weight: 700;
        border: 3px solid rgba(255,255,255,0.3);
        flex-shrink: 0;
    }

    body[data-page="profile-view"] .profile-header-info h2 {
        font-weight: 700;
        margin: 0;
    }

    body[data-page="profile-view"] .profile-header-info .role-badge {
        display: inline-block;
        background: rgba(255,255,255,0.2);
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        margin-top: 6px;
    }

    body[data-page="profile-view"] .profile-header-info .status-badge {
        display: inline-block;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        margin-top: 6px;
        margin-left: 8px;
    }

    body[data-page="profile-view"] .profile-body {
        background: white;
        padding: 30px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    }

    body[data-page="profile-view"] .profile-section {
        margin-bottom: 30px;
    }

    body[data-page="profile-view"] .profile-section:last-child {
        margin-bottom: 0;
    }

    body[data-page="profile-view"] .profile-section .section-title {
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 1.1rem;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e7eb;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="profile-view"] .profile-section .section-title i {
        color: var(--primary-light-blue);
    }

    body[data-page="profile-view"] .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    body[data-page="profile-view"] .info-item {
        background: #f8fafc;
        padding: 16px 20px;
        border-radius: 12px;
        border-left: 4px solid var(--primary-light-blue);
    }

    body[data-page="profile-view"] .info-item .label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    body[data-page="profile-view"] .info-item .value {
        font-size: 1rem;
        font-weight: 600;
        color: #1a1a2e;
    }

    body[data-page="profile-view"] .info-item .value .badge {
        font-size: 0.8rem;
        padding: 4px 12px;
    }

    body[data-page="profile-view"] .profile-actions {
        display: flex;
        gap: 12px;
        margin-top: 25px;
        flex-wrap: wrap;
    }

    body[data-page="profile-view"] .profile-actions .btn {
        padding: 10px 28px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    body[data-page="profile-view"] .profile-actions .btn-edit {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
    }

    body[data-page="profile-view"] .profile-actions .btn-edit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
    }

    body[data-page="profile-view"] .profile-actions .btn-back {
        background: #f3f4f6;
        color: #374151;
        border: none;
    }

    body[data-page="profile-view"] .profile-actions .btn-back:hover {
        background: #e5e7eb;
    }

    @media (max-width: 768px) {
        body[data-page="profile-view"] .profile-header {
            padding: 24px 20px;
            flex-direction: column;
            text-align: center;
        }

        body[data-page="profile-view"] .profile-avatar-large {
            width: 80px;
            height: 80px;
            font-size: 2rem;
        }

        body[data-page="profile-view"] .profile-body {
            padding: 20px;
        }

        body[data-page="profile-view"] .info-grid {
            grid-template-columns: 1fr;
        }

        body[data-page="profile-view"] .profile-actions {
            flex-direction: column;
        }

        body[data-page="profile-view"] .profile-actions .btn {
            width: 100%;
            text-align: center;
        }
    }

/* ==================== PAGE: vendor/dashboard.php ==================== */
body[data-page="vendor-dashboard"] {
        --primary-blue: #394273;
        --primary-light-blue: #5b6fa5;
        --primary-orange: #f39c12;
        --primary-green: #27ae60;
        --primary-red: #e74c3c;
    }

    body[data-page="vendor-dashboard"] /* Dashboard Cards */
    .dashboard-card {
        padding: 20px 25px;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body[data-page="vendor-dashboard"] .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    body[data-page="vendor-dashboard"] .dashboard-card i {
        font-size: 2.5rem;
        opacity: 0.3;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    body[data-page="vendor-dashboard"] .dashboard-card h3 {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 5px;
    }

    body[data-page="vendor-dashboard"] .dashboard-card p {
        font-size: 0.85rem;
        opacity: 0.9;
        margin-bottom: 12px;
    }

    body[data-page="vendor-dashboard"] .dashboard-card .btn-light {
        border-radius: 20px;
        padding: 4px 18px;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.3s ease;
        align-self: flex-start;
    }

    body[data-page="vendor-dashboard"] .dashboard-card .btn-light:hover {
        transform: scale(1.05);
    }

    body[data-page="vendor-dashboard"] .bg-gradient-blue {
        background: linear-gradient(135deg, #394273, #5b6fa5);
    }

    body[data-page="vendor-dashboard"] .bg-gradient-orange {
        background: linear-gradient(135deg, #e67e22, #f39c12);
    }

    body[data-page="vendor-dashboard"] .bg-gradient-light-blue {
        background: linear-gradient(135deg, #3498db, #85c1e9);
    }

    body[data-page="vendor-dashboard"] /* Status Cards (for non-approved users) */
    .status-card {
        background: white;
        border-radius: 16px;
        padding: 30px 25px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
        text-align: center;
        margin-bottom: 25px;
        border-left: 4px solid transparent;
    }

    body[data-page="vendor-dashboard"] .status-card.info {
        border-left-color: #3b82f6;
    }

    body[data-page="vendor-dashboard"] .status-card.pending {
        border-left-color: #f59e0b;
    }

    body[data-page="vendor-dashboard"] .status-card .status-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 28px;
    }

    body[data-page="vendor-dashboard"] .status-card .status-icon.info {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="vendor-dashboard"] .status-card .status-icon.pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-dashboard"] .status-card .status-icon.success {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="vendor-dashboard"] .status-card h4 {
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 6px;
        font-size: 1.1rem;
    }

    body[data-page="vendor-dashboard"] .status-card p {
        color: #6b7280;
        font-size: 0.9rem;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    body[data-page="vendor-dashboard"] .status-card .btn-status {
        padding: 8px 30px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        font-size: 0.9rem;
    }

    body[data-page="vendor-dashboard"] .status-card .btn-status.primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
    }

    body[data-page="vendor-dashboard"] .status-card .btn-status.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
        color: white;
    }

    body[data-page="vendor-dashboard"] .status-badge-sm {
        display: inline-block;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    body[data-page="vendor-dashboard"] .status-badge-sm.warning {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-dashboard"] .status-badge-sm.secondary {
        background: #e5e7eb;
        color: #374151;
    }

    body[data-page="vendor-dashboard"] /* Recent Demands Side Card */
    .recent-demands-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        height: 100%;
        min-height: 350px;
    }

    body[data-page="vendor-dashboard"] .recent-demands-card .card-header-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f1f3f5;
    }

    body[data-page="vendor-dashboard"] .recent-demands-card .card-header-custom h5 {
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
        font-size: 1rem;
    }

    body[data-page="vendor-dashboard"] .recent-demands-card .card-header-custom .badge-count {
        background: var(--primary-blue);
        color: white;
        border-radius: 20px;
        padding: 2px 10px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    body[data-page="vendor-dashboard"] .recent-demands-card .btn-view-all {
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.3s ease;
    }

    body[data-page="vendor-dashboard"] .recent-demands-card .btn-view-all:hover {
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-dashboard"] /* Compact Demand Items */
    .demand-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        background: #f8fafc;
        transition: all 0.3s ease;
        cursor: pointer;
        border-left: 3px solid transparent;
    }

    body[data-page="vendor-dashboard"] .demand-item:hover {
        background: #f0f2f9;
        border-left-color: var(--primary-blue);
        transform: translateX(3px);
    }

    body[data-page="vendor-dashboard"] .demand-item:last-child {
        margin-bottom: 0;
    }

    body[data-page="vendor-dashboard"] .demand-item .demand-icon {
        width: 35px;
        height: 35px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-right: 12px;
    }

    body[data-page="vendor-dashboard"] .demand-item .demand-icon i {
        font-size: 0.9rem;
    }

    body[data-page="vendor-dashboard"] .demand-item .demand-info {
        flex: 1;
        min-width: 0;
    }

    body[data-page="vendor-dashboard"] .demand-item .demand-info .title {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body[data-page="vendor-dashboard"] .demand-item .demand-info .meta {
        font-size: 0.7rem;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
    }

    body[data-page="vendor-dashboard"] .demand-item .demand-info .meta i {
        font-size: 0.6rem;
    }

    body[data-page="vendor-dashboard"] .demand-item .demand-badge {
        flex-shrink: 0;
        margin-left: 8px;
    }

    body[data-page="vendor-dashboard"] /* Small Status Badges */
    .badge-sm {
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    body[data-page="vendor-dashboard"] .badge-sm-open {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="vendor-dashboard"] .badge-sm-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-dashboard"] .badge-sm-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="vendor-dashboard"] .badge-sm-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="vendor-dashboard"] .badge-sm-closed {
        background: #e5e7eb;
        color: #374151;
    }

    body[data-page="vendor-dashboard"] /* Top Pending Alert */
    .pending-alert {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        border: 1px solid #f59e0b;
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
    }

    body[data-page="vendor-dashboard"] .pending-alert .alert-content {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    body[data-page="vendor-dashboard"] .pending-alert .alert-icon {
        font-size: 1.5rem;
        color: #92400e;
    }

    body[data-page="vendor-dashboard"] .pending-alert .alert-text {
        color: #78350f;
    }

    body[data-page="vendor-dashboard"] .pending-alert .alert-text strong {
        font-size: 1rem;
    }

    body[data-page="vendor-dashboard"] .pending-alert .alert-text span {
        font-size: 0.85rem;
    }

    body[data-page="vendor-dashboard"] .pending-alert .btn-alert {
        background: #92400e;
        color: white;
        border: none;
        padding: 6px 20px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    body[data-page="vendor-dashboard"] .pending-alert .btn-alert:hover {
        background: #78350f;
        transform: scale(1.05);
    }

    body[data-page="vendor-dashboard"] /* No Data */
    .no-data-compact {
        text-align: center;
        padding: 30px 15px;
    }

    body[data-page="vendor-dashboard"] .no-data-compact i {
        font-size: 2.5rem;
        color: #d1d5db;
        margin-bottom: 10px;
    }

    body[data-page="vendor-dashboard"] .no-data-compact h6 {
        color: #6b7280;
        font-weight: 600;
        font-size: 0.9rem;
    }

    body[data-page="vendor-dashboard"] .no-data-compact p {
        color: #9ca3af;
        font-size: 0.8rem;
        margin: 0;
    }

    /* Mobile Responsive */
    @media (max-width: 992px) {
        body[data-page="vendor-dashboard"] .recent-demands-card {
            min-height: auto;
            margin-top: 20px;
        }
    }

    @media (max-width: 768px) {
        body[data-page="vendor-dashboard"] .dashboard-card {
            min-height: 120px;
            padding: 15px 20px;
        }

        body[data-page="vendor-dashboard"] .dashboard-card h3 {
            font-size: 1.8rem;
        }

        body[data-page="vendor-dashboard"] .dashboard-card i {
            font-size: 2rem;
            right: 15px;
            top: 15px;
        }

        body[data-page="vendor-dashboard"] .dashboard-card p {
            font-size: 0.8rem;
        }

        body[data-page="vendor-dashboard"] .dashboard-card .btn-light {
            font-size: 0.75rem;
            padding: 3px 15px;
        }

        body[data-page="vendor-dashboard"] .recent-demands-card {
            padding: 15px;
        }

        body[data-page="vendor-dashboard"] .recent-demands-card .card-header-custom h5 {
            font-size: 0.9rem;
        }

        body[data-page="vendor-dashboard"] .demand-item {
            padding: 8px 10px;
        }

        body[data-page="vendor-dashboard"] .demand-item .demand-icon {
            width: 30px;
            height: 30px;
        }

        body[data-page="vendor-dashboard"] .demand-item .demand-icon i {
            font-size: 0.8rem;
        }

        body[data-page="vendor-dashboard"] .demand-item .demand-info .title {
            font-size: 0.8rem;
        }

        body[data-page="vendor-dashboard"] .demand-item .demand-info .meta {
            font-size: 0.65rem;
        }

        body[data-page="vendor-dashboard"] .pending-alert {
            padding: 10px 15px;
        }

        body[data-page="vendor-dashboard"] .pending-alert .alert-icon {
            font-size: 1.3rem;
        }

        body[data-page="vendor-dashboard"] .pending-alert .alert-text strong {
            font-size: 0.9rem;
        }

        body[data-page="vendor-dashboard"] .pending-alert .alert-text span {
            font-size: 0.75rem;
        }

        body[data-page="vendor-dashboard"] .pending-alert .btn-alert {
            font-size: 0.75rem;
            padding: 5px 15px;
        }

        body[data-page="vendor-dashboard"] .status-card {
            padding: 20px 15px;
        }

        body[data-page="vendor-dashboard"] .status-card .status-icon {
            width: 50px;
            height: 50px;
            font-size: 24px;
        }

        body[data-page="vendor-dashboard"] .status-card h4 {
            font-size: 1rem;
        }

        body[data-page="vendor-dashboard"] .status-card p {
            font-size: 0.85rem;
        }
    }

    @media (max-width: 576px) {
        body[data-page="vendor-dashboard"] .dashboard-card {
            min-height: 100px;
            padding: 12px 15px;
        }

        body[data-page="vendor-dashboard"] .dashboard-card h3 {
            font-size: 1.5rem;
        }

        body[data-page="vendor-dashboard"] .dashboard-card i {
            font-size: 1.5rem;
            right: 12px;
            top: 12px;
        }

        body[data-page="vendor-dashboard"] .dashboard-card p {
            font-size: 0.7rem;
            margin-bottom: 8px;
        }

        body[data-page="vendor-dashboard"] .dashboard-card .btn-light {
            font-size: 0.7rem;
            padding: 2px 12px;
        }

        body[data-page="vendor-dashboard"] .demand-item {
            padding: 6px 8px;
        }

        body[data-page="vendor-dashboard"] .demand-item .demand-icon {
            width: 25px;
            height: 25px;
            margin-right: 8px;
        }

        body[data-page="vendor-dashboard"] .demand-item .demand-icon i {
            font-size: 0.7rem;
        }

        body[data-page="vendor-dashboard"] .demand-item .demand-info .title {
            font-size: 0.75rem;
        }

        body[data-page="vendor-dashboard"] .pending-alert {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        body[data-page="vendor-dashboard"] .pending-alert .alert-content {
            justify-content: center;
        }

        body[data-page="vendor-dashboard"] .pending-alert .btn-alert {
            text-align: center;
        }
    }

/* ==================== PAGE: vendor/my_quotations.php ==================== */
body[data-page="vendor-my-quotations"] .quotations-container {
        max-width: 100%;
    }

    body[data-page="vendor-my-quotations"] .page-header {
        margin-bottom: 25px;
    }

    body[data-page="vendor-my-quotations"] .page-header h4 {
        font-weight: 700;
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="vendor-my-quotations"] .page-header h4 i {
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-my-quotations"] /* Statistics Cards */
    .stat-box {
        background: white;
        border-radius: 12px;
        padding: 18px 20px;
        text-align: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        height: 100%;
        border-bottom: 3px solid transparent;
    }

    body[data-page="vendor-my-quotations"] .stat-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    body[data-page="vendor-my-quotations"] .stat-box .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;
    }

    body[data-page="vendor-my-quotations"] .stat-box .stat-label {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 500;
        margin-top: 2px;
    }

    body[data-page="vendor-my-quotations"] .stat-box .stat-icon {
        font-size: 1.4rem;
        margin-bottom: 4px;
        opacity: 0.7;
    }

    body[data-page="vendor-my-quotations"] .stat-box.total {
        border-bottom-color: var(--primary-blue);
    }

    body[data-page="vendor-my-quotations"] .stat-box.total .stat-number {
        color: var(--primary-blue);
    }

    body[data-page="vendor-my-quotations"] .stat-box.pending {
        border-bottom-color: #f59e0b;
    }

    body[data-page="vendor-my-quotations"] .stat-box.pending .stat-number {
        color: #d97706;
    }

    body[data-page="vendor-my-quotations"] .stat-box.approved {
        border-bottom-color: #10b981;
    }

    body[data-page="vendor-my-quotations"] .stat-box.approved .stat-number {
        color: #059669;
    }

    body[data-page="vendor-my-quotations"] .stat-box.rejected {
        border-bottom-color: #ef4444;
    }

    body[data-page="vendor-my-quotations"] .stat-box.rejected .stat-number {
        color: #dc2626;
    }

    body[data-page="vendor-my-quotations"] .stat-box.amount {
        border-bottom-color: var(--primary-green);
    }

    body[data-page="vendor-my-quotations"] .stat-box.amount .stat-number {
        color: var(--primary-green);
    }

    body[data-page="vendor-my-quotations"] /* Status Cards (for non-approved users) */
    .status-card {
        background: white;
        border-radius: 16px;
        padding: 30px 25px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
        text-align: center;
        margin-bottom: 25px;
        border-left: 4px solid transparent;
    }

    body[data-page="vendor-my-quotations"] .status-card.info {
        border-left-color: #3b82f6;
    }

    body[data-page="vendor-my-quotations"] .status-card.pending {
        border-left-color: #f59e0b;
    }

    body[data-page="vendor-my-quotations"] .status-card .status-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 28px;
    }

    body[data-page="vendor-my-quotations"] .status-card .status-icon.info {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="vendor-my-quotations"] .status-card .status-icon.pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-my-quotations"] .status-card h4 {
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 6px;
        font-size: 1.1rem;
    }

    body[data-page="vendor-my-quotations"] .status-card p {
        color: #6b7280;
        font-size: 0.9rem;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    body[data-page="vendor-my-quotations"] .status-card .btn-status {
        padding: 8px 30px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        font-size: 0.9rem;
    }

    body[data-page="vendor-my-quotations"] .status-card .btn-status.primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
    }

    body[data-page="vendor-my-quotations"] .status-card .btn-status.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
        color: white;
    }

    body[data-page="vendor-my-quotations"] .status-badge-sm {
        display: inline-block;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    body[data-page="vendor-my-quotations"] .status-badge-sm.warning {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-my-quotations"] /* Filter Section */
    .filter-section {
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        margin-bottom: 25px;
    }

    body[data-page="vendor-my-quotations"] .filter-section .form-label {
        font-weight: 600;
        font-size: 0.85rem;
        color: #374151;
    }

    body[data-page="vendor-my-quotations"] .filter-section .btn-filter {
        margin-top: 28px;
    }

    body[data-page="vendor-my-quotations"] /* Main Card */
    .main-card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    body[data-page="vendor-my-quotations"] .main-card .card-header-custom {
        background: white;
        padding: 18px 24px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    body[data-page="vendor-my-quotations"] .main-card .card-header-custom h5 {
        margin: 0;
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="vendor-my-quotations"] .main-card .card-header-custom h5 i {
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-my-quotations"] .main-card .card-body-custom {
        padding: 0;
    }

    body[data-page="vendor-my-quotations"] /* Table */
    .table-quotations {
        margin: 0;
    }

    body[data-page="vendor-my-quotations"] .table-quotations thead th {
        background: #f8fafc;
        color: #374151;
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: 2px solid #e5e7eb;
        padding: 14px 16px;
        white-space: nowrap;
    }

    body[data-page="vendor-my-quotations"] .table-quotations tbody td {
        padding: 12px 16px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        font-size: 0.9rem;
    }

    body[data-page="vendor-my-quotations"] .table-quotations tbody tr:hover {
        background-color: rgba(33, 146, 191, 0.03);
    }

    body[data-page="vendor-my-quotations"] /* Badges */
    .badge-status {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="vendor-my-quotations"] .badge-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    body[data-page="vendor-my-quotations"] .badge-status.badge-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="vendor-my-quotations"] .badge-status.badge-approved::before {
        background: #10b981;
    }

    body[data-page="vendor-my-quotations"] .badge-status.badge-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-my-quotations"] .badge-status.badge-pending::before {
        background: #f59e0b;
    }

    body[data-page="vendor-my-quotations"] .badge-status.badge-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="vendor-my-quotations"] .badge-status.badge-rejected::before {
        background: #ef4444;
    }

    body[data-page="vendor-my-quotations"] .amount-display {
        font-weight: 700;
    }

    body[data-page="vendor-my-quotations"] .amount-display.approved {
        color: var(--primary-green);
    }

    body[data-page="vendor-my-quotations"] .amount-display.pending {
        color: var(--primary-orange);
    }

    body[data-page="vendor-my-quotations"] .amount-display.rejected {
        color: var(--primary-red);
    }

    body[data-page="vendor-my-quotations"] .btn-view-quotation {
        background: #eff6ff;
        color: #1e40af;
        border: none;
        padding: 6px 14px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.3s ease;
    }

    body[data-page="vendor-my-quotations"] .btn-view-quotation:hover {
        background: #dbeafe;
        transform: translateY(-1px);
    }

    body[data-page="vendor-my-quotations"] .badge-po-status {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    body[data-page="vendor-my-quotations"] .badge-po-status.has-po {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="vendor-my-quotations"] .badge-po-status.no-po {
        background: #f3f4f6;
        color: #6b7280;
    }

    body[data-page="vendor-my-quotations"] .badge-po-status .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    body[data-page="vendor-my-quotations"] .badge-po-status.has-po .dot {
        background: #10b981;
    }

    body[data-page="vendor-my-quotations"] .badge-po-status.no-po .dot {
        background: #9ca3af;
    }

    body[data-page="vendor-my-quotations"] .po-number-link {
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.8rem;
    }

    body[data-page="vendor-my-quotations"] .po-number-link:hover {
        text-decoration: underline;
    }

    body[data-page="vendor-my-quotations"] .no-data {
        text-align: center;
        padding: 60px 20px;
    }

    body[data-page="vendor-my-quotations"] .no-data i {
        font-size: 4rem;
        color: #d1d5db;
        margin-bottom: 20px;
    }

    body[data-page="vendor-my-quotations"] .no-data h5 {
        color: #6b7280;
        font-weight: 600;
    }

    body[data-page="vendor-my-quotations"] .no-data p {
        color: #9ca3af;
    }

    body[data-page="vendor-my-quotations"] /* Modal */
    .modal-content-custom {
        border: none;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    body[data-page="vendor-my-quotations"] .modal-header-custom {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border-radius: 16px 16px 0 0;
        padding: 20px 24px;
        border-bottom: none;
    }

    body[data-page="vendor-my-quotations"] .modal-header-custom .modal-title {
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="vendor-my-quotations"] .modal-header-custom .btn-close {
        filter: brightness(0) invert(1);
    }

    body[data-page="vendor-my-quotations"] .modal-body-custom {
        padding: 24px;
    }

    body[data-page="vendor-my-quotations"] .modal-body-custom .detail-section {
        margin-bottom: 20px;
    }

    body[data-page="vendor-my-quotations"] .modal-body-custom .detail-section:last-child {
        margin-bottom: 0;
    }

    body[data-page="vendor-my-quotations"] .modal-body-custom .detail-section .detail-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    body[data-page="vendor-my-quotations"] .modal-body-custom .detail-section .detail-value {
        font-size: 0.95rem;
        color: #1a1a2e;
        line-height: 1.6;
    }

    body[data-page="vendor-my-quotations"] /* DataTables Overrides */
    .dataTables_wrapper .dataTables_filter input {
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 0.85rem;
        transition: all 0.3s ease;
        background: #fafafa;
        margin-left: 6px;
    }

    body[data-page="vendor-my-quotations"] .dataTables_wrapper .dataTables_filter input:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 3px rgba(33, 146, 191, 0.08);
        background: white;
        outline: none;
    }

    @media (max-width: 768px) {
        body[data-page="vendor-my-quotations"] .stat-box {
            padding: 14px 12px;
        }

        body[data-page="vendor-my-quotations"] .stat-box .stat-number {
            font-size: 1.4rem;
        }

        body[data-page="vendor-my-quotations"] .filter-section .btn-filter {
            margin-top: 10px;
            width: 100%;
        }

        body[data-page="vendor-my-quotations"] .table-quotations thead th,
        body[data-page="vendor-my-quotations"] .table-quotations tbody td {
            padding: 8px 12px;
            font-size: 0.8rem;
        }

        body[data-page="vendor-my-quotations"] .status-card {
            padding: 20px 15px;
        }

        body[data-page="vendor-my-quotations"] .status-card .status-icon {
            width: 50px;
            height: 50px;
            font-size: 24px;
        }

        body[data-page="vendor-my-quotations"] .status-card h4 {
            font-size: 1rem;
        }

        body[data-page="vendor-my-quotations"] .status-card p {
            font-size: 0.85rem;
        }
    }

/* ==================== PAGE: vendor/procurement_demands.php ==================== */
body[data-page="vendor-procurement-demands"] .demands-header {
        margin-bottom: 30px;
    }

    body[data-page="vendor-procurement-demands"] .demands-header h4 {
        font-weight: 700;
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="vendor-procurement-demands"] .demands-header h4 i {
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-procurement-demands"] .business-type-badge {
        display: inline-block;
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    body[data-page="vendor-procurement-demands"] /* Status Cards (for non-approved users) */
    .status-card {
        background: white;
        border-radius: 16px;
        padding: 30px 25px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
        text-align: center;
        margin-bottom: 25px;
        border-left: 4px solid transparent;
    }

    body[data-page="vendor-procurement-demands"] .status-card.info {
        border-left-color: #3b82f6;
    }

    body[data-page="vendor-procurement-demands"] .status-card.pending {
        border-left-color: #f59e0b;
    }

    body[data-page="vendor-procurement-demands"] .status-card .status-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 28px;
    }

    body[data-page="vendor-procurement-demands"] .status-card .status-icon.info {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="vendor-procurement-demands"] .status-card .status-icon.pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-procurement-demands"] .status-card h4 {
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 6px;
        font-size: 1.1rem;
    }

    body[data-page="vendor-procurement-demands"] .status-card p {
        color: #6b7280;
        font-size: 0.9rem;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    body[data-page="vendor-procurement-demands"] .status-card .btn-status {
        padding: 8px 30px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        font-size: 0.9rem;
    }

    body[data-page="vendor-procurement-demands"] .status-card .btn-status.primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
    }

    body[data-page="vendor-procurement-demands"] .status-card .btn-status.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
        color: white;
    }

    body[data-page="vendor-procurement-demands"] .status-badge-sm {
        display: inline-block;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    body[data-page="vendor-procurement-demands"] .status-badge-sm.warning {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-procurement-demands"] .demand-card {
        height: 100%;
        border: none;
        border-radius: 16px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        overflow: hidden;
    }

    body[data-page="vendor-procurement-demands"] .demand-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    body[data-page="vendor-procurement-demands"] .demand-card .card-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .card-title {
        font-weight: 700;
        color: #1a1a2e;
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .card-text {
        color: #6b7280;
        font-size: 0.9rem;
        line-height: 1.6;
        flex: 1;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .demand-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 12px 0;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .demand-meta .badge-type {
        background: linear-gradient(135deg, var(--primary-light-blue), #0288d1);
        color: white;
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .demand-meta .badge-status {
        background: #d1fae5;
        color: #065f46;
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .demand-date {
        font-size: 0.8rem;
        color: #9ca3af;
        margin-bottom: 15px;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .btn-submit {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        border: none;
        color: white;
        padding: 10px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
    }

    body[data-page="vendor-procurement-demands"] .demand-card .btn-submitted {
        background: #f3f4f6;
        color: #6b7280;
        border: none;
        padding: 10px;
        border-radius: 10px;
        font-weight: 600;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: default;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .btn-submitted i {
        color: var(--primary-green);
    }

    body[data-page="vendor-procurement-demands"] .demand-card .btn-submitted:hover {
        background: #f3f4f6;
        transform: none;
    }

    body[data-page="vendor-procurement-demands"] .alert-custom {
        border-radius: 12px;
        padding: 20px 24px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 14px;
        border: none;
    }

    body[data-page="vendor-procurement-demands"] .alert-custom.alert-info {
        background: #eff6ff;
        color: #1e40af;
        border-left: 4px solid #3b82f6;
    }

    body[data-page="vendor-procurement-demands"] .alert-custom.alert-info i {
        font-size: 1.5rem;
        color: #3b82f6;
    }

    body[data-page="vendor-procurement-demands"] .history-section {
        margin-top: 40px;
    }

    body[data-page="vendor-procurement-demands"] .history-section .card-header-custom {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        padding: 16px 24px;
        border: none;
    }

    body[data-page="vendor-procurement-demands"] .history-section .card-header-custom h5 {
        color: white;
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="vendor-procurement-demands"] .history-section .card-body-custom {
        padding: 0;
    }

    body[data-page="vendor-procurement-demands"] .history-table {
        margin: 0;
    }

    body[data-page="vendor-procurement-demands"] .history-table thead th {
        background: #f8fafc;
        color: #374151;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e5e7eb;
        padding: 14px 20px;
    }

    body[data-page="vendor-procurement-demands"] .history-table tbody td {
        padding: 14px 20px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
    }

    body[data-page="vendor-procurement-demands"] .history-table tbody tr {
        transition: all 0.2s ease;
    }

    body[data-page="vendor-procurement-demands"] .history-table tbody tr:hover {
        background-color: rgba(33, 146, 191, 0.04);
    }

    body[data-page="vendor-procurement-demands"] .history-table tbody tr:last-child td {
        border-bottom: none;
    }

    body[data-page="vendor-procurement-demands"] .badge-status {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="vendor-procurement-demands"] .badge-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    body[data-page="vendor-procurement-demands"] .badge-status.badge-approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="vendor-procurement-demands"] .badge-status.badge-approved::before {
        background: #10b981;
    }

    body[data-page="vendor-procurement-demands"] .badge-status.badge-pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-procurement-demands"] .badge-status.badge-pending::before {
        background: #f59e0b;
    }

    body[data-page="vendor-procurement-demands"] .badge-status.badge-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="vendor-procurement-demands"] .badge-status.badge-rejected::before {
        background: #ef4444;
    }

    body[data-page="vendor-procurement-demands"] .amount-display {
        font-weight: 700;
    }

    body[data-page="vendor-procurement-demands"] .amount-display.approved {
        color: var(--primary-green);
    }

    body[data-page="vendor-procurement-demands"] .amount-display.pending {
        color: var(--primary-orange);
    }

    body[data-page="vendor-procurement-demands"] .amount-display.rejected {
        color: var(--primary-red);
    }

    body[data-page="vendor-procurement-demands"] .no-data {
        text-align: center;
        padding: 40px 20px;
    }

    body[data-page="vendor-procurement-demands"] .no-data i {
        font-size: 3.5rem;
        color: #d1d5db;
        margin-bottom: 16px;
    }

    body[data-page="vendor-procurement-demands"] .no-data h5 {
        color: #6b7280;
        font-weight: 600;
    }

    body[data-page="vendor-procurement-demands"] .no-data p {
        color: #9ca3af;
    }

    body[data-page="vendor-procurement-demands"] .empty-state {
        padding: 60px 20px;
        text-align: center;
    }

    body[data-page="vendor-procurement-demands"] .empty-state i {
        font-size: 4rem;
        color: #d1d5db;
        margin-bottom: 20px;
    }

    body[data-page="vendor-procurement-demands"] .empty-state h5 {
        color: #6b7280;
        font-weight: 600;
    }

    body[data-page="vendor-procurement-demands"] .empty-state p {
        color: #9ca3af;
    }

    @media (max-width: 768px) {
        body[data-page="vendor-procurement-demands"] .demand-card .card-body {
            padding: 20px;
        }

        body[data-page="vendor-procurement-demands"] .history-table thead th,
        body[data-page="vendor-procurement-demands"] .history-table tbody td {
            padding: 10px 14px;
            font-size: 0.85rem;
        }

        body[data-page="vendor-procurement-demands"] .status-card {
            padding: 20px 15px;
        }

        body[data-page="vendor-procurement-demands"] .status-card .status-icon {
            width: 50px;
            height: 50px;
            font-size: 24px;
        }

        body[data-page="vendor-procurement-demands"] .status-card h4 {
            font-size: 1rem;
        }

        body[data-page="vendor-procurement-demands"] .status-card p {
            font-size: 0.85rem;
        }
    }

    body[data-page="vendor-procurement-demands"] .demand-card .btn-outline-primary {
        background: transparent;
        border: 2px solid var(--primary-blue);
        color: var(--primary-blue);
        transition: all 0.3s ease;
        padding: 10px;
        border-radius: 10px;
        font-weight: 600;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .btn-outline-primary:hover {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
        border-color: transparent;
    }

    body[data-page="vendor-procurement-demands"] .demand-card .btn-outline-primary i {
        margin-right: 4px;
    }

/* ==================== PAGE: vendor/submit_quotation.php ==================== */
body[data-page="vendor-submit-quotation"] .submit-container {
        max-width: 800px;
        margin: 0 auto;
    }

    body[data-page="vendor-submit-quotation"] .form-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    body[data-page="vendor-submit-quotation"] .form-card .card-header-custom {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        padding: 20px 30px;
        border-bottom: none;
    }

    body[data-page="vendor-submit-quotation"] .form-card .card-header-custom h4 {
        color: white;
        margin: 0;
        font-weight: 700;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="vendor-submit-quotation"] .form-card .card-header-custom h4 i {
        font-size: 1.5rem;
    }

    body[data-page="vendor-submit-quotation"] .form-card .card-body-custom {
        padding: 30px;
    }

    body[data-page="vendor-submit-quotation"] .demand-info-box {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px 24px;
        margin-bottom: 28px;
        border-left: 4px solid var(--primary-light-blue);
    }

    body[data-page="vendor-submit-quotation"] .demand-info-box .demand-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 8px;
    }

    body[data-page="vendor-submit-quotation"] .demand-info-box .demand-description {
        color: #6b7280;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    body[data-page="vendor-submit-quotation"] .demand-info-box .demand-meta {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        font-size: 0.85rem;
    }

    body[data-page="vendor-submit-quotation"] .demand-info-box .demand-meta .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #6b7280;
    }

    body[data-page="vendor-submit-quotation"] .demand-info-box .demand-meta .meta-item .badge-type {
        background: linear-gradient(135deg, var(--primary-light-blue), #0288d1);
        color: white;
        padding: 2px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom {
        margin-bottom: 24px;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 6px;
        display: block;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom label .required {
        color: var(--primary-red);
        margin-left: 4px;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom .form-control {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: #fafafa;
        width: 100%;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom .form-control:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
        background: white;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom .form-control::placeholder {
        color: #9ca3af;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom textarea.form-control {
        resize: vertical;
        min-height: 120px;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom .input-group-prepend {
        position: relative;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom .input-group-prepend .currency-symbol {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
        font-weight: 700;
        font-size: 1.1rem;
        z-index: 1;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom .input-group-prepend .form-control {
        padding-left: 36px;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom .form-hint {
        font-size: 0.8rem;
        color: #6b7280;
        margin-top: 4px;
    }

    body[data-page="vendor-submit-quotation"] .form-group-custom .form-hint i {
        margin-right: 4px;
    }

    body[data-page="vendor-submit-quotation"] /* File Upload Styles */
    .file-upload-wrapper {
        position: relative;
        border: 2px dashed #e5e7eb;
        border-radius: 12px;
        padding: 30px 20px;
        text-align: center;
        transition: all 0.3s ease;
        background: #fafafa;
        cursor: pointer;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper:hover {
        border-color: var(--primary-light-blue);
        background: #f0f4ff;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper.dragover {
        border-color: var(--primary-light-blue);
        background: #e8f0fe;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .upload-icon {
        font-size: 2.5rem;
        color: #9ca3af;
        margin-bottom: 10px;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .upload-text {
        font-weight: 600;
        color: #374151;
        font-size: 0.95rem;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .upload-subtext {
        font-size: 0.8rem;
        color: #9ca3af;
        margin-top: 4px;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview {
        display: none;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        margin-top: 15px;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview .file-icon {
        font-size: 1.5rem;
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview .file-info {
        flex: 1;
        text-align: left;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview .file-info .file-name {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.85rem;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview .file-info .file-size {
        font-size: 0.75rem;
        color: #9ca3af;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview .file-remove {
        color: #ef4444;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background 0.3s ease;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview .file-remove:hover {
        background: #fee2e2;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview.has-file {
        display: flex;
    }

    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview.has-file ~ .upload-text,
    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview.has-file ~ .upload-subtext,
    body[data-page="vendor-submit-quotation"] .file-upload-wrapper .file-preview.has-file ~ .upload-icon {
        display: none;
    }

    body[data-page="vendor-submit-quotation"] .btn-group-custom {
        display: flex;
        gap: 12px;
        margin-top: 8px;
    }

    body[data-page="vendor-submit-quotation"] .btn-group-custom .btn {
        padding: 12px 30px;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    body[data-page="vendor-submit-quotation"] .btn-group-custom .btn-primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        border: none;
        color: white;
        flex: 1;
    }

    body[data-page="vendor-submit-quotation"] .btn-group-custom .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
    }

    body[data-page="vendor-submit-quotation"] .btn-group-custom .btn-outline-secondary {
        border: 2px solid #e5e7eb;
        color: #6b7280;
        background: transparent;
        flex: 0 0 auto;
    }

    body[data-page="vendor-submit-quotation"] .btn-group-custom .btn-outline-secondary:hover {
        background: #f8fafc;
        border-color: #d1d5db;
    }

    body[data-page="vendor-submit-quotation"] .alert-custom {
        border-radius: 12px;
        padding: 14px 20px;
        font-weight: 500;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: none;
    }

    body[data-page="vendor-submit-quotation"] .alert-custom.alert-success {
        background: #f0fdf4;
        color: #166534;
        border-left: 4px solid #22c55e;
    }

    body[data-page="vendor-submit-quotation"] .alert-custom.alert-danger {
        background: #fef2f2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    body[data-page="vendor-submit-quotation"] .alert-custom i {
        font-size: 1.2rem;
    }

    body[data-page="vendor-submit-quotation"] .success-animation {
        text-align: center;
        padding: 30px 0;
    }

    body[data-page="vendor-submit-quotation"] .success-animation .success-icon {
        width: 90px;
        height: 90px;
        background: #f0fdf4;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 45px;
        color: #16a34a;
        animation: pulse 1s ease-in-out;
    }

    @keyframes pulse {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    body[data-page="vendor-submit-quotation"] .success-animation .success-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 8px;
    }

    body[data-page="vendor-submit-quotation"] .success-animation .success-message {
        color: #6b7280;
        font-size: 1rem;
        margin-bottom: 25px;
    }

    body[data-page="vendor-submit-quotation"] .success-animation .btn-group-custom {
        justify-content: center;
    }

    body[data-page="vendor-submit-quotation"] .success-animation .btn-group-custom .btn {
        flex: 0 0 auto;
        padding: 10px 30px;
    }

    body[data-page="vendor-submit-quotation"] .success-animation .btn-group-custom .btn-primary {
        background: linear-gradient(135deg, var(--primary-green), #43a047);
    }

    body[data-page="vendor-submit-quotation"] .success-animation .btn-group-custom .btn-primary:hover {
        box-shadow: 0 8px 25px rgba(100, 191, 86, 0.3);
    }

    body[data-page="vendor-submit-quotation"] .amount-preview {
        background: #f0fdf4;
        border: 2px dashed #86efac;
        border-radius: 12px;
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    body[data-page="vendor-submit-quotation"] .amount-preview .label {
        font-weight: 600;
        color: #374151;
    }

    body[data-page="vendor-submit-quotation"] .amount-preview .value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-green);
    }

    @media (max-width: 768px) {
        body[data-page="vendor-submit-quotation"] .form-card .card-body-custom {
            padding: 20px;
        }

        body[data-page="vendor-submit-quotation"] .form-card .card-header-custom {
            padding: 16px 20px;
        }

        body[data-page="vendor-submit-quotation"] .btn-group-custom {
            flex-direction: column;
        }

        body[data-page="vendor-submit-quotation"] .btn-group-custom .btn {
            width: 100%;
        }

        body[data-page="vendor-submit-quotation"] .demand-info-box {
            padding: 16px;
        }

        body[data-page="vendor-submit-quotation"] .amount-preview {
            flex-direction: column;
            text-align: center;
            gap: 8px;
        }

        body[data-page="vendor-submit-quotation"] .file-upload-wrapper {
            padding: 20px 15px;
        }

        body[data-page="vendor-submit-quotation"] .file-upload-wrapper .upload-icon {
            font-size: 2rem;
        }
    }

/* ==================== PAGE: vendor/vendor_ledger.php ==================== */
body[data-page="vendor-vendor-ledger"] .submit-container {
        max-width: 800px;
        margin: 0 auto;
    }

    body[data-page="vendor-vendor-ledger"] .form-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    body[data-page="vendor-vendor-ledger"] .form-card .card-header-custom {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        padding: 20px 30px;
        border-bottom: none;
    }

    body[data-page="vendor-vendor-ledger"] .form-card .card-header-custom h4 {
        color: white;
        margin: 0;
        font-weight: 700;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="vendor-vendor-ledger"] .form-card .card-header-custom h4 i {
        font-size: 1.5rem;
    }

    body[data-page="vendor-vendor-ledger"] .form-card .card-body-custom {
        padding: 30px;
    }

    body[data-page="vendor-vendor-ledger"] .demand-info-box {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px 24px;
        margin-bottom: 28px;
        border-left: 4px solid var(--primary-light-blue);
    }

    body[data-page="vendor-vendor-ledger"] .demand-info-box .demand-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 8px;
    }

    body[data-page="vendor-vendor-ledger"] .demand-info-box .demand-description {
        color: #6b7280;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    body[data-page="vendor-vendor-ledger"] .demand-info-box .demand-meta {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        font-size: 0.85rem;
    }

    body[data-page="vendor-vendor-ledger"] .demand-info-box .demand-meta .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #6b7280;
    }

    body[data-page="vendor-vendor-ledger"] .demand-info-box .demand-meta .meta-item .badge-type {
        background: linear-gradient(135deg, var(--primary-light-blue), #0288d1);
        color: white;
        padding: 2px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom {
        margin-bottom: 24px;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom label {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 6px;
        display: block;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom label .required {
        color: var(--primary-red);
        margin-left: 4px;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom .form-control {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: #fafafa;
        width: 100%;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom .form-control:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 4px rgba(33, 146, 191, 0.1);
        background: white;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom .form-control::placeholder {
        color: #9ca3af;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom textarea.form-control {
        resize: vertical;
        min-height: 120px;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom .input-group-prepend {
        position: relative;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom .input-group-prepend .currency-symbol {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
        font-weight: 700;
        font-size: 1.1rem;
        z-index: 1;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom .input-group-prepend .form-control {
        padding-left: 36px;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom .form-hint {
        font-size: 0.8rem;
        color: #6b7280;
        margin-top: 4px;
    }

    body[data-page="vendor-vendor-ledger"] .form-group-custom .form-hint i {
        margin-right: 4px;
    }

    body[data-page="vendor-vendor-ledger"] /* File Upload Styles */
    .file-upload-wrapper {
        position: relative;
        border: 2px dashed #e5e7eb;
        border-radius: 12px;
        padding: 30px 20px;
        text-align: center;
        transition: all 0.3s ease;
        background: #fafafa;
        cursor: pointer;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper:hover {
        border-color: var(--primary-light-blue);
        background: #f0f4ff;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper.dragover {
        border-color: var(--primary-light-blue);
        background: #e8f0fe;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .upload-icon {
        font-size: 2.5rem;
        color: #9ca3af;
        margin-bottom: 10px;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .upload-text {
        font-weight: 600;
        color: #374151;
        font-size: 0.95rem;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .upload-subtext {
        font-size: 0.8rem;
        color: #9ca3af;
        margin-top: 4px;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview {
        display: none;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        margin-top: 15px;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview .file-icon {
        font-size: 1.5rem;
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview .file-info {
        flex: 1;
        text-align: left;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview .file-info .file-name {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.85rem;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview .file-info .file-size {
        font-size: 0.75rem;
        color: #9ca3af;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview .file-remove {
        color: #ef4444;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background 0.3s ease;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview .file-remove:hover {
        background: #fee2e2;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview.has-file {
        display: flex;
    }

    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview.has-file ~ .upload-text,
    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview.has-file ~ .upload-subtext,
    body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .file-preview.has-file ~ .upload-icon {
        display: none;
    }

    body[data-page="vendor-vendor-ledger"] .btn-group-custom {
        display: flex;
        gap: 12px;
        margin-top: 8px;
    }

    body[data-page="vendor-vendor-ledger"] .btn-group-custom .btn {
        padding: 12px 30px;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    body[data-page="vendor-vendor-ledger"] .btn-group-custom .btn-primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        border: none;
        color: white;
        flex: 1;
    }

    body[data-page="vendor-vendor-ledger"] .btn-group-custom .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(57, 66, 115, 0.3);
    }

    body[data-page="vendor-vendor-ledger"] .btn-group-custom .btn-outline-secondary {
        border: 2px solid #e5e7eb;
        color: #6b7280;
        background: transparent;
        flex: 0 0 auto;
    }

    body[data-page="vendor-vendor-ledger"] .btn-group-custom .btn-outline-secondary:hover {
        background: #f8fafc;
        border-color: #d1d5db;
    }

    body[data-page="vendor-vendor-ledger"] .alert-custom {
        border-radius: 12px;
        padding: 14px 20px;
        font-weight: 500;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: none;
    }

    body[data-page="vendor-vendor-ledger"] .alert-custom.alert-success {
        background: #f0fdf4;
        color: #166534;
        border-left: 4px solid #22c55e;
    }

    body[data-page="vendor-vendor-ledger"] .alert-custom.alert-danger {
        background: #fef2f2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    body[data-page="vendor-vendor-ledger"] .alert-custom i {
        font-size: 1.2rem;
    }

    body[data-page="vendor-vendor-ledger"] .success-animation {
        text-align: center;
        padding: 30px 0;
    }

    body[data-page="vendor-vendor-ledger"] .success-animation .success-icon {
        width: 90px;
        height: 90px;
        background: #f0fdf4;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 45px;
        color: #16a34a;
        animation: pulse 1s ease-in-out;
    }

    @keyframes pulse {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    body[data-page="vendor-vendor-ledger"] .success-animation .success-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 8px;
    }

    body[data-page="vendor-vendor-ledger"] .success-animation .success-message {
        color: #6b7280;
        font-size: 1rem;
        margin-bottom: 25px;
    }

    body[data-page="vendor-vendor-ledger"] .success-animation .btn-group-custom {
        justify-content: center;
    }

    body[data-page="vendor-vendor-ledger"] .success-animation .btn-group-custom .btn {
        flex: 0 0 auto;
        padding: 10px 30px;
    }

    body[data-page="vendor-vendor-ledger"] .success-animation .btn-group-custom .btn-primary {
        background: linear-gradient(135deg, var(--primary-green), #43a047);
    }

    body[data-page="vendor-vendor-ledger"] .success-animation .btn-group-custom .btn-primary:hover {
        box-shadow: 0 8px 25px rgba(100, 191, 86, 0.3);
    }

    body[data-page="vendor-vendor-ledger"] .amount-preview {
        background: #f0fdf4;
        border: 2px dashed #86efac;
        border-radius: 12px;
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    body[data-page="vendor-vendor-ledger"] .amount-preview .label {
        font-weight: 600;
        color: #374151;
    }

    body[data-page="vendor-vendor-ledger"] .amount-preview .value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-green);
    }

    @media (max-width: 768px) {
        body[data-page="vendor-vendor-ledger"] .form-card .card-body-custom {
            padding: 20px;
        }

        body[data-page="vendor-vendor-ledger"] .form-card .card-header-custom {
            padding: 16px 20px;
        }

        body[data-page="vendor-vendor-ledger"] .btn-group-custom {
            flex-direction: column;
        }

        body[data-page="vendor-vendor-ledger"] .btn-group-custom .btn {
            width: 100%;
        }

        body[data-page="vendor-vendor-ledger"] .demand-info-box {
            padding: 16px;
        }

        body[data-page="vendor-vendor-ledger"] .amount-preview {
            flex-direction: column;
            text-align: center;
            gap: 8px;
        }

        body[data-page="vendor-vendor-ledger"] .file-upload-wrapper {
            padding: 20px 15px;
        }

        body[data-page="vendor-vendor-ledger"] .file-upload-wrapper .upload-icon {
            font-size: 2rem;
        }
    }

/* ==================== PAGE: vendor/view_po_details.php ==================== */
body[data-page="vendor-view-po-details"] {
        --primary-blue: #1a237e;
        --primary-light-blue: #283593;
        --primary-orange: #f59e0b;
        --primary-red: #dc2626;
        --primary-green: #16a34a;
        --primary-purple: #7c3aed;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
        --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
        --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body[data-page="vendor-view-po-details"] .po-detail-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 16px;
    }

    body[data-page="vendor-view-po-details"] /* Header */
    .po-detail-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        padding: 32px 40px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        position: relative;
        overflow: hidden;
    }

    body[data-page="vendor-view-po-details"] .po-detail-header::before {
        content: '';
        position: absolute;
        top: -60%;
        right: -10%;
        width: 350px;
        height: 350px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
    }

    body[data-page="vendor-view-po-details"] .po-detail-header::after {
        content: '';
        position: absolute;
        bottom: -40%;
        left: 20%;
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.03);
        border-radius: 50%;
    }

    body[data-page="vendor-view-po-details"] .po-detail-header .header-left {
        position: relative;
        z-index: 1;
    }

    body[data-page="vendor-view-po-details"] .po-detail-header h4 {
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 1.5rem;
    }

    body[data-page="vendor-view-po-details"] .po-detail-header h4 i {
        font-size: 1.8rem;
        opacity: 0.9;
    }

    body[data-page="vendor-view-po-details"] .po-detail-header .header-meta {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 6px;
        flex-wrap: wrap;
        font-size: 0.9rem;
        opacity: 0.9;
    }

    body[data-page="vendor-view-po-details"] .po-detail-header .header-meta span {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="vendor-view-po-details"] .po-detail-header .header-right {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    body[data-page="vendor-view-po-details"] .po-status-large {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 28px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    }

    body[data-page="vendor-view-po-details"] .po-status-large .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        animation: pulse-dot 2s infinite;
    }

    @keyframes pulse-dot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.2); }
    }

    body[data-page="vendor-view-po-details"] .po-status-large.draft { background: rgba(243, 244, 246, 0.95); color: #374151; }
    body[data-page="vendor-view-po-details"] .po-status-large.draft .dot { background: #9ca3af; }
    body[data-page="vendor-view-po-details"] .po-status-large.sent { background: rgba(254, 243, 199, 0.95); color: #92400e; }
    body[data-page="vendor-view-po-details"] .po-status-large.sent .dot { background: #f59e0b; }
    body[data-page="vendor-view-po-details"] .po-status-large.approved { background: rgba(209, 250, 229, 0.95); color: #065f46; }
    body[data-page="vendor-view-po-details"] .po-status-large.approved .dot { background: #10b981; }
    body[data-page="vendor-view-po-details"] .po-status-large.completed { background: rgba(219, 234, 254, 0.95); color: #1e40af; }
    body[data-page="vendor-view-po-details"] .po-status-large.completed .dot { background: #3b82f6; }
    body[data-page="vendor-view-po-details"] .po-status-large.cancelled { background: rgba(254, 226, 226, 0.95); color: #991b1b; }
    body[data-page="vendor-view-po-details"] .po-status-large.cancelled .dot { background: #ef4444; }

    body[data-page="vendor-view-po-details"] /* Copy button */
    .btn-copy-po {
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 0.85rem;
        transition: var(--transition);
        cursor: pointer;
        backdrop-filter: blur(4px);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="vendor-view-po-details"] .btn-copy-po:hover {
        background: rgba(255,255,255,0.25);
        border-color: rgba(255,255,255,0.4);
        transform: translateY(-2px);
    }

    body[data-page="vendor-view-po-details"] /* Body */
    .po-detail-body {
        background: white;
        padding: 40px;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-md);
    }

    body[data-page="vendor-view-po-details"] /* Sections */
    .po-detail-section {
        margin-bottom: 32px;
        animation: fadeInUp 0.6s ease forwards;
        opacity: 0;
    }

    body[data-page="vendor-view-po-details"] .po-detail-section:nth-child(1) { animation-delay: 0.1s; }
    body[data-page="vendor-view-po-details"] .po-detail-section:nth-child(2) { animation-delay: 0.2s; }
    body[data-page="vendor-view-po-details"] .po-detail-section:nth-child(3) { animation-delay: 0.3s; }
    body[data-page="vendor-view-po-details"] .po-detail-section:nth-child(4) { animation-delay: 0.4s; }
    body[data-page="vendor-view-po-details"] .po-detail-section:nth-child(5) { animation-delay: 0.5s; }
    body[data-page="vendor-view-po-details"] .po-detail-section:nth-child(6) { animation-delay: 0.6s; }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    body[data-page="vendor-view-po-details"] .po-detail-section:last-child {
        margin-bottom: 0;
    }

    body[data-page="vendor-view-po-details"] .section-title {
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 1rem;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e7eb;
        display: flex;
        align-items: center;
        gap: 10px;
        letter-spacing: 0.3px;
    }

    body[data-page="vendor-view-po-details"] .section-title i {
        color: var(--primary-light-blue);
        font-size: 1.1rem;
        width: 24px;
        text-align: center;
    }

    body[data-page="vendor-view-po-details"] .section-title .section-badge {
        margin-left: auto;
        font-size: 0.7rem;
        padding: 4px 14px;
        border-radius: 50px;
        background: #e5e7eb;
        color: #6b7280;
        font-weight: 600;
    }

    body[data-page="vendor-view-po-details"] /* Grid */
    .po-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item {
        background: #f8fafc;
        padding: 16px 20px;
        border-radius: var(--radius-sm);
        border-left: 4px solid var(--primary-light-blue);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, transparent 50%, rgba(40, 53, 147, 0.03));
        border-radius: 0 0 0 60px;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
        background: #f1f5f9;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item .label {
        font-size: 0.7rem;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item .label i {
        font-size: 0.7rem;
        opacity: 0.6;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item .value {
        font-size: 0.95rem;
        font-weight: 600;
        color: #1a1a2e;
        word-break: break-word;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item .value .badge {
        font-size: 0.75rem;
        padding: 4px 14px;
        border-radius: 50px;
        font-weight: 600;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item .value .amount-highlight {
        color: var(--primary-green);
        font-size: 1.3rem;
        font-weight: 700;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item .value .amount-highlight .currency {
        font-size: 0.9rem;
        opacity: 0.7;
        font-weight: 600;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item .value small {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 400;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item .value .text-muted {
        color: #6b7280;
    }

    body[data-page="vendor-view-po-details"] .po-detail-item.full-width {
        grid-column: 1 / -1;
    }

    body[data-page="vendor-view-po-details"] /* Color variants */
    .po-detail-item.blue { border-left-color: #3b82f6; }
    body[data-page="vendor-view-po-details"] .po-detail-item.green { border-left-color: var(--primary-green); }
    body[data-page="vendor-view-po-details"] .po-detail-item.orange { border-left-color: var(--primary-orange); }
    body[data-page="vendor-view-po-details"] .po-detail-item.purple { border-left-color: var(--primary-purple); }
    body[data-page="vendor-view-po-details"] .po-detail-item.red { border-left-color: var(--primary-red); }

    body[data-page="vendor-view-po-details"] /* Description box */
    .description-box {
        background: #f8fafc;
        padding: 20px 24px;
        border-radius: var(--radius-sm);
        border-left: 4px solid var(--primary-orange);
        line-height: 1.7;
        color: #1a1a2e;
    }

    body[data-page="vendor-view-po-details"] .description-box .value {
        font-size: 0.95rem;
    }

    body[data-page="vendor-view-po-details"] /* Timeline */
    .tracking-timeline {
        margin-top: 4px;
        padding: 24px 28px;
        background: #f8fafc;
        border-radius: var(--radius-md);
        border: 1px solid #e5e7eb;
        position: relative;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-title {
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 0.9rem;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-title i {
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 10px 0;
        border-bottom: 1px solid #e5e7eb;
        position: relative;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item:last-child {
        border-bottom: none;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 40px;
        width: 2px;
        height: calc(100% - 30px);
        background: #e5e7eb;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item:last-child::before {
        display: none;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.75rem;
        flex-shrink: 0;
        z-index: 1;
        transition: var(--transition);
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step.completed {
        background: #d1fae5;
        color: #065f46;
        border: 2px solid #34d399;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step.active {
        background: #fef3c7;
        color: #92400e;
        border: 2px solid #f59e0b;
        animation: pulse-step 2s infinite;
    }

    @keyframes pulse-step {
        0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
        50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step.pending {
        background: #e5e7eb;
        color: #6b7280;
        border: 2px solid #d1d5db;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step.cancelled-step {
        background: #fee2e2;
        color: #991b1b;
        border: 2px solid #ef4444;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step-info {
        flex: 1;
        padding-top: 4px;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step-info .step-name {
        font-weight: 600;
        color: #1a1a2e;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step-info .step-date {
        font-size: 0.75rem;
        color: #9ca3af;
        margin-top: 2px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step-info .step-date i {
        font-size: 0.7rem;
    }

    body[data-page="vendor-view-po-details"] /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 14px;
        margin-top: 32px;
        flex-wrap: wrap;
        padding-top: 28px;
        border-top: 2px solid #f1f5f9;
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn {
        padding: 11px 32px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 0.9rem;
        border: none;
        cursor: pointer;
        text-decoration: none;
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn-back {
        background: #f1f5f9;
        color: #475569;
        border: 2px solid #e2e8f0;
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn-back:hover {
        background: #e2e8f0;
        border-color: #cbd5e1;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn-print {
        background: #475569;
        color: white;
        border: 2px solid #475569;
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn-print:hover {
        background: #334155;
        border-color: #334155;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn-download {
        background: var(--primary-blue);
        color: white;
        border: 2px solid var(--primary-blue);
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn-download:hover {
        background: var(--primary-light-blue);
        border-color: var(--primary-light-blue);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn-share {
        background: #7c3aed;
        color: white;
        border: 2px solid #7c3aed;
    }

    body[data-page="vendor-view-po-details"] .action-buttons .btn-share:hover {
        background: #6d28d9;
        border-color: #6d28d9;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="vendor-view-po-details"] /* Challan buttons */
    .challan-buttons {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan {
        padding: 10px 24px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 0.85rem;
        border: none;
        cursor: pointer;
        text-decoration: none;
        background: white;
        border: 2px solid #e5e7eb;
        color: #1a1a2e;
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan i {
        font-size: 1rem;
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan.btn-invoice {
        border-color: var(--primary-blue);
        color: var(--primary-blue);
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan.btn-invoice:hover {
        background: var(--primary-blue);
        color: white;
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan.btn-delivery {
        border-color: var(--primary-orange);
        color: var(--primary-orange);
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan.btn-delivery:hover {
        background: var(--primary-orange);
        color: white;
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan.btn-view {
        border-color: var(--primary-green);
        color: var(--primary-green);
    }

    body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan.btn-view:hover {
        background: var(--primary-green);
        color: white;
    }

    /* Responsive */
    @media (max-width: 992px) {
        body[data-page="vendor-view-po-details"] .po-detail-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
    }

    @media (max-width: 768px) {
        body[data-page="vendor-view-po-details"] .po-detail-header {
            padding: 24px 20px;
            flex-direction: column;
            text-align: center;
        }

        body[data-page="vendor-view-po-details"] .po-detail-header .header-left {
            width: 100%;
        }

        body[data-page="vendor-view-po-details"] .po-detail-header h4 {
            font-size: 1.2rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        body[data-page="vendor-view-po-details"] .po-detail-header .header-meta {
            justify-content: center;
            font-size: 0.8rem;
            gap: 12px;
        }

        body[data-page="vendor-view-po-details"] .po-detail-header .header-right {
            width: 100%;
            justify-content: center;
        }

        body[data-page="vendor-view-po-details"] .po-detail-body {
            padding: 20px;
        }

        body[data-page="vendor-view-po-details"] .po-detail-grid {
            grid-template-columns: 1fr;
        }

        body[data-page="vendor-view-po-details"] .po-detail-item {
            padding: 14px 16px;
        }

        body[data-page="vendor-view-po-details"] .po-detail-item .value .amount-highlight {
            font-size: 1.1rem;
        }

        body[data-page="vendor-view-po-details"] .tracking-timeline {
            padding: 16px 18px;
        }

        body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item {
            padding: 8px 0;
        }

        body[data-page="vendor-view-po-details"] .tracking-timeline .timeline-item .step {
            width: 28px;
            height: 28px;
            font-size: 0.65rem;
        }

        body[data-page="vendor-view-po-details"] .action-buttons {
            flex-direction: column;
        }

        body[data-page="vendor-view-po-details"] .action-buttons .btn {
            width: 100%;
            justify-content: center;
        }

        body[data-page="vendor-view-po-details"] .section-title {
            font-size: 0.9rem;
        }

        body[data-page="vendor-view-po-details"] .challan-buttons {
            flex-direction: column;
            width: 100%;
        }

        body[data-page="vendor-view-po-details"] .challan-buttons .btn-challan {
            width: 100%;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        body[data-page="vendor-view-po-details"] .po-detail-header h4 {
            font-size: 1rem;
        }

        body[data-page="vendor-view-po-details"] .po-status-large {
            font-size: 0.8rem;
            padding: 8px 20px;
        }

        body[data-page="vendor-view-po-details"] .po-detail-body {
            padding: 16px;
        }
    }

    /* Print Styles */
    @media print {
        body[data-page="vendor-view-po-details"] .action-buttons {
            display: none !important;
        }

        body[data-page="vendor-view-po-details"] .challan-buttons {
            display: none !important;
        }

        body[data-page="vendor-view-po-details"] .po-detail-header {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            padding: 20px;
        }

        body[data-page="vendor-view-po-details"] .po-detail-body {
            box-shadow: none !important;
            border: 1px solid #e5e7eb;
        }

        body[data-page="vendor-view-po-details"] .po-detail-item {
            break-inside: avoid;
        }

        body[data-page="vendor-view-po-details"] .tracking-timeline {
            break-inside: avoid;
        }

        body[data-page="vendor-view-po-details"] .btn-copy-po {
            display: none !important;
        }
    }

    body[data-page="vendor-view-po-details"] /* Copy notification */
    .copy-notification {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: #1a1a2e;
        color: white;
        padding: 14px 24px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        box-shadow: var(--shadow-lg);
        transform: translateY(100px);
        opacity: 0;
        transition: var(--transition);
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="vendor-view-po-details"] .copy-notification.show {
        transform: translateY(0);
        opacity: 1;
    }

    body[data-page="vendor-view-po-details"] .copy-notification i {
        color: #34d399;
        font-size: 1.2rem;
    }

    body[data-page="vendor-view-po-details"] /* Modal styles for upload */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2000;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(4px);
    }

    body[data-page="vendor-view-po-details"] .modal-overlay.active {
        display: flex;
    }

    body[data-page="vendor-view-po-details"] .modal-content {
        background: white;
        padding: 40px;
        border-radius: var(--radius-lg);
        max-width: 500px;
        width: 90%;
        box-shadow: var(--shadow-lg);
        animation: modalSlide 0.3s ease;
    }

    @keyframes modalSlide {
        from {
            transform: translateY(-30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    body[data-page="vendor-view-po-details"] .modal-content h3 {
        margin-top: 0;
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="vendor-view-po-details"] .modal-content h3 i {
        font-size: 1.4rem;
    }

    body[data-page="vendor-view-po-details"] .modal-content .form-group {
        margin-top: 20px;
    }

    body[data-page="vendor-view-po-details"] .modal-content .form-group label {
        font-weight: 600;
        display: block;
        margin-bottom: 8px;
        color: #1a1a2e;
    }

    body[data-page="vendor-view-po-details"] .modal-content .form-group input[type="file"] {
        width: 100%;
        padding: 10px;
        border: 2px dashed #e5e7eb;
        border-radius: var(--radius-sm);
        transition: var(--transition);
        cursor: pointer;
    }

    body[data-page="vendor-view-po-details"] .modal-content .form-group input[type="file"]:hover {
        border-color: var(--primary-blue);
    }

    body[data-page="vendor-view-po-details"] .modal-actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
        justify-content: flex-end;
    }

    body[data-page="vendor-view-po-details"] .modal-actions .btn {
        padding: 10px 24px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        border: none;
        cursor: pointer;
        font-size: 0.9rem;
    }

    body[data-page="vendor-view-po-details"] .modal-actions .btn-cancel {
        background: #f1f5f9;
        color: #475569;
        border: 2px solid #e2e8f0;
    }

    body[data-page="vendor-view-po-details"] .modal-actions .btn-cancel:hover {
        background: #e2e8f0;
    }

    body[data-page="vendor-view-po-details"] .modal-actions .btn-upload {
        background: var(--primary-blue);
        color: white;
        border: 2px solid var(--primary-blue);
    }

    body[data-page="vendor-view-po-details"] .modal-actions .btn-upload:hover {
        background: var(--primary-light-blue);
        border-color: var(--primary-light-blue);
    }

/* ==================== PAGE: vendor/view_purchase_orders.php ==================== */
body[data-page="vendor-view-purchase-orders"] .po-container {
        max-width: 100%;
    }

    body[data-page="vendor-view-purchase-orders"] .page-header {
        margin-bottom: 25px;
    }

    body[data-page="vendor-view-purchase-orders"] .page-header h4 {
        font-weight: 700;
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="vendor-view-purchase-orders"] .page-header h4 i {
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-view-purchase-orders"] /* Status Cards */
    .status-card {
        background: white;
        border-radius: 16px;
        padding: 30px 25px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
        text-align: center;
        margin-bottom: 25px;
        border-left: 4px solid transparent;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card.info {
        border-left-color: #3b82f6;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card.pending {
        border-left-color: #f59e0b;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card .status-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 28px;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card .status-icon.info {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card .status-icon.pending {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card h4 {
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 6px;
        font-size: 1.1rem;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card p {
        color: #6b7280;
        font-size: 0.9rem;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card .btn-status {
        padding: 8px 30px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        font-size: 0.9rem;
    }

    body[data-page="vendor-view-purchase-orders"] .status-card .btn-status.primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-blue));
        color: white;
        border: none;
    }

    body[data-page="vendor-view-purchase-orders"] .status-badge-sm {
        display: inline-block;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    body[data-page="vendor-view-purchase-orders"] .status-badge-sm.warning {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-view-purchase-orders"] /* Statistics Cards */
    .stat-box {
        background: white;
        border-radius: 12px;
        padding: 18px 20px;
        text-align: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        height: 100%;
        border-bottom: 3px solid transparent;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box .stat-label {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 500;
        margin-top: 2px;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box .stat-icon {
        font-size: 1.4rem;
        margin-bottom: 4px;
        opacity: 0.7;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.total {
        border-bottom-color: var(--primary-blue);
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.total .stat-number {
        color: var(--primary-blue);
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.draft {
        border-bottom-color: #9ca3af;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.draft .stat-number {
        color: #6b7280;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.sent {
        border-bottom-color: #f59e0b;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.sent .stat-number {
        color: #d97706;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.approved {
        border-bottom-color: #10b981;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.approved .stat-number {
        color: #059669;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.completed {
        border-bottom-color: var(--primary-green);
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.completed .stat-number {
        color: var(--primary-green);
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.cancelled {
        border-bottom-color: #ef4444;
    }

    body[data-page="vendor-view-purchase-orders"] .stat-box.cancelled .stat-number {
        color: #dc2626;
    }

    body[data-page="vendor-view-purchase-orders"] /* Main Card */
    .main-card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    body[data-page="vendor-view-purchase-orders"] .main-card .card-header-custom {
        background: white;
        padding: 18px 24px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    body[data-page="vendor-view-purchase-orders"] .main-card .card-header-custom h5 {
        margin: 0;
        font-weight: 700;
        color: var(--primary-blue);
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body[data-page="vendor-view-purchase-orders"] .main-card .card-header-custom h5 i {
        color: var(--primary-light-blue);
    }

    body[data-page="vendor-view-purchase-orders"] .table-po {
        margin: 0;
    }

    body[data-page="vendor-view-purchase-orders"] .table-po thead th {
        background: #f8fafc;
        color: #374151;
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: 2px solid #e5e7eb;
        padding: 14px 16px;
        white-space: nowrap;
    }

    body[data-page="vendor-view-purchase-orders"] .table-po tbody td {
        padding: 12px 16px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        font-size: 0.9rem;
    }

    body[data-page="vendor-view-purchase-orders"] .table-po tbody tr:hover {
        background-color: rgba(33, 146, 191, 0.03);
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status {
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.draft {
        background: #f3f4f6;
        color: #6b7280;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.draft .dot {
        background: #9ca3af;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.sent {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.sent .dot {
        background: #f59e0b;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.approved {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.approved .dot {
        background: #10b981;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.completed {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.completed .dot {
        background: #3b82f6;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.cancelled {
        background: #fee2e2;
        color: #991b1b;
    }

    body[data-page="vendor-view-purchase-orders"] .badge-po-status.cancelled .dot {
        background: #ef4444;
    }

    body[data-page="vendor-view-purchase-orders"] .po-number {
        font-weight: 700;
        color: var(--primary-blue);
        font-family: monospace;
        letter-spacing: 0.5px;
    }

    body[data-page="vendor-view-purchase-orders"] .quotation-ref {
        font-size: 0.8rem;
        color: #6b7280;
    }

    body[data-page="vendor-view-purchase-orders"] .no-data {
        text-align: center;
        padding: 60px 20px;
    }

    body[data-page="vendor-view-purchase-orders"] .no-data i {
        font-size: 4rem;
        color: #d1d5db;
        margin-bottom: 20px;
    }

    body[data-page="vendor-view-purchase-orders"] .no-data h5 {
        color: #6b7280;
        font-weight: 600;
    }

    body[data-page="vendor-view-purchase-orders"] .no-data p {
        color: #9ca3af;
    }

    body[data-page="vendor-view-purchase-orders"] .btn-view-po {
        background: #eff6ff;
        color: #1e40af;
        border: none;
        padding: 6px 14px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    body[data-page="vendor-view-purchase-orders"] .btn-view-po:hover {
        background: #dbeafe;
        transform: translateY(-1px);
        color: #1e40af;
    }

    body[data-page="vendor-view-purchase-orders"] /* Challan Upload Buttons in Table */
    .btn-challan-upload {
        background: #f3f4f6;
        color: #374151;
        border: none;
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.7rem;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }

    body[data-page="vendor-view-purchase-orders"] .btn-challan-upload:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    body[data-page="vendor-view-purchase-orders"] .btn-challan-upload.btn-invoice {
        background: #dbeafe;
        color: #1e40af;
    }

    body[data-page="vendor-view-purchase-orders"] .btn-challan-upload.btn-invoice:hover {
        background: #bfdbfe;
    }

    body[data-page="vendor-view-purchase-orders"] .btn-challan-upload.btn-delivery {
        background: #fef3c7;
        color: #92400e;
    }

    body[data-page="vendor-view-purchase-orders"] .btn-challan-upload.btn-delivery:hover {
        background: #fde68a;
    }

    body[data-page="vendor-view-purchase-orders"] .btn-challan-upload.btn-view {
        background: #d1fae5;
        color: #065f46;
    }

    body[data-page="vendor-view-purchase-orders"] .btn-challan-upload.btn-view:hover {
        background: #a7f3d0;
    }

    body[data-page="vendor-view-purchase-orders"] .challan-buttons-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body[data-page="vendor-view-purchase-orders"] .challan-buttons-group .btn-challan-upload {
        width: 100%;
        justify-content: center;
    }

    body[data-page="vendor-view-purchase-orders"] /* DataTables Overrides */
    .dataTables_wrapper .dataTables_filter input {
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 0.85rem;
        transition: all 0.3s ease;
        background: #fafafa;
        margin-left: 6px;
    }

    body[data-page="vendor-view-purchase-orders"] .dataTables_wrapper .dataTables_filter input:focus {
        border-color: var(--primary-light-blue);
        box-shadow: 0 0 0 3px rgba(33, 146, 191, 0.08);
        background: white;
        outline: none;
    }

    body[data-page="vendor-view-purchase-orders"] /* Modal styles for upload */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2000;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(4px);
    }

    body[data-page="vendor-view-purchase-orders"] .modal-overlay.active {
        display: flex;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-content {
        background: white;
        padding: 40px;
        border-radius: var(--radius-lg);
        max-width: 500px;
        width: 90%;
        box-shadow: var(--shadow-lg);
        animation: modalSlide 0.3s ease;
    }

    @keyframes modalSlide {
        from {
            transform: translateY(-30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    body[data-page="vendor-view-purchase-orders"] .modal-content h3 {
        margin-top: 0;
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-content h3 i {
        font-size: 1.4rem;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-content .form-group {
        margin-top: 20px;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-content .form-group label {
        font-weight: 600;
        display: block;
        margin-bottom: 8px;
        color: #1a1a2e;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-content .form-group input[type="file"] {
        width: 100%;
        padding: 10px;
        border: 2px dashed #e5e7eb;
        border-radius: var(--radius-sm);
        transition: var(--transition);
        cursor: pointer;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-content .form-group input[type="file"]:hover {
        border-color: var(--primary-blue);
    }

    body[data-page="vendor-view-purchase-orders"] .modal-actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
        justify-content: flex-end;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-actions .btn {
        padding: 10px 24px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: var(--transition);
        border: none;
        cursor: pointer;
        font-size: 0.9rem;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-actions .btn-cancel {
        background: #f1f5f9;
        color: #475569;
        border: 2px solid #e2e8f0;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-actions .btn-cancel:hover {
        background: #e2e8f0;
    }

    body[data-page="vendor-view-purchase-orders"] .modal-actions .btn-upload {
        background: var(--primary-blue);
        color: white;
        border: 2px solid var(--primary-blue);
    }

    body[data-page="vendor-view-purchase-orders"] .modal-actions .btn-upload:hover {
        background: var(--primary-light-blue);
        border-color: var(--primary-light-blue);
    }

    @media (max-width: 768px) {
        body[data-page="vendor-view-purchase-orders"] .stat-box {
            padding: 14px 12px;
        }

        body[data-page="vendor-view-purchase-orders"] .stat-box .stat-number {
            font-size: 1.4rem;
        }

        body[data-page="vendor-view-purchase-orders"] .table-po thead th,
        body[data-page="vendor-view-purchase-orders"] .table-po tbody td {
            padding: 8px 12px;
            font-size: 0.8rem;
        }

        body[data-page="vendor-view-purchase-orders"] .status-card {
            padding: 20px 15px;
        }

        body[data-page="vendor-view-purchase-orders"] .status-card .status-icon {
            width: 50px;
            height: 50px;
            font-size: 24px;
        }

        body[data-page="vendor-view-purchase-orders"] .status-card h4 {
            font-size: 1rem;
        }

        body[data-page="vendor-view-purchase-orders"] .status-card p {
            font-size: 0.85rem;
        }
    }

/* ==================== APPLICATION-WIDE RESPONSIVE SAFEGUARDS ==================== */
html, body { width: 100%; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.wrapper, #content, .main-content, main { min-width: 0; max-width: 100%; }
.row > * { min-width: 0; }
.table-responsive { overscroll-behavior-inline: contain; }
.card-body, .modal-body, .offcanvas-body { min-width: 0; }
pre, code { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
    #content, .main-content { width: 100%; max-width: 100%; }
    .page-header, .content-header, .card-header { gap: .75rem; flex-wrap: wrap; }
    .page-header > *, .content-header > *, .card-header > * { min-width: 0; }
}

@media (max-width: 767.98px) {
    .container, .container-fluid { width: 100%; padding-inline: 12px; }
    .row { --bs-gutter-x: 1rem; }
    .d-flex { min-width: 0; }
    .table-responsive > .table { min-width: 680px; }
    .table-responsive .btn { width: auto !important; }
    input, select, textarea { max-width: 100%; }
    .modal-dialog { width: auto; max-width: calc(100% - 20px); }
    .dropdown-menu { max-width: calc(100vw - 24px); }
}

@media (max-width: 575.98px) {
    .container, .container-fluid { padding-inline: 10px; }
    h1 { font-size: clamp(1.35rem, 7vw, 1.8rem); }
    h2 { font-size: clamp(1.2rem, 6vw, 1.55rem); }
    .card-header, .card-body, .card-footer { padding-inline: .85rem; }
    .pagination { flex-wrap: wrap; gap: .25rem; }
}