body { font-family: Arial, sans-serif;
background-color: #ffffff;

}
.form-section{margin-bottom:40px;padding:25px;border:1px solid #ccc;border-radius:8px;background:#f0f4f8;}
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border: 1px solid #ccc; text-align: left; }
th { background: #0078D7; color: white; }
.Low { background: #d4edda; }
.Medium { background: #fff3cd; }
.High { background: #f8d7da; font-weight: bold; }
.Reported { color: red; font-weight: bold; }
.In\ Progress { color: orange; }
.Resolved { color: green; font-weight: bold; }
/* Resolved rows */
.fullresolved {
background-color: #d3d3d3; /* light gray */
color: black;
}
.btn {
    padding:8px 12px; font-size:1em; border-radius:4px; background-color:#0073e6; color:white; border:none; cursor:pointer; text-decoration:none;
}
.btn:hover {
    background-color: #0056b3;
}
.status-circle {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;

font-size: 0.9rem;

text-align: center;

}
.res-circle {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;

font-size: 1.5rem;

text-align: center;


}

.reported {
background-color: #ca5010;
color:white;
}

.in-progress {
background-color: #0078d4;
color:white;
}

.resolved {
background-color: #498205;
color:white;
}



.low {
background-color: #caf0cc; /* Light green */
color: #006400; /* Dark green */
}

.medium {
background-color: #d4e7f6; /* Light blue */
color: #00008B; /* Dark blue */
}

.high {
background-color: #fabbc3; /* Light red */
color: #8B0000; /* Dark red */
}


.priority-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;

font-size: 0.9rem;
text-align: center;
}

button { padding: 5px 10px; margin: 2px;  cursor:pointer; }	
oldbutton { padding: 5px 10px; background: #28a745; color: white; border: none; cursor: pointer; }
oldbutton .logout { padding: 5px 10px; background: red; color: white; border: none; cursor: pointer; }
oldbutton:hover { background: #218838; }	

bottom-border {
border-collapse: collapse; /* merge borders */
width: 100%;
}

.bottom-border td {
border: none; /* remove all cell borders */
padding: 8px;
}

.bottom-border tr {
border-bottom: 1px solid #000; /* bottom border for each row */
}

/* Optional: remove bottom border from last row */
.bottom-border tr:last-child {
border-bottom: 1px solid #000;
}		
.desc-preview {
color: black;
cursor: pointer;
text-decoration: none;
}
.desc-preview2 {
color: white;
cursor: pointer;
text-decoration: none;
display: block;
gap: 5px;
margin-bottom: 2px;
font-weight: bold;
font-size: 1.1em;
}

.desc-popup2 {
display: none;
position: absolute;
background: #fff;
border: 1px solid #666;
padding: 10px;
max-width: 300px;
z-index: 1000;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}	
.desc-popup {	
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* dark background */
}

/* Popup box */
.modal-content {
background: #fff;
margin: 10% auto;
padding: 20px;
border-radius: 8px;
width: 600px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
position: relative;
box-sizing: border-box;
word-wrap: break-word;  /* wrap long words */
overflow-wrap: break-word; /* older browsers */
white-space: normal; /* ensure normal wrapping */
}

/* Close button */
.close {
position: absolute;
right: 15px;
top: 10px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}

h2, h3 {
display: inline-block;       /* shrink to fit text */
padding: 8px 16px;           /* space around text */
margin: 10px 0;              /* spacing above/below */
border-radius: 6px;          /* rounded corners */
background: #0073e6;         /* banner color */
color: #fff;                 /* white text */
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* subtle shadow */
}

/* Differentiate sizes */
h2 {
font-size: 1.6em;
background: #005bb5; /* darker blue */
}

h3 {
font-size: 1.2em;
background: #3399ff; /* lighter blue */
}

.status-banner {
display: block;
gap: 5px;
margin-bottom: 2px;
font-weight: bold;
font-size: 1.1em;
}

.status {
padding: 8px 12px;
border-radius: 6px;
color: #fff;
}

/* Optional: matching banner colors */
.status.open {
background-color: #ca5010;
color:white;
}

.status.in-progress {
background-color: #0078d4;
color:white;
}

.status.resolved {
background-color: #498205;
color:white;
}	

.no-border {
border-collapse: collapse; /* merge borders */
border: none;              /* remove table border */
vertical-align: top;
}

.no-border td, .no-border th {
border: none;             /* remove cell borders */
padding: 8px;             /* optional spacing */
vertical-align: top;
}

.no-border tr {
border: none;             /* ensure row borders are gone */
vertical-align: top;
}
.dashboard {
border-collapse: collapse;
margin: 10px 0;
vertical-align: top;
}
.dashboard-table {
border-collapse: collapse;   /* remove extra spacing */
width: 100%;
vertical-align: top;
}

.dashboard-table td, 
.dashboard-table th {
padding: 0;                  /* no padding */
white-space: nowrap;         /* prevent text wrapping */
border-bottom: 1px solid #ccc; /* optional: only bottom border */
vertical-align: top;
}

.dashboard-table th {
text-align: left;
font-weight: bold;
background-color: #f0f0f0;  /* optional header background */
vertical-align: top;
}
thead th {
    position: sticky;
    top: 0; /* distance from the top */
    
    z-index: 10; /* ensures it stays above table rows */
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}