/* ---
 * /public_html/css/style.css
 * Global Stylesheet for Maintenance App (with Mobile Styles)
 * --- */

/* --- 1. Global Reset & Body --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: 16px; /* Base font size */
}

* {
    box-sizing: border-box;
}

/* --- 2. Main Layout (Header, Footer, Container) --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem; /* Reduced padding for smaller screens */
}

main.container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-top: 1rem; /* Reduced margin */
    margin-bottom: 1rem;
}

.main-header {
    background: #fff;
    border-bottom: 2px solid #eee;
    padding: 0 1rem;
}

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 0; /* Slightly reduced padding */
}

.nav-logo a {
    font-size: 1.25rem; /* Slightly smaller logo */
    font-weight: 600;
    color: #333;
    text-decoration: none;
    margin-right: 1rem; /* Add space for wrapping */
}

.nav-links {
    display: flex;
    flex-wrap: wrap; /* Allow links to wrap */
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
    margin-left: 1rem; /* Reduced margin */
    white-space: nowrap; /* Prevent ugly link breaks */
    font-size: 0.9rem; /* Slightly smaller links */
}
.nav-links a.logout { color: #d93025; }

.main-footer {
    text-align: center;
    padding: 1rem 0;
    color: #888;
    font-size: 0.9rem;
    border-top: 1px solid #eee;
    margin-top: 1rem;
}

/* --- 3. Typography --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}
h1 { font-size: 1.75rem; } /* Smaller H1 */
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p { margin-top: 0; margin-bottom: 1rem; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- 4. Tables (for index.php, admin pages) --- */
/* NEW: Wrapper for horizontal scrolling on mobile */
.table-responsive-wrapper {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 1rem; /* Add some space below the scrollable area */
}

.item-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    min-width: 600px; /* Force scrollbar if table is wider than screen */
}

.item-table th,
.item-table td {
    padding: 10px 12px; /* Slightly reduced padding */
    border-bottom: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap; /* Prevent text wrapping */
}

.item-table th {
    background-color: #f9f9f9;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem; /* Smaller header */
    color: #555;
}

.item-table tr:hover {
    background-color: #fbfbfb;
}

/* --- 5. Forms (for add_item, change_password, admin) --- */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: inherit;
}

.form-group textarea {
    min-height: 120px; /* Slightly smaller */
}

/* --- 6. Buttons (Global) --- */
.btn {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 0.65rem 1.25rem; /* Slightly smaller */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem; /* Slightly smaller */
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}
.btn:hover {
    background-color: #0056b3;
    color: white;
    text-decoration: none;
}
/* ... (btn-secondary, btn-danger styles unchanged) ... */
.btn-secondary { background-color: #6c757d; }
.btn-secondary:hover { background-color: #5a6268; }
.btn-danger { background-color: #d93025; }
.btn-danger:hover { background-color: #b0271e; }


/* --- 7. Utility Classes (Status Badges, Messages) --- */
.status-badge, .assign-badge, .reply-count-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem; /* Smaller badges */
    white-space: nowrap;
    border: 1px solid transparent; /* Base border */
}
.status-Entered { background-color: #e6f7ff; color: #0056b3; border-color: #b3e0ff; }
.status-In-Progress { background-color: #fffbe6; color: #b08c00; border-color: #ffe580; }
.status-Complete { background-color: #e6f4ea; color: #1e7e34; border-color: #b3d1b8; }
.status-Default { background-color: #f0f0f0; color: #333; border-color: #ccc; }

.assign-badge.assigned { background-color: #e6f7ff; color: #0056b3; border-color: #b3e0ff; }
.assign-badge.unassigned { background-color: #f8f9fa; color: #6c757d; border-color: #dee2e6; text-transform: uppercase; }

.reply-count-badge.read { background-color: #f8f9fa; color: #6c757d; border-color: #dee2e6; }
.reply-count-badge.unread { background-color: #e6f7ff; color: #0056b3; border-color: #b3e0ff; font-weight: 600; }
.reply-count-badge strong { color: #d93025; }

.message { padding: 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid; }
.success { background-color: #e6f4ea; color: #1e7e34; border-color: #b3d1b8; }
.error { color: #d93025; background: #fbeae9; border-color: #d93025; }

/* --- 8. Completed Item Styling --- */
.item-table tr.item-complete { background-color: #f8f9fa; color: #aaa; opacity: 0.8; }
.item-table tr.item-complete:hover { background-color: #f1f3f5; }
.item-table tr.item-complete a { color: #999; }
.item-table tr.item-complete .status-badge { background-color: #e9ecef; color: #6c757d; border-color: #dee2e6; }

/* --- 9. Clickable Table Row --- */
.item-table tbody tr { cursor: pointer; }

/* --- 10. Uploader Button Group --- */
.upload-button-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.upload-button-group .btn { padding: 10px 15px; font-size: 0.9rem; }

/* --- 11. Photo Uploader Previews --- */
.photo-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.preview-container { position: relative; width: 100px; height: 100px; /* Slightly smaller */ border-radius: 4px; border: 1px solid #ddd; overflow: hidden; }
.preview-img { width: 100%; height: 100%; object-fit: cover; }
.loading-spinner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); display: grid; place-items: center; font-weight: bold; }
.error-msg { color: #d93025; margin-top: 10px; }

/* --- 12. Assigned User Bubble --- */
/* (Styles are combined with other badges in section 7) */

/* --- 13. Reply Count & Read/Unread Statuses --- */
.reply.is-read { background-color: #f8f9fa; border-color: #eee; }
.reply.is-read .reply-header { color: #6c757d; }
.reply.is-unread { background-color: #fff9e6; border-color: #ffe580; }

/* --- 14. Store Group Header --- */
.item-table tr.store-group-header { background-color: #343a40; color: #fff; font-weight: bold; cursor: default; }
.item-table tr.store-group-header td { padding: 10px 15px; border-bottom: 2px solid #fff; }
.item-table tr.store-group-header:hover, .store-header:hover {
    background-color: #343a40 !important;
    color: #fff !important;
}
/* --- 15. Admin Grid Layout --- */
.admin-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 30px;
}
/* Two columns only on larger screens */
@media (min-width: 900px) {
    .admin-grid {
        grid-template-columns: 1fr 2fr;
    }
}
.form-container { background: #fdfdfd; border: 1px solid #ddd; border-radius: 5px; padding: 15px; } /* Slightly less padding */
.checkbox-group { display: flex; align-items: center; }
.checkbox-group input { width: auto; margin-right: 10px; }

.item-table tr.store-group-header, .store-header {
    background-color: #343a40;
    color: #fff;
    font-size: 1.5rem; /* Regular-ish size */
    font-weight: 700; /* Bold */
}
/* --- 16. Mobile Specific Adjustments --- */

@media (max-width: 768px) {
    .container, main.container {
        padding: 0.75rem; /* Even less padding */
    }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }

    .header-nav {
        padding: 0.5rem 0;
    }
    .nav-logo a {
        font-size: 1.1rem;
    }
    .nav-links {
        justify-content: flex-start; /* Align wrapped links left */
        margin-top: 0.5rem; /* Add space when wrapping */
    }
    .nav-links a {
        margin-left: 0;
        margin-right: 1rem; /* Space between wrapped links */
        font-size: 0.85rem;
    }

    .item-table th, .item-table td {
        padding: 8px 10px; /* Less padding in table cells */
        font-size: 0.9rem; /* Smaller table text */
    }

    /* Reduce photo preview size further if needed */
    .preview-container {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 600px) {
    /* Adjustments for very small screens */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    .upload-button-group .btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* Stack view_item.php columns */
    .item-container {
        grid-template-columns: 1fr; /* Force single column */
    }
}

/* --- 17. Table Column Fixes --- */

.item-table .col-description {
    white-space: normal;    /* <-- This allows the description to wrap */
    word-break: break-word; /* This breaks long words that won't wrap */
    min-width: 200px;       /* Give it a reasonable minimum width */
    max-width: 350px;       /* Force it to wrap after this width */
}