/* Base Styles for EmployeeOS */
body {
  font-family: var(--font-family);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography styles */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', sans-serif;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  color: var(--color-text-main);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--font-size-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Standard Inputs & Controls styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-main);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md); /* Now 24px */
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

/* Custom Dropdown Styling */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 13px;
  padding-right: 40px !important;
  cursor: pointer;
}

/* Custom Calendar Styling */
input[type="date"],
input[type="month"],
input[type="datetime-local"] {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
  padding-right: 40px !important;
}

/* Custom Clock Styling */
input[type="time"] {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
  padding-right: 40px !important;
}

/* Invisible Webkit Indicator overlay so clicking anywhere on the right triggers picker */
input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

input:hover, select:hover, textarea:hover {
  border-color: var(--color-border-hover);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

/* Mobile-First auto-zoom prevention and tap layout overrides */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents auto-zoom in iOS Safari */
    padding: var(--space-3) var(--space-4) !important;
    min-height: 46px; /* Touch target size */
  }
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-light);
}

input:disabled, select:disabled, textarea:disabled {
  background-color: var(--color-bg-main);
  color: var(--color-text-light);
  cursor: not-allowed;
}

label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Form Helper & Error styling */
.form-group {
  margin-bottom: var(--space-5);
}

.form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* Checkbox/Radio Styling custom overrides */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

/* Onyx Premium Headings & Inputs Overrides */
body[data-theme="onyx"] h1,
body[data-theme="onyx"] h2,
body[data-theme="onyx"] h3,
body[data-theme="onyx"] h4,
body[data-theme="onyx"] h5,
body[data-theme="onyx"] h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

body[data-theme="onyx"] input[type="text"],
body[data-theme="onyx"] input[type="email"],
body[data-theme="onyx"] input[type="password"],
body[data-theme="onyx"] input[type="tel"],
body[data-theme="onyx"] input[type="number"],
body[data-theme="onyx"] input[type="date"],
body[data-theme="onyx"] input[type="month"],
body[data-theme="onyx"] input[type="time"],
body[data-theme="onyx"] input[type="datetime-local"],
body[data-theme="onyx"] select,
body[data-theme="onyx"] textarea {
  background-color: #f4f5f7 !important;
  border-color: transparent !important;
}

body[data-theme="onyx"] input[type="text"]:focus,
body[data-theme="onyx"] input[type="email"]:focus,
body[data-theme="onyx"] input[type="password"]:focus,
body[data-theme="onyx"] input[type="tel"]:focus,
body[data-theme="onyx"] input[type="number"]:focus,
body[data-theme="onyx"] input[type="date"]:focus,
body[data-theme="onyx"] input[type="month"]:focus,
body[data-theme="onyx"] input[type="time"]:focus,
body[data-theme="onyx"] input[type="datetime-local"]:focus,
body[data-theme="onyx"] select:focus,
body[data-theme="onyx"] textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), 0 4px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Terracotta Premium Headings & Inputs Overrides */
body[data-theme="terracotta"] h1,
body[data-theme="terracotta"] h2,
body[data-theme="terracotta"] h3,
body[data-theme="terracotta"] h4,
body[data-theme="terracotta"] h5,
body[data-theme="terracotta"] h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--color-text-main) !important;
}

body[data-theme="terracotta"] input[type="text"],
body[data-theme="terracotta"] input[type="email"],
body[data-theme="terracotta"] input[type="password"],
body[data-theme="terracotta"] input[type="tel"],
body[data-theme="terracotta"] input[type="number"],
body[data-theme="terracotta"] input[type="date"],
body[data-theme="terracotta"] input[type="month"],
body[data-theme="terracotta"] input[type="time"],
body[data-theme="terracotta"] input[type="datetime-local"],
body[data-theme="terracotta"] select,
body[data-theme="terracotta"] textarea {
  background-color: #f5f6f8 !important;
  border-color: transparent !important;
  border-radius: 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: var(--color-text-main) !important;
}

body[data-theme="terracotta"] input[type="text"]:focus,
body[data-theme="terracotta"] input[type="email"]:focus,
body[data-theme="terracotta"] input[type="password"]:focus,
body[data-theme="terracotta"] input[type="tel"]:focus,
body[data-theme="terracotta"] input[type="number"]:focus,
body[data-theme="terracotta"] input[type="date"]:focus,
body[data-theme="terracotta"] input[type="month"]:focus,
body[data-theme="terracotta"] input[type="time"]:focus,
body[data-theme="terracotta"] input[type="datetime-local"]:focus,
body[data-theme="terracotta"] select:focus,
body[data-theme="terracotta"] textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(158, 89, 57, 0.18) !important;
}

/* Jade Glass Premium Headings & Inputs Overrides */
body[data-theme="jadeglass"] h1,
body[data-theme="jadeglass"] h2,
body[data-theme="jadeglass"] h3,
body[data-theme="jadeglass"] h4,
body[data-theme="jadeglass"] h5,
body[data-theme="jadeglass"] h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text-main) !important;
}

body[data-theme="jadeglass"] input[type="text"],
body[data-theme="jadeglass"] input[type="email"],
body[data-theme="jadeglass"] input[type="password"],
body[data-theme="jadeglass"] input[type="tel"],
body[data-theme="jadeglass"] input[type="number"],
body[data-theme="jadeglass"] input[type="date"],
body[data-theme="jadeglass"] input[type="month"],
body[data-theme="jadeglass"] input[type="time"],
body[data-theme="jadeglass"] input[type="datetime-local"],
body[data-theme="jadeglass"] select,
body[data-theme="jadeglass"] textarea {
  background-color: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 20px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--color-text-main) !important;
  backdrop-filter: none !important; /* Keep input text crisp and clean without double blurs */
}

body[data-theme="jadeglass"] input[type="text"]:focus,
body[data-theme="jadeglass"] input[type="email"]:focus,
body[data-theme="jadeglass"] input[type="password"]:focus,
body[data-theme="jadeglass"] input[type="tel"]:focus,
body[data-theme="jadeglass"] input[type="number"]:focus,
body[data-theme="jadeglass"] input[type="date"]:focus,
body[data-theme="jadeglass"] input[type="month"]:focus,
body[data-theme="jadeglass"] input[type="time"]:focus,
body[data-theme="jadeglass"] input[type="datetime-local"]:focus,
body[data-theme="jadeglass"] select:focus,
body[data-theme="jadeglass"] textarea:focus {
  border-color: #10B981 !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22) !important;
}