/* ──────────────────────────────────────────────────────────────────────────
   Globant ITX — shared design system
   Used by: boarding-dashboard.html
   Contains: brand tokens, typography, buttons, stat cards, form controls,
            filter selects. Component-specific styles (toolbars, modals,
            tables, sidebars) live in each page's own stylesheet.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand palette */
  --green:        #B5D100;
  --green-dark:   #8A9E00;
  --green-light:  #F5FAE0;
  --teal:         #00A99D;
  --teal-dark:    #006b66;
  --purple:       #7C3AED;
  --purple-dark:  #5B21B6;
  --red:          #DC2626;
  --orange:       #f59e0b;
  --blue:         #2563EB;

  /* Surfaces & text */
  --gray-bg:      #f4f6f8;
  --gray-border:  #d1d5db;
  --text:         #1a1a2e;
  --text-muted:   #6b7280;
  --white:        #ffffff;
  --modal-bg:     #ffffff;
}

body.dark {
  --gray-bg:      #111827;
  --gray-border:  #374151;
  --text:         #f9fafb;
  --text-muted:   #cbd5e1;
  --white:        #1f2937;
  --modal-bg:     #1f2937;
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--gray-bg);
  color: var(--text);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  box-sizing: border-box;
  line-height: 1.4;
}
.btn-green        { background: linear-gradient(135deg, #c4d900 0%, #8A9E00 100%); color: #fff; font-weight: 600; }
.btn-green:hover  { background: linear-gradient(135deg, #d4f000 0%, #a8bf00 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(181,209,0,0.45); }
.btn-green:active { transform: translateY(0) scale(0.97) !important; transition: transform 0.08s !important; box-shadow: none !important; }
.btn-outline      { background: rgba(255,255,255,0.72); backdrop-filter: blur(6px); color: var(--text); border-color: rgba(0,0,0,0.15); }
.btn-outline:hover{ border-color: #9ca3af; color: #374151; background: #f3f4f6; }
.btn-teal         { background: linear-gradient(135deg, #00A99D 0%, #006b66 100%); color: #fff; border-color: transparent; }
.btn-teal:hover   { background: linear-gradient(135deg, #00c4b6 0%, #00A99D 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,169,157,0.4); }
.btn-purple       { background: linear-gradient(135deg, #8b5cf6 0%, #5B21B6 100%); color: #fff; border-color: transparent; }
.btn-purple:hover { background: linear-gradient(135deg, #a78bfa 0%, #7C3AED 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.4); }
.btn-red          { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: #fff; border-color: transparent; }
.btn-red:hover    { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220,38,38,0.4); }

body.dark .btn-outline      { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28); color: var(--text); }
body.dark .btn-outline:hover{ border-color: rgba(255,255,255,0.3); color: var(--text); background: rgba(255,255,255,0.07); }

.btn-clear-filters {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--gray-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  height: 30px;
  font-family: inherit;
  white-space: nowrap;
}
.btn-clear-filters:hover { border-color: var(--green); color: var(--green-dark); }

/* ── STAT CARDS ─────────────────────────────────────────────────────────── */
.stat-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 12px;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--green);
}
.stat-card.lime::before   { background: var(--green); }
.stat-card.teal::before   { background: var(--teal); }
.stat-card.blue::before   { background: var(--blue); }
.stat-card.orange::before { background: var(--orange); }
.stat-card.red::before    { background: var(--red); }
.stat-card.purple::before { background: var(--purple); }

.stat-card-icon {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(181,209,0,0.12); color: #5a6300;
}
.stat-card.lime   .stat-card-icon { background: rgba(181,209,0,0.12); color: #5a6300; }
.stat-card.teal   .stat-card-icon { background: rgba(0,169,157,0.12); color: var(--teal); }
.stat-card.blue   .stat-card-icon { background: rgba(37,99,235,0.12); color: var(--blue); }
.stat-card.orange .stat-card-icon { background: rgba(245,158,11,0.14); color: #b45309; }
.stat-card.red    .stat-card-icon { background: rgba(220,38,38,0.12); color: var(--red); }
.stat-card.purple .stat-card-icon { background: rgba(124,58,237,0.12); color: var(--purple); }

.stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.stat-value { font-size: 24px; font-weight: 800; line-height: 1; }
.stat-sub   { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

.stat-card.clickable { cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, background 0.18s; user-select: none; }
.stat-card.clickable:hover:not(.stat-active) { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.stat-card.clickable:active { transform: scale(0.96) !important; transition: transform 0.08s; }

/* Pressed / active state — solid vibrant fill, inset shadow, slight sink */
.stat-card.stat-active {
  transform: translateY(1px) scale(0.97) !important;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s !important;
}
.stat-card.stat-active.lime   { background: linear-gradient(135deg, #637500, #9aaf00); border-color: #7a9000; box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.10); }
.stat-card.stat-active.teal   { background: linear-gradient(135deg, #006b63, #00897e); border-color: #007a72; box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.10); }
.stat-card.stat-active.blue   { background: linear-gradient(135deg, #1d4ed8, #3b82f6); border-color: #2563eb; box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.10); }
.stat-card.stat-active.orange { background: linear-gradient(135deg, #b45309, #f59e0b); border-color: #d97706; box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.10); }
.stat-card.stat-active.red    { background: linear-gradient(135deg, #991b1b, #dc2626); border-color: #b91c1c; box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.10); }
.stat-card.stat-active.purple { background: linear-gradient(135deg, #5b21b6, #7c3aed); border-color: #6d28d9; box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.10); }
/* Ensure text stays white on colored backgrounds */
.stat-card.stat-active .stat-label,
.stat-card.stat-active .stat-value,
.stat-card.stat-active .stat-sub { color: #fff; }
.stat-card.stat-active .stat-card-icon { background: rgba(255,255,255,0.22); color: #fff; }

body.dark .stat-card { background: rgba(28,33,51,0.75); border-color: rgba(255,255,255,0.08); }

/* ── FORM CONTROLS ──────────────────────────────────────────────────────── */
.form-control {
  padding: 8px 12px;
  border: 1px solid var(--gray-border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: var(--white);
  color: var(--text);
  transition: border-color 0.15s;
  width: 100%;
}
.form-control:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(181,209,0,0.15); }
.form-control:disabled { opacity: 0.55; cursor: not-allowed; background: var(--gray-bg); }

select.form-control {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
body.dark select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
textarea.form-control { min-height: 70px; resize: vertical; }

.filter-input, .filter-select {
  padding: 5px 8px;
  border: 1px solid var(--gray-border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--gray-bg);
  color: var(--text);
  transition: border-color 0.15s;
  height: 30px;
  box-sizing: border-box;
  font-family: inherit;
}
.filter-input:focus, .filter-select:focus { outline: none; border-color: var(--green); background: var(--white); }
.filter-input  { width: 220px; }
.filter-select {
  width: auto;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 24px;
  cursor: pointer;
}
body.dark .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}