/* 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;
}