/* ========== GLOBAL RESET ========== */
* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background : #f0f2f5;
  color      : #333;
  animation  : fadeIn 0.3s ease-in;
  /* global fade in */
}

/* subtle fade-in animation */
@keyframes fadeIn {
  from {
    opacity  : 0;
    transform: translateY(10px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

/* ========== SIDEBAR ========== */


/* ========== CONTENT ========== */
.content {
  margin-left: 220px;
  padding    : 100px;
  min-height : 100vh;
  transition : margin-left 0.3s ease;
  animation  : fadeIn 0.6s ease-in;
}

.sidebar.hidden~.content {
  margin-left: 0;
  display    : block;
}

/* ========== SIDEBAR TOGGLE SUPPORT ========== */
#toggleBtn {
  position     : fixed;
  top          : 15px;
  left         : 15px;
  background   : #3c8dbc;
  color        : #fff;
  border       : none;
  padding      : 8px 12px;
  border-radius: 6px;
  cursor       : pointer;
  z-index      : 999;
  font-size    : 1.2em;
  box-shadow   : 0 2px 6px rgba(0, 0, 0, 0.2);
  transition   : background 0.3s ease, transform 0.2s ease;
}

#toggleBtn:hover {
  background: #357ca5;
  transform : scale(1.05);
}

/* kapag hidden ang sidebar, lumiit siya at aangat ang content */
.sidebar.hidden {
  width   : 0;
  padding : 0;
  overflow: hidden;
}

.sidebar.hidden~.content {
  margin-left: 0;
  transition : margin-left 0.3s ease;
}


/* ========== HEADINGS ========== */
h1 {
  font-size    : 1.8em;
  margin-bottom: 20px;
  color        : #222;
}

/* ========== CARDS ========== */
.counts {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap                  : 20px;
  margin-bottom        : 30px;
}

.counts .card {
  background     : #fff;
  padding        : 25px 15px;
  border-radius  : 14px;
  box-shadow     : 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align     : center;
  transition     : transform 0.3s ease, box-shadow 0.3s ease;
  min-height     : 180px;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
}

/* EGG ICONS */

/* HEADINGS INSIDE CARDS */
.counts .card h2 {
  font-size    : 1.1em;
  font-weight  : 500;
  margin-bottom: 8px;
  color        : #555;
}

/* COUNTS INSIDE CARDS */
.counts .card p {
  font-size  : 2.4em;
  font-weight: 700;
  margin     : 0;
  color      : #111;
}

.counts .good {
  border-top: 6px solid #4caf50;
}

.counts .spoiled {
  border-top: 6px solid #f44336;
}

.counts .predicted {
  border-top: 6px solid #2196f3;
}

.counts .status {
  border-top: 6px solid #767077;
}

.predict-box {
  background   : #fff;
  padding      : 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  font-size    : 1.1em;
  box-shadow   : 0 2px 5px rgba(0, 0, 0, 0.1);
  transition   : transform 0.3s ease;
}

.predict-box:hover {
  transform: translateY(-4px);
}

/* ========== BUTTONS ========== */
button,
.button {
  background     : #3c8dbc;
  color          : #fff;
  border         : none;
  padding        : 12px 20px;
  border-radius  : 30px;
  text-decoration: none;
  font-size      : 1em;
  cursor         : pointer;
  transition     : background 0.3s ease, transform 0.2s ease;
}

button:hover,
.button:hover {
  background: #357ca5;
  transform : scale(1.03);
}

/* ========== FORMS ========== */
form {
  max-width    : 400px;
  background   : #fff;
  padding      : 20px;
  border-radius: 8px;
  box-shadow   : 0 2px 5px rgba(0, 0, 0, 0.1);
}

form label {
  font-weight: 600;
  margin-top : 15px;
  display    : block;
  font-size  : .9em;
  color      : #555;
}

form input,
form select {
  width        : 100%;
  padding      : 10px;
  margin-top   : 6px;
  border       : 1px solid #ccc;
  border-radius: 6px;
  font-size    : .95em;
  transition   : border-color 0.3s ease, box-shadow 0.3s ease;
}

form input:focus,
form select:focus {
  outline     : none;
  border-color: #3c8dbc;
  box-shadow  : 0 0 5px rgba(60, 141, 188, 0.3);
}

form button {
  margin-top: 20px;
  width     : 100%;

}

/* ========== TABLE ========== */
table {
  border-collapse: collapse;
  width          : 100%;
  background     : #fff;
  border-radius  : 8px;
  overflow       : hidden;
  box-shadow     : 0 2px 5px rgba(0, 0, 0, 0.1);
}

th,
td {
  padding      : 12px 15px;
  border-bottom: 1px solid #eee;
  text-align   : left;
  font-size    : .95em;
}

th {
  background : #3c8dbc;
  color      : #fff;
  font-weight: 600;
}

tr:nth-child(even) {
  background: #f9f9f9;
}

tr:hover {
  background: #f1f1f1;
  transition: background 0.3s ease;
}

/* ========== LOGIN/REGISTER ========== */

/* .container {
  display      : flex;
  width        : 1000px;
  height       : 500px;
  background   : white;
  border-radius: 10px;
  overflow     : hidden;
  box-shadow   : 0 8px 30px rgba(0, 0, 0, 0.2);
}

.left {
  flex           : 1;
  background     : white;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
  padding        : 20px;
}

.left img {
  max-width    : 150px;
  margin-bottom: 20px;
}

.left h2 {
  color        : #155d74;
  font-size    : 24px;
  margin-bottom: 10px;
}

.left p {
  color     : #333;
  font-size : 14px;
  text-align: center;
}

.right {
  flex           : 1;
  background     : #155d74;
  display        : flex;
  justify-content: center;
  align-items    : center;
  position       : relative;
}

.right form {
  width     : 80%;
  max-width : 1000px;
  background: #fff;
  color     : rgb(0, 0, 0);
}

.right form h3 {
  text-align   : center;
  margin-bottom: 20px;
  font-size    : 20px;
}

.right input {
  width        : 100%;
  padding      : 10px;
  margin-bottom: 15px;
  border       : none;
  border-radius: 4px;
  font-size    : 14px;
}

.right input[type="email"],
.right input[type="password"] {
  border    : 1px solid #111;
  background: white;
  color     : black;
}

.right button {
  width        : 100%;
  padding      : 10px;
  background   : #1976d2;
  border       : none;
  color        : white;
  font-size    : 14px;
  border-radius: 30px;
  cursor       : pointer;
}

.right button:hover {
  background: #1565c0;
}

.right a {
  display        : block;
  margin-top     : 10px;
  font-size      : 12px;
  color          : white;
  text-align     : center;
  text-decoration: none;
}

.right a:hover {
  text-decoration: underline;
}

.error {
  background   : #ffcccc;
  color        : #b71c1c;
  padding      : 8px;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size    : 13px;
  text-align   : center;
}

.notice {
  background   : #c8e6c9;
  color        : #256029;
  padding      : 8px;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size    : 13px;
  text-align   : center;
} */

/* ========== SYNC INFO & BUTTON ========== */
.sync-info {
  margin-top   : 30px;
  background   : #ffffff;
  padding      : 25px 30px;
  border-radius: 12px;
  box-shadow   : 0 4px 8px rgba(0, 0, 0, 0.08);
  line-height  : 1.8em;
  border-left  : 6px solid #3c8dbc;
  max-width    : 100%;
  margin-left  : auto;
  margin-right : auto;
  margin-bottom: 30px;
}

.sync-info h3 {
  margin-bottom: 12px;
  color        : #3c8dbc;
  font-size    : 1.4em;
  display      : flex;
  align-items  : center;
  gap          : 10px;
  font-weight  : 700;
}

.sync-info p {
  font-size    : 1em;
  color        : #555;
  margin-bottom: 8px;
}

.sync-info ul {
  margin-top  : 10px;
  padding-left: 20px;
}

.sync-info ul li {
  margin-bottom: 6px;
}

/* I-center ang form mismo */
.sync-form {
  display        : flex;
  justify-content: center;
  /* horizontal center */
  align-items    : center;
  /* vertical center kung may fixed height */
  margin-top     : 20px;
  /* space mula sa taas */
  margin-bottom  : 20px;
  /* space mula sa baba */
}

/* Button design (pwede mo pang i-enhance) */


/* ========== ALERT MESSAGE ========== */
.alert-success {
  background   : #e6f4ea;
  color        : #256029;
  border       : 1px solid #b7e4c7;
  padding      : 12px 18px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size    : 0.95em;
  box-shadow   : 0 2px 4px rgba(0, 0, 0, 0.05);
  animation    : fadeIn 0.4s ease-in;

}

/* ========== (historical) FILTER FORM ========== */

/* Filter Form Container */
.filter-form {
  background   : #fff;
  margin-bottom: 10px;
  max-width    : 1200px;
  padding      : 20px;
  border-radius: 12px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.08);
  display      : flex;
  flex-wrap    : wrap;
  align-items  : flex-end;
  /* ✅ Aligns bottom of date fields & buttons */
  gap          : 20px;
}

/* Form group */
.filter-form .form-group {
  display       : flex;
  flex-direction: column;
  font-size     : 14px;
  color         : #333;
}

/* Labels */
.filter-form label {
  margin-bottom: 6px;
  font-weight  : 600;
  color        : #555;
}

/* Date inputs */
.filter-form input[type="date"] {
  border-radius: 8px;
  outline      : none;
  transition   : border 0.2s, box-shadow 0.2s;
  min-width    : 180px;
  height       : 42px;
  font-size    : 14px;
  box-sizing   : border-box;
}

.filter-form input[type="date"]:focus {
  border-color: #3498db;
  box-shadow  : 0 0 6px rgba(52, 152, 219, 0.3);
}

/* Actions (buttons container) */
.filter-form .actions {
  display    : flex;
  align-items: flex-end;
  /* ✅ Aligns buttons with inputs */
  gap        : 12px;
}

/* Buttons */
.filter-form button,
.filter-form .button {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  background     : #3498db;
  color          : #fff;
  border         : none;
  padding        : 10px 22px;
  border-radius  : 25px;
  cursor         : pointer;
  font-size      : 14px;
  font-weight    : 600;
  height         : 42px;
  /* ✅ Matches input height */
  text-decoration: none;
  transition     : background 0.2s ease-in-out;
  white-space    : nowrap;
  /* ✅ Prevents text wrapping */
}

.filter-form button:hover,
.filter-form .button:hover {
  background: #2980b9;
}


/* ========== CHART CONTAINER ========== */
.chart-container {
  background   : #fff;
  padding      : 20px;
  border-radius: 12px;
  box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  max-width    : 100%;
  height       : 700px;
  transition   : transform 0.3s ease;
}

.chart-container:hover {
  transform: translateY(-4px);
}

.chart-container canvas {
  width : 100% !important;
  height: 100% !important;
}

/* ===================== SCROLLABLE CHART WRAPPER ===================== */
.chart-scroll {
  overflow-x    : auto;
  /* enable horizontal scroll */
  padding-bottom: 10px;
  /* para di masyadong dikit sa baba */
}

.chart-scroll::-webkit-scrollbar {
  height: 8px;
  /* manipis na scrollbar */
}

.chart-scroll::-webkit-scrollbar-track {
  background: #f0f2f5;
}

.chart-scroll::-webkit-scrollbar-thumb {
  background   : #3c8dbc;
  border-radius: 4px;
}

.chart-scroll::-webkit-scrollbar-thumb:hover {
  background: #357ca5;
}

.chart-container {
  min-width    : 1000px;
  /* fixed width para may kailangan kang i-scroll */
  background   : #fff;
  padding      : 20px;
  border-radius: 12px;
  box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  height       : 700px;
  transition   : transform 0.3s ease;
}

.btn-action {
  display         : inline-block;
  padding         : 6px 12px;
  margin-right    : 5px;
  font-size       : 14px;
  border          : none;
  border-radius   : 4px;
  cursor          : pointer;
  color           : white;
  background-color: #4caf50;
}

.btn-action.view {
  background-color: #2196f3;
}

.btn-action.view:hover {
  background-color: #1976d2;
}

.btn-action.delete {
  background-color: #f44336;
}

.btn-action.delete:hover {
  background-color: #d32f2f;
}

td form {
  display: inline;
}


/* ========== RESPONSIVE ========== */
@media(max-width:768px) {
  .sidebar {
    width   : 100%;
    height  : auto;
    position: relative;
  }

  .sidebar a {
    text-align   : center;
    border-left  : none;
    border-bottom: 1px solid #444;
  }

  .content {
    margin-left: 0;
  }

  .counts {
    flex-direction: column;
  }
}