/* ===== FORM VALIDATION STYLES ===== */
.required::after {
    color: #e6674a;
    content: " *";
    display: inline;
}

.form-group .control-label {
    padding-right: 0 !important;
    margin-top: .6rem;
}

/* ===== REPORT VIEW STYLES ===== */
#report-view {
    text-align: center;
}

/* Loading spinner */
.loader {
    display: inline-block;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Report typography */
#report-view .company_name {
    margin-bottom: 0;
}

#report-view .title {
    font-size: 16px;
    font-weight: bold;
}

#report-view .title.small {
    font-size: 12px;
    font-weight: bold;
}

/* Report table styles */
#report-view .table {
    margin-top: 20px;
}

#report-view .table th, 
#report-view .table td {
    padding: 5px;
    text-align: left;
    font-size: 14px;
}

#report-view .table b {
    font-weight: 600;
}

#report-view .double-border {
    border-bottom: 4px double #999;
}

/* Background colors for reports */
#report-view .bg-light_1 {
    background: #e9ecef;
}

#report-view .bg-light_2 {
    background: rgba(0, 0, 0, .05);
}

/* Print button positioning */
#report-view .print_button {
    position: absolute;
    top: 30px;
    right: 0px;
    padding-right: 16px;
}

/* ===== PRINT MEDIA STYLES ===== */
@media print {
    #report-template {
        visibility: hidden;
    }
    
    .content-wrapper {
        margin-left: -240px;
    }
    
    #report-view-card {
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .print_button {
        display: none;
    }
}

/* ===== PAGE TITLE BAR ===== */
.page-title-bar {
    background: #FFE8CC;
    border: 1px solid #FFC78A;
    padding: 3px 10px;
    margin: 3px 0;
    border-radius: 6px;
}

/* ===== DATATABLES EXPORT BUTTONS ===== */
div.dt-buttons .dt-button {
    background: #ffffff !important;
    border: 1px solid #e9ecef;
    color: #495057 !important;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    margin-right: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Excel button - green accent */
div.dt-buttons .buttons-excel {
    border-color: #2ecc71;
    color: #2ecc71 !important;
    box-shadow: 0 2px 6px rgba(46, 204, 113, 0.22);
}

div.dt-buttons .buttons-excel:hover { 
    background: #eaf7f0; 
}

/* PDF button - red accent */
div.dt-buttons .buttons-pdf {
    border-color: #e74c3c;
    color: #e74c3c !important;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.22);
}

div.dt-buttons .buttons-pdf:hover { 
    background: #fdecea; 
}

/* Print button - blue accent */
div.dt-buttons .buttons-print {
    border-color: #3498db;
    color: #3498db !important;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.22);
}

div.dt-buttons .buttons-print:hover { 
    background: #eaf2fd; 
}

/* Export button icons */
div.dt-buttons .buttons-excel:before,
div.dt-buttons .buttons-pdf:before,
div.dt-buttons .buttons-print:before {
    color: currentColor;
    font-family: 'FontAwesome';
    margin-right: 6px;
}

div.dt-buttons .buttons-excel:before { content: "\f1c3"; }
div.dt-buttons .buttons-pdf:before { content: "\f1c1"; }
div.dt-buttons .buttons-print:before { content: "\f02f"; }

/* ===== DATATABLES TABLE HEADER ===== */
table#dataTable thead th {
    font-weight: 700 !important;
    background: #FFE8CC !important;
    border-color: #FFC78A !important;
    border-top: 1px solid #FFC78A !important;
    border-bottom: 1px solid #FFC78A !important;
    border-left: 1px solid #FFC78A !important;
    border-right: 1px solid #FFC78A !important;
}

/* ===== TABLE ACTION BUTTONS ===== */
.table .btn-icon { 
    display: inline-flex; 
    align-items: center; 
}

.table .btn-icon i { 
    margin-right: 6px; 
}

.table .btn-edit { 
    background-color: #ff9f43; 
    color: #fff; 
    border-color: #ff9f43; 
}

.table .btn-edit:hover { 
    filter: brightness(0.92); 
    color: #fff; 
}

.table .btn-delete { 
    background-color: #e74c3c; 
    color: #fff; 
    border-color: #e74c3c; 
}

.table .btn-delete:hover { 
    filter: brightness(0.92); 
    color: #fff; 
}

/* Add New button consistency */
#addNew { 
    font-size: 14px; 
    padding: 6px 12px; 
}

/* ===== PAGINATION STYLES ===== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    color: #495057 !important;
    border-radius: 6px;
    margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f7f7f7 !important;
    background-color: #f7f7f7 !important;
    border-color: #dcdfe3 !important;
    color: #343a40 !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate span.current,
.dataTables_wrapper .dataTables_paginate span.current:hover {
    background: #FFE8CC !important;
    background-color: #FFE8CC !important;
    background-image: none !important;
    border: 1px solid #FFC78A !important;
    color: #343a40 !important;
    box-shadow: none !important;
}

/* Bootstrap pagination active state */
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: #FFE8CC !important;
    border-color: #FFC78A !important;
    color: #343a40 !important;
    background-image: none !important;
    box-shadow: none !important;
}

.pagination .page-item .page-link:focus { 
    box-shadow: none !important; 
}

/* ===== MODAL FORM STYLES ===== */
textarea#remarks {
    height: 2.5em;
    transition: all 0.5s ease;
}

textarea#remarks:focus { 
    height: 4em; 
}

.modal-body .table { 
    margin-bottom: 0; 
}

.modal-body .table td, 
.modal-body .table th { 
    padding: .50rem; 
}

.modal-body .table .removeTran { 
    padding: 2px 12px; 
}