/**
 * Global chip-style buttons (Team Overview mini-chip / CORRECT pattern).
 * Load AFTER page inline styles so these rules win at equal specificity where needed.
 * Honors --or / --or2 (and light mode) for “colors may vary”.
 */

:root {
  --shaavir-chip-tr: transform 0.14s ease, box-shadow 0.18s ease, filter 0.15s ease,
    border-color 0.15s ease, opacity 0.15s ease;
}

/* ---- Base: native buttons + button inputs ---- */
button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt),
input[type='submit']:not(.shaavir-btn-exempt),
input[type='button']:not(.shaavir-btn-exempt),
input[type='reset']:not(.shaavir-btn-exempt) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
  line-height: 1.25;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--or, #f5a623) 55%, rgba(255, 255, 255, 0.14));
  color: #fffbeb;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--or, #f5a623) 38%, transparent) 0%,
    color-mix(in srgb, var(--or, #f5a623) 22%, rgba(15, 23, 42, 0.78)) 35%,
    color-mix(in srgb, var(--or2, #e8961a) 45%, rgba(15, 23, 42, 0.82)) 72%,
    rgba(15, 23, 42, 0.78) 100%
  );
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.32),
    0 10px 24px color-mix(in srgb, var(--or, #f5a623) 26%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.42),
    inset 0 -12px 24px rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: var(--shaavir-chip-tr);
}

button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt):hover,
input[type='submit']:not(.shaavir-btn-exempt):hover,
input[type='button']:not(.shaavir-btn-exempt):hover,
input[type='reset']:not(.shaavir-btn-exempt):hover {
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--or, #f5a623) 72%, rgba(253, 224, 71, 0.55));
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.34),
    0 12px 28px color-mix(in srgb, var(--or, #f5a623) 22%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -12px 24px rgba(0, 0, 0, 0.16);
}

button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt):active,
input[type='submit']:not(.shaavir-btn-exempt):active,
input[type='button']:not(.shaavir-btn-exempt):active,
input[type='reset']:not(.shaavir-btn-exempt):active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 5px 14px color-mix(in srgb, var(--or, #f5a623) 14%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.34),
    inset 0 -8px 18px rgba(0, 0, 0, 0.2);
}

button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt):focus-visible,
input[type='submit']:not(.shaavir-btn-exempt):focus-visible,
input[type='button']:not(.shaavir-btn-exempt):focus-visible,
input[type='reset']:not(.shaavir-btn-exempt):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--or, #f5a623) 70%, rgba(253, 224, 71, 0.45));
  outline-offset: 3px;
}

button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt):disabled,
input[type='submit']:not(.shaavir-btn-exempt):disabled,
input[type='button']:not(.shaavir-btn-exempt):disabled,
input[type='reset']:not(.shaavir-btn-exempt):disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

button.btn-sm:not(.shaavir-btn-exempt),
input.btn-sm:not(.shaavir-btn-exempt) {
  font-size: 10px;
  padding: 5px 11px;
}

/* ---- Semantic variants (class combos on <button>) ---- */
button.btn-p:not(.shaavir-btn-exempt),
button.btn-p.btn-sm:not(.shaavir-btn-exempt) {
  border-color: color-mix(in srgb, var(--or, #f5a623) 62%, rgba(255, 255, 255, 0.12));
  color: #fffbeb;
}

button.btn-d:not(.shaavir-btn-exempt),
button.btn-co:not(.shaavir-btn-exempt) {
  border-color: color-mix(in srgb, var(--co, #ef4444) 55%, rgba(255, 255, 255, 0.12));
  color: #fef2f2;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--co, #ef4444) 36%, transparent) 0%,
    color-mix(in srgb, var(--co, #ef4444) 22%, rgba(15, 23, 42, 0.78)) 40%,
    color-mix(in srgb, var(--co, #ef4444) 48%, rgba(15, 23, 42, 0.85)) 72%,
    rgba(15, 23, 42, 0.8) 100%
  );
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.32),
    0 10px 24px color-mix(in srgb, var(--co, #ef4444) 22%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -12px 24px rgba(0, 0, 0, 0.2);
}

button.btn-tl:not(.shaavir-btn-exempt) {
  border-color: color-mix(in srgb, var(--tl, #22c55e) 55%, rgba(255, 255, 255, 0.12));
  color: #ecfdf5;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--tl, #22c55e) 34%, transparent) 0%,
    color-mix(in srgb, var(--tl, #22c55e) 20%, rgba(15, 23, 42, 0.78)) 40%,
    color-mix(in srgb, var(--tl, #22c55e) 45%, rgba(15, 23, 42, 0.85)) 72%,
    rgba(15, 23, 42, 0.78) 100%
  );
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 10px 22px color-mix(in srgb, var(--tl, #22c55e) 22%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -12px 22px rgba(0, 0, 0, 0.18);
}

button.btn:not(.btn-p):not(.btn-d):not(.btn-co):not(.btn-tl):not(.shaavir-btn-exempt) {
  border-color: color-mix(in srgb, var(--tx2, #9ca3af) 35%, rgba(255, 255, 255, 0.12));
  color: var(--tx, #e8ecf0);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg3, #1b2230) 70%, rgba(255, 255, 255, 0.06)) 0%,
    color-mix(in srgb, var(--bg4, #242e3e) 85%, rgba(15, 23, 42, 0.75)) 55%,
    rgba(15, 23, 42, 0.82) 100%
  );
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 20px rgba(0, 0, 0, 0.18);
  text-shadow: none;
}

/* ---- Shell tabs (Attendance Board) ---- */
button.tab:not(.shaavir-btn-exempt) {
  font-weight: 600;
  letter-spacing: 0.02em;
}

button.tab.active:not(.shaavir-btn-exempt) {
  color: #fff;
  border-color: rgba(253, 224, 71, 0.48);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--or, #f5a623) 38%, transparent),
    color-mix(in srgb, var(--or2, #e8961a) 24%, rgba(15, 23, 42, 0.35))
  );
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--or, #f5a623) 42%, transparent),
    0 4px 18px color-mix(in srgb, var(--or, #f5a623) 22%, transparent);
}

/* ---- PD/RD inner tab strip (.tb) ---- */
button.tb.active:not(.shaavir-btn-exempt) {
  color: #fff;
  border-color: rgba(253, 224, 71, 0.48);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--or, #f5a623) 36%, transparent),
    color-mix(in srgb, var(--or2, #e8961a) 22%, rgba(15, 23, 42, 0.32))
  );
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--or, #f5a623) 38%, transparent),
    0 4px 16px color-mix(in srgb, var(--or, #f5a623) 18%, transparent);
}

/* ---- Header chrome (Attendance Board) ---- */
.hdr .btn:not(.shaavir-btn-exempt),
.hdr .btn-p:not(.shaavir-btn-exempt),
.hdr .btn-d:not(.shaavir-btn-exempt) {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ---- Light mode (html.light-mode + body.light-mode for FileHub) ---- */
html.light-mode
  button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt),
html.light-mode input[type='submit']:not(.shaavir-btn-exempt),
html.light-mode input[type='button']:not(.shaavir-btn-exempt),
html.light-mode input[type='reset']:not(.shaavir-btn-exempt),
body.light-mode
  button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt),
body.light-mode input[type='submit']:not(.shaavir-btn-exempt),
body.light-mode input[type='button']:not(.shaavir-btn-exempt),
body.light-mode input[type='reset']:not(.shaavir-btn-exempt) {
  color: #422006;
  border-color: color-mix(in srgb, var(--or, #d97706) 50%, rgba(15, 23, 42, 0.12));
  background: linear-gradient(
    165deg,
    #fffbeb 0%,
    #fef3c7 32%,
    #fde68a 68%,
    #fcd34d 100%
  );
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--or2, #b45309) 32%, rgba(0, 0, 0, 0.12)),
    0 10px 22px color-mix(in srgb, var(--or, #d97706) 18%, transparent),
    inset 0 2px 0 #fff,
    inset 0 -10px 22px color-mix(in srgb, var(--or, #d97706) 12%, transparent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

html.light-mode
  button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt):hover,
html.light-mode input[type='submit']:not(.shaavir-btn-exempt):hover,
html.light-mode input[type='button']:not(.shaavir-btn-exempt):hover,
html.light-mode input[type='reset']:not(.shaavir-btn-exempt):hover,
body.light-mode
  button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt):hover,
body.light-mode input[type='submit']:not(.shaavir-btn-exempt):hover,
body.light-mode input[type='button']:not(.shaavir-btn-exempt):hover,
body.light-mode input[type='reset']:not(.shaavir-btn-exempt):hover {
  filter: brightness(1.03);
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--or2, #b45309) 36%, rgba(0, 0, 0, 0.1)),
    0 12px 26px color-mix(in srgb, var(--or, #d97706) 22%, transparent),
    inset 0 2px 0 #fff,
    inset 0 -10px 22px color-mix(in srgb, var(--or, #d97706) 14%, transparent);
}

html.light-mode
  button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt):active,
html.light-mode input[type='submit']:not(.shaavir-btn-exempt):active,
html.light-mode input[type='button']:not(.shaavir-btn-exempt):active,
html.light-mode input[type='reset']:not(.shaavir-btn-exempt):active,
body.light-mode
  button:not(.theme-toggle):not(.play-btn):not(.stop-btn):not(.ov-my-chip):not(.btn-ms):not(.btn-gg):not(.ai-modal-close):not(.client-btn):not(.proposal-btn):not(.shaavir-btn-exempt):active,
body.light-mode input[type='submit']:not(.shaavir-btn-exempt):active,
body.light-mode input[type='button']:not(.shaavir-btn-exempt):active,
body.light-mode input[type='reset']:not(.shaavir-btn-exempt):active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--or2, #b45309) 34%, rgba(0, 0, 0, 0.08)),
    0 5px 14px color-mix(in srgb, var(--or, #d97706) 14%, transparent),
    inset 0 2px 0 #fff,
    inset 0 -6px 14px color-mix(in srgb, var(--or, #d97706) 1%, transparent);
}

html.light-mode button.tab.active:not(.shaavir-btn-exempt),
body.light-mode button.tab.active:not(.shaavir-btn-exempt) {
  color: var(--or2, #b45309);
  background: rgba(254, 243, 199, 0.55);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2), 0 4px 16px rgba(245, 158, 11, 0.15);
}

html.light-mode button.tb.active:not(.shaavir-btn-exempt),
body.light-mode button.tb.active:not(.shaavir-btn-exempt) {
  color: var(--or2, #b45309);
  background: rgba(254, 243, 199, 0.55);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  button:not(.shaavir-btn-exempt),
  input[type='submit']:not(.shaavir-btn-exempt),
  input[type='button']:not(.shaavir-btn-exempt),
  input[type='reset']:not(.shaavir-btn-exempt) {
    transition: none;
  }
  button:not(.shaavir-btn-exempt):active,
  input[type='submit']:not(.shaavir-btn-exempt):active,
  input[type='button']:not(.shaavir-btn-exempt):active,
  input[type='reset']:not(.shaavir-btn-exempt):active {
    transform: none;
  }
}

/* sprints.html — #workspace-main gives ID specificity over the long generic button:not(...) rule */
#workspace-main .ws-header button.btn.btn-sm.ws-act-done:not(.shaavir-btn-exempt) {
  border-color: var(--gn);
  background: var(--gnd);
  color: var(--gn);
  text-shadow: none;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.28),
    0 8px 18px color-mix(in srgb, var(--gn, #22c55e) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 20px rgba(0, 0, 0, 0.14);
}
#workspace-main .ws-header button.btn.btn-sm.ws-act-pending:not(.shaavir-btn-exempt) {
  border-color: rgba(245, 158, 11, 0.45);
  background: var(--amd);
  color: var(--am);
  text-shadow: none;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.28),
    0 8px 18px rgba(245, 158, 11, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -10px 20px rgba(0, 0, 0, 0.12);
}
#workspace-main .ws-header button.btn.btn-sm.ws-act-closed:not(.shaavir-btn-exempt) {
  border-color: var(--tx4);
  background: var(--bg3);
  color: var(--tx2);
  text-shadow: none;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -8px 16px rgba(0, 0, 0, 0.12);
}
#workspace-main .section-row button.btn.btn-sm.sec-row-btn--active:not(.shaavir-btn-exempt) {
  border-color: rgba(91, 163, 245, 0.65);
  background: var(--bld);
  color: var(--bl);
  pointer-events: none;
  text-shadow: none;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.22),
    0 6px 16px color-mix(in srgb, var(--bl, #3b82f6) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 16px rgba(0, 0, 0, 0.1);
}
#workspace-main .section-row button.btn.btn-sm.sec-row-btn--done:not(.shaavir-btn-exempt) {
  border-color: var(--gn);
  background: var(--gnd);
  color: var(--gn);
  opacity: 0.9;
  text-shadow: none;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.26),
    0 8px 18px color-mix(in srgb, var(--gn, #22c55e) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -10px 18px rgba(0, 0, 0, 0.12);
}