/* --- Wenjoy Theme Custom CSS --- */

:root {
    --brand-orange: #f6840a;
    --brand-black: #212529;
    --no-data-grey: #B3B3B3;
    --card-border-color: #dee2e6;
}

/* Main Card Styling */
.ticket-card {
    border: 1px solid var(--card-border-color);
    border-radius: 0.5rem; /* Consistent radius */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Ensures header corners are clipped */
}

/* 1. Top Header Bar */
.ticket-header {
    background-color: var(--brand-orange);
    color: #ffffff;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-header h2 {
    margin-bottom: 0;
    font-weight: 600;
    color: #fff;
    font-size: 20px;
}

/* 2. White Submit Button */
.btn-submit-white {
    background-color: white;
    color: var(--brand-black);
    font-weight: 400;
    border: none;
    border-radius: 8px; /* Specific request */
    padding: 8px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all .3s;
    text-decoration: none;
}

/* 3. Table Styles */
.table > thead > tr > th {
    font-weight: 500; /* Lighter header font */
    background-color: #f8f9fa;
    vertical-align: middle;
    color: #495057;
}

.table {
    margin-bottom: 0; /* Remove default table margin */
}

.text-no-data {
    color: var(--no-data-grey);
    padding: 2.5rem 0;
    font-weight: 500;
}

/* 4. Controls (Search/Show) */
.controls-row {
    padding: 1.5rem 1.5rem 0 1.5rem; /* Padding only on top */
}

/* 5. Pagination Buttons */
.ticket-footer {
    padding: 1rem 1.5rem;
    background-color: #ffffff;
    border-top: 1px solid var(--card-border-color);
}

/* Custom Black Pagination */
.pagination-custom .page-item .page-link {
    background-color: var(--brand-black);
    color: #ffffff;
    border-color: var(--brand-black);
    border-radius: 0.25rem; /* Rounded corners */
    margin: 0 0.25rem; /* Space between buttons */
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.pagination-custom .page-item .page-link:hover {
    background-color: #495057; /* Dark grey hover */
    border-color: #495057;
}

.pagination-custom .page-item.disabled .page-link {
    background-color: #6c757d; /* Disabled grey */
    border-color: #6c757d;
    opacity: 0.7;
}

/* 6. Responsive Tweaks for 375px */
@media (max-width: 575.98px) {
    .ticket-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .btn-submit-white {
        width: 100%;
        text-align: center;
    }
    
    .ticket-footer {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Stack controls on mobile */
    .controls-row .col-md-6 {
        margin-bottom: 1rem;
    }
}


/* ==================================
  MODAL / POPUP STYLES
==================================
*/

/* 1. Modal Header: Orange bar, white text */
.modal-header {
    background-color: var(--brand-orange);
    color: #ffffff;
}

/* 2. Placeholder: Light grey and small */
::placeholder {
    color: #adb5bd !important; /* Light grey */
    font-size: 0.9em !important; /* Small font */
    opacity: 1; /* Override default */
}

/* 3. File Input Button: Orange with white text */
.form-control::file-selector-button {
    background-color: var(--brand-orange);
    color: #ffffff;
    border-color: var(--brand-orange);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.form-control::file-selector-button:hover {
    background-color: #e07504;
    border-color: #d36e04;
}

/* 4. Custom Note Text */
.text-custom-note {
    color: var(--brand-orange);
}

/* 5. Custom Black Submit Button (for modal) */
.btn-custom-black {
    background-color: var(--brand-black);
    color: #ffffff;
    border-color: var(--brand-black);
    font-weight: 500;
    border-radius: 0.375rem; /* Soft radius */
}

.btn-custom-black:hover {
    background-color: #495057; /* Dark grey hover */
    color: #ffffff;
    border-color: #495057;
}

input.form-control#modalAttachment:hover {
    
}