/* CSS Document */

/*--------------------------------------------------------------
  Table of Contents:
  --------------------------------------------------------------
  1. Reset
  2. Base Styles
  3. Typography
     3.1 Headings
     3.2 Body Text
     3.3 Links
  4. Components
     4.1 Images
     4.2 Cards (if applicable)
     4.3 Star Ratings
  5. Layout
     5.1 General Layout
     5.2 Specific Layout Elements
  6. States
     6.1 Hover
     6.2 Active
  7. Utilities
     7.1 Push to Bottom
     7.2 Text Colors
     7.3 Glow Effect
     7.4 Celebrate Effect
  8. Responsive Design
     8.1 Small Screens
     8.2 Large Screens
     8.3 Very Large Screens
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  1. Reset
--------------------------------------------------------------*/

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/*--------------------------------------------------------------
  2. Base Styles
--------------------------------------------------------------*/

body {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  font-family: 'Inter', sans-serif;
  background: var(--bs-light);
  margin-bottom: 1em;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

ul,
ol {
  margin-left: 1rem;
  padding: 0;
}

img {
  margin-left: 0;
  border: none;
  max-width: 100%; /* Prevent overflow */
  height: auto;
}

/*--------------------------------------------------------------
  3. Typography
--------------------------------------------------------------*/

/* 3.1 Headings */
h1,
.h1,
h2,
h3,
h4 {
  margin: 0.5rem 0 1em;
  font-weight: bold;
  color: var(--bs-primary);
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "wdth" 100, "YTLC" 500;
}

/* 3.2 Body Text */
p {
  color: var(--bs-dark);
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  max-width: 625px;
}

/* 3.3 Links */
a {
  color: var(--bs-link);
  text-decoration: none; /* Consider adding back on hover for clarity */
}

a:hover {
  color: var(--bs-link);
}

a:visited {
  color: var(--bs-link);
}

a:active {
  color: var(--bs-primary);
}

.text-info a,
.text-info a:hover,
.text-info a:visited {
  color: var(--bs-info);
}

/*--------------------------------------------------------------
  4. Components
--------------------------------------------------------------*/

/* 4.1 Images */
#splash_img { /* used in stone header */
	max-height: 450px;
	width: 100%;
}

.splash-image { /* used in stone header */
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}

.stone-no-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px; /* Match thumbnail height */
	width: 100%;
	background-color: var(--bs-gray-300); /* Slightly darker placeholder background */
	color: var(--bs-gray-600);
	text-align: center;
	font-size: 0.9rem;
	border-radius: var(--bs-border-radius);
	overflow: hidden; /* Prevent text overflow if icon is big */
}

.stone-list-thumbnail-wrapper img {
	width:100%;
	height:100%;
	object-fit: cover;
}

@media (max-width: 575.98px) { /* Bootstrap's 'sm' breakpoint for extra small screens */
	.stone-list-thumbnail-wrapper {
		height: 140px;
		width: 140px;
	}
	.stone-list-thumbnail-wrapper-sm {
		height: 20px;
		width: 20px;
	}
    /* New profile thumbnail wrappers for extra small screens */
    .profile-thumbnail-wrapper-md {
        max-height: 100px;
        max-width: 100px;
    }
    .profile-thumbnail-wrapper-sm {
        max-height: 30px;
        max-width: 30px;
    }
    .profile-thumbnail-wrapper-lg {
        max-height: 150px;
        max-width: 150px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) { /* Small screens (sm) */
	.stone-list-thumbnail-wrapper {
		height: 150px;
		width: 150px;
	}
	.stone-list-thumbnail-wrapper-sm {
		height: 50px;
		width: 50px;
	}
    /* New profile thumbnail wrappers for small screens */
    .profile-thumbnail-wrapper-md {
        max-height: 120px;
        max-width: 120px;
    }
    .profile-thumbnail-wrapper-sm {
        max-height: 40px;
        max-width: 40px;
    }
    .profile-thumbnail-wrapper-lg {
        max-height: 200px;
        max-width: 200px;
    }
}

@media (min-width: 768px) { /* Medium (md) screens and up */
	.stone-list-thumbnail-wrapper {
		height: 160px;
		width: 160px;
	}
	.stone-list-thumbnail-wrapper-sm {
		height: 80px;
		width: 80px;
	}
    /* New profile thumbnail wrappers for medium screens and up */
    .profile-thumbnail-wrapper-md {
        max-height: 150px;
        max-width: 150px;
    }
    .profile-thumbnail-wrapper-sm {
        max-height: 50px;
        max-width: 50px;
    }
    .profile-thumbnail-wrapper-lg {
        max-height: 250px;
        max-width: 250px;
    }
}

/* 4.2 Cards (if applicable) */
card {
  background: var(--bs-lighter);
  display: block; /* Make 'card' behave like a block-level element */
}

/* 4.3 Star Ratings */
.star-ratings {
  color: var(--bs-secondary-subtle);
}

.star-ratings.empty {
  color: var(--bs-dark-bg-subtle);
}

.star-ratings.star-rating-clickable {
  color: var(--bs-link);
  background: var(--bs-gray-200);
  padding: 1px 8px;
  display: inline-block;
  border-radius: 15px;
  font-size: 20px;
}

/*--------------------------------------------------------------
  5. Layout
--------------------------------------------------------------*/

/* 5.1 General Layout */
/* Add any general layout rules here (e.g., containers, grids) */

/* 5.2 Specific Layout Elements */
.push-to-bottom {
  margin-top: auto;
}

.push-to-bottom a {
  color: white;
  font-size: 90%;
  text-decoration: none;
}

/*--------------------------------------------------------------
  6. States
--------------------------------------------------------------*/

/* Add styles for different states of elements (e.g., focus) */

/*--------------------------------------------------------------
  7. Utilities
--------------------------------------------------------------*/

/* 7.1 Push to Bottom */
/* (Already defined in Layout) */

/* 7.2 Text Colors */
.text-parse-add {
  color: #104ad3;
}

.text-parse-addTo {
  color: #ba10d3;
}

.text-parse-update {
  color: #d35410;
}

.text-parse-flagged {
  color: #e10000;
}

/* 7.3 Glow Effect */
.glow {
  box-shadow: 0px 0 10px 8px #fbf8dc30;
}

/* 7.4 Celebrate Effect */
.celebrate {
  box-sizing: border-box; /* Ensure padding and border don't increase size */
  -moz-box-sizing: border-box; /* For Firefox */
  transition: border-color 1s ease; /* Smooth transition for non-animated color changes */
}

/*--------------------------------------------------------------
  8. Responsive Design
--------------------------------------------------------------*/

/* 8.1 Small Screens */
@media (min-width: 576px) {
  .splash-image-container {
    max-height: 450px;
  }
}

/* 8.2 Large Screens */
@media (min-width: 992px) {
  .splash-image-container {
    max-height: 350px;
  }
}

/* 8.3 Very Large Screens */
@media (min-width: 1200px) {
  .splash-image-container {
    max-height: 250px;
  }
}



/*--------------------------------------------------------------
  8. Modals
--------------------------------------------------------------*/


        /* --- Windows 95 Modal Styles --- */
        .windows95-modal .modal-dialog {
            /* Remove Bootstrap's default centering if you want it top-left or specific position */
            align-items: flex-start; /* Align to top */
            padding-top: 50px; /* Some padding from the top */
        }

        .windows95-modal .modal-content {
            border: 2px solid #000; /* Darker border for the window frame */
            border-top-color: #fff; /* Highlight for top-left edge */
            border-left-color: #fff; /* Highlight for top-left edge */
            border-right-color: #808080; /* Shadow for bottom-right edge */
            border-bottom-color: #808080; /* Shadow for bottom-right edge */
            border-radius: 0; /* Sharp corners */
            background-color: #C0C0C0; /* Classic Windows 95 gray */
            box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5); /* Stronger, offset shadow */
            font-family: 'MS Sans Serif', 'Arial', sans-serif; /* Classic font stack */
        }

        .windows95-modal .modal-header {
            background-color: #000080; /* Dark blue title bar */
            color: #FFFFFF; /* White text */
            padding: 4px 8px; /* Compact padding */
            border-bottom: 2px solid #000; /* Separator from body */
            border-radius: 0; /* Sharp corners */
            cursor: grab; /* Indicate draggable */
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem; /* Smaller title font */
        }

        .windows95-modal .modal-title {
            color: #FFFFFF; /* Ensure title is white */
            font-weight: bold;
            flex-grow: 1; /* Allow title to take space */
        }

        .windows95-modal .btn-close {
            /* Custom close button for Windows 95 style */
            background-color: #C0C0C0; /* Gray background */
            border: 1px solid #000;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            width: 20px;
            height: 20px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem; /* Size of the 'x' */
            line-height: 1;
            opacity: 1; /* Always visible */
            filter: none; /* Remove Bootstrap's filter */
            box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.5); /* Small shadow for raised effect */
        }

        .windows95-modal .btn-close:hover {
            background-color: #A0A0A0; /* Darker gray on hover */
            border-top-color: #808080;
            border-left-color: #808080;
            border-right-color: #fff;
            border-bottom-color: #fff;
            box-shadow: inset 1px 1px 0px 0px rgba(0,0,0,0.5); /* Pressed effect */
        }

        .windows95-modal .btn-close::before {
            content: 'X'; /* Custom 'X' character */
            color: #000; /* Black 'X' */
            font-weight: bold;
        }
        .windows95-modal .btn-close:focus {
            outline: 1px dotted #000; /* Focus outline */
            box-shadow: none; /* Remove Bootstrap focus shadow */
        }

        .windows95-modal .modal-body {
            background-color: #C0C0C0; /* Match modal content background */
            padding: 1rem;
            border-bottom: 2px solid #808080; /* Bottom border for body */
        }

        .windows95-modal .modal-footer {
            background-color: #C0C0C0; /* Match modal content background */
            border-top: none; /* Remove default border */
            padding: 1rem;
            display: flex;
            justify-content: flex-end; /* Align buttons to the right */
            gap: 8px; /* Space between buttons */
        }

        /* Windows 95 Button Style */
        .windows95-btn {
            background-color: #C0C0C0; /* Classic gray */
            border: 1px solid #000;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            border-radius: 0; /* Sharp corners */
            color: #000; /* Black text */
            font-weight: normal;
            text-shadow: none;
            box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.5); /* Subtle shadow for raised effect */
            padding: 6px 12px; /* Standard padding */
            transition: none; /* No smooth transitions */
            font-family: 'MS Sans Serif', 'Arial', sans-serif;
            white-space: nowrap; /* Prevent text wrapping */
        }

        .windows95-btn:hover {
            background-color: #C0C0C0; /* No change on hover background */
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.5); /* Maintain raised effect */
            transform: none; /* No transform on hover */
        }

        .windows95-btn:active {
            background-color: #C0C0C0; /* No change on active background */
            border-top-color: #808080; /* Invert borders for pressed effect */
            border-left-color: #808080;
            border-right-color: #fff;
            border-bottom-color: #fff;
            box-shadow: inset 1px 1px 0px 0px rgba(0,0,0,0.5); /* Inset shadow for pressed effect */
            transform: translateY(1px) translateX(1px); /* Slight shift for pressed feel */
        }

        .windows95-btn:focus {
            outline: 1px dotted #000; /* Focus outline */
            box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.5); /* Maintain raised effect */
        }

        /* Windows 95 Input Field Style */
        .windows95-input,
        .windows95-select,
        .windows95-textarea {
            background-color: #FFFFFF; /* White background */
            border: 2px solid #808080; /* Dark gray border */
            border-top-color: #000; /* Darker top/left for inset effect */
            border-left-color: #000;
            border-right-color: #E0E0E0; /* Lighter right/bottom for inset effect */
            border-bottom-color: #E0E0E0;
            border-radius: 0; /* Sharp corners */
            font-family: 'MS Sans Serif', 'Arial', sans-serif;
            color: #000;
        }

        .windows95-input:focus,
        .windows95-select:focus,
        .windows95-textarea:focus {
            border-color: #000; /* Solid black border on focus */
            box-shadow: none; /* Remove Bootstrap focus shadow */
            outline: 1px dotted #000; /* Classic focus outline */
        }

        .windows95-input-group-text {
            background-color: #C0C0C0; /* Match button/modal background */
            border: 2px solid #808080;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            border-radius: 0;
            color: #000;
        }

        .windows95-checkbox-input {
            border: 1px solid #000;
            background-color: #FFFFFF;
            border-radius: 0;
            width: 16px; /* Standard checkbox size */
            height: 16px;
            flex-shrink: 0; /* Prevent shrinking */
        }
        .windows95-checkbox-input:checked {
            background-color: #C0C0C0; /* Checked background */
            border-color: #000;
        }
        .windows95-checkbox-input:focus {
            box-shadow: none;
            outline: 1px dotted #000;
        }
        .windows95-form-check-label {
            font-family: 'MS Sans Serif', 'Arial', sans-serif;
            color: #000;
        }














        .card {
            border-radius: 0.75rem; /* Rounded corners for cards */
        }
        .table-info {
            background-color: #e2f3ff; /* Light blue for inactive separator */
        }
        .btn-outline-primary.active {
            background-color: var(--bs-primary);
            color: var(--bs-white);
        }
        /* Ensure the feedback button is always positioned relative to its parent .add-feedback */
        .add-feedback {
            /* This will be set by JS if not already relative, but good to have a fallback */
            /* position: relative; */
        }
        .add-feedback .feedback-trigger-btn {
            /* This is the consistent positioning for the button within .add-feedback */
            position: absolute;
            top: 0;
            right: 0;
            margin: 0.5rem; /* Adjust margin as needed */
            z-index: 10; /* Ensure it's above other content */
        }