/* Auth pages — Vastura palette (Phase B v2, 2026-05-01: switched from Ag green to Ltd slate+amber) */
:root { --v-g:#1F2937; --v-gd:#111827; --v-go:#B45309; --v-cr:#f7f5f1; --v-cd:#ece8e0; --v-bd:#d8d3ca; --v-t:#1F2937; --v-tm:#4b5563; --v-tl:#9ca3af; --v-rd:#a33833; }
* { box-sizing: border-box; }
body { margin:0; background:var(--v-cr); color:var(--v-t); font-family:Arial,sans-serif; font-size:14px; line-height:1.5; }
a { color: var(--v-go); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- login ----- */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(180deg, var(--v-cr) 0%, var(--v-cd) 100%); }
.auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--v-bd); border-radius: 12px; padding: 32px 28px; box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
.auth-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.auth-mark { width: 44px; height: 44px; border-radius: 8px; background: var(--v-g); color: var(--v-go); display: grid; place-items: center; font-family: Georgia, serif; font-size: 22px; font-weight: bold; }
.auth-title { font-family: Georgia, serif; color: var(--v-gd); font-size: 18px; font-weight: bold; }
.auth-sub { color: var(--v-tl); font-size: 12px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--v-tm); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.auth-form input { padding: 10px 12px; border: 1px solid var(--v-bd); border-radius: 6px; font-size: 14px; font-family: inherit; background: #fffdf7; }
.auth-form input:focus { outline: none; border-color: var(--v-go); }
.auth-btn { padding: 12px 16px; background: var(--v-g); color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.auth-btn:hover { background: var(--v-gd); }
.auth-err { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.auth-note { font-size: 11px; color: var(--v-tl); text-align: center; margin: 16px 0 0; line-height: 1.5; }
.auth-note a { color: var(--v-go); }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--v-tl); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.auth-divider:before, .auth-divider:after { content: ''; flex: 1; height: 1px; background: var(--v-bd); }
.auth-btn-ghost { background: #fff; color: var(--v-gd); border: 1px solid var(--v-gd); }
.auth-btn-ghost:hover { background: var(--v-cd); }
.auth-btn-shopify { background: #5e8e3e; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.auth-btn-shopify:hover { background: #4d7430; }
.auth-note-tight { margin: 6px 0 0; font-size: 11px; }

/* ----- guest demo banner (sits at top of admin pages when role=viewer + isGuest) ----- */
.guest-banner { background: linear-gradient(90deg, var(--v-go) 0%, #d97706 100%); color: #fff; padding: 8px 16px; font-size: 13px; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.guest-banner .guest-cta { background: var(--v-gd); color: #fff; padding: 4px 12px; border-radius: 14px; font-size: 12px; text-decoration: none; font-weight: 700; }
.guest-banner .guest-cta:hover { background: #000; text-decoration: none; }
.guest-banner .guest-tag { background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; font-size: 11px; letter-spacing: .5px; }

/* ----- top bar widget (used in admin.html — see admin-html-patch.md) -----
   Phase B v2 (2026-05-01): admin.html now defines its own .user-bar styles
   (always-visible, button-styled). These rules below are kept for any other
   page that still uses the legacy .user-bar markup. The role-pill colors
   were retuned: OWNER is now amber so it stands out against the slate top bar
   instead of vanishing into the background. */
.user-bar-legacy { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--v-tm); padding: 6px 12px; background: var(--v-cd); border-bottom: 1px solid var(--v-bd); }
.user-bar-legacy .user-name { font-weight: 600; color: var(--v-gd); }
.user-bar .user-role { background: var(--v-go); color: var(--v-gd); padding: 2px 8px; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.user-bar .user-role-owner  { background: var(--v-go); color: var(--v-gd); }
.user-bar .user-role-editor { background: var(--v-tm); color: #fff; }
.user-bar .user-role-viewer { background: var(--v-tl); color: #fff; }
.user-bar .user-spacer { flex: 1; }
.user-bar a { color: var(--v-go); }

/* ----- user mgmt page ----- */
.users-wrap, .audit-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.users-header h1, .audit-header h1 { color: var(--v-gd); font-family: Georgia, serif; margin: 0 0 4px; }
.users-sub, .audit-sub { color: var(--v-tm); margin: 0 0 6px; max-width: 800px; }
.users-meta { color: var(--v-tl); font-size: 12px; margin: 4px 0 16px; }
.users-meta code { background: var(--v-cd); padding: 1px 6px; border-radius: 4px; }
.users-panel { background: #fff; border: 1px solid var(--v-bd); border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.users-panel h2 { color: var(--v-gd); font-family: Georgia, serif; margin: 0 0 12px; font-size: 16px; }
.users-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-tbl thead { background: var(--v-cd); }
.users-tbl th { text-align: left; padding: 8px 10px; color: var(--v-gd); font-size: 12px; }
.users-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--v-bd); }
.users-empty { color: var(--v-tl); font-style: italic; text-align: center; padding: 18px; }
.users-role-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #fff; }
.users-role-owner  { background: var(--v-go); color: var(--v-gd); }
.users-role-editor { background: var(--v-g); }
.users-role-viewer { background: var(--v-tl); }
.users-steps { padding-left: 20px; line-height: 1.7; }
.users-steps code { background: var(--v-cd); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* ----- audit log ----- */
.audit-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.audit-toolbar input { flex: 1 1 200px; padding: 6px 10px; border: 1px solid var(--v-bd); border-radius: 5px; font-size: 13px; }
.audit-toolbar select { padding: 6px 8px; border: 1px solid var(--v-bd); border-radius: 5px; }
.audit-list { max-height: 600px; overflow-y: auto; border: 1px solid var(--v-bd); border-radius: 6px; }
.audit-row { display: grid; grid-template-columns: 150px 200px 140px 1fr 1fr; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--v-bd); font-size: 12px; align-items: center; }
.audit-row:nth-child(even) { background: #fafaf5; }
.audit-time { color: var(--v-tl); font-family: monospace; }
.audit-user { color: var(--v-gd); font-weight: 600; }
.audit-role { background: var(--v-cd); color: var(--v-tm); padding: 1px 5px; border-radius: 8px; font-size: 9px; text-transform: uppercase; margin-left: 4px; font-weight: 600; }
.audit-action { font-family: monospace; color: var(--v-go); font-weight: 600; }
.audit-target { color: var(--v-tm); font-family: monospace; word-break: break-all; }
.audit-detail { color: var(--v-tl); font-size: 11px; }

.btn { padding: 6px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.btn-secondary { background: #fff; color: var(--v-gd); border-color: var(--v-gd); }
.btn-secondary:hover { background: var(--v-cd); }