/* tmg.css — TMG's main custom stylesheet.
   Consolidated 2026-07-14 from LayoutStyle.css (site theme), reviews.css, and LogEntry.css.
   Loaded site-wide via ~/Styles/tmg/bundle (rendered by _Layout and _LayoutAdmin).
   The whole-page dark theme is scoped to body.tmg-public so it applies to the public
   layout only, not admin. */

/* ==== Site theme (public pages; formerly LayoutStyle.css) ==== */

body.tmg-public {
    margin: 0;
    padding-top: 4.5rem;
    background: rgb(32, 32, 32);
    color: whitesmoke;
}

.ui.menu .item.logo {
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: .2em !important;
    padding-bottom: .2em !important;
}

/*.overlay {
    float: right;
    margin: 0em 3em 1em 0em;
}*/

.ui.inverted.input input {
    background: #333 !important;
    color: rgba(255,255,255,.9) !important;
    border-color: rgba(255,255,255,.1) !important;
}

/* Comprehensive inverted form styling for all input types */
.ui.inverted.form input,
.ui.inverted.form textarea,
.ui.inverted.form select,
input.inverted,
textarea.inverted,
select.inverted,
.ui.inverted.tab.segment input,
.ui.inverted.tab.segment textarea,
.ui.inverted.tab.segment select,
.ui.inverted.segment input,
.ui.inverted.segment textarea,
.ui.inverted.segment select {
    background-color: #333 !important;
    color: rgba(255,255,255,.9) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}

.ui.inverted.form label,
.ui.inverted.tab label,
.ui.tab.segment.inverted label,
.ui.inverted.segment label,
.ui.inverted form label {
    color: rgba(255,255,255,.9) !important;
}

/* Fix focus state for inverted inputs */
.ui.inverted.form input:focus,
.ui.inverted.form textarea:focus,
.ui.inverted.form select:focus,
input.inverted:focus,
textarea.inverted:focus,
select.inverted:focus,
.ui.inverted.tab.segment input:focus,
.ui.inverted.tab.segment textarea:focus,
.ui.inverted.segment input:focus,
.ui.inverted.segment textarea:focus {
    background-color: #444 !important;
    border-color: rgba(255,255,255,.3) !important;
}

/* Force inverted styling for all inputs in inverted segments */
.ui.inverted.segment .ui.form input,
.ui.inverted.segment .ui.form textarea,
.ui.inverted.segment .ui.form select {
    background-color: #333 !important;
    color: rgba(255,255,255,.9) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}

.overlay {
    margin-top: 1em;
}

/* Article "paper" surface (see BUG-035) */
.ui.segment.article-paper {
    background-color: #f4ecd8;
    color: rgba(0, 0, 0, 0.85);
}

/* Article-summary meta row, About page (see BUG-035) */
.article-meta {
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

/* Hide computer class on mobile devices */
@media (max-width: 767px) {
    .computer {
        display: none !important;
    }

    /* Reduce container margins on mobile */
    .ui.container {
        margin-left: 0.5em !important;
        margin-right: 0.5em !important;
        width: auto !important;
    }
}

/* Hide mobile class on desktop devices */
@media (min-width: 768px) {
    .mobile {
        display: none !important;
    }
}

/* Mobile-only product separator for rows in product list */
.mobile-separator {
    display: none;
    border: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 1em 0;
}

@media (max-width: 767px) {
    .mobile-separator {
        display: block !important;
    }
}

@media (min-width: 1000px) {
    .ui.text.container {
        position: relative;
    }

    .overlay {
        position: fixed;
        top: 25%; /* adjust so it doesn't overlap the menu */
        right: 3em; /* adjust based on desired margin */
        margin: 0;
        z-index: 10; /* ensure it's above content */
    }
}

body.tmg-public::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../Images/tigerman300.png') no-repeat center center;
    background-size: cover;
    opacity: 0.1;
    z-index: -1;
    pointer-events: none;
}

/* Print-specific styles to convert dark theme to light theme when printing */
@media print {
    /* Reset background colors for inverted segments */
    .ui.inverted.segment,
    .ui.inverted.basic.segment,
    .ui.inverted.basic.segments,
    .ui.inverted.form,
    .ui.inverted.message,
    .ui.inverted.table,
    .ui.inverted.table tr td,
    .ui.inverted.table tr th {
        background-color: white !important;
        color: rgba(0,0,0,.87) !important;
        border-color: rgba(0,0,0,.1) !important;
    }

    /* Fix headers */
    .ui.inverted.header,
    .ui.inverted.dividing.header {
        color: rgba(0,0,0,.87) !important;
        border-color: rgba(0,0,0,.1) !important;
    }

    /* Fix form elements */
    .ui.inverted.form input,
    .ui.inverted.form textarea,
    .ui.inverted.form select,
    input.inverted,
    textarea.inverted,
    select.inverted,
    .ui.inverted.input input {
        background-color: white !important;
        color: rgba(0,0,0,.87) !important;
        border: 1px solid rgba(0,0,0,.1) !important;
    }

    /* Fix labels */
    .ui.inverted.form label,
    .ui.inverted.tab label,
    .ui.tab.segment.inverted label,
    .ui.inverted.segment label,
    .ui.inverted.form label {
        color: rgba(0,0,0,.87) !important;
    }

    /* Override any text colors to ensure readability */
    .ui.inverted.segment span,
    .ui.inverted.segment p,
    .ui.inverted.segment div,
    .ui.inverted.segment a:not(.button),
    .ui.inverted.segment li {
        color: rgba(0,0,0,.87) !important;
    }

    /* Hide elements not needed for printing */
    .ui.inverted.button,
    .ui.inverted.buttons .button {
        display: none !important;
    }

    /* Special cases for elements that need to maintain specific styling */
    .ui.inverted.segment span[style*="color: red"],
    .ui.inverted.segment p[style*="color: red"] {
        color: red !important;
    }
}

/* Store Product Filter Styles
-----------------------------------------------------------------------------------------------------------*/

/* Filter section styling */
.filter-section {
    margin-bottom: 0.5em;
}

.filter-section .title {
    color: rgba(255, 255, 255, 0.9) !important;
}

.filter-section .content {
    padding-top: 0.5em !important;
}

.filter-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
    font-style: italic;
    margin: 0;
}

/* Width slider apply button */
.width-apply-btn {
    margin-top: 1em !important;
}

/* Records per page buttons */
.rpp-buttons {
    flex-wrap: wrap;
}

.rpp-buttons .ui.button.active {
    background-color: #2185d0 !important;
}

/* Filter actions (clear all) */
.filter-actions {
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cutting notice styling */
.cutting-notice {
    margin-top: 1em;
    color: rgba(255, 255, 255, 0.7);
}

.cutting-asterisk {
    color: #db2828;
    font-size: larger;
}

/* Product pricing styles */
.old-price {
    text-decoration: line-through;
    color: #999;
}

.sale-price {
    color: orange;
    font-weight: bold;
    font-size: 1.2em;
}

.discount {
    color: #4CAF50;
}

.filter-options {
    max-height: 15em;
    overflow-y: auto;
}

.filter-options .item {
    padding: 0.4em 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.filter-options a.item:hover {
    color: #2185d0 !important;
}

.filter-options .active-option {
    color: #2185d0 !important;
    font-weight: bold;
}

/* Admin tab action cards
-----------------------------------------------------------------------------------------------------------*/
/* Lets a POST action (with antiforgery token) render as one of the "icon message" cards
   used by the link items in the Administration tabs, instead of a stray primary button.
   The form is a zero-chrome wrapper; the inner .ui.icon.message provides the card look. */
.admin-action-form {
    margin: 0;
    padding: 0;
}

.admin-action-form button.card-action {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ==== Reviews page (formerly reviews.css) ==== */

.event .extra.text p.ui.inverted.header {
    margin-bottom: 0.5em;
}

/* Fix for Instagram embed content for dark theme */
.instagram-media {
    background: #363636 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Target the internal elements of Instagram embeds to make them dark-theme friendly */
.instagram-media a,
.instagram-media div {
    background-color: #363636 !important;
    color: #e0e0e0 !important;
}

/* Make sure Instagram embed placeholder boxes are visible on dark background */
.instagram-media div[style*="background-color: #F4F4F4"] {
    background-color: #464646 !important;
}

/* Make sure all content in the reviews page has consistent styling */
.ui.inverted.feed .content .extra.text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure consistent spacing between reviews */
.ui.inverted.feed .event {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Last event doesn't need border */
.ui.inverted.feed .event:last-child {
    border-bottom: none;
}

/* ==== Log viewer — LogEntry/Index (formerly LogEntry.css) ==== */

#list td.logmessage {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}