/* SIPEKA 2.0 shared components. Requires tokens.css. */

.skip-link {
  position: absolute; left: var(--sp-4); top: -48px; z-index: 100;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
  background: var(--c-navy-900); color: #fff; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--sp-4); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--c-green-700); outline-offset: 2px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 600; line-height: 1; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--c-green-700); outline-offset: 2px; box-shadow: var(--ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }

.btn-primary { background: var(--c-green-700); color: #fff; }
.btn-primary:hover:not([disabled]) { background: var(--c-green-600); }

.btn-secondary { background: var(--c-surface); color: var(--c-navy-700); border-color: var(--c-line-strong); }
.btn-secondary:hover:not([disabled]) { background: var(--c-navy-50); border-color: var(--c-navy-600); }

.btn-ghost { background: transparent; color: var(--c-navy-700); padding: 0 var(--sp-2); min-height: 36px; }
.btn-ghost:hover { background: var(--c-navy-50); }

.btn .spinner { display: none; }
.btn[aria-busy="true"] .spinner { display: inline-block; }
.btn[aria-busy="true"] .btn-icon { display: none; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: sp-spin .7s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Forms */
.field { display: grid; gap: 6px; }
.field + .field { margin-top: var(--sp-4); }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  font-size: var(--fs-md); /* >=16px: no iOS auto-zoom */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: #8a94a6; }
.input:hover { border-color: var(--c-navy-600); }
.input:focus { outline: none; border-color: var(--c-green-700); box-shadow: var(--ring); }
.input[aria-invalid="true"] { border-color: var(--c-danger); }
.input-group { position: relative; }
.input-group .input { padding-right: 48px; }
.input-addon {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); cursor: pointer;
}
.input-addon:hover { color: var(--c-navy-700); background: var(--c-navy-50); }
.input-addon .icon-hide { display: none; }
.input-addon[aria-pressed="true"] .icon-show { display: none; }
.input-addon[aria-pressed="true"] .icon-hide { display: block; }

/* Alerts */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid;
  font-size: var(--fs-sm);
}
.alert svg { flex-shrink: 0; margin-top: 1px; }
.alert-danger { background: var(--c-danger-50); border-color: #f5c2bd; color: var(--c-danger); }
.alert-success { background: var(--c-green-50); border-color: #b3e2d3; color: var(--c-green-700); }

/* Images: deter casual save / open-in-new-tab. Real protection is server-side (media.php). */
.credential-renewal { border-top: 4px solid var(--c-green-700); }
.credential-renewal summary { cursor: pointer; padding: 8px 0; }
.credential-renewal summary .badge { margin-left: 8px; }
.renew-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; margin: 16px 0; background: var(--c-green-50); border: 1px solid #b3e2d3; border-radius: 12px; }
.renew-toolbar[hidden], .renew-table tr[hidden] { display: none; }
.renew-toolbar label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.renew-toolbar .input { width: auto; max-width: 100%; }
.renew-select-all, .renew-count { color: var(--c-green-700); }
.credential-renewal input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--c-green-700); vertical-align: middle; cursor: pointer; }
.renew-table tr.is-selected td { background: var(--c-green-50); }
.renew-table tr.is-selected td:first-child { box-shadow: inset 4px 0 var(--c-green-700); }
.renew-confirm { padding: 16px; background: #fff8e8; border: 1px solid #edcf89; border-radius: 12px; color: #715015; }
.renew-confirm label { cursor: pointer; line-height: 1.6; }

img.no-save {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}