/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Nov 13, 2025, 10:16:56 AM
    Author     : Suhas Gaikwad
*/

/*body {
    font-family: Arial, sans-serif;
    margin: 20px;
}*/

/* Layout: left facets, right table */
#mainContainer {
    display: flex;
    gap: 20px;
}

#facetsWrapper {
    display: flex;
    flex-direction: column; /* stack vertically */
    gap: 5px; /* space between each facet */
    /*    width: 400px;  optional: fix column width */
}

.facet {
    width: 100%; /* full width of the parent column */
    max-height: 25vh;
    overflow-y: auto; /* scroll if content exceeds max-height */
    /*    padding: 10px;*/
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 5px 14px;
    scrollbar-width: thin;
    /*    background: #f9f9f9;
        border: 1px solid #ddd;*/
    box-sizing: border-box; /* ensure padding + border included in width */
    /*    margin-bottom: 8px;  space between facets */
}

.facet .facet-group {
    margin-bottom: 20px;
}

.facet .facet-group {
    margin-bottom: 20px;
}

.facet-search-wrapper {
    position: relative;
    /*    margin-bottom: 15px;*/
}

.facet-search {
    /*    width: 100%;
        padding: 4px 26px 4px 6px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 13px;*/
    /*    display: block;*/
    display: none;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
/*    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);*/
    transition: border-color .15s
        ease-in-out, box-shadow .15s
        ease-in-out;
}

.facet-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-weight: bold;
    color: #999;
    display: none;
}
.facet-clear:hover {
    color: #333;
}

.facet-option {
    display: block;
    margin: 3px 0;
    font-size: 100%;
}
.facet-option input {
    margin-right: 6px;
}
.highlight {
    background-color: yellow;
}
.multi-line {
    white-space: normal !important;
    word-wrap: break-word;
}

#resetFilters {
    /*    margin-top: 10px;
        padding: 6px 10px;*/
    /*    background: #007bff;*/
    /*    color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;*/
}
#resetFilters:hover {
    /*    background: #0056b3;*/
}

/* Museum table container (right column) */
#museumTable-container {
    flex: 1;              /* take remaining space */
    min-width: 0;         /* allow table to shrink */
    overflow-x: auto;     /* horizontal scroll if needed */
}

/* Table text truncation */
#museumTable th, #museumTable td {
    max-width: 200px;     /* adjust as needed */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wrap long text for specific columns */
#museumTable td:nth-child(7)
#museumTable td:nth-child(8),
#museumTable td:nth-child(15),
#museumTable td:nth-child(16) {
    white-space: normal;
    word-break: break-word;
}

.museum-img {
    width: 250px !important;
    min-height: 150px !important;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
}

#museumTable td {
    white-space: normal !important; /* allow line breaks */
    word-wrap: break-word;          /* wrap long words */
}
#museumTable th {
    white-space: normal !important; /* optional for headers */
}

/* Align controls nicely */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dt-action {
    /*  display: inline-flex;*/
    align-items: center;
    margin: 5px 10px;
    display: none; /******Hide show, museum directory button and seacrh input********/
}

/* On small screens, stack them vertically */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dt-action {
        display: block;
        text-align: left;
        margin: 8px 0;
        display: none;
    }
}

.dataTables_wrapper {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

table.dataTable thead {
    background:#ededed; /* #e4e7f3;*/
    color: #111;
}

table.dataTable tbody tr:hover {
    background-color: #f2f7ff;
}

table.dataTable td, th {
    border: 0.1px solid #ccc;
}

a.museum-details {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
/*    text-decoration: underline !important;*/
    cursor: pointer !important;
}
/**************pagination*************/

#moi-pagination {
    flex-wrap: wrap;              /* allow wrapping */
    justify-content: center;      /* center align */
    gap: 4px;                     /* spacing between items */
}

#moi-pagination .page-item {
    margin: 2px;                  /* small margin for better wrapping */
}

.card-footer nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .card-header {
        flex-direction: row;
        align-items: stretch;
    }
}
#moi-pagination .page-item.active .page-link {
    background: #353e4a;
    color: #fff;
    border-color: #353e4a;
}
#moi-pagination .page-item .page-link {
    background: #e2e5f2;
    color: #353e4a;
    border: 1px solid #ddd;
    padding: 3px 9px;
    border-radius: 4px;
    transition: all 0.3s
        ease;
}
.dt-action.btn {
    /*    color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);*/
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.bg-gray{
    background: #f9f9f9;
}
.dataTables_info{
    margin-left: 1rem;
}