/* ==========================================================================
   StudApps shared design system
   Loaded by every app after Bootstrap 5 + Font Awesome. Keep selectors
   generic (sa-*) so any app can reuse them without extra markup coupling.
   ========================================================================== */

:root {
  --sa-primary: #5e35b1;
  --sa-primary-dark: #4527a0;
  --sa-primary-light: #7e57c2;
  --sa-accent: #00bfa5;
  --sa-bg: #f5f4fb;
  --sa-surface: #ffffff;
  --sa-border: #e3e0f2;
  --sa-text: #262135;
  --sa-text-muted: #6c6785;
  --sa-danger: #e53935;
  --sa-warning: #fb8c00;
  --sa-success: #2e7d32;
  --sa-radius: 0.75rem;
  --sa-shadow: 0 1px 3px rgba(38, 33, 53, 0.08), 0 1px 2px rgba(38, 33, 53, 0.06);
  --sa-shadow-lg: 0 8px 24px rgba(38, 33, 53, 0.12);
}

body {
  background-color: var(--sa-bg);
  color: var(--sa-text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Navbar ---- */
.sa-navbar {
  background: linear-gradient(90deg, var(--sa-primary-dark), var(--sa-primary));
  box-shadow: var(--sa-shadow);
}
.sa-navbar .navbar-brand { font-weight: 700; letter-spacing: 0.02em; }
.sa-navbar-logo { height: 1.75rem; width: 1.75rem; object-fit: cover; border-radius: 0.35rem; }
.sa-navbar-sep { opacity: 0.5; margin: 0 0.35rem; }
.sa-navbar-app { font-weight: 500; opacity: 0.95; }

/* ---- Footer ---- */
.sa-footer {
  color: var(--sa-text-muted);
  border-top: 1px solid var(--sa-border);
  margin-top: 3rem;
}
.sa-footer a { color: var(--sa-primary); text-decoration: none; }
.sa-footer a:hover { text-decoration: underline; }

/* ---- Cards ---- */
.sa-card {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  box-shadow: var(--sa-shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sa-card:hover { box-shadow: var(--sa-shadow-lg); }
.sa-card-clickable { cursor: pointer; }
.sa-card-clickable:hover { transform: translateY(-2px); }

/* ---- Buttons ---- */
.btn-sa-primary {
  background-color: var(--sa-primary);
  border-color: var(--sa-primary);
  color: #fff;
}
.btn-sa-primary:hover, .btn-sa-primary:focus {
  background-color: var(--sa-primary-dark);
  border-color: var(--sa-primary-dark);
  color: #fff;
}
.btn-outline-sa-primary {
  color: var(--sa-primary);
  border-color: var(--sa-primary);
}
.btn-outline-sa-primary:hover {
  background-color: var(--sa-primary);
  color: #fff;
}

/* ---- Badges / tags ---- */
.sa-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--sa-border);
  color: var(--sa-primary-dark);
  font-size: 0.75rem;
  font-weight: 600;
}
.sa-tag-accent { background: rgba(0, 191, 165, 0.15); color: #00695c; }

/* ---- Empty states ---- */
.sa-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--sa-text-muted);
}
.sa-empty i { font-size: 2.5rem; opacity: 0.35; margin-bottom: 1rem; display: block; }

/* ---- Forms ---- */
.form-label { font-weight: 600; font-size: 0.875rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--sa-primary-light);
  box-shadow: 0 0 0 0.2rem rgba(94, 53, 177, 0.15);
}

/* ---- Tables ---- */
.sa-table thead th {
  background: var(--sa-bg);
  border-bottom: 2px solid var(--sa-border);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sa-text-muted);
}

/* ---- Toasts (driven by app.js) ---- */
.sa-toast-stack {
  position: fixed;
  top: 4.5rem;
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(90vw, 360px);
}

/* ---- Skeleton loading ---- */
.sa-skeleton {
  background: linear-gradient(90deg, var(--sa-border) 25%, #f0eefa 37%, var(--sa-border) 63%);
  background-size: 400% 100%;
  animation: sa-skeleton-loading 1.4s ease infinite;
  border-radius: 0.5rem;
}
@keyframes sa-skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Utility ---- */
.sa-text-muted { color: var(--sa-text-muted) !important; }
.sa-kanban-col { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--sa-radius); }
.sa-kanban-card { cursor: grab; }
.sa-kanban-card.dragging { opacity: 0.5; }

@media print {
  .sa-navbar, .sa-footer, .no-print { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Branded login pages - compact card over a tool-specific gradient, with a
   large translucent icon watermark standing in for a themed photo/graphic.
   Each page sets --sa-login-c1/--sa-login-c2 (gradient) and --sa-login-icon
   (a Font Awesome solid glyph, e.g. '\f07b') on .sa-login-wrap.
   ========================================================================== */
.sa-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--sa-login-c1, var(--sa-primary)), var(--sa-login-c2, var(--sa-primary-dark)));
  position: relative;
  overflow: hidden;
}
.sa-login-wrap::before {
  content: var(--sa-login-icon, '\f005');
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  font-size: min(30vw, 26rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.1);
  right: -4rem;
  bottom: -5rem;
  pointer-events: none;
  transform: rotate(-8deg);
}
/* The card itself deliberately uses plain Bootstrap card/utility classes
   inline in each login.php (matching sa_linguist's login exactly - same
   max-width, border-radius, header band, spacing, fonts) rather than
   bespoke classes here, so every tool's login box looks identical in
   structure and only the gradient/icon differ. */