/* ============================================================================
   WebPros Design System — UI KIT (component primitives)
   shadcn-aligned primitive styling. Consumes the token layer. Components emit
   these class names; this file ships in the styles.css closure so consumers and
   the React components render identically.
   ========================================================================== */

/* ---- Reset (scoped, light) ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

.mono { font-family: var(--font-mono); font-feature-settings: normal; }

/* ---- Icon sizing -------------------------------------------------------- */
.icon { width: 16px; height: 16px; stroke-width: 1.75; flex: none; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }

/* ============================================================================
   BUTTON
   ========================================================================== */
.btn {
  --btn-h: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--btn-h); padding: 0 14px;
  font-family: var(--font-sans);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent; color: inherit; cursor: pointer;
  white-space: nowrap; user-select: none;
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring-shadow); border-color: var(--ring); }
.btn .icon { width: 16px; height: 16px; }

.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary { background: var(--surface); color: var(--surface-foreground); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--muted); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--muted); }

.btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); }
.btn-outline:hover { background: var(--muted); }

.btn-destructive { background: var(--destructive); color: var(--destructive-foreground); box-shadow: var(--shadow-xs); }
.btn-destructive:hover { filter: brightness(1.08); }

.btn-link { background: transparent; color: var(--primary); height: auto; padding: 0; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn-sm { --btn-h: 30px; padding: 0 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); gap: 5px; }
.btn-sm .icon { width: 14px; height: 14px; }
.btn-lg { --btn-h: 42px; padding: 0 20px; font-size: var(--text-md); border-radius: var(--radius-lg); }
.btn-icon { width: var(--btn-h); padding: 0; }
.btn-icon.btn-sm { width: 30px; }

/* ============================================================================
   BADGE / TAG / STATUS DOT
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px;
  font-family: var(--font-sans);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  border-radius: var(--radius-full); border: 1px solid transparent;
  white-space: nowrap;
}
.badge .icon { width: 12px; height: 12px; }
.badge-neutral { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.badge-primary { background: var(--primary-subtle); color: var(--primary-subtle-foreground); border-color: var(--primary-border); }
.badge-success { background: var(--success-subtle); color: var(--success-subtle-foreground); }
.badge-warning { background: var(--warning-subtle); color: var(--warning-subtle-foreground); }
.badge-destructive { background: var(--destructive-subtle); color: var(--destructive-subtle-foreground); }
.badge-info { background: var(--info-subtle); color: var(--info-subtle-foreground); }
.badge-solid { background: var(--primary); color: var(--primary-foreground); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.dot-success { background: var(--success); }
.dot-warning { background: var(--warning); }
.dot-destructive { background: var(--destructive); }
.dot-neutral { background: var(--muted-foreground); }
.dot-primary { background: var(--primary); }
.dot-info { background: var(--info); }

/* ============================================================================
   INPUT / SELECT / TEXTAREA / FIELD
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground); letter-spacing: var(--tracking-snug); }
.hint { font-size: var(--text-xs); color: var(--muted-foreground); }
.hint-error { color: var(--destructive); }

.input, .select, .textarea {
  width: 100%; height: 36px; padding: 0 12px;
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--foreground);
  background: var(--surface); border: 1px solid var(--input);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.textarea { height: auto; min-height: 76px; padding: 9px 12px; line-height: var(--leading-normal); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ring); box-shadow: var(--ring-shadow); }
.input[aria-invalid="true"], .field-error .input { border-color: var(--destructive); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--muted); color: var(--muted-foreground); cursor: not-allowed; }
.input-sm { height: 30px; font-size: var(--text-sm); padding: 0 10px; }

.select {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 36px; }
.input-group > .icon { position: absolute; left: 12px; color: var(--muted-foreground); pointer-events: none; }

/* ---- Checkbox / Radio (custom) ----------------------------------------- */
.check, .radio {
  appearance: none; width: 16px; height: 16px; flex: none; cursor: pointer;
  border: 1.5px solid var(--input); background: var(--surface);
  display: inline-grid; place-content: center;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.check { border-radius: 5px; }
.radio { border-radius: 50%; }
.check:hover, .radio:hover { border-color: var(--primary); }
.check:checked, .radio:checked { background: var(--primary); border-color: var(--primary); }
.check:checked::after {
  content: ""; width: 9px; height: 9px;
  background: var(--primary-foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.radio:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-foreground); }
.check:focus-visible, .radio:focus-visible { outline: none; box-shadow: var(--ring-shadow); }

/* ---- Switch ------------------------------------------------------------- */
.switch { appearance: none; position: relative; width: 34px; height: 20px; flex: none; cursor: pointer;
  background: var(--input); border-radius: var(--radius-full);
  transition: background var(--dur-2) var(--ease-out); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-out); }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(14px); }
.switch:focus-visible { outline: none; box-shadow: var(--ring-shadow); }

/* ============================================================================
   CARD
   ========================================================================== */
.card {
  background: var(--surface); color: var(--surface-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: var(--space-6); }
.card-header { padding: var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.card-desc { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; }
.card-body { padding: var(--space-6); }
.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-3); }

/* ============================================================================
   TABLE
   ========================================================================== */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: clip; background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.tbl thead th {
  text-align: left; font-weight: var(--weight-medium); font-size: var(--text-sm);
  color: var(--muted-foreground); padding: 10px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--dur-1) var(--ease-out); }
.tbl tbody tr:hover { background: var(--muted); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--foreground); }
[data-density="compact"] .tbl thead th,
[data-density="compact"] .tbl tbody td { padding-top: 7px; padding-bottom: 7px; }

/* ============================================================================
   TABS / SEGMENTED
   ========================================================================== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.tab {
  position: relative; padding: 9px 12px; font-size: var(--text-base);
  font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--muted-foreground);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  transition: color var(--dur-2) var(--ease-out);
}
.tab:hover { color: var(--foreground); }
.tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); }

.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--muted); border-radius: var(--radius-md); border: 1px solid var(--border); }
.segmented button { padding: 5px 12px; font-size: var(--text-sm); font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--muted-foreground); border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: all var(--dur-2) var(--ease-out); }
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* ============================================================================
   ALERT / CALLOUT
   ========================================================================== */
.alert { display: flex; gap: 12px; padding: 13px 15px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); }
.alert .icon { width: 18px; height: 18px; margin-top: 1px; }
.alert-title { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.alert-body { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; line-height: var(--leading-snug); }
.alert-info { background: var(--info-subtle); border-color: transparent; }
.alert-info .icon, .alert-info .alert-title { color: var(--info-subtle-foreground); }
.alert-success { background: var(--success-subtle); border-color: transparent; }
.alert-success .icon, .alert-success .alert-title { color: var(--success-subtle-foreground); }
.alert-warning { background: var(--warning-subtle); border-color: transparent; }
.alert-warning .icon, .alert-warning .alert-title { color: var(--warning-subtle-foreground); }
.alert-destructive { background: var(--destructive-subtle); border-color: transparent; }
.alert-destructive .icon, .alert-destructive .alert-title { color: var(--destructive-subtle-foreground); }

/* ============================================================================
   AVATAR
   ========================================================================== */
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-grid; place-content: center;
  background: var(--primary-subtle); color: var(--primary-subtle-foreground);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; font-size: var(--text-2xs); }
.avatar-lg { width: 40px; height: 40px; font-size: var(--text-lg); }

/* ============================================================================
   KBD / DIVIDER / PROGRESS / SKELETON / TOOLTIP / MENU
   ========================================================================== */
kbd, .kbd { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--muted); border: 1px solid var(--border); color: var(--muted-foreground); }
.divider { height: 1px; background: var(--border); border: 0; }
.progress { height: 6px; background: var(--muted); border-radius: var(--radius-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); border-radius: inherit; transition: width var(--dur-3) var(--ease-out); }
.skeleton { background: linear-gradient(90deg, var(--muted) 0%, var(--subtle) 50%, var(--muted) 100%);
  background-size: 200% 100%; animation: wp-skel 1.4s var(--ease-in-out) infinite; border-radius: var(--radius-sm); }
@keyframes wp-skel { to { background-position: -200% 0; } }

[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--n-900); color: var(--n-50); font-size: var(--text-xs); white-space: nowrap;
  padding: 5px 9px; border-radius: var(--radius-sm); z-index: var(--z-popover); pointer-events: none;
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] [data-tip]:hover::after { background: var(--n-200); color: var(--n-900); }

.menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 5px; min-width: 200px; }
.menu-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--radius-sm);
  font-size: var(--text-base); color: var(--foreground); cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: var(--muted); }
.menu-item .icon { color: var(--muted-foreground); }
.menu-sep { height: 1px; background: var(--border); margin: 5px -5px; }
.menu-label { padding: 6px 9px 4px; font-size: var(--text-xs); color: var(--muted-foreground); font-weight: var(--weight-medium); }

/* ============================================================================
   LAYOUT HELPERS
   ========================================================================== */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muted { color: var(--muted-foreground); }
.tnum { font-variant-numeric: tabular-nums; }