/* ===================================================
   SHARED CLASSES
   (Used across multiple templates)
   =================================================== */

.content {
    flex: 1 0 auto;
}
/* Top buttons for collections, populating, and scans views */




/* Main content container shared between several views */


/* --- Table layout and selection (shared across word-related templates) --- */
.words-table-wrapper {
    display: grid;
    gap: 3px;
    grid-template-columns: 1fr;
}

.words-table-sel-wrapper {
    padding: 3px;
    margin: 2px;
    border-bottom: 1px solid #dee2e6;
    box-sizing: border-box;
}

/* Word selection label for multiple templates */

/* Help icon in word tables */
.word-help {
    width: 24px;
    height: 24px;
    padding-left: 5px;
    cursor: pointer;
    opacity: 0.2;
}
.words-table-sel-wrapper:hover .word-help {
    cursor: pointer;
    opacity: 1;
}

/* Responsive grid columns for .words-table-wrapper */
@media (min-width: 576px) {
    .words-table-wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .words-table-wrapper { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
    .words-table-wrapper { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
    .words-table-wrapper { grid-template-columns: repeat(5, 1fr); }
}


/* ===================================================
   UNIQUE CLASSES
   (Used in only one template)
   =================================================== */



/* ===================================================
   MISCELLANEOUS / UNCLASSIFIED / UTILITIES
   =================================================== */

/* Miscellaneous utility and helper classes */

.google-icon-disabled { filter: grayscale(100%); }
.google-icon-enabled { /* Placeholder for enabled state */ }

.header-max-width { max-width: 900px; }

.populating_words_grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(5, 10em [col-start]);
}

.check-button-icon {
    display: inline;
    font-size: 1.5rem;
}

.populating-next-btn { /* Placeholder */ }

.populating-top-buttons {
    display: flex;
}
.populating-top-buttons * {
    margin-right: 5px;
}

.col-word-chk-hidden {
    visibility: hidden;
}
.col-sel-count-hidden {
    display: none;
}



/* === Layout and Root === */
html, body { height: 100%; }
body {
    display: flex;
    flex-direction: column;
}


.collection-card {
    transition: box-shadow 0.2s;
}
.collection-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.13);
}

.collection-main-image {
    max-height: 340px;
    object-fit: cover;
}
.word-list {
    max-width: 500px;
    margin: 0 auto;
}
.word-item {
    font-size: 1.18rem;
    font-family: "Roboto Mono", monospace;
    letter-spacing: 0.03em;
    background: #f7f7f9;
}

/* public collections */
.part-words {
    min-height: 80px;
    resize: vertical;
}

.hidden-element {
    visibility: hidden;
    opacity: 0;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.collection-badge-primary {
    background-color: #3f51b5;
}
.collection-thumbnail {
    object-fit: cover;
    height: 150px;
}
/* For dev debugging: applies outline to all elements inside */
.add-outline * { outline: solid 1px green; }
.add-outline input { outline: solid 1px red; }