/* css/style.css */

/* Custom Styles overriding or extending Bootstrap */

/* Import Sarabun Font */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Sarabun', sans-serif;
    background-color: #fafafa; /* FFEAEA - Lightest pink for subtle background */
    color: #343a40; /* Darker text for readability */
}

/* Override Bootstrap Primary Colors with our custom palette */
/* Primary: 9ECAD6 */
.bg-primary { background-color: #9ECAD6 !important; }
.btn-primary {
    background-color: #9ECAD6;
    border-color: #9ECAD6;
    color: #fff; /* Ensure text is white on light blue */
}
.btn-primary:hover {
    background-color: #748DAE !important; /* A bit darker blue on hover */
    border-color: #748DAE !important;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85); /* Slightly muted white for links */
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: white; /* Bright white on hover */
}

/* Card styling */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: #9ECAD6; /* Use primary color */
    color: white;
    border-radius: 10px 10px 0 0 !important; /* Override Bootstrap's border-radius */
    padding: 1rem 1.25rem;
}

.card-header h2 {
    margin-bottom: 0;
    font-size: 1.75rem;
    font-weight: 600; /* Sarabun supports heavier weights */
}

/* Form styling */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border-color: #ced4da;
}

.form-control:focus, .form-select:focus {
    border-color: #9ECAD6; /* Focus border using primary color */
    box-shadow: 0 0 0 0.25rem rgba(158, 202, 214, 0.25); /* Focus shadow with primary color alpha */
}

/* Buttons (adjusting colors based on new palette) */
.btn {
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.btn-danger { /* For delete actions */
    background-color: #F5CBCB; /* Light pink */
    border-color: #F5CBCB;
    color: #343a40; /* Dark text for contrast */
}
.btn-danger:hover {
    background-color: #e0b4b4; /* Darker pink on hover */
    border-color: #e0b4b4;
}

.btn-success { /* For create/save actions */
    background-color: #748DAE; /* Grey-blue */
    border-color: #748DAE;
    color: #fff; /* White text */
}
.btn-success:hover {
    background-color: #5e7092; /* Darker grey-blue on hover */
    border-color: #5e7092;
}

.btn-info { /* For edit/view actions */
    background-color: #9ECAD6; /* Primary color, lighter blue */
    border-color: #9ECAD6;
    color: #fff;
}
.btn-info:hover {
    background-color: #748DAE;
    border-color: #748DAE;
}

.btn-secondary { /* For cancel/back actions */
    background-color: #a0a6b2; /* A neutral grey */
    border-color: #a0a6b2;
    color: #fff;
}
.btn-secondary:hover {
    background-color: #8c929e;
    border-color: #8c929e;
}


/* Main container padding adjustments */
.container-fluid.custom-container {
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 1300px; /* Adjust max-width for content */
}

/* Table styling */
.table {
    border-radius: 0.5rem;
    overflow: hidden; /* Ensures rounded corners on children */
}

.table thead th {
    background-color: #e9ecef; /* Light grey for header */
    color: #495057;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

/* Status Badges - Using Bootstrap's .badge and contextual classes */
.status-badge {
    padding: .35em .65em;
    border-radius: .25rem;
    font-size: 0.85em;
    font-weight: 600;
    display: inline-block; /* For better alignment */
}
/* Custom colors for statuses based on the new palette or variations */
.status-ใกล้จะมาถึง { background-color: #9ECAD6; color: white; } /* Lighter blue */
.status-กำลังดำเนินการ { background-color: #748DAE; color: white; } /* Grey-blue */
.status-พบปัญหา { background-color: #F5CBCB; color: #343a40; } /* Light pink with dark text */
.status-เสร็จสิ้น { background-color: #28a745; color: white; } /* Use a standard green for "completed" for clarity */


/* Project Images Grid */
.project-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.project-image-item {
    position: relative;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer; /* Indicate clickable */
}

.project-image-item img {
    width: 100%;
    height: 120px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures image covers area without distortion */
    display: block;
}

.project-image-item .btn-close-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(245, 203, 203, 0.9); /* F5CBCB with transparency */
    color: #343a40; /* Dark text */
    border: none;
    border-radius: 50%;
    width: 28px; /* Slightly larger for easier tap */
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.project-image-item .btn-close-image:hover {
    background-color: #F5CBCB;
}

/* Modal for Image Preview */
.modal-lg-custom {
    --bs-modal-width: 80% !important; /* Make modal wider for images */
}

.modal-content.image-modal-content {
    background: transparent;
    border: none;
    text-align: center;
}

.modal-content.image-modal-content .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 0.5rem;
    opacity: 1;
    z-index: 1060; /* Ensure it's above the image */
}

.modal-content.image-modal-content img {
    max-width: 100%;
    max-height: 90vh; /* Limit height to viewport height */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}


/* Messages (success/error) */
.alert {
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.alert-success {
    background-color: #d4edda; /* Default green from Bootstrap */
    color: #155724;
    border-color: #c3e6cb;
}
.alert-danger {
    background-color: #f8d7da; /* Default red from Bootstrap */
    color: #721c24;
    border-color: #f5c6cb;
}


/* Login page specific styling */
.login-container {
    max-width: 450px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.login-container .card-header {
    text-align: center;
}

/* Dashboard Status Cards */
.status-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 15px; /* Reduce padding for smaller card */
    text-align: center;
    transition: transform 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
}

.status-card:hover {
    transform: translateY(-5px);
}

.status-card .icon-wrapper {
    font-size: 2.5rem; /* Icon size */
    margin-bottom: 8px; /* Space between icon and title */
    line-height: 1;
}

.status-card h4 {
    font-size: 1.1rem; /* Smaller font for title */
    font-weight: 600;
    margin-bottom: 5px; /* Space between title and count */
}

.status-card .count {
    font-size: 2rem; /* Slightly smaller count font */
    font-weight: 700;
    color: #9ECAD6; /* Primary color for count */
    line-height: 1;
}

/* Specific card icon colors and count colors for better distinction */
.status-card.all .icon-wrapper, .status-card.all .count { color: #9ECAD6; }
.status-card.upcoming .icon-wrapper, .status-card.upcoming .count { color: #9ECAD6; } /* ใกล้จะมาถึง */
.status-card.in-progress .icon-wrapper, .status-card.in-progress .count { color: #748DAE; } /* กำลังดำเนินการ */
.status-card.problem .icon-wrapper, .status-card.problem .count { color: #F5CBCB; } /* พบปัญหา */
.status-card.completed .icon-wrapper, .status-card.completed .count { color: #28a745; } /* เสร็จสิ้น */


/* Print Styles */
@media print {
    body {
        -webkit-print-color-adjust: exact; /* For better color printing on some browsers */
        print-color-adjust: exact;
        background-color: white !important;
    }
    /* Hide everything not in printable-content */
    body > *:not(.printable-content) {
        display: none !important;
    }

    /* Make printable-content visible and adjust layout */
    .printable-content {
        visibility: visible;
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background-color: white !important;
        color: black !important; /* Ensure black text for printing */
        font-family: 'Sarabun', serif; /* Use Sarabun for print */
        font-size: 12pt;
    }

    /* Hide specific elements within printable-content for print */
    .printable-content .no-print,
    .printable-content .btn,
    .printable-content .form-control,
    .printable-content .form-select,
    .printable-content .navbar,
    .printable-content .breadcrumb,
    .status-card,
    .modal, .modal-backdrop,
    .screen-only { /* Hide screen-only elements when printing */
        display: none !important;
    }

    /* Show print-only elements when printing */
    .printable-content .print-only {
        display: block !important; /* Or inline-block, etc., as appropriate */
    }

    /* Adjust layout for print */
    .printable-content .card,
    .printable-content .card-header,
    .printable-content .card-body {
        border: none !important;
        box-shadow: none !important;
        background-color: white !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .printable-content h1, .printable-content h2, .printable-content h3 {
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
        color: black !important;
    }
    .printable-content p {
        margin-bottom: 5px;
        line-height: 1.5;
    }

    /* Ensure details are properly aligned for print */
    .printable-content .project-details .col-md-6 {
        flex: 0 0 100%; /* Columns stack for print */
        max-width: 100%;
        margin-bottom: 15px;
    }

    .printable-content .project-details label.form-label,
    .printable-content .project-details p.form-control-plaintext {
        display: block;
        margin-bottom: 0.25rem;
        font-weight: 600; /* Bold labels */
    }

    .printable-content .project-details p.border {
        border: 1px solid #dee2e6 !important;
        padding: 8px !important;
        background-color: #f8f9fa !important;
    }

    /* Images for print */
    .printable-content .project-images-grid {
        display: block !important; /* Stack images */
    }
    .printable-content .project-image-item {
        border: 1px solid #ccc !important;
        margin-bottom: 15px;
        page-break-inside: avoid; /* Keep image and caption together */
        text-align: center;
    }
    .printable-content .project-image-item img {
        width: auto !important; /* Auto width */
        max-width: 100% !important;
        height: auto !important; /* Auto height */
        max-height: 300px; /* Limit image size for print */
        display: block;
        margin: 0 auto;
    }

    /* Specific element adjustments for print */
    .printable-content hr {
        border-top: 1px solid #ccc;
        margin: 20px 0;
    }
}

/* Default styles for screen */
@media screen {
    .print-only {
        display: none !important; /* Hide print-only elements on screen */
    }
    .screen-only {
        display: block !important; /* Default for screen-only elements */
    }
}

/* Custom badges for status */
.status-badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 80%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .375rem;
    color: #fff;
}
.status-badge.status-ใกล้จะมาถึง {
    background-color: #0d6efd; /* Blue */
}
.status-badge.status-กำลังดำเนินการ {
    background-color: #ffc107; /* Yellow */
    color: #000;
}
.status-badge.status-พบปัญหา {
    background-color: #dc3545; /* Red */
}
.status-badge.status-เสร็จสิ้น {
    background-color: #198754; /* Green */
}

/* New badges for payment status */
.status-badge.status-รอจ่าย {
    background-color: #E2B831; /* Golden */
    color: #000;
}
.status-badge.status-จ่ายแล้ว {
    background-color: #5E936C; /* Paid Green */
}
.btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}