/* HIRECRM Enterprise Interaction Polish
   UI-only layer for production-grade interaction details:
   - consistent hover/focus/active states;
   - loading/skeleton/empty/error states;
   - modal/drawer/toast stability;
   - denser table/form rhythm;
   - safer mobile interaction layout.
*/

:root {
  --eip-bg: #f8fafc;
  --eip-surface: #ffffff;
  --eip-soft: #fbfcfe;
  --eip-border: #e7ecf3;
  --eip-border-strong: #cbd5e1;
  --eip-text: #0f172a;
  --eip-muted: #64748b;
  --eip-accent: #2563eb;
  --eip-accent-hover: #1d4ed8;
  --eip-accent-soft: #eff6ff;
  --eip-danger: #dc2626;
  --eip-danger-soft: #fef2f2;
  --eip-warning: #b45309;
  --eip-warning-soft: #fffbeb;
  --eip-success: #047857;
  --eip-success-soft: #f0fdf4;
  --eip-focus: 0 0 0 3px rgba(37, 99, 235, .14);
  --eip-shadow-soft: 0 10px 28px rgba(15, 23, 42, .08);
}

/* 1. Universal interaction states for app content. */
.page-shell a,
.enterprise-page a,
.workspace-shell a,
.page-container a {
  text-decoration-thickness: .08em;
  text-underline-offset: 3px;
}

.page-shell a:focus-visible,
.enterprise-page a:focus-visible,
.workspace-shell a:focus-visible,
.page-container a:focus-visible,
.page-shell button:focus-visible,
.enterprise-page button:focus-visible,
.workspace-shell button:focus-visible,
.page-container button:focus-visible,
.page-shell input:focus-visible,
.enterprise-page input:focus-visible,
.workspace-shell input:focus-visible,
.page-container input:focus-visible,
.page-shell select:focus-visible,
.enterprise-page select:focus-visible,
.workspace-shell select:focus-visible,
.page-container select:focus-visible,
.page-shell textarea:focus-visible,
.enterprise-page textarea:focus-visible,
.workspace-shell textarea:focus-visible,
.page-container textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--eip-focus) !important;
}

/* 2. Buttons: stable visual hierarchy. */
.btn,
.button,
button:not(.sidebar *):not(.topbar *):not(.global-ai-widget *):not(.worker-ai-chat *) {
  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    transform .08s ease !important;
}

.btn:active,
.button:active,
button:not(.sidebar *):not(.topbar *):not(.global-ai-widget *):not(.worker-ai-chat *):active {
  transform: translateY(1px);
}

.btn[disabled],
.button[disabled],
button[disabled],
.btn.is-disabled,
.button.is-disabled {
  opacity: .62 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.btn-primary,
.button-primary,
button.btn-primary {
  background: var(--eip-accent) !important;
  border-color: var(--eip-accent) !important;
  color: #fff !important;
}

.btn-primary:hover,
.button-primary:hover,
button.btn-primary:hover {
  background: var(--eip-accent-hover) !important;
  border-color: var(--eip-accent-hover) !important;
}

.btn-secondary,
.btn-outline,
.button-secondary {
  background: #fff !important;
  border-color: var(--eip-border) !important;
  color: #334155 !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.button-secondary:hover {
  background: var(--eip-bg) !important;
  border-color: var(--eip-border-strong) !important;
  color: var(--eip-text) !important;
}

/* 3. Form states. */
.form-group,
.form-field,
.field,
.public-auth-field {
  min-width: 0;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-input,
.form-select,
.form-textarea {
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover,
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--eip-border-strong) !important;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--eip-danger) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}

.form-error,
.field-error,
.errorlist,
.invalid-feedback {
  color: var(--eip-danger) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin-top: 4px !important;
}

.form-help,
.field-help,
.helptext,
.helper-text {
  color: var(--eip-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* 4. Tables and registries: denser but readable. */
.table-card,
.table-container,
.table-responsive,
.platform-table-wrapper,
.registry-table-wrapper {
  background: var(--eip-surface) !important;
  border: 1px solid var(--eip-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

table thead th,
.data-table thead th,
.platform-table thead th,
.registry-table thead th {
  background: var(--eip-soft) !important;
  color: var(--eip-muted) !important;
  font-weight: 800 !important;
}

table tbody tr,
.data-table tbody tr,
.platform-table tbody tr,
.registry-table tbody tr {
  transition: background-color .12s ease;
}

table tbody tr:hover,
.data-table tbody tr:hover,
.platform-table tbody tr:hover,
.registry-table tbody tr:hover {
  background: var(--eip-bg) !important;
}

table tbody tr.is-selected,
.data-table tbody tr.is-selected,
.platform-table tbody tr.is-selected,
.registry-table tbody tr.is-selected {
  background: var(--eip-accent-soft) !important;
}

/* 5. Loading / skeleton states. */
.skeleton,
.loading-skeleton,
.skeleton-line,
[data-skeleton] {
  position: relative;
  overflow: hidden;
  background: #eaf0f7 !important;
  color: transparent !important;
  border-radius: 8px;
}

.skeleton::after,
.loading-skeleton::after,
.skeleton-line::after,
[data-skeleton]::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  animation: eip-skeleton 1.35s infinite;
}

@keyframes eip-skeleton {
  100% { transform: translateX(100%); }
}

.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request,
.is-loading .loading-indicator {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 6. Empty / error / warning states. */
.empty-state,
.empty-card,
.no-data,
[data-empty-state] {
  background: var(--eip-surface) !important;
  border: 1px dashed var(--eip-border) !important;
  color: var(--eip-muted) !important;
  box-shadow: none !important;
}

.alert,
.notice,
.callout,
.page-banner-warning {
  border-radius: 12px !important;
  box-shadow: none !important;
}

.alert-danger,
.alert-error,
.notice-danger,
.callout-danger {
  background: var(--eip-danger-soft) !important;
  border-color: #fecaca !important;
  color: var(--eip-danger) !important;
}

.alert-warning,
.notice-warning,
.callout-warning,
.page-banner-warning {
  background: var(--eip-warning-soft) !important;
  border-color: #fde68a !important;
  color: var(--eip-warning) !important;
}

.alert-success,
.notice-success,
.callout-success {
  background: var(--eip-success-soft) !important;
  border-color: #bbf7d0 !important;
  color: var(--eip-success) !important;
}

/* 7. Modals / drawers / toasts. */
.modal-backdrop,
.drawer-backdrop {
  background: rgba(15, 23, 42, .42) !important;
  backdrop-filter: blur(2px);
}

.modal,
.modal-content,
.dialog,
.drawer,
.drawer-panel {
  background: var(--eip-surface) !important;
  border: 1px solid var(--eip-border) !important;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .18) !important;
}

.modal-header,
.modal-footer,
.drawer-header,
.drawer-footer {
  background: var(--eip-surface) !important;
  border-color: var(--eip-border) !important;
}

.toast,
.toast-card,
.toast-item {
  background: var(--eip-surface) !important;
  border: 1px solid var(--eip-border) !important;
  color: var(--eip-text) !important;
  box-shadow: var(--eip-shadow-soft) !important;
  border-radius: 12px !important;
}

/* 8. AI surfaces final refinement. */
.ai-assistant-chat,
.global-ai-widget__panel,
.worker-ai-chat__panel {
  border-color: var(--eip-border) !important;
}

.ai-message__bubble {
  line-height: 1.45 !important;
}

.ai-assistant-composer textarea,
.global-ai-widget textarea,
.worker-ai-chat textarea {
  resize: none;
}

/* 9. Clickable cards. */
a.card,
.card[data-clickable],
.registry-card[data-clickable],
.dashboard-card[data-clickable],
.task-card,
.kanban-card {
  transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease !important;
}

a.card:hover,
.card[data-clickable]:hover,
.registry-card[data-clickable]:hover,
.dashboard-card[data-clickable]:hover,
.task-card:hover,
.kanban-card:hover {
  border-color: #bfdbfe !important;
  box-shadow: var(--eip-shadow-soft) !important;
}

a.card:active,
.card[data-clickable]:active,
.registry-card[data-clickable]:active,
.dashboard-card[data-clickable]:active,
.task-card:active,
.kanban-card:active {
  transform: translateY(1px);
}

/* 10. Mobile interaction hardening. */
@media (max-width: 768px) {
  .modal,
  .modal-content,
  .dialog {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 24px) !important;
  }

  .modal-body,
  .drawer-body {
    overflow: auto !important;
  }

  .toast-stack {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  .page-banner-warning {
    display: grid !important;
    gap: 8px !important;
  }

  .page-banner-warning .btn {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .btn,
  .button,
  button:not(.sidebar *):not(.topbar *):not(.global-ai-widget *):not(.worker-ai-chat *) {
    min-height: 38px !important;
  }

  .table-card,
  .table-container,
  .table-responsive {
    border-radius: 10px !important;
  }
}

/* Protected navigation surfaces. */
.sidebar,
.sidebar *,
.topbar,
.topbar *,
.global-search,
.global-search *,
.mobile-bottom-nav,
.mobile-bottom-nav * {
  text-rendering: auto;
}