/* ==========================================================================
   TEAM TRACKING DESIGN SYSTEM
   Teal Theme - v2.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Variables (Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* Primary - Teal */
  --tt-primary: #0d9488;
  --tt-primary-rgb: 13, 148, 136;
  --tt-primary-hover: #0f766e;
  --tt-primary-light: #14b8a6;
  --tt-primary-lighter: #5eead4;
  --tt-primary-subtle: #ccfbf1;
  --tt-primary-dark: #115e59;
  
  /* Override Bootstrap Primary */
  --bs-primary: #0d9488;
  --bs-primary-rgb: 13, 148, 136;
  --bs-link-color: #0d9488;
  --bs-link-hover-color: #0f766e;
  
  /* Primary subtle overrides */
  --bs-primary-bg-subtle: #ccfbf1;
  --bs-primary-text-emphasis: #115e59;
  --bs-primary-border-subtle: #5eead4;
  
  /* Secondary */
  --tt-secondary: #64748b;
  --tt-secondary-rgb: 100, 116, 139;
  
  /* Semantic Colors */
  --tt-success: #22c55e;
  --tt-success-rgb: 34, 197, 94;
  --tt-success-subtle: #dcfce7;
  --tt-warning: #f59e0b;
  --tt-warning-rgb: 245, 158, 11;
  --tt-warning-subtle: #fef3c7;
  --tt-danger: #ef4444;
  --tt-danger-rgb: 239, 68, 68;
  --tt-danger-subtle: #fee2e2;
  --tt-info: #3b82f6;
  --tt-info-rgb: 59, 130, 246;
  --tt-info-subtle: #dbeafe;
  
  /* Module Accent Colors */
  --tt-learning: #0d9488;
  --tt-pdi: #10b981;
  --tt-review: #8b5cf6;
  --tt-oneonone: #3b82f6;
  --tt-medals: #f59e0b;
  --tt-jobs: #6366f1;
  --tt-vacation: #06b6d4;
  
  /* Neutral */
  --tt-gray-50: #f8fafc;
  --tt-gray-100: #f1f5f9;
  --tt-gray-200: #e2e8f0;
  --tt-gray-300: #cbd5e1;
  --tt-gray-400: #94a3b8;
  --tt-gray-500: #64748b;
  --tt-gray-600: #475569;
  --tt-gray-700: #334155;
  --tt-gray-800: #1e293b;
  --tt-gray-900: #0f172a;
  
  /* Spacing */
  --tt-spacing-xs: 0.25rem;
  --tt-spacing-sm: 0.5rem;
  --tt-spacing-md: 1rem;
  --tt-spacing-lg: 1.5rem;
  --tt-spacing-xl: 2rem;
  
  /* Border Radius */
  --tt-radius-sm: 0.375rem;
  --tt-radius-md: 0.5rem;
  --tt-radius-lg: 0.75rem;
  --tt-radius-xl: 1rem;
  --tt-radius-full: 9999px;
  
  /* Shadows */
  --tt-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tt-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --tt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* --------------------------------------------------------------------------
   2. Bootstrap Button Overrides
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: #0d9488;
  --bs-btn-border-color: #0d9488;
  --bs-btn-hover-bg: #0f766e;
  --bs-btn-hover-border-color: #0f766e;
  --bs-btn-active-bg: #115e59;
  --bs-btn-active-border-color: #115e59;
  --bs-btn-disabled-bg: #0d9488;
  --bs-btn-disabled-border-color: #0d9488;
  --bs-btn-focus-shadow-rgb: 13, 148, 136;
}

.btn-outline-primary {
  --bs-btn-color: #0d9488;
  --bs-btn-border-color: #0d9488;
  --bs-btn-hover-bg: #0d9488;
  --bs-btn-hover-border-color: #0d9488;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0f766e;
  --bs-btn-active-border-color: #0f766e;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 13, 148, 136;
}

/* --------------------------------------------------------------------------
   3. Bootstrap Background & Text Overrides
   -------------------------------------------------------------------------- */

.bg-primary {
  background-color: #0d9488 !important;
}

.bg-primary-subtle {
  background-color: #ccfbf1 !important;
}

.text-primary {
  color: #0d9488 !important;
}

.text-bg-primary {
  background-color: #0d9488 !important;
  color: #fff !important;
}

.border-primary {
  border-color: #0d9488 !important;
}

/* --------------------------------------------------------------------------
   4. Links
   -------------------------------------------------------------------------- */

a {
  color: #0d9488;
}

a:hover {
  color: #0f766e;
}

/* Preserve other link colors */
a.text-muted { color: var(--bs-secondary-color) !important; }
a.text-danger { color: var(--bs-danger) !important; }
a.text-success { color: var(--bs-success) !important; }
a.text-warning { color: var(--bs-warning) !important; }
a.text-info { color: var(--bs-info) !important; }

/* --------------------------------------------------------------------------
   5. Form Focus States
   -------------------------------------------------------------------------- */

.form-control:focus,
.form-select:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}

.form-check-input:checked {
  background-color: #0d9488;
  border-color: #0d9488;
}

.form-check-input:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}

.form-switch .form-check-input:checked {
  background-color: #0d9488;
  border-color: #0d9488;
}

/* --------------------------------------------------------------------------
   6. Progress Bars
   -------------------------------------------------------------------------- */

.progress-bar {
  background-color: #0d9488;
}

.progress-bar.bg-primary {
  background-color: #0d9488 !important;
}

/* --------------------------------------------------------------------------
   7. Badges
   -------------------------------------------------------------------------- */

.badge.bg-primary {
  background-color: #0d9488 !important;
}

.badge.text-bg-primary {
  background-color: #0d9488 !important;
}

/* --------------------------------------------------------------------------
   8. Pagination
   -------------------------------------------------------------------------- */

.page-link {
  color: #0d9488;
}

.page-link:hover {
  color: #0f766e;
}

.page-item.active .page-link {
  background-color: #0d9488;
  border-color: #0d9488;
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}

/* --------------------------------------------------------------------------
   9. Nav & Tabs
   -------------------------------------------------------------------------- */

.nav-link {
  color: #0d9488;
}

.nav-link:hover,
.nav-link:focus {
  color: #0f766e;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #0d9488;
}

.nav-tabs .nav-link.active {
  color: #0d9488;
  border-bottom-color: #0d9488;
}

/* --------------------------------------------------------------------------
   10. Sidebar Override (Larkon)
   -------------------------------------------------------------------------- */

/* Light sidebar */
html[data-menu-color=light] {
  --bs-main-nav-bg: #f8fafc;
  --bs-main-nav-item-color: #64748b;
  --bs-main-nav-item-hover-color: #0d9488;
  --bs-main-nav-border-color: #e2e8f0;
}

/* Dark sidebar - Lighter, more modern look */
html[data-menu-color=dark] {
  --bs-main-nav-bg: #1e293b;
  --bs-main-nav-item-color: #94a3b8;
  --bs-main-nav-item-hover-color: #14b8a6;
  --bs-main-nav-border-color: #334155;
}

html[data-bs-theme=dark][data-menu-color=light] {
  --bs-main-nav-item-hover-color: #14b8a6;
}

/* Menu title styling */
.main-nav .menu-title {
  color: #64748b !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[data-menu-color=dark] .main-nav .menu-title {
  color: #64748b !important;
}

/* Nav link styling */
.main-nav .nav-link {
  border-radius: 0.5rem;
  margin: 0.125rem 0.75rem;
  transition: all 0.2s ease;
}

.main-nav .nav-link.active,
.main-nav .nav-link:hover {
  color: #0d9488 !important;
}

html[data-menu-color=dark] .main-nav .nav-link.active,
html[data-menu-color=dark] .main-nav .nav-link:hover {
  color: #14b8a6 !important;
  background: rgba(20, 184, 166, 0.1);
}

.main-nav .nav-link.active::before,
.main-nav .collapse.show + .nav-link::before {
  background-color: #0d9488 !important;
}

html[data-menu-color=dark] .main-nav .nav-link.active::before,
html[data-menu-color=dark] .main-nav .collapse.show + .nav-link::before {
  background-color: #14b8a6 !important;
}

/* Submenu active state */
.main-nav .sub-nav-link.active,
.main-nav .sub-nav-link:hover {
  color: #0d9488 !important;
}

html[data-menu-color=dark] .main-nav .sub-nav-link.active,
html[data-menu-color=dark] .main-nav .sub-nav-link:hover {
  color: #14b8a6 !important;
}

/* Logo box styling */
.main-nav .logo-box {
  border-bottom: 1px solid var(--bs-main-nav-border-color);
}

/* --------------------------------------------------------------------------
   11. Alerts
   -------------------------------------------------------------------------- */

.alert-primary {
  --bs-alert-bg: #ccfbf1;
  --bs-alert-border-color: #5eead4;
  --bs-alert-color: #115e59;
}

/* --------------------------------------------------------------------------
   12. List Groups
   -------------------------------------------------------------------------- */

.list-group-item.active {
  background-color: #0d9488;
  border-color: #0d9488;
}

.list-group-item-primary {
  background-color: #ccfbf1;
  color: #115e59;
}

/* --------------------------------------------------------------------------
   13. Tables
   -------------------------------------------------------------------------- */

.table-primary {
  --bs-table-bg: #ccfbf1;
  --bs-table-border-color: #5eead4;
  --bs-table-color: #115e59;
}

/* --------------------------------------------------------------------------
   14. Dropdowns
   -------------------------------------------------------------------------- */

.dropdown-item.active,
.dropdown-item:active {
  background-color: #0d9488;
}

/* --------------------------------------------------------------------------
   15. Accordion
   -------------------------------------------------------------------------- */

.accordion-button:not(.collapsed) {
  color: #0d9488;
  background-color: #ccfbf1;
}

.accordion-button:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}

/* --------------------------------------------------------------------------
   16. Custom Utility Classes
   -------------------------------------------------------------------------- */

/* Background Gradients */
.bg-gradient-primary {
  background: linear-gradient(135deg, #14b8a6, #0f766e) !important;
}

.bg-gradient-teal {
  background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
}

/* Module-specific gradients */
.bg-gradient-learning {
  background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
}

.bg-gradient-pdi {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
}

.bg-gradient-review {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6) !important;
}

.bg-gradient-oneonone {
  background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
}

.bg-gradient-medals {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
}

.bg-gradient-jobs {
  background: linear-gradient(135deg, #818cf8, #6366f1) !important;
}

.bg-gradient-vacation {
  background: linear-gradient(135deg, #22d3ee, #06b6d4) !important;
}

/* Card Variants */
.card-primary {
  border-top: 3px solid #0d9488;
}

.card-hover {
  transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--tt-shadow-lg);
}

/* Avatar Backgrounds */
.avatar-primary {
  background-color: #ccfbf1 !important;
  color: #0d9488 !important;
}

/* --------------------------------------------------------------------------
   17. Form Styles
   -------------------------------------------------------------------------- */

.form-card {
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-sm);
}

.form-card .card-body {
  padding: var(--tt-spacing-lg);
}

.form-section {
  margin-bottom: var(--tt-spacing-lg);
  padding-bottom: var(--tt-spacing-lg);
  border-bottom: 1px solid var(--tt-gray-200);
}

.form-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tt-gray-700);
  margin-bottom: var(--tt-spacing-md);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--tt-spacing-lg);
  border-top: 1px solid var(--tt-gray-200);
  margin-top: var(--tt-spacing-lg);
}

/* --------------------------------------------------------------------------
   18. Page Headers
   -------------------------------------------------------------------------- */

.page-header {
  margin-bottom: var(--tt-spacing-lg);
}

.page-header-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tt-gray-800);
  margin-bottom: 0.25rem;
}

.page-header-subtitle {
  color: var(--tt-gray-500);
  margin-bottom: 0;
}

.page-header-actions {
  display: flex;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   19. Status Badges
   -------------------------------------------------------------------------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--tt-radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.status-active {
  background-color: #dcfce7;
  color: #166534;
}

.status-inactive {
  background-color: #f1f5f9;
  color: #475569;
}

.status-pending {
  background-color: #fef3c7;
  color: #92400e;
}

.status-completed {
  background-color: #dcfce7;
  color: #166534;
}

.status-in-progress {
  background-color: #dbeafe;
  color: #1e40af;
}

/* --------------------------------------------------------------------------
   20. ApexCharts Theme Override
   -------------------------------------------------------------------------- */

.apexcharts-theme-light .apexcharts-menu-item:hover {
  background: #ccfbf1;
}

/* --------------------------------------------------------------------------
   21. Dark Mode Support
   -------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
  --tt-primary-subtle: #134e4a;
  --tt-gray-100: #1e293b;
  --tt-gray-200: #334155;
  --bs-primary-bg-subtle: #134e4a;
  --bs-primary-text-emphasis: #5eead4;
  --bs-primary-border-subtle: #0f766e;
}

[data-bs-theme="dark"] .bg-primary-subtle {
  background-color: #134e4a !important;
}

[data-bs-theme="dark"] .text-primary {
  color: #14b8a6 !important;
}

/* --------------------------------------------------------------------------
   22. Spinner/Loading Override
   -------------------------------------------------------------------------- */

.spinner-border.text-primary {
  color: #0d9488 !important;
}

.spinner-grow.text-primary {
  color: #0d9488 !important;
}

/* --------------------------------------------------------------------------
   23. Tooltip & Popover
   -------------------------------------------------------------------------- */

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: #0d9488;
  border-bottom-color: #0d9488;
}

.popover-primary {
  --bs-popover-bg: #0d9488;
  --bs-popover-header-bg: #0f766e;
}

/* --------------------------------------------------------------------------
   24. Selection Color
   -------------------------------------------------------------------------- */

::selection {
  background-color: rgba(13, 148, 136, 0.3);
}

::-moz-selection {
  background-color: rgba(13, 148, 136, 0.3);
}
