/*
 * App styles on top of the reconstructed Copilot design system (copilot.css,
 * copied from design/copilot.css). Pages without a surviving mockup follow the
 * closest 2011 screencast frame in design/_source/screencast-frames/.
 */

/* ---------- Header sign-in form (2011 logged-out home) ---------- */
.cp-header-login {
  position: absolute; top: 12px; right: 20px;
  display: grid; grid-template-columns: auto 150px auto; gap: 4px 6px; align-items: center;
  font-weight: bold; font-size: 13px;
}
.cp-header-login label { text-align: right; }
.cp-header-login input[type=email],
.cp-header-login input[type=password] {
  width: 150px; font: 12px var(--cp-font); padding: 2px 4px; border: 1px solid #1e2c45;
}
.cp-header-login .cp-btn-pill { grid-column: 3; grid-row: 2; }
.cp-header-login .cp-header-login-help { grid-column: 3; grid-row: 1; }
.cp .cp-header-login a { color: #fff; }
.cp .cp-header-login a:hover { color: var(--cp-bronze); }

/* ---------- Small rounded button (2011 "Save Changes", "Sign In") ---------- */
.cp-btn-pill {
  display: inline-block; padding: 1px 10px; font: 11px/16px var(--cp-font); color: #222;
  background: linear-gradient(#fff, #e6e6e6); border: 1px solid #777; border-radius: 10px; cursor: pointer;
}
.cp-btn-pill:hover { background: linear-gradient(#fff, #f2f2f2); }

/* ---------- Flash messages ---------- */
.cp-flash {
  width: var(--cp-content-width); margin: 12px auto 0; padding: 8px 12px; border-radius: 4px;
  font-weight: bold; font-size: 12px;
}
.cp-flash.notice { background: #e4f6d8; border: 1px solid #a9d48b; color: #2f5f12; }
.cp-flash.alert { background: var(--cp-field-error-bg); border: 1px solid var(--cp-error-border); color: #8a1f1b; }
.cp-app .cp-flash { width: auto; margin: 10px 10px 0; }

/* ---------- Simple pages (2011 Account Settings layout) ---------- */
.cp-page { padding-top: 24px; }
.cp-page-title { margin: 0 0 14px; font: 21px/1.2 var(--cp-font-display); color: #222; }
.cp-panel {
  background: #f8f8f8; border: 1px solid #e3e3e3; border-top: 30px solid #e9e9e9; border-radius: 2px;
  padding: 18px 18px 24px; max-width: 900px;
}
.cp-panel p { margin: 0 0 14px; color: var(--cp-text-muted); }
.cp-field { margin-bottom: 14px; }
.cp-field label { display: block; margin-bottom: 3px; font-weight: bold; color: #333; }
.cp-field input { width: 220px; font: 13px var(--cp-font); padding: 4px 5px; border: 1px solid #999; }
.cp-field .field_with_errors input { background: var(--cp-field-error-bg); border-color: var(--cp-error-border); }
.cp-errors {
  margin: 0 0 14px; padding: 8px 12px 8px 28px; border: 1px solid var(--cp-error-border); border-radius: 4px;
  background: var(--cp-field-error-bg); color: #8a1f1b; font-weight: bold;
}

/* ---------- Header greeting ---------- */
.cp-usernav form { display: inline; }
.cp-usernav .cp-link-button {
  padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer;
}
.cp-usernav .cp-link-button:hover { color: var(--cp-bronze); }

/* ---------- Logbook ---------- */
.cp-logbook { padding: 0 10px 10px; overflow-x: auto; }
.cp-logbook-bar .count { color: var(--cp-text-muted); }
table.cp-grid tr.totals td:first-child { font-weight: bold; }
.cp-hero table.cp-grid { font-size: 9px; }