/* ============================================
   GALLERY - OPTIMIZED & MOBILE RESPONSIVE
   ============================================ */

/* ============================================
   1. GALLERY INDEX - TABLES & HEADERS
   ============================================ */

/* Gallery tables - base styling */
body[class*="gallery"] table.tborder,
table.tborder:has(.gallery-categories),
table.tborder:has(a[href="gallery.php?action=cp"]),
table.tborder:has(a[href*="action=cp&tab="]) {
    background: var(--block-dark);
    border: 1px solid var(--accent1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Gallery table headers */
body[class*="gallery"] .thead,
table.tborder:has(.gallery-categories) .thead,
table.tborder:has(a[href="gallery.php?action=cp"]) .thead,
table.tborder:has(a[href*="action=cp&tab="]) .thead {
    background: linear-gradient(135deg, var(--block-dark) 0%, var(--block-med) 100%) !important;
    border-bottom: 2px solid var(--accent1) !important;
    padding: 15px 20px !important;
}

/* Gallery header titles */
body[class*="gallery"] .thead strong,
table.tborder:has(.gallery-categories) .thead strong,
table.tborder:has(a[href="gallery.php?action=cp"]) .thead strong,
table.tborder:has(a[href*="action=cp&tab="]) .thead strong {
    font-family: var(--font-title);
    font-size: 1.8em;
    color: var(--accent1);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Gallery header metadata (version, etc) */
body[class*="gallery"] .thead .float_right,
table.tborder:has(.gallery-categories) .thead .float_right,
table.tborder:has(a[href="gallery.php?action=cp"]) .thead .float_right {
    color: var(--text-color-muted);
    font-family: var(--font-read);
    font-size: 0.9em;
}

/* Gallery table content rows */
body[class*="gallery"] .trow1,
body[class*="gallery"] .trow2,
table.tborder:has(.gallery-categories) .trow1,
table.tborder:has(.gallery-categories) .trow2,
table.tborder:has(a[href="gallery.php?action=cp"]) .trow1,
table.tborder:has(a[href*="action=cp&tab="]) .trow1 {
    background: var(--block-dark) !important;
    padding: 20px !important;
}

/* Gallery content paragraphs */
body[class*="gallery"] .trow1 p,
table.tborder:has(.gallery-categories) .trow1 p,
table.tborder:has(a[href="gallery.php?action=cp"]) .trow1 p {
    font-family: var(--font-read);
    color: var(--text-color);
    margin: 12px 0;
    line-height: 1.6;
    font-size: 1em;
}

body[class*="gallery"] .trow1 p:first-child,
table.tborder:has(a[href="gallery.php?action=cp"]) .trow1 p:first-child {
    font-size: 1.1em;
    margin-top: 0;
}

/* Strong text in paragraphs */
body[class*="gallery"] .trow1 p strong,
table.tborder:has(.gallery-categories) .trow1 p strong,
table.tborder:has(a[href="gallery.php?action=cp"]) .trow1 p strong {
    color: var(--accent2);
    font-weight: 600;
}


/* ============================================
   2. BUTTONS - ALL GALLERY BUTTONS
   ============================================ */

/* Primary buttons (Gallery Control Center, Upload, Search) */
body[class*="gallery"] .trow1 .button,
table.tborder:has(.gallery-categories) .trow1 .button,
table.tborder:has(a[href="gallery.php?action=cp"]) .trow1 .button,
form[action="gallery.php"] .button,
a.button[href*="gallery.php?action=upload"],
a[href="gallery.php?action=cp"].button {
    background: var(--accent2) !important;
    color: var(--block-dark) !important;
    border: none !important;
    padding: 12px 25px !important;
    font-family: var(--font-header) !important;
    font-weight: bold !important;
    font-size: 1em !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    cursor: pointer;
}

/* Button hover state */
body[class*="gallery"] .trow1 .button:hover,
table.tborder:has(.gallery-categories) .trow1 .button:hover,
table.tborder:has(a[href="gallery.php?action=cp"]) .trow1 .button:hover,
form[action="gallery.php"] .button:hover,
a.button[href*="gallery.php?action=upload"]:hover,
a[href="gallery.php?action=cp"].button:hover {
    background: var(--accent1) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(222, 166, 99, 0.3);
}

/* Upload button specific styling */
a.button[href*="gallery.php?action=upload"] {
    margin-bottom: 15px !important;
}


/* ============================================
   3. SEARCH FORM
   ============================================ */

form[action="gallery.php"] {
    background: var(--block-med);
    border: 1px solid var(--block-light);
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

form[action="gallery.php"] label {
    font-family: var(--font-header);
    color: var(--text-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

form[action="gallery.php"] input[type="text"],
form[action="gallery.php"] select {
    font-family: var(--font-read);
    background: var(--block-dark);
    border: 1px solid var(--accent2);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

form[action="gallery.php"] input[type="text"]:focus,
form[action="gallery.php"] select:focus {
    border-color: var(--accent1);
    outline: none;
    box-shadow: 0 0 0 2px rgba(222, 166, 99, 0.2);
}

/* Search button already styled in buttons section */
form[action="gallery.php"] .button {
    margin-top: 0 !important;
    padding: 8px 20px !important;
}


/* ============================================
   4. CATEGORY CARDS (Index Page)
   ============================================ */

.gallery-categories {
    display: block;
}

.gallery-categories .trow1 {
    background: var(--block-med) !important;
    border: 1px solid var(--block-light) !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease;
}

.gallery-categories .trow1:hover {
    border-color: var(--accent2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Category title links */
.gallery-categories .trow1 > div:first-child a {
    font-family: var(--font-header);
    font-size: 1.3em;
    font-weight: bold;
    color: var(--accent1);
    text-decoration: none;
    transition: color 0.3s ease;
}

.gallery-categories .trow1 > div:first-child a:hover {
    color: var(--accent2);
}

/* Category descriptions and metadata */
.gallery-categories .smalltext {
    font-family: var(--font-read);
    color: var(--text-color-muted);
    line-height: 1.5;
}

/* Subcategory links */
.gallery-categories .trow1 > div:last-child a {
    color: var(--accent2);
    text-decoration: none;
    font-family: var(--font-read);
    font-weight: 500;
    transition: color 0.3s ease;
}

.gallery-categories .trow1 > div:last-child a:hover {
    color: var(--accent1);
    text-decoration: underline;
}

/* Pending badge */
.gallery-categories span[title="pending"] {
    background: var(--accent1);
    color: var(--block-dark);
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.85em;
    margin-left: 5px;
    display: inline-block;
}


/* ============================================
   5. SUBCATEGORY PAGE
   ============================================ */

/* Subcategory navigation bar */
body:has(table.tborder .gallery-grid) div.trow1[style*="margin:6px 0"] {
    background: var(--block-med) !important;
    border: 1px solid var(--block-light) !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    margin: 6px 0 15px 0 !important;
}

body:has(table.tborder .gallery-grid) div.trow1[style*="margin:6px 0"] strong {
    font-family: var(--font-header);
    color: var(--accent1);
    font-size: 1.1em;
    margin-right: 10px;
}

body:has(table.tborder .gallery-grid) div.trow1[style*="margin:6px 0"] .smalltext a {
    color: var(--accent2);
    text-decoration: none;
    font-family: var(--font-read);
    font-weight: 500;
    transition: color 0.3s ease;
    margin: 0 4px;
}

body:has(table.tborder .gallery-grid) div.trow1[style*="margin:6px 0"] .smalltext a:hover {
    color: var(--accent1);
    text-decoration: underline;
}

/* Gallery grid table styling */
table.tborder:has(.gallery-grid) {
    background: var(--block-dark);
    border: 1px solid var(--accent1);
    border-radius: 6px;
    overflow: hidden;
}

table.tborder:has(.gallery-grid) .thead {
    background: linear-gradient(135deg, var(--block-dark) 0%, var(--block-med) 100%) !important;
    border-bottom: 2px solid var(--accent1) !important;
    padding: 15px 20px !important;
}

table.tborder:has(.gallery-grid) .thead strong {
    font-family: var(--font-title);
    font-size: 1.5em;
    color: var(--accent1);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

table.tborder:has(.gallery-grid) .trow2 {
    background: var(--block-dark) !important;
    padding: 20px !important;
}


/* ============================================
   6. GALLERY GRID LAYOUT
   ============================================ */

.gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

/* Empty state */
.gallery-grid .trow1:only-child {
    grid-column: 1 / -1;
    background: var(--block-med) !important;
    border: 1px dashed var(--block-light) !important;
    border-radius: 6px !important;
    padding: 20px !important;
    text-align: center;
    font-family: var(--font-read);
    color: var(--text-color-muted);
    font-style: italic;
    font-size: 0.95em;
    margin: 0 !important;
}


/* ============================================
   7. GALLERY GRID ITEMS (Individual Images)
   ============================================ */

.gal-grid-item {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--block-med);
    border: 1px solid var(--block-light);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gal-grid-item:hover {
    border-color: var(--accent2);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Thumbnail container */
.gal-grid-item .gal-thumb {
    display: block !important;
    position: relative !important;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.gal-grid-item .gal-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Overlay badges - views (top right) */
.gal-grid-item .gal-thumb span[title="Aufrufe"]:first-of-type,
.gal-grid-item .gal-thumb span:nth-of-type(1) {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-family: var(--font-read);
}

/* Overlay badges - favorites (bottom left) */
.gal-grid-item .gal-thumb span:nth-of-type(2) {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-family: var(--font-read);
}

/* Image info section below thumbnail */
.gal-grid-item .smalltext {
    text-align: center !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    background: var(--block-med);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gal-grid-item .smalltext strong {
    font-family: var(--font-header);
    color: var(--text-color);
    font-size: 0.9em;
    display: block;
    margin-bottom: 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gal-grid-item .smalltext span {
    font-family: var(--font-read);
    font-size: 0.85em;
    color: var(--text-color-muted);
}

.gal-grid-item .smalltext a {
    color: var(--accent2);
    text-decoration: none;
    transition: color 0.3s ease;
}

.gal-grid-item .smalltext a:hover {
    color: var(--accent1);
}


/* ============================================
   8. CONTROL CENTER PAGE
   ============================================ */

/* Control center tab navigation styling already covered in main tables section */

/* Tab navigation buttons */
table.tborder:has(a[href*="action=cp&tab="]) .trow1 {
    padding: 15px 20px !important;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

table.tborder:has(a[href*="action=cp&tab="]) .trow1 .button,
table.tborder:has(a[href*="action=cp&tab="]) .trow1 a.button,
table.tborder:has(a[href*="action=cp&tab="]) .trow1 span.button {
    background: var(--block-med) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--block-light) !important;
    padding: 10px 20px !important;
    font-family: var(--font-header) !important;
    font-weight: 600 !important;
    font-size: 0.95em !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 !important;
}

table.tborder:has(a[href*="action=cp&tab="]) .trow1 a.button:hover {
    background: var(--accent2) !important;
    color: var(--block-dark) !important;
    border-color: var(--accent2) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(222, 166, 99, 0.3);
}

/* Active tab styling */
table.tborder:has(a[href*="action=cp&tab="]) .trow1 span.button[style*="font-weight:bold"],
table.tborder:has(a[href*="action=cp&tab="]) .trow1 span.button {
    background: var(--accent2) !important;
    color: var(--block-dark) !important;
    border-color: var(--accent2) !important;
    font-weight: bold !important;
}

/* Content tables on CP page */
body:has(table.tborder a[href*="action=cp&tab="]) table.tborder:not(:has(a[href*="action=cp&tab="])) {
    background: var(--block-dark);
    border: 1px solid var(--accent1);
    border-radius: 6px;
    overflow: hidden;
}

body:has(table.tborder a[href*="action=cp&tab="]) table.tborder:not(:has(a[href*="action=cp&tab="])) .thead {
    background: linear-gradient(135deg, var(--block-dark) 0%, var(--block-med) 100%) !important;
    border-bottom: 2px solid var(--accent1) !important;
    padding: 15px 20px !important;
}

body:has(table.tborder a[href*="action=cp&tab="]) table.tborder:not(:has(a[href*="action=cp&tab="])) .thead strong {
    font-family: var(--font-title);
    font-size: 1.4em;
    color: var(--accent1);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

body:has(table.tborder a[href*="action=cp&tab="]) table.tborder:not(:has(a[href*="action=cp&tab="])) .trow1 {
    background: var(--block-dark) !important;
    padding: 20px !important;
}

/* Empty state in CP tables */
body:has(table.tborder a[href*="action=cp&tab="]) table.tborder .trow1 .smalltext {
    font-family: var(--font-read);
    color: var(--text-color-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
    background: var(--block-med);
    border: 1px dashed var(--block-light);
    border-radius: 6px;
}


/* ============================================
   9. MOBILE RESPONSIVE DESIGN
   ============================================ */

/* Extra large screens (1400px and down) */
@media (max-width: 1400px) {
    .gallery-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* Large screens (1200px and down) */
@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* Medium screens (992px and down) */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    /* Reduce header title size */
    body[class*="gallery"] .thead strong,
    table.tborder:has(.gallery-categories) .thead strong,
    table.tborder:has(a[href="gallery.php?action=cp"]) .thead strong,
    table.tborder:has(a[href*="action=cp&tab="]) .thead strong {
        font-size: 1.6em;
        letter-spacing: 1.5px;
    }
    
    /* Adjust category title size */
    .gallery-categories .trow1 > div:first-child a {
        font-size: 1.2em;
    }
}

/* Tablets (768px and down) */
@media (max-width: 768px) {
    /* Grid adjustments */
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    
    /* Table padding reduction */
    body[class*="gallery"] .trow1,
    body[class*="gallery"] .trow2,
    table.tborder:has(.gallery-categories) .trow1,
    table.tborder:has(.gallery-categories) .trow2,
    table.tborder:has(a[href="gallery.php?action=cp"]) .trow1,
    table.tborder:has(a[href*="action=cp&tab="]) .trow1,
    table.tborder:has(.gallery-grid) .trow2 {
        padding: 15px !important;
    }
    
    /* Header padding reduction */
    body[class*="gallery"] .thead,
    table.tborder:has(.gallery-categories) .thead,
    table.tborder:has(a[href="gallery.php?action=cp"]) .thead,
    table.tborder:has(a[href*="action=cp&tab="]) .thead,
    table.tborder:has(.gallery-grid) .thead {
        padding: 12px 15px !important;
    }
    
    /* Further reduce header title size */
    body[class*="gallery"] .thead strong,
    table.tborder:has(.gallery-categories) .thead strong,
    table.tborder:has(a[href="gallery.php?action=cp"]) .thead strong,
    table.tborder:has(a[href*="action=cp&tab="]) .thead strong {
        font-size: 1.4em;
        letter-spacing: 1px;
    }
    
    /* Category titles */
    .gallery-categories .trow1 > div:first-child a {
        font-size: 1.1em;
    }
    
    table.tborder:has(.gallery-grid) .thead strong {
        font-size: 1.3em;
    }
    
    /* Search form - stack vertically */
    form[action="gallery.php"] {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }
    
    form[action="gallery.php"] label {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 6px;
    }
    
    form[action="gallery.php"] input[type="text"],
    form[action="gallery.php"] select {
        width: 100%;
    }
    
    /* Buttons full width on mobile */
    form[action="gallery.php"] .button,
    a.button[href*="gallery.php?action=upload"] {
        width: 100%;
        text-align: center;
        padding: 10px 20px !important;
    }
    
    /* Control center tabs - stack vertically */
    table.tborder:has(a[href*="action=cp&tab="]) .trow1 {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 15px !important;
        gap: 8px;
    }
    
    table.tborder:has(a[href*="action=cp&tab="]) .trow1 .button,
    table.tborder:has(a[href*="action=cp&tab="]) .trow1 a.button,
    table.tborder:has(a[href*="action=cp&tab="]) .trow1 span.button {
        width: 100%;
        text-align: center;
        padding: 10px 15px !important;
    }
    
    /* Subcategory navigation */
    body:has(table.tborder .gallery-grid) div.trow1[style*="margin:6px 0"] {
        padding: 10px 15px !important;
    }
    
    body:has(table.tborder .gallery-grid) div.trow1[style*="margin:6px 0"] strong {
        font-size: 1em;
        display: block;
        margin-bottom: 8px;
    }
    
    /* Category cards */
    .gallery-categories .trow1 {
        padding: 12px !important;
    }
    
    /* Grid item text sizing */
    .gal-grid-item .smalltext strong {
        font-size: 0.85em;
    }
    
    .gal-grid-item .smalltext span {
        font-size: 0.8em;
    }
    
    /* Overlay badges - slightly smaller */
    .gal-grid-item .gal-thumb span[title="Aufrufe"]:first-of-type,
    .gal-grid-item .gal-thumb span:nth-of-type(1),
    .gal-grid-item .gal-thumb span:nth-of-type(2) {
        padding: 3px 8px !important;
        font-size: 9px !important;
    }
}

/* Mobile (576px and down) */
@media (max-width: 576px) {
    /* Grid - 2 columns on mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    
    /* Further padding reduction */
    body[class*="gallery"] .trow1,
    body[class*="gallery"] .trow2,
    table.tborder:has(.gallery-categories) .trow1,
    table.tborder:has(.gallery-categories) .trow2,
    table.tborder:has(a[href="gallery.php?action=cp"]) .trow1,
    table.tborder:has(a[href*="action=cp&tab="]) .trow1,
    table.tborder:has(.gallery-grid) .trow2 {
        padding: 12px !important;
    }
    
    body[class*="gallery"] .thead,
    table.tborder:has(.gallery-categories) .thead,
    table.tborder:has(a[href="gallery.php?action=cp"]) .thead,
    table.tborder:has(a[href*="action=cp&tab="]) .thead,
    table.tborder:has(.gallery-grid) .thead {
        padding: 10px 12px !important;
    }
    
    /* Header titles - smallest size */
    body[class*="gallery"] .thead strong,
    table.tborder:has(.gallery-categories) .thead strong,
    table.tborder:has(a[href="gallery.php?action=cp"]) .thead strong,
    table.tborder:has(a[href*="action=cp&tab="]) .thead strong {
        font-size: 1.2em;
        letter-spacing: 0.5px;
    }
    
    table.tborder:has(.gallery-grid) .thead strong {
        font-size: 1.1em;
    }
    
    /* Version text hide on very small screens */
    body[class*="gallery"] .thead .float_right,
    table.tborder:has(.gallery-categories) .thead .float_right,
    table.tborder:has(a[href="gallery.php?action=cp"]) .thead .float_right {
        display: none;
    }
    
    /* Category cards - more compact */
    .gallery-categories .trow1 {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }
    
    .gallery-categories .trow1 > div:first-child a {
        font-size: 1em;
    }
    
    /* Search form - more compact */
    form[action="gallery.php"] {
        padding: 10px;
        gap: 10px;
    }
    
    form[action="gallery.php"] input[type="text"],
    form[action="gallery.php"] select {
        padding: 6px 10px;
        font-size: 0.95em;
    }
    
    /* Buttons more compact */
    form[action="gallery.php"] .button,
    a.button[href*="gallery.php?action=upload"],
    body[class*="gallery"] .trow1 .button,
    table.tborder:has(a[href*="action=cp&tab="]) .trow1 .button,
    table.tborder:has(a[href*="action=cp&tab="]) .trow1 a.button,
    table.tborder:has(a[href*="action=cp&tab="]) .trow1 span.button {
        padding: 8px 15px !important;
        font-size: 0.9em !important;
    }
    
    /* Grid items - more compact info section */
    .gal-grid-item .smalltext {
        padding: 8px 6px !important;
    }
    
    .gal-grid-item .smalltext strong {
        font-size: 0.8em;
        margin-bottom: 3px;
    }
    
    .gal-grid-item .smalltext span {
        font-size: 0.75em;
    }
    
    /* Subcategory navigation - more compact */
    body:has(table.tborder .gallery-grid) div.trow1[style*="margin:6px 0"] {
        padding: 8px 12px !important;
    }
    
    body:has(table.tborder .gallery-grid) div.trow1[style*="margin:6px 0"] strong {
        font-size: 0.95em;
    }
    
    /* Pending badge */
    .gallery-categories span[title="pending"] {
        font-size: 0.8em;
        padding: 2px 6px;
    }
}

/* Very small mobile (400px and down) */
@media (max-width: 400px) {
    /* Even more compact spacing */
    body[class*="gallery"] .trow1,
    body[class*="gallery"] .trow2,
    table.tborder:has(.gallery-categories) .trow1,
    table.tborder:has(.gallery-categories) .trow2,
    table.tborder:has(a[href="gallery.php?action=cp"]) .trow1,
    table.tborder:has(.gallery-grid) .trow2 {
        padding: 10px !important;
    }
    
    /* Grid - consider single column for very small screens */
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    
    /* Smallest possible text sizes while remaining readable */
    body[class*="gallery"] .thead strong,
    table.tborder:has(.gallery-categories) .thead strong,
    table.tborder:has(a[href="gallery.php?action=cp"]) .thead strong,
    table.tborder:has(a[href*="action=cp&tab="]) .thead strong {
        font-size: 1.1em;
    }
    
    .gallery-categories .trow1 > div:first-child a {
        font-size: 0.95em;
    }
    
    /* Overlay badges - hide on very small screens for cleaner look */
    .gal-grid-item .gal-thumb span[title="Aufrufe"]:first-of-type,
    .gal-grid-item .gal-thumb span:nth-of-type(1) {
        top: 4px !important;
        right: 4px !important;
        padding: 2px 6px !important;
        font-size: 8px !important;
    }
    
    .gal-grid-item .gal-thumb span:nth-of-type(2) {
        bottom: 4px !important;
        left: 4px !important;
        padding: 2px 6px !important;
        font-size: 8px !important;
    }
}


/* ============================================
   10. PRINT STYLES (OPTIONAL)
   ============================================ */

@media print {
    /* Hide interactive elements when printing */
    form[action="gallery.php"],
    a.button[href*="gallery.php?action=upload"],
    table.tborder:has(a[href*="action=cp&tab="]) .trow1,
    .gal-grid-item .gal-thumb span {
        display: none !important;
    }
    
    /* Optimize for print */
    body[class*="gallery"] table.tborder,
    table.tborder:has(.gallery-categories),
    .gallery-categories .trow1 {
        border: 1px solid #000;
        page-break-inside: avoid;
    }
    
    /* Remove transforms and shadows for print */
    .gallery-categories .trow1:hover,
    .gal-grid-item:hover {
        transform: none;
        box-shadow: none;
    }
}