/* MAKON UI v54 — Staff workspace + auth modal responsive polish
   2026-08-31. Loaded after existing project styles, intentionally scoped. */

:root {
  --makon-v54-green: #169b45;
  --makon-v54-green-strong: #0f8539;
  --makon-v54-lime: #99e43e;
  --makon-v54-ink: #17231a;
  --makon-v54-muted: #6f7d73;
  --makon-v54-border: rgba(29, 92, 49, .13);
  --makon-v54-panel: #fffdf8;
  --makon-v54-soft: #f7faf4;
  --makon-v54-shadow: 0 24px 70px rgba(34, 65, 40, .16);
}

/* ============================================================
   HOME AUTH / REGISTRATION MODAL
   ============================================================ */
body.home-page #authModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  width: 100% !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  padding: clamp(14px, 2.2vw, 28px) !important;
  background: rgba(12, 18, 13, .62) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  align-items: center !important;
  justify-content: center !important;
}

body.home-page #authModal[aria-hidden="true"] {
  display: none !important;
}

body.home-page #authModal[aria-hidden="false"] {
  display: flex !important;
}

body.home-page.makon-auth-open {
  overflow: hidden !important;
}

body.home-page #authModal .modal-content {
  position: relative !important;
  width: min(540px, calc(100vw - 28px)) !important;
  max-width: 540px !important;
  max-height: min(820px, calc(100dvh - 32px)) !important;
  margin: 0 auto !important;
  padding: 18px 20px 22px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 1px solid rgba(41, 92, 48, .12) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 95% 4%, rgba(153, 228, 62, .13), transparent 24%),
    rgba(255, 253, 249, .99) !important;
  color: var(--makon-v54-ink) !important;
  box-shadow: 0 32px 90px rgba(9, 24, 12, .30) !important;
  transform: none !important;
}

body.home-page #authModal .modal-content::-webkit-scrollbar { width: 7px; }
body.home-page #authModal .modal-content::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: rgba(65, 110, 71, .24);
}

body.home-page #authModal .modal-close {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  float: right !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 0 -42px auto !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(35, 74, 41, .10) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #26362a !important;
  box-shadow: 0 8px 24px rgba(22, 45, 26, .10) !important;
  font-size: 25px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body.home-page #authModal .modal-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: calc(100% - 50px) !important;
  min-height: 48px !important;
  margin: 0 50px 18px 0 !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(36, 81, 43, .08) !important;
  border-radius: 17px !important;
  background: rgba(243, 246, 240, .96) !important;
  backdrop-filter: blur(10px) !important;
}

body.home-page #authModal .modal-tabs button {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #3d4a40 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.home-page #authModal .modal-tabs button.active {
  background: linear-gradient(135deg, #9be841, #76d83a) !important;
  color: #142112 !important;
  box-shadow: 0 7px 18px rgba(92, 190, 48, .20) !important;
}

body.home-page #authModal .auth-form,
body.home-page #authModal .auth-form form {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.home-page #authModal .auth-form form {
  display: grid !important;
  gap: 13px !important;
}

body.home-page #authModal .auth-form label:not(.auth-agreement) {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #243228 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.home-page #authModal .auth-form input:not([type="checkbox"]),
body.home-page #authModal .auth-form select,
body.home-page #authModal .auth-form textarea {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border: 1px solid #d8dfd6 !important;
  border-radius: 13px !important;
  outline: none !important;
  background: #fff !important;
  color: #17231a !important;
  font: inherit !important;
  font-weight: 650 !important;
  box-shadow: inset 0 1px 1px rgba(20, 45, 24, .025) !important;
}

body.home-page #authModal .auth-form input:not([type="checkbox"]):focus,
body.home-page #authModal .auth-form select:focus,
body.home-page #authModal .auth-form textarea:focus {
  border-color: #76cf4a !important;
  box-shadow: 0 0 0 4px rgba(118, 207, 74, .14) !important;
}

body.home-page #authModal .auth-helper-text {
  margin: -3px 0 1px !important;
  color: #77817a !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

body.home-page #authModal .auth-role-links {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(61, 153, 60, .16) !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, rgba(153, 228, 62, .09), rgba(71, 178, 65, .035)) !important;
}

body.home-page #authModal .auth-role-links > span {
  grid-column: 1 / -1 !important;
  color: #6f796f !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body.home-page #authModal .auth-role-links a {
  min-width: 0 !important;
  min-height: 43px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(38, 108, 46, .12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #174822 !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.home-page #authModal .auth-agreement {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(110, 171, 54, .18) !important;
  border-radius: 15px !important;
  background: rgba(153, 228, 62, .065) !important;
  color: #3d493f !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}

body.home-page #authModal .auth-agreement input {
  width: 18px !important;
  height: 18px !important;
  margin: 1px 0 0 !important;
  accent-color: #75d13d !important;
}

body.home-page #authModal .auth-verification-step {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(24, 160, 121, .20) !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, rgba(24, 160, 121, .07), rgba(153, 228, 62, .05)) !important;
}

body.home-page #authModal .auth-verification-step[hidden] { display: none !important; }

body.home-page #authModal input[name="verification_code"] {
  height: 56px !important;
  text-align: center !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: .23em !important;
}

body.home-page #authModal .auth-bot-link {
  min-height: 43px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: rgba(18, 156, 118, .13) !important;
  color: #08765b !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.home-page #authModal .auth-status-text:empty { display: none !important; }

body.home-page #authModal .auth-form button[type="submit"].btn-primary,
body.home-page #authModal .auth-form form > button[type="submit"] {
  width: 100% !important;
  min-height: 50px !important;
  margin: 2px 0 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #1aa24b, #10873b) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(18, 147, 65, .25) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  appearance: none !important;
}

body.home-page #authModal .auth-form button[type="submit"]:hover {
  filter: brightness(1.035) !important;
}
body.home-page #authModal .auth-form button[type="submit"]:active {
  transform: translateY(1px) !important;
}
body.home-page #authModal .auth-form button[type="submit"]:disabled {
  opacity: .62 !important;
  cursor: wait !important;
}

/* Dark theme */
body.dark.home-page #authModal .modal-content,
body.dark-theme.home-page #authModal .modal-content {
  border-color: rgba(255,255,255,.08) !important;
  background:
    radial-gradient(circle at 95% 4%, rgba(153,228,62,.10), transparent 24%),
    rgba(27, 31, 27, .99) !important;
  color: #edf4eb !important;
}
body.dark.home-page #authModal .modal-tabs,
body.dark-theme.home-page #authModal .modal-tabs {
  border-color: rgba(255,255,255,.06) !important;
  background: rgba(18, 22, 18, .95) !important;
}
body.dark.home-page #authModal .auth-form label:not(.auth-agreement),
body.dark-theme.home-page #authModal .auth-form label:not(.auth-agreement) { color: #e5ede3 !important; }
body.dark.home-page #authModal .auth-form input:not([type="checkbox"]),
body.dark.home-page #authModal .auth-form select,
body.dark.home-page #authModal .auth-form textarea,
body.dark-theme.home-page #authModal .auth-form input:not([type="checkbox"]),
body.dark-theme.home-page #authModal .auth-form select,
body.dark-theme.home-page #authModal .auth-form textarea {
  border-color: rgba(255,255,255,.10) !important;
  background: #20251f !important;
  color: #f2f6f0 !important;
}
body.dark.home-page #authModal .auth-role-links a,
body.dark-theme.home-page #authModal .auth-role-links a {
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.05) !important;
  color: #bff18f !important;
}

/* ============================================================
   BUSINESS STAFF WORKSPACE
   JS adds semantic v54 classes at runtime so this remains robust
   even if the underlying staff module renders rows dynamically.
   ============================================================ */
.makon-staff-v54,
.makon-staff-v54 * { box-sizing: border-box; min-width: 0; }

.makon-staff-v54 {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.makon-staff-v54 h1,
.makon-staff-v54 h2 {
  margin: 0 !important;
  color: #17662f !important;
  font-size: clamp(27px, 2.2vw, 36px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

.makon-staff-v54 .makon-staff-subtitle-v54 {
  max-width: 620px !important;
  margin: 7px 0 0 !important;
  color: #687c6d !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.makon-staff-v54 .makon-staff-invite-primary-v54 {
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #17a148, #0d8739) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(18, 144, 62, .18) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: normal !important;
  text-align: center !important;
  cursor: pointer !important;
}

.makon-staff-v54 .makon-staff-tabs-v54 {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 14px !important;
  overflow: visible !important;
}

.makon-staff-v54 .makon-staff-tabs-v54 > * {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

.makon-staff-v54 .makon-staff-filter-v54 {
  min-height: 48px !important;
  width: 100% !important;
  padding: 0 14px !important;
  border: 1px solid #d8dfd6 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #243228 !important;
  font-size: 14px !important;
  outline: none !important;
}

.makon-staff-v54 .makon-staff-filter-v54:focus {
  border-color: #72ce49 !important;
  box-shadow: 0 0 0 4px rgba(114, 206, 73, .12) !important;
}

.makon-staff-table-shell-v54 {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  border-radius: 16px !important;
}

.makon-staff-table-v54 {
  width: 100% !important;
  min-width: 980px !important;
  table-layout: auto !important;
}

.makon-staff-table-v54 th,
.makon-staff-table-v54 td {
  vertical-align: middle !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.makon-staff-row-v54 {
  min-width: 980px !important;
}

.makon-staff-row-v54 > * {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.makon-staff-v54 img {
  max-width: 100% !important;
  object-fit: cover;
}

/* Invitation modal — desktop must always fit viewport and scroll inside. */
.makon-staff-modal-v54 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 110000 !important;
  width: 100% !important;
  height: 100dvh !important;
  padding: clamp(14px, 2vw, 28px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
}

.makon-staff-modal-v54 .makon-staff-modal-card-v54,
.makon-staff-modal-card-v54 {
  position: relative !important;
  width: min(980px, calc(100vw - 32px)) !important;
  max-width: 980px !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border: 1px solid rgba(38, 84, 44, .11) !important;
  border-radius: 24px !important;
  background: #fffdf8 !important;
  box-shadow: 0 32px 90px rgba(9, 27, 13, .28) !important;
  scrollbar-width: thin;
}

.makon-staff-modal-card-v54 form {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

.makon-staff-modal-card-v54 label:not(.makon-staff-permission-v54) {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: #324337 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.makon-staff-modal-card-v54 input:not([type="checkbox"]),
.makon-staff-modal-card-v54 select,
.makon-staff-modal-card-v54 textarea {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border: 1px solid #d8dfd6 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #1d2b21 !important;
  font: inherit !important;
}

.makon-staff-permissions-grid-v54 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
}

.makon-staff-permission-v54 {
  min-width: 0 !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(44, 105, 53, .13) !important;
  border-radius: 13px !important;
  background: #f9fbf6 !important;
  color: #334438 !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  overflow-wrap: anywhere !important;
}

.makon-staff-permission-v54 input[type="checkbox"] {
  flex: 0 0 19px !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  accent-color: #159b45 !important;
}

.makon-staff-submit-v54 {
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #18a149, #0d8739) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(17, 142, 60, .20) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

/* Tablet */
@media (max-width: 1180px) {
  .makon-staff-v54 .makon-staff-tabs-v54 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .makon-staff-permissions-grid-v54 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  body.home-page #authModal {
    padding: 8px !important;
    align-items: flex-end !important;
  }
  body.home-page #authModal .modal-content {
    width: 100% !important;
    max-width: none !important;
    max-height: 94dvh !important;
    padding: 15px 14px 20px !important;
    border-radius: 24px 24px 18px 18px !important;
  }
  body.home-page #authModal .auth-role-links { grid-template-columns: 1fr !important; }
  body.home-page #authModal .auth-role-links > span { grid-column: 1 !important; }

  .makon-staff-v54 h1,
  .makon-staff-v54 h2 { font-size: 28px !important; }
  .makon-staff-v54 .makon-staff-tabs-v54 {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .makon-staff-v54 .makon-staff-tabs-v54::-webkit-scrollbar { display: none; }
  .makon-staff-v54 .makon-staff-tabs-v54 > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 142px !important;
    scroll-snap-align: start;
  }
  .makon-staff-modal-v54 { padding: 8px !important; align-items: flex-end !important; }
  .makon-staff-modal-v54 .makon-staff-modal-card-v54,
  .makon-staff-modal-card-v54 {
    width: 100% !important;
    max-width: none !important;
    max-height: 94dvh !important;
    padding: 18px 14px 22px !important;
    border-radius: 24px 24px 16px 16px !important;
  }
  .makon-staff-permissions-grid-v54 { grid-template-columns: 1fr !important; }
}