/* CKC unified action buttons — fits style.css (Verdana, #333) and optional ckc-modern */
:root {
  --ckc-btn-font: verdana, sans-serif;
  --ckc-btn-radius: 6px;
  --ckc-btn-pad-v: 3.5px;
  --ckc-btn-pad-h: 8px;
  --ckc-btn-gap: 6px;
  --ckc-btn-icon-size: 18px;
  --ckc-btn-primary: #314177;
  --ckc-btn-primary-hover: #253060;
  --ckc-btn-upload: #28a745;
  --ckc-btn-upload-hover: #218838;
  --ckc-btn-danger: #b91c1c;
  --ckc-btn-danger-hover: #991b1b;
  --ckc-btn-tool: #fff;
  --ckc-btn-tool-hover: #f3f4f6;
  --ckc-btn-tool-bg: #4b5563;
  --ckc-btn-tool-bg-hover: #374151;
}

/* Base button (links and buttons) — force light text so readable on blue/red/green */
.ckc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ckc-btn-gap);
  padding: var(--ckc-btn-pad-v) var(--ckc-btn-pad-h);
  font-family: var(--ckc-btn-font);
  font-size: 11pt;
  font-weight: bold;
  line-height: 1.2;
  color: #fff !important;
  background: var(--ckc-btn-primary);
  border: 1px solid transparent;
  border-radius: var(--ckc-btn-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, filter 0.15s ease, transform 0.08s ease;
  white-space: nowrap;
  vertical-align: middle;
}
.ckc-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.ckc-btn:focus {
  outline: 2px solid var(--ckc-btn-primary);
  outline-offset: 2px;
}
.ckc-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ckc-btn-icon-size);
  height: var(--ckc-btn-icon-size);
  flex-shrink: 0;
}
.ckc-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor; /* inherits button text color so icons stay light on blue/red/green */
}
.ckc-btn__label {
  display: inline;
  color: #fff !important;
}

/* Icon-only: hide label, smaller size (40–50% less wide, 20% less tall) */
.ckc-btn--icon-only .ckc-btn__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ckc-btn--icon-only {
  min-width: 20px;
  padding: 1px 6px;
}
.ckc-btn--icon-only .ckc-btn__icon {
  width: 16px;
  height: 16px;
}

/* Add (primary blue) */
.ckc-btn--add {
  background: var(--ckc-btn-primary);
  color: #fff !important;
}
.ckc-btn--add:hover {
  background: var(--ckc-btn-primary-hover);
  color: #fff !important;
}

/* Edit (tool / neutral) — white text on gray */
.ckc-btn--edit {
  background: var(--ckc-btn-tool-bg);
  color: #fff !important;
}
.ckc-btn--edit:hover {
  background: var(--ckc-btn-tool-bg-hover);
  color: #fff !important;
}

/* Delete (danger) */
.ckc-btn--delete {
  background: var(--ckc-btn-danger);
  color: #fff !important;
}
.ckc-btn--delete:hover {
  background: var(--ckc-btn-danger-hover);
  color: #fff !important;
}

/* Upload photos (green) */
.ckc-btn--upload {
  background: var(--ckc-btn-upload);
  color: #fff !important;
}
.ckc-btn--upload:hover {
  background: var(--ckc-btn-upload-hover);
  color: #fff !important;
}

/* Submit result (green, same as upload photos) */
.ckc-btn--submit {
  background: var(--ckc-btn-upload);
  color: #fff !important;
}
.ckc-btn--submit:hover {
  background: var(--ckc-btn-upload-hover);
  color: #fff !important;
}

/* Danger secondary (clear / unapprove) — orange background */
.ckc-btn--danger-secondary {
  background: #ea580c;
  color: #fff;
}
.ckc-btn--danger-secondary:hover {
  background: #c2410c;
  color: #fff;
}

/* Add multiple */
.ckc-btn--add-multiple {
  background: var(--ckc-btn-primary);
  color: #fff !important;
}
.ckc-btn--add-multiple:hover {
  background: var(--ckc-btn-primary-hover);
  color: #fff !important;
}

/* Previous / Next photo (icon-only in viewers) */
.ckc-btn--prev-photo,
.ckc-btn--next-photo {
  background: var(--ckc-btn-tool-bg);
  color: #fff !important;
}
.ckc-btn--prev-photo:hover,
.ckc-btn--next-photo:hover {
  background: var(--ckc-btn-tool-bg-hover);
  color: #fff !important;
}

/* Small spacing when buttons sit next to each other */
.ckc-btn + .ckc-btn {
  margin-left: 6px;
}

/* Tighter spacing for action columns (e.g. players list) */
.ckc-actions-tight .ckc-btn + .ckc-btn {
  margin-left: 2px;
}