/**
 * crud.css - Styling for SQLiteCrud Stack Frontend
 * 
 * Provides styling for the SQLiteCrud stack, including table, form inputs, buttons, modals, 
 * pagination, direct edit, and image thumbnails. Builds on updater.css from F62MySqlUpdate, 
 * using 'crud-' and 'updater-' prefixed classes. Hides original labels for checkbox and radio 
 * fields to prevent duplicates, rendering them inline with baseline alignment (e.g., "Column: Value [ ]" 
 * for checkboxes, "Column: O Value1 O Value2" for radios). Buttons are compatible with Foundation/Bootstrap 
 * via 'btn button'. Devs can override styles by editing this file in the backend folder.
 */

/* Container for the entire CRUD interface */
.crud-container {
    margin: 20px auto;
    max-width: 90%;
}

/* Header section with title and tools */
.crud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* Reduced from 15px to bring table closer */
}

.crud-header h2 {
    margin: 0;
    font-size: 1.5em;
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* Header tools - filter and buttons inline */
.crud-header-tools {
    display: flex;
    align-items: center;
    gap: 30px; /* Increased gap to push filter left, separate from tools */
    flex-wrap: nowrap; /* Keep everything on one line */
}

/* Filter form - inline layout, shifted left */
.crud-filter-form {
    display: flex;
    align-items: center; /* Center-align all elements vertically */
    gap: 8px; /* Tight spacing between filter elements */
    margin-right: 0; /* Remove right margin - let gap handle spacing */
}

/* Filter group - label above input */
.crud-filter-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Filter labels - small font, tighter spacing */
.crud-filter-label {
    font-size: 0.75rem; /* 12px - small font */
    color: #555; /* Subtle gray */
    margin-bottom: 2px; /* Reduced from 4px to 2px - closer to input */
    line-height: 1; /* Prevent extra height from line spacing */
}

/* Filter inputs - compact styling */
.crud-filter-column,
.crud-filter-operator,
.crud-filter-value {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem; /* Slightly smaller than buttons */
    height: 34px; /* Match button height */
    box-sizing: border-box; /* Include padding in height */
}

.crud-filter-column,
.crud-filter-operator {
    width: 120px; /* Fixed width for selects */
}

.crud-filter-value {
    width: 150px; /* Slightly wider for input */
}

/* Tools section (Add, Export buttons) */
.crud-tools {
    display: flex;
    gap: 10px;
}

/* Button styling - unified for all CRUD buttons */
.crud-add-btn, .crud-edit-btn, .crud-delete-btn, .crud-details-btn, .crud-export-btn, 
.crud-submit-btn, .crud-confirm-delete-btn, .crud-filter-btn, .crud-clear-btn {
    padding: 8px 15px;
    margin: 0 5px 0 0; /* Remove right margin for filter inline */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background-color: #007bff; /* Default blue */
    font-size: 0.9rem;
    height: 34px; /* Match input height */
    line-height: 1; /* Center text vertically */
    transition: background-color 0.3s;
    box-sizing: border-box; /* Include padding in height */
}

.crud-add-btn:hover, .crud-edit-btn:hover, .crud-submit-btn:hover, .crud-details-btn:hover, 
.crud-export-btn:hover, .crud-filter-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.crud-delete-btn, .crud-confirm-delete-btn {
    background-color: #dc3545; /* Red for delete */
}

.crud-delete-btn:hover, .crud-confirm-delete-btn:hover {
    background-color: #b02a37;
}

.crud-details-btn {
    background-color: #17a2b8; /* Cyan for details */
    text-decoration: none;
    display: inline-block;
}

.crud-details-btn:hover {
    background-color: #117a8b;
}

.crud-clear-btn {
    background-color: #6c757d; /* Gray for Clear */
}

.crud-clear-btn:hover {
    background-color: #5a6268; /* Darker gray on hover */
}

/* Table wrapper for scrolling */
.crud-table-wrapper {
    overflow-x: auto; /* Enable horizontal scroll when content overflows */
}

/* Table styling */
.crud-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5px; /* Reduced from 20px to bring footer closer */
}

.crud-table th,
.crud-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    min-width: 0; /* Prevent flex shrinkage issues */
}

.crud-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.crud-table td {
    vertical-align: middle;
}

.crud-table[data-wrap="true"] td {
    white-space: normal; /* Wrap text if wrapcells=1 */
}

.crud-table[data-wrap="false"] td {
    white-space: nowrap; /* No wrap if wrapcells=0 */
    text-overflow: ellipsis; /* Keep ellipsis for visual cue */
}

/* Sortable column headers */
.sortable {
    color: #007bff;
    text-decoration: none;
}

.sortable:hover {
    text-decoration: underline;
}

/* Image thumbnails */
.crud-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.crud-image-small {
    width: 50px;
}

.crud-image-medium {
    width: 100px;
}

.crud-image-large {
    width: 150px;
}

/* Label styling for non-inline fields - flush left, close to input */
label {
    display: block;           /* Ensures label takes full width above input */
    text-align: left;         /* Aligns text flush left */
    margin-bottom: 2px;       /* Tight spacing above input */
    font-weight: bold;        /* Enhances readability of field names */
}

/* General input styling for block elements */
.updater-text, .updater-number, .updater-date, .updater-textarea, .updater-select {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.updater-textarea {
    height: 100px;
    resize: vertical;
}

/* Style original generated field labels */
.updater-text-org, 
.updater-number-org, 
.updater-date-org, 
.updater-textarea-org, 
.updater-select-org, 
.updater-image-org {
    margin-bottom: 0px;      /* Space between label and field */
}

.updater-checkbox-org,
.updater-radio-org {
    display: none;           /* Hide original labels for checkbox and radio to prevent duplicates */
}

/* Checkbox styling - inline with label on left, baseline-aligned */
.updater-checkbox-label {
    display: inline-flex;     /* Flexbox for precise inline alignment */
    align-items: baseline;    /* Aligns label text and checkbox at baseline */
    justify-content: flex-start; /* Forces content to start at left */
}

.updater-checkbox-label-text {
    margin-right: 4px;        /* Space between label text and checkbox */
    margin-left: 4px;         /* Space between colon and value */
    vertical-align: baseline; /* Ensures text baseline matches checkbox */
}

.updater-checkbox {
    margin-right: 5px;        /* Small space after checkbox for readability */
    margin-left: 2px;         /* Small space before checkbox for readability */
    vertical-align: baseline; /* Aligns checkbox with text baseline */
}

/* Radio button styling - inline with label on left, baseline-aligned */
.updater-radio-label {
    display: inline-flex;     /* Flexbox for precise inline alignment */
    align-items: baseline;    /* Aligns label text and radio at baseline */
    justify-content: flex-start; /* Forces content to start at left */
    margin-right: 0;          /* Remove default margin */
    margin-bottom: 0;         /* Remove default margin */
}

.updater-radio-label-text {
    margin-right: 10px;       /* Space between label text and next radio button */
    margin-left: 2px;         /* Space between radio button and its label */
    vertical-align: baseline; /* Ensures text baseline matches radio */
}

.updater-radio {
    margin-right: 2px;        /* Small space after radio for readability */
    margin-left: 4px;         /* Small space before radio for readability */
    vertical-align: baseline; /* Aligns radio with text baseline */
}

/* Direct edit input */
.crud-direct-input {
    padding: 5px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Direct edit span (clickable) */
.crud-direct-edit {
    cursor: pointer;
    border-bottom: 1px dotted #007bff; /* Visual clue */
    display: block;
}

.crud-direct-edit:hover {
    background-color: #f0f8ff; /* Slight highlight on hover */
}

/* Pagination and rows returned footer */
.crud-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px; /* Reduced from 15px to bring closer to table */
}

.crud-rows-returned {
    font-size: 0.9rem;
    color: #555;
}

/* Pagination styling */
.crud-pagination {
    display: flex;
    gap: 10px;
}

.crud-pagination a {
    padding: 8px 12px;
    text-decoration: none;
    color: #007bff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.crud-pagination a.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.crud-pagination a:hover:not(.active) {
    background-color: #f8f9fa;
}

/* Modal Styling - Wider and cleaner */
.crud-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 1000;
    width: 80%; /* Wider default width */
    max-width: 600px; /* Reasonable max-width for form readability */
    max-height: 90vh;
    overflow-y: auto;
}

.crud-modal h3 {
    margin: 0 0 15px 0; /* Tighten top, space below */
    font-size: 1.5em;
}

/* Close Button - Small "X" in top-right */
.crud-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    font-size: 1.5em; /* Slightly smaller than before */
    color: #777;
    cursor: pointer;
    line-height: 24px;
    text-align: center;
}
.crud-modal-close::before {
    content: '×'; /* Unicode "X" */
}
.crud-modal-close:hover {
    color: #333; /* Darken on hover */
}

/* Image input wrapper for forms */
.crud-image-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between input and image */
}

.updater-text {
    flex: 1; /* Input takes remaining space */
}