/* --- Form container --- */
.gfc-app {
    max-width: 980px;
    margin: 10px auto;
    padding: 16px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #ddd;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}
/* --- Inputs (Supervisor, Product, Employee, Weight) --- */
input#supervisor_name,
input#product,
input.employee_name,
input.employee_weight {
    flex:1 1 auto !important;
    padding: 12px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
    min-width: 100px !important;
}
.gfc-app h3 { margin-bottom: 8px; }

#gfc-form { display: flex; flex-direction: column; gap: 12px; }

.gfc-row { display:flex; flex-wrap:wrap !important; gap:8px; align-items:center; margin:6px 0; }

.gfc-row input[type="text"], .gfc-row input[type="number"] {
  flex:1 1 auto !important;
  padding:6px 8px !important;
  border-radius:6px !important;
  border:1px solid #ccc !important;
  min-width:60px !important;
}

.gfc-controls {
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  margin-top:12px;
}
.gfc-controls button {
  height:70px !important;
  font-size:22px !important;
  border-radius:12px !important;
  font-weight:bold !important;
  cursor:pointer !important;
  transition:0.2s !important;
}
.gfc-controls button:hover:not(:disabled) { opacity:0.85 !important; }
#timerDisplay {
    font-family: monospace;
    font-weight:600;
    text-align:right;
    font-size:20px !important;
    margin-top:6px;
}
/* ===== Employee rows ===== */
.gfc-employees { display:flex; flex-direction:column; gap:8px !important; }

.gfc-employee-row {
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}
.gfc-employee-row > div {
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
}
.counterDisplay {
    width:50px !important;
    text-align:center !important;
    font-weight:600 !important;
    font-size:20px !important;
}
.incrementBtn {
    flex:0 0 90px !important;
    height:90px !important;
    font-size:28px !important;
    background:#2196f3 !important;
    color:#fff !important;
    border-radius:12px !important;
    cursor:pointer !important;
    transition:0.2s;
}
.incrementBtn:hover:not(:disabled) { background:#1976d2 !important; }
.employee_weight {
  width:100% !important;
  padding:6px 8px !important;
  border-radius:6px !important;
  border:1px solid #ccc !important;
  margin-top:4px !important;
}

/* ===== Table ===== */
.gfc-table {
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
}
.gfc-table th, .gfc-table td {
  border:1px solid #ddd;
  padding:6px 8px;
  text-align:left;
  font-size:13px;
}
.gfc-section-header {
  margin-top:25px;
  margin-bottom:10px;
  font-size:18px;
  font-weight:bold;
  color:#333;
}
/* ===== Refresh button ===== */
.gfc-btn.refresh {
    background:#009688 !important;
    color:#fff !important;
    padding:12px 18px !important;
    font-size:18px !important;
    border-radius:8px !important;
    margin-bottom:16px !important;
    cursor:pointer !important;
}
/* ===== Print button ===== */
.gfc-btn.print {
    background:#3f51b5 !important;
    color:#fff !important;
    padding:12px 18px !important;
    font-size:18px !important;
    border-radius:8px !important;
    margin-left:8px !important;
    margin-bottom:16px !important;
    cursor:pointer !important;
}
.gfc-btn.print:hover { background:#303f9f !important; }
.gfc-btn.refresh:hover { background:#00796b !important; }
/* ===== Animation for save message ===== */
#saveStatus {
    font-weight:600;
    font-size:16px;
    margin-top:8px;
    color:#4caf50;
    opacity:0;
    transition:opacity 0.4s;
}
#saveStatus.show { opacity:1; }

/* Ensure employee_name inputs match other inputs */
.employee_name {
    flex:1 1 auto !important;
    padding: 8px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
    min-width: 80px !important;
}
#gfc-controls button {
    height:70px !important;
    font-size:22px !important;
    border-radius:12px !important;
    color:#fff !important;
    font-weight:bold;
    transition:0.2s;
}
#startBtn { background:#4caf50 !important; }
#stopBtn { background:#f44336 !important; }
#saveBtn { background:#673ab7 !important; }
/* New Styles here==============> */
/* Modern Add button */#gfc-app #addEmployeeBtn {
  margin-top: 10px !important;
  padding: 8px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: none !important;
  background: linear-gradient(135deg, #4CAF50, #45a049) !important;
  color: white !important;
  cursor: pointer !important;
  transition: background 0.3s ease, transform 0.2s ease !important;
}
#gfc-app #addEmployeeBtn:hover {
  background: linear-gradient(135deg, #45a049, #3e8e41) !important;
  transform: scale(1.05) !important;
}
/* Remove Employee button */
#gfc-app .removeEmployeeBtn {
  margin-left: 6px !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  background: #e74c3c !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}
#gfc-app .removeEmployeeBtn:hover {
  background: #c0392b !important;
}
/* ===== GfcProductivitySessions: larger, easier-to-read table (appended) ===== */
.gfc-sessions-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 10px !important;
}
.gfc-sessions-container .gfc-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  margin-top: 12px !important;
}
.gfc-sessions-container .gfc-table th,
.gfc-sessions-container .gfc-table td {
  border: 1px solid #e3e6ea !important;
  padding: 12px 14px !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-size: 15px !important;
}
.gfc-sessions-container .gfc-table th {
  background: #f3f6f9 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #222 !important;
}
.gfc-sessions-container .gfc-table tbody tr:nth-child(even) {
  background: #fbfcfd !important;
}
.gfc-sessions-container .gfc-table tr:hover {
  background: #eef6ff !important;
}
/* larger section headers for sessions */
.gfc-section-header {
  font-size: 20px !important;
  margin-top: 28px !important;
  margin-bottom: 10px !important;
}
/* style for the time cells (monospace & bolder) */
.time-12hr {
  font-family: monospace !important;
  font-weight: 600 !important;
}
/* responsive tweak: slightly bigger spacing on large desktops */
@media (min-width: 1200px) {
  .gfc-sessions-container .gfc-table th,
  .gfc-sessions-container .gfc-table td {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }
}
.gfc-note-row td {
    background: #f9f9f9 !important;
    font-style: italic !important;
    padding: 10px !important;
    border-top: 2px solid #ccc !important;
}
/* Styled product dropdown */
.gfc-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gfc-select:focus {
  border-color: #0073aa;
  box-shadow: 0 0 5px rgba(0,115,170,0.3);
  outline: none;
}
.gfc-select option {
  font-size: 16px;
}