:root {
  --bg: #ffffff;
  --card: #f7f7f7;
  --text: #111;
  --muted: #6b7280;
  --accent: #111;
  --border: #e6e6e6;
  --error: #b91c1c;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
}

.wrap {
  max-width: 820px;
  margin: 36px auto;
  padding: 18px;
}

h1 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.card.small {
  padding: 10px;
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
}

input[type="file"],
input[type="text"] {
  flex: 1;
  background: #0f172a;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 8px;
}

/* Make input text visible and neutralize blue autofill/focus styles */
input,
textarea,
select {
  color: var(--text) !important;
  background-color: #fff !important;
  caret-color: var(--text) !important;
  opacity: 1 !important;
}

/* Placeholder visibility */
input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Subtle focus ring (accessible) */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06) !important;
  border-color: rgba(17, 17, 17, 0.12) !important;
}

/* WebKit autofill override (Chrome, Safari) */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  opacity: 1 !important;
}

/* Firefox autofill / focused control */
:-moz-autofill {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -moz-text-fill-color: var(--text) !important;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  color: var(--muted);
}

button {
  background: linear-gradient(135deg, #14b8a6, #34d399);
  color: #051016;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  filter: brightness(1.05);
}

.result {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.success {
  color: var(--success);
}

.error {
  color: var(--error);
}

.uploaded-yes {
  background: #e6fae4 !important;
  /* light green background */
  color: #13730b !important;
  /* green text */
  font-weight: 600;
}

.admin-section form#searchForm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-section input[type="text"] {
  /* Make inputs flex-grow more and have a reasonable min-width */
  flex: 1 1 220px !important;
  min-width: 220px !important;
  max-width: 340px;
  padding: 10px;
  box-sizing: border-box;
}

.admin-section input[name="Project Name (As per PMS)"],
.admin-section input[name="Project Name (As per Project Team)"] {
  /* Even wider for longer labels */
  min-width: 280px !important;
  flex: 2 1 280px !important;
}

.admin-section input[name="Site ID as per Suffex"] {
  min-width: 200px !important;
  flex: 1 1 200px !important;
}

.admin-section button[type="submit"] {
  flex: 0 0 auto;
  min-width: 100px;
}

.uploaded-no {
  background: #fff5f5 !important;
  /* light red background */
  color: #b91c1c !important;
  /* red text */
  font-weight: 600;
}

.error-row {
  background: #fff5f5 !important;
  /* light red background */
}

.error-row td {
  color: var(--error) !important;
  font-weight: 600;
}

.error-list {
  margin-top: 8px;
  color: var(--error);
}

.table-wrap {
  margin-top: 12px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 400px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 8px;
  border: 1px solid var(--border);
  text-align: left;
}

/* prevent wrapping in table cells and gracefully handle overflow */
th,
td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

td.error {
  color: var(--error);
  font-weight: 600;
  background: #fff5f5;
}

.row.export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

/* Make all export row inputs expand as needed, and wider by default */
.row.export-row input[type="text"] {
  flex: 1 1 340px !important;
  min-width: 280px !important;
  max-width: 100%;
  /* use all available space */
  padding: 10px;
  box-sizing: border-box;
}

/* Make long placeholder inputs (like Months) even wider */
.row.export-row input[placeholder*="Booking Month"],
.row.export-row input[placeholder*="Workdone Week"],
.row.export-row input[placeholder*="Weeks"],
.row.export-row input[placeholder*="Months"],
.row.export-row input[placeholder*="Years"] {
  flex: 2 1 360px !important;
  min-width: 320px !important;
  max-width: 100%;
}

.row.export-row button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

/* checkbox label spacing */
.row.export-row .inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Align Data Management input boxes in neat rows like export row */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

/* Main input style for Data Management section */
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="date"] {
  flex: 1 1 340px !important;
  min-width: 270px !important;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff !important;
  color: var(--text) !important;
}

/* Wider fields for longer labels (adjust as needed for actual input names/labels) */
.form-row input[placeholder*="Project Name"],
.form-row input[placeholder*="Customer Amount"],
.form-row input[placeholder*="Customer Rate"] {
  flex: 2 1 380px !important;
  min-width: 320px !important;
}

/* Align the Search button nicely */
.form-row button[type="submit"],
.form-row button[type="button"] {
  flex: 0 0 140px;
  min-width: 100px;
  margin: 0 0 0 8px;
  height: 48px;
  font-weight: 600;
  align-self: center;
}

/* Responsive: Stack inputs vertically on mobile */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .form-row input[type="text"],
  .form-row input[type="number"],
  .form-row input[type="date"] {
    min-width: 98vw !important;
    max-width: 98vw !important;
    flex: 1 1 98vw !important;
  }

  .form-row button[type="submit"],
  .form-row button[type="button"] {
    min-width: 100% !important;
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
}

.user-management-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

.user-management-bar form {
  margin: 0;
}

@media (max-width: 700px) {
  .user-management-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ensure placeholders are visible */
input::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* make sure table-wrap and card don't collapse when content wraps */
.table-wrap {
  overflow: auto;
}

.card {
  overflow: visible;
}

/* responsive small screens */
@media (max-width: 520px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .form-row input[type="file"] {
    width: 100%;
  }
}

.status-circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.03) inset;
}

.status-circle.green {
  background: #16a34a;
}

/* green */
.status-circle.red {
  background: #ef4444;
}

/* red */

/* ensure table cells accept small html snippets (no change needed) */
td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------
   Add New User Modal Styling
------------------------------ */

.add-user-card {
  max-width: 420px;
  margin: auto;
  padding: 22px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.add-user-card h2 {
  margin-bottom: 18px;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  color: var(--text);
}

.add-user-card .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.add-user-card .form-group label {
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--muted);
}

.add-user-card .form-group input[type="text"],
.add-user-card .form-group input[type="password"] {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}

.add-user-card .form-group.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.add-user-card .form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.add-user-card .btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.add-user-card .btn.create {
  background: linear-gradient(135deg, #14b8a6, #34d399);
  color: #fff;
  border: none;
}

.add-user-card .btn.cancel {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid var(--border);
}

/* === Bulk Delete Styling (Data Management) === */

/* Align checkboxes nicely */
#adminTable table th:first-child,
#adminTable table td:first-child {
  text-align: center;
  width: 40px;
}

/* Bulk delete button */
#deleteSelectedBtn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: #dc2626;
  /* same red as Logout */
  color: white;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

#deleteSelectedBtn:hover {
  background: #b91c1c;
  /* darker red on hover */
}

/* === Editable cells === */
td.editable {
  background-color: #fffbea;
  /* subtle yellow */
  cursor: text;
}

td.editable:focus {
  outline: 2px solid #3b82f6;
  /* blue border */
  background-color: #ffffff;
  /* white while editing */
}

#bulkUpdatePanel {
  border: 1px solid #bbb;
  padding: 12px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background-color: #f9fafb;
  border-radius: 6px;
  background: #ecf3fc !important;
  border: 1.5px solid #bfd6f6;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

#bulkUpdatePanel label {
  color: #2563eb;
  font-weight: 600;
  margin-right: 4px;
  min-width: 120px;
  white-space: nowrap;
}

#bulkUpdatePanel select,
#bulkUpdatePanel input[type="text"] {
  border: 1.2px solid #bbc;
  border-radius: 5px;
  min-width: 200px;
  max-width: 320px;
  padding: 6px 8px;
  font-size: 0.95rem;
}

#bulkUpdatePanel button {
  padding: 8px 16px;
  border: none;
  background-color: #3b82f6;
  /* Blue */
  color: white;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#bulkUpdatePanel button:hover {
  background-color: #2563eb;
  /* Darker blue */
}

#bulkUpdatePanel #bulkUpdateMessage {
  margin-left: 10px;
  font-weight: 600;
  white-space: pre-line;
  max-width: 300px;
}

.spinner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  margin-top: 8px;
}

.spinner::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 3px solid transparent;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}