/* =============================================
   WFP Index - UI/UX Improvements
   ============================================= */

/* Override conflicting custom.css rules */
.content-body-request.wfp-index {
    min-height: auto;
}

.content-body-request.wfp-index > .uk-width-1-1 > .content-table {
    background: #edf3fd;
    padding-bottom: 0;
    border-radius: 10px;
    overflow: hidden;
}

.content-body-request.wfp-index > .uk-width-1-1 > .content-table .uk-table thead > tr > th {
    background: #003876 !important;
}

.content-body-request.wfp-index > .uk-width-1-1 > .content-table .uk-table tr h4 {
    color: #ffffff !important;
}

.content-body-request.wfp-index .content-table .uk-overflow-auto {
    max-height: none !important;
}

/* Header */
.wfp-header {
    flex-wrap: wrap;
    gap: 12px;
}

.wfp-title {
    font-size: 22px;
    font-weight: 700;
    color: #003876;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wfp-title i {
    color: #003876;
}

.wfp-header-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7c93;
    margin-top: 4px;
    padding-left: 32px;
}

.wfp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #003876;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    min-width: 28px;
}

/* Buttons */
.wfp-btn-primary {
    background: #003876 !important;
    color: #ffffff !important;
    border: 2px solid #003876 !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 20px;
    transition: all 0.2s ease;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wfp-btn-primary:hover {
    background: #002a5c !important;
    border-color: #002a5c !important;
    color: #ffffff !important;
}

.wfp-btn-outline {
    background: transparent !important;
    color: #003876 !important;
    border: 2px solid #003876 !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 20px;
    transition: all 0.2s ease;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wfp-btn-outline:hover {
    background: #003876 !important;
    color: #ffffff !important;
}

.wfp-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* Filters */
.wfp-filters {
    background: #f4f8fd;
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid #dce6f2;
}

.wfp-filter-form {
    width: 100%;
}

.wfp-input-group {
    position: relative;
}

.wfp-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8899aa;
    font-size: 13px;
    z-index: 1;
    pointer-events: none;
}

.wfp-input {
    padding-left: 36px !important;
    height: 38px !important;
    border: 1px solid #dce6f2 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    color: #003876 !important;
    transition: border-color 0.2s;
}

.wfp-input:focus {
    border-color: #003876 !important;
    outline: none;
}

.wfp-input::placeholder {
    color: #8899aa !important;
}

.wfp-datepicker {
    cursor: pointer;
}

/* jQuery UI Datepicker theme override */
.ui-datepicker {
    border: 1px solid #dce6f2 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 56, 118, 0.12) !important;
    padding: 6px !important;
    font-family: inherit !important;
    z-index: 10000 !important;
}

.ui-datepicker-header {
    background: #003876 !important;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    color: #ffffff !important;
    padding: 8px 4px !important;
}

.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-datepicker-next {
    top: 8px !important;
    cursor: pointer;
}

.ui-datepicker-header .ui-datepicker-prev span,
.ui-datepicker-header .ui-datepicker-next span {
    background-image: none !important;
}

.ui-datepicker-header .ui-datepicker-prev:after {
    content: '\2039';
    font-size: 22px;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ui-datepicker-header .ui-datepicker-next:after {
    content: '\203A';
    font-size: 22px;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ui-datepicker-title {
    color: #ffffff !important;
}

.ui-datepicker-title select {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    font-size: 13px !important;
}

.ui-datepicker-calendar th {
    color: #003876 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 0 !important;
}

.ui-datepicker-calendar td {
    padding: 1px !important;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    text-align: center !important;
    border-radius: 4px !important;
    padding: 6px !important;
    font-size: 13px !important;
}

.ui-datepicker-calendar td a:hover {
    background: #e8f0fb !important;
    color: #003876 !important;
}

.ui-datepicker-calendar .ui-datepicker-today a {
    background: #dce8f7 !important;
    color: #003876 !important;
    font-weight: 600 !important;
}

.ui-datepicker-calendar .ui-state-active {
    background: #003876 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Alert */
.wfp-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.wfp-alert-error {
    background: #fef2f2;
    color: #991b1b !important;
    border: 1px solid #fecaca;
}

/* Empty State */
.wfp-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.wfp-empty-icon {
    font-size: 48px;
    color: #c0cfe0 !important;
    margin-bottom: 16px;
}

.wfp-empty-state h4 {
    color: #003876;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0 6px;
}

.wfp-empty-state p {
    color: #6b7c93 !important;
    margin-bottom: 20px;
}

/* Status Badge */
.content-table .wfp-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.content-table .wfp-status-badge.wfp-status-light {
    color: #1a1a2e !important;
}

.content-table .wfp-status-badge.wfp-status-dark {
    color: #ffffff !important;
}

.content-table .wfp-status-na {
    color: #aab5c4 !important;
    font-size: 13px;
}

/* Pagination */
.wfp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    background: #dce8f7;
    border-radius: 0 0 10px 10px;
}

.content-table .wfp-pagination-info {
    font-size: 13px;
    color: #003876 !important;
    font-weight: 500;
}

.wfp-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.content-table .wfp-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #dce6f2;
    border-radius: 6px;
    background: #ffffff;
    color: #003876 !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.content-table .wfp-page-btn:hover {
    background: #e8f0fb;
    border-color: #003876;
}

.content-table .wfp-page-active {
    background: #003876 !important;
    color: #ffffff !important;
    border-color: #003876 !important;
}

.wfp-page-ellipsis {
    padding: 0 4px;
    color: #8899aa !important;
    font-size: 13px;
}

/* Loading Overlay */
.modalLoading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 56, 118, 0.35);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.wfp-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
}

.wfp-spinner-ring {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: wfp-spin 0.8s linear infinite;
}

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

/* Mobile adjustments */
@media screen and (max-width: 640px) {
    .wfp-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .wfp-pagination {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .wfp-filters .uk-grid > div {
        width: 100% !important;
    }
}

/* =============================================
   WFP View - Detail Page
   ============================================= */

/* Status Panel */
.wfp-view-status-panel {
    background: #f4f8fd;
    border-radius: 10px;
    padding: 20px 24px;
    border: 1px solid #dce6f2;
}

.wfp-view-status-info {
    margin-bottom: 0;
}

.wfp-view-status-title {
    font-size: 16px;
    font-weight: 700;
    color: #003876;
    margin: 0 0 6px;
}

.wfp-view-status-desc {
    font-size: 14px;
    color: #4a5568 !important;
    margin: 0;
    line-height: 1.5;
}

/* Progress Bar */
.wfp-view-progress {
    width: 100%;
}

.wfp-view-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.wfp-view-progress-label {
    font-size: 13px;
    font-weight: 600;
    color: #003876;
}

.wfp-view-progress-pct {
    font-size: 13px;
    font-weight: 700;
    color: #003876;
}

.wfp-view-progress-bar {
    width: 100%;
    height: 10px;
    background: #dce6f2;
    border-radius: 5px;
    overflow: hidden;
}

.wfp-view-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #003876, #0056b3);
    border-radius: 5px;
    transition: width 0.3s ease;
}

/* Section Titles */
.wfp-view-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #003876;
    margin: 24px 0 12px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wfp-view-section-title i {
    color: #003876;
}

/* Action Buttons */
.wfp-view-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.wfp-view-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid #dce6f2;
    background: #ffffff;
    color: #003876 !important;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.wfp-view-action-btn:hover {
    border-color: #003876;
    background: #e8f0fb;
    text-decoration: none;
}

.wfp-view-action-upload {
    color: #003876 !important;
    border-color: #003876;
}

.wfp-view-action-upload:hover {
    background: #003876;
    color: #ffffff !important;
}

.wfp-view-action-download {
    color: #28a745 !important;
    border-color: #28a745;
}

.wfp-view-action-download:hover {
    background: #28a745;
    color: #ffffff !important;
}

.wfp-view-action-na {
    color: #dc3545 !important;
    border-color: #dc3545;
}

.wfp-view-action-na:hover {
    background: #dc3545;
    color: #ffffff !important;
}

/* Comments */
.wfp-view-comments {
    padding: 0 4px 16px;
}

.wfp-view-comment-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.wfp-view-comment-form .uk-input {
    flex: 1;
}

.wfp-view-comment-form .uk-button {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    flex-shrink: 0;
}

.wfp-view-comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wfp-view-comment-card {
    background: #f4f8fd;
    border: 1px solid #dce6f2;
    border-radius: 8px;
    padding: 12px 16px;
}

.wfp-view-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.wfp-view-comment-author {
    font-size: 13px;
    font-weight: 600;
    color: #003876;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wfp-view-comment-date {
    font-size: 12px;
    color: #8899aa !important;
}

.wfp-view-comment-body {
    font-size: 14px;
    color: #333333 !important;
    line-height: 1.5;
}

/* Document Viewer Modal */
.wfp-doc-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #003876;
    color: #ffffff;
}

.wfp-doc-viewer-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.wfp-doc-viewer-header-title i {
    font-size: 18px;
}

.wfp-doc-viewer-close {
    position: static !important;
    color: #ffffff !important;
}

.wfp-doc-viewer-close:hover {
    color: #c0cfe0 !important;
}

.wfp-doc-viewer-body {
    position: relative;
    background: #f4f8fd;
}

.wfp-doc-viewer-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 80vh;
    color: #003876;
    font-size: 15px;
    font-weight: 500;
}

.wfp-doc-viewer-loader-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #dce6f2;
    border-top-color: #003876;
    border-radius: 50%;
    animation: wfp-spin 0.8s linear infinite;
}

/* Mobile adjustments for View */
@media screen and (max-width: 640px) {
    .wfp-view-status-panel .uk-grid > div {
        width: 100% !important;
    }

    .wfp-view-comment-form {
        flex-direction: column;
    }

    .wfp-view-comment-form .uk-input {
        width: 100%;
    }

    .wfp-view-comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* =============================================
   WFP Error Page
   ============================================= */

.wfp-error-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fef2f2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.wfp-error-icon {
    font-size: 36px;
    color: #dc3545 !important;
}

.wfp-error-ref {
    font-size: 13px;
    color: #8899aa !important;
    margin-top: 8px;
}

.wfp-error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

@media screen and (max-width: 640px) {
    .wfp-error-actions {
        flex-direction: column;
        align-items: center;
    }
}