/* Graded Cards System Frontend Styles */

/* --- Search Form --- */
.gcsys-search-container { max-width: 700px; margin: 30px auto; padding: 20px; background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.gcsys-search-container form { display: flex; flex-direction: column; gap: 15px; }
.gcsys-search-container input[type="text"] { width: 100%; padding: 15px 20px; border: 1px solid #ccc; border-radius: 50px; font-size: 16px; box-sizing: border-box; transition: border-color 0.3s, box-shadow 0.3s; }
.gcsys-search-container input[type="text"]:focus { border-color: #6a1b9a; box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.2); outline: none; }
.gcsys-search-container input[type="submit"] { background-color: #6a1b9a; color: #fff; padding: 15px 20px; border: none; border-radius: 50px; cursor: pointer; font-size: 18px; font-weight: 600; width: 100%; transition: background-color 0.3s; }
@media (min-width: 600px) {
    .gcsys-search-container form { flex-direction: row; }
    .gcsys-search-container input[type="submit"] { width: auto; }
}

/* --- Search Results --- */
.gcsys-card-result { display: flex; flex-direction: column; gap: 20px; max-width: 700px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #e0e0e0; }
@media (min-width: 600px) { .gcsys-card-result { flex-direction: row; } }
.gcsys-card-image { flex-shrink: 0; text-align: center; }
.gcsys-card-image img { max-width: 200px; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.gcsys-card-details { flex-grow: 1; }
.gcsys-card-title { font-size: 1.8em; margin: 0 0 10px; }
.gcsys-card-details p { margin: 0 0 10px; font-size: 1.1em; }
.gcsys-card-grade { font-size: 1.2em; font-weight: bold; }
.gcsys-card-grade span { background-color: #6a1b9a; color: #fff; padding: 5px 10px; border-radius: 4px; margin-left: 5px; }
.gcsys-no-results { text-align: center; margin: 20px 0; padding: 20px; background-color: #fff3f3; border: 1px solid #ffcdd2; border-radius: 4px; }

/* --- Card List --- */
.gcsys-layout-wrapper.gcsys-view-grid .gcsys-table-view { display: none; }
.gcsys-layout-wrapper.gcsys-view-table .gcsys-grid-view { display: none; }
.gcsys-cards-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.gcsys-card-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: box-shadow 0.3s, transform 0.3s; }
.gcsys-card-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.gcsys-card-item-image img { width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; display: block; }
.gcsys-card-item-details { padding: 15px; }
.gcsys-card-item-title { font-size: 1.1em; margin: 0 0 8px; font-weight: 600; min-height: 44px; }
.gcsys-card-item-cert, .gcsys-card-item-grade { margin: 4px 0; font-size: 0.9em; color: #555; }

/* Pagination */
.gcsys-pagination { margin-top: 30px; text-align: center; }
.gcsys-pagination .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 2px; border: 1px solid #ddd; text-decoration: none; color: #6a1b9a; border-radius: 4px; }
.gcsys-pagination .page-numbers.current, .gcsys-pagination .page-numbers:hover { background-color: #6a1b9a; color: #fff; border-color: #6a1b9a; }

/* Table View */
.gcsys-cards-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.gcsys-cards-table th, .gcsys-cards-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e0e0e0; }
.gcsys-cards-table th { background-color: #f9f9f9; font-weight: 600; }
.gcsys-cards-table tbody tr:last-child td { border-bottom: 0; }
.gcsys-cards-table tbody tr:hover { background-color: #f5f5f5; }
.gcsys-cards-table img { max-width: 60px; height: auto; border-radius: 4px; display: block; }

/* Responsive Table */
@media screen and (max-width: 768px) {
    .gcsys-cards-table thead { display: none; }
    .gcsys-cards-table, .gcsys-cards-table tbody, .gcsys-cards-table tr, .gcsys-cards-table td { display: block; width: 100%; }
    .gcsys-cards-table tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; }
    .gcsys-cards-table td { text-align: right; padding-left: 50%; position: relative; }
    .gcsys-cards-table td:before { content: attr(data-label); position: absolute; left: 15px; width: calc(50% - 30px); text-align: left; font-weight: 600; }
    .gcsys-cards-table td img { float: right; }
}