/* LiveMentorHub v109 — component corrections.

   An earlier draft of this sheet re-declared the shared components — panels,
   form grids, action rows, empty and error states — under one definition for all
   three class vocabularies (.card / .c107-* / .p108-* / .v106-*). Checking each
   class against the shipped stylesheets showed every one of them is already
   styled, and styled more specifically: styles_v107.css scopes to
   "#app .content" and styles_v108.css to "#app .content .p108", so unscoped
   re-declarations lose the cascade and never render. They would have been dead
   weight that only took effect in the edge case of markup appearing outside
   those scopes — the one place they would have caused a visual inconsistency
   rather than removed one.

   Colour unification is handled properly in styles_v109_tokens.css: the legacy
   variables now resolve to one contract, so those existing scoped rules already
   draw with a single palette. What remains here is the small set of things no
   other sheet covers.

   1. `.btn` in styles_v73.css sets geometry, radius and weight but neither
      background nor colour. A plain <button class="btn btn-sm"> — the
      "View details" control in the admin employee table, and the period tabs and
      dialog controls elsewhere — therefore fell through to the browser's default
      grey button. That is a defect in both themes, not only in dark.

   2. Buttons carry no colour literals for tools/build_dark_theme_v109.cjs to
      map, so their dark treatment cannot be generated and is stated here. */


/* ============================================================
   1. The unstyled base button
   ============================================================ */
.btn:not(.btn-primary):not(.btn-gold):not(.btn-danger):not(.btn-ghost):not(.btn-secondary) {
  background: var(--lmh-surface);
  color: var(--lmh-text);
  border-color: var(--lmh-line);
  cursor: pointer;
}
.btn:not(.btn-primary):not(.btn-gold):not(.btn-danger):not(.btn-ghost):not(.btn-secondary):hover:not(:disabled) {
  background: var(--lmh-surface-2);
  border-color: var(--lmh-line-strong);
}
.btn:not(:disabled) { cursor: pointer; }


/* ============================================================
   2. Buttons under the dark theme
   Specificity is raised by the :root[data-theme] prefix so these beat the
   !important declarations in styles_v74_premium.css.
   ============================================================ */
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-gold):not(.btn-danger):not(.btn-ghost),
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .p108-button:not(.p108-primary) {
  background: var(--lmh-surface-3) !important;
  color: var(--lmh-text) !important;
  border: 1px solid var(--lmh-line-strong) !important;
}
:root[data-theme="dark"] .btn:not(.btn-primary):not(.btn-gold):not(.btn-danger):not(.btn-ghost):hover:not(:disabled),
:root[data-theme="dark"] .btn-secondary:hover:not(:disabled),
:root[data-theme="dark"] .p108-button:not(.p108-primary):hover:not(:disabled) {
  background: var(--lmh-neutral-bg) !important;
}
:root[data-theme="dark"] .btn-ghost {
  background: transparent !important;
  color: var(--lmh-text-2) !important;
}

/* The primary fill is linear-gradient(--blue-600, --navy-700). Under dark both
   stops re-point to light values, which would strand the white label on a pale
   ground, so the gradient is replaced by the flat primary. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .p108-button.p108-primary {
  background: var(--lmh-primary) !important;
  border-color: var(--lmh-primary) !important;
  color: var(--lmh-text-on-fill) !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .btn-primary:hover:not(:disabled),
:root[data-theme="dark"] .p108-button.p108-primary:hover:not(:disabled) {
  background: var(--lmh-primary-hover) !important;
  filter: none !important;
}
:root[data-theme="dark"] .btn-gold {
  background: var(--lmh-warning) !important;
  border-color: var(--lmh-warning) !important;
  color: #1b1405 !important;                    /* dark label on the amber fill */
}
:root[data-theme="dark"] .btn-danger {
  background: var(--lmh-danger) !important;
  border-color: var(--lmh-danger) !important;
  color: #2a0c0e !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none !important; }
}


/* ============================================================
   3. Visually-hidden text, unscoped
   Both existing definitions are scoped — "#app .content .sr-only" in
   styles_v107.css and ".employee-request-list-controls .sr-only" in
   styles_v105.css — so a .sr-only label inside anything appended to <body>
   renders as visible text. That covers the command palette below and the
   .p108-overlay dialogs, which are also body-level.
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap !important;
  border: 0 !important;
}


/* ============================================================
   4. Command palette (command_palette_v109.js)
   ============================================================ */
.lmh-cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--lmh-overlay);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
}
.lmh-cmdk {
  width: min(640px, 100%);
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  background: var(--lmh-surface);
  border: 1px solid var(--lmh-line);
  border-radius: var(--lmh-r-lg);
  box-shadow: var(--lmh-shadow-3);
  overflow: hidden;
}
.lmh-cmdk-input {
  border: 0;
  border-bottom: 1px solid var(--lmh-line);
  background: var(--lmh-surface);
  color: var(--lmh-text);
  padding: 16px 18px;
  font: 400 16px/1.4 Inter, system-ui, sans-serif;
  outline: none;
}
.lmh-cmdk-input::placeholder { color: var(--lmh-text-3); }
.lmh-cmdk-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}
.lmh-cmdk-group {
  padding: 10px 12px 4px;
  font: 700 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lmh-text-3);
}
.lmh-cmdk-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: var(--lmh-r-sm);
  cursor: pointer;
  color: var(--lmh-text);
  font-size: 14px;
}
.lmh-cmdk-item small { color: var(--lmh-text-3); font-size: 11.5px; white-space: nowrap; }
.lmh-cmdk-item.active { background: var(--lmh-primary-tint); }
.lmh-cmdk-item.active small { color: var(--lmh-text-2); }
.lmh-cmdk-empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--lmh-text-2);
  font-size: 14px;
}
.lmh-cmdk-foot {
  display: flex;
  gap: 16px;
  padding: 9px 14px;
  border-top: 1px solid var(--lmh-line);
  background: var(--lmh-surface-2);
  color: var(--lmh-text-3);
  font-size: 11.5px;
}
.lmh-cmdk-foot kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-right: 3px;
  border: 1px solid var(--lmh-line-strong);
  border-radius: 5px;
  background: var(--lmh-surface);
  font: 600 11px/1.5 inherit;
  text-align: center;
}
@media (max-width: 560px) {
  .lmh-cmdk-overlay { padding: 6vh 10px 10px; }
  .lmh-cmdk-item small { display: none; }
}