/*
  Kudafushi Complaints & Requests — shared design system (2026 refresh)
  Palette matched to the guest site suite (denorth.html / pdf-viewer.html):
  void/gold luxury theme, dark by default with a light override.
  Import this once per page, then add only page-specific rules locally.
*/

:root{
  /* --- surface & ink (dark, default) --- */
  --kf-parchment:      #0E0B08;
  --kf-parchment-deep: #1A1510;
  --kf-surface:        #1A1510;
  --kf-surface-soft:   #221C14;
  --kf-ink:            #F2E8D9;
  --kf-ink-soft:       rgba(242,232,217,0.62);
  --kf-ink-faint:      rgba(242,232,217,0.4);

  /* --- brand --- */
  --kf-ocean:          #D1B4A1;
  --kf-ocean-deep:     #16110B;
  --kf-gold:           #B89B89;
  --kf-gold-soft:      #D1B4A1;
  --kf-gold-wash:      rgba(184,155,137,0.1);

  /* --- line & state --- */
  --kf-line:           rgba(184,155,137,0.22);
  --kf-line-soft:      rgba(184,155,137,0.1);
  --kf-ok:             #6FB08D;
  --kf-ok-bg:           rgba(111,176,141,0.14);
  --kf-warn:           #D6A15A;
  --kf-warn-bg:        rgba(209,161,90,0.14);
  --kf-late:           #D08770;
  --kf-late-bg:        rgba(208,135,112,0.14);

  /* --- shape & elevation --- */
  --kf-radius-sm:      9px;
  --kf-radius:         14px;
  --kf-radius-lg:      22px;
  --kf-radius-pill:    999px;
  --kf-shadow-sm:      0 2px 12px rgba(0,0,0,0.35);
  --kf-shadow:         0 10px 34px rgba(0,0,0,0.45);
  --kf-shadow-lg:      0 24px 64px rgba(0,0,0,0.55);
  --kf-ring:           0 0 0 3px var(--kf-gold-wash);

  /* --- layout --- */
  --kf-topbar-h:        63px; /* 16px+16px padding + 30px logo/icon row + 1px border */

  /* --- type --- */
  --kf-font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --kf-font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  color-scheme: dark;
}

/* Auto light mode when the OS prefers light and no explicit choice was made */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --kf-parchment:      #FDFBF8;
    --kf-parchment-deep: #F2ECE5;
    --kf-surface:        #FFFFFF;
    --kf-surface-soft:   #F2ECE5;
    --kf-ink:            #1C1410;
    --kf-ink-soft:       rgba(28,20,16,0.62);
    --kf-ink-faint:      rgba(28,20,16,0.4);

    --kf-ocean:          #7D6355;
    --kf-ocean-deep:     #2A1B12;
    --kf-gold:           #9E806D;
    --kf-gold-soft:      #B89B89;
    --kf-gold-wash:      rgba(140,116,104,0.08);

    --kf-line:           rgba(140,116,104,0.25);
    --kf-line-soft:      rgba(140,116,104,0.12);
    --kf-ok:             #3E7A5C;
    --kf-ok-bg:           #DCEEE1;
    --kf-warn:           #A9702B;
    --kf-warn-bg:        #F1DFC2;
    --kf-late:           #AE4A36;
    --kf-late-bg:        #F5DAD2;

    --kf-shadow-sm:      0 2px 10px rgba(37,29,20,0.06);
    --kf-shadow:         0 10px 32px rgba(37,29,20,0.10);
    --kf-shadow-lg:      0 24px 60px rgba(37,29,20,0.16);

    color-scheme: light;
  }
}

/* Explicit choice via the theme toggle (kfToggleTheme in theme.js) always wins */
[data-theme="light"]{
  --kf-parchment:      #FDFBF8;
  --kf-parchment-deep: #F2ECE5;
  --kf-surface:        #FFFFFF;
  --kf-surface-soft:   #F2ECE5;
  --kf-ink:            #1C1410;
  --kf-ink-soft:       rgba(28,20,16,0.62);
  --kf-ink-faint:      rgba(28,20,16,0.4);

  --kf-ocean:          #7D6355;
  --kf-ocean-deep:     #2A1B12;
  --kf-gold:           #9E806D;
  --kf-gold-soft:      #B89B89;
  --kf-gold-wash:      rgba(140,116,104,0.08);

  --kf-line:           rgba(140,116,104,0.25);
  --kf-line-soft:      rgba(140,116,104,0.12);
  --kf-ok:             #3E7A5C;
  --kf-ok-bg:           #DCEEE1;
  --kf-warn:           #A9702B;
  --kf-warn-bg:        #F1DFC2;
  --kf-late:           #AE4A36;
  --kf-late-bg:        #F5DAD2;

  --kf-shadow-sm:      0 2px 10px rgba(37,29,20,0.06);
  --kf-shadow:         0 10px 32px rgba(37,29,20,0.10);
  --kf-shadow-lg:      0 24px 60px rgba(37,29,20,0.16);

  color-scheme: light;
}

[data-theme="dark"]{
  --kf-parchment:      #0E0B08;
  --kf-parchment-deep: #1A1510;
  --kf-surface:        #1A1510;
  --kf-surface-soft:   #221C14;
  --kf-ink:            #F2E8D9;
  --kf-ink-soft:       rgba(242,232,217,0.62);
  --kf-ink-faint:      rgba(242,232,217,0.4);

  --kf-ocean:          #D1B4A1;
  --kf-ocean-deep:     #16110B;
  --kf-gold:           #B89B89;
  --kf-gold-soft:      #D1B4A1;
  --kf-gold-wash:      rgba(184,155,137,0.1);

  --kf-line:           rgba(184,155,137,0.22);
  --kf-line-soft:      rgba(184,155,137,0.1);
  --kf-ok:             #6FB08D;
  --kf-ok-bg:           rgba(111,176,141,0.14);
  --kf-warn:           #D6A15A;
  --kf-warn-bg:        rgba(209,161,90,0.14);
  --kf-late:           #D08770;
  --kf-late-bg:        rgba(208,135,112,0.14);

  --kf-shadow-sm:      0 2px 12px rgba(0,0,0,0.35);
  --kf-shadow:         0 10px 34px rgba(0,0,0,0.45);
  --kf-shadow-lg:      0 24px 64px rgba(0,0,0,0.55);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; font-size: 115%; scroll-behavior: smooth; scrollbar-gutter: stable; overflow-x: clip; }

body.kf-body{
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  background: var(--kf-parchment);
  color: var(--kf-ink);
  font-family: var(--kf-font-body);
  font-weight: 300;
  line-height: 1.55;
  transition: background .25s ease, color .25s ease;
}

.kf-body h1, .kf-body h2, .kf-body h3{
  font-family: var(--kf-font-display);
  font-weight: 300;
  margin: 0;
  color: var(--kf-ink);
  letter-spacing: -0.01em;
}

.kf-body a{ color: var(--kf-ocean); text-decoration: none; }
.kf-body a:hover{ text-decoration: underline; }

.kf-body :focus-visible{
  outline: 2px solid var(--kf-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  .kf-body *{ transition: none !important; animation: none !important; }
  html{ scroll-behavior: auto; }
}

/* ---------------- Layout shells ---------------- */

/* Centered auth-style card (login, change/forgot/reset password, setup) */
.kf-auth-shell{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 28px 20px;
}
.kf-theme-toggle-fixed{
  position: absolute; top: 18px; right: 18px;
}
.kf-theme-toggle-fixed .kf-icon-btn{
  background: var(--kf-surface); border-color: var(--kf-line); color: var(--kf-ink-soft);
}
.kf-theme-toggle-fixed .kf-icon-btn:hover{ background: var(--kf-surface-soft); }

.kf-card{
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-lg);
  box-shadow: var(--kf-shadow);
  padding: 32px 30px;
  width: 100%;
  max-width: 380px;
}

.kf-card--wide{ max-width: 460px; }

.kf-card .kf-logo{
  display: block;
  height: 34px;
  width: auto;
  margin: 0 auto 18px;
}

.kf-eyebrow{
  color: var(--kf-gold);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .7rem;
  margin-bottom: 6px;
  display: block;
}

.kf-sub{
  font-size: .85rem;
  color: var(--kf-ink-soft);
  margin: 4px 0 4px;
  line-height: 1.5;
}

.kf-back{
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: .82rem;
  color: var(--kf-gold);
  font-weight: 600;
}

/* Full-width app shell (submit, staff, admin_users) */
.kf-topbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--kf-parchment);
  background-clip: padding-box;
  opacity: 1;
  color: var(--kf-ink);
  border-bottom: 1px solid var(--kf-line);
  box-shadow: var(--kf-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 850;
  isolation: isolate;
}

.kf-topbar .kf-brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; transition: opacity .15s ease; grid-column: 2; justify-self: center; }
.kf-topbar .kf-brand:hover{ opacity: .8; text-decoration: none; }
.kf-topbar .kf-brand img{ height: 30px; width: auto; display: block; }

.kf-topbar .kf-nav-back{ grid-column: 1; justify-self: start; }
.kf-topbar .kf-topbar-right{ grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

.kf-nav-back{
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kf-gold-soft); text-decoration: none !important; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit;
  transition: color .15s ease;
}
.kf-nav-back:hover{ color: var(--kf-ink); }
.kf-nav-back i{ font-size: 15px !important; }

.kf-topbar-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }


.kf-icon-btn{
  background: var(--kf-surface);
  border: 1px solid var(--kf-line-soft);
  color: var(--kf-gold-soft);
  border-radius: var(--kf-radius-pill);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.kf-icon-btn:hover{ border-color: var(--kf-gold); }
.kf-icon-btn i.ti{ font-size: 17px !important; }

.kf-bell-btn{ position: relative; text-decoration: none !important; }
.kf-bell-badge{
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--kf-radius-pill);
  background: var(--kf-late); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--kf-parchment-deep);
}

.kf-bell-wrap{ position: relative; }
.kf-bell-panel{
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 950;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius);
  box-shadow: var(--kf-shadow); overflow: hidden;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.kf-bell-panel.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.kf-bell-panel-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--kf-line-soft);
}
.kf-bell-panel-head strong{ font-family: var(--kf-font-display); font-size: 1rem; color: var(--kf-ink); }
.kf-bell-panel-count{ font-size: .72rem; color: var(--kf-ink-faint); }
.kf-bell-panel-list{ max-height: 360px; overflow-y: auto; }
.kf-bell-empty{ padding: 22px 14px; text-align: center; color: var(--kf-ink-faint); font-size: .82rem; }
.kf-bell-item{
  display: block; padding: 10px 14px; text-decoration: none !important;
  border-bottom: 1px solid var(--kf-line-soft); transition: background .12s ease;
}
.kf-bell-item:last-child{ border-bottom: none; }
.kf-bell-item:hover{ background: var(--kf-gold-wash); }
.kf-bell-item-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.kf-bell-item-id{ font-size: .78rem; font-weight: 700; color: var(--kf-ink); }
.kf-bell-item-detail{ display: block; font-size: .74rem; color: var(--kf-gold-soft); margin-bottom: 2px; }
.kf-bell-item-snippet{ display: block; font-size: .8rem; color: var(--kf-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-bell-panel-footer{
  display: block; text-align: center; padding: 10px; font-size: .8rem; font-weight: 600;
  color: var(--kf-gold); text-decoration: none !important; border-top: 1px solid var(--kf-line-soft);
}
.kf-bell-panel-footer:hover{ background: var(--kf-gold-wash); }
.kf-icon-btn:hover{ background: var(--kf-surface-soft); border-color: var(--kf-gold); transform: translateY(-1px); }

.kf-main{
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 32px 72px;
}

.kf-dash-header{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.kf-dash-header .kf-meta{ font-size: .82rem; line-height: 1.7; color: var(--kf-ink-soft); }
.kf-dash-header .kf-meta strong{ color: var(--kf-ink); }
.kf-dash-header .kf-meta a{ font-weight: 600; }
.kf-dash-header .kf-meta i{ margin-right: 4px; }

/* ---------------- Type helpers ---------------- */
.kf-lede{ color: var(--kf-ink-soft); margin-top: 8px; font-size: .95rem; max-width: 60ch; }

/* ---------------- Forms ---------------- */
.kf-field{ margin-bottom: 16px; }
.kf-body label{
  display: block;
  font-weight: 600;
  font-size: .82rem;
  margin: 14px 0 6px;
  color: var(--kf-ink);
}
.kf-body label:first-of-type{ margin-top: 0; }

.kf-body input[type="text"],
.kf-body input[type="password"],
.kf-body input[type="email"],
.kf-body input,
.kf-body select,
.kf-body textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--kf-radius-sm);
  border: 1px solid var(--kf-line);
  background: var(--kf-surface-soft);
  color: var(--kf-ink);
  font-family: var(--kf-font-body);
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.kf-body input:focus,
.kf-body select:focus,
.kf-body textarea:focus{
  outline: none;
  border-color: var(--kf-gold);
  box-shadow: var(--kf-ring);
  background: var(--kf-surface);
}
.kf-body textarea{ min-height: 100px; resize: vertical; }

/* Buttons */
.kf-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--kf-radius-sm);
  padding: 12px 16px;
  font-family: var(--kf-font-body);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  background: var(--kf-gold-soft);
  color: var(--kf-ocean-deep);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.kf-btn:hover{ background: var(--kf-gold); transform: translateY(-1px); box-shadow: var(--kf-shadow-sm); }
.kf-btn:active{ transform: translateY(0); }
.kf-btn-block{ width: 100%; margin-top: 6px; }
.kf-btn-primary{ background: var(--kf-gold); }
.kf-btn-primary:hover{ background: var(--kf-ocean); color: var(--kf-parchment); }
.kf-btn-ghost{
  background: transparent;
  border: 1px solid var(--kf-line);
  color: var(--kf-ink);
}
.kf-btn-ghost:hover{ background: var(--kf-surface-soft); }
.kf-btn-danger{ background: var(--kf-late-bg); color: var(--kf-late); }
.kf-btn-danger:hover{ background: var(--kf-late); color: #fff; }
.kf-btn-sm{ padding: 7px 11px; font-size: .78rem; border-radius: 7px; }

/* Messages / alerts */
.kf-msg{
  margin-top: 14px;
  font-size: .85rem;
  padding: 11px 13px;
  border-radius: var(--kf-radius-sm);
  line-height: 1.5;
}
.kf-msg-ok{ background: var(--kf-ok-bg); color: var(--kf-ok); }
.kf-msg-warn{ background: var(--kf-warn-bg); color: var(--kf-warn); }
.kf-msg-err{ background: var(--kf-late-bg); color: var(--kf-late); }
.kf-msg-neutral{ background: var(--kf-parchment-deep); color: var(--kf-ink-soft); }

/* Priority / toggle chip group (submit form) */
.kf-chip-row{ display: flex; gap: 8px; }
.kf-chip-row label{
  flex: 1; text-align: center;
  border: 1px solid var(--kf-line); border-radius: var(--kf-radius-sm);
  padding: 10px 4px; margin: 0;
  cursor: pointer; font-weight: 600; font-size: .85rem;
  transition: border-color .15s ease, background .15s ease;
}
.kf-chip-row input{ display: none; }
.kf-chip-row label:has(input:checked){ border-color: var(--kf-gold); background: var(--kf-gold-wash); }

/* ---------------- Tables ---------------- */
.kf-table-wrap{
  width: calc(100% + 64px);
  margin-left: -32px;
  margin-right: -32px;
  max-height: calc(100vh - var(--kf-topbar-h) - 56px);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
  border-radius: 0;
  border: 1px solid var(--kf-line);
  border-left: none;
  border-right: none;
  background: var(--kf-surface);
  box-shadow: var(--kf-shadow-sm);
}
.kf-table{ width: 100%; min-width: 980px; border-collapse: collapse; }
.kf-table th, .kf-table td{
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--kf-line-soft);
  font-size: .95rem;
  vertical-align: top;
}
.kf-table th{
  background: var(--kf-parchment-deep);
  font-weight: 700;
  color: var(--kf-ink-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .8rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 700;
  box-shadow: 0 1px 0 var(--kf-line);
}
.kf-table tr:last-child td{ border-bottom: none; }
i.ti{ font-size: 1.3rem !important; vertical-align: -4px; }
.kf-table tr:hover td{ background: var(--kf-gold-wash); }

/* Status pills */
.kf-status{
  padding: 4px 10px;
  border-radius: var(--kf-radius-pill);
  font-size: .74rem;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
}
.kf-status-open{ background: var(--kf-late-bg); color: var(--kf-late); }
.kf-status-followed_up{ background: var(--kf-warn-bg); color: var(--kf-warn); }
.kf-status-resolved{ background: var(--kf-ok-bg); color: #3E7A5C; }
.kf-priority-badge{
  display: inline-block; padding: 2px 9px; border-radius: var(--kf-radius-pill);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  margin-left: 6px;
}
.kf-priority-critical{ background: var(--kf-late-bg); color: var(--kf-late); }
.kf-priority-urgent{ background: var(--kf-warn-bg); color: var(--kf-warn); }
.kf-priority-standard{ background: var(--kf-ok-bg); color: #3E7A5C; }

/* ═══ Luxury toggle buttons — Complaint/Request, Standard/Urgent/Critical ═══ */
.priority{ display:flex; gap:10px; flex-wrap:wrap; }
.priority label{
  position: relative;
  flex: 1; min-width: 96px; text-align: center;
  border: 1px solid var(--kf-line); border-radius: var(--kf-radius-pill);
  padding: 12px 16px; margin: 0; cursor: pointer;
  background: var(--kf-surface);
  font-family: var(--kf-font-body); font-weight: 600; font-size: .85rem;
  letter-spacing: .03em;
  color: var(--kf-ink-soft);
  transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.priority label:hover{ border-color: var(--kf-gold-soft); color: var(--kf-ink); transform: translateY(-1px); }
.priority input{
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.priority label:has(input:checked){
  border-color: var(--kf-gold);
  background: linear-gradient(180deg, var(--kf-gold-wash), var(--kf-gold-wash));
  color: var(--kf-ink);
  box-shadow: 0 0 0 1px var(--kf-gold), 0 6px 16px -6px rgba(201,161,90,.55);
  transform: translateY(-1px);
}
.priority input:checked + span{ font-weight: 700; }
.priority label:has(input:checked) span::before{
  content: "✓"; display: inline-block; margin-right: 6px; font-size: .8em; color: var(--kf-gold);
}
/* Priority-specific accent on selection — same colors as the badges elsewhere. */
.priority label:has(input[value="critical"]:checked){
  border-color: var(--kf-late); background: var(--kf-late-bg);
  box-shadow: 0 0 0 1px var(--kf-late), 0 6px 16px -6px rgba(208,135,112,.55);
}
.priority label:has(input[value="critical"]:checked) span::before{ color: var(--kf-late); }
.priority label:has(input[value="urgent"]:checked){
  border-color: var(--kf-warn); background: var(--kf-warn-bg);
  box-shadow: 0 0 0 1px var(--kf-warn), 0 6px 16px -6px rgba(214,161,90,.55);
}
.priority label:has(input[value="urgent"]:checked) span::before{ color: var(--kf-warn); }
.priority label:has(input[value="standard"]:checked){
  border-color: #3E7A5C; background: var(--kf-ok-bg);
  box-shadow: 0 0 0 1px #3E7A5C, 0 6px 16px -6px rgba(62,122,92,.45);
}
.priority label:has(input[value="standard"]:checked) span::before{ color: #3E7A5C; }
.kf-status-note{
  margin-top: 5px; font-size: .8rem; color: var(--kf-ink-soft); font-style: italic;
  max-width: 340px; line-height: 1.45;
}
.kf-col-status{
  min-width: 320px;
  white-space: normal !important; /* let notes wrap instead of forcing the column wider than needed */
}
.kf-col-status .kf-status,
.kf-col-status .kf-priority-badge{
  white-space: nowrap;
}

/* ═══ In-page toast notifications (slide in while the tab is open) ═══ */
.kf-toast-stack{
  position: fixed; left: 0; right: 0; bottom: 18px; z-index: 970;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; padding: 0 16px;
}
.kf-toast{
  pointer-events: auto;
  width: 100%; max-width: 380px;
  background: var(--kf-parchment-deep); border: 1px solid var(--kf-line);
  border-left: 3px solid var(--kf-gold);
  border-radius: var(--kf-radius); box-shadow: var(--kf-shadow-lg, 0 20px 50px rgba(0,0,0,.4));
  padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px;
  text-decoration: none !important; color: inherit;
  transform: translateY(24px); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.kf-toast.is-in{ transform: translateY(0); opacity: 1; }
.kf-toast-icon{ color: var(--kf-gold); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.kf-toast-body{ flex: 1; min-width: 0; }
.kf-toast-title{ font-size: .85rem; font-weight: 700; color: var(--kf-ink); margin-bottom: 2px; }
.kf-toast-detail{ font-size: .8rem; color: var(--kf-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-toast-close{
  flex-shrink: 0; background: none; border: none; color: var(--kf-ink-faint); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px;
}
.kf-toast-close:hover{ color: var(--kf-ink); }

/* ═══ Reusable confirm-with-note modal (status changes, etc.) ═══ */
.kf-modal-overlay{
  position: fixed; inset: 0; z-index: 960; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.kf-modal-overlay.is-open{ display: flex; }
.kf-modal{
  background: var(--kf-surface); border: 1px solid var(--kf-line); border-radius: var(--kf-radius-lg);
  box-shadow: var(--kf-shadow-lg, 0 24px 64px rgba(0,0,0,.55));
  padding: 22px; width: 100%; max-width: 420px;
}
.kf-modal h3{ font-family: var(--kf-font-display); font-size: 1.15rem; margin-bottom: 6px; color: var(--kf-ink); }
.kf-modal-sub{ font-size: .82rem; color: var(--kf-ink-soft); margin-bottom: 14px; }
.kf-modal textarea{ width: 100%; resize: vertical; min-height: 70px; }
.kf-modal-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* Ticket confirmation panel */
.kf-panel{
  margin-top: 26px;
  padding: 22px;
  background: var(--kf-surface);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius);
  box-shadow: var(--kf-shadow-sm);
}
.kf-ticket-id{ font-family: var(--kf-font-display); font-size: 1.35rem; color: var(--kf-gold); }

.kf-escalation{ margin-top: 18px; border-left: 2px solid var(--kf-line); padding-left: 18px; }
.kf-tier{ position: relative; padding-bottom: 20px; }
.kf-tier:last-child{ padding-bottom: 0; }
.kf-tier::before{
  content: ''; position: absolute; left: -23px; top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--kf-line); border: 2px solid var(--kf-surface);
}
.kf-tier.is-active::before{ background: var(--kf-warn); }
.kf-tier.is-done::before{ background: var(--kf-ok); }
.kf-tier h4{ margin: 0 0 3px; font-size: .9rem; font-weight: 700; }
.kf-tier p{ margin: 0; color: var(--kf-ink-soft); font-size: .82rem; }
.kf-tier .kf-sla{ font-size: .75rem; color: var(--kf-gold); font-weight: 600; margin-top: 2px; }

/* Foot notes */
.kf-footnote{
  margin-top: 34px; font-size: .78rem; color: var(--kf-ink-soft);
  border-top: 1px dashed var(--kf-line); padding-top: 16px;
}

@media (max-width: 520px){
  .kf-chip-row{ flex-direction: column; }
}

@media (max-width: 520px){
  .kf-btn{ flex: 1 1 auto; white-space: nowrap; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE PASS — most guests/staff are on a phone, so touch targets and
   the wide staff/admin tables need real adaptation here, not just
   reflowing text. Scoped to this breakpoint so the desktop staff
   console (designed pixel-precisely) is untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px){
  /* Icon buttons (bell, theme toggle, drawer burger) were 30×30px —
     under Apple/Google's ~44px minimum recommended touch target, and
     these are exactly the controls tapped most often. Grow the hit
     area without visually enlarging the icon much. */
  .kf-icon-btn{ width: 44px; height: 44px; }
  .kf-icon-btn i.ti{ font-size: 19px !important; }
  .kf-burger{ padding: 10px; }

  /* Small action buttons (table row actions like "Followed up" /
     "Resolved") were ~28px tall — grow to a comfortable tap height. */
  .kf-btn-sm{ padding: 11px 14px; font-size: .82rem; min-height: 40px; }

  /* Top bar: tighten side padding and let the back-link's label shrink
     before it fights the logo/icons for space on a narrow screen. */
  .kf-topbar{ padding: 12px 14px; }
  .kf-nav-back{ font-size: 12px; letter-spacing: .08em; }
  .kf-main{ padding: 20px 16px 72px; }

  /* Wide data tables (tickets, users, activity log, guest check-ins):
     a 980px-min-width table forced horizontal scrolling on every phone.
     Below this width, each row becomes its own card instead — every
     cell's data-label attribute supplies the field name that the
     (now-hidden) column header used to provide. */
  .kf-table-wrap{
    width: auto; margin-left: 0; margin-right: 0;
    overflow-x: visible; max-height: none;
    border-radius: var(--kf-radius);
    border: 1px solid var(--kf-line);
  }
  .kf-table{ min-width: 0; width: 100%; }
  .kf-table tr:first-child{ display: none; } /* the plain header row */
  .kf-table tr{
    display: block;
    padding: 14px 16px;
    border-bottom: 8px solid var(--kf-parchment);
  }
  .kf-table tr:last-child{ border-bottom: none; }
  .kf-table td{
    display: block;
    border-bottom: none;
    padding: 6px 0;
    font-size: .92rem;
  }
  .kf-table td[data-label]::before{
    content: attr(data-label);
    display: block;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--kf-ink-faint); margin-bottom: 2px;
  }
  .kf-table td:last-child{ padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
  .kf-table td:last-child .kf-btn{ flex: 1 1 auto; }
  .kf-col-status{ min-width: 0; }
}