smeserver-mailstats/root/opt/mailstats/css/mailstats.css

table {
	xxborder:2px solid;
	xxborder-collapse:collapse;
}


tr.row-total, tr.row-percent , td.col-15, td.col-16 {
    font-weight: bold;
}

table {
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
	border-collapse: collapse;
}

.headerpanel {
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
	border:1px solid;
	width:98%;
}

.innerheaderpanel {
	padding:10px;
}

tr,td,th {
	border:1px solid;
}

.mailstats-detail-1stcol{
  width:174px;
 }

thead tr {
  border-bottom :2px solid;
  color:black;
  background-color:darkgrey;
}

tfoot tr {
  border-top:2px solid;
  color:black;
  font-weight: bold;
  background-color:darkgrey;
 }

.stripes tbody tr:nth-child(odd) {background-color: #dfdfdf}

.no-stripes tbody tr:nth-child(odd) {
    background-color: transparent; /* or whatever background color you want */
}


div.linksattop {
  display: flex;
  justify-content: space-between;
}

a.prevlink {
  text-align: left;
}

div.divshowindex {
  flex-grow: 1;
  text-align: center;
}

a.nextlink {
  text-align: right;
}
/* Basic styling for the tab container */
.tab-container {
	display: flex;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
}

/* Styling for the tabs */
.tab {
	padding: 10px 20px;
	cursor: pointer;
	border: 1px solid #ccc;
	border-bottom: none;
	background-color: #f1f1f1;
}

/* Styling for the active tab */
.tab-active {
	background-color: #ffffff;
	border-top: 2px solid #007bff;
	font-weight: bold;
}

/* Hide all content sections by default */
.tab-content {
	display: none;
}

/* Display the active content section */
.tab-content-active {
	display: block;
}

.cssclass1 {background-color:#ffff99;} 
.cssclass2 {background-color:lightcoral;}
.cssclass3 {background-color:lightcyan;}
.cssclass4 {background-color:lightgoldenrodyellow;}
.cssclass5 {background-color:lightgray;}
.cssclass6 {background-color:lightgreen;}
.cssclass7 {background-color:lightpink;}
.cssclass8 {background-color:lightsalmon;}
.cssclass9 {background-color:lightseagreen;}
.cssclass10 {background-color:lightskyblue;}
.cssclass11 {background-color:lightslategray;}
.cssclass12 {background-color:lightsteelblue;}

p.cssvalid,p.htmlvalid {float:left;margin-right:20px}

.maintable {}

.subtables {
	display: flex;
	flex-wrap: nowrap; /* Use wrap if you want the tables to wrap to the next line when the screen is too narrow */
	gap: 10px; /* Optional: Adds space between the tables */
}
.subtables > div {
	flex: 1; /* Equal width tables, remove or adjust based on your preference */
	margin-left:0px;
}
    
.footer {}

.iframe-container {
	width: 100%;
	height: 500px; /* Adjust as needed */
	border: none;
}

.parent-container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.greyed-out {
  color: grey;
}

.subtables {
    display: flex;
    flex-wrap: wrap; /* Allows the items to wrap onto the next line */
    justify-content: space-between; /* Distributes space between the tables */
    margin: -10px; /* Negative margin to offset the table margins */
}

.table-container {
    display: flex;
    flex-wrap: wrap; /* Allowing wrapping of the tables */
    width: 100%; /* Makes the container full width */
    box-sizing: border-box; /* Adjust size calculations to include padding and borders */
}

.Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
    flex: 0 1 calc(25% - 20px); /* Each table will take 25% of the width minus margins */
    margin: 10px; /* Margin for spacing */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Ensure tables adapt on smaller screens */
/* Default styling for large screens (5 columns) */
.Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
    flex: 0 1 calc(20% - 20px); /* 20% width for 5 columns */
    margin: 10px;
    box-sizing: border-box;
}

/* 4 columns layout */
@media (max-width: 1600px) {
    .Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
        flex: 0 1 calc(25% - 20px); /* 25% width for 4 columns */
    }
}

/* 3 columns layout */
@media (max-width: 1200px) {
    .Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
        flex: 0 1 calc(33.333% - 20px); /* 33.333% width for 3 columns */
    }
}

/* 2 columns layout */
@media (max-width: 600px) {
    .Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
        flex: 0 1 calc(50% - 20px); /* 50% width for 2 columns */
    }
}

/* 1 column layout for mobile */
@media (max-width: 300px) {
    .Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist{
        flex: 0 1 100%; /* 100% width for 1 column */
    }
}

/* Taken from inline in the chameleon templates */
.maindiv {width:100%;overflow-x:auto;font-size:1cqw}
.traffictable {border-collapse:collapse;width:98%}
.divseeinbrowser{text-align:center;}
.bordercollapse{border-collapse:collapse;}

/* ==============================================
   Summary Logs Section (scoped under .mailstats-summary)
   ============================================== */
.mailstats-summary .summary-container {
    width: 100%;
    overflow-x: auto;
    font-size: 0.85vw;
}

/* Table styling */
.mailstats-summary .summary-table {
    border-collapse: collapse;
    width: 98%;
    font-size: inherit;
}

.mailstats-summary .summary-table th {
    text-align: left;
    padding: 0.5em;
    border-bottom: 2px solid #ddd;
    background-color: #f8f8f8;
}

.mailstats-summary .summary-table td {
    padding: 0.5em;
    border-bottom: 1px solid #ddd;
    word-break: break-word;  /* Allows breaking long words at arbitrary points */
    overflow-wrap: break-word; /* Modern standard for breaking long words */
    hyphens: auto; /* Optionally adds hyphenation if supported */
}

/* Zebra striping */
.mailstats-summary .summary-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Pagination */
.mailstats-summary .pagination {
    margin-top: 1em;
}

.mailstats-summary .pagination a {
    text-decoration: none;
    color: #0066cc;
    padding: 0.3em 0.6em;
}

.mailstats-summary .pagination a:hover {
    text-decoration: underline;
}

.mailstats-summary table.stripes {
    border-collapse: collapse;
    width: 95%;
    overflow-x: auto;
    margin: 0.6% auto;
}

/* Optional zebra striping */
.mailstats-summary table.stripes tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* ==============================================
   Log Detail Page (scoped under .mailstats-detail)
   ============================================== */
.mailstats-detail .detail-container {
    width: 100%;
    max-width: 1200px;
    margin: 1em auto;
    padding: 0 1em;
}

/* Preformatted log box */
.mailstats-detail .log {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #111;
    color: #eee;
    padding: 1em;
    border-radius: 6px;
    font-family: monospace, monospace;
    font-size: 0.75em;
    line-height: 1.4;
    overflow-x: auto;
}

/* Back link styling */
.mailstats-detail a {
    color: #0066cc;
    text-decoration: none;
}

.mailstats-detail a:hover {
    text-decoration: underline;
}

/* ==============================================
   Status header at top of table (scoped under emailstatus)
   ============================================== */
.emailstatus-wrapper {
  font-family: Arial, sans-serif;
  padding: 20px;
}
.emailstatus-header {
  text-align: center;
  margin-bottom: 20px;
}
.emailstatus-tablecontainer {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.emailstatus-table {
  border-collapse: collapse;
  min-width: 300px;
  flex: 1 1 45%;
}
.emailstatus-table th {
  background-color: #a9a9a9;
  color: black;
  text-align: left;
  padding: 8px;
}
.emailstatus-table td {
  padding: 8px;
  border: 1px solid #ddd;
}
.emailstatus-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
@media (max-width: 768px) {
  .emailstatus-tablecontainer {
	flex-direction: column;
  }
}