/* ICON BUTTON SYSTEM — single source of truth, supersedes legacy-shim button rules
 * Use <button class="iconbtn iconbtn-md"> instead of generic .btn for icon-only triggers.
 *
 * Replaces fragmented button height definitions across:
 *   - static/css/app.css:200
 *   - static/css/v2/buttons.css:11
 *   - static/css/v2/legacy-shim.css:132
 *   - static/css/a11y.css:137
 *
 * Conventions:
 *   - WCAG 2.5.5 (mobile) compliant: minimum 44x44 touch target
 *   - Visual sizes: xs (24px), sm (32px), md (40px = default), lg (48px)
 *   - Mobile breakpoint forces 44x44 hit area regardless of visual size
 */

/* ---------- Base ---------- */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: var(--r-md, 8px);
  cursor: pointer;
  transition: var(--tr-colors, all .12s ease-out);
}

.iconbtn:hover { background: var(--bg-hover); border-color: var(--border-strong, var(--accent)); }
.iconbtn:active { transform: translateY(1px); }
.iconbtn:disabled { opacity: .5; cursor: not-allowed; }
.iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Size variants ---------- */
.iconbtn-xs { width: 24px; height: 24px; }
.iconbtn-xs svg { width: 14px; height: 14px; }
.iconbtn-sm { width: 32px; height: 32px; }
.iconbtn-sm svg { width: 16px; height: 16px; }
.iconbtn-md { width: 40px; height: 40px; }
.iconbtn-md svg { width: 18px; height: 18px; }
.iconbtn-lg { width: 48px; height: 48px; }
.iconbtn-lg svg { width: 22px; height: 22px; }

/* ---------- Color variants ---------- */
.iconbtn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.iconbtn-primary:hover { background: var(--accent-strong, var(--accent)); filter: brightness(1.1); }
.iconbtn-ghost { background: transparent; border-color: transparent; }
.iconbtn-ghost:hover { background: var(--bg-hover); }
.iconbtn-danger { color: var(--danger, var(--danger)); }
.iconbtn-danger:hover { background: var(--danger-bg, #fef2f2); border-color: var(--danger, var(--danger)); }

/* ---------- Mobile touch target — even xs/sm get 44x44 hit area via padding ---------- */
@media (pointer: coarse), (max-width: 768px) {
  .iconbtn-xs, .iconbtn-sm {
    position: relative;
  }
  .iconbtn-xs::before, .iconbtn-sm::before {
    content: '';
    position: absolute;
    inset: -10px;
    /* invisible hit area expansion */
  }
}

/* ---------- Tooltip on hover (data-tooltip attribute) ---------- */
.iconbtn[data-tooltip] { position: relative; }
.iconbtn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--card);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: var(--z-tooltip, 1500);
  pointer-events: none;
}

/* MIGRATION NOTES:
 * - Replace <button class="btn btn-icon"> with <button class="iconbtn iconbtn-md">
 * - Replace <button class="btn btn-sm btn-ghost"> for icons with <button class="iconbtn iconbtn-sm iconbtn-ghost">
 * - For tooltip: add data-tooltip="..." attribute
 * - For destructive: add iconbtn-danger
 * - This file OVERRIDES legacy button rules — load LAST in cascade
 */

/* WIRE-UP INSTRUCTIONS:
 * 1. Add the following line to static/index.html AFTER all other CSS <link> tags
 *    (it must load LAST so cascade overrides legacy rules):
 *
 *      <link rel="stylesheet" href="/css/v2/icon_button_system.css?v=1">
 *
 * 2. Wave 3 follow-up (DO NOT DO NOW):
 *    Remove icon button styles from static/css/v2/legacy-shim.css lines 132-140.
 *    Verify no regressions in:
 *      - Kanban card action buttons
 *      - Topbar quick-action icons
 *      - Modal close (X) buttons
 *      - Inline edit/delete row controls
 *
 * 3. Optional Wave 3 cleanup:
 *    - Audit static/css/app.css:200 for duplicate button height rules
 *    - Audit static/css/v2/buttons.css:11 for overlap with .iconbtn sizes
 *    - Audit static/css/a11y.css:137 for redundant focus-visible rules
 */