/* FH LogiX — shared component classes.
 * Served at /static/components.css. Linked from platform templates + the
 * change-order & timesheet shells. lump-sum-audit keeps its local component
 * classes (they render inside React + htm); its tokens still align via
 * /static/design-tokens.css so the visual result matches.
 */

/* --- Cards / glass surfaces --------------------------------------------- */
.card,
.glass {
  background: var(--card-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.card-elev-2 {
  background: var(--card-bg-elev-2);
  border-color: var(--card-border-strong);
}

/* --- Buttons ----------------------------------------------------------- */
.btn-primary {
  background: linear-gradient(135deg, var(--teal) 0%, var(--cyan) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border-strong);
  box-shadow: 0 4px 14px var(--teal-glow);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--teal-glow);
}
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--teal-bright);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(45, 212, 191, 0.08);
  border-color: var(--card-border-strong);
}
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }

/* --- Inputs ----------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--teal-bright);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

/* --- Status badges ---------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.badge-info     { background: var(--info-bg);    color: var(--info);    border-color: rgba(34, 211, 238, 0.30); }
.badge-warn     { background: var(--warn-bg);    color: var(--warn);    border-color: rgba(229, 138, 26, 0.30); }
.badge-success  { background: var(--success-bg); color: var(--success); border-color: rgba(9, 158, 88, 0.30); }
.badge-error    { background: var(--error-bg);   color: var(--error);   border-color: rgba(243, 41, 62, 0.30); }

/* --- Page header (top nav with logo + user info) --------------------- */
.app-header {
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--card-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-bright);
  letter-spacing: -0.02em;
}
.app-header .brand img { height: 26px; width: auto; }

/* --- Typography helpers --------------------------------------------- */
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* --- Link ----------------------------------------------------------- */
a { color: var(--teal-bright); text-decoration: none; }
a:hover { text-decoration: underline; }