.whc-calculator-app *,
.whc-calculator-app *::before,
.whc-calculator-app *::after {
  box-sizing: border-box;
}

.whc-calculator-app {
  /* Merged html, body styles */
  /* Merged html, body styles */
  margin: 0;
  padding: 18px;
  /* from body */
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  /* background removed */
  color: #132038;
  /* min-height: 100vh;  Removed because it forces the widget to be full height always, which might be okay but better to let it flow? 
     Actually, if users embed it, they might want it contained. 
     I'll keep it but scoped to the wrapper so the wrapper is big. 
  */
  display: flex;
  /* from body */
  justify-content: center;
  /* from body */
  width: 100%;
}

.whc-calculator-app .app {
  width: 100%;
  max-width: 840px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.whc-calculator-app .header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.whc-calculator-app .header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.whc-calculator-app .backup-controls {
  display: flex;
  gap: 4px;
}

.whc-calculator-app .mini-btn {
  padding: 4px 10px;
  font-size: 11px;
  min-height: 28px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}

.whc-calculator-app .mini-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  transform: none;
}

.whc-calculator-app .language-switcher {
  display: flex;
  gap: 4px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 2px;
  background: #f8fafc;
}

.whc-calculator-app .lang-btn {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: #475569;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.whc-calculator-app .lang-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.whc-calculator-app .lang-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.whc-calculator-app .title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.whc-calculator-app .subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: #4b5563;
}

.whc-calculator-app .note {
  font-size: 12px;
  color: #6b7280;
}

.whc-calculator-app .tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 14px;
}

.whc-calculator-app .tab {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .whc-calculator-app .header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .whc-calculator-app .header-right {
    align-items: center;
    width: 100%;
  }

  .whc-calculator-app .tabs {
    gap: 4px;
  }

  .whc-calculator-app .tab {
    padding: 10px 8px;
    font-size: 12px;
  }
}

.whc-calculator-app .tab:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.whc-calculator-app .tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.whc-calculator-app .tab-panel {
  display: none;
  gap: 12px;
  flex-direction: column;
}

.whc-calculator-app .tab-panel.active {
  display: flex;
}

@media (max-width: 400px) {
  .whc-calculator-app .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

.whc-calculator-app .card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.whc-calculator-app .card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.whc-calculator-app .card-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 2px solid #e5e7eb;
}

.whc-calculator-app .card-header .card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.whc-calculator-app .card-body {
  padding: 20px;
}

.whc-calculator-app .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.whc-calculator-app .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.whc-calculator-app label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 2px;
  display: block;
}

.whc-calculator-app input[type="time"],
.whc-calculator-app input[type="date"],
.whc-calculator-app input[type="week"],
.whc-calculator-app input[type="month"],
.whc-calculator-app input[type="number"] {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  color: #0b1726;
  outline: none;
  transition: all 0.2s ease;
}

.whc-calculator-app input:hover {
  border-color: #cbd5e1;
}

.whc-calculator-app input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  background: #fafbfc;
}

.whc-calculator-app .inline-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1f2937;
}

.whc-calculator-app .slots {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.whc-calculator-app .slots-header {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 45px;
  gap: 12px;
  padding: 0 17px 0 16px;
  /* Added 1px right padding to align with row border */
  margin-bottom: 8px;
}

.whc-calculator-app .header-item {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.whc-calculator-app .slot-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 45px;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.whc-calculator-app .slot-row:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.whc-calculator-app .slot-row.overlap-conflict {
  border-color: #fecaca !important;
  background: #fffafa !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), inset 0 0 8px rgba(239, 68, 68, 0.05) !important;
  animation: overlap-pulse 2s infinite;
}

@keyframes overlap-pulse {
  0% { box-shadow: 0 0 0 0px rgba(239, 68, 68, 0.2); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0px rgba(239, 68, 68, 0); }
}

.whc-calculator-app .slot-row button.remove-slot {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  background: #fee2e2;
  color: #ef4444;
  border: none;
  box-shadow: none;
}

.whc-calculator-app .slot-row button.remove-slot:hover {
  background: #fecaca;
  color: #dc2626;
  transform: scale(1.1);
}

@media (max-width: 640px) {
  .whc-calculator-app .slots-header {
    display: none !important;
  }

  .whc-calculator-app .slot-row {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }

  .whc-calculator-app .slot-row .field {
    position: relative;
  }

  /* Re-add labels for mobile since header is hidden */
  .whc-calculator-app .slot-row .field::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
  }

  .whc-calculator-app .slot-row button.remove-slot {
    width: 100%;
    border-radius: 8px;
    height: 40px;
    font-size: 14px;
    margin-top: 4px;
  }
}

.whc-calculator-app .week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.whc-calculator-app .week-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f9fafb;
}

.whc-calculator-app .week-card .week-day-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.whc-calculator-app .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}

.whc-calculator-app button {
  border: 2px solid #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.whc-calculator-app button:hover {
  background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
  border-color: #5568d3;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

.whc-calculator-app button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(102, 126, 234, 0.2);
}

.whc-calculator-app button.secondary {
  background: #ffffff;
  color: #475569;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.whc-calculator-app button.secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.whc-calculator-app button.ghost {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
  border: 2px dashed #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  width: 100%;
  margin-top: 4px;
}

.whc-calculator-app button.ghost:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #94a3b8;
  border-style: solid;
  color: #334155;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.whc-calculator-app .result {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 16px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.whc-calculator-app .result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.whc-calculator-app .result-label {
  font-size: 13px;
  color: #4b5563;
}

.whc-calculator-app .result-value {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.02em;
}

.whc-calculator-app .muted {
  color: #6b7280;
  font-size: 13px;
}

.whc-calculator-app .small {
  font-size: 12px;
}

.whc-calculator-app .table {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.whc-calculator-app .table-head,
.whc-calculator-app .table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
}

.whc-calculator-app .annual-table .table-head,
.whc-calculator-app .annual-table .table-row {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.whc-calculator-app .table-head {
  background: #f3f6fb;
  font-weight: 700;
  color: #1f2937;
}

.whc-calculator-app .table-row:nth-child(odd) {
  background: #fbfcfe;
}

.whc-calculator-app .toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  background: #111827;
  color: #f8fafc;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
  gap: 10px;
  align-items: center;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.2);
  z-index: 9999;
  /* ensure toast is on top */
}

.whc-calculator-app .toast.visible {
  display: inline-flex;
}

.whc-calculator-app .toast-close {
  background: transparent;
  color: #cdd2d7;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.whc-calculator-app .toast-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Print styles */
@media print {

  .whc-calculator-app,
  body {
    background: white !important;
  }

  .whc-calculator-app .app {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
  }

  .whc-calculator-app .tabs,
  .whc-calculator-app .controls,
  .whc-calculator-app button,
  .whc-calculator-app .card-header,
  .whc-calculator-app .panel-header,
  .whc-calculator-app .inline-checkbox,
  #addSlotBtn,
  #slots,
  .whc-calculator-app .week-grid,
  .whc-calculator-app input {
    display: none !important;
  }

  .whc-calculator-app .card {
    border: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  .whc-calculator-app .result {
    border: 1px solid #000 !important;
    background: white !important;
  }

  .whc-calculator-app .table {
    border: 1px solid #000 !important;
  }

  .whc-calculator-app .table-head,
  .whc-calculator-app .table-row {
    border-bottom: 1px solid #000 !important;
  }
}

/* Responsive Button Fix */
.whc-calculator-app button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  min-height: 42px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.2;
}

.whc-calculator-app button.secondary {
  font-size: 13px;
  padding: 10px 14px;
}

.whc-calculator-app button.ghost {
  white-space: normal;
  text-align: center;
}

@media (max-width: 640px) {
  .whc-calculator-app button {
    width: 100%;
    font-size: 13px;
    padding: 12px 14px;
  }

  .whc-calculator-app button.secondary {
    font-size: 12.5px;
  }

  /* Daily Tab Responsive Fixes */
  .whc-calculator-app .slot-row {
    padding: 12px;
    gap: 16px;
    /* Ensure fields are stacked with space */
  }

  /* Monthly Table Responsive Card View */
  .whc-calculator-app .table-head {
    display: none;
    /* Hide header on mobile */
  }

  .whc-calculator-app .table-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px;
    background: #fff;
  }

  .whc-calculator-app .table-row:nth-child(odd) {
    background: #f8fafc;
  }

  .whc-calculator-app .table-row>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
  }

  /* Add labels via pseudo-elements for mobile context */
  .whc-calculator-app .table-row>div:nth-child(1)::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
  }

  .whc-calculator-app .table-row>div:nth-child(2)::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
  }

  .whc-calculator-app .table-row>div:nth-child(3)::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
  }

  /* Specific mobile labels for Annual table */
  .whc-calculator-app .annual-table .table-row>div:nth-child(1)::before {
    content: attr(data-label);
  }

  .whc-calculator-app .annual-table .table-row>div:nth-child(4)::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
  }

  /* Adjust Result Grid for Mobile */
  .whc-calculator-app .result {
    grid-template-columns: 1fr;
    /* Stack result items */
    padding: 16px;
  }

  /* Fix Tab Text Overflow on Mobile */
  .whc-calculator-app .tab {
    font-size: 11px;
    padding: 10px 4px;
    text-align: center;
    word-break: break-word;
    /* Ensure it wraps if really needed, though font size should fix it */
    hyphens: auto;
    /* Allow tabs to have different widths so long words fit */
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 400px) {
  .whc-calculator-app {
    padding: 6px;
  }

  .whc-calculator-app .app {
    padding: 12px;
  }

  .whc-calculator-app .tab {
    font-size: 11px;
    padding: 8px 4px;
    min-width: 0;
    flex: 1 1 auto;
    text-align: center;
  }

  .whc-calculator-app .tabs {
    flex-wrap: wrap;
    justify-content: center;
  }

  .whc-calculator-app button {
    font-size: 12px;
    padding: 10px 12px;
  }
}

@media (max-width: 380px) {
  .whc-calculator-app {
    padding: 8px;
  }

  .whc-calculator-app .app {
    padding: 12px;
  }

  .whc-calculator-app .stat-label {
    font-size: 11px;
  }

  .whc-calculator-app .stat-value {
    font-size: 16px; /* Further reduced from 20px for ultra-small screens */
  }

  .whc-calculator-app .stat-tile {
    padding: 10px; /* Reduced from 16px */
  }

  .whc-calculator-app .card-body {
    padding: 12px;
  }
}

.whc-calculator-app .estimate-note {
  font-size: 12px;
  margin-top: 6px;
  color: #666;
  font-style: italic;
}

.whc-calculator-app .chart-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Daily, Weekly, Monthly Quick Stats styles */
.whc-calculator-app .daily-quick-stats,
.whc-calculator-app .weekly-quick-stats,
.whc-calculator-app .monthly-quick-stats {
  margin-top: 24px;
}

.whc-calculator-app .stat-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.3s ease;
}

.whc-calculator-app .stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: #667eea;
}

.whc-calculator-app .stat-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.4;
}

.whc-calculator-app .stat-value {
  font-size: 28px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.1;
}

/* Color accents for stats */
.whc-calculator-app .stat-tile:first-of-type .stat-value {
  color: #667eea;
  /* Indigo for regular hours */
}

.whc-calculator-app .stat-tile:last-of-type .stat-value {
  color: #b45309;
  /* Darker Amber for better contrast (WCAG AA) */
}

.whc-calculator-app .salary-result {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #bbf7d0;
}

.whc-calculator-app .salary-result .result-value {
  color: #15803d;
}

@media (max-width: 640px) {
  .whc-calculator-app .daily-quick-stats {
    grid-template-columns: 1fr !important;
  }
}