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


/* Top buttons for collections, populating, and scans views */
.collection-top-buttons {
    margin-top: 25px;
    margin-bottom: 25px;
}

.collection-top-btn {
    margin-right: 10px;
}


/* Main content container shared between several views */
.page-default-container {
    margin-top: 25px;
}

/* --- 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 */
.select-word-label {
    margin-left: 5px;
}

/* 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 */
.padding-top-page-default { padding-top: 30px; }

.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;
}

/* For dev debugging: applies outline to all elements inside */
.add-outline * { outline: solid 1px green; }
.add-outline input { outline: solid 1px red; }

/* === 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;
}