/* ============================================
   Ctech LMS — Computech brand overrides
   Layered on top of Horilla's stock styles.
   Brand source: autoforms/frontend/app/globals.css
   ============================================ */

:root {
  --computech-orange: #E8792B;
  --computech-orange-hover: #D16A20;
  --computech-orange-100: #FDEBE0;
  --computech-orange-200: #FBD4BC;
  --computech-orange-700: #B05518;
}

/* Selection + focus accents */
::selection { background-color: var(--computech-orange); color: #fff; }
:focus-visible { outline-color: var(--computech-orange) !important; }

/* Primary buttons (Horilla uses .oh-btn--primary) */
.oh-btn--primary,
.oh-btn--secondary {
  background-color: var(--computech-orange) !important;
  color: #fff !important;
  border-color: var(--computech-orange) !important;
}
.oh-btn--primary:hover, .oh-btn--primary:focus, .oh-btn--primary:focus-visible,
.oh-btn--secondary:hover, .oh-btn--secondary:focus, .oh-btn--secondary:focus-visible {
  background-color: var(--computech-orange-hover) !important;
  color: #fff !important;
  border-color: var(--computech-orange-hover) !important;
  text-decoration: none;
}

.oh-btn--primary-outline,
.oh-btn--secondary-outline {
  background-color: transparent !important;
  color: var(--computech-orange) !important;
  border: 1px solid var(--computech-orange) !important;
}
.oh-btn--primary-outline:hover,
.oh-btn--secondary-outline:hover {
  background-color: var(--computech-orange) !important;
  color: #fff !important;
}

/* Links */
a, a:visited { color: var(--computech-orange-700); }
a:hover { color: var(--computech-orange-hover); }

/* Sidebar active item — Horilla class names vary; broad-strokes override */
.oh-sidebar a.active,
.oh-sidebar__list-item--active,
.oh-sidebar__link--active {
  color: var(--computech-orange) !important;
  border-left-color: var(--computech-orange) !important;
}

/* Horilla badges/tags rendered with primary class */
.badge-primary, .oh-badge--primary {
  background-color: var(--computech-orange-100) !important;
  color: var(--computech-orange-700) !important;
}

/* Form focus ring */
input:focus, select:focus, textarea:focus,
.form-control:focus, .oh-input:focus {
  border-color: var(--computech-orange) !important;
  box-shadow: 0 0 0 3px rgba(232, 121, 43, 0.15) !important;
}

/* Employee cards: tighter look, cleaner truncation, less shout */
.oh-kanban-card {
  padding: 14px !important;
  border-radius: var(--radius-md, 10px) !important;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.oh-kanban-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
/* Employee name: bold, wraps up to 2 lines if very long.
   Most names fit on one line. */
.oh-kanban-card__title {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
/* Email + role: small, single line, ellipsis on overflow. Hovering surfaces
   the full string via the template's `title=` attribute. */
.oh-kanban-card__subtitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground-secondary, #5F6368);
  font-size: 0.75rem;
  line-height: 1.35;
  margin: 0;
  padding: 0;
}
.oh-kanban-card__subtitle + .oh-kanban-card__subtitle {
  /* tightening the stack between email → job title → status row */
  margin-top: 1px;
}
/* Grid: every card in a given row stretches to the tallest, AND the row
   itself gets a minimum baseline so short cards don't collapse. Result:
   all cards on a page look uniformly sized. */
.oh-layout--grid-3, .oh-kanban {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.oh-kanban-card {
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.oh-kanban-card__details {
  min-width: 0;   /* required so flex children can ellipsis */
  flex: 1 1 auto;
  overflow: hidden;
}
/* Avatar: subtle background ring so the silhouette doesn't feel naked */
.oh-kanban-card__profile-image {
  background-color: #F1F3F4;
  border-radius: 50%;
  padding: 2px;
}
/* "Online/Offline" status dot row: nudge spacing */
.oh-kanban-card__details .oh-dot {
  vertical-align: middle;
}