/* assets/css/styles.css */

/* Global reset for margin, padding, and box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	margin: 0;
    padding: 0;
	background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Set minimum height to full viewport height */
    margin: 0; /* Remove default margin */
    font-family: Arial, sans-serif;
	overflow-x: hidden;
	--link-color: #0056b3; /* Blue for links in day mode */
	--text-color: #000; /* Black for day mode */
}

/* Dark Mode */
body.dark-mode {
    --text-color: #ddd; /* Light gray for night mode */
    --link-color: #88c0d0; /* Softer blue for links in dark mode */
}

/* Make the main content wrapper take up all available space */
.main-content {
    flex: 1;
    /* overflow-x: auto; */ /* this causes a weird box under the header */
	width: 100%;
	margin-top: 30px; /* Adjust to the height of the header */
    padding: 20px; /* Optional: Adds padding to content */
}

/* Wrapper for main content with padding */
.content-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    flex: 1;
}

.adjusted-content-wrapper-for-edit {
	padding-left: 300px;  /* Shift content to the right */
    font-size: 1.3rem;    /* Increase text size */
    position: relative !important;
    top: -70px !important;
    padding-top: 0;   
	input[type="text"],
	input[type="number"],
	input[type="email"],
	input[type="date"],
	input[type="time"],
	select,
	textarea {
		width: 300px;  /* Increase the width */
		height: 35px;  /* Increase the height */
		padding: 8px;  /* Add padding for better spacing */
		font-size: 1.1rem;  /* Increase the font size for readability */
	}
}

/* Specific style for the incident notes textarea */
.incident-textarea {
    width: 100% !important;
    height: auto !important;  /* Let the rows attribute define the height */
    padding: 8px !important;
    font-size: 1.1rem !important;
    resize: vertical !important;
}

.incident-table-container {
    overflow-x: auto;
    width: 100%;
}

.id-column {
    text-align: center;  /* Center the text horizontally */
    vertical-align: middle; /* Ensure the text is centered vertically (optional) */
}

/* Style for the header and footer */
header, footer {
    background: linear-gradient(to left, rgba(139, 0, 0, 0.9), rgba(0, 0, 0, 0.9)); /* Dark red to black */
    color: white;
    padding: 0 !important;
    text-align: center;
}

header nav a {
    color: var(--header-text-color);
}

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

/* Header Layout */
header {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure it stays on top */
    background-color: var(--header-background);
    color: white;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Header Content Wrapper */
.header-content {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Limit width of header content */
    padding: 0 20px;
    justify-content: space-between;
}

/* Center the Heading */
header h1 {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}

/* Centered Navigation */
.centered-nav {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* Dark Mode Container Aligned to Right */
.dark-mode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 20px;
}

.dark-mode-title {
    font-size: 12px;
    margin-bottom: 5px;
    color: white;
}

/* Container for navigation links and dark mode toggle */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px; /* Add padding to the right side of the switch */
}

header nav {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between nav links */
}

.dark-mode-toggle-container {
    margin-left: auto; /* Pushes the toggle switch to the far right */
    display: flex;
    align-items: center;
}


/* Dark Mode Toggle Container */
.dark-mode-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dark Mode Toggle Base */
.dark-mode-toggle {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dark-mode-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Toggle Wrapper */
.toggle-wrapper {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 32px;
}

/* Track Styling */
.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
    border-radius: 50px;
    transition: 0.4s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

/* Sun and Moon Icons */
.toggle-track .fa-sun {
    color: #fff;
    font-size: 14px;
}

.toggle-track .fa-moon {
    color: #fff;
    font-size: 14px;
}

/* Thumb (Switch) Styling */
.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Checked State Styles */
.dark-mode-toggle input:checked + .toggle-wrapper .toggle-track {
    background: linear-gradient(to right, #4a90e2 0%, #67b26f 100%);
}

.dark-mode-toggle input:checked + .toggle-wrapper .toggle-thumb {
    transform: translateX(32px);
}

/* Hover Effects */
.toggle-wrapper:hover .toggle-thumb {
    box-shadow: 0 0 2px 3px rgba(255,255,255,0.2);
}

/* Focus State */
.dark-mode-toggle input:focus + .toggle-wrapper .toggle-track {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}

/* Active/Pressed State */
.dark-mode-toggle input:active + .toggle-wrapper .toggle-thumb {
    width: 32px;
}

/* Dark Mode State Colors */
.dark-mode .toggle-track {
    background: linear-gradient(to right, #243B55 0%, #141E30 100%);
}

/* Animation for icons */
.toggle-track i {
    transition: 0.4s;
}

.dark-mode-toggle input:checked + .toggle-wrapper .toggle-track i.fa-sun {
    opacity: 0.4;
    transform: rotate(-180deg);
}

.dark-mode-toggle input:checked + .toggle-wrapper .toggle-track i.fa-moon {
    opacity: 1;
    transform: rotate(0);
}

.dark-mode-toggle input:not(:checked) + .toggle-wrapper .toggle-track i.fa-sun {
    opacity: 1;
    transform: rotate(0);
}

.dark-mode-toggle input:not(:checked) + .toggle-wrapper .toggle-track i.fa-moon {
    opacity: 0.4;
    transform: rotate(180deg);
}

/* Use the defined colors */
a.download-link {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.evidence-list-item span {
    color: var(--text-color);
}

/* save changes and back button dark mode */
.dark-mode .button-primary {
    background-color: #009688; /* Dark mode background color for Save Changes */
    color: #ffffff; /* Text color for Save Changes */
	color: var(--button-text-color);
}

.dark-mode .button-secondary {
    background-color: #555555; /* Dark mode background color for Back */
    color: #ffffff; /* Text color for Back */
	color: var(--button-text-color);
}

/* Dark mode style for button container */
.dark-mode .buttons-container {
    background-color: #121212; /* Dark mode background for the button container */
    padding: 10px; /* Ensure it has some padding to match light mode */
}

/* Dropdown Container */
/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Specific footer styles */
footer {
    background-color: #004080; /* Optional: same color as header */
    color: white;
    padding: 10px;
    text-align: center;
    width: 100%;
    margin-top: auto; /* Pushes footer to the bottom */
	
}

/* Navigation Links */
nav a {
    color: white;
    margin-right: 15px;
    text-decoration: none;
}

/* Heading styles */
h2 {
    color: #004080;
	padding-left: 20px;
	font-size: 2rem;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid var(--table-border-color);
}

th, td {
    padding: 8px;
    text-align: left;
}

.pagination-container {
    display: flex;
    justify-content: flex-end; /* Aligns pagination on the right */
    padding-right: 20px; /* Adds padding from the right */
    margin-top: 10px; /* Adds some spacing above */
}

.page-number {
    text-align: center;
    margin-top: 20px; /* Adjust the spacing from the table */
    font-size: 16px; /* Adjust the font size as needed */
    color: #004080; /* Optional styling */
    display: block;
}

.pagination-control {
    display: flex;
    justify-content: space-between; /* Keeps text on the left and links on the right */
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds space between the text and the dropdown */
}

#recordsPerPage {
    padding: 5px;
    margin-left: 15px; /* Adds space from the page margin */
}

.pagination {
    display: flex;
    justify-content: flex-end; /* Align pagination links to the right */
    margin: 0;
    padding: 10px 0;
}

.pagination a {
    margin: 0 5px;
    text-decoration: none;
}

.pagination a.active {
    font-weight: bold;
}

/* Expandable content */
.expandable {
    cursor: pointer;
    max-height: 50px; /* Adjust as needed */
    overflow: hidden;
    position: relative;
}

.expandable .content {
    padding-right: 20px;
}

.expandable:after {
    content: '\25BC'; /* Down arrow */
    position: absolute;
    right: 5px;
    top: 5px;
}

.expandable.expanded {
    max-height: none;
}

.expandable.expanded:after {
    content: '\25B2'; /* Up arrow */
}

/* Increase text size for table headers */
#incidentTable th {
	background-color: var(--table-header-background);
    color: var(--text-color);
    font-size: 1rem !important; /* Header font size */
	padding: 8px;
}

table td {
    background-color: var(--table-row-background);
    color: var(--text-color);
}

table tr:hover td {
    background-color: var(--table-row-hover-background);
}

/* Increase text size for table data cells */
#incidentTable td {
    font-size: em !important; /* Data cell font size */
	padding: 8px;
}

/* Ensure the table container allows horizontal scrolling */
.incident-table-container {
    overflow-x: auto;
    width: 100%;
}

/* Set a minimum width for the table */
#incidentTable {
	width: 100%;
    min-width: 2100px; /* Adjust the value as needed */
    table-layout: fixed;
}
/* Set fixed widths for table columns */
#incidentTable th,
#incidentTable td {
    width: 100px; /* Default width for all columns */
}

/*set specific widths for certain columns*/
#incidentTable th.incident-notes,
#incidentTable td.incident-notes {
    width: 400px; /* Wider width for Incident Notes column */
}

/*Set specific widths for checkbox columns */
#incidentTable th.checkbox-column,
#incidentTable td.checkbox-column {
    width: 90px !important;
    min-width: 90px !important;
}

#incidentTable th.actions-column,
#incidentTable td.actions-column {
    width: 100px;
    min-width: 100px;
}

/* Center the checkbox vertically within the cell without using flex */
.checkbox-column {
    width: auto;
    text-align: center;
    padding: 8px;
    vertical-align: middle;
}

/* Add a container div for the checkbox and icons */
.checkbox-actions-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Spacing between the checkbox and icons */
}

.checkbox-column input[type="checkbox"] {
    margin: 0;
    line-height: normal;
    padding-left: 8px; /* Adds space on the left of the checkbox */
}

.action-icon {
    color: #004080;
    text-decoration: none;
}

.action-icon:hover {
    color: #003366;
}

.action-icon i {
    font-size: 16px;
}

.action-icon:last-child {
    margin-right: 8px; /* Adds space on the right of the last icon (magnifying glass) */
}

/* Success Message */
.success-message {
    background-color: #dff0d8;
    color: #3c763d;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Button Styles */
.button {
    display: inline-block;
    background-color: var(--button-background);
    color: var(--button-text-color);
    padding: 12px 24px; /* Increased padding for a bigger button */
    font-size: 16px; /* Increase font size */
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px; /* Optional: Rounded corners */
    cursor: pointer;
    margin: 10px 5px; /* Add some margin */
	transition: background-color 0.3s ease;
}

.button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

#deleteButton {
    background-color: #cccccc; /* Initial grey color */
}

#deleteButton.active {
    background-color: #ff4444; /* Red color when active */
}

#deleteButton:hover:not(:disabled) {
    background-color: #e60000; /* Darker red on hover */
}

/* General button styling to show pointer cursor */
button, input[type="file"], .button-primary, .button-secondary {
    cursor: pointer;
}

/* Hover Effect */
.button:hover {
    background-color: var(--link-hover-color); /* Darker blue on hover */
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* View.php styles */
/* Specific styles for the incident container */
.incident-container {
    max-width: 900px; /* You can adjust the max width to your preference */
    margin: 20px auto; /* Adds a small margin to avoid the container touching the top */
    padding: 10px;
    font-size: 1.1rem; /* Increase font size for better readability */
}

/* Styles for the incident-view content within the container */
.incident-view h2 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 2rem; /* Increase the heading size */
}

.incident-view p {
    margin-bottom: 15px;
    font-size: 1.2rem; /* Increase the font size for paragraphs */
}
/* Night mode styles for the incident container */
.dark-mode .incident-container {
    background-color: #1e1e1e; /* Dark background color */
    color: #e0e0e0; /* Light text color for contrast */
    border: 1px solid #333; /* Dark border for better visibility in night mode */
}

/* Night mode styles for headings within the incident container */
.dark-mode .incident-view h2 {
    color: #ffffff; /* White color for headings for improved visibility */
}

/* Night mode styles for paragraphs within the incident container */
.dark-mode .incident-view p {
    color: #e0e0e0; /* Light color for better contrast */
}

/* Night mode for buttons within the container */
.dark-mode .button-primary,
.dark-mode .button-secondary {
    background-color: #009688; /* Change to a dark-friendly color */
    color: #ffffff; /* White text for visibility */
}

/* Night mode styles for download button */
.dark-mode .incident-container .button {
    background-color: #444; /* Darker background for the button */
    color: #fff; /* Light text */
    border: 1px solid #666; /* Dark border for better definition */
}


.form-section, /* replace with the class or id if specific */
fieldset {
    border: none;
}

/* Buttons Container */
.buttons-container {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    padding: 10px;
    text-align: left;
    z-index: 100;
}

/* Buttons Styles */
.button-primary {
    background-color: #004080;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
}

.button-secondary {
    background-color: #888888;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    text-decoration: none;
    margin-left: 10px;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    /* Adjust table styles */
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }
}

:root {
    --background-color: #f5f5f5;
    --text-color: #000000;
    --header-background: #004080;
    --header-text-color: #ffffff;
    --link-color: #004080;
    --link-hover-color: #00264d;
    --button-background: #004080;
    --button-text-color: #ffffff;
    --table-header-background: #f2f2f2;
    --table-row-background: #ffffff;
    --table-row-hover-background: #f9f9f9;
	--table-border-color: #ccc;
    --table-header-background: #dcdcdc;
    --table-row-background: #ffffff;
    --table-row-hover-background: #dcdcdc;
    --table-text-color: #000000;
	
	--edit-button-color: #12427c;
    --save-upload-download-button-color: #12427c;
    --delete-button-color: #ee574b;
}

/* Dark Mode Variables */
.dark-mode {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --header-background: #1e1e1e;
    --header-text-color: #ffffff;
    --link-color: #bb86fc;
    --link-hover-color: #016e6d;  /* #016e6d #3700b3*/
    --button-background: #009688; /* #BB86FC #009688*/
    --button-text-color: #000000;
    --table-header-background: #8e8e8e; /* #8e8e8e #2c2c2c*/
    --table-row-background: #848484; /* #848484 #2c2c2c*/
    --table-row-hover-background: #3a3a3a;
	--table-border-color: #444;
    --table-header-background: #2c2c2c;
    --table-row-background: #1e1e1e;
    --table-row-hover-background: #3a3a3a;
    --table-text-color: #e0e0e0;
	
	--edit-button-color: #3d958e;
    --save-upload-download-button-color: #3d958e;
}

/* Table specific dark mode styles */
.dark-mode #incidentTable {
    border-color: var(--table-border-color);
}

.dark-mode #incidentTable th {
    background-color: var(--table-header-background);
    color: var(--table-text-color);
    border-color: var(--table-border-color);
}

.dark-mode #incidentTable td {
    background-color: var(--table-row-background);
    color: var(--table-text-color);
    border-color: var(--table-border-color);
}

.dark-mode #incidentTable tr:hover td {
    background-color: var(--table-row-hover-background);
}

/* Tablesorter specific dark mode styles */
.dark-mode .tablesorter-blue {
    background-color: var(--table-row-background);
}

.dark-mode .tablesorter-blue thead tr th, 
.dark-mode .tablesorter-blue tfoot tr th {
    background-color: var(--table-header-background);
    color: var(--table-text-color);
    border-color: var(--table-border-color);
}

.dark-mode .tablesorter-blue tbody td {
    background-color: var(--table-row-background);
    color: var(--table-text-color);
    border-color: var(--table-border-color);
}

.dark-mode .tablesorter-blue tbody tr.odd td {
    background-color: var(--table-row-hover-background);
}

.dark-mode .tablesorter-blue tbody tr:hover td {
    background-color: var(--table-row-hover-background);
}

/* Filter-row specific styles for dark mode */
.dark-mode .tablesorter-filter-row td {
    background-color: var(--table-header-background);
    border-color: var(--table-border-color);
}

.dark-mode .tablesorter-filter-row input.tablesorter-filter,
.dark-mode .tablesorter-filter-row select.tablesorter-filter {
    background-color: var(--table-row-background);
    color: var(--table-text-color);
    border: 1px solid var(--table-border-color);
}

.dark-mode .tablesorter-blue .tablesorter-header-inner::after {
    border-bottom-color: #fff !important; /* For the up arrow */
    opacity: 0.7; /* Makes it slightly softer */
}

.dark-mode .tablesorter-blue .tablesorter-headerAsc .tablesorter-header-inner::after {
    border-bottom-color: #fff !important; /* For ascending sort arrow */
}

.dark-mode .tablesorter-blue .tablesorter-headerDesc .tablesorter-header-inner::after {
    border-top-color: #fff !important; /* For descending sort arrow */
}

/* Alternative approach using background images if above doesn't work */
.dark-mode .tablesorter-blue .tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    /* Light colored unsorted icon */
}

.dark-mode .tablesorter-blue .tablesorter-headerAsc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
    /* Light colored ascending arrow */
}

.dark-mode .tablesorter-blue .tablesorter-headerDesc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
    /* Light colored descending arrow */
}

/* Add hover state for better visibility */
.dark-mode .tablesorter-blue .tablesorter-header:hover {
    background-color: #3a3a3a; /* Slightly lighter than the header background */
}

/* Ensure the sort arrows have good contrast */
.dark-mode .tablesorter-blue .tablesorter-header {
    color: #ffffff !important; /* Bright text color */
}

/* Dark mode styles for user management table */
.dark-mode #userTable {
    border-color: var(--table-border-color);
}

.dark-mode #userTable th {
    background-color: var(--table-header-background);
    color: var(--table-text-color);
    border-color: var(--table-border-color);
}

.dark-mode #userTable td {
    background-color: var(--table-row-background);
    color: var(--table-text-color);
    border-color: var(--table-border-color);
}

.dark-mode #userTable tr:hover td {
    background-color: var(--table-row-hover-background);
}

/* Optional: Add hover effects for better visibility */
.dark-mode #userTable th:hover {
    background-color: var(--table-row-hover-background);
    color: var(--link-color);
}

/* Pagination styles for consistency */
.dark-mode .pagination a {
    color: var(--link-color);
}

.dark-mode .pagination a:hover {
    color: var(--link-hover-color);
}

/* Night mode table header styles */
.dark-mode table th {
    color: #ffffff !important;  /* White text for header cells */
    background-color: #1e1e1e !important;  /* Optional: dark background */
}

/* Links within header cells in dark mode */
.dark-mode table th a {
    color: #ffffff !important;   /* White text for the sorting links */
    text-decoration: none;       /* Remove underline if desired */
}

/* Hover state for links in dark mode */
.dark-mode table th a:hover {
    color: #cccccc !important;   /* Slightly lighter on hover */
}

/* Edit Button */
.edit-button {
    background-color: var(--edit-button-color);
    color: var(--button-text-color);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.edit-button:hover {
    opacity: 0.8;
}

/* Save, Upload, and Download Buttons */
.button-primary, .button-secondary {
    background-color: var(--save-upload-download-button-color);
    color: var(--button-text-color);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.button-primary:hover, .button-secondary:hover {
    opacity: 0.8;
}

/* Delete Button */
.delete-button {
    background-color: var(--delete-button-color);
    color: var(--button-text-color);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.delete-button:hover {
    opacity: 0.8;
}