/* Small, behavior-free UX cleanup for the stable main experience. */

/* Clear keyboard focus across every interactive control. */
button:focus-visible,
.navbtn:focus-visible,
.btn:focus-visible,
.linkbtn:focus-visible,
.icon-btn:focus-visible,
.modalclose:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

/* Keep modal close controls anchored to their own modal. */
.modal { position: relative; }
.modalclose { z-index: 2; }

/* Action rows should wrap rather than squeeze or overflow. */
.topbar > div[style*="display:flex"],
.card > div[style*="display:flex"] {
  flex-wrap: wrap;
}

.tablewrap {
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.tablewrap th { white-space: nowrap; }

/* Make the strongest visual treatment belong to the page's main action. */
.topbar .btn.gold,
.topbar .btn.primary {
  min-height: 40px;
}

/* Profile/header polish. Keep this deliberately compact. */
#topHeaderBar{gap:8px;min-height:58px;}
#userMenuBtn.profile-chip{display:grid!important;grid-template-columns:30px minmax(0,auto) 16px;align-items:center;gap:9px!important;max-width:260px;min-width:0;padding:5px 7px!important;border:1px solid transparent;border-radius:9px;line-height:1;transition:background .15s,border-color .15s;}
.profile-chip:hover{background:var(--bg);border-color:var(--line)!important;}
.profile-chip-avatar{width:30px!important;height:30px!important;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex!important;align-items:center;justify-content:center;font-size:12px!important;font-weight:700;flex:none;}
.profile-chip-copy{display:flex!important;flex-direction:column;min-width:0;line-height:1.15!important;}
.profile-chip-name{font-size:12.5px;font-weight:600;color:var(--ink);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-chip-sub{font-size:10.5px;font-weight:400;color:var(--ink-soft);margin-top:3px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-chip-chevron{width:16px;height:16px;color:var(--ink-soft);display:block;}
#sidebarLogoutBtn{padding:7px 9px;border-radius:8px;color:var(--ink-soft);}
#sidebarLogoutBtn:hover{background:var(--red-soft);color:var(--red);}
.profile-page{max-width:920px;}
.profile-hero{display:flex;align-items:center;gap:16px;padding:22px 24px;margin-bottom:16px;}
.profile-avatar-lg{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:22px;font-weight:700;flex:none;}
.profile-hero-copy{min-width:0;flex:1;}
.profile-eyebrow{text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);font-size:10.5px;font-weight:700;margin-bottom:5px;}
.profile-hero h2,.profile-grid h3{font-family:var(--display);margin:0;color:var(--ink);}
.profile-hero h2{font-size:21px;overflow-wrap:anywhere;}
.profile-grid h3{font-size:16px;}
.profile-meta{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:12px;color:var(--ink-soft);}
.profile-signout{margin-left:auto;flex:none;}
.profile-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:16px;align-items:start;}
.profile-security-card,.profile-info-card{padding:22px;}
.profile-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px;}
.profile-security-mark{width:36px;height:36px;border-radius:10px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-family:var(--mono);letter-spacing:2px;}
.profile-help{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:7px 0 18px;}
.profile-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.profile-message{font-size:12.5px;color:var(--red);min-height:18px;}
.profile-detail-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.profile-detail-row span{color:var(--ink-soft);}
.profile-detail-row strong{text-align:right;overflow-wrap:anywhere;}
.profile-info-note{margin-bottom:0;}

/* Users/team is intentionally separate from personal profile/security. */
.users-page{max-width:1000px;}
.users-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px;}
.users-toolbar h2{font-family:var(--display);font-size:21px;margin:0 0 4px;color:var(--ink);}
.users-toolbar p{margin:0;color:var(--ink-soft);font-size:13px;}
.users-table .pad{padding:0 16px;}
.users-table td{height:50px;}
.users-role{color:var(--ink-soft);font-size:12px;font-weight:600;}
.users-actions{gap:4px;}
.users-actions .icon-btn{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);}
.users-actions .icon-btn:hover{background:var(--bg);color:var(--ink);border-color:var(--accent);}
.users-actions .icon-btn.danger{color:var(--red);border-color:var(--red-soft);}
.users-actions .icon-btn.danger:hover{background:var(--red-soft);border-color:var(--red);}
.users-actions .icon-btn svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.users-modal{max-width:520px;}
.users-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;}

@media screen and (max-width: 820px) {
  /* Compact two-column item editing instead of one very long vertical stack. */
  .itemrow,
  .itemrow-pur {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
  }

  .itemrow > div:first-child,
  .itemrow-pur > div:first-child {
    grid-column: 1 / -1;
  }

  .itemrow > :last-child,
  .itemrow-pur > :last-child {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .itemrow input,
  .itemrow select,
  .itemrow-pur input,
  .itemrow-pur select {
    min-height: 42px;
  }

  /* Preserve compact page headers while making actions easy to tap. */
  .topbar > div[style*="display:flex"] {
    width: 100%;
    gap: 8px !important;
  }
  .topbar > div[style*="display:flex"] > .btn,
  .topbar > .btn {
    min-height: 42px;
  }

  /* Dense tables stay scrollable without shrinking text into unreadable columns. */
  .tablewrap table {
    min-width: 680px;
  }
  .tablewrap td,
  .tablewrap th {
    white-space: nowrap;
  }
  .tablewrap td:first-child,
  .tablewrap th:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
  }

  .modal {
    width: min(100%, 640px);
    padding: 22px 18px;
  }
  .profile-grid{grid-template-columns:1fr;}
  .users-toolbar{align-items:stretch;flex-direction:column;}
  .users-toolbar .btn{align-self:flex-start;}
}

@media screen and (max-width: 520px) {
  .itemrow,
  .itemrow-pur {
    grid-template-columns: 1fr !important;
  }
  .itemrow > div:first-child,
  .itemrow-pur > div:first-child,
  .itemrow > :last-child,
  .itemrow-pur > :last-child {
    grid-column: 1;
  }
  .tablewrap table { min-width: 620px; }
  #topHeaderBar{padding:7px 10px!important;flex-wrap:nowrap!important;}
  #userMenuBtn.profile-chip{max-width:min(230px,100%);}
  .profile-chip-name,.profile-chip-sub{max-width:145px;}
  .profile-hero{align-items:flex-start;padding:18px;flex-wrap:wrap;}
  .profile-signout{width:100%;margin-left:0;}
  .profile-security-card,.profile-info-card{padding:18px;}
  .profile-detail-row{flex-direction:column;gap:4px;}
  .profile-detail-row strong{text-align:left;}
  .users-table table{min-width:720px;}
}