/* Keen to Clean — shared tokens and PWA helpers */

:root {
  --ktc-orange: #ef832d;
  --ktc-orange-hover: #e07520;
  --ktc-teal: #0d9488;
  --ktc-logout: #9b2c4a;
  --ktc-pink: #d81b60;
  --ktc-bg: #f3f4f6;
  --ktc-max-width: 430px;
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  background-color: var(--ktc-bg);
  overscroll-behavior-y: none;
}

/* Safe area for notched phones. Bottom-padding only honours the
   device's safe area now that the bottom nav has been replaced by
   the left drawer (see templates/base.html). */
.app-shell {
  max-width: var(--ktc-max-width);
  margin-left: auto;
  margin-right: auto;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-header {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Toggle switch (job detail) */
.ktc-toggle {
  appearance: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #d1d5db;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.ktc-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}

.ktc-toggle:checked {
  background: var(--ktc-orange);
}

.ktc-toggle:checked::after {
  transform: translateX(1.25rem);
}

/* Modal overlay */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.35);
}

/* Hide password reveal on some browsers when using custom toggle */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Date fields — iOS Safari paints a large intrinsic control that
   overflows its box. Border lives on the wrapper; the input is reset
   with appearance:none so it can't hang past the white card. */
.date-field {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--ktc-orange);
  border-radius: 0.375rem;
  background: #fff;
}

.date-field:focus-within {
  outline: 1px solid var(--ktc-orange);
  outline-offset: 0;
}

.date-field .date-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0.625rem 0.75rem;
  box-sizing: border-box;
  background: transparent;
  color: var(--ktc-orange);
  font-size: 16px; /* 16px avoids iOS focus-zoom and keeps layout stable */
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
}

.date-field .date-input:focus {
  outline: none;
}

/* WebKit's internal date value node is what actually overflows. */
.date-field .date-input::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.date-field .date-input::-webkit-datetime-edit {
  min-width: 0;
  max-width: 100%;
  padding: 0;
}

.date-field .date-input::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  opacity: 0.55;
}