html, body {
    height: 100%;
}

body {
	color:#fff;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
    background-color: #000000;
}

.header {
    overflow: hidden;
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
}

.header-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    padding: 1em;
}

.header img {
    width: 4em;
}

.content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    max-width: 96vw;
    margin: 3em auto 1em;
}
.centercontent {
    justify-items: center;
}

.content > * {
	color:#fff;
    background-color: #2f2f2f47;
	outline: #00ff00 solid 0.1em;
    max-width: inherit;
    box-sizing: border-box;
}

#shortener {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    width: 800px;
    max-width: inherit;
    box-sizing: border-box;
}

.info {
    color: #C00000;
}

#shortener, .info {
    padding: 1em;
}

@media (max-width: 767px) {
    .content {
        margin: 1em auto;
    }

    #shortener, .info {
        padding: 1em;
    }
}

.radio-box {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-template-columns: auto 1fr;
    width: 100%;
    gap: 0.5em;
}

.file-box {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: left;
    gap: 1em;
    align-items: center;
}


input[type=text],
input[type=password],
select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

textarea {
	color:#fff;
    width: 100%;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #00ff00;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    background-color: #20202080;
}

.button, input[type=submit], .file-upload {
    display: inline-block;
    width: fit-content;
    font-size: inherit;
    text-align: center;
    background-color: #097100;
    color: white;
    padding: 0.5em 1em;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid #00ff00;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

input[type="file"] {
    display: none;
}

#urlDiv,
#fileDiv,
#textDiv {
    display: none;
    grid-column: span 2;
    margin: 1em 0;
    gap: 0.5em;
    grid-template-columns: 100%;
}

form:has(input[id="showURL"]:checked) #urlDiv,
form:has(input[id="showText"]:checked) #textDiv,
form:has(input[id="showFile"]:checked) #fileDiv {
    display: grid;
}

#customDiv {
    display: none;
    grid-column: span 2;
    margin: 1em 0;
    gap: 0.5em;
    grid-template-columns: 100%;
}

form:has(input[id="showCustomKey"]:checked) #customDiv {
    display: grid;
}

#passwordDiv {
    display: none;
    grid-column: span 2;
    margin: 1em 0;
    gap: 0.5em;
    grid-template-columns: 100%;
}

form:has(input[id="showPassword"]:checked) #passwordDiv {
    display: grid;
}




/* Hide the checkbox used for CSS-only toggles */
.toggle-checkbox {
    display: none;
}

.tos {
    padding: 2em;
    margin-bottom: 1em; /* Add space below the TOS box to prevent cutoff when expanded */
}

/* Make the toggle label look like an interactive element */
.toggle-label {
    cursor: pointer;
    user-select: none; /* Prevents text selection when clicking */
}

/* Add an expand/collapse icon to the toggle label */
.toggle-label::before {
    content: '\25B6'; /* Right-pointing triangle for collapsed state */
    display: inline-block;
    margin-right: 0.5em;
    font-size: 0.8em;
}

.toggle-content {
    padding: 2em;
    padding-top: 0em;
    margin: 1em 0;
    display: none;
}

.toggle-checkbox:checked ~ .toggle-content {
    display: block;
}

/* Change the icon when the checkbox is checked (expanded state) */
.toggle-checkbox:checked + .toggle-label::before {
    content: '\25BC'; /* Down-pointing triangle for expanded state */
}

.text-dump-box {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.copy-button {
    margin-top: 8px;
}

/* Constrain the width of the number input for "Max Uses" */
.inputbox[type=number] {
    width: 7em; /* Adjust width */
    background-color: #3a3a3a;
    border: 1px solid #444;
    color: #fff;
    padding: 0.75em 1em;
    border-radius: 4px;
}

.inputbox[type=number]:focus {
    outline: none;
    border-color: #00ff00; /* Use accent green */
}

.emailinputbox {
  width: 100%;
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

.footer-link {
    max-width: 800px; /* Match the width of the main form for alignment */
    margin: 1em auto; /* Center the footer block itself */
    text-align: center;
    padding: 1em;
}

.footer-link a {
    color: #aaa;
    text-decoration: none;
}

.footer-link a:hover {
    text-decoration: underline;
}

/* Admin Panel Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
}

th, td {
    border: 1px solid #444;
    padding: 0.8em;
    text-align: left;
}

th {
    background-color: #3a3a3a;
}

/* Admin Panel Form Styling */
.admin-form {
    display: grid;
    gap: 1em;
    align-items: center;
    margin-top: 1em;
	margin-bottom: 1em;
}

/* Make the delete button rule more specific to override the default submit style */
input[type=submit].delete-button {
    background-color: #c00000; /* Red color for destructive action */
    color: white;
    padding: 0.2em 0.2em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: auto; /* Override the default width: 100% */
}

/* Make the admin submit button rule more specific to ensure it's green */
input[type=submit].admin-submit-button {
    background-color: #097100;
}

input[type=submit].edit-button {
    padding: 0.2em 0.2em;
}

.edit-button {
    background-color: #097100;
    color: white;
    padding: 0.2em 0.2em;
    border: 1px solid #0F0;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1.2; /* Ensure consistent height for input and a tags */
}

/* Style for admin form inputs that have a specific override value */
input[type="text"].is-overridden,
input[type="number"].is-overridden,
select.is-overridden {
    border: 1px solid #ff9900; /* An orange border to indicate an override */
}

/* Utility class for section subtitles in admin panel */
.section-subtitle {
    margin-top: 2em;
}

/* Styles for the logout page */
.logout-message {
    font-size: 1.2em;
    text-align: center;
}

/* Admin Panel Statistics */
.stats-container {
    display: flex;
    gap: 1em;
    margin-top: 1em;
}

.stat-box {
    background-color: #3a3a3a;
    padding: 1.5em;
    border-radius: 4px;
    text-align: center;
    flex-grow: 1;
}

.stat-value {
    display: block;
    font-size: 2em;
    font-weight: bold;
}

.stat-label {
    display: block;
    font-size: 0.9em;
    color: #aaa;
    margin-top: 0.5em;
}

.stats-link {
    font-size: 0.6em;
    font-weight: normal;
    vertical-align: middle;
    margin-left: 1em;
    color: #aaa;
    text-decoration: none;
}

.stats-link:hover {
    text-decoration: underline;
}

.qr-code-container {
    text-align: center;
}

.qr-code-container img {
    background-color: #fff; /* White background to make QR code scannable */
    border-radius: 9px; /* Optional: slightly rounded corners for the frame */
}

/* Styles for the redirect page */
.destination-box {
    background-color: #202020;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 1em;
    margin: 1em 0;
    word-wrap: break-word; /* Ensure long URLs don't break the layout */
}

.destination-box a {
    color: #fff;
    text-decoration: none;
}

.proceed-button {
    display: inline-block;
    background-color: #097100;
    color: white;
    padding: 1em 2em;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1em;
}

.proceed-button:hover {
    background-color: #0c8f00;
}

.divider {
    border: 0;
    border-top: 1px solid #444;
    margin: 2em 0;
}

.link-info {
    font-size: 0.9em;
    color: #aaa;
}

.stats-result-container {
    margin-top: 1em;
}

/* When domain stats are loaded, the result container already provides margin. */
/* Remove the top margin from the inner stats-container to prevent double margins. */
.stats-result-container .stats-container {
    margin-top: 0;
}

.pagination-controls {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-button {
    background-color: #4CAF50; /* A slightly different green */
    color: white;
    padding: 0.5em 1em;
}

.search-form {
    display: flex;
    gap: 0.5em;
    margin-bottom: 1em;
    align-items: center;
}

.search-form .inputbox {
    margin: 0; /* Override default margin */
    flex-grow: 1;
}

.search-form .button, .search-form .clear-button {
    width: auto;
    padding: 0.75em 1.5em; /* Match input box height */
    text-decoration: none;
}

.chart-container {
    position: relative;
    height: 40vh;
    width: 80vw;
    margin-bottom: 2em;
}

.report-comments {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.status-update-form select {
    margin-bottom: 0.5em;
}
.manage-link-button {
    margin-top: 0.5em;
}

.delete-report-form {
    margin-top: 0.5em;
}

.chart-container {
    position: relative;
    height: 40vh;
    width: 80vw;
    margin-bottom: 2em;
}

.form-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1em;
}

.form-container fieldset {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    align-items: center;
}

.form-grid-span-2 {
    grid-column: span 2;
}

/* Modern Button Radios */
.button-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    grid-column: span 2; /* Make it span both columns of the parent grid */
}

.button-radio-group label {
    flex-grow: 1;
    cursor: pointer;
}

.button-radio-input {
    /* Visually hide the radio button */
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.button-radio-label {
    display: block;
    padding: 1em 1.5em;
    background-color: #3a3a3a;
    border: 1px solid #444;
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
}

.button-radio-group label:hover .button-radio-label {
    background-color: #4a4a4a;
}

.button-radio-label .button-radio-title {
    display: block;
    font-weight: 600;
    font-size: 1.1em;
}

.button-radio-label .button-radio-desc {
    display: block;
    font-size: 0.8em;
    color: #aaa;
    margin-top: 0.25em;
}

/* Style for the selected button */
.button-radio-input:checked + .button-radio-label {
    background-color: #097100; /* Use the existing green accent color */
    border-color: #00ff00;
}

.button-radio-input:checked + .button-radio-label .button-radio-desc {
    color: #e0e0e0;
}

/* Modern Toggle Switch */
.form-row {
    display: flex;
    justify-content: flex-start;
    gap: 1em;
    align-items: center;
    padding: 0.1em 0;
    grid-column: span 2;
}



.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4a4a4a;
    transition: .4s;
    border-radius: 28px;
}

.toggle-switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-switch-slider {
    background-color: #097100; /* Green accent */
}

.toggle-switch input:checked + .toggle-switch-slider:before {
    transform: translateX(22px);
}

.button:hover, input[type=submit]:hover {
    background-color: #0c8f00; /* A slightly lighter green */
}

/* New styles for admin buttons container */
.admin-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between buttons */
    justify-content: center; /* Center the buttons */
}

.admin-buttons-container .button {
    background-color: #097100; /* Example green background */
    color: white;
    padding: 10px 20px;
    border: 1px solid #00ff00;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Remove underline from links */
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.admin-buttons-container .button:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* New button color styles */
.button-yellow {
    background-color: #9F7700;
    border: 1px solid #FFEB3B;
}

.button-yellow:hover {
    background-color: #E0A800;
}

.button-red, input[type="submit"].button-red {
    background-color: #65000A;
    border: 1px solid #FF0000;
}

.button-red:hover, input[type="submit"].button-red:hover {
    background-color: #C82333;
}

.button-blue {
    background-color: #007BFF;
    border: 1px solid #CCE5FF;
}

.button-blue:hover {
    background-color: #0056B3;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

input[type=submit].button-wide {
    width: 100%;
}