/* ==========================================================================
   MokkhTasks — Reusable components
   Buttons · forms · cards · badges · navbar · footer · modal · toast ·
   accordion · tabs · dropdown · sidebar · avatars · status · empty states
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  text-align: center;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--green-600);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(12, 21, 54, 0.14);
}

.btn--primary:hover {
  background: var(--green-700);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--navy-800);
  color: var(--white);
}

.btn--secondary:hover {
  background: var(--navy-700);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: var(--white);
  color: var(--navy-800);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  border-color: var(--navy-500);
  color: var(--navy-700);
  background: var(--navy-50);
}

.btn--outline-green {
  background: transparent;
  color: var(--green-700);
  border-color: var(--green-600);
}

.btn--outline-green:hover {
  background: var(--green-50);
  color: var(--green-700);
}

.btn--white {
  background: var(--white);
  color: var(--navy-900);
}

.btn--white:hover {
  background: var(--navy-50);
  color: var(--navy-900);
}

.btn--danger {
  background: var(--error-bg);
  color: var(--error);
  border-color: var(--error-border);
}

.btn--danger:hover {
  background: #fbe0de;
  color: var(--error);
}

.btn--sm {
  font-size: var(--fs-sm);
  padding: 0.5625rem 1rem;
}

.btn--lg {
  font-size: var(--fs-lg);
  padding: 1rem 1.875rem;
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--white);
  color: var(--navy-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast) var(--ease);
}

.btn--icon:hover {
  border-color: var(--navy-500);
  color: var(--navy-600);
  background: var(--navy-50);
}

.btn--icon.is-active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}

.btn--icon svg {
  width: 20px;
  height: 20px;
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Google button — frontend-only UI element (no real OAuth yet) */
.btn--google {
  background: var(--white);
  color: var(--text);
  border-color: var(--border-strong);
  font-weight: var(--fw-semibold);
  width: 100%;
}

.btn--google:hover {
  background: var(--bg-alt);
  border-color: var(--border-strong);
}

.btn--google svg {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------------------ */
/* Brand marks                                                          */
/* ------------------------------------------------------------------ */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  color: var(--navy-900);
  letter-spacing: var(--tracking-tight);
}

.logo svg {
  width: 36px;
  height: 36px;
}

.logo em {
  font-style: normal;
  color: var(--green-600);
}

.logo--light {
  color: var(--white);
}

.logo--light em {
  color: #7dd3a8;
}

.wordmark-note {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Navbar                                                               */
/* ------------------------------------------------------------------ */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--nav-h);
}

.navbar__menu {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.navbar__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.navbar__link:hover {
  color: var(--navy-900);
  background: var(--navy-50);
}

.navbar__link.is-active {
  color: var(--navy-900);
  font-weight: var(--fw-semibold);
}

.navbar__actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

.navbar__link-auth {
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.navbar__link-auth:hover {
  background: var(--navy-50);
  color: var(--navy-900);
}

.navbar__burger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--white);
  color: var(--navy-800);
}

.navbar__burger svg {
  width: 22px;
  height: 22px;
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
}

.drawer.is-open {
  visibility: visible;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 43, 0.55);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}

.drawer.is-open .drawer__backdrop {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: var(--white);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
  overflow-y: auto;
}

.drawer.is-open .drawer__panel {
  transform: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__close {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  color: var(--navy-800);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-block: 1px solid var(--border);
  padding-block: var(--space-3);
}

.drawer__link {
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--text);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.drawer__link:hover {
  background: var(--navy-50);
  color: var(--navy-900);
}

.drawer__link svg {
  width: 20px;
  height: 20px;
  color: var(--text-3);
}

.drawer__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ------------------------------------------------------------------ */
/* Search bar                                                           */
/* ------------------------------------------------------------------ */
.search-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.search-bar:focus-within {
  border-color: var(--green-500);
  box-shadow: var(--shadow-focus);
}

.search-bar__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-2);
}

.search-bar__input svg {
  width: 22px;
  height: 22px;
  color: var(--text-3);
  flex-shrink: 0;
}

.search-bar__input input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--fs-lg);
  color: var(--text);
  padding-block: var(--space-3);
}

.search-bar__input input::placeholder {
  color: var(--text-3);
}

@media (min-width: 720px) {
  .search-bar {
    flex-direction: row;
    align-items: stretch;
  }

  .search-bar__input {
    padding-inline: var(--space-3);
  }
}

.search-query-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--green-500);
  color: var(--green-700);
  background: var(--green-50);
}

.chip svg {
  width: 15px;
  height: 15px;
  color: var(--green-600);
}

/* ------------------------------------------------------------------ */
/* Cards                                                                */
/* ------------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.card--pad {
  padding: var(--space-5);
}

.card--hover {
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.bare {
  border: none;
  box-shadow: none;
  background: none;
}

/* ------------------------------------------------------------------ */
/* Badges & tags                                                        */
/* ------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  background: var(--bg-alt);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.badge svg {
  width: 13px;
  height: 13px;
}

.badge--info   { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }
.badge--success{ background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge--warning{ background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge--error  { background: var(--error-bg);   color: var(--error);   border-color: var(--error-border); }
.badge--purple { background: #eeeafc;           color: var(--accent-purple); border-color: #d9d1f5; }
.badge--teal   { background: #e0f5f5;           color: var(--accent-teal);   border-color: #bfe8e8; }
.badge--rose   { background: #fbeaf3;           color: var(--accent-rose);   border-color: #f3d0e3; }
.badge--navy   { background: var(--navy-100);   color: var(--navy-700);      border-color: var(--navy-200); }
.badge--green  { background: var(--green-50);   color: var(--green-700);     border-color: var(--green-100); }
.badge--dark   { background: var(--navy-900);   color: var(--white); border-color: var(--navy-900); }

.badge--dot {
  position: relative;
  padding-left: 1rem;
}

.badge--dot::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-xs);
  background: var(--navy-50);
  color: var(--navy-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid var(--navy-100);
}

/* Verified marker */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
}

.verified svg {
  width: 15px;
  height: 15px;
}

/* ------------------------------------------------------------------ */
/* Forms                                                                */
/* ------------------------------------------------------------------ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.field .hint {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  appearance: none;
}

.textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--lh-normal);
}

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

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: var(--shadow-focus);
}

.input.is-error,
.select.is-error,
.textarea.is-error {
  border-color: var(--error);
}

.input-wrap {
  position: relative;
}

.input-wrap .input {
  padding-right: 3rem;
}

.input-wrap__icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  border-radius: var(--radius-xs);
  transition: color var(--t-fast) var(--ease);
}

.input-wrap__icon:hover {
  color: var(--navy-700);
}

.input-wrap__icon svg {
  width: 20px;
  height: 20px;
}

/* Clears the "+254" prefix, which is one character wider than the bare country
   code this was sized for. */
.input-wrap--prefix .input {
  padding-left: 3.6rem;
}

.input-wrap__prefix {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}

.form-error {
  display: none;
  font-size: var(--fs-sm);
  color: var(--error);
  align-items: center;
  gap: var(--space-1);
  margin-top: -8px;
  margin-bottom: var(--space-3);
}

.form-error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.form-error.is-visible {
  display: inline-flex;
}

.field-error {
  font-size: var(--fs-sm);
  color: var(--error);
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.field-error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.field-error.is-visible {
  display: flex;
}

/* Select with chevron */
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.select-wrap .select {
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Password strength */
.strength {
  display: none;
  margin-top: var(--space-2);
}

.strength.is-visible {
  display: block;
}

.strength__meter {
  display: flex;
  gap: var(--space-2);
}

.strength__bar {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border);
  transition: background var(--t-med) var(--ease);
}

.strength__bar.is-active-1 { background: var(--error); }
.strength__bar.is-active-2 { background: var(--warning); }
.strength__bar.is-active-3 { background: var(--info); }
.strength__bar.is-active-4 { background: var(--success); }

.strength__label {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
}

.strength__label strong {
  color: inherit;
}

/* ------------------------------------------------------------------ */
/* Modal                                                                */
/* ------------------------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
}

.modal.is-open {
  visibility: visible;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 43, 0.6);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(86vh, 760px);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateY(24px);
  transition: transform var(--t-med) var(--ease);
  overflow: hidden;
}

.modal.is-open .modal__dialog {
  transform: none;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.modal__head h3 {
  font-size: var(--fs-xl);
}

.modal__close {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

.modal__close:hover {
  color: var(--error);
  border-color: var(--error-border);
  background: var(--error-bg);
}

.modal__close svg {
  width: 18px;
  height: 18px;
}

.modal__body {
  padding: var(--space-5);
  overflow-y: auto;
}

.modal__foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .modal {
    align-items: center;
  }
}

/* ------------------------------------------------------------------ */
/* Toast                                                                */
/* ------------------------------------------------------------------ */
.toast-region {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  left: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

@media (min-width: 640px) {
  .toast-region {
    left: auto;
    width: 380px;
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastIn 320ms var(--ease);
}

.toast.is-auto-hide {
  animation: toastIn 320ms var(--ease), toastOut 300ms var(--ease) forwards 4.6s;
}

.toast__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #7dd3a8;
}

.toast--error .toast__icon { color: #f29c95; }
.toast--info .toast__icon { color: #9db8f5; }

.toast__body {
  flex: 1;
}

.toast__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  display: block;
}

.toast__msg {
  font-size: var(--fs-sm);
  color: #c3cdeb;
  margin-top: 1px;
}

.toast__close {
  color: #c3cdeb;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.toast__close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.toast__close svg {
  width: 15px;
  height: 15px;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ------------------------------------------------------------------ */
/* Accordion                                                            */
/* ------------------------------------------------------------------ */
.accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.accordion__item + .accordion__item {
  border-top: 1px solid var(--border);
}

.accordion__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
  transition: background var(--t-fast) var(--ease);
}

.accordion__button:hover {
  background: var(--bg-alt);
}

.accordion__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: transform var(--t-med) var(--ease),
              background var(--t-med) var(--ease),
              color var(--t-med) var(--ease);
}

.accordion__icon svg {
  width: 15px;
  height: 15px;
}

.accordion__button[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--white);
}

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-med) var(--ease);
}

.accordion__content {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-2);
}

.accordion__content p + p {
  margin-top: var(--space-3);
}

.accordion__content ul {
  list-style: disc;
  padding-left: var(--space-5);
  margin-top: var(--space-3);
}

.accordion__content li {
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Tabs                                                                 */
/* ------------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tab svg {
  width: 17px;
  height: 17px;
}

.tab:hover {
  color: var(--navy-800);
}

.tab[aria-selected="true"] {
  color: var(--navy-900);
  border-color: var(--green-600);
}

.tab-panel {
  padding-top: var(--space-5);
}

.tab-panel[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Avatar                                                               */
/* ------------------------------------------------------------------ */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--navy-100);
  color: var(--navy-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  overflow: hidden;
}

.avatar--xs { width: 32px; height: 32px; font-size: var(--fs-sm); }
.avatar--sm { width: 44px; height: 44px; font-size: var(--fs-md); }
.avatar--md { width: 56px; height: 56px; font-size: var(--fs-lg); }
.avatar--lg { width: 84px; height: 84px; font-size: var(--fs-2xl); }
.avatar--xl { width: 120px; height: 120px; font-size: var(--fs-3xl); }

.avatar--ring {
  border: 3px solid var(--white);
  box-shadow: var(--shadow-sm);
}

.avatar--online {
  position: relative;
}

.avatar--online::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--success);
  border: 2.5px solid var(--white);
}

/* ------------------------------------------------------------------ */
/* Job card                                                             */
/* ------------------------------------------------------------------ */
.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.job-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.job-card__title {
  font-size: var(--fs-xl);
  margin-bottom: 2px;
}

.job-card__title a {
  color: var(--text);
}

.job-card__title a:hover {
  color: var(--green-700);
}

.job-card__client {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.job-card__client img,
.job-card__client .avatar {
  width: 22px;
  height: 22px;
  font-size: var(--fs-xs);
}

.job-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.job-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
}

@media (min-width: 520px) {
  .job-card__meta {
    grid-template-columns: repeat(3, 1fr);
  }
}

.job-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.job-meta svg {
  width: 17px;
  height: 17px;
  color: var(--text-3);
  flex-shrink: 0;
}

.job-meta strong {
  color: var(--text);
  font-weight: var(--fw-semibold);
  margin-left: 2px;
}

.job-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.job-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.job-card__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.job-card__pay {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--green-700);
}

/* The dollar equivalent that sits under a job's shilling pay. One class for
   every place it appears - job cards, the featured row, the apply dialog and
   the job details sidebar - so the secondary figure reads the same in all of
   them. It replaces a .kes-note class that had no rule at all, an inline-styled
   .hint (which only has a rule inside .field) and a negative margin that had to
   pull a second label back up under the first. */
.pay-alt {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-style: normal;
  color: var(--text-3);
}

/* ------------------------------------------------------------------ */
/* Empty state                                                          */
/* ------------------------------------------------------------------ */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}

.empty-state__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  box-shadow: var(--shadow-sm);
}

.empty-state__icon svg {
  width: 28px;
  height: 28px;
}

.empty-state h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-2);
}

.empty-state p {
  max-width: 420px;
  margin: 0 auto var(--space-5);
  color: var(--text-2);
}

/* ------------------------------------------------------------------ */
/* Progress                                                             */
/* ------------------------------------------------------------------ */
.progress {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--navy-100);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--green-500);
  transition: width var(--t-slow) var(--ease);
  position: relative;
}

.progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shimmer 2.2s ease infinite;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .progress__bar::after {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Icon tiles                                                          */
/* ------------------------------------------------------------------ */
.icon-tile {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-100);
  color: var(--navy-700);
}

.icon-tile--green {
  background: var(--green-50);
  color: var(--green-700);
}

.icon-tile--navy {
  background: var(--navy-900);
  color: var(--white);
}

.icon-tile svg {
  width: 24px;
  height: 24px;
}

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */
.footer {
  background: var(--navy-950);
  color: #aeb9d6;
  padding-top: var(--space-10);
}

.footer__grid {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--space-6);
  }
}

.footer__brand p {
  color: #9aa7c8;
  margin-top: var(--space-4);
  max-width: 280px;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.footer__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--white);
  margin-bottom: var(--space-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__links a {
  color: #9aa7c8;
  font-size: var(--fs-sm);
  transition: color var(--t-fast) var(--ease);
}

.footer__links a:hover {
  color: #7dd3a8;
}

.footer__socials {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.footer__social {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c3cde8;
  transition: all var(--t-fast) var(--ease);
}

.footer__social:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--white);
}

.footer__social svg {
  width: 18px;
  height: 18px;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
  font-size: var(--fs-sm);
  color: #8a97b8;
}

@media (min-width: 640px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__legal {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
}

.footer__legal a {
  color: #8a97b8;
  font-size: var(--fs-sm);
}

.footer__legal a:hover {
  color: #7dd3a8;
}

/* ------------------------------------------------------------------ */
/* Form tips (helper callouts inside forms)                             */
/* ------------------------------------------------------------------ */
.form-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  color: var(--navy-700);
  font-size: var(--fs-sm);
}

.form-tip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--navy-500);
}

/* The tip's own colour is the same navy the global `a` rule uses, so a link
   inside one is invisible without this. */
.form-tip a {
  color: var(--navy-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-tip a:hover {
  color: var(--navy-600);
}

.form-tip code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Skeleton (loading placeholders — used briefly by JS)                 */
/* ------------------------------------------------------------------ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--navy-50);
  border-radius: var(--radius-sm);
  color: transparent;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: shimmer 1.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Misc helpers                                                         */
/* ------------------------------------------------------------------ */
.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin-block: var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--green-500);
  border-radius: 50%;
  animation: tp-spin 0.8s linear infinite;
}

@keyframes tp-spin {
  to { transform: rotate(360deg); }
}
/* ------------------------------------------------------------------ */
/* Worker photo evidence                                                */
/*                                                                       */
/* Two ways in, one path out: clicking the drop zone opens the file    */
/* manager, dropping onto it stages the same files. Both assign to    */
/* the same input, so there is one set of limits and one upload.      */
/*                                                                       */
/* Mobile first: the drop target is sized for a thumb. It is not a    */
/* camera button - the input deliberately carries no `capture`         */
/* attribute, because capture="environment" makes a mobile browser    */
/* open the camera and suppress the file manager, so a photo task on  */
/* a phone could never reach the files at all.                        */
/* ------------------------------------------------------------------ */
.photo-request { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: 10px; }
.photo-request li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; }
.photo-request__n {
  flex: 0 0 24px; height: 24px; border-radius: 999px;
  background: var(--navy-50); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; margin-top: 1px;
}
.photo-requirement { font-size: .9rem; color: var(--text-2); background: var(--navy-50); border-radius: 10px; padding: 12px 14px; margin: var(--space-4) 0; }

/* The drop target, and the thing the worker clicks to reach their file manager.
   Sized for a thumb on a phone first; the dashed border is the only thing that
   reads as a target at that size. */
.photo-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 148px; padding: var(--space-5);
  border: 2px dashed var(--border); border-radius: 14px;
  background: var(--navy-50); text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.photo-drop:hover, .photo-drop:focus-within { border-color: var(--green-600); background: var(--green-50); }
.photo-drop .i { width: 30px; height: 30px; color: var(--green-600); }
.photo-drop span { font-size: .84rem; color: var(--text-3); max-width: 34ch; }

/* The file input itself, on every surface.
   This rule used to target #photo-input, an id the markup stopped using when the
   photo pipeline was generalised into submissions - so it had been matching
   nothing, and a raw browser file control was rendering underneath the drop
   zone on the submit-work page. Class-based so every picker is covered,
   including the one the applications row moves into its own form. */
.submission-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A visually hidden input is still focusable, so its focus ring would be a
   one-pixel outline around an invisible element. The label standing in for the
   button takes the ring instead, driven by the input's :focus-visible through
   the sibling combinator - the two are always adjacent in the row markup.

   Once the input has moved into an opened picker this no longer applies, because
   the trigger label and the input are no longer siblings. :focus-within on the
   drop zone picks up the focus from there, so the ring degrades to a border tint
   rather than disappearing. */
label[data-submit-trigger]:has(~ .submission-input:focus-visible) {
  outline: 3px solid var(--green-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Drag state for the drop zone. Real now: wireSubmissionPicker() assigns
   DataTransfer.files to the input, so a drop and a selection from the file
   manager take the identical path afterwards - same validation, same upload. */
.photo-drop.is-dragover {
  border-color: var(--green-600);
  background: var(--green-50);
}

/* The row itself is a drop target, so a worker can drag onto the job rather than
   onto a control inside it - the picker only exists once something has been
   dropped or clicked, and waiting for a click first is the wrong order when the
   files are already in their hand.

   The ring is inset because .list-rows sits in a .panel with a border radius: an
   outset one would be clipped at the corners by the first and last row, so the
   top row would show a partial outline and the bottom row none at all.

   Transition only on rows that can actually receive something, so hovering the
   rows that cannot does not imply they can. */
.list-row[data-app-drop] { transition: background .15s ease, box-shadow .15s ease; }
.list-row.is-dragover {
  background: var(--green-50);
  box-shadow: inset 0 0 0 2px var(--green-600);
}

/* The hint telling the worker the row takes a drop. Hidden where there is no
   hover-capable pointer, because on a phone "drag your files onto this row" is
   advice they have no way to act on - the button beside it is the whole story
   there, and the hint is just noise above it.

   display is set in the media query rather than outside it so the two orderings
   cannot be got backwards: the unprefixed rule is the one that has to win on a
   touch device, and `display: flex` outside the query would beat it. */
.list-row__drop-hint { display: none; }
@media (hover: hover) {
  .list-row__drop-hint { display: flex; align-items: center; gap: 6px; }
}

/* The picker opened inside an applications row. Sits under the row's actions,
   full width, so the requirement text and the chosen files have room to be
   read rather than being squeezed into the action column. */
.row-picker { width: 100%; margin-top: var(--space-4); }
.row-picker .submission-picker {
  background: var(--navy-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.row-picker .photo-requirement { margin: 0 0 var(--space-3); }
.row-picker .photo-drop { min-height: 108px; }
.row-picker .photo-request { margin: 0 0 var(--space-3); }

.photo-picks { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 6px; }
.photo-picks li { display: flex; align-items: center; gap: 8px; font-size: .87rem; background: var(--navy-50); border-radius: 8px; padding: 8px 10px; }
.photo-picks li .i { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; }
.photo-picks li span { margin-left: auto; color: var(--text-3); font-size: .8rem; }

.photo-status { margin: var(--space-3) 0 0; font-size: .88rem; color: var(--text-3); min-height: 1.2em; }
.photo-status.is-error { color: var(--error); font-weight: 600; }

.photo-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .9rem; background: var(--warning-bg); color: var(--warning);
  border-radius: 10px; padding: 12px 14px; margin: var(--space-3) 0 0;
}
.photo-note .i { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }

.photo-shots { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.photo-shot { background: var(--navy-50); border-radius: 10px; padding: 8px; }
.photo-shot img { width: 100%; height: 118px; object-fit: cover; border-radius: 7px; display: block; background: var(--navy-100); }
.photo-shot span { display: block; margin-top: 6px; font-size: .76rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Submitted work that is not an image. The server serves every one of these as
   an attachment, so there is no inline preview to show - a row with the file
   name, its detected type and its size, plus an explicit download. */
.submission-files { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 6px; }
.submission-file {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--navy-50); border-radius: 8px; padding: 8px 10px;
}
.submission-file .btn { flex: 0 0 auto; }
.submission-file__name {
  font-weight: 600; font-size: .87rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.submission-file__meta { margin-left: auto; color: var(--text-3); font-size: .78rem; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Notifications
   What the worker has been told about work they sent. The feed is the only
   surface in the dashboard reporting a decision they did not make themselves,
   so unread has to be visible at a glance without reading: an unread row is
   tinted and carries a leading marker, and read rows recede rather than
   disappearing - the history of being sent back is worth keeping visible.

   Only tokens that actually exist in design-system.css are used. --surface-2
   is referenced elsewhere in this file but is never defined, so anything built
   on it silently resolves to nothing.
   --------------------------------------------------------------------------- */

.notification-list {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: 8px;
}

.notification {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Unread is a left edge rather than a fill, so a long list still reads as a
   list: a tinted background on every unread row turns the page into a colour
   block and the titles stop being scannable. */
.notification.is-unread { border-left: 3px solid var(--info); }
.notification.is-unread .notification__title { font-weight: 700; }

.notification__link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  color: inherit; text-decoration: none;
}
a.notification__link:hover { background: var(--info-bg); }
/* No focus rule of its own: design-system.css already sets a :focus-visible
   outline in --green-500, and overriding it here with an undefined token would
   have left the row with no visible focus at all. */

.notification__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--info-bg); color: var(--info);
}
.notification__icon svg { width: 17px; height: 17px; }
.notification__icon--good { background: var(--success-bg); color: var(--success); }
.notification__icon--warn { background: var(--warning-bg); color: var(--warning); }
.notification__icon--plain { background: transparent; color: var(--text-3); }

.notification__body { flex: 1 1 auto; min-width: 0; }
.notification__title { font-size: .93rem; line-height: 1.35; }
.notification__text { margin: 3px 0 0; font-size: .86rem; color: var(--text-2); line-height: 1.5; }

/* Pushed to the far end rather than sitting under the text, and allowed to
   shrink, so a long body on a narrow screen pushes the timestamp out of the
   row's way instead of wrapping the whole card. */
.notification__when {
  flex: 0 0 auto; margin-left: auto;
  color: var(--text-3); font-size: .76rem; white-space: nowrap; padding-top: 2px;
}

/* The overview page's "Needs your attention" panel. Same icon treatment as the
   feed so a worker recognises the two as the same kind of thing. */
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; color: inherit; text-decoration: none;
  border-top: 1px solid var(--border);
}
.attention-list li:first-child .attention-item { border-top: 0; }
.attention-item:hover { background: var(--info-bg); }
.attention-item__body { flex: 1 1 auto; min-width: 0; display: block; }
.attention-item__title { display: block; font-weight: 600; font-size: .9rem; }
.attention-item__detail {
  display: block; margin-top: 2px; font-size: .83rem; color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.attention-item > svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-3); margin-top: 8px; }

@media (max-width: 560px) {
  .notification__link { flex-wrap: wrap; }
  .notification__when { margin-left: 44px; padding-top: 0; width: 100%; }
}