/* Styles extracted from index.php <style> block and a few inline attributes converted to selectors.
   Keeps visual rules separate from markup. Theme variables live in theme.css (imported before this file).
*/

body {
    padding: 1.5rem;
    padding-bottom: calc(3rem + 24px); /* Space for fixed footer */
    background-color: var(--primary-bg);
    font-size: 0.875rem;
    color: #2d3748;
    min-height: 100vh;
    font-family: var(--font-sans);
}

/* Phone landscape and small tablets: keep horizontal scroll available */
@media (max-width: 420px) {
    .table-responsive { overflow-x: auto; }
    #resultsTable { min-width: 1000px; }
}

.fixed-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #447C9D;
    border-top: 1px solid var(--border-color);
    padding: 0.3rem 1.2rem;
    font-size: 0.85rem;
    color: lightgrey;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1040;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

h1 {
    font-size: 1.5rem;
    color: #1a365d;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* search form uses Bootstrap row classes; no extra rules necessary here */

.equal-filter {
    width: 220px;
}

/* Slightly wider city filter so full value is visible on larger screens */
#city { min-width: 180px; }

.table-responsive {
    margin-top: 1rem;
    background: white;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.table {
    font-size: 0.8rem;
    margin-bottom: 0;
}

.table thead th {
    background-color: var(--header-bg);
    color: var(--header-text);
    font-weight: 600;
    font-size: 0.8rem;
    border-bottom: none;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.table thead th:hover {
    background-color: var(--header-bg-hover, #234578);
}

.sort-icon {
    opacity: 0.3;
    font-size: 0.75rem;
    margin-left: 0.25rem;
    transition: all 0.2s;
    display: inline-block;
    width: 1em;
    text-align: center;
}

th[data-sort] .sort-icon::before {
    content: '↓';
    display: inline-block;
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.18s ease;
}

th[data-sort].active .sort-icon {
    opacity: 1;
}

th[data-sort].active.desc .sort-icon::before {
    transform: rotate(180deg);
}

.table td {
    padding: 0.50rem 0.15rem; /* further reduced row height */
    vertical-align: middle;
    border-color: var(--border-color);
    line-height: 1.2;
}

.table thead th { padding: 0.4rem 0.5rem; }

.col-resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
}

.email-field {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18rem;
}

.table tbody tr:hover { background-color: var(--table-hover); }

.form-control, .form-select {
    font-size: 0.875rem;
    border-color: var(--border-color);
    background-color: var(--content-bg);
}

.form-control:focus, .form-select:focus {
    border-color: var(--link-color);
    box-shadow: 0 0 0 0.15rem rgba(43, 108, 176, 0.15);
    background-color: white;
}

.pagination {
    margin-top: 1rem;
    font-size: 0.875rem;
    gap: 0.25rem;
}

/* When pagination is placed inline with other controls, remove the top margin to align vertically */
.d-flex.align-items-center > nav .pagination { margin-top: 0; }

.filter-badge {
    display: inline-block;
    background: rgba(43,108,176,0.08);
    color: var(--link-color);
    border: 1px solid rgba(43,108,176,0.12);
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    margin-right: 0.4rem;
    margin-bottom: 0.25rem;
}
.filter-area .filter-badge { margin-right: 0.4rem; }
.filter-area #filterBadges { display:flex; gap:0.4rem; align-items:center; }

.page-link {
    padding: 0.375rem 0.75rem;
    color: var(--link-color);
    border: none;
    border-radius: 0.25rem;
    transition: all 0.2s;
    font-size: 0.875rem; /* match export button (btn-sm) */
}

.page-link:hover {
    background-color: var(--table-hover);
    color: var(--link-hover);
    transform: translateY(-1px);
}

.page-item.active .page-link {
    background-color: var(--pagination-active);
    color: white;
    font-weight: 500;
}

/* Make the middle pagination indicator ("Σελίδα X από Y") match #totalCount styling */
.pagination .page-item.active span.page-link {
    background: transparent;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.9rem; /* match #totalCount */
    border: none;
    box-shadow: none;
    padding: 0; /* inline text like totalCount */
    cursor: default;
}

/* Prevent hover effects on the indicator */
.pagination .page-item.active span.page-link:hover {
    background: transparent;
    color: var(--text-muted);
    transform: none;
}

#loadingIndicator {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

#fetchError { display: none; }

.alert { font-size: 0.875rem; border-radius: 0.375rem; }

@media (max-width: 768px) {
    body { padding: 0.75rem; }
    .table td, .table th { padding: 0.5rem 0.625rem; }
    h1 { font-size: 1.25rem; padding: 0.5rem 0.75rem; }
}

/* Mobile-first tweaks for very small devices; no effect on desktop */
@media (max-width: 576px) {
    /* Stack the search form controls */
    #searchForm > .col-auto { width: 100%; }
    .equal-filter { width: 100%; }
    /* Make selects expand to full width for easier tapping */
    #searchForm .form-select { width: 100%; }
    /* Header wraps nicely */
    .page-header { flex-wrap: wrap; }
    .site-logo { height: 36px; }

    /* 1) Table: show all columns with horizontal scroll (do not clip vertically to allow sticky header) */
    .table-responsive { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
    /* Ensure the table is wider than the viewport so horizontal scroll appears */
    #resultsTable { min-width: 1000px; }

    /* Keep lastname column visible while horizontal scrolling */
    #resultsTable th:nth-child(2),
    #resultsTable td:nth-child(2) {
        position: sticky;
        left: 0;
        background: #ffffff;
        z-index: 2;
    }
    /* Make header cell sit above body cells */
    #resultsTable thead th:nth-child(2) {
        z-index: 3;
        background: var(--header-bg);
        color: var(--header-text);
    }
    /* Make entire header row sticky at the top during vertical scroll */
    #resultsTable thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        background: var(--header-bg);
        color: var(--header-text);
    }

    /* Avoid content overlapping sticky header */
    #resultsTable tbody td { background: #ffffff; }

    /* 2) Controls row: one control per line, in DOM order */
    .controls-row > .d-flex { flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; width: 100%; }
    #totalCount { margin-left: 0; text-align: center; display: block; width: 100%; }
    #per_page { width: 100%; }
    .controls-row nav { width: 100%; }
    .controls-row nav .pagination { justify-content: center; width: 100%; display: flex; }
    .controls-row nav .pagination .page-item { flex: 1 0 auto; }
    .controls-row nav .pagination .page-link { width: 100%; text-align: center; }
    /* Page indicator full width & centered */
    #pageIndicator { display: block; width: 100%; text-align: center; }
    #exportExcelBtn, #exportPdfBtn { width: 100%; margin-left: 0; }

    /* Extra bottom spacing under print button */
    #exportPdfBtn { margin-bottom: 1rem; }

    /* 3) Footer: not fixed on mobile; visible only at the end */
    .fixed-footer { position: static; }
    body { padding-bottom: 1rem; }
}

/* Apply the same table/controls behavior for phones in landscape and tablets */
@media (max-width: 992px) {
    /* Table container scrolls both ways so sticky headers work */
    .table-responsive {
        overflow-x: auto;
        overflow-y: visible; /* allow page (viewport) to handle vertical scroll so headers stick to top */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y; /* allow both horizontal and vertical swipe */
        overscroll-behavior-x: contain;
        position: relative;
    }
    /* Force horizontal scroll */
    #resultsTable { min-width: 1100px; width: max-content; border-collapse: separate; border-spacing: 0; }
    /* Sticky header row */
    #resultsTable thead th { position: sticky; top: 0; z-index: 4; background: var(--header-bg); color: var(--header-text); }
    /* Sticky lastname column */
    #resultsTable th:nth-child(2),
    #resultsTable td:nth-child(2) { position: sticky; left: 0; background: #ffffff; z-index: 3; }
    #resultsTable thead th:nth-child(2) { z-index: 5; background: var(--header-bg); color: var(--header-text); }

    /* Highlight sticky lastname column only when container is scrolled horizontally */
    .table-responsive.scrolled-x #resultsTable th:nth-child(2),
    .table-responsive.scrolled-x #resultsTable td:nth-child(2) {
        background-color: #6996da; /* #f0f6ff subtle highlight */
        box-shadow: 2px 0 0 rgba(0,0,0,0.06);
    }

    /* Controls under table: full width & centered */
    .controls-row > .d-flex { flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; width: 100%; }
    #totalCount { margin-left: 0; text-align: center; display: block; width: 100%; }
    #per_page { width: 100%; }
    .controls-row nav { width: 100%; }
    .controls-row nav .pagination { justify-content: center; width: 100%; display: flex; }
    #pageIndicator { display: block; width: 100%; text-align: center; }
    #exportExcelBtn, #exportPdfBtn { width: 100%; margin-left: 0; }
    #exportPdfBtn { margin-bottom: 1rem; }

    /* Footer not fixed on these widths */
    .fixed-footer { position: static; }
    body { padding-bottom: 1rem; }
}

.page-frame {
    width: 100%;
    margin: 0 auto;
    background: white;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0.5rem 1rem;
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.page-header h1 { margin:0; font-size:1.125rem; color:var(--header-bg); padding:0; background:transparent; box-shadow:none; }
#searchForm { margin: 0; padding: 0; background: transparent; box-shadow: none; }

/* moved inline attributes into classes */
.site-logo { height: 44px; margin-left: 1rem; }
#activeFilters { padding: 0.25rem 1rem 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
#activeFilters > div { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
#activeSorts { font-size:0.85rem; color:#34495e; display:none; align-items:center; }
#activeSortsLabel { font-size:0.85rem; color:#34495e; margin-left:0.5rem; display:none; }
#sortBadges { display:inline-flex; gap:0.4rem; align-items:center; margin-left:0.4rem; }
#totalCount { margin-left:0.8rem; font-size:0.9rem; color:var(--text-muted); }
#pageIndicator { font-size:0.9rem; color: var(--text-muted); display:inline-block; }
#per_page { width: auto; }
.controls-row .pagination { margin-top: 0; }

/* small spacing tweak for the export button next to pagination */
#exportExcelBtn {
    margin-left: 0.5rem;
    background-color: #205565; /* serious, consistent with header theme */
    color: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#exportExcelBtn:hover {
    background-color: #1b4753;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

#exportExcelBtn:focus, #exportExcelBtn:focus-visible {
    outline: 3px solid rgba(32,85,101,0.35);
    outline-offset: 2px;
}

#exportExcelBtn:active {
    background-color: #163a44;
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) inset;
}

#exportExcelBtn:disabled {
    background-color: #6b8790;
    color: #f0f4f6;
    opacity: 0.85;
    cursor: not-allowed;
}

/* PDF export button styles (serious, high-contrast) */
#exportPdfBtn {
    margin-left: 0.5rem;
    background-color: #7a1e1e; /* deep red, professional tone */
    color: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#exportPdfBtn:hover {
    background-color: #651919;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

#exportPdfBtn:focus, #exportPdfBtn:focus-visible {
    outline: 3px solid rgba(122,30,30,0.35);
    outline-offset: 2px;
}

#exportPdfBtn:active {
    background-color: #4f1414;
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) inset;
}

#exportPdfBtn:disabled {
    background-color: #9a5a5a;
    color: #f8eeee;
    opacity: 0.85;
    cursor: not-allowed;
}

.record-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.record-modal-overlay.show { display: flex; }

.record-modal {
    width: 92vw;
    max-width: 560px;
    max-height: 86vh;
    background: var(--content-bg, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.record-modal-header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 0.6rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.record-modal-title { font-weight: 600; }

.record-modal-close {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--header-text);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    cursor: pointer;
}

.record-modal-close:hover { opacity: 0.85; }

.record-modal-body {
    padding: 0.9rem;
    overflow: auto;
    background: var(--content-bg, #ffffff);
}

.record-detail {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.35rem 0.6rem;
    font-size: 0.95rem;
}

.record-detail dt {
    color: #2d3748;
    font-weight: 400;
    text-align: right;
}

.record-detail dd {
    margin: 0;
    font-weight: 600;
}

@media (max-width: 576px) {
    .record-modal { width: 96vw; max-height: 88vh; }
}