/* Default Dark Mode Variables defined on html[data-bs-theme="dark"] by Bootstrap */
[data-bs-theme="dark"] {
    --app-primary: var(--bs-primary); /* Use Bootstrap's primary by default */
    --app-history-item-hover-bg: rgba(255, 255, 255, 0.05);
}

/* Light Mode Variables */
[data-bs-theme="light"] {
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #212529;
  --bs-border-color: #dee2e6;
  --app-primary: var(--bs-primary); /* Use Bootstrap's primary by default */
  --app-history-item-hover-bg: rgba(0, 0, 0, 0.03);
}

/* Apply the custom primary color */
.btn-primary {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}
/* Add other elements you want to color with the accent */
.form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}


/* General Styling */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-top: 60px; /* Adjust based on navbar height */
    padding-bottom: 2rem; /* Add some space at the bottom */
}

textarea {
    resize: vertical;
    min-height: 150px; /* Ensure a minimum height */
}

@media (max-width: 768px) {
    #input-text, #output-text {
        height: 150px !important; /* Maintain specific height on smaller screens */
    }
    .navbar-brand {
        font-size: 1rem; /* Adjust brand size on small screens */
    }
}

/* QR Code Styling */
#qrcode-output img,
#qrcode-output canvas {
    display: block; /* Prevents extra space below */
    margin: auto;   /* Center the QR code if container is wider */
    max-width: 100%;
    height: auto;
    background-color: white; /* Ensure QR code has white background */
    padding: 10px; /* Add some padding around the code */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* History Styling */
#history-list .list-group-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    word-break: break-word; /* Prevent long text from overflowing */
}

#history-list .list-group-item:hover {
     background-color: var(--app-history-item-hover-bg); /* Use theme variable */
}

#history-list .history-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    display: block;
    margin-top: 0.2rem;
}

/* Input Validation Feedback */
#input-validation-feedback:not(:empty) {
    margin-top: 0.25rem;
    font-size: 0.875em;
}

/* Make XOR password field look correct */
#xor-password-group {
    transition: opacity 0.3s ease;
}
#xor-password-group:not([style*="display: none;"]) {
    opacity: 1;
}
#xor-password-group[style*="display: none;"] {
    opacity: 0;
}

/* Adjust theme dropdown */
.dropdown-item i {
    margin-right: 8px;
}