/*
 * File: directory.css
 * Version: mmdb-0.8.26-claude
 * Munich Musicians DB - Directory and Table Styles
 * Search controls, results tables, and directory navigation
 * 0.8.7 CR: pagination for directory search
 * 0.8.7a FIX: pagination under results table
 * 0.8.8 CR: search for persons/bands-projects/all
 * 0.8.9 CR: better grouping of filters
 * 0.8.9a FIX: Alignment of filters section
 * 0.8.9b FIX: alignment of filters section - again
 */

/* Directory Styles */
.imm-directory{margin:20px 0}
.directory-search{background:#f9f9f9;padding:20px;border-radius:8px;margin-bottom:20px}
.search-controls{display:flex;flex-direction:column;gap:15px}
.search-controls input[type="text"]{flex:1;padding:10px;border:1px solid #ccc;border-radius:6px;font-size:16px}
.search-filters{display:flex;flex-direction:column;gap:12px}

/* Filter Sections */
.filter-section{display:flex;align-items:center;gap:10px;padding:10px 15px;background:#f8f9fa;border-radius:6px;border:1px solid #e0e0e0}
.filter-section-type{background:#e3f2fd;border-color:#90caf9}
.filter-section-basic{background:#f8f9fa;border-color:#e0e0e0}
.filter-section-advanced{background:#fff3e0;border-color:#ffb74d}

/* Filter Section Labels */
.filter-section-label{font-weight:600;font-size:13px;color:#555;min-width:90px;text-transform:uppercase;letter-spacing:0.5px}

/* Hide filters based on entity type selection */
.filter-group-inline label.hidden-filter{display:none !important}

/* Filter Groups */
.filter-group-inline{display:flex;gap:15px;flex-wrap:wrap;align-items:center;justify-content:center}
.filter-section-basic .filter-group-inline,
.filter-section-advanced .filter-group-inline{justify-content:flex-start}
.filter-group-inline label{display:flex !important;flex-direction:row !important;align-items:center;gap:6px;font-size:14px;cursor:pointer;white-space:nowrap}
.filter-group-inline label:hover{color:#007cba}

/* Radio and Checkbox Styling */
.filter-group-inline input[type="radio"],
.filter-group-inline input[type="checkbox"]{cursor:pointer;width:16px;height:16px}
.directory-results{background:#fff;border:1px solid #ddd;border-radius:8px}
.results-info{padding:15px;background:#f8f9fa;border-bottom:1px solid #ddd;font-weight:bold}
.results-table-container{overflow-x:auto}

/* Table styles - made 3 sizes smaller */
.directory-table{width:100%;border-collapse:collapse;font-size:12px}
.directory-table th,.directory-table td{padding:8px 6px;text-align:left;border-bottom:1px solid #eee;font-size:12px}
.directory-table th{background:#f8f9fa;font-weight:bold;position:sticky;top:0;font-size:12px}

/* Sortable headers */
.directory-table th.sortable{cursor:pointer;user-select:none}
.directory-table th.sortable:hover{background:#e9ecef}
.directory-table th.sortable::after{content:' ↕';opacity:0.5;font-size:10px}
.directory-table th.sort-asc::after{content:' ↑';opacity:1;color:#007cba}
.directory-table th.sort-desc::after{content:' ↓';opacity:1;color:#007cba}

/* Column tooltips */
.directory-table th[data-sort="bookable"],
.directory-table th[data-sort="open_for_collab"]{
  position:relative;
}

.directory-table th[data-sort="bookable"]::before{
  content:"Bookable";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  background:#333;
  color:#fff;
  padding:4px 8px;
  border-radius:4px;
  font-size:11px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s;
  z-index:100;
}

.directory-table th[data-sort="open_for_collab"]::before{
  content:"Open for collaboration";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  background:#333;
  color:#fff;
  padding:4px 8px;
  border-radius:4px;
  font-size:11px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s;
  z-index:100;
}

.directory-table th[data-sort="bookable"]:hover::before,
.directory-table th[data-sort="open_for_collab"]:hover::before{
  opacity:1;
  visibility:visible;
}

.photo-cell{width:60px;text-align:center}
.musician-photo{width:50px;height:50px;border-radius:6px;object-fit:cover}
.no-photo{width:50px;height:50px;border:2px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#999}
.status-badge{padding:4px 8px;border-radius:4px;font-size:10px;font-weight:bold;text-transform:uppercase}
.status-yes{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.status-no{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}

/* Band indicator in directory */
.band-indicator {
    color: #007cba;
    font-weight: bold;
    font-size: 0.8rem;
    background: #e6f3ff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

/* Clickable rows for directory */
.directory-table tbody tr.clickable{cursor:pointer;transition:background-color 0.2s}
.directory-table tbody tr.clickable:hover{background:#f0f8ff}
.directory-table tbody tr.artist-row.clickable:hover{background:#f0f8ff}
.directory-table tbody tr.band-row.clickable:hover{background:#fff8e6}

/* Pending Requests Popup */
.imm-pending-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending-popup-content {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    animation: popupFadeIn 0.3s ease-out;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.pending-popup-content h3 {
    margin: 0 0 20px 0;
    color: #007cba;
    font-size: 1.4rem;
    text-align: center;
}

.pending-popup-content p {
    margin: 0 0 20px 0;
    color: #333;
    text-align: center;
}

.pending-bands-list {
    margin: 20px 0;
    max-height: 300px;
    overflow-y: auto;
}

.pending-band-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 8px 0;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.pending-band-item:hover {
    background: #e3f2fd;
    border-color: #007cba;
    transform: translateX(5px);
}

.band-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.band-info strong {
    color: #333;
    font-size: 1.1rem;
}

.request-count {
    color: #d63638;
    font-weight: bold;
    font-size: 0.9rem;
}

.band-arrow {
    color: #007cba;
    font-size: 1.2rem;
    font-weight: bold;
}

.pending-popup-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.button-secondary {
    padding: 10px 20px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.button-secondary:hover {
    background: #e0e0e0;
    border-color: #bbb;
}

.button-primary {
    padding: 10px 20px;
    background: #007cba;
    color: #fff;
    border: 1px solid #007cba;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.button-primary:hover {
    background: #005a8b;
    border-color: #005a8b;
}

/* Button group for Search and Reset buttons */
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.button-group #search-btn {
    flex: 3;
}

.button-group #reset-filters-btn {
    flex: 1;
    padding: 10px 20px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.button-group #reset-filters-btn:hover {
    background: #e0e0e0;
    border-color: #bbb;
}

/* Pagination Styles */
.directory-pagination-bottom{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f8f9fa;border-top:1px solid #ddd;flex-wrap:wrap;gap:10px}
.pagination-controls{display:flex;align-items:center;gap:10px}
.pagination-controls label{font-size:14px;font-weight:normal;margin:0}
.pagination-controls select{padding:5px 8px;border:1px solid #ccc;border-radius:4px;font-size:14px;cursor:pointer}
.pagination-buttons{display:flex;align-items:center;gap:8px}
.pagination-btn{padding:6px 12px;font-size:14px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all 0.2s}
.pagination-btn:hover:not(:disabled){background:#f0f0f0;border-color:#999}
.pagination-btn:disabled{opacity:0.5;cursor:not-allowed;background:#f5f5f5}
.page-info{font-size:14px;color:#555;margin:0 10px;white-space:nowrap;font-weight:normal}

/* Limit Warning */
.limit-warning{background:#fff3cd;border:1px solid #ffc107;color:#856404;padding:10px 15px;margin-top:10px;border-radius:4px;font-size:14px;font-weight:normal}

/* Responsive Filter Sections */
@media (max-width:768px){
  .filter-section{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .filter-section-label{min-width:auto;margin-bottom:5px}
  .filter-group-inline{gap:10px}
  .filter-group-inline label{font-size:13px}
}

/* Responsive Pagination */
@media (max-width:768px){
  .directory-pagination-bottom{flex-direction:column;align-items:center;gap:8px;padding:12px}
  .pagination-controls{justify-content:center;width:100%}
  .pagination-controls label{font-size:13px}
  .pagination-controls select{font-size:13px;padding:4px 6px}
  .pagination-buttons{justify-content:center;gap:5px;flex-wrap:nowrap}
  .pagination-btn{padding:6px 8px;font-size:11px;white-space:nowrap}
  .page-info{font-size:11px;margin:0 8px;white-space:nowrap}
}

/* Tag-Based Search Fields (Advanced Directory) - Collapsible Complex Filters */
.filter-section-tags{background:#e8f5e9;border-color:#4caf50;flex-direction:column;align-items:stretch;padding:0;box-sizing:border-box}
.filter-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;cursor:pointer;user-select:none;background:#e8f5e9;border-radius:6px 6px 0 0;box-sizing:border-box}
.filter-section-header:hover{background:#c8e6c9}
.filter-section-header .filter-section-label{margin:0}
.toggle-arrow{font-size:16px;transition:transform 0.3s ease;display:inline-block;color:#4caf50;font-weight:bold}
.toggle-arrow.expanded{transform:rotate(180deg)}
.filter-group-tags{display:flex;flex-direction:column;gap:12px;width:100%;padding:15px;box-sizing:border-box}
.tag-search-row{display:grid;grid-template-columns:120px 1fr;gap:15px;align-items:center;box-sizing:border-box;max-width:100%}
.tag-label{font-weight:600;font-size:13px;color:#555;text-align:left;padding:0;line-height:1.2}
.tag-search-row .tagbox{width:100%;min-height:38px;box-sizing:border-box;max-width:100%}
.tag-search-row .tagbox .tag{white-space:nowrap}
.tag-search-row select.category-select{width:100%;padding:8px;border:1px solid #ccc;border-radius:6px;font-size:14px;box-sizing:border-box}

/* Hide CREATE buttons in advanced directory tagboxes (search-only mode) */
.filter-section-tags .tagbox .suggest .add-new-term{display:none !important}

/* Responsive Tag Search */
@media (max-width:768px){
  .tag-search-row{grid-template-columns:1fr;gap:6px}
  .tag-label{padding-top:0;margin-bottom:4px}
}