/* EmailFix Admin — pencil-sketch aesthetic
   Ported from the "KatPencil POS Admin" Claude Design template. */

:root {
  --bg: #f1ece0;
  --panel: #fbf9f2;
  --ink: #2a2722;
  --ink2: #3c372f;
  --muted: #7a746a;
  --muted2: #9a948a;
  --line: #d8cfbb;
  --line2: #cdbfa6;
  --green: #2f7d52;
  --amber: #d6882a;
  --sketch: #6d6456;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
input, button { font-family: inherit; }
input { outline: none; }
a { color: inherit; text-decoration: none; }
::selection { background: #f5e7cf; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cdbfa6; border-radius: 8px; border: 2px solid #f1ece0; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes slideIn { from { transform: translateY(-14px) translateX(-7px) scale(.98); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes paperDrift { 0% { transform: translate(0, 0); } 100% { transform: translate(2.5%, 3%); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
@keyframes squig { to { stroke-dashoffset: -20; } }
@keyframes drawDash { to { stroke-dashoffset: 0; } }

/* ---- Sketched card with hand-drawn border ---- */
.kp-card {
  position: relative;
  background: var(--panel);
  box-shadow: 2px 3px 0 rgba(60, 55, 47, .05), 0 12px 28px -18px rgba(60, 55, 47, .5);
}
.kp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.7px solid var(--sketch);
  filter: url(#pencil);
  pointer-events: none;
}
.kp-card > * { position: relative; }

/* ---- Sidebar nav ---- */
.kp-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  transition: background .15s, transform .15s;
}
.kp-nav:hover { background: rgba(60, 55, 47, 0.05); transform: translateX(2px); }
.kp-userrow { transition: background .15s; border-radius: 10px; }
.kp-userrow:hover { background: rgba(60, 55, 47, 0.05); }

/* ---- Buttons ---- */
.kp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  background: var(--green);
  color: var(--panel);
  border: none;
  border-radius: 12px 10px 13px 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(60, 55, 47, 0.18);
  transition: transform .14s, box-shadow .14s;
}
.kp-btn-primary:hover { transform: translateY(-1px) rotate(-0.8deg); box-shadow: 3px 5px 0 rgba(60, 55, 47, 0.18); }
.kp-btn-primary:active { transform: translateY(1px); box-shadow: 1px 1px 0 rgba(60, 55, 47, 0.18); }

.kp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  background: var(--panel);
  color: var(--ink2);
  border: 1.6px solid var(--sketch);
  border-radius: 12px 10px 13px 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .14s;
}
.kp-btn-ghost:hover { transform: translateY(-1px) rotate(-0.6deg); }

/* ---- Inputs ---- */
.kp-input {
  padding: 9px 12px 9px 34px;
  font-size: 13.5px;
  background: var(--panel);
  border: 1.6px solid var(--line2);
  border-radius: 12px 10px 13px 11px;
  color: var(--ink);
}
.kp-input:focus { border-color: var(--green); }

/* ---- Chips / filters ---- */
.kp-chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  background: var(--panel);
  border: 1.5px solid var(--line2);
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color .15s;
}
.kp-chip:hover { border-color: var(--green); }
.kp-chip-active {
  font-size: 13px;
  font-weight: 600;
  color: var(--panel);
  background: var(--green);
  border-radius: 10px 8px 11px 9px;
  padding: 7px 14px;
  cursor: pointer;
}

/* ---- Pagination ---- */
.kp-page:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px) rotate(-1deg); }
.kp-page:active { transform: translateY(1px); }

/* ---- Table rows ---- */
.kp-row { transition: background .12s; border-radius: 8px; }
.kp-row:hover { background: rgba(60, 55, 47, 0.035); }

/* ---- Compact row action buttons ---- */
.kp-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 29px;
  flex: none;
  background: var(--panel);
  color: var(--ink2);
  border: 1.5px solid var(--line2);
  border-radius: 9px 8px 10px 8px;
  cursor: pointer;
  transition: transform .12s, border-color .12s, color .12s;
}
.kp-act:hover { transform: translateY(-1px) rotate(-1.4deg); border-color: var(--green); color: var(--green); }
.kp-act:active { transform: translateY(1px); }
.kp-act-danger { border-color: #e0a999; color: #bf4a2f; }
.kp-act-danger:hover { border-color: #bf4a2f; color: #bf4a2f; }

/* ---- Staff cards ---- */
.kp-staff { transition: transform .15s; }
.kp-staff:hover { transform: translateY(-3px) rotate(-0.4deg); }

.kp-dashed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  background: transparent;
  border: 2px dashed #c2b79e;
  border-radius: 16px 13px 17px 12px;
  color: var(--muted2);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.kp-dashed:hover { border-color: var(--green); color: var(--green); }

.kp-link { color: var(--green); font-weight: 600; cursor: pointer; }

/* ---- Login page ---- */
.kp-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-image:
    repeating-linear-gradient(rgba(60, 55, 47, 0.035) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(60, 55, 47, 0.035) 0 1px, transparent 1px 40px);
}
.kp-login-card {
  width: 100%;
  max-width: 410px;
  background: var(--panel);
  border-radius: 20px 16px 22px 18px;
  padding: 34px 32px;
}
.kp-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
  margin: 0 0 6px 2px;
}
.kp-text-input {
  width: 100%;
  padding: 11px 13px;
  font-size: 14.5px;
  background: #fff;
  border: 1.6px solid var(--line2);
  border-radius: 12px 10px 13px 11px;
  color: var(--ink);
  transition: border-color .15s;
}
.kp-text-input:focus { border-color: var(--green); }
.kp-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--green);
  color: var(--panel);
  border: none;
  border-radius: 13px 11px 14px 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(60, 55, 47, 0.18);
  transition: transform .14s, box-shadow .14s;
}
.kp-submit:hover { transform: translateY(-1px) rotate(-0.6deg); box-shadow: 3px 5px 0 rgba(60, 55, 47, 0.18); }
.kp-submit:active { transform: translateY(1px); box-shadow: 1px 1px 0 rgba(60, 55, 47, 0.18); }
.kp-error {
  background: #f5e0d9;
  border: 1.5px solid #e0a999;
  color: #a23a22;
  border-radius: 11px 9px 12px 10px;
  padding: 10px 13px;
  font-size: 13px;
  margin-bottom: 18px;
}
/* Modal dialog (e.g. reset client portal password) */
.kp-modal {
  width: min(420px, calc(100vw - 40px));
  border: 1.7px solid var(--sketch);
  border-radius: 18px 14px 18px 15px;
  background: var(--panel);
  color: var(--ink);
  padding: 0;
  box-shadow: 3px 5px 0 rgba(60, 55, 47, .08);
}
.kp-modal::backdrop { background: rgba(42, 39, 34, .42); backdrop-filter: blur(1.5px); }
.kp-modal[open] { animation: fadeUp .28s both; }
.kp-modal-body { padding: 22px 24px 20px; }
.kp-modal h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.kp-modal p { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.kp-modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

/* ---- Copy-to-clipboard inline button (reveals on row hover) ---- */
.kp-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border: 1.4px solid var(--line2); border-radius: 7px 6px 8px 6px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  opacity: 0; transition: opacity .14s, color .14s, border-color .14s, transform .12s;
}
.kp-row:hover .kp-copy { opacity: 1; }
.kp-copy:hover { color: var(--green); border-color: var(--green); transform: translateY(-1px); }
.kp-copy.is-copied { color: var(--green); border-color: #b7d2bf; background: #e7efe2; opacity: 1; }

/* ---- Inline input affix (password reveal / generate) ---- */
.kp-input-affix { position: relative; display: flex; align-items: center; }
.kp-input-btn {
  position: absolute; right: 6px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border: none; background: transparent; color: var(--muted2);
  cursor: pointer; border-radius: 7px; transition: color .14s;
}
.kp-input-btn:hover { color: var(--green); }

/* ---- Account list filter ---- */
.kp-search {
  width: 100%; padding: 9px 12px 9px 34px; font-size: 13.5px;
  background: var(--panel); border: 1.6px solid var(--line2);
  border-radius: 12px 10px 13px 11px; color: var(--ink); transition: border-color .15s;
}
.kp-search:focus { border-color: var(--green); }

/* ---- Slim text-link button (e.g. "Generate password") ---- */
.kp-textlink {
  border: none; background: transparent; padding: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--green); letter-spacing: .01em;
}
.kp-textlink:hover { text-decoration: underline; }

/* ---- API documentation: code blocks ---- */
.kp-code {
  position: relative;
  background: #f6f1e4;
  border: 1.5px solid var(--line2);
  border-radius: 12px 10px 13px 11px;
  overflow: hidden;
}
.kp-code pre {
  margin: 0; padding: 14px 52px 14px 16px; overflow-x: auto;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 12.5px; line-height: 1.65; color: var(--ink2);
  tab-size: 4;
}
/* The buttons floating over a code block (Test, Copy). */
.kp-code-actions {
  position: absolute; top: 9px; right: 9px;
  display: flex; gap: 6px; z-index: 1;
}
.kp-code-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1.4px solid var(--line2); border-radius: 8px 6px 9px 7px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  transition: color .14s, border-color .14s, transform .12s, background .14s;
}
.kp-code-btn:hover { color: var(--green); border-color: var(--green); transform: translateY(-1px) rotate(-1deg); }
.kp-code-btn.is-copied { color: var(--green); border-color: #b7d2bf; background: #e7efe2; }
/* The Test toggle, while its panel is open. */
.kp-code-btn.is-open { color: var(--green); border-color: #b7d2bf; background: #e7efe2; }

/* Two buttons need more room than the pre's default right padding leaves. */
.kp-code-2btn pre { padding-right: 116px; }

/* ---- API documentation: the client's API keys ---- */
.kp-key {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  background: #f6f1e4;
  border: 1.5px solid var(--line2);
  border-radius: 12px 10px 13px 11px;
  transition: border-color .14s, background .14s;
}
.kp-key.is-revoked { opacity: .62; background: #f1ece0; }
/* The key just generated — worth pointing at, since it is the one to go copy. */
.kp-key.is-new { border-color: var(--green); background: #e7efe2; animation: fadeUp .45s both; }
.kp-key-value {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 13px; font-weight: 600; color: var(--ink);
  word-break: break-all;
}
.kp-key.is-revoked .kp-key-value { text-decoration: line-through; color: var(--muted2); }
.kp-key-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11.5px; color: var(--muted2);
}
/* The key's name — the thing you say out loud when you mean this key. */
.kp-key-name {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink2); background: #ece5d6;
  border: 1.2px solid var(--line2);
  padding: 2px 7px; border-radius: 7px 5px 8px 6px;
}
.kp-key-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border: 1.3px solid; border-radius: 8px 6px 9px 7px;
  white-space: nowrap;
}
.kp-key-revoke:hover { color: #bf4a2f; border-color: #bf4a2f; }
.kp-key-empty {
  padding: 12px 14px; margin-bottom: 8px;
  background: #f7ecd8; border: 1.4px dashed #e4cfa4;
  border-radius: 12px 10px 13px 11px;
  font-size: 12.5px; line-height: 1.55; color: #8a6520;
}

/* ---- API documentation: the "Test" panel ---- */
.kp-try {
  margin-top: 10px; padding: 15px 16px;
  background: var(--panel);
  border: 1.6px dashed var(--line2);
  border-radius: 14px 11px 15px 12px;
  animation: fadeUp .25s both;
}
.kp-try-warn {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 12px; padding: 9px 12px;
  background: #f7ecd8; border: 1.4px solid #e4cfa4;
  border-radius: 10px 8px 11px 9px;
  font-size: 12.5px; line-height: 1.55; color: #8a6520;
}
.kp-try-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.kp-try-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.kp-try-field { display: flex; flex-direction: column; gap: 5px; }
.kp-try-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted2);
}
.kp-try-input {
  width: 100%; padding: 9px 12px;
  font-family: 'Spline Sans Mono', monospace; font-size: 13px;
  color: var(--ink); background: #f6f1e4;
  border: 1.5px solid var(--line2);
  border-radius: 11px 9px 12px 10px;
  outline: none; resize: vertical;
  transition: border-color .14s;
}
.kp-try-input:focus { border-color: var(--green); background: var(--panel); }
.kp-try-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kp-try-run:disabled { opacity: .6; cursor: progress; transform: none; }
.kp-try-status {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 4px 10px; border-radius: 8px 6px 9px 7px;
  background: #ece5d6;
}
.kp-try-status.is-ok { color: #2f6d49; background: #e7efe2; }
.kp-try-status.is-err { color: #a4442e; background: #f4e0da; }
.kp-try-out { margin-top: 12px; }
.kp-try-out-label {
  margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted2);
}

/* ---- API documentation: HTTP method badge ---- */
.kp-method {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 7px 6px 8px 6px;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.kp-method-post { color: #2f6d49; background: #e7efe2; border: 1.3px solid #b7d2bf; }
.kp-method-get { color: #b07a28; background: #f7ecd8; border: 1.3px solid #e4cfa4; }