/* Pebble Design System integration — Waymark
 * Based on Pebble v0.2 semantic-token and component contracts.
 * Existing Waymark classes are preserved; Pebble becomes the visual contract layer.
 */
:root {
  --color-page: #eef0ec;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-subtle: #f6f6f4;
  --color-text-primary: #1c2333;
  --color-text-secondary: #5a6070;
  --color-text-inverse: #ffffff;
  --color-border: #d8dbd5;
  --color-border-strong: #aeb4ab;
  --color-brand-accent: #ffa1bd;
  --color-brand-accent-alt: #6ab796;
  --color-focus: #005ea8;
  --color-success: #00703c;
  --color-warning: #a15c00;
  --color-error: #d4351c;
  --radius-control: 8px;
  --radius-surface: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --shadow-surface: 0 1px 3px rgba(0,0,0,.08);
}

/* Foundation mapping: existing app tokens consume Pebble semantics. */
:root {
  --bg: var(--color-page);
  --page-bg: var(--color-page);
  --white: var(--color-surface);
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --border: var(--color-border);
  --brand-accent: var(--color-brand-accent);
  --brand-accent2: var(--color-brand-accent-alt);
}

/* Stable Button contract: actions use buttons, navigation remains links. */
button, .btn, .btn-main, .auth-btn, .card-action, .topbar-nav-link, .sb-link, .innertab-btn {
  font-family: inherit;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

.btn, .btn-main, .auth-btn {
  min-height: 40px;
  border-radius: var(--radius-control);
  font-weight: 700;
}

.btn-lime, .btn-main.lime, .auth-btn.primary {
  background: var(--color-brand-accent);
  color: var(--color-text-primary);
}

.btn-navy, .btn-main.navy {
  background: var(--brand-primary, #444549);
  color: var(--color-text-inverse);
}

.btn-outline, .auth-btn.secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}

/* Stable Input contract: labels stay visible; errors can be associated by id/aria-describedby. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .field input {
  border-color: var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus, .field input:focus {
  border-color: var(--color-focus);
  background: var(--color-surface);
}

label, .field label { color: var(--color-text-primary); }

/* Stable Alert contract: status is never conveyed by colour alone. */
.alert, .pebble-alert {
  border-left: 4px solid currentColor;
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
}
.alert.info { color: #155a8a; background: #eaf4fb; border-color: #155a8a; }
.alert.success, .alert.ok { color: var(--color-success); background: #e9f5ef; border-color: var(--color-success); }
.alert.warning { color: var(--color-warning); background: #fff4e5; border-color: var(--color-warning); }
.alert:not(.info):not(.success):not(.ok):not(.warning) { color: var(--color-error); background: #fcebea; border-color: var(--color-error); }

/* Stable Auth Status contract. */
.pebble-auth-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}
.pebble-auth-status__icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e9f5ef; color: var(--color-success);
  font-weight: 900; flex: 0 0 auto;
}
.pebble-auth-status__title { font-weight: 800; }
.pebble-auth-status__body { color: var(--color-text-secondary); margin-top: 2px; }

/* Surface contract. */
.card, .stat-card, .app-banner {
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-surface);
  background: var(--color-surface);
}
.card-head { background: var(--color-surface-subtle); }

/* Keyboard and motion requirements. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Pebble theme contract. */
[data-theme="dark"] {
  --color-page: #15181d;
  --color-surface: #20252c;
  --color-surface-raised: #282e36;
  --color-surface-subtle: #252b33;
  --color-text-primary: #f5f7f9;
  --color-text-secondary: #b8c0ca;
  --color-text-inverse: #15181d;
  --color-border: #3c444e;
  --color-border-strong: #65707d;
  --color-focus: #8ec8ff;
  --color-success: #70d7a4;
  --color-warning: #f2bd72;
  --color-error: #ff8d7e;
}

@media (prefers-color-scheme: dark) {
  html[data-pebble-theme="system"] {
    --color-page: #15181d;
    --color-surface: #20252c;
    --color-surface-raised: #282e36;
    --color-surface-subtle: #252b33;
    --color-text-primary: #f5f7f9;
    --color-text-secondary: #b8c0ca;
    --color-border: #3c444e;
    --color-border-strong: #65707d;
    --color-focus: #8ec8ff;
  }
}

/* Authentication page: keep Pebble component language while retaining the existing flow. */
body.pebble-auth-page .card { box-shadow: var(--shadow-surface); }
body.pebble-auth-page .step-title { letter-spacing: 0; }
body.pebble-auth-page .btn-main, body.pebble-auth-page .auth-btn { border-radius: var(--radius-control); }

/* Waymark login transition overlay starts hidden; the auth-status contract
   must not make it capture pointer events before .show is applied. */
body.pebble-auth-page .login-success.pebble-auth-status { display: none; pointer-events: none; }
body.pebble-auth-page .login-success.pebble-auth-status.show { display: flex; pointer-events: auto; }


/* Waymark application-management refinements */
.generate-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.app-section{margin-top:16px;padding:16px;background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-surface)}
.app-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.app-section-title{font-weight:800;font-size:13px}
.api-identity-list{display:grid;gap:8px;margin-top:12px}
.api-identity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-control)}
.pebble-tag{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface-subtle);font-size:10px;font-weight:800;letter-spacing:.2px}
.pebble-tag-danger{color:var(--color-error);border-color:#e7b9b1;background:#fff5f3}

/* Pebble Studio-style workspace navigation: lives inside the same card as the
   content below it (not a separate floating panel), matching the reference. */
.adminnav{
  flex-shrink:0;
  border:0;
  border-bottom:1px solid var(--color-border);
  background:var(--color-surface-subtle);
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}
.adminnav-inner{
  display:flex;align-items:center;gap:4px;padding:7px 8px;overflow-x:auto;scrollbar-width:none;
}
.adminnav-inner::-webkit-scrollbar{display:none}
.adminnav-group{display:contents}
.adminnav-label{display:none}
.sb-link{
  min-height:40px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:0 0 auto;padding:8px 13px;border:0;background:transparent;color:var(--color-text-secondary);
  border-radius:var(--radius-control);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;
}
.sb-link:hover{color:var(--color-text-primary);background:var(--color-surface)}
.sb-link.active{color:var(--color-text-primary);background:var(--color-surface);box-shadow:var(--shadow-surface)}
.sb-link svg,.sb-link span[id^="ic-"],.sb-link span[id^="plus-"]{
  width:20px;height:20px;min-width:20px;min-height:20px;flex:0 0 20px;display:inline-flex;align-items:center;justify-content:center;
}
.sb-link svg{width:20px;height:20px}

/* Use the full available width for management modals. */
.overlay .modal{width:min(1180px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px)}
.modal-body{padding:24px}

/* Navigation remains usable at handset widths: icons never collapse; labels progressively hide. */
@media(max-width:768px){
  body{padding:8px;gap:8px}
  .adminnav-inner{padding:6px;gap:2px}
  .sb-link{width:44px;padding:8px;gap:0}
  .sb-link .sb-label{display:none}
  .sb-link svg{width:22px;height:22px}
  .sb-link span[id^="ic-"]{width:22px;height:22px;min-width:22px;min-height:22px;flex-basis:22px}
  .app-section-head,.api-identity-row{align-items:flex-start;flex-direction:column}
  .generate-field{grid-template-columns:1fr}
  .overlay .modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
}


.admin-user-menu-wrap{position:relative}.admin-user-btn{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:4px;cursor:pointer;padding:3px;border-radius:999px}.admin-user-btn:hover{background:rgba(255,255,255,.08)}.admin-user-menu{display:none;position:absolute;right:0;top:44px;width:210px;background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:8px;z-index:50}.admin-user-menu.open{display:block}.admin-user-menu-head{padding:8px 9px;border-bottom:1px solid var(--color-border);margin-bottom:4px}.admin-user-menu-head strong,.admin-user-menu-head span{display:block}.admin-user-menu-head span{font-size:11px;color:var(--color-text-secondary);margin-top:2px}.admin-user-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px;border-radius:8px;color:var(--color-text-primary);font:600 13px inherit;cursor:pointer}.admin-user-menu button:hover{background:var(--color-surface-subtle)}.admin-user-menu button.danger{color:var(--color-error)}.admin-user-menu-version{padding:8px 9px 2px;margin-top:4px;border-top:1px solid var(--color-border);font-size:10px;color:var(--color-text-secondary)}