/* ================================================================
   SmartHRM Pro — components.css
   Cards, Stat Cards, Tables, Forms, Modals, DataTables overrides
   ================================================================ */

/* ========================
   CARD COMPONENT
   ======================== */
.card {
  background: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 24px;
  transition: var(--transition);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 18px 22px !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header i {
  color: var(--color-primary);
}

.card-body {
  padding: 22px !important;
}

.card-footer {
  background: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 14px 22px !important;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Gradient card header variant */
.card-header-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  border-bottom: none !important;
  color: #fff !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 18px 22px !important;
}

.card-header-gradient h3,
.card-header-gradient h4,
.card-header-gradient h5,
.card-header-gradient p,
.card-header-gradient small,
.card-header-gradient i {
  color: #fff !important;
}

/* ========================
   STAT / DASHBOARD CARDS
   ======================== */
.stat-card {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  padding: 24px !important;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  cursor: default;
  margin-bottom: 0;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.10);
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: 10%;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
}

.stat-card.primary { background: linear-gradient(135deg, #4F46E5, #6366F1); box-shadow: 0 8px 24px rgba(79,70,229,0.30) !important; }
.stat-card.success { background: linear-gradient(135deg, #059669, #10B981); box-shadow: 0 8px 24px rgba(16,185,129,0.28) !important; }
.stat-card.warning { background: linear-gradient(135deg, #D97706, #F59E0B); box-shadow: 0 8px 24px rgba(245,158,11,0.28) !important; }
.stat-card.danger  { background: linear-gradient(135deg, #DC2626, #EF4444); box-shadow: 0 8px 24px rgba(239,68,68,0.28) !important; }
.stat-card.info    { background: linear-gradient(135deg, #2563EB, #3B82F6); box-shadow: 0 8px 24px rgba(59,130,246,0.28) !important; }
.stat-card.teal    { background: linear-gradient(135deg, #0F766E, #14B8A6); box-shadow: 0 8px 24px rgba(20,184,166,0.28) !important; }
.stat-card.purple  { background: linear-gradient(135deg, #7C3AED, #A78BFA); box-shadow: 0 8px 24px rgba(124,58,237,0.28) !important; }
.stat-card.orange  { background: linear-gradient(135deg, #C2410C, #F97316); box-shadow: 0 8px 24px rgba(249,115,22,0.28) !important; }

.stat-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.stat-card-value {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.stat-card-label {
  font-size: 13px;
  color: rgba(255,255,255,0.80);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.stat-card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Stat card progress bar */
.stat-progress {
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: var(--radius-full);
  margin-top: 14px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.stat-progress-bar {
  height: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: var(--radius-full);
  transition: width 0.8s ease;
}

/* ========================
   QUICK ACTION CARDS
   ======================== */
.quick-action-card {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  padding: 22px !important;
  background: linear-gradient(135deg, #6C3AED, #2575FC);
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.quick-action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
}

.quick-action-card .btn-light {
  background: rgba(255,255,255,0.20) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px;
  font-weight: 600;
  transition: var(--transition-fast);
}

.quick-action-card .btn-light:hover {
  background: rgba(255,255,255,0.35) !important;
}

/* Analytics Card */
.analytics-card {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  padding: 22px !important;
  background: linear-gradient(135deg, #FF9A9E, #FAD0C4);
  color: #111827;
  transition: var(--transition);
}

.analytics-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
}

/* Feature / Info cards */
.feature-card {
  border-radius: var(--radius) !important;
  border: 1.5px solid var(--color-border) !important;
  padding: 20px !important;
  background: var(--color-white);
  transition: var(--transition);
  text-decoration: none !important;
  display: block;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.feature-card:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12) !important;
  transform: translateY(-2px);
  color: var(--color-text) !important;
}

.feature-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  margin-bottom: 14px;
}

.feature-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.feature-card-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

/* ========================
   TABLE STYLES
   ======================== */
.table-card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

.table-wrapper {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.table-toolbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-toolbar-title i {
  color: var(--color-primary);
}

.table-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Override Bootstrap table styles */
.table,
.custom-table,
.table-modern {
  margin-bottom: 0 !important;
  font-size: 13px !important;
  color: var(--color-text) !important;
  width: 100%;
}

.table th,
.custom-table th,
.table-modern th {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted) !important;
  background: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 14px 16px !important;
  white-space: nowrap;
  border-top: none !important;
}

.table td,
.custom-table td,
.table-modern td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-light) !important;
  background: var(--color-white) !important;
}

.table tbody tr,
.custom-table tbody tr,
.table-modern tbody tr {
  transition: var(--transition-fast);
}

.table-hover tbody tr:hover td,
.custom-table tbody tr:hover td,
.table-modern tbody tr:hover td {
  background: #FAFAFF !important;
}

.table-striped tbody tr:nth-of-type(even) td,
.custom-table tbody tr:nth-of-type(even) td,
.table-modern tbody tr:nth-of-type(even) td {
  background: var(--color-bg) !important;
}

.table-striped tbody tr:nth-of-type(even):hover td,
.custom-table tbody tr:nth-of-type(even):hover td,
.table-modern tbody tr:nth-of-type(even):hover td {
  background: #F0F1FF !important;
}

/* DataTables overrides */
.dataTables_wrapper {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: var(--color-text) !important;
  background: var(--color-white) !important;
  font-family: 'Inter', sans-serif !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12) !important;
  outline: none;
}

.dataTables_wrapper .dataTables_info {
  font-size: 12px;
  color: var(--color-text-muted);
}

.dataTables_wrapper .dataTables_paginate {
  margin-top: 16px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--color-border) !important;
  margin: 0 2px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  color: var(--color-text-muted) !important;
  background: var(--color-white) !important;
  transition: var(--transition-fast) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
}

/* DataTables inner padding */
.dataTables_wrapper .top,
.dataTables_wrapper .bottom {
  padding: 14px 20px;
}

/* ========================
   CHART CONTAINER
   ======================== */
.chart-container {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

.chart-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-title i {
  color: var(--color-primary);
}

/* ========================
   TASK COMMENT SECTION
   ======================== */
.comment-item {
  border-bottom: 1px solid var(--color-border-light);
  padding: 16px 0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.comment-time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.comment-body {
  font-size: 13.5px;
  color: var(--color-text);
  margin-top: 6px;
  line-height: 1.6;
}

/* ========================
   LIST GROUP OVERRIDES
   ======================== */
.list-group-item {
  border-color: var(--color-border-light) !important;
  padding: 14px 18px !important;
  font-size: 13px;
  color: var(--color-text);
}

.list-group-item:first-child { border-radius: var(--radius) var(--radius) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--radius) var(--radius) !important; }

/* ========================
   MODAL OVERRIDES
   ======================== */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-bottom: none !important;
  padding: 18px 24px !important;
}

.modal-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.modal-header .btn-close {
  filter: brightness(10);
  opacity: 0.8;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--color-border) !important;
  padding: 16px 24px !important;
  background: var(--color-bg) !important;
}

/* ========================
   TASK VIEW SPECIFIC
   ======================== */
.task-detail-card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

.task-detail-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  padding: 20px 24px;
  color: #fff;
}

.task-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.task-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.task-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.task-detail-body {
  padding: 24px;
}

.task-description {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.7;
}

.task-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.task-info-item {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.task-info-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.task-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* ========================
   TEACHER APPLICATION CARD
   ======================== */
.app-detail-card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

.app-detail-header {
  background: linear-gradient(135deg, #0EA5E9, #38BDF8);
  padding: 18px 22px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.app-detail-body {
  padding: 22px;
}

/* ========================
   FILTER TOOLBAR
   ======================== */
.filter-card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin-bottom: 20px;
}

/* ========================
   EMPLOYEE PHOTO
   ======================== */
.emp-photo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.emp-photo-placeholder {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 18px;
}

/* ========================
   PROFILE PAGE
   ======================== */
.profile-photo {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--color-primary-light);
  box-shadow: var(--shadow);
}

.profile-photo-placeholder {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 40px;
  border: 3px solid var(--color-primary-light);
}

.info-row {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: 160px;
  min-width: 160px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.info-value {
  flex: 1;
  color: var(--color-text);
}

/* ========================
   SETTINGS PAGE
   ======================== */
.settings-card {
  max-width: 640px;
}

/* ========================
   GENERATE SALARY
   ======================== */
.salary-result {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  margin-top: 16px;
}

/* ========================
   BOOTSTRAP OVERRIDES — misc
   ======================== */

/* Remove round corners from checkbox/radio */
.form-check-input {
  border-color: var(--color-border) !important;
}

.form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Progress bars */
.progress {
  background: var(--color-border-light);
  border-radius: var(--radius-full);
}

.progress-bar {
  border-radius: var(--radius-full);
}

/* Responsive table container */
.table-responsive {
  border-radius: var(--radius);
}

/* Card with no shadow (for nesting) */
.card-inner {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm) !important;
}

/* ========================
   GRID HELPERS
   ======================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}