/**
 * Collab ERP Plugin — Frontend Styles
 */

/* ── Universal responsive foundation ──────────────────────────────────────
 * Loaded on every public-facing page (wp_enqueue_scripts), so these are
 * scoped to Collab's own class prefixes rather than bare element selectors
 * — a bare `img{max-width:100%}` here would also affect the surrounding
 * theme's own content on every page of the site, which isn't this
 * stylesheet's job to touch. */
.collab-app, .collab-app *,
.collab-dashboard, .collab-dashboard *,
.collab-register-app, .collab-register-app *,
.cfp-root, .cfp-root *,
[class^="collab-"], [class*=" collab-"] {
  box-sizing: border-box;
}
.collab-app img, .collab-dashboard img, .collab-register-app img,
.cfp-root img, [class^="collab-"] img {
  max-width: 100%;
  height: auto;
}
/* Any table inside a Collab public page scrolls horizontally on narrow
 * screens instead of forcing the viewport wider or truncating columns. */
.collab-app table, .collab-dashboard table, [class^="collab-"] table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Comfortable tap targets on touch devices for anything acting as a button. */
@media (max-width: 782px) {
  .collab-app button, .collab-app .button, .collab-app [role="button"],
  .cfp-root .cfp-btn, [class^="collab-"] button {
    min-height: 44px;
  }
}

/* Use theme variables if present, fallback to defaults */
.collab-register-app,
.collab-dashboard,
.collab-app {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.collab-register-app .form-control:focus,
.collab-dashboard input:focus {
  border-color: #388bff;
  box-shadow: 0 0 0 3px rgba(56,139,255,.15);
}

.collab-app aside nav a:hover {
  background: rgba(255,255,255,.04);
  color: #e8effe;
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(56,139,255,.2);
  border-top-color: #388bff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(56,139,255,.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(56,139,255,.9)); }
}

/* Responsive register */
@media (max-width: 700px) {
  .collab-register-app .grid-2,
  .collab-register-app .modules-grid { grid-template-columns: 1fr !important; }
  .collab-register-app .step-indicator .step-label { display: none; }
}

/* Dashboard responsive */
@media (max-width: 900px) {
  .collab-dashboard > div[style*="grid-template-columns:1.7fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* App responsive */
@media (max-width: 768px) {
  .collab-app { flex-direction: column !important; }
  .collab-app aside { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--c-border); }
  .collab-app aside nav { flex-direction: row !important; flex-wrap: wrap; gap: 4px !important; }
}

/* Module checkbox card */
.module-checkbox { display: block; }
.module-card { transition: all 0.2s ease; }

/* Plan option card */
.plan-option { display: block; }
.plan-card { transition: all 0.2s ease; }