/* CSS Variables for consistent theming */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap');

:root {
    /*
      Update the base colour palette to evoke a light, clean look inspired
      by Apple’s design language.  The primary accent now uses the familiar
      iOS blue and the backgrounds are softened with light greys.  Text
      colours favour darker greys to ensure readability on light
      backgrounds.  These variables make it easy to adjust the overall
      theme without changing individual selectors.
    */
    --primary: #007aff;
    --primary-dark: #0055b8;
    --primary-light: #eaf3ff;
    /* Dedicated background colour for header and footer.  A slightly more
       saturated light blue ensures these sections stand out gently
       against the page background without overwhelming the content. */
    --header-footer-bg: #e0f4ff;
    --secondary: #ffffff;
    --bg-light: #f2f2f7;
    --border-radius: 8px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --text-color: #1c1c1e;
}

/* Global Styles */
body {
    margin: 0;
    font-family: 'Sarabun', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-color);
}

/* Header styles */
header {
    /* Use a dedicated light blue background for the header */
    background-color: var(--header-footer-bg);
    color: var(--primary);
    /* Provide more breathing space and fine‑tune typography for a calmer look */
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5ea;
}

/* Logo placement within the header */
header .logo {
    /* Increase size and adjust tracking to give the brand name presence */
    font-size: 1.8rem;
    font-weight: 700;
    margin-right: 0.75rem;
    letter-spacing: 0.03rem;
    color: var(--primary);
}

/* Style the secondary title in the header (ระบบจัดการพาเลท) for a calm, readable look */
header h1 {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-color);
    margin: 0;
    margin-left: 0.75rem;
}

/* Default logo styles used outside of the header (e.g. login page) */
.logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: #007acc;
    margin-bottom: 1rem;
}

nav {
    background-color: var(--secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #e5e5ea;
}

nav a {
    color: var(--primary);
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

nav a:hover,
nav a.active {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

/* Responsive header adjustments to prevent overlapping on small screens */
@media (max-width: 600px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    header .logo {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    header h1 {
        margin-left: 0;
        margin-top: 0;
        text-align: left;
        font-size: 1.2rem;
    }
}

/* Style for the current user name in navigation bar */
/* Display for logged in user on navigation */
.user-name {
    margin-left: auto;
    color: var(--primary);
    padding: 0.75rem 1rem;
    font-weight: 500;
}

/* Remove margin-left from logout link so it follows user name */
nav a.logout {
    margin-left: 0;
    color: #ff3b30;
}

nav a.logout:hover,
nav a.logout.active {
    background-color: #fff5f5;
    color: #ff3b30;
}

/* Container */
.container {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Cards & Grids */
.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Dashboard statistic cards */
.stat-card {
    flex: 1 1 280px;
    position: relative;
    background-color: var(--secondary);
    border-radius: var(--border-radius);
    padding: 1rem 1rem 1rem 1.5rem;
    box-shadow: var(--shadow);
    text-align: left;
    margin-bottom: 1rem;
}

/* Colored bar on the left side of the card for emphasis */
.stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: var(--primary);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.stat-card h3 {
    font-size: 2rem;
    margin: 0 0 0.25rem 0;
    color: var(--primary-dark);
}

.stat-card p {
    margin: 0;
    color: var(--text-color);
}

/* Report and dashboard specific responsive adjustments */
.report-stats-grid .stat-card {
    /* same as base */
}

@media (max-width: 800px) {
    /* On medium screens, arrange summary cards in two columns and reduce padding */
    .report-stats-grid .stat-card {
        flex: 1 1 calc(50% - 0.5rem);
        padding: 0.8rem;
    }
    .report-stats-grid .stat-card h3 {
        font-size: 1.6rem;
    }
    .report-stats-grid .stat-card p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    /* On small screens, stack summary cards and further reduce padding */
    .report-stats-grid .stat-card {
        flex: 1 1 100%;
        padding: 0.7rem;
    }
    .report-stats-grid .stat-card h3 {
        font-size: 1.4rem;
    }
    .report-stats-grid .stat-card p {
        font-size: 0.85rem;
    }
}

@media (max-width: 600px) {
    /* Arrange dashboard cards in two columns on small screens */
    .dashboard-stats-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .dashboard-stats-grid .stat-card {
        flex: 1 1 calc(50% - 0.5rem);
        padding: 0.8rem;
        margin-bottom: 0.5rem;
    }
    .dashboard-stats-grid .stat-card h3 {
        font-size: 1.6rem;
    }
    .dashboard-stats-grid .stat-card p {
        font-size: 0.85rem;
    }
    /* Keep the first card's button aligned on small screens */
    .dashboard-stats-grid .stat-card .stat-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 400px) {
    /* For very narrow screens, stack dashboard cards vertically */
    .dashboard-stats-grid .stat-card {
        flex: 1 1 100%;
        padding: 0.7rem;
    }
    .dashboard-stats-grid .stat-card h3 {
        font-size: 1.4rem;
    }
    .dashboard-stats-grid .stat-card p {
        font-size: 0.8rem;
    }
}

/* Form card styling */
.form-card {
    background-color: var(--secondary);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-group {
    margin-bottom: 1rem;
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* Inputs, selects and textareas */
.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.6rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus state for form fields */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}

.form-group textarea {
    resize: vertical;
}

/* File input styling similar to text inputs */
.form-group input[type="file"] {
    padding: 0.6rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input[type="file"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}

/* Button styling */
.btn {
    background-color: var(--primary);
    color: #ffffff;
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    display: inline-block;
}

.btn:hover {
    background-color: var(--primary-dark);
}

/* Secondary button for alternate actions */
.btn-secondary {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    display: inline-block;
}
.btn-secondary:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
}

/* Danger button style for delete actions */
.btn-danger {
    background-color: #e55353;
    color: #ffffff;
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    display: inline-block;
}
.btn-danger:hover {
    background-color: #c4373d;
    color: #ffffff;
}

/* Small button variant (can be combined with btn, btn-secondary or btn-danger) */
.btn-small {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

/* Search input for filtering tables */
.search-input {
    width: 100%;
    max-width: 300px;
    padding: 0.6rem 0.75rem;
    margin: 0.5rem 0 1rem 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}

/*
 * Table wrapper: constrain height to allow scrolling when tables have many
 * rows. This prevents long tables from overflowing the page and creates a
 * more polished, professional appearance. Combined with the JavaScript
 * pagination helper, only the current page's rows are visible at a time.
 */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
}

/* Pagination controls for tables */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
}
.pagination button {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border-color, #ccc);
    background-color: var(--background-light, #ffffff);
    color: var(--text-color, #000000);
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
    min-width: 2rem;
    transition: background-color 0.2s, color 0.2s;
}
.pagination button:hover {
    background-color: var(--primary);
    color: #ffffff;
}
.pagination button.active {
    background-color: var(--primary);
    color: #ffffff;
    font-weight: bold;
}

/* Footer styling */
footer {
    text-align: center;
    padding: 1rem 0;
    /* Match the footer background to the header using the dedicated variable */
    background-color: var(--header-footer-bg);
    color: var(--primary);
    font-size: 0.8rem;
    margin-top: 2rem;
    border-top: 1px solid #e5e5ea;
}

footer a {
    color: var(--primary);
    text-decoration: none;
}

@media print {
    /* Hide footer when printing */
    footer {
        display: none !important;
    }
}

/* Print styles */
@media print {
    /* Hide navigation, actions, search box and date filter when printing */
    nav,
    .report-actions,
    .user-name,
    a.logout,
    .search-input,
    .date-filter {
        display: none !important;
    }
    /* Reset backgrounds and padding for print */
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    header {
        background: none !important;
        border-bottom: none !important;
        color: #000000 !important;
    }
    header .logo,
    header h1 {
        color: #000000 !important;
    }
    .container {
        max-width: 100% !important;
        padding: 0.5in !important;
    }
    table {
        font-size: 12pt !important;
        page-break-inside: avoid;
        border-collapse: collapse;
    }
    h1, h2, h3 {
        margin-top: 0;
        color: #000000 !important;
    }
    /* Avoid button display on print */
    .btn {
        display: none !important;
    }
    /* Simplify statistics cards into plain text lines for printing */
    .stats-grid {
        display: block !important;
    }
    .stat-card {
        display: block !important;
        padding: 0 !important;
        margin: 0 0 0.5rem 0 !important;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    .stat-card::before {
        display: none !important;
    }
    .stat-card h3 {
        display: inline !important;
        font-size: 12pt !important;
        margin-right: 0.25rem !important;
        color: #000000 !important;
    }
    .stat-card p {
        display: inline !important;
        font-size: 12pt !important;
        color: #000000 !important;
    }
    /* Allow tables to extend fully in print */
    .table-wrapper {
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
        background: none !important;
    }
    /* Hide bar chart on print */
    .bar-chart {
        display: none !important;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background-color: var(--secondary);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

table th,
table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e8eef4;
    text-align: left;
    font-size: 0.95rem;
}

table th {
    background-color: var(--primary-light);
    font-weight: 600;
    color: var(--primary-dark);
}

table tr:nth-child(even) td {
    background-color: var(--bg-light);
}

/* Hover highlight for table rows */
table tr:hover td {
    background-color: var(--primary-light);
}

/* Custom styles for QC logs table */
.qc-log-table th, .qc-log-table td {
    padding: 0.4rem;
    font-size: 0.85rem;
    text-align: center;
    white-space: nowrap;
}
.qc-log-table th {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
    border-bottom: 1px solid #e8eef4;
}
.qc-log-table tbody tr:nth-child(even) td {
    background-color: var(--bg-light);
}
.qc-log-table tbody tr:hover td {
    background-color: var(--primary-light);
}

/* Style collapsible details sections used on reports page */
details {
    margin-top: 1rem;
}

/* Login background styling */
.login-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-light), var(--bg-light));
}

/* Login form container */
.login-container {
    background-color: var(--secondary);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 380px;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.text-center {
    text-align: center;
}

.small {
    font-size: 0.8rem;
    color: #666;
}

/* Secret code overlay styles */
.secret-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.secret-modal {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 90%;
    max-width: 400px;
}

.secret-modal p {
    margin: 0 0 0.5rem 0;
}

@media print {
    .secret-overlay {
        display: none !important;
    }
}

/* Print modes for QC dashboard */
@media print {
    body.print-mode[data-print="summary"] .logs-section,
    body.print-mode[data-print="summary"] .chart-section,
    body.print-mode[data-print="summary"] .filter-section,
    body.print-mode[data-print="summary"] .print-controls {
        display: none !important;
    }
    body.print-mode[data-print="details"] .summary-section,
    body.print-mode[data-print="details"] .chart-section,
    body.print-mode[data-print="details"] .filter-section,
    body.print-mode[data-print="details"] .print-controls {
        display: none !important;
    }
    body.print-mode[data-print="both"] .chart-section,
    body.print-mode[data-print="both"] .filter-section,
    body.print-mode[data-print="both"] .print-controls {
        display: none !important;
    }
    /* Print mode for a single record summary: hide stats grid, charts, logs, filters and controls */
    body.print-mode[data-print="record"] .stats-grid,
    body.print-mode[data-print="record"] .chart-section,
    body.print-mode[data-print="record"] .logs-section,
    body.print-mode[data-print="record"] .filter-section,
    body.print-mode[data-print="record"] .print-controls {
        display: none !important;
    }
    body.print-mode[data-print="record"] #qcSummaryDetails {
        display: block !important;
    }

    /* Print mode for PM Soft page: show only the log table and paginate every 15 rows */
    body.print-mode[data-print="pm"] nav,
    body.print-mode[data-print="pm"] header,
    body.print-mode[data-print="pm"] .form-card,
    body.print-mode[data-print="pm"] .filter-section,
    body.print-mode[data-print="pm"] .cost-section,
    body.print-mode[data-print="pm"] .print-controls,
    body.print-mode[data-print="pm"] .user-name,
    body.print-mode[data-print="pm"] a.logout {
        display: none !important;
    }
    body.print-mode[data-print="pm"] #pmLogsTable {
        display: table !important;
    }
    body.print-mode[data-print="pm"] #pmLogsTable tr:nth-child(15n) {
        page-break-after: always;
    }
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
    /* Stack navigation links vertically and stretch to full width */
    nav {
        flex-direction: column;
        align-items: stretch;
    }
    nav a {
        flex: 1 1 100%;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    /* Display stats cards vertically */
    .stats-grid {
        flex-direction: column;
    }
}

/* Bar chart styles */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.5rem;
}

.bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background-color: var(--primary);
    transition: height 0.3s ease;
}

.bar-value {
    margin-top: 0.25rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.bar-label {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-color);
}

/* Styles for the company home page */
.home-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.home-card {
    flex: 1 1 320px;
    background-color: var(--secondary);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    text-align: center;
}
.home-card h2 {
    margin-top: 0;
    color: var(--primary-dark);
    font-size: 1.5rem;
}
.home-card p {
    margin: 0.5rem 0 1rem 0;
    color: var(--text-color);
}
.home-card .btn {
    margin-top: 0.5rem;
}

/* Summary details card for QC dashboard */
.summary-details-card {
    background-color: var(--secondary);
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-top: 1rem;
}
.summary-details-card h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
}
.summary-details-card .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
}
.summary-details-card .details-grid div {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
}
.summary-details-card .details-grid .title {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.2rem;
}
.summary-details-card .details-grid .value {
    font-size: 0.95rem;
    color: var(--text);
}

/* Latest details card styling (used for QC details and monitor) */
.latest-details-card {
    background-color: #fdfdfd;
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid #eee;
    box-shadow: var(--shadow);
    margin-top: 1rem;
}
.latest-details-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--primary);
}
/* Details group styling for latest details */
.details-group {
    margin-bottom: 1.5rem;
}
.details-group h4 {
    margin: 0.5rem 0;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.25rem;
}
.details-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.3rem 1rem;
}
.details-group li {
    font-size: 0.85rem;
    color: #444;
}
.details-group li strong {
    color: var(--primary);
}