/* siruk-office/assets/css/style.css */

/* --- Variable Definitions for Color Palette --- */
:root {
    --primary-color: #0E2D44; /* This is your brand's dark blue */
    --secondary-color: #62D84E;
    --light-accent-color: #D5E3E0;
    --text-dark: #212529;
    --text-light: #495057;
}

/* --- Global Font Size and Family --- */
html {
    font-size: 15px;
}

/* --- General Body & Layout --- */
body {
    background-color: var(--light-accent-color);
    font-family: 'Poppins', sans-serif;
    display: flex; /* ADD THIS */
    flex-direction: column; /* ADD THIS */
    min-height: 100vh; /* ADD THIS */
}

.container {
    max-width: 1400px;
}

/* --- NAVBAR OVERHAUL --- */
.main-navbar {
    background-color: var(--primary-color);
    padding: 0.5rem 0;
}
.main-navbar .navbar-brand {
    color: #ffffff;
    font-size: 1.5rem;
    margin-right: 2rem;
}
.main-navbar .navbar-brand img {
    height: 32px;
    margin-right: 12px;
}
.main-navbar .nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    padding: 0.75rem 1rem;
    margin: 0 0.5rem;
    border-radius: 6px;
    border-bottom: none;
    transition: all 0.2s ease-in-out;
}
.main-navbar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.main-navbar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-weight: 600;
}
.global-search-form .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 300px;
}
.global-search-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.global-search-form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--secondary-color);
    box-shadow: none;
    color: #ffffff;
}
.main-navbar .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
}

/* --- Stat Cards --- */
.stat-card { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); position: relative; overflow: hidden; border: 1px solid #e9ecef; }
.stat-card-body { padding: 1.25rem; }
.stat-card-title { font-size: 0.9rem; color: #6c757d; margin-bottom: 0.5rem; font-weight: 500; }
.stat-card-value { font-size: 2.2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.25rem; line-height: 1; }
.stat-card-label { font-size: 0.85rem; color: var(--text-light); margin: 0; }
.stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; }
.stat-card-blue::after { background-color: #0d6efd; }
.stat-card-green::after { background-color: #198754; }
.stat-card-orange::after { background-color: #fd7e14; }
.stat-card-purple::after { background-color: #6f42c1; }
.stat-card-teal::after { background-color: #20c997; }
.stat-card-red::after { background-color: #dc3545; }

/* --- General Card Styling for Dashboard --- */
.card { border: 1px solid #e9ecef; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-radius: 8px; }
.card-header { background-color: #fff; font-weight: 600; border-bottom: 1px solid #e9ecef; }

/* --- Team Management Page --- */
.team-member-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #e9ecef; }
.team-member-item:last-child { border-bottom: none; }
.avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.2rem; }
.role-badge { font-size: 0.75rem; padding: 0.3em 0.6em; font-weight: 600; }
.role-badge.role-admin { background-color: #d5e3e0; color: var(--primary-color); /* CHANGED */ }
.role-badge.role-member { background-color: #f8f9fa; color: #6c757d; }

/* --- Modal Customizations --- */
.modal-content { border-radius: 8px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.modal-header { border-bottom: 1px solid #e9ecef; }
.modal-footer { border-top: 1px solid #e9ecef; }

/* --- Login Page Styles --- */
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-card { width: 100%; max-width: 420px; padding: 2rem; background-color: #fff; border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.login-card .h1 { color: var(--primary-color); }

/* --- Branded Button Styles --- */
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-primary:hover { background-color: #0a2133; border-color: #0a2133; }

/* --- BOOTSTRAP OVERRIDES --- */ /* NEW SECTION */
/* 1. Set default link color to your primary color */
a {
    color: var(--primary-color);
}
a:hover {
    color: #0a2133; /* Darker shade of primary */
}

/* 2. Style pagination to use your brand colors */
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFF;
}
.pagination .page-link {
    color: var(--primary-color);
}
.pagination .page-link:hover {
    background-color: #d5e3e0; /* Use your light accent for hover */
}
.pagination .page-item.disabled .page-link {
    color: #6c757d;
}

/* 3. Style form inputs to use your brand color on focus */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(14, 45, 68, 0.25); /* Shadow using your primary color */
}


/* --- Department Management Page --- */
.department-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e9ecef;
}
.department-item:last-child {
    border-bottom: none;
}
.employee-count-badge {
    background-color: #f8f9fa;
    color: #6c757d;
    font-size: 0.8rem;
    padding: 0.4em 0.8em;
    border-radius: 50rem; /* pill shape */
    font-weight: 500;
}

/* --- Client Management Page --- */
.client-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e9ecef;
}
.client-item:last-child {
    border-bottom: none;
}
.client-link {
    text-decoration: none;
    color: var(--text-dark);
}
.client-link:hover {
    color: var(--primary-color);
}

/* --- Client View Page --- */
.client-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.avatar-placeholder.large {
    width: 64px;
    height: 64px;
    font-size: 2rem;
}

.custom-tabs-header {
    padding: 0;
    border-bottom: 1px solid #dee2e6;
}

.card-header-tabs {
    margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
    margin-bottom: calc(.5 * var(--bs-card-cap-padding-y));
    margin-left: calc(.5 * var(--bs-card-cap-padding-x));
    border-bottom: 0;
}

.nav-tabs .nav-link {
    color: var(--text-light);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 1rem 1.25rem;
}

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

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.list-item:last-child {
    border-bottom: none;
}

/* --- Project Management Page --- */
.project-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e9ecef;
}
.project-item:last-child {
    border-bottom: none;
}
.project-link {
    text-decoration: none;
    color: var(--text-dark);
}
.project-link:hover {
    color: var(--primary-color);
}
.status-badge {
    font-size: 0.75rem;
    padding: 0.4em 0.7em;
    font-weight: 600;
    min-width: 90px;
    text-align: center;
}
.status-badge.status-planning { background-color: #cfe2ff; color: #084298; }
.status-badge.status-in-progress { background-color: #e2f3fe; color: #087990; }
.status-badge.status-completed { background-color: #d1e7dd; color: #0f5132; }
.status-badge.status-on-hold { background-color: #fff3cd; color: #664d03; }

/* --- Project View Page --- */
.task-list {
    list-style-type: none;
    padding: 0;
}
.task-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}
.task-item:last-child {
    border-bottom: none;
}
.task-item.completed .task-title {
    text-decoration: line-through;
    color: #6c757d;
}
.task-checkbox {
    width: 1.25em;
    height: 1.25em;
}

/* --- Project View Page - Task Status Dropdown --- */
.task-item {
    align-items: flex-start; /* Align to top for better look with dropdown */
}
.task-status-select {
    min-width: 120px;
    font-weight: 500;
    font-size: 0.8rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
/* Color coding for the dropdown itself */
.task-status-select.status-to-do {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}
.task-status-select.status-in-progress {
    background-color: #e2f3fe;
    border-color: #9ed9ec;
    color: #087990;
}
.task-status-select.status-done {
    background-color: #d1e7dd;
    border-color: #b0d3c2;
    color: #0f5132;
}

/* --- Task Page --- */
.task-page-list {
    list-style-type: none;
    padding: 0;
}
.task-page-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}
.task-page-item:last-child {
    border-bottom: none;
}
.task-page-link {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 1.1rem;
}
.task-page-link:hover {
    color: var(--primary-color);
}

/* --- Project View Page - New Features --- */
.main-tabs {
    border-bottom: 1px solid #dee2e6;
}
.main-tabs .nav-link {
    color: var(--text-light);
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border: none;
    border-bottom: 3px solid transparent;
}
.main-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.tab-content {
    background-color: transparent;
    padding: 0;
}
/* Comment Section */
.comment-item {
    display: flex;
    padding: 0.5rem 0;
}
.comment-item .card {
    width: 100%;
}
.comment-body {
    margin-left: 1rem;
}
/* File List */
.file-item a {
    font-weight: 500;
    text-decoration: none;
}

/* --- Project View Page --- */
.task-actions-btn {
    line-height: 1;
    padding: 0.25rem 0.5rem;
}
.file-item a {
    font-weight: 500;
    text-decoration: none;
}
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Invoice Page --- */
.invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}
.invoice-item:last-child { border-bottom: none; }
.invoice-link { text-decoration: none; color: var(--text-dark); }
.invoice-link:hover { color: var(--primary-color); }

/* Invoice Modal Line Items */
.item-row .form-control { font-size: 0.9rem; }
.item-total { background-color: #f8f9fa; border: 1px solid #dee2e6; }

/* --- Invoice View Page --- */
.invoice-table th {
    font-weight: 600;
}
.totals-table td {
    border: none;
    padding: 0.25rem 0;
}

/* --- Print Styles --- */
@media print {
    body {
        background-color: #fff; /* White background for printing */
    }
    .main-navbar, .no-print, .card-header {
        display: none !important; /* Hide navbar and buttons */
    }
    .card#invoice-printable {
        border: none;
        box-shadow: none;
    }
    .container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
}

/* --- Salaries Page --- */
.salary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}
.salary-item:last-child {
    border-bottom: none;
}

/* --- Payroll Page --- */
.payroll-run-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}
.payroll-run-item:last-child {
    border-bottom: none;
}

/* --- Payroll Run View Page --- */
.payslip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}
.payslip-item:last-child {
    border-bottom: none;
}
.status-badge-select {
    min-width: 120px;
    font-weight: 500;
    font-size: 0.8rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 50rem; /* pill shape */
    text-align: center;
}
.status-badge-select.status-generated { background-color: #cfe2ff; color: #084298; border-color: #9ec5fe; }
.status-badge-select.status-paid { background-color: #d1e7dd; color: #0f5132; border-color: #a3cfbb;}
.status-badge-select.status-cancelled { background-color: #f8d7da; color: #842029; border-color: #f5c2c7; }

/* --- Payslip View Page (New Layout) --- */
.payslip-container {
    font-size: 13px;
    line-height: 1.6;
}
.payslip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.payslip-title {
    background-color: #f8f9fa;
    padding: 0.5rem;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1.5rem;
}
.employee-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.employee-summary p {
    margin-bottom: 0.25rem;
    font-size: 12px;
}
.net-pay-amount {
    color: var(--primary-color);
    font-weight: 700;
}
.payslip-table {
    width: 100%;
    border-collapse: collapse;
}
.payslip-table th, .payslip-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}
.payslip-table thead th {
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    font-size: 11px;
    border-bottom: 2px solid #dee2e6;
}
.net-pay-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e9ecef;
    padding: 0.75rem;
    margin-top: 1rem;
    font-weight: 600;
}
/* Update Print Styles to include new elements */
@media print {
    body { background-color: #fff; }
    .main-navbar, .no-print, .card-header { display: none !important; }
    .card#payslip-printable, .card {
        border: none;
        box-shadow: none;
    }
    .container { max-width: 100%; padding: 0; margin: 0; }
}

/* --- Payroll Settings Page --- */
.payroll-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e9ecef;
}
.payroll-item:last-child {
    border-bottom: none;
}
.badge-allowance {
    background-color: #d1e7dd; /* Bootstrap success bg */
    color: #0f5132; /* Bootstrap success text */
}
.badge-deduction {
    background-color: #f8d7da; /* Bootstrap danger bg */
    color: #842029; /* Bootstrap danger text */
}

/* --- Report View Page --- */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
}
.report-section {
    margin-bottom: 2.5rem;
}
.report-section h5 {
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.report-footer {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
    text-align: center;
}
/* Ensure nl2br() content is formatted nicely */
.report-section p, .report-section div {
    line-height: 1.7;
}

/* Update Print Styles to include new report elements */
@media print {
    body { background-color: #fff; }
    .main-navbar, .no-print, .card-header { display: none !important; }
    .card#report-printable, .card {
        border: none;
        box-shadow: none;
    }
    .container { max-width: 100%; padding: 0; margin: 0; }
}

/* --- Invoice Status Badges --- */
.status-badge {
    font-size: 0.75rem;
    padding: 0.4em 0.7em;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}
.status-badge.status-draft {
    background-color: #e9ecef; /* Gray */
    color: #495057;
}
.status-badge.status-sent {
    background-color: #cfe2ff; /* Blue */
    color: #084298;
}
.status-badge.status-paid {
    background-color: #d1e7dd; /* Green */
    color: #0f5132;
}
.status-badge.status-overdue {
    background-color: #f8d7da; /* Red */
    color: #842029;
}


/* --- Task Status Badges --- */
.status-badge.status-to-do {
    background-color: #e9ecef; /* Gray */
    color: #495057;
}
.status-badge.status-in-progress { 
    background-color: #cfe2ff; /* Blue */
    color: #084298; 
}
.status-badge.status-done { 
    background-color: #d1e7dd; /* Green */
    color: #0f5132; 
}


/* --- App Footer --- */
.app-footer {
    background-color: #f8f9fa; /* A light grey background */
    border-top: 1px solid #dee2e6;
    padding: 1.25rem 0;
    margin-top: 2rem;
    font-size: 0.9rem;
}

.footer-text {
    color: var(--text-light);
}