/* 1.0 General Styles */
body {
    font-family: 'PT Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
	background-color: #f9f9f9;
}

h1, h2 {
    text-align: center;
    margin: 10px 0;
}

/* 2.0 Navigation */
/* Gesamte Navigation zentrieren */
.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333; /* Hintergrundfarbe der Navigation */
    padding: 15px 20px;
}

/* Zentrierte Ausrichtung von Logo und Navigation */
.nav-center {
    display: flex;
    align-items: center;
    gap: 40px; /* Abstand zwischen Logo und Navigation */
}

/* Logo */
.nav-logo {
    width: 134px; /* Breite des Logos */
    height: auto; /* Höhe proportional anpassen */
	padding-top:8px;
}

/* Navigation */
.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px; /* Abstand zwischen den Links */
}

.nav-links li a {
    text-decoration: none;
    color: white; /* Farbe der Links */
    font-size: 16px;
}

.nav-links li a.active {
    font-weight: bold;
    color: #76c5bb; /* Hervorhebung der aktiven Seite */
}


.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Horizontal layout for navigation items */
    justify-content: center; /* Center the items */
    gap: 20px; /* Space between items */
}

.navigation li {
    position: relative; /* To position the subnavigation correctly */
}

.navigation a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px; /* Add padding for better clickability */
    display: block; /* Ensures the entire area is clickable */
}

.navigation a:hover {
    background-color: #555; /* Highlight on hover */
    border-radius: 5px;
}

/* 2.1 Subnavigation */
.subnavigation {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none; /* Default hidden */
    position: absolute; /* Positioned relative to the parent <li> */
    background-color: #444; /* Slightly lighter than the main nav */
    top: 100%; /* Align below the main nav item */
    left: 0;
    z-index: 10;
    min-width: 150px; /* Ensure a consistent dropdown width */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

.navigation li:hover .subnavigation {
    display: block; /* Show subnavigation on hover */
}

.subnavigation li {
    margin: 0;
    padding: 0;
}

.subnavigation a {
    display: block; /* Full width clickable */
    padding: 10px;
    color: white;
    text-decoration: none;
    font-weight: normal;
    white-space: nowrap; /* Prevent text wrapping */
}

.subnavigation a:hover {
    background-color: #555; /* Highlight on hover */
    border-radius: 5px;
}

/* 2.2 Active link styling */
.navigation a.active {
    text-decoration: underline;
}

/* 3.0 Main Container */
.container {
    width: 80%;
    margin: 20px auto;
}

/* 4.0 Input Sections */
.input-container {
    display: flex;
    gap: 20px; /* Abstand zwischen den beiden Bereichen */
    margin-top: 20px;
    flex-wrap: nowrap; /* Verhindert, dass die Bereiche umbrechen */
}

.text-input, .image-upload {
    flex: 1; /* Jeder Bereich nimmt den gleichen verfügbaren Platz ein */
    background-color: white;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 300px; /* Mindestbreite für jeden Bereich */
}

/* 5.0 Forms */
textarea {
    width: calc(100% - 20px); /* Adjusted width to leave padding on the right */
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

select {
    width: calc(70% - 10px); /* Reduced width to allow space for the button */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

input[type="file"] {
    margin-bottom: 15px;
}

/* 5.1 Buttons */
button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

/* 5.2 Dropdown and Button Alignment */
.dropdown-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.controls-container {
    display: flex;
    justify-content: space-between; /* Ensures Dropdown and Button are spaced apart */
    align-items: center; /* Align items vertically */
    margin-top: 10px;
}

.controls-container select {
    flex: 1; /* Dropdown takes up remaining space */
    margin-right: 10px; /* Adds spacing between Dropdown and Button */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.controls-container button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

.controls-container button:hover {
    background-color: #0056b3;
}

/* 5.3 Focus Textarea */
.focus-textarea {
    width: calc(100% - 20px); /* Gleiche Breite wie andere Textareas */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: vertical; /* Benutzer kann die Höhe ändern */
}

/* 5.4 Focus Keywords Input */
#focus-keywords {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 10px;
}

/* Sicherstellen, dass das Highlighting nur in der Textarea sichtbar ist */
.highlight {
    background-color: #fffa90; /* Hellgelber Hintergrund */
    padding: 0 2px;
    border-radius: 3px;
    display: inline;
}

/* Zusätzlicher Schutz gegen Highlight-Overflow */
textarea .highlight {
    overflow: hidden;
}

/* 6.0 Footer */
footer {
    text-align: center;
    margin: 20px 0;
    color: #777;
    font-size: 14px;
}

.status-grid {
    display: block; /* Sicherstellen, dass alle Elemente blockweise angezeigt werden */
    width: 100%; /* Volle Breite */
    margin: 0 auto; /* Zentrieren der Liste */
}

.status-item {
    display: flex; /* Flex-Box, um Bild und Text nebeneinander anzuordnen */
    flex-direction: row; /* Horizontal */
    align-items: center; /* Zentrieren der Inhalte vertikal */
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px; /* Abstand zwischen den Zeilen */
    padding: 5px 15px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	font-size:0.85rem;
}

.status-image-container {
    width: 10%; /* Breite für das Bild */
    text-align: center; /* Bild zentrieren */
}

.status-source-image {
    max-width: 100%; /* Bild passt in den Container */
    height: auto; /* Höhe proportional */
    border-radius: 5px;
}

.status-source-text {
	
}

.status-details-container {
    width: 90%; /* Restliche Breite für Textdetails */
    padding-left: 20px; /* Abstand zwischen Bild und Text */
}

.status-details-container p{
    margin-top:0;
	margin-bottom:5px;
}

.status-label {
    display: inline-block; /* Inline-Block für Text-Label */
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}

.status-completed {
    background-color: #28a745;
    color: #fff;
}

.status-processing {
    background-color: #ffc107;
    color: #fff;
}

.status-failed {
    background-color: #dc3545;
    color: #fff;
}

.status-pending {
    background-color: #6c757d;
    color: #fff;
}



/* Linkes Bild/Abkürzung */
.source {
    flex: 0 0 150px;
    margin-right: 15px;
}

.source img {
    max-width: 100%;
    border-radius: 8px;
    height: auto;
    object-fit: contain;
}

.source-text {
    font-size: 14px;
    color: #333;
    margin: 0;
}

/* Rechte Details */
.details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.details .status {
    margin-bottom: 10px;
}

.details p {
    margin: 5px 0;
    font-size: 14px;
}



.source-image {
    width: 100%; /* Passt in den Container */
    height: auto; /* Beibehaltung der Proportionen */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Großes Bild auf der Detailseite */
.detail-image {
    max-width: 100%; /* Passt das Bild an den Container an */
    height: auto; /* Beibehaltung der Proportionen */
    margin: 20px auto; /* Zentrierung des Bildes */
    display: block; /* Block-Level für Zentrierung */
    border-radius: 10px; /* Optional: Runde Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten für besseren Look */
}

/* Styles for search and dropdown in stock.php */

/* Wrapper for search and filter */
.controls-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Abstand zwischen Suchfeld und Dropdown */
    margin-bottom: 20px;
}

/* Suchfeld */
#search-keywords {
    flex: 1; /* Sorgt dafür, dass das Suchfeld den verfügbaren Platz einnimmt */
    padding: 10px; /* Innenabstand */
    font-size: 14px; /* Schriftgröße */
    border: 1px solid #ddd; /* Rahmenfarbe */
    border-radius: 5px; /* Abgerundete Ecken */
    box-sizing: border-box; /* Innenabstand einrechnen */
}

/* Dropdown */
#filter-category {
    width: 200px; /* Feste Breite für das Dropdown */
    padding: 10px; /* Innenabstand */
    font-size: 14px; /* Schriftgröße */
    border: 1px solid #ddd; /* Rahmenfarbe */
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: #fff; /* Hintergrundfarbe */
    appearance: none; /* Standard-Dropdown-Stile entfernen */
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: ellipsis; /* Lange Kategorien kürzen */
}

/* Optional: Positionierung des Pfeils anpassen */
#filter-category::after {
    content: "▼"; /* Pfeil anzeigen */
    position: absolute;
    right: 10px;
    pointer-events: none; /* Pfeil nicht klickbar machen */
}

/* Pfeile für die Navigation */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.nav-arrow {
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: #007BFF;
}

.nav-arrow:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Bilddarstellung */
.detail-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
}

/* Details Container */
.details-container {
    margin-top: 20px;
}

/* Großes Bild oben */
.main-image {
    text-align: center;
    margin-bottom: 20px;
}

.main-image .detail-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Info-Container */
.info-container {
	margin-top:40px;
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* Originalbild links */
.original-image {
    flex: 0 0 450px;
    max-width: 450px;
}

.original-image .small-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Info-Bereich rechts */
.info-section {
    flex: 1;
}

.info-section p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Navigation-Pfeile */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.nav-arrow {
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: #007BFF;
}

.nav-arrow:hover {
    color: #0056b3;
    text-decoration: underline;
}

.delete-container {
    display: flex; /* Setzt die Buttons nebeneinander */
    gap: 10px; /* Abstand zwischen den Buttons */
    align-items: center; /* Vertikale Ausrichtung */
    justify-content: flex-start; /* Links ausrichten */
}

.delete-container form {
    margin: 0; /* Entfernt unerwünschte Margins */
}

.delete-container button {
    padding: 8px 15px; /* Knopfgröße anpassen */
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.delete-button {
    background-color: #f44336; /* Rot für Löschen */
    color: white;
}

.upscale-button {
    background-color: #4caf50; /* Grün für Upscale */
    color: white;
}

.delete-button:hover {
    background-color: #d32f2f; /* Etwas dunkler beim Hover */
}

.upscale-button:hover {
    background-color: #388e3c; /* Etwas dunkler beim Hover */
}


.image-container {
    position: relative;
    display: inline-block;
}

.highres-tag {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: red;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 10;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #aaa;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover {
    color: #000;
}

#upscale-status {
    font-size: 16px;
    font-weight: bold;
}

/* stock.css */

/* Grid für die Bilder in Dreierreihen */
.stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Einzelne Bild-Elemente */
.stock-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Bilder */
.stock-image {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
}

/* Suchfeld und Filter-Dropdown */
.controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.controls-container input,
.controls-container select {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
}

.controls-container input:focus,
.controls-container select:focus {
    border-color: #aaa;
}

/* Navigation (Previous, Back, Next) */
.stock-detail-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.stock-detail-nav-left,
.stock-detail-nav-right,
.stock-detail-nav-back {
    text-decoration: none;
    font-size: 18px; /* Größere Schrift */
    color: #ffffff;
    background: #555;
    padding: 12px 25px; /* Größere Buttons */
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.3s, color 0.3s;
    font-weight: bold; /* Fett für bessere Sichtbarkeit */
}

.stock-detail-nav-left:hover,
.stock-detail-nav-right:hover,
.stock-detail-nav-back:hover {
    background: #666; /* Dunkleres Blau beim Hover */
    color: #ffffff;
}

/* Hauptbild oben */
.stock-detail-main-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
}

/* Linke und rechte Spalte */
.stock-detail-container {
    display: flex;
    gap: 60px;
    margin-top: 20px;
}

.stock-detail-left {
    flex: 30%;
}

.stock-detail-left img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.stock-detail-right {
    flex: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Buttons (Upscale und Delete) */
.stock-detail-actions {
    display: flex;
    gap: 15px;
}

.stock-detail-actions .upscale-button {
    background: #28a745; /* Grün */
    color: white;
    padding: 15px 25px; /* Größerer Button */
    font-size: 16px; /* Größere Schrift */
    border-radius: 8px; /* Abgerundete Ecken */
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: bold; /* Fett für bessere Sichtbarkeit */
}

.stock-detail-actions .upscale-button:hover {
    background: #218838; /* Dunkleres Grün beim Hover */
}

.stock-detail-actions .delete-button {
    background: #dc3545; /* Rot */
    color: white;
    padding: 15px 25px; /* Größerer Button */
    font-size: 16px; /* Größere Schrift */
    border-radius: 8px; /* Abgerundete Ecken */
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: bold; /* Fett für bessere Sichtbarkeit */
}

.stock-detail-actions .delete-button:hover {
    background: #c82333; /* Dunkleres Rot beim Hover */
}

.generator-tag {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
}



/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0;
    gap: 5px;
}

.page-link {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #007bff;
    text-decoration: none;
    transition: background-color 0.3s;
}

.page-link:hover {
    background-color: #e9ecef;
    color: #0056b3;
    text-decoration: none;
}

.page-link.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: bold;
}

.pagination-info {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    color: #6c757d;
    font-size: 14px;
}

/* Improved styling for status page */
.status-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.status-item {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.status-image-container {
    flex: 0 0 300px;
    position: relative;
    background-color: #f5f5f5;
}

.status-source-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resolution-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    color: #000;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.text-prompt-container {
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f9f9f9;
}

.text-prompt-container h3 {
    margin-top: 0;
    color: #444;
    margin-bottom: 10px;
}

.status-details-container {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.status-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.status-label, .generator-badge, .upscale-badge, .task-id-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.status-completed {
    background-color: #d4edda;
    color: #155724;
}

.status-processing {
    background-color: #fff3cd;
    color: #856404;
}

.status-pending {
    background-color: #d1ecf1;
    color: #0c5460;
}

.status-failed {
    background-color: #f8d7da;
    color: #721c24;
}

.status-cancelled {
    background-color: #e2e3e5;
    color: #383d41;
}

.generator-badge {
    background-color: #e2e3e5;
    color: #383d41;
}

.upscale-badge {
    background-color: #cce5ff;
    color: #004085;
}

.task-id-badge {
    background-color: #f5f5f5;
    color: #606060;
    font-family: monospace;
}

.date-info {
    color: #6c757d;
}

.error-message {
    background-color: #fff2f2;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    border-left: 4px solid #dc3545;
}

.error-message p {
    margin: 0;
    color: #721c24;
}

.gpt-prompt {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    position: relative;
}

.edit-prompt-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
}

.edit-prompt-btn:hover {
    background-color: #5a6268;
}

.details-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.detail-col {
    flex: 1;
}

.detail-col p {
    margin: 8px 0;
}

.action-buttons {
    margin-top: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.view-images-btn, .cancel-task-btn, .retry-task-btn {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-weight: bold;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

.view-images-btn {
    background-color: #007bff;
    color: white;
}

.view-images-btn:hover {
    background-color: #0069d9;
}

.cancel-task-btn {
    background-color: #dc3545;
    color: white;
}

.cancel-task-btn:hover {
    background-color: #c82333;
}

.retry-task-btn {
    background-color: #28a745;
    color: white;
}

.retry-task-btn:hover {
    background-color: #218838;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    max-width: 700px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover {
    color: black;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-control {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cancel-btn, .save-btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.cancel-btn {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #ddd;
}

.save-btn {
    background-color: #007bff;
    color: white;
}

.cancel-btn:hover {
    background-color: #e2e6ea;
}

.save-btn:hover {
    background-color: #0069d9;
}

.prompt-help {
    margin-top: 10px;
    font-size: 13px;
    color: #6c757d;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
}

.prompt-help p {
    margin: 0;
}

/* Alert Boxes */
.alert {
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
    .status-item {
        flex-direction: column;
    }
    
    .status-image-container {
        flex: 0 0 auto;
        height: 200px;
    }
    
    .details-grid {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-content {
        width: 90%;
        margin: 15% auto;
    }
}