body {
  background-color: #FFFCF9;
  font-family: 'General Sans', sans-serif;
  color: #00274F;
}

h1, h2, h3, h4, h5 {
  font-family: 'Creato Display', sans-serif;
}

.profile-pic {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #73CA00; /* Injaz green */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

.card-white {
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-white:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Equal height cards row */
.equal-height-cards {
  display: flex;
  flex-wrap: wrap;
}

.equal-height-cards > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.equal-height-cards .card-white {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 140px;
  justify-content: space-between;
}

/* Ensure card content takes appropriate space */
.equal-height-cards .card-white > div:first-child {
  flex-shrink: 0;
}

.equal-height-cards .card-white > div:last-child {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
.btn-green {
  background-color: #73CA00;
  color: white;
  box-shadow: 0 1px 5px rgba(115, 202, 0, 0.4);
  transition: all 0.3s ease;
}

.btn-green:hover {
  background-color: #5fb000;
  transform: translateY(-2px);
  box-shadow: 0 3px 5px rgba(115, 202, 0, 0.6);
}

.btn-green:active {
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(115, 202, 0, 0.5);
}

.btn-secondary {
  background-color: #E7F5F7;
  color: #00274F;
  border: 1px solid #298B9A;
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #D1EDF0;
  border-color: #1e6b7d;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.btn-secondary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

/* Duplicate badge styles removed - see earlier definition */

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  border-radius: 50%;
  border: 2px solid white;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.section-dark {
  background-color: #00274F;
  color: white;
  box-shadow: inset 0 0 20px rgba(255,255,255,0.05);
}

.section-slate {
  background-color: #617B85;
  color: white;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}

.brand-box {
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: #E7F5F7;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.brand-box:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.showcase-header {
  font-size: 2.5rem;
  font-weight: bold;
  color: #00274F;
}

.badge-accent {
  background-color: #298B9A;
  padding: 0.5em 0.8em;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.table thead {
  background-color: #00274F;
  color: white;
}

.table td, .table th {
  vertical-align: middle;
}

canvas {
  max-width: 100%;
  margin-top: 2rem;
}

.timeline {
  position: relative;
  margin-top: 2rem;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 4px;
  background: #298B9A;
}

.timeline-item {
  position: relative;
  margin-left: 2rem;
  margin-bottom: 2rem;
  padding-left: 2rem;
  border-left: none;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 0.25rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #73CA00;
  border: 4px solid white;
  box-shadow: 0 0 0 2px #298B9A;
}

.timeline-item h5 {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.table-injaz {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.table-injaz thead {
  background-color: #02074F;
  color: #fff;
  font-weight: 600;
}

.table-injaz th,
.table-injaz td {
  padding: 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}

.table-injaz th:not(:last-child),
.table-injaz td:not(:last-child) {
  white-space: nowrap;
}

.table-injaz th:last-child,
.table-injaz td:last-child {
  width: 1%;
  white-space: nowrap;
}

.table-injaz table {
  width: 100%;
  table-layout: auto;
}

.table-injaz tbody tr:hover {
  background-color: #f2f3ff;
  transition: background-color 0.2s ease;
}

.table-injaz td .badge {
  font-size: 0.875rem;
}

.header-block {
  margin-bottom: 2rem;
}

.header-block h1 {
  font-family: 'Creato Display Bold', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #00274F;
}

.header-block p {
  font-family: 'General Sans Medium', sans-serif;
  font-size: 1rem;
  color: #617B85;
  margin-bottom: 0;
  opacity: 0.85;
}

.header-with-profile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.header-with-profile .profile-pic {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #73CA00;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

.header-with-profile .header-block {
  margin-bottom: 0;
}

.header-with-profile .header-block h1 {
  font-family: 'Creato Display', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #00274F;
}

.header-with-profile .header-block p {
  font-family: 'General Sans', sans-serif;
  font-size: 1rem;
  color: #617B85;
  margin: 0;
  opacity: 0.85;
}

.page-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: #FFFCF9;
}

.page-centered .content {
  max-width: 1700px;
  width: 80%;
}

.page-left {
  padding: 4rem 2rem;
  background-color: #FFFCF9;
}

.page-left .content {
  max-width: 100%;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-btn {
  background-color: #E7F5F7;
  color: #00274F;
  border: 1px solid #298B9A;
  border-radius: 0.4rem;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.filter-btn:hover {
  background-color: #D1EDF0;
  border-color: #298B9A;
}

.filter-btn.active {
  background-color: #73CA00;
  color: white;
  border-color: #5fb000;
}

/* Statistics Grid Container */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Individual Stat Card */
.stat-block {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* Hover Effect */
.stat-block:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Label (e.g. "Revenue") */
.stat-label {
  font-size: 0.95rem;
  color: #617B85;
  margin-bottom: 0.5rem;
}

/* Value (e.g. "$2M") */
.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #00274F;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.2;
}

/* Responsive text sizing for long status values */
.stat-value.responsive-text {
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  max-width: 100%;
  overflow-wrap: break-word;
  line-height: 1.3;
  word-break: break-word;
}

/* Optional positive/negative color cues */
.stat-value.positive {
  color: #73CA00;
}

.stat-value.negative {
  color: #D33C40;
}

/* Optional unit text next to value */
.stat-unit {
  font-size: 1rem;
  color: #298B9A;
  margin-left: 0.25rem;
}

/* Modern Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: none;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 0.25rem;
}

/* Badge Hover Effects */
.status-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Status Badge Variants with Transparency */
.badge-active {
  background-color: rgba(115, 202, 0, 0.12);
  color: #2d5200;
  border: 1px solid rgba(115, 202, 0, 0.25);
  font-weight: 700;
}

.badge-active .dot {
  background-color: #73CA00;
}

.badge-line-manager-review {
  background-color: rgba(255, 193, 7, 0.12);
  color: #664d03;
  border: 1px solid rgba(255, 193, 7, 0.25);
  font-weight: 700;
}

.badge-department-head-review {
  background-color: rgba(23, 162, 184, 0.12);
  color: #083c42;
  border: 1px solid rgba(23, 162, 184, 0.25);
  font-weight: 700;
}

.badge-hr-review {
  background-color: rgba(0, 123, 255, 0.12);
  color: #002855;
  border: 1px solid rgba(0, 123, 255, 0.25);
  font-weight: 700;
}

.badge-ceo-review {
  background-color: rgba(111, 66, 193, 0.12);
  color: #432874;
  border: 1px solid rgba(111, 66, 193, 0.25);
  font-weight: 700;
}

.badge-completed {
  background-color: rgba(40, 167, 69, 0.12);
  color: #0f2419;
  border: 1px solid rgba(40, 167, 69, 0.25);
  font-weight: 700;
}

.badge-inactive {
  background-color: rgba(108, 117, 125, 0.12);
  color: #3d424a;
  border: 1px solid rgba(108, 117, 125, 0.25);
  font-weight: 700;
}

.badge-inactive .dot {
  background-color: #6c757d;
}

/* Score Performance Badge Variants */
.badge-excellent {
  background-color: rgba(40, 167, 69, 0.12);
  color: #0f2419;
  border: 1px solid rgba(40, 167, 69, 0.25);
  font-weight: 700;
}

.badge-excellent .dot {
  background-color: #28a745;
}

.badge-good {
  background-color: rgba(255, 193, 7, 0.12);
  color: #664d03;
  border: 1px solid rgba(255, 193, 7, 0.25);
  font-weight: 700;
}

.badge-good .dot {
  background-color: #ffc107;
}

.badge-improving {
  background-color: rgba(23, 162, 184, 0.12);
  color: #083c42;
  border: 1px solid rgba(23, 162, 184, 0.25);
  font-weight: 700;
}

.badge-improving .dot {
  background-color: #17a2b8;
}

.badge-hr-updated {
  background-color: rgba(255, 152, 0, 0.12);
  color: #663c00;
  border: 1px solid rgba(255, 152, 0, 0.25);
  font-weight: 700;
}

.badge-hr-updated .dot {
  background-color: #ff9800;
}

/* Score Badges - Modern Design for Plan Detail */
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.score-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.score-badge i {
  font-size: 0.7rem;
}

/* Your Score Badge - Green Theme */
.score-badge-your {
  background: linear-gradient(135deg, rgba(115, 202, 0, 0.15) 0%, rgba(115, 202, 0, 0.08) 100%);
  color: #2d5200;
  border-color: rgba(115, 202, 0, 0.2);
}

.score-badge-your:hover {
  background: linear-gradient(135deg, rgba(115, 202, 0, 0.2) 0%, rgba(115, 202, 0, 0.12) 100%);
  border-color: rgba(115, 202, 0, 0.3);
}

/* Employee Score Badge - Blue Theme */
.score-badge-employee {
  background: linear-gradient(135deg, rgba(23, 162, 184, 0.15) 0%, rgba(23, 162, 184, 0.08) 100%);
  color: #083c42;
  border-color: rgba(23, 162, 184, 0.2);
}

.score-badge-employee:hover {
  background: linear-gradient(135deg, rgba(23, 162, 184, 0.2) 0%, rgba(23, 162, 184, 0.12) 100%);
  border-color: rgba(23, 162, 184, 0.3);
}

/* External Score Badge - Purple Theme */
.score-badge-external {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
  color: #312e81;
  border-color: rgba(99, 102, 241, 0.2);
}

.score-badge-external:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.12) 100%);
  border-color: rgba(99, 102, 241, 0.3);
}

/* Score Badge with Avatar */
.score-badge-external .avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.injaz-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 2px solid #e6e8eb;
}

.injaz-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem 0.5rem 0 0; /* Top rounded only */
  background-color: transparent;
  font-size: 0.95rem;
  font-weight: 500;
  color: #617B85;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  border-bottom: none;
  outline: none;
}

.injaz-tab:hover {
  background-color: #f2f3ff;
  border: 1px solid #d0d4e0;
  border-bottom: none;
}

.injaz-tab.active {
  background-color: #ffffff;
  color: #00274F;
  border: 1px solid #d0d4e0;
  border-bottom: 2px solid #73CA00; /* green underline */
  font-weight: 600;
  z-index: 1;
}

.injaz-btn {
  display: inline-block !important;
  padding: 0.5rem 1.25rem !important;
  border: none !important;
  border-radius: 0.4rem !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.injaz-btn-green {
  background-color: #73CA00 !important;
  color: white !important;
}

.injaz-btn-green:hover {
  background-color: #5fb000 !important;
  color: white !important;
}

.injaz-btn-navy {
  background-color: #00274F !important;
  color: white !important;
}

.injaz-btn-navy:hover {
  background-color: #02074F !important;
  color: white !important;
}

.injaz-btn-secondary {
  background-color: #E7F5F7 !important;
  color: #00274F !important;
  text-decoration: none !important;
  margin-right: 0.5rem;
}

.injaz-btn-secondary:hover,
.injaz-btn-secondary:focus {
  background-color: #D1EDF0 !important;
  color: #00274F !important;
  text-decoration: none !important;
}

.injaz-btn-secondary:link,
.injaz-btn-secondary:visited {
  color: #00274F !important;
  text-decoration: none !important;
}

/* Enhanced styling for header action buttons */
.injaz-btn-header {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(0, 39, 79, 0.1) !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
}

.injaz-btn-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.injaz-btn-header:hover::before {
  left: 100%;
}

.injaz-btn-header:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.injaz-btn-header:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.injaz-btn-secondary.injaz-btn-header {
  background-color: #F8FAFB !important;
  color: #00274F !important;
  border-color: rgba(0, 39, 79, 0.15) !important;
}

.injaz-btn-secondary.injaz-btn-header:hover {
  background-color: #E7F5F7 !important;
  color: #00274F !important;
  border-color: rgba(0, 39, 79, 0.2) !important;
}

.injaz-btn-green.injaz-btn-header {
  background-color: #73CA00 !important;
  color: white !important;
  border-color: rgba(115, 202, 0, 0.3) !important;
  box-shadow: 0 2px 6px rgba(115, 202, 0, 0.3) !important;
}

.injaz-btn-green.injaz-btn-header:hover {
  background-color: #5fb000 !important;
  color: white !important;
  border-color: rgba(115, 202, 0, 0.4) !important;
  box-shadow: 0 4px 12px rgba(115, 202, 0, 0.4) !important;
}

.injaz-btn-navy.injaz-btn-header {
  background-color: #00274F !important;
  color: white !important;
  border-color: rgba(0, 39, 79, 0.3) !important;
  box-shadow: 0 2px 6px rgba(0, 39, 79, 0.3) !important;
}

.injaz-btn-navy.injaz-btn-header:hover {
  background-color: #02074F !important;
  color: white !important;
  border-color: rgba(0, 39, 79, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 39, 79, 0.4) !important;
}

/* Subtle attention-grabbing animation for primary action button */
@keyframes subtlePulse {
  0% {
    box-shadow: 0 2px 6px rgba(115, 202, 0, 0.3);
  }
  50% {
    box-shadow: 0 2px 6px rgba(115, 202, 0, 0.5);
  }
  100% {
    box-shadow: 0 2px 6px rgba(115, 202, 0, 0.3);
  }
}

.injaz-btn-green.injaz-btn-header {
  animation: subtlePulse 3s ease-in-out infinite;
}

.injaz-btn-green.injaz-btn-header:hover {
  animation: none;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .injaz-btn-header {
    transition: none !important;
  }
  
  .injaz-btn-header::before {
    transition: none !important;
  }
  
  .injaz-btn-green.injaz-btn-header {
    animation: none !important;
  }
}

/* Header button container styling */
.header-buttons-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.header-buttons-container .injaz-btn-header {
  min-width: fit-content;
  white-space: nowrap;
}

/* Responsive design for header buttons */
@media (max-width: 768px) {
  .header-buttons-container {
    gap: 0.5rem;
  }
  
  .header-buttons-container .injaz-btn-header {
    padding: 0.4rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  .header-buttons-container .injaz-btn-header i {
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .header-buttons-container {
    width: 100%;
    justify-content: center;
  }
  
  .header-buttons-container .injaz-btn-header {
    flex: 1;
    text-align: center;
    min-width: 0;
  }
}

.injaz-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 39, 79, 0.4); /* semi-transparent navy overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.injaz-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.injaz-modal {
  background-color: #ffffff;
  z-index: 1090;
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  padding: 2rem;
  max-width: 540px;
  width: 90%;
  max-height: 90vh; /* Limit modal height to 90% of viewport height */
  display: flex;
  flex-direction: column; /* Stack header, body, footer vertically */
  transform: scale(0.96);
  opacity: 0;
  transition: all 0.3s ease;
}

.injaz-modal-backdrop.active .injaz-modal {
  transform: scale(1);
  opacity: 1;
}

.injaz-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Creato Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #00274F;
  margin-bottom: 1.25rem;
  flex-shrink: 0; /* Don't shrink header */
}

.injaz-modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #617B85;
  cursor: pointer;
  transition: color 0.2s ease;
}

.injaz-modal-close:hover {
  color: #D33C40;
}

.injaz-modal-body {
  font-size: 1rem;
  line-height: 1.6;
  color: #00274F;
  margin-bottom: 1.75rem;
  flex: 1; /* Take up remaining space */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: #73CA00 #f1f3f5;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.injaz-modal-body::-webkit-scrollbar {
  width: 8px;
}

.injaz-modal-body::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 4px;
}

.injaz-modal-body::-webkit-scrollbar-thumb {
  background: #73CA00;
  border-radius: 4px;
}

.injaz-modal-body::-webkit-scrollbar-thumb:hover {
  background: #5fb000;
}

.injaz-modal-footer {
  text-align: right;
  flex-shrink: 0; /* Don't shrink footer */
  padding-top: 1.5rem; /* Add space between separator line and buttons */
}

/* ===== TOAST NOTIFICATIONS ===== */
.injaz-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
  max-width: 400px;
  pointer-events: none; /* Allow clicks to pass through container */
}

.injaz-toast {
  margin-bottom: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  pointer-events: auto; /* Enable clicks on individual toasts */
  font-family: 'General Sans', sans-serif;
  max-width: 100%;
  word-wrap: break-word;
}

.injaz-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.injaz-toast:hover {
  transform: translateX(-5px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.injaz-toast-success {
  border-left: 4px solid #73CA00;
}

.injaz-toast-error {
  border-left: 4px solid #D33C40;
}

.injaz-toast-info {
  border-left: 4px solid #298B9A;
}

.injaz-toast-warning {
  border-left: 4px solid #F5A623;
}

.injaz-toast-icon {
  margin-right: 12px;
  font-size: 18px;
  flex-shrink: 0;
}

.injaz-toast-success .injaz-toast-icon {
  color: #73CA00;
}

.injaz-toast-error .injaz-toast-icon {
  color: #D33C40;
}

.injaz-toast-info .injaz-toast-icon {
  color: #298B9A;
}

.injaz-toast-warning .injaz-toast-icon {
  color: #F5A623;
}

.injaz-toast-content {
  flex: 1;
  color: #00274F;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.4;
}

.injaz-toast-close {
  background: none;
  border: none;
  color: #617B85;
  font-size: 18px;
  cursor: pointer;
  margin-left: 8px;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.injaz-toast-close:hover {
  color: #00274F !important;
  background-color: #f5f5f5 !important;
}

/* Toast animations */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.injaz-toast.slide-in {
  animation: toastSlideIn 0.3s ease forwards;
}

.injaz-toast.slide-out {
  animation: toastSlideOut 0.3s ease forwards;
}

/* Responsive design for toasts */
@media (max-width: 768px) {
  .injaz-toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .injaz-toast {
    margin-bottom: 8px;
    padding: 12px;
  }
  
  .injaz-toast-content {
    font-size: 0.9rem;
  }
  
  .injaz-toast-icon {
    font-size: 16px;
    margin-right: 10px;
  }
}

/* ===== MODAL Z-INDEX MANAGEMENT ===== */
/* Force ALL delete buttons to stay behind modals */
.injaz-modal-backdrop.active ~ * .injaz-btn,
.injaz-modal-backdrop.active ~ * .injaz-btn-delete,
.injaz-modal-backdrop.active ~ * .injaz-btn-edit,
body.modal-open .injaz-btn-delete,
body.modal-open .injaz-btn-edit,
body.modal-open .injaz-btn,
body.modal-open button[class*="injaz-btn"],
body.modal-open button[onclick*="delete"],
body.modal-open button[title*="Delete"] {
  z-index: 1 !important;
  position: relative;
}

/* Override extremely high z-index values for delete buttons when modals are open */
body.modal-open .injaz-btn-delete,
body.modal-open button.injaz-btn-delete,
body.modal-open button[onclick*="delete"],
body.modal-open button[title*="Delete"],
body.modal-open .table .injaz-btn-delete,
body.modal-open .table-injaz .injaz-btn-delete,
body.modal-open td .injaz-btn-delete,
body.modal-open tbody .injaz-btn-delete {
  z-index: 1 !important;
  position: relative;
}

/* Additional nuclear option - when any modal backdrop is active */
.injaz-modal-backdrop.active ~ * button,
.injaz-modal-backdrop.active ~ * .injaz-btn,
.injaz-modal-backdrop.active ~ * .injaz-btn-delete,
.injaz-modal-backdrop.active ~ * .injaz-btn-edit {
  z-index: 1 !important;
}

/* ULTIMATE OVERRIDE: Force all delete buttons to low z-index when modal is open */
body.modal-open button[class*="injaz-btn"],
body.modal-open .injaz-btn-delete,
body.modal-open button.injaz-btn-delete,
body.modal-open button[onclick*="delete"],
body.modal-open button[title*="Delete"],
.injaz-modal-backdrop.active ~ * button[class*="injaz-btn"],
.injaz-modal-backdrop.active ~ * .injaz-btn-delete,
.injaz-modal-backdrop.active ~ * button.injaz-btn-delete,
.injaz-modal-backdrop.active ~ * button[onclick*="delete"],
.injaz-modal-backdrop.active ~ * button[title*="Delete"] {
  z-index: 1 !important;
  position: relative !important;
}

/* Ensure nested modals appear correctly */
#addKpiCategoryModal {
  z-index: 1070 !important; /* Higher than default Bootstrap modal z-index of 1055 */
}

#addKpiCategoryModal .modal-backdrop {
  z-index: 1069 !important; /* Just below the modal */
}

/* Company KPI modal should be below category modal when both are open */
#addCompanyKpiModal {
  z-index: 1055; /* Default Bootstrap modal z-index */
}

/* Ensure the category modal backdrop doesn't interfere */
.modal-backdrop.show {
  opacity: 0.5;
}

/* When category modal is shown over KPI modal, adjust backdrop opacity */
#addKpiCategoryModal.show ~ .modal-backdrop {
  opacity: 0.7;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  background-color: #298B9A;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem 1.25rem 0.5rem 0.75rem;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-submit:hover {
  background-color: #247f8b;
  transform: translateY(-1px);
}

.btn-submit:active {
  transform: scale(0.98);
}

.btn-submit .circle {
  background-color: rgba(255, 255, 255, 0.15);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}

.warning-box {
  display: flex;
  align-items: center;
  background-color: #FFF4E5;
  color: #8B4C00;
  border-left: 5px solid #F5A623;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  gap: 0.75rem;
  line-height: 1.4;
}

.warning-box .icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warning-box .icon img,
.warning-box .icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.warning-box .text {
  flex: 1;
}

.separator-block {
  text-align: left;
  margin: 2rem 0;
}

.separator-label {
  font-family: 'Creato Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #00274F;
  margin-bottom: 0.4rem;
  display: inline-block;
}

.separator-line {
  height: 2px;
  background-color: #73CA00; /* Injaz360 green */
  border: none;
  border-radius: 1px;
  width: 100%;
}

.separator-wrapper {
  display: inline-block;
}

.table-secondary {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.03);
  font-family: 'General Sans', sans-serif;
}

.table-secondary thead {
  background-color: #f5f8fa;
  color: #617B85;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid #e6eaed;
}

.table-secondary th,
.table-secondary td {
  padding: 0.85rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid #f0f2f5;
  font-size: 0.93rem;
}

.table-secondary tbody tr:hover {
  background-color: #f9fbfd;
  transition: background-color 0.2s ease-in-out;
}


.injaz-btn-add {
  background-color: #73CA00;
}

.injaz-btn-add:hover {
  background-color: #5fb000;
  box-shadow: 0 4px 8px rgba(115, 202, 0, 0.4);
}

/* Special styling for add buttons in input groups */
.input-group .injaz-btn-add {
  border-radius: 0 0.375rem 0.375rem 0;
  border-left: none;
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  color: white;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.input-group .injaz-btn-add:hover {
  background-color: #5fb000;
  transform: none; /* Remove transform for input group buttons */
  box-shadow: 0 2px 4px rgba(115, 202, 0, 0.4);
}

.input-group .injaz-btn-add:focus {
  box-shadow: 0 0 0 0.2rem rgba(115, 202, 0, 0.25);
  outline: none;
}

.injaz-btn-edit {
  background-color: #298B9A;
  color: white;
}

.injaz-btn-edit:hover {
  background-color: #1f6d78;
  box-shadow: 0 4px 8px rgba(41, 139, 154, 0.4);
  color: white;
}

.injaz-btn-edit i {
  color: white;
}

/* Override edit button colors when used as table action icons */
.table-injaz .injaz-btn-edit,
.table .injaz-btn-edit {
    background: none !important;
    color: #6c757d !important;
    box-shadow: none !important;
}

/* Ensure all table action buttons are clickable in English */
html:not([dir="rtl"]) .table-injaz .injaz-btn-edit,
html:not([dir="rtl"]) .table-injaz .injaz-btn-delete,
html:not([dir="rtl"]) .table-injaz .injaz-btn-green,
html:not([dir="rtl"]) .table-injaz .injaz-btn,
html:not([dir="rtl"]) .table-injaz .injaz-btn-secondary,
html:not([dir="rtl"]) .table-injaz .injaz-btn-success,
html:not([dir="rtl"]) .table-injaz .injaz-btn-danger,
html:not([dir="rtl"]) .table-injaz .injaz-btn-add,
html:not([dir="rtl"]) .table .injaz-btn-edit,
html:not([dir="rtl"]) .table .injaz-btn-delete,
html:not([dir="rtl"]) .table .injaz-btn-green,
html:not([dir="rtl"]) .table .injaz-btn,
html:not([dir="rtl"]) .table .injaz-btn-secondary,
html:not([dir="rtl"]) .table .injaz-btn-success,
html:not([dir="rtl"]) .table .injaz-btn-danger,
html:not([dir="rtl"]) .table .injaz-btn-add {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.injaz-btn-delete {
  background-color: #D33C40;
  color: white;
}

.injaz-btn-delete:hover {
  background-color: #b53033;
  box-shadow: 0 4px 8px rgba(211, 60, 64, 0.4);
  color: white;
}

.injaz-btn-delete i {
  color: white;
}

/* Override delete button styling when used as table action icons */
.table-injaz .injaz-btn-delete,
.table .injaz-btn-delete {
    background: none !important;
    color: #D33C40 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.table-injaz .injaz-btn-delete:hover,
.table .injaz-btn-delete:hover {
    background: none !important;
    box-shadow: none !important;
    color: #B52D32 !important;
}

.injaz-btn-success {
  background-color: #73CA00;
  color: white;
}

.injaz-btn-success:hover {
  background-color: #5fb000;
  box-shadow: 0 4px 8px rgba(115, 202, 0, 0.4);
  color: white;
}

/* Override success button styling when used as table action icons */
.table-injaz .injaz-btn-success,
.table .injaz-btn-success {
    background: none !important;
    color: #73CA00 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.table-injaz .injaz-btn-success:hover,
.table .injaz-btn-success:hover {
    background: none !important;
    box-shadow: none !important;
    color: #5EA800 !important;
}

.injaz-btn-danger {
  background-color: #D33C40;
  color: white;
}

.injaz-btn-danger:hover {
  background-color: #b53033;
  box-shadow: 0 4px 8px rgba(211, 60, 64, 0.4);
  color: white;
}

/* Override danger button styling when used as table action icons */
.table-injaz .injaz-btn-danger,
.table .injaz-btn-danger {
    background: none !important;
    color: #D33C40 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.table-injaz .injaz-btn-danger:hover,
.table .injaz-btn-danger:hover {
    background: none !important;
    box-shadow: none !important;
    color: #B52D32 !important;
}

/* ===== CLICKABLE ICON BUTTONS (Table Actions ONLY - NOT MODALS) ===== */
/* Convert action buttons to clickable icons only for tables, exclude modals */
.table-injaz .injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-green:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-secondary:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-success:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-danger:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-add:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-green:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-secondary:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-success:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-danger:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-add:not(.injaz-modal-footer *):not(.modal-footer *) {
    /* Remove button appearance - just clickable icons */
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    outline: none !important;
    text-decoration: none !important;
    
    /* Perfect alignment and click area */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important; /* Ensure clicks work */
    position: relative !important;
    vertical-align: middle !important;
    
    /* Fixed dimensions for consistent click area */
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    
    /* Hover effect */
    opacity: 0.7 !important;
}

/* Ensure hover state consistency for all button types */
.table-injaz .injaz-btn-edit:hover,
.table-injaz .injaz-btn-delete:hover,
.table-injaz .injaz-btn-green:hover,
.table-injaz .injaz-btn:hover,
.table-injaz .injaz-btn-secondary:hover,
.table-injaz .injaz-btn-success:hover,
.table-injaz .injaz-btn-danger:hover,
.table-injaz .injaz-btn-add:hover,
.table .injaz-btn-edit:hover,
.table .injaz-btn-delete:hover,
.table .injaz-btn-green:hover,
.table .injaz-btn:hover,
.table .injaz-btn-secondary:hover,
.table .injaz-btn-success:hover,
.table .injaz-btn-danger:hover,
.table .injaz-btn-add:hover {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Add hover effects for clickable icons */
.table-injaz .injaz-btn-edit:hover,
.table-injaz .injaz-btn-delete:hover,
.table-injaz .injaz-btn-green:hover,
.table-injaz .injaz-btn:hover,
.table-injaz .injaz-btn-secondary:hover,
.table-injaz .injaz-btn-success:hover,
.table-injaz .injaz-btn-danger:hover,
.table-injaz .injaz-btn-add:hover,
.table .injaz-btn-edit:hover,
.table .injaz-btn-delete:hover,
.table .injaz-btn-green:hover,
.table .injaz-btn:hover,
.table .injaz-btn-secondary:hover,
.table .injaz-btn-success:hover,
.table .injaz-btn-danger:hover,
.table .injaz-btn-add:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Style clickable icons properly */
.table-injaz .injaz-btn i,
.table-injaz .injaz-btn-edit i,
.table-injaz .injaz-btn-delete i,
.table-injaz .injaz-btn-success i,
.table-injaz .injaz-btn-danger i,
.table-injaz .injaz-btn-add i,
.table .injaz-btn i,
.table .injaz-btn-edit i,
.table .injaz-btn-delete i,
.table .injaz-btn-success i,
.table .injaz-btn-danger i,
.table .injaz-btn-add i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important; /* Let parent handle clicks */
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Force functionality for all button types regardless of specificity */
button.injaz-btn-edit,
button.injaz-btn-delete,
button.injaz-btn-success,
button.injaz-btn-danger,
button.injaz-btn-green,
button.injaz-btn,
a.injaz-btn-edit,
a.injaz-btn-delete,
a.injaz-btn-success,
a.injaz-btn-danger,
a.injaz-btn-green,
a.injaz-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Nuclear option: Force delete buttons to work in English */
body[lang="en"] button[onclick*="delete"],
html[lang="en"] button[onclick*="delete"], 
button[onclick*="deleteYear"]:not([dir="rtl"]),
button[onclick*="deleteReviewPeriod"]:not([dir="rtl"]),
button[onclick*="delete"]:not([dir="rtl"]),
button[title*="Delete"]:not([dir="rtl"]),
.injaz-btn-delete:not([dir="rtl"]) {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    position: relative !important;
    background: none !important;
    border: none !important;
    opacity: 0.7 !important;
    color: #D33C40 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    vertical-align: middle !important;
}

/* Force delete button hover state in English */
body[lang="en"] button[onclick*="delete"]:hover,
html[lang="en"] button[onclick*="delete"]:hover,
button[onclick*="deleteYear"]:not([dir="rtl"]):hover,
button[onclick*="deleteReviewPeriod"]:not([dir="rtl"]):hover,
button[onclick*="delete"]:not([dir="rtl"]):hover,
button[title*="Delete"]:not([dir="rtl"]):hover,
.injaz-btn-delete:not([dir="rtl"]):hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    color: #B52D32 !important;
    z-index: 10000 !important;
}

/* Ensure specific button elements work in tables */
.table-injaz button[class*="injaz-btn"],
.table button[class*="injaz-btn"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Force delete button functionality in English with highest specificity */
body html:not([dir="rtl"]) .table-injaz button.injaz-btn-delete,
body html:not([dir="rtl"]) .table button.injaz-btn-delete,
body html:not([dir="rtl"]) button.injaz-btn-delete[onclick],
body button.injaz-btn-delete[onclick*="deleteYear"],
body button.injaz-btn-delete[onclick*="deleteReviewPeriod"],
body button.injaz-btn-delete[onclick*="delete"],
body .injaz-btn-delete[title*="Delete"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 999 !important;
    color: #D33C40 !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* OVERRIDE INLINE STYLES - ONLY FOR TABLE BUTTONS, NOT MODALS */
table:not(.injaz-modal *):not(.modal *) button.injaz-btn[style*="padding"],
table:not(.injaz-modal *):not(.modal *) button.injaz-btn-edit[style*="padding"],
table:not(.injaz-modal *):not(.modal *) button.injaz-btn-delete[style*="padding"],
table:not(.injaz-modal *):not(.modal *) button.injaz-btn-green[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-edit[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-delete[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-green[style*="padding"],
.table-injaz:not(.injaz-modal *):not(.modal *) button.injaz-btn[style*="padding"],
.table-injaz:not(.injaz-modal *):not(.modal *) button.injaz-btn-edit[style*="padding"],
.table-injaz:not(.injaz-modal *):not(.modal *) button.injaz-btn-delete[style*="padding"],
.table-injaz:not(.injaz-modal *):not(.modal *) button.injaz-btn-green[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-edit[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-green[style*="padding"] {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

/* NUCLEAR OPTION: Target all onclick buttons - ONLY TABLE ACTIONS, NOT MODALS */
table button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="showActivateYearModal"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="showDeactivateYearModal"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="showDeactivateReviewPeriodModal"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="editYear"][class*="injaz-btn"],
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="deleteYear"][class*="injaz-btn"],
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="deleteReviewPeriod"][class*="injaz-btn"] {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 9999 !important;
}

/* Fix icons inside onclick buttons - ONLY TABLE ACTIONS, NOT MODALS */
table button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
table button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
table button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table-injaz button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table-injaz button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table-injaz button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="editYear"][class*="injaz-btn"] i,
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="deleteYear"][class*="injaz-btn"] i,
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="deleteReviewPeriod"][class*="injaz-btn"] i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Ensure delete button icons are clickable */
body html:not([dir="rtl"]) .table-injaz button.injaz-btn-delete i,
body html:not([dir="rtl"]) .table button.injaz-btn-delete i,
body button.injaz-btn-delete[onclick] i {
    pointer-events: none !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Hover states for delete buttons with even higher specificity */
body html:not([dir="rtl"]) .table-injaz button.injaz-btn-delete:hover,
body html:not([dir="rtl"]) .table button.injaz-btn-delete:hover,
body button.injaz-btn-delete[onclick]:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #B52D32 !important;
    z-index: 1000 !important;
}

/* Icon color variations for different action types */
.table-injaz .injaz-btn-edit i,
.table .injaz-btn-edit i {
    color: #6c757d !important; /* Simple gray color */
}

.table-injaz .injaz-btn-edit:hover,
.table .injaz-btn-edit:hover i,
.table .injaz-btn-edit:focus,
.table .injaz-btn-edit:focus i,
.table .injaz-btn-edit:active,
.table .injaz-btn-edit:active i,
.table .injaz-btn-edit:visited,
.table .injaz-btn-edit:visited i {
    color: #5a6268 !important; /* Slightly darker gray on hover/focus/active */
    background: none !important; /* Remove any background color */
    text-decoration: none !important; /* Remove any underlines */
    outline: none !important; /* Remove focus outline */
    border: none !important; /* Remove any borders */
    box-shadow: none !important; /* Remove any shadows */
}

.table-injaz .injaz-btn-delete i,
.table .injaz-btn-delete i {
    color: #D33C40 !important;
}

.table-injaz .injaz-btn-delete:hover i,
.table .injaz-btn-delete:hover i {
    color: #B52D32 !important; /* Darker red on hover */
}

.table-injaz .injaz-btn-success i,
.table .injaz-btn-success i,
.table-injaz .injaz-btn-green i,
.table .injaz-btn-green i {
    color: #73CA00 !important;
}

.table-injaz .injaz-btn-success:hover i,
.table .injaz-btn-success:hover i,
.table-injaz .injaz-btn-green:hover i,
.table .injaz-btn-green:hover i {
    color: #5EA800 !important; /* Darker green on hover */
}

.table-injaz .injaz-btn-danger i,
.table .injaz-btn-danger i {
    color: #D33C40 !important;
}

.table-injaz .injaz-btn-danger:hover i,
.table .injaz-btn-danger:hover i {
    color: #B52D32 !important; /* Darker red on hover */
}

/* Clean styling for deactivate buttons - no background */
.table-injaz .injaz-btn[style*="background-color: #FFF4E5"],
.table .injaz-btn[style*="background-color: #FFF4E5"] {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    opacity: 0.7 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
}

.table-injaz .injaz-btn[style*="background-color: #FFF4E5"]:hover,
.table .injaz-btn[style*="background-color: #FFF4E5"]:hover {
    background: none !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

.table-injaz .injaz-btn[style*="background-color: #FFF4E5"] i,
.table .injaz-btn[style*="background-color: #FFF4E5"] i {
    color: #F5A623 !important; /* Orange icon color */
}

.table-injaz .injaz-btn[style*="background-color: #FFF4E5"]:hover i,
.table .injaz-btn[style*="background-color: #FFF4E5"]:hover i {
    color: #E8960F !important; /* Darker orange on hover */
}

/* Ensure activate buttons work properly */
.table-injaz .injaz-btn-green,
.table .injaz-btn-green {
    background: none !important;
    border: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
}

.table-injaz .injaz-btn-green:hover,
.table .injaz-btn-green:hover {
    transform: scale(1.1) !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
}



.tiny-progress-wrapper {
  max-width: 300px;
  margin-bottom: 2rem;
}

.tiny-progress {
  width: 100%;
  background-color: #f1f3f5;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  height: 12px;
  margin-bottom: 0.4rem;
}

.tiny-progress-bar {
  height: 100%;
  background-color: #73CA00;
  transition: width 0.4s ease;
}

.tiny-progress-label {
  font-size: 0.85rem;
  color: #617B85;
  font-weight: 500;
}

.injaz-modal-success-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  z-index: 10; /* ensure it sits above modal content */
}

.injaz-modal-success-message {
  background-color: white;
  border: 2px solid #73CA00;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  animation: fadeInScale 0.3s ease;
  max-width: 300px;
}

.injaz-success-icon-circle {
  width: 64px;
  height: 64px;
  background-color: #73CA00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.injaz-success-icon-circle span {
  font-size: 2rem;
  color: white;
  font-weight: bold;
}

.injaz-modal-success-message h3 {
  font-size: 1.25rem;
  color: #00274F;
  margin-bottom: 0.5rem;
}

.injaz-modal-success-message p {
  font-size: 0.9rem;
  color: #617B85;
  margin: 0;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.injaz-modal-failure-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  z-index: 10;
}

.injaz-modal-failure-message {
  background-color: white;
  border: 2px solid #D33C40;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  animation: fadeInScale 0.3s ease;
  max-width: 300px;
}

.injaz-failure-icon-circle {
  width: 64px;
  height: 64px;
  background-color: #D33C40;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.injaz-failure-icon-circle span {
  font-size: 2rem;
  color: white;
  font-weight: bold;
}

.injaz-modal-failure-message h3 {
  font-size: 1.25rem;
  color: #00274F;
  margin-bottom: 0.5rem;
}

.injaz-modal-failure-message p {
  font-size: 0.9rem;
  color: #617B85;
  margin: 0;
}

.injaz-search-bar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #DDE3E9;
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.injaz-search-bar:focus-within {
  border-color: #73CA00;
  box-shadow: 0 0 0 3px rgba(115, 202, 0, 0.2);
}

.injaz-search-bar input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 0.95rem;
  font-family: 'General Sans', sans-serif;
  color: #00274F;
  background-color: transparent;
  padding-left: 0.5rem;
}

.injaz-search-bar svg {
  width: 18px;
  height: 18px;
  stroke: #617B85;
}

.badge-overachievement {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: linear-gradient(135deg, #FFD700, #FFC200);
  color: #fff;
  font-family: 'General Sans', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
  overflow: hidden;
}

/* Shine animation */
.badge-overachievement::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -50%;
  width: 50%;
  height: 400%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(45deg);
  animation: oa-shine 2s infinite;
}

@keyframes oa-shine {
  0%   { transform: rotate(45deg) translateX(-200%); }
  100% { transform: rotate(45deg) translateX(200%); }
}

/* Optional icon styling */
.badge-overachievement .icon {
  font-size: 0.75rem;
  line-height: 1;
}

/* Cascaded KPI Cards Enhancement */
.cascaded-kpi-item {
  transition: all 0.2s ease;
}

.cascaded-kpi-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Link KPI Button Consistency */
.cascaded-kpi-item .injaz-btn-edit {
  min-width: 120px;
  max-width: 120px;
  height: 40px;
  text-align: center;
  margin-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem !important;
  color: white !important;
}

/* Compact Floating Buttons */
.floating-buttons-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 140px;
}

.floating-weight-indicator {
  background: white;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #E7F5F7;
  transition: all 0.2s ease;
}

.floating-weight-indicator:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.weight-icon {
  margin-bottom: 6px;
}

.weight-icon i {
  font-size: 1.1rem;
}

.weight-value {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1;
}

.weight-label {
  font-size: 0.7rem;
  color: #617B85;
  line-height: 1.2;
  display: block;
}

.floating-submit-btn {
  background: linear-gradient(135deg, #73CA00, #5fb000);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(115, 202, 0, 0.3);
  text-decoration: none;
  min-height: 44px;
}

.floating-submit-btn:hover {
  background: linear-gradient(135deg, #5fb000, #4a9000);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(115, 202, 0, 0.4);
  color: white;
}

.floating-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(115, 202, 0, 0.3);
}

.floating-submit-btn i {
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .floating-buttons-container {
    bottom: 15px;
    right: 15px;
    max-width: 120px;
  }
  
  .floating-weight-indicator {
    padding: 10px;
  }
  
  .floating-submit-btn {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  
  .weight-value {
    font-size: 1rem;
  }
  
  .weight-label {
    font-size: 0.65rem;
  }
}

/* KPI Cascade Indicator */
.cascade-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 8px;
  cursor: help;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.cascade-indicator:hover {
  background: linear-gradient(135deg, #5B5FD1, #4338CA);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
}

.cascade-indicator i {
  font-size: 0.7rem;
}

.cascade-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

/* Enhanced Cascade Tooltip Styling */
.cascade-tooltip-header {
  font-weight: 600;
  color: #00274F;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E7F5F7;
  font-size: 0.85rem;
}

.cascade-tooltip-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 0.8rem;
  color: #00274F;
  line-height: 1.3;
}

.cascade-tooltip-item:not(:last-child) {
  border-bottom: 1px solid #F8F9FF;
}

.cascade-tooltip-dept {
  color: #617B85;
  font-size: 0.75rem;
  font-style: italic;
  margin-left: 4px;
}

/* Custom tooltip styling for cascade indicators */
.tooltip-inner {
  background-color: white !important;
  color: #00274F !important;
  border: 1px solid #E7F5F7 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  max-width: 280px !important;
  text-align: left !important;
  font-family: 'General Sans', sans-serif !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #E7F5F7 !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #E7F5F7 !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #E7F5F7 !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #E7F5F7 !important;
}

/* ===== CASCADED KPI MODAL STYLES ===== */
#linkCascadedKpiModal .injaz-modal {
  max-width: 900px; /* Wider for better single-column layout */
}

#linkCascadedKpiModal .list-group-item {
  border: 1px solid #e3e6f0;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

#linkCascadedKpiModal .list-group-item:hover {
  background-color: #f8f9fc;
  border-color: #6366F1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

#linkCascadedKpiModal .list-group-item input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: #6366F1;
}

#linkCascadedKpiModal .form-control,
#linkCascadedKpiModal .form-select {
  border: 1px solid #DDE3E9;
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#linkCascadedKpiModal .form-control:focus,
#linkCascadedKpiModal .form-select:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

#linkCascadedKpiModal .alert-info {
  background: linear-gradient(135deg, #E7F5F7 0%, #D4F1F4 100%);
  border: 1px solid #6366F1;
  border-radius: 0.75rem;
  color: #00274F;
  padding: 1rem;
}

#linkCascadedKpiModal .badge {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
}

#linkCascadedKpiModal .bg-secondary {
  background: linear-gradient(135deg, #6c757d, #5a6268) !important;
}

#linkCascadedKpiModal .bg-light {
  background: #f8f9fa !important;
  border: 1px solid #dee2e6;
}

#linkCascadedKpiModal .text-dark {
  color: #495057 !important;
}

/* Enhanced spacing for single-column layout */
#linkCascadedKpiModal .card-white {
  padding: 1.5rem;
  margin-bottom: 1rem;
}

#linkCascadedKpiModal .row {
  margin-bottom: 0;
}

#linkCascadedKpiModal .col-md-6 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Responsive adjustments for single-column */
@media (max-width: 768px) {
  #linkCascadedKpiModal .injaz-modal {
    max-width: 95vw;
    margin: 10px;
  }
  
  #linkCascadedKpiModal .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  #linkCascadedKpiModal .col-md-6 {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;
  }
}

/* ===== END CASCADED KPI MODAL STYLES ===== */

/* =============================================================================
   SCORING BUTTONS - Subtle and Professional Styling
   ============================================================================= */

/* Score Button - Make it more subtle with transparent background */
.injaz-btn[style*="background-color: #FFC107"],
.injaz-btn[style*="background-color:#FFC107"] {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #856404 !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    font-weight: 500 !important;
}

.injaz-btn[style*="background-color: #FFC107"]:hover,
.injaz-btn[style*="background-color:#FFC107"]:hover {
    background-color: rgba(255, 193, 7, 0.25) !important;
    color: #664504 !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

/* External Button - Make it more subtle with transparent background */
.injaz-btn[style*="background-color: #6366F1"],
.injaz-btn[style*="background-color:#6366F1"] {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #4338ca !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    font-weight: 500 !important;
}

.injaz-btn[style*="background-color: #6366F1"]:hover,
.injaz-btn[style*="background-color:#6366F1"]:hover {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #3730a3 !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

/* ===== END SCORING BUTTONS STYLES ===== */

/* Card Icon Spacing Improvements - Added for better visual spacing */
.card-icon.me-2 {
    margin-right: 1.5rem !important; /* More space between icon and text */
}

.card-icon.me-3 {
    margin-right: 1.5rem !important; /* Consistent spacing */
}

/* General icon spacing improvements */
.card-icon {
    margin-right: 1.5rem !important;
}

/* RTL support for Arabic language */
html[dir="rtl"] .card-icon.me-2,
html[dir="rtl"] .card-icon.me-3,
html[dir="rtl"] .card-icon {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .card-icon.me-2,
    .card-icon.me-3,
    .card-icon {
        margin-right: 1rem !important; /* Slightly less spacing on mobile */
    }
    
    html[dir="rtl"] .card-icon.me-2,
    html[dir="rtl"] .card-icon.me-3,
    html[dir="rtl"] .card-icon {
        margin-right: 0 !important;
        margin-left: 1rem !important;
    }
}

/* Icon-only Action Buttons - Clean and Light Style */
/* OVERRIDE ALL CONFLICTING RULES - Force our new light styling */
/* Nuclear option - target delete button by all possible selectors - LTR and RTL */
button[onclick*="openDeleteKpiModal"],
.injaz-btn[onclick*="openDeleteKpiModal"],
.d-flex .injaz-btn[onclick*="openDeleteKpiModal"],
.injaz-btn[onclick*="openDeleteKpiModal"][style*="background-color: rgba(211, 60, 64, 0.08)"],
html[dir="rtl"] button[onclick*="openDeleteKpiModal"],
html[dir="rtl"] .injaz-btn[onclick*="openDeleteKpiModal"],
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openDeleteKpiModal"] {
    background-color: rgba(211, 60, 64, 0.08) !important;
    border: none !important;
    color: #D33C40 !important;
    padding: 0.4rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
}

/* RTL-specific clean styling for all KPI action buttons */
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openEditKpiModal"] {
    background-color: #F8F9FA !important;
    color: #6c757d !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openMeasureModal"] {
    background-color: rgba(115, 202, 0, 0.08) !important;
    color: #73CA00 !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openAIMeasureSuggestionsModal"] {
    background-color: #E7F5F7 !important;
    color: #298B9A !important;
}

/* RTL Scoring Button - Perfect Flexbox Centering + Absolutely Borderless */
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openScoringModal"],
html[dir="rtl"] button.injaz-btn[onclick*="openScoringModal"],
html[dir="rtl"] .injaz-btn[onclick*="openScoringModal"],
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openScoringModal"]:hover,
html[dir="rtl"] button.injaz-btn[onclick*="openScoringModal"]:hover,
html[dir="rtl"] .injaz-btn[onclick*="openScoringModal"]:hover,
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openScoringModal"]:focus,
html[dir="rtl"] button.injaz-btn[onclick*="openScoringModal"]:focus,
html[dir="rtl"] .injaz-btn[onclick*="openScoringModal"]:focus,
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openScoringModal"]:active,
html[dir="rtl"] button.injaz-btn[onclick*="openScoringModal"]:active,
html[dir="rtl"] .injaz-btn[onclick*="openScoringModal"]:active {
    background-color: rgba(255, 193, 7, 0.08) !important;
    background-image: none !important;
    color: #856404 !important;
    padding: 0 !important;
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    border: none !important;
    border-width: 0px !important;
    border-style: none !important;
    border-color: transparent !important;
    border-image: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-top-width: 0px !important;
    border-right-width: 0px !important;
    border-bottom-width: 0px !important;
    border-left-width: 0px !important;
    border-radius: 0.375rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-sizing: border-box !important;
    outline: none !important;
    outline-width: 0px !important;
    outline-style: none !important;
    outline-color: transparent !important;
    outline-offset: 0px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -webkit-border-radius: 0.375rem !important;
    -moz-border-radius: 0.375rem !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openExternalScoringModal"] {
    background-color: rgba(99, 102, 241, 0.08) !important;
    color: #4338ca !important;
    padding: 0.4rem !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: inherit !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0.375rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
}

.injaz-btn[onclick*="openEditKpiModal"][style*="background-color: #F8F9FA"],
.injaz-btn[onclick*="openMeasureModal"][style*="background-color: rgba(115, 202, 0, 0.08)"],
.injaz-btn[onclick*="openAIMeasureSuggestionsModal"][style*="background-color: #E7F5F7"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.injaz-btn[style*="background-color: #F8F9FA"]:hover {
    background-color: #E9ECEF !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.injaz-btn[style*="background-color: rgba(115, 202, 0, 0.08)"]:hover {
    background-color: rgba(115, 202, 0, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(115, 202, 0, 0.2);
}

.injaz-btn[style*="background-color: #E7F5F7"]:hover {
    background-color: #D1EDF0 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(41, 139, 154, 0.2);
}

.injaz-btn[style*="background-color: rgba(255, 193, 7, 0.08)"]:hover,
.d-flex .injaz-btn[onclick*="openScoringModal"]:hover {
    background-color: rgba(255, 193, 7, 0.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2) !important;
}

.injaz-btn[style*="background-color: rgba(99, 102, 241, 0.08)"]:hover,
.d-flex .injaz-btn[onclick*="openExternalScoringModal"]:hover {
    background-color: rgba(99, 102, 241, 0.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2) !important;
}

/* Delete button hover - use all selectors - LTR and RTL */
.injaz-btn[style*="background-color: rgba(211, 60, 64, 0.08)"]:hover,
.injaz-btn[onclick*="openDeleteKpiModal"][style*="background-color: rgba(211, 60, 64, 0.08)"]:hover,
button[onclick*="openDeleteKpiModal"]:hover,
.injaz-btn[onclick*="openDeleteKpiModal"]:hover,
.d-flex .injaz-btn[onclick*="openDeleteKpiModal"]:hover,
html[dir="rtl"] .injaz-btn[onclick*="openDeleteKpiModal"]:hover,
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openDeleteKpiModal"]:hover {
    background-color: rgba(211, 60, 64, 0.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(211, 60, 64, 0.2) !important;
}

/* RTL hover effects for all KPI action buttons */
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openEditKpiModal"]:hover {
    background-color: #E9ECEF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openMeasureModal"]:hover {
    background-color: rgba(115, 202, 0, 0.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(115, 202, 0, 0.2) !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openAIMeasureSuggestionsModal"]:hover {
    background-color: #D1EDF0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(41, 139, 154, 0.2) !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openScoringModal"]:hover {
    background-color: rgba(255, 193, 7, 0.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2) !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openExternalScoringModal"]:hover {
    background-color: rgba(99, 102, 241, 0.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2) !important;
}

/* Ensure all KPI action buttons have the same size - LTR and RTL */
.d-flex .injaz-btn[onclick*="openEditKpiModal"],
.d-flex .injaz-btn[onclick*="openMeasureModal"], 
.d-flex .injaz-btn[onclick*="openAIMeasureSuggestionsModal"],
.d-flex .injaz-btn[onclick*="openDeleteKpiModal"],
.d-flex .injaz-btn[onclick*="openScoringModal"],
.d-flex .injaz-btn[onclick*="openExternalScoringModal"],
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openEditKpiModal"],
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openMeasureModal"], 
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openAIMeasureSuggestionsModal"],
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openDeleteKpiModal"],
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openScoringModal"],
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openExternalScoringModal"] {
    padding: 0.4rem !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
}

/* Ensure all KPI action button icons are properly styled - LTR and RTL */
button[onclick*="openDeleteKpiModal"] img,
.injaz-btn[onclick*="openDeleteKpiModal"] img,
.d-flex .injaz-btn[onclick*="openDeleteKpiModal"] img,
html[dir="rtl"] button[onclick*="openDeleteKpiModal"] img,
html[dir="rtl"] .injaz-btn[onclick*="openDeleteKpiModal"] img,
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openDeleteKpiModal"] img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) saturate(100%) invert(30%) sepia(68%) saturate(2465%) hue-rotate(337deg) brightness(85%) contrast(91%) !important;
    pointer-events: none !important;
}

/* RTL icon styling for all KPI action buttons */
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openEditKpiModal"] img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(90deg) brightness(100%) contrast(100%) !important;
    pointer-events: none !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openMeasureModal"] img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) saturate(100%) invert(68%) sepia(80%) saturate(4945%) hue-rotate(88deg) brightness(95%) contrast(101%) !important;
    pointer-events: none !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openAIMeasureSuggestionsModal"] img {
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
}

/* RTL Scoring Button Icon - Flexbox Centering */
html[dir="rtl"] .d-flex .injaz-btn[onclick*="openScoringModal"] i,
html[dir="rtl"] button.injaz-btn[onclick*="openScoringModal"] i,
html[dir="rtl"] .injaz-btn[onclick*="openScoringModal"] i {
    font-size: 16px !important;
    color: #856404 !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    vertical-align: middle !important;
}

html[dir="rtl"] .d-flex .injaz-btn[onclick*="openExternalScoringModal"] i {
    font-size: 16px !important;
    color: #4338ca !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    text-align: center !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Link Cascaded Goals Page Styles */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F0F0F0;
}

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

.info-label {
    font-weight: 500;
    color: #666;
    min-width: 80px;
}

.info-value {
    font-weight: 600;
    color: #00274F;
}

.info-box {
    background-color: #F8F9FA;
    border: 1px solid #E9ECEF;
    border-radius: 0.375rem;
    padding: 1rem;
    color: #495057;
}

.goals-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.goal-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #E9ECEF;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #FAFAFA;
}

.goal-item:hover {
    border-color: #73CA00;
    background-color: #F8FFF8;
}

.goal-item input[type="checkbox"] {
    margin-top: 0.25rem;
    accent-color: #73CA00;
}

.goal-content {
    flex: 1;
}

.goal-name {
    font-weight: 600;
    color: #00274F;
    margin-bottom: 0.25rem;
}

.goal-description {
    color: #666;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.goal-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge-light {
    background-color: #F8F9FA;
    color: #495057;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* TABLE ACTION BUTTONS ONLY - NOT MODALS */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 10000 !important;
    color: #D33C40 !important;
}

/* Fix SVG icons in delete buttons - ensure they're visible */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) img,
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) img,
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) img,
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete img,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) saturate(100%) invert(30%) sepia(68%) saturate(2465%) hue-rotate(337deg) brightness(85%) contrast(91%) !important;
    pointer-events: none !important;
}

/* Fix SVG icons in delete buttons on hover */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover img,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2718%) hue-rotate(340deg) brightness(85%) contrast(92%) !important;
}

/* TABLE ACTION BUTTON ICONS ONLY - NOT MODALS */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) i,
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete i,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    color: inherit !important;
}

/* TABLE ACTION BUTTON HOVER ONLY - NOT MODALS */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover,
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover,
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover,
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    color: #B52D32 !important;
    z-index: 10001 !important;
}

/* Fix SVG icons in delete buttons on hover */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover img,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2718%) hue-rotate(340deg) brightness(85%) contrast(92%) !important;
}

/* ===== CLICKABLE ICON BUTTONS (Table Actions ONLY - NOT MODALS) ===== */
/* Convert action buttons to clickable icons only for tables, exclude modals */
.table-injaz .injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-green:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-secondary:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-success:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-danger:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz .injaz-btn-add:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-green:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-secondary:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-success:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-danger:not(.injaz-modal-footer *):not(.modal-footer *),
.table .injaz-btn-add:not(.injaz-modal-footer *):not(.modal-footer *) {
    /* Remove button appearance - just clickable icons */
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    outline: none !important;
    text-decoration: none !important;
    
    /* Perfect alignment and click area */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important; /* Ensure clicks work */
    position: relative !important;
    vertical-align: middle !important;
    
    /* Fixed dimensions for consistent click area */
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    
    /* Hover effect */
    opacity: 0.7 !important;
}

/* Ensure hover state consistency for all button types */
.table-injaz .injaz-btn-edit:hover,
.table-injaz .injaz-btn-delete:hover,
.table-injaz .injaz-btn-green:hover,
.table-injaz .injaz-btn:hover,
.table-injaz .injaz-btn-secondary:hover,
.table-injaz .injaz-btn-success:hover,
.table-injaz .injaz-btn-danger:hover,
.table-injaz .injaz-btn-add:hover,
.table .injaz-btn-edit:hover,
.table .injaz-btn-delete:hover,
.table .injaz-btn-green:hover,
.table .injaz-btn:hover,
.table .injaz-btn-secondary:hover,
.table .injaz-btn-success:hover,
.table .injaz-btn-danger:hover,
.table .injaz-btn-add:hover {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Add hover effects for clickable icons */
.table-injaz .injaz-btn-edit:hover,
.table-injaz .injaz-btn-delete:hover,
.table-injaz .injaz-btn-green:hover,
.table-injaz .injaz-btn:hover,
.table-injaz .injaz-btn-secondary:hover,
.table-injaz .injaz-btn-success:hover,
.table-injaz .injaz-btn-danger:hover,
.table-injaz .injaz-btn-add:hover,
.table .injaz-btn-edit:hover,
.table .injaz-btn-delete:hover,
.table .injaz-btn-green:hover,
.table .injaz-btn:hover,
.table .injaz-btn-secondary:hover,
.table .injaz-btn-success:hover,
.table .injaz-btn-danger:hover,
.table .injaz-btn-add:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Style clickable icons properly */
.table-injaz .injaz-btn i,
.table-injaz .injaz-btn-edit i,
.table-injaz .injaz-btn-delete i,
.table-injaz .injaz-btn-success i,
.table-injaz .injaz-btn-danger i,
.table-injaz .injaz-btn-add i,
.table .injaz-btn i,
.table .injaz-btn-edit i,
.table .injaz-btn-delete i,
.table .injaz-btn-success i,
.table .injaz-btn-danger i,
.table .injaz-btn-add i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important; /* Let parent handle clicks */
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Force functionality for all button types regardless of specificity */
button.injaz-btn-edit,
button.injaz-btn-delete,
button.injaz-btn-success,
button.injaz-btn-danger,
button.injaz-btn-green,
button.injaz-btn,
a.injaz-btn-edit,
a.injaz-btn-delete,
a.injaz-btn-success,
a.injaz-btn-danger,
a.injaz-btn-green,
a.injaz-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Nuclear option: Force delete buttons to work in English */
body[lang="en"] button[onclick*="delete"],
html[lang="en"] button[onclick*="delete"], 
button[onclick*="deleteYear"]:not([dir="rtl"]),
button[onclick*="deleteReviewPeriod"]:not([dir="rtl"]),
button[onclick*="delete"]:not([dir="rtl"]),
button[title*="Delete"]:not([dir="rtl"]),
.injaz-btn-delete:not([dir="rtl"]) {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    position: relative !important;
    background: none !important;
    border: none !important;
    opacity: 0.7 !important;
    color: #D33C40 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    vertical-align: middle !important;
}

/* Force delete button hover state in English */
body[lang="en"] button[onclick*="delete"]:hover,
html[lang="en"] button[onclick*="delete"]:hover,
button[onclick*="deleteYear"]:not([dir="rtl"]):hover,
button[onclick*="deleteReviewPeriod"]:not([dir="rtl"]):hover,
button[onclick*="delete"]:not([dir="rtl"]):hover,
button[title*="Delete"]:not([dir="rtl"]):hover,
.injaz-btn-delete:not([dir="rtl"]):hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    color: #B52D32 !important;
    z-index: 10000 !important;
}

/* Ensure specific button elements work in tables */
.table-injaz button[class*="injaz-btn"],
.table button[class*="injaz-btn"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Force delete button functionality in English with highest specificity */
body html:not([dir="rtl"]) .table-injaz button.injaz-btn-delete,
body html:not([dir="rtl"]) .table button.injaz-btn-delete,
body html:not([dir="rtl"]) button.injaz-btn-delete[onclick],
body button.injaz-btn-delete[onclick*="deleteYear"],
body button.injaz-btn-delete[onclick*="deleteReviewPeriod"],
body button.injaz-btn-delete[onclick*="delete"],
body .injaz-btn-delete[title*="Delete"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 999 !important;
    color: #D33C40 !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* OVERRIDE INLINE STYLES - ONLY FOR TABLE BUTTONS, NOT MODALS */
table:not(.injaz-modal *):not(.modal *) button.injaz-btn[style*="padding"],
table:not(.injaz-modal *):not(.modal *) button.injaz-btn-edit[style*="padding"],
table:not(.injaz-modal *):not(.modal *) button.injaz-btn-delete[style*="padding"],
table:not(.injaz-modal *):not(.modal *) button.injaz-btn-green[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-edit[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-delete[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-green[style*="padding"],
.table-injaz:not(.injaz-modal *):not(.modal *) button.injaz-btn[style*="padding"],
.table-injaz:not(.injaz-modal *):not(.modal *) button.injaz-btn-edit[style*="padding"],
.table-injaz:not(.injaz-modal *):not(.modal *) button.injaz-btn-delete[style*="padding"],
.table-injaz:not(.injaz-modal *):not(.modal *) button.injaz-btn-green[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-edit[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-green[style*="padding"] {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

/* NUCLEAR OPTION: Target all onclick buttons - ONLY TABLE ACTIONS, NOT MODALS */
table button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="showActivateYearModal"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="showDeactivateYearModal"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
table button[onclick*="showDeactivateReviewPeriodModal"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *),
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="editYear"][class*="injaz-btn"],
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="deleteYear"][class*="injaz-btn"],
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="deleteReviewPeriod"][class*="injaz-btn"] {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 9999 !important;
}

/* Fix icons inside onclick buttons - ONLY TABLE ACTIONS, NOT MODALS */
table button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
table button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
table button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table-injaz button[onclick*="editYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table-injaz button[onclick*="deleteYear"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table-injaz button[onclick*="deleteReviewPeriod"][class*="injaz-btn"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="editYear"][class*="injaz-btn"] i,
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="deleteYear"][class*="injaz-btn"] i,
td:not(.injaz-modal-footer):not(.modal-footer) button[onclick*="deleteReviewPeriod"][class*="injaz-btn"] i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Ensure delete button icons are clickable */
body html:not([dir="rtl"]) .table-injaz button.injaz-btn-delete i,
body html:not([dir="rtl"]) .table button.injaz-btn-delete i,
body button.injaz-btn-delete[onclick] i {
    pointer-events: none !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Hover states for delete buttons with even higher specificity */
body html:not([dir="rtl"]) .table-injaz button.injaz-btn-delete:hover,
body html:not([dir="rtl"]) .table button.injaz-btn-delete:hover,
body button.injaz-btn-delete[onclick]:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #B52D32 !important;
    z-index: 1000 !important;
}

/* Icon color variations for different action types */
.table-injaz .injaz-btn-edit i,
.table .injaz-btn-edit i {
    color: #6c757d !important; /* Simple gray color */
}

.table-injaz .injaz-btn-edit:hover,
.table .injaz-btn-edit:hover i,
.table .injaz-btn-edit:focus,
.table .injaz-btn-edit:focus i,
.table .injaz-btn-edit:active,
.table .injaz-btn-edit:active i,
.table .injaz-btn-edit:visited,
.table .injaz-btn-edit:visited i {
    color: #5a6268 !important; /* Slightly darker gray on hover/focus/active */
    background: none !important; /* Remove any background color */
    text-decoration: none !important; /* Remove any underlines */
    outline: none !important; /* Remove focus outline */
    border: none !important; /* Remove any borders */
    box-shadow: none !important; /* Remove any shadows */
}

.table-injaz .injaz-btn-delete i,
.table .injaz-btn-delete i {
    color: #D33C40 !important;
}

.table-injaz .injaz-btn-delete:hover i,
.table .injaz-btn-delete:hover i {
    color: #B52D32 !important; /* Darker red on hover */
}

.table-injaz .injaz-btn-success i,
.table .injaz-btn-success i,
.table-injaz .injaz-btn-green i,
.table .injaz-btn-green i {
    color: #73CA00 !important;
}

.table-injaz .injaz-btn-success:hover i,
.table .injaz-btn-success:hover i,
.table-injaz .injaz-btn-green:hover i,
.table .injaz-btn-green:hover i {
    color: #5EA800 !important; /* Darker green on hover */
}

.table-injaz .injaz-btn-danger i,
.table .injaz-btn-danger i {
    color: #D33C40 !important;
}

.table-injaz .injaz-btn-danger:hover i,
.table .injaz-btn-danger:hover i {
    color: #B52D32 !important; /* Darker red on hover */
}

/* Clean styling for deactivate buttons - no background */
.table-injaz .injaz-btn[style*="background-color: #FFF4E5"],
.table .injaz-btn[style*="background-color: #FFF4E5"] {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    opacity: 0.7 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
}

.table-injaz .injaz-btn[style*="background-color: #FFF4E5"]:hover,
.table .injaz-btn[style*="background-color: #FFF4E5"]:hover {
    background: none !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

.table-injaz .injaz-btn[style*="background-color: #FFF4E5"] i,
.table .injaz-btn[style*="background-color: #FFF4E5"] i {
    color: #F5A623 !important; /* Orange icon color */
}

.table-injaz .injaz-btn[style*="background-color: #FFF4E5"]:hover i,
.table .injaz-btn[style*="background-color: #FFF4E5"]:hover i {
    color: #E8960F !important; /* Darker orange on hover */
}

/* Ensure activate buttons work properly */
.table-injaz .injaz-btn-green,
.table .injaz-btn-green {
    background: none !important;
    border: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
}

.table-injaz .injaz-btn-green:hover,
.table .injaz-btn-green:hover {
    transform: scale(1.1) !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
}



.tiny-progress-wrapper {
  max-width: 300px;
  margin-bottom: 2rem;
}

.tiny-progress {
  width: 100%;
  background-color: #f1f3f5;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  height: 12px;
  margin-bottom: 0.4rem;
}

.tiny-progress-bar {
  height: 100%;
  background-color: #73CA00;
  transition: width 0.4s ease;
}

.tiny-progress-label {
  font-size: 0.85rem;
  color: #617B85;
  font-weight: 500;
}

.injaz-modal-success-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  z-index: 10; /* ensure it sits above modal content */
}

.injaz-modal-success-message {
  background-color: white;
  border: 2px solid #73CA00;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  animation: fadeInScale 0.3s ease;
  max-width: 300px;
}

.injaz-success-icon-circle {
  width: 64px;
  height: 64px;
  background-color: #73CA00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.injaz-success-icon-circle span {
  font-size: 2rem;
  color: white;
  font-weight: bold;
}

.injaz-modal-success-message h3 {
  font-size: 1.25rem;
  color: #00274F;
  margin-bottom: 0.5rem;
}

.injaz-modal-success-message p {
  font-size: 0.9rem;
  color: #617B85;
  margin: 0;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.injaz-modal-failure-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  z-index: 10;
}

.injaz-modal-failure-message {
  background-color: white;
  border: 2px solid #D33C40;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  animation: fadeInScale 0.3s ease;
  max-width: 300px;
}

.injaz-failure-icon-circle {
  width: 64px;
  height: 64px;
  background-color: #D33C40;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.injaz-failure-icon-circle span {
  font-size: 2rem;
  color: white;
  font-weight: bold;
}

.injaz-modal-failure-message h3 {
  font-size: 1.25rem;
  color: #00274F;
  margin-bottom: 0.5rem;
}

.injaz-modal-failure-message p {
  font-size: 0.9rem;
  color: #617B85;
  margin: 0;
}

.injaz-search-bar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #DDE3E9;
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.injaz-search-bar:focus-within {
  border-color: #73CA00;
  box-shadow: 0 0 0 3px rgba(115, 202, 0, 0.2);
}

.injaz-search-bar input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 0.95rem;
  font-family: 'General Sans', sans-serif;
  color: #00274F;
  background-color: transparent;
  padding-left: 0.5rem;
}

.injaz-search-bar svg {
  width: 18px;
  height: 18px;
  stroke: #617B85;
}

.badge-overachievement {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: linear-gradient(135deg, #FFD700, #FFC200);
  color: #fff;
  font-family: 'General Sans', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
  overflow: hidden;
}

/* Shine animation */
.badge-overachievement::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -50%;
  width: 50%;
  height: 400%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(45deg);
  animation: oa-shine 2s infinite;
}

@keyframes oa-shine {
  0%   { transform: rotate(45deg) translateX(-200%); }
  100% { transform: rotate(45deg) translateX(200%); }
}

/* Optional icon styling */
.badge-overachievement .icon {
  font-size: 0.75rem;
  line-height: 1;
}

/* Cascaded KPI Cards Enhancement */
.cascaded-kpi-item {
  transition: all 0.2s ease;
}

.cascaded-kpi-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Link KPI Button Consistency */
.cascaded-kpi-item .injaz-btn-edit {
  min-width: 120px;
  max-width: 120px;
  height: 40px;
  text-align: center;
  margin-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem !important;
  color: white !important;
}

/* Compact Floating Buttons */
.floating-buttons-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 140px;
}

.floating-weight-indicator {
  background: white;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #E7F5F7;
  transition: all 0.2s ease;
}

.floating-weight-indicator:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.weight-icon {
  margin-bottom: 6px;
}

.weight-icon i {
  font-size: 1.1rem;
}

.weight-value {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1;
}

.weight-label {
  font-size: 0.7rem;
  color: #617B85;
  line-height: 1.2;
  display: block;
}

.floating-submit-btn {
  background: linear-gradient(135deg, #73CA00, #5fb000);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(115, 202, 0, 0.3);
  text-decoration: none;
  min-height: 44px;
}

.floating-submit-btn:hover {
  background: linear-gradient(135deg, #5fb000, #4a9000);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(115, 202, 0, 0.4);
  color: white;
}

.floating-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(115, 202, 0, 0.3);
}

.floating-submit-btn i {
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .floating-buttons-container {
    bottom: 15px;
    right: 15px;
    max-width: 120px;
  }
  
  .floating-weight-indicator {
    padding: 10px;
  }
  
  .floating-submit-btn {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  
  .weight-value {
    font-size: 1rem;
  }
  
  .weight-label {
    font-size: 0.65rem;
  }
}

/* KPI Cascade Indicator */
.cascade-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 8px;
  cursor: help;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.cascade-indicator:hover {
  background: linear-gradient(135deg, #5B5FD1, #4338CA);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
}

.cascade-indicator i {
  font-size: 0.7rem;
}

.cascade-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

/* Enhanced Cascade Tooltip Styling */
.cascade-tooltip-header {
  font-weight: 600;
  color: #00274F;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E7F5F7;
  font-size: 0.85rem;
}

.cascade-tooltip-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 0.8rem;
  color: #00274F;
  line-height: 1.3;
}

.cascade-tooltip-item:not(:last-child) {
  border-bottom: 1px solid #F8F9FF;
}

.cascade-tooltip-dept {
  color: #617B85;
  font-size: 0.75rem;
  font-style: italic;
  margin-left: 4px;
}

/* Custom tooltip styling for cascade indicators */
.tooltip-inner {
  background-color: white !important;
  color: #00274F !important;
  border: 1px solid #E7F5F7 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  max-width: 280px !important;
  text-align: left !important;
  font-family: 'General Sans', sans-serif !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #E7F5F7 !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #E7F5F7 !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #E7F5F7 !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #E7F5F7 !important;
}

/* ===== CASCADED KPI MODAL STYLES ===== */
#linkCascadedKpiModal .injaz-modal {
  max-width: 900px; /* Wider for better single-column layout */
}

#linkCascadedKpiModal .list-group-item {
  border: 1px solid #e3e6f0;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

#linkCascadedKpiModal .list-group-item:hover {
  background-color: #f8f9fc;
  border-color: #6366F1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

#linkCascadedKpiModal .list-group-item input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: #6366F1;
}

#linkCascadedKpiModal .form-control,
#linkCascadedKpiModal .form-select {
  border: 1px solid #DDE3E9;
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#linkCascadedKpiModal .form-control:focus,
#linkCascadedKpiModal .form-select:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

#linkCascadedKpiModal .alert-info {
  background: linear-gradient(135deg, #E7F5F7 0%, #D4F1F4 100%);
  border: 1px solid #6366F1;
  border-radius: 0.75rem;
  color: #00274F;
  padding: 1rem;
}

#linkCascadedKpiModal .badge {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
}

#linkCascadedKpiModal .bg-secondary {
  background: linear-gradient(135deg, #6c757d, #5a6268) !important;
}

#linkCascadedKpiModal .bg-light {
  background: #f8f9fa !important;
  border: 1px solid #dee2e6;
}

#linkCascadedKpiModal .text-dark {
  color: #495057 !important;
}

/* Enhanced spacing for single-column layout */
#linkCascadedKpiModal .card-white {
  padding: 1.5rem;
  margin-bottom: 1rem;
}

#linkCascadedKpiModal .row {
  margin-bottom: 0;
}

#linkCascadedKpiModal .col-md-6 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Responsive adjustments for single-column */
@media (max-width: 768px) {
  #linkCascadedKpiModal .injaz-modal {
    max-width: 95vw;
    margin: 10px;
  }
  
  #linkCascadedKpiModal .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  #linkCascadedKpiModal .col-md-6 {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;
  }
}

/* ===== END CASCADED KPI MODAL STYLES ===== */

/* =============================================================================
   SCORING BUTTONS - Subtle and Professional Styling
   ============================================================================= */

/* Score Button - Make it more subtle with transparent background */
.injaz-btn[style*="background-color: #FFC107"],
.injaz-btn[style*="background-color:#FFC107"] {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #856404 !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    font-weight: 500 !important;
}

.injaz-btn[style*="background-color: #FFC107"]:hover,
.injaz-btn[style*="background-color:#FFC107"]:hover {
    background-color: rgba(255, 193, 7, 0.25) !important;
    color: #664504 !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

/* External Button - Make it more subtle with transparent background */
.injaz-btn[style*="background-color: #6366F1"],
.injaz-btn[style*="background-color:#6366F1"] {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #4338ca !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    font-weight: 500 !important;
}

.injaz-btn[style*="background-color: #6366F1"]:hover,
.injaz-btn[style*="background-color:#6366F1"]:hover {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #3730a3 !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

/* ===== END SCORING BUTTONS STYLES ===== */

/* Card Icon Spacing Improvements - Added for better visual spacing */
.card-icon.me-2 {
    margin-right: 1.5rem !important; /* More space between icon and text */
}

.card-icon.me-3 {
    margin-right: 1.5rem !important; /* Consistent spacing */
}

/* General icon spacing improvements */
.card-icon {
    margin-right: 1.5rem !important;
}

/* RTL support for Arabic language */
html[dir="rtl"] .card-icon.me-2,
html[dir="rtl"] .card-icon.me-3,
html[dir="rtl"] .card-icon {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .card-icon.me-2,
    .card-icon.me-3,
    .card-icon {
        margin-right: 1rem !important; /* Slightly less spacing on mobile */
    }
    
    html[dir="rtl"] .card-icon.me-2,
    html[dir="rtl"] .card-icon.me-3,
    html[dir="rtl"] .card-icon {
        margin-right: 0 !important;
        margin-left: 1rem !important;
    }
}

/* Link Cascaded Goals Page Styles */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F0F0F0;
}

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

.info-label {
    font-weight: 500;
    color: #666;
    min-width: 80px;
}

.info-value {
    font-weight: 600;
    color: #00274F;
}

.info-box {
    background-color: #F8F9FA;
    border: 1px solid #E9ECEF;
    border-radius: 0.375rem;
    padding: 1rem;
    color: #495057;
}

.goals-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.goal-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #E9ECEF;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #FAFAFA;
}

.goal-item:hover {
    border-color: #73CA00;
    background-color: #F8FFF8;
}

.goal-item input[type="checkbox"] {
    margin-top: 0.25rem;
    accent-color: #73CA00;
}

.goal-content {
    flex: 1;
}

.goal-name {
    font-weight: 600;
    color: #00274F;
    margin-bottom: 0.25rem;
}

.goal-description {
    color: #666;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.goal-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge-light {
    background-color: #F8F9FA;
    color: #495057;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* TABLE ACTION BUTTONS ONLY - NOT MODALS */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 10000 !important;
    color: #D33C40 !important;
}

/* TABLE ACTION BUTTON ICONS ONLY - NOT MODALS */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) i,
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) i,
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete i,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    color: inherit !important;
}

/* TABLE ACTION BUTTON HOVER ONLY - NOT MODALS */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover,
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover,
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover,
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    color: #B52D32 !important;
    z-index: 10001 !important;
}

/* MEGA ULTRA NUCLEAR: Force ALL delete buttons in table contexts for English */
body:not([dir="rtl"]) table button.injaz-btn-delete,
html:not([dir="rtl"]) table button.injaz-btn-delete,
body:not([dir="rtl"]) .table button.injaz-btn-delete,
html:not([dir="rtl"]) .table button.injaz-btn-delete,
body:not([dir="rtl"]) .table-injaz button.injaz-btn-delete,
html:not([dir="rtl"]) .table-injaz button.injaz-btn-delete,
body:not([dir="rtl"]) td button.injaz-btn-delete,
html:not([dir="rtl"]) td button.injaz-btn-delete,
body:not([dir="rtl"]) tbody button.injaz-btn-delete,
html:not([dir="rtl"]) tbody button.injaz-btn-delete,
body:not([dir="rtl"]) .d-flex button.injaz-btn-delete,
html:not([dir="rtl"]) .d-flex button.injaz-btn-delete {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 10000 !important;
    color: #D33C40 !important;
}

/* MEGA ULTRA NUCLEAR: Force ALL delete button icons in table contexts for English */
body:not([dir="rtl"]) table button.injaz-btn-delete i,
html:not([dir="rtl"]) table button.injaz-btn-delete i,
body:not([dir="rtl"]) .table button.injaz-btn-delete i,
html:not([dir="rtl"]) .table button.injaz-btn-delete i,
body:not([dir="rtl"]) .table-injaz button.injaz-btn-delete i,
html:not([dir="rtl"]) .table-injaz button.injaz-btn-delete i,
body:not([dir="rtl"]) td button.injaz-btn-delete i,
html:not([dir="rtl"]) td button.injaz-btn-delete i,
body:not([dir="rtl"]) tbody button.injaz-btn-delete i,
html:not([dir="rtl"]) tbody button.injaz-btn-delete i,
body:not([dir="rtl"]) .d-flex button.injaz-btn-delete i,
html:not([dir="rtl"]) .d-flex button.injaz-btn-delete i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    color: inherit !important;
}

/* FINAL ULTRA SPECIFIC: Target exact delete button pattern from HTML */
body:not([dir="rtl"]) button[class="injaz-btn injaz-btn-delete"],
html:not([dir="rtl"]) button[class="injaz-btn injaz-btn-delete"],
body:not([dir="rtl"]) button.injaz-btn.injaz-btn-delete,
html:not([dir="rtl"]) button.injaz-btn.injaz-btn-delete,
body:not([dir="rtl"]) button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"],
html:not([dir="rtl"]) button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"] {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 10002 !important;
    color: #D33C40 !important;
}

/* Fix icons for final ultra specific delete buttons */
body:not([dir="rtl"]) button[class="injaz-btn injaz-btn-delete"] i,
html:not([dir="rtl"]) button[class="injaz-btn injaz-btn-delete"] i,
body:not([dir="rtl"]) button.injaz-btn.injaz-btn-delete i,
html:not([dir="rtl"]) button.injaz-btn.injaz-btn-delete i,
body:not([dir="rtl"]) button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"] i,
html:not([dir="rtl"]) button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"] i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    color: inherit !important;
}



/* ABSOLUTE FINAL FALLBACK: Force any button with injaz-btn class in tables - NOT MODALS */
table:not(.injaz-modal *):not(.modal *) button[class*="injaz-btn"] {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

table:not(.injaz-modal *):not(.modal *) button[class*="injaz-btn"] i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* ULTIMATE FINAL CATCH-ALL: Force English delete buttons with language targeting */
html[lang="en"] button.injaz-btn-delete,
html[lang="en"] .injaz-btn-delete,
body[lang="en"] button.injaz-btn-delete,
body[lang="en"] .injaz-btn-delete,
html:lang(en) button.injaz-btn-delete,
html:lang(en) .injaz-btn-delete {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 10003 !important;
    color: #D33C40 !important;
}

/* Icons for ultimate final catch-all */
html[lang="en"] button.injaz-btn-delete i,
html[lang="en"] .injaz-btn-delete i,
body[lang="en"] button.injaz-btn-delete i,
body[lang="en"] .injaz-btn-delete i,
html:lang(en) button.injaz-btn-delete i,
html:lang(en) .injaz-btn-delete i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    color: inherit !important;
}

/* RESTORE ORIGINAL MODAL BUTTON STYLING - Remove all overrides for modals */

/* START: Review Periods Tab Button Styling */
/* Target all injaz-btn buttons in the periods tab - same styling as table buttons */
#periods .injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *):not(.injaz-modal *):not(.modal *),
#periods .injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):not(.injaz-modal *):not(.modal *),
#periods .injaz-btn-green:not(.injaz-modal-footer *):not(.modal-footer *):not(.injaz-modal *):not(.modal *),
#periods .injaz-btn:not(.injaz-modal-footer *):not(.modal-footer *):not(.injaz-modal *):not(.modal *),
#periods .injaz-btn-secondary:not(.injaz-modal-footer *):not(.modal-footer *):not(.injaz-modal *):not(.modal *),
#periods .injaz-btn-success:not(.injaz-modal-footer *):not(.modal-footer *):not(.injaz-modal *):not(.modal *),
#periods .injaz-btn-danger:not(.injaz-modal-footer *):not(.modal-footer *):not(.injaz-modal *):not(.modal *),
#periods .injaz-btn-add:not(.injaz-modal-footer *):not(.modal-footer *):not(.injaz-modal *):not(.modal *) {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    z-index: 1000 !important;
}

/* Icon styling for periods tab buttons */
#periods .injaz-btn i,
#periods .injaz-btn-edit i,
#periods .injaz-btn-delete i,
#periods .injaz-btn-green i,
#periods .injaz-btn-secondary i,
#periods .injaz-btn-success i,
#periods .injaz-btn-danger i,
#periods .injaz-btn-add i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    /* Remove forced white color - let specific colors apply */
}

/* Specific button colors for periods tab - MATCH YEARS TAB EXACTLY */
#periods .injaz-btn-edit {
    background: none !important;
    border: none !important;
    opacity: 0.7 !important;
}

#periods .injaz-btn-edit i {
    color: #6c757d !important; /* Same gray as Years tab */
}

#periods .injaz-btn-delete {
    background: none !important;
    border: none !important;
    opacity: 0.7 !important;
}

#periods .injaz-btn-delete i {
    color: #D33C40 !important; /* Same red as Years tab */
}

#periods .injaz-btn-green {
    background: none !important;
    border: none !important;
    opacity: 0.7 !important;
}

#periods .injaz-btn-green i {
    color: #73CA00 !important; /* Same green as Years tab */
}

#periods .injaz-btn-secondary {
    background: none !important;
    border: none !important;
    opacity: 0.7 !important;
}

#periods .injaz-btn-secondary i {
    color: #6c757d !important; /* Same gray as Years tab */
}

#periods .injaz-btn[style*="background-color: #FFF4E5"] {
    background: none !important;
    border: none !important;
    opacity: 0.7 !important;
}

#periods .injaz-btn[style*="background-color: #FFF4E5"] i {
    color: #F5A623 !important; /* Same orange as Years tab */
}

/* Hover effects for periods tab buttons - MATCH YEARS TAB EXACTLY */
#periods .injaz-btn-edit:hover {
    background: none !important;
    border: none !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

#periods .injaz-btn-edit:hover i {
    color: #5a6268 !important; /* Darker gray on hover */
}

#periods .injaz-btn-delete:hover {
    background: none !important;
    border: none !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

#periods .injaz-btn-delete:hover i {
    color: #B52D32 !important; /* Darker red on hover */
}

#periods .injaz-btn-green:hover {
    background: none !important;
    border: none !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

#periods .injaz-btn-green:hover i {
    color: #5EA800 !important; /* Darker green on hover */
}

#periods .injaz-btn-secondary:hover {
    background: none !important;
    border: none !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

#periods .injaz-btn-secondary:hover i {
    color: #5a6268 !important; /* Darker gray on hover */
}

#periods .injaz-btn[style*="background-color: #FFF4E5"]:hover {
    background: none !important;
    border: none !important;
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

#periods .injaz-btn[style*="background-color: #FFF4E5"]:hover i {
    color: #E8960F !important; /* Darker orange on hover */
}

/* Override inline styles for periods tab buttons */
#periods button.injaz-btn[style*="padding"],
#periods button.injaz-btn-edit[style*="padding"],
#periods button.injaz-btn-delete[style*="padding"],
#periods button.injaz-btn-green[style*="padding"],
#periods button.injaz-btn-secondary[style*="padding"] {
    padding: 0.5rem !important;
    width: 32px !important;
    height: 32px !important;
}

/* ULTIMATE FIX: Ensure all action buttons in periods tab are clickable */
body #periods button.injaz-btn:not(.injaz-modal-footer *):not(.modal-footer *),
body #periods button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
body #periods button.injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *),
body #periods button.injaz-btn-green:not(.injaz-modal-footer *):not(.modal-footer *),
body #periods button.injaz-btn-secondary:not(.injaz-modal-footer *):not(.modal-footer *),
body #periods button[onclick*="deleteReviewPeriod"]:not(.injaz-modal-footer *):not(.modal-footer *),
body #periods button[onclick*="editPeriod"]:not(.injaz-modal-footer *):not(.modal-footer *),
body #periods button[onclick*="showActivateReviewPeriodModal"]:not(.injaz-modal-footer *):not(.modal-footer *),
body #periods button[onclick*="showDeactivateReviewPeriodModal"]:not(.injaz-modal-footer *):not(.modal-footer *) {
    padding: 0.5rem !important;
    margin: 0 0.125rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    z-index: 10000 !important;
}

/* Fix icons inside periods tab onclick buttons */
body #periods button.injaz-btn:not(.injaz-modal-footer *):not(.modal-footer *) i,
body #periods button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *) i,
body #periods button.injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *) i,
body #periods button.injaz-btn-green:not(.injaz-modal-footer *):not(.modal-footer *) i,
body #periods button.injaz-btn-secondary:not(.injaz-modal-footer *):not(.modal-footer *) i,
body #periods button[onclick*="deleteReviewPeriod"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
body #periods button[onclick*="editPeriod"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
body #periods button[onclick*="showActivateReviewPeriodModal"]:not(.injaz-modal-footer *):not(.modal-footer *) i,
body #periods button[onclick*="showDeactivateReviewPeriodModal"]:not(.injaz-modal-footer *):not(.modal-footer *) i {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* END: Review Periods Tab Button Styling */

/* START: Work Development Plans Tab Button Styling */
#workplans .injaz-btn-edit,
#workplans .injaz-btn-delete,
#workplans .injaz-btn-secondary {
    background: none !important;
    border: none !important;
    opacity: 0.7 !important;
    padding: 0.5rem !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

#workplans .injaz-btn-edit i,
#workplans .injaz-btn-secondary i {
    color: #6c757d !important;
    width: 16px;
    height: 16px;
    display: flex;
    pointer-events: none;
}

#workplans .injaz-btn-delete i {
    color: #D33C40 !important;
    width: 16px;
    height: 16px;
    display: flex;
    pointer-events: none;
}

/* Hover effects for workplans buttons */
#workplans .injaz-btn-edit:hover,
#workplans .injaz-btn-secondary:hover {
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

#workplans .injaz-btn-edit:hover i,
#workplans .injaz-btn-secondary:hover i {
    color: #5a6268 !important;
}

#workplans .injaz-btn-delete:hover {
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

#workplans .injaz-btn-delete:hover i {
    color: #B52D32 !important;
}

/* Ensure high specificity for clickable buttons in workplans tab */
body #workplans a.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
body #workplans a.injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *),
body #workplans a.injaz-btn-secondary:not(.injaz-modal-footer *):not(.modal-footer *),
body #workplans button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *),
body #workplans button.injaz-btn-edit:not(.injaz-modal-footer *):not(.modal-footer *) {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10000 !important;
}
/* END: Work Development Plans Tab Button Styling */

/* Fix SVG icons in delete buttons on hover */
table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
.table button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
.table-injaz button.injaz-btn-delete:not(.injaz-modal-footer *):not(.modal-footer *):hover img,
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover img,
tbody:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete:hover img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2718%) hue-rotate(340deg) brightness(85%) contrast(92%) !important;
}

/* ===== GOAL ACTION BUTTONS (in d-flex containers) - NOT TABLES ===== */
/* These buttons use white SVG icons and need colored backgrounds to be visible */

/* Goal action buttons in d-flex containers - give them proper backgrounds */
.d-flex button.injaz-btn-edit[style*="padding: 0.25rem 0.5rem"],
.d-flex button.injaz-btn-add[style*="padding: 0.25rem 0.5rem"],
.d-flex button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"] {
    background: none !important;
    border: none !important;
    color: white !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease !important;
    opacity: 0.8 !important;
}

/* Specific background colors for goal action buttons */
.d-flex button.injaz-btn-edit[style*="padding: 0.25rem 0.5rem"] {
    background-color: #298B9A !important;
}

.d-flex button.injaz-btn-add[style*="padding: 0.25rem 0.5rem"] {
    background-color: #298B9A !important;
}

.d-flex button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"] {
    background-color: #D33C40 !important;
}

/* Hover effects for goal action buttons */
.d-flex button.injaz-btn-edit[style*="padding: 0.25rem 0.5rem"]:hover {
    background-color: #1f6d78 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(41, 139, 154, 0.3) !important;
}

.d-flex button.injaz-btn-add[style*="padding: 0.25rem 0.5rem"]:hover {
    background-color: #1f6d78 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(41, 139, 154, 0.3) !important;
}

.d-flex button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"]:hover {
    background-color: #b53033 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(211, 60, 64, 0.3) !important;
}

/* Ensure SVG icons in goal action buttons are properly sized and white */
.d-flex button.injaz-btn-edit[style*="padding: 0.25rem 0.5rem"] img,
.d-flex button.injaz-btn-add[style*="padding: 0.25rem 0.5rem"] img,
.d-flex button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"] img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) invert(1) !important;
    pointer-events: none !important;
}

/* AI button specific styling (has different padding and background) */
.d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"] {
    background-color: #E7F5F7 !important;
    border: 1px solid #E7F5F7 !important;
    color: #02074F !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease !important;
    opacity: 0.8 !important;
}

.d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"]:hover {
    background-color: #d4f1f4 !important;
    border-color: #d4f1f4 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(231, 245, 247, 0.5) !important;
}

/* AI button icon styling (no filter needed as it's already colored) */
.d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"] img {
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
}

/* ===== OVERRIDE PROBLEMATIC RULES FOR GOAL ACTION BUTTONS ===== */
/* These rules must come after the generic button rules to override them properly */

/* NUCLEAR OVERRIDE - Maximum specificity for goal action buttons */
/* Edit button - always visible */
body .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"][style*="padding: 0.25rem 0.5rem"],
html .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"][style*="padding: 0.25rem 0.5rem"],
body:not([dir="rtl"]) .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"][style*="padding: 0.25rem 0.5rem"],
html:not([dir="rtl"]) .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"][style*="padding: 0.25rem 0.5rem"],
.kpi-item .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"],
.card-white .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"] {
    background-color: #298B9A !important;
    border: none !important;
    color: white !important;
    border-radius: 0.25rem !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
}

/* Add button - always visible */
body .d-flex button.injaz-btn-add[onclick*="openMeasureModal"][style*="padding: 0.25rem 0.5rem"],
html .d-flex button.injaz-btn-add[onclick*="openMeasureModal"][style*="padding: 0.25rem 0.5rem"],
body:not([dir="rtl"]) .d-flex button.injaz-btn-add[onclick*="openMeasureModal"][style*="padding: 0.25rem 0.5rem"],
html:not([dir="rtl"]) .d-flex button.injaz-btn-add[onclick*="openMeasureModal"][style*="padding: 0.25rem 0.5rem"],
.kpi-item .d-flex button.injaz-btn-add[onclick*="openMeasureModal"],
.card-white .d-flex button.injaz-btn-add[onclick*="openMeasureModal"] {
    background-color: #73CA00 !important;
    border: none !important;
    color: white !important;
    border-radius: 0.25rem !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
}

/* Delete button - always visible - DISABLED to allow new light styling */
/*
body .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"][style*="padding: 0.25rem 0.5rem"],
html .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"][style*="padding: 0.25rem 0.5rem"],
body:not([dir="rtl"]) .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"][style*="padding: 0.25rem 0.5rem"],
html:not([dir="rtl"]) .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"][style*="padding: 0.25rem 0.5rem"],
.kpi-item .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"],
.card-white .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"] {
    background-color: #D33C40 !important;
    border: none !important;
    color: white !important;
    border-radius: 0.25rem !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
}
*/

/* Override hover state with higher specificity - DISABLED for new light styling */
/*
body .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"][style*="padding: 0.25rem 0.5rem"]:hover,
html .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"][style*="padding: 0.25rem 0.5rem"]:hover,
body:not([dir="rtl"]) .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"][style*="padding: 0.25rem 0.5rem"]:hover,
html:not([dir="rtl"]) .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"][style*="padding: 0.25rem 0.5rem"]:hover,
body button.injaz-btn-delete[onclick*="openDeleteKpiModal"]:hover {
    background-color: #b53033 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(211, 60, 64, 0.3) !important;
    color: white !important;
}

Fix the SVG icons for delete buttons with higher specificity 
body .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"] img,
html .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"] img,
body:not([dir="rtl"]) .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"] img,
html:not([dir="rtl"]) .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"] img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) invert(1) !important;
    pointer-events: none !important;
}
*/

/* ===== RTL (ARABIC) VERSION - GOAL ACTION BUTTONS ===== */
/* Fix visibility for edit, add, and delete buttons in Arabic */

/* Edit button for RTL */
body[dir="rtl"] .d-flex button.injaz-btn-edit[style*="padding: 0.25rem 0.5rem"],
html[dir="rtl"] .d-flex button.injaz-btn-edit[style*="padding: 0.25rem 0.5rem"],
body[dir="rtl"] .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"],
html[dir="rtl"] .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"] {
    background-color: #298B9A !important;
    border: none !important;
    color: white !important;
    border-radius: 0.25rem !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
}

/* Add button for RTL */
body[dir="rtl"] .d-flex button.injaz-btn-add[style*="padding: 0.25rem 0.5rem"],
html[dir="rtl"] .d-flex button.injaz-btn-add[style*="padding: 0.25rem 0.5rem"],
body[dir="rtl"] .d-flex button.injaz-btn-add[onclick*="openMeasureModal"],
html[dir="rtl"] .d-flex button.injaz-btn-add[onclick*="openMeasureModal"] {
    background-color: #73CA00 !important;
    border: none !important;
    color: white !important;
    border-radius: 0.25rem !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
}

/* Delete button for RTL - DISABLED for new light styling */
/*
body[dir="rtl"] .d-flex button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"],
html[dir="rtl"] .d-flex button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"],
body[dir="rtl"] .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"],
html[dir="rtl"] .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"] {
    background-color: #D33C40 !important;
    border: none !important;
    color: white !important;
    border-radius: 0.25rem !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
}
*/

/* Hover states for RTL buttons */
body[dir="rtl"] .d-flex button.injaz-btn-edit[style*="padding: 0.25rem 0.5rem"]:hover,
html[dir="rtl"] .d-flex button.injaz-btn-edit[style*="padding: 0.25rem 0.5rem"]:hover,
body[dir="rtl"] .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"]:hover,
html[dir="rtl"] .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"]:hover {
    background-color: #1f6d78 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(41, 139, 154, 0.3) !important;
    color: white !important;
}

body[dir="rtl"] .d-flex button.injaz-btn-add[style*="padding: 0.25rem 0.5rem"]:hover,
html[dir="rtl"] .d-flex button.injaz-btn-add[style*="padding: 0.25rem 0.5rem"]:hover,
body[dir="rtl"] .d-flex button.injaz-btn-add[onclick*="openMeasureModal"]:hover,
html[dir="rtl"] .d-flex button.injaz-btn-add[onclick*="openMeasureModal"]:hover {
    background-color: #5fb000 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(115, 202, 0, 0.3) !important;
    color: white !important;
}

/*
body[dir="rtl"] .d-flex button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"]:hover,
html[dir="rtl"] .d-flex button.injaz-btn-delete[style*="padding: 0.25rem 0.5rem"]:hover,
body[dir="rtl"] .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"]:hover,
html[dir="rtl"] .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"]:hover {
    background-color: #b53033 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(211, 60, 64, 0.3) !important;
    color: white !important;
}
*/

/* Fix SVG icons for all RTL buttons - DELETE BUTTON RULES DISABLED */
/*
body[dir="rtl"] .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"] img,
html[dir="rtl"] .d-flex button.injaz-btn-edit[onclick*="openEditKpiModal"] img,
body[dir="rtl"] .d-flex button.injaz-btn-add[onclick*="openMeasureModal"] img,
html[dir="rtl"] .d-flex button.injaz-btn-add[onclick*="openMeasureModal"] img,
body[dir="rtl"] .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"] img,
html[dir="rtl"] .d-flex button.injaz-btn-delete[onclick*="openDeleteKpiModal"] img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) invert(1) !important;
    pointer-events: none !important;
}
*/

/* AI button for RTL */
body[dir="rtl"] .d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"],
html[dir="rtl"] .d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"] {
    background-color: #E7F5F7 !important;
    border: 1px solid #E7F5F7 !important;
    color: #02074F !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease !important;
    opacity: 0.8 !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
}

body[dir="rtl"] .d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"]:hover,
html[dir="rtl"] .d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"]:hover {
    background-color: #d4f1f4 !important;
    border-color: #d4f1f4 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(231, 245, 247, 0.5) !important;
}

body[dir="rtl"] .d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"] img,
html[dir="rtl"] .d-flex button.injaz-btn[style*="padding: 0.125rem 0.25rem"][style*="background-color: #E7F5F7"] img {
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
}

/* ===== ABSOLUTE FINAL OVERRIDE - GOAL ACTION BUTTONS VISIBILITY FIX ===== */
/* This MUST be at the end of the file to ensure maximum specificity */

/* Force all goal action buttons to be visible at all times */
.kpi-item .d-flex button.injaz-btn-edit[style*="color: white"],
.card-white .d-flex button.injaz-btn-edit[style*="color: white"],
[data-kpi-section] .d-flex button.injaz-btn-edit[style*="color: white"],
body .kpi-item button.injaz-btn-edit[style*="color: white"],
html .kpi-item button.injaz-btn-edit[style*="color: white"] {
    background-color: #298B9A !important;
    opacity: 1 !important;
}

.kpi-item .d-flex button.injaz-btn-add[style*="color: white"],
.card-white .d-flex button.injaz-btn-add[style*="color: white"],
[data-kpi-section] .d-flex button.injaz-btn-add[style*="color: white"],
body .kpi-item button.injaz-btn-add[style*="color: white"],
html .kpi-item button.injaz-btn-add[style*="color: white"] {
    background-color: #73CA00 !important;
    opacity: 1 !important;
}

.kpi-item .d-flex button.injaz-btn-delete[style*="color: white"],
.card-white .d-flex button.injaz-btn-delete[style*="color: white"],
[data-kpi-section] .d-flex button.injaz-btn-delete[style*="color: white"],
body .kpi-item button.injaz-btn-delete[style*="color: white"],
html .kpi-item button.injaz-btn-delete[style*="color: white"] {
    background-color: #D33C40 !important;
    opacity: 1 !important;
}

/* Hover states remain the same but with full opacity */
.kpi-item .d-flex button.injaz-btn-edit[style*="color: white"]:hover,
.card-white .d-flex button.injaz-btn-edit[style*="color: white"]:hover {
    background-color: #1f6d78 !important;
    opacity: 1 !important;
}

.kpi-item .d-flex button.injaz-btn-add[style*="color: white"]:hover,
.card-white .d-flex button.injaz-btn-add[style*="color: white"]:hover {
    background-color: #5fb000 !important;
    opacity: 1 !important;
}

.kpi-item .d-flex button.injaz-btn-delete[style*="color: white"]:hover,
.card-white .d-flex button.injaz-btn-delete[style*="color: white"]:hover {
    background-color: #b53033 !important;
    opacity: 1 !important;
}

/* RTL (Arabic) - Force visibility */
body[dir="rtl"] .kpi-item .d-flex button.injaz-btn-edit[style*="color: white"],
html[dir="rtl"] .kpi-item .d-flex button.injaz-btn-edit[style*="color: white"],
body[dir="rtl"] .card-white .d-flex button.injaz-btn-edit[style*="color: white"],
html[dir="rtl"] .card-white .d-flex button.injaz-btn-edit[style*="color: white"],
body[dir="rtl"] [data-kpi-section] .d-flex button.injaz-btn-edit[style*="color: white"],
html[dir="rtl"] [data-kpi-section] .d-flex button.injaz-btn-edit[style*="color: white"] {
    background-color: #298B9A !important;
    opacity: 1 !important;
}

body[dir="rtl"] .kpi-item .d-flex button.injaz-btn-add[style*="color: white"],
html[dir="rtl"] .kpi-item .d-flex button.injaz-btn-add[style*="color: white"],
body[dir="rtl"] .card-white .d-flex button.injaz-btn-add[style*="color: white"],
html[dir="rtl"] .card-white .d-flex button.injaz-btn-add[style*="color: white"],
body[dir="rtl"] [data-kpi-section] .d-flex button.injaz-btn-add[style*="color: white"],
html[dir="rtl"] [data-kpi-section] .d-flex button.injaz-btn-add[style*="color: white"] {
    background-color: #73CA00 !important;
    opacity: 1 !important;
}

body[dir="rtl"] .kpi-item .d-flex button.injaz-btn-delete[style*="color: white"],
html[dir="rtl"] .kpi-item .d-flex button.injaz-btn-delete[style*="color: white"],
body[dir="rtl"] .card-white .d-flex button.injaz-btn-delete[style*="color: white"],
html[dir="rtl"] .card-white .d-flex button.injaz-btn-delete[style*="color: white"],
body[dir="rtl"] [data-kpi-section] .d-flex button.injaz-btn-delete[style*="color: white"],
html[dir="rtl"] [data-kpi-section] .d-flex button.injaz-btn-delete[style*="color: white"] {
    background-color: #D33C40 !important;
    opacity: 1 !important;
}

/* RTL Hover states */
body[dir="rtl"] .kpi-item .d-flex button.injaz-btn-edit[style*="color: white"]:hover,
html[dir="rtl"] .kpi-item .d-flex button.injaz-btn-edit[style*="color: white"]:hover {
    background-color: #1f6d78 !important;
    opacity: 1 !important;
}

body[dir="rtl"] .kpi-item .d-flex button.injaz-btn-add[style*="color: white"]:hover,
html[dir="rtl"] .kpi-item .d-flex button.injaz-btn-add[style*="color: white"]:hover {
    background-color: #5fb000 !important;
    opacity: 1 !important;
}

body[dir="rtl"] .kpi-item .d-flex button.injaz-btn-delete[style*="color: white"]:hover,
html[dir="rtl"] .kpi-item .d-flex button.injaz-btn-delete[style*="color: white"]:hover {
    background-color: #b53033 !important;
    opacity: 1 !important;
}

/* ===== MASTER BUTTON Z-INDEX RESET ===== */
/* Reset ALL extremely high z-index values for buttons to prevent floating */
button.injaz-btn,
button.injaz-btn-delete,
button.injaz-btn-edit,
button.injaz-btn-green,
button.injaz-btn-secondary,
button[class*="injaz-btn"],
.injaz-btn,
.injaz-btn-delete,
.injaz-btn-edit,
.injaz-btn-green,
.injaz-btn-secondary,
button[onclick*="delete"],
button[onclick*="edit"],
button[title*="Delete"],
button[title*="Edit"],
.table button,
.table-injaz button,
tbody button,
tr button,
td button {
  z-index: auto !important;
  position: static !important;
}

/* Exception: Only when modals are open, use low z-index */
body.modal-open button.injaz-btn,
body.modal-open button.injaz-btn-delete,
body.modal-open button.injaz-btn-edit,
body.modal-open .injaz-btn,
body.modal-open .injaz-btn-delete,
body.modal-open .injaz-btn-edit,
.injaz-modal-backdrop.active ~ * button[class*="injaz-btn"],
.injaz-modal-backdrop.active ~ * .injaz-btn {
  z-index: 1 !important;
}

/* FINAL: Ensure buttons are inline elements, not floating (but NOT in modal footers) */
button.injaz-btn:not(.injaz-modal-footer *),
button.injaz-btn-delete:not(.injaz-modal-footer *),
button.injaz-btn-edit:not(.injaz-modal-footer *),
.injaz-btn:not(.injaz-modal-footer *),
.injaz-btn-delete:not(.injaz-modal-footer *),
.injaz-btn-edit:not(.injaz-modal-footer *) {
  display: inline-flex !important;
  position: static !important;
  z-index: auto !important;
  vertical-align: middle !important;
}

/* MODAL FOOTER BUTTON FIXES: Ensure proper injaz-btn styling in modal footers */
/* Ultra-specific selectors to override everything */
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-secondary,
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-delete,
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-green,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-secondary,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-delete,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-green,
#deleteKpiModal .injaz-modal-footer button.injaz-btn-secondary,
#deleteKpiModal .injaz-modal-footer button.injaz-btn-delete,
#deleteMeasureModal .injaz-modal-footer button.injaz-btn-secondary,
#deleteMeasureModal .injaz-modal-footer button.injaz-btn-delete,
#confirmDeleteMeasureBtn,
button#confirmDeleteMeasureBtn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.5rem 1.25rem !important;
  border: none !important;
  border-radius: 0.4rem !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  position: static !important;
  z-index: auto !important;
  vertical-align: middle !important;
  margin-right: 0.5rem !important;
  box-sizing: border-box !important;
}

/* Ultra-specific modal footer button colors - SECONDARY */
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-secondary,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-secondary,
#deleteKpiModal .injaz-modal-footer button.injaz-btn-secondary,
#deleteMeasureModal .injaz-modal-footer button.injaz-btn-secondary,
#deleteMeasureModalCancelBtn,
button#deleteMeasureModalCancelBtn {
  background-color: #E7F5F7 !important;
  color: #00274F !important;
  border: 1px solid #E7F5F7 !important;
}

.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-secondary:hover,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-secondary:hover,
#deleteKpiModal .injaz-modal-footer button.injaz-btn-secondary:hover,
#deleteMeasureModal .injaz-modal-footer button.injaz-btn-secondary:hover,
#deleteMeasureModalCancelBtn:hover,
button#deleteMeasureModalCancelBtn:hover {
  background-color: #D1EDF0 !important;
  color: #00274F !important;
  border: 1px solid #D1EDF0 !important;
}

/* Ultra-specific modal footer button colors - DELETE */
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-delete,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-delete,
#deleteKpiModal .injaz-modal-footer button.injaz-btn-delete,
#deleteMeasureModal .injaz-modal-footer button.injaz-btn-delete,
#confirmDeleteKpiBtn,
button#confirmDeleteKpiBtn {
  background-color: #D33C40 !important;
  color: white !important;
  border: 1px solid #D33C40 !important;
}

.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-delete:hover,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-delete:hover,
#deleteKpiModal .injaz-modal-footer button.injaz-btn-delete:hover,
#deleteMeasureModal .injaz-modal-footer button.injaz-btn-delete:hover,
#confirmDeleteKpiBtn:hover,
button#confirmDeleteKpiBtn:hover,
#confirmDeleteMeasureBtn:hover,
button#confirmDeleteMeasureBtn:hover {
  background-color: #b53033 !important;
  color: white !important;
  border: 1px solid #b53033 !important;
  box-shadow: 0 4px 8px rgba(211, 60, 64, 0.4) !important;
}

/* Ultra-specific modal footer button colors - GREEN */
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-green,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-green {
  background-color: #73CA00 !important;
  color: white !important;
  border: 1px solid #73CA00 !important;
}

.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button.injaz-btn.injaz-btn-green:hover,
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button.injaz-btn-green:hover {
  background-color: #5fb000 !important;
  color: white !important;
  border: 1px solid #5fb000 !important;
}

/* ULTRA-SPECIFIC OVERRIDES: Force buttons to stay in normal flow */
/* Override td button rules */
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-edit[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-delete[style*="padding"],
td:not(.injaz-modal-footer):not(.modal-footer) button.injaz-btn-green[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-edit[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-delete[style*="padding"],
.table:not(.injaz-modal *):not(.modal *) button.injaz-btn-green[style*="padding"],
/* Override d-flex button rules */
body:not([dir="rtl"]) .d-flex button.injaz-btn-delete,
html:not([dir="rtl"]) .d-flex button.injaz-btn-delete,
body:not([dir="rtl"]) td button.injaz-btn-delete,
html:not([dir="rtl"]) td button.injaz-btn-delete,
body:not([dir="rtl"]) tbody button.injaz-btn-delete,
html:not([dir="rtl"]) tbody button.injaz-btn-delete,
/* Override RTL rules */
html[dir="rtl"] td button.injaz-btn[style*="padding"]:not([onclick*="openScoringModal"]):not([onclick*="openExternalScoringModal"]),
html[dir="rtl"] td button.injaz-btn-edit[style*="padding"]:not([onclick*="openScoringModal"]):not([onclick*="openExternalScoringModal"]),
html[dir="rtl"] td button.injaz-btn-delete[style*="padding"]:not([onclick*="openScoringModal"]):not([onclick*="openExternalScoringModal"]),
html[dir="rtl"] td button.injaz-btn-green[style*="padding"]:not([onclick*="openScoringModal"]):not([onclick*="openExternalScoringModal"]),
html[dir="rtl"] .d-flex button.injaz-btn[style*="padding"]:not([onclick*="openScoringModal"]):not([onclick*="openExternalScoringModal"]),
html[dir="rtl"] .d-flex button.injaz-btn-edit[style*="padding"]:not([onclick*="openScoringModal"]):not([onclick*="openExternalScoringModal"]),
html[dir="rtl"] .d-flex button.injaz-btn-delete[style*="padding"]:not([onclick*="openScoringModal"]):not([onclick*="openExternalScoringModal"]),
html[dir="rtl"] .d-flex button.injaz-btn-green[style*="padding"]:not([onclick*="openScoringModal"]):not([onclick*="openExternalScoringModal"]),
/* Specifically target measure delete/edit buttons (but NOT in modal footers) */
button[onclick*="openDeleteMeasureModal"]:not(.injaz-modal-footer *),
button[onclick*="openEditMeasureModal"]:not(.injaz-modal-footer *),
.d-flex button[onclick*="openDeleteMeasureModal"]:not(.injaz-modal-footer *),
.d-flex button[onclick*="openEditMeasureModal"]:not(.injaz-modal-footer *),
td .d-flex button[onclick*="openDeleteMeasureModal"]:not(.injaz-modal-footer *),
td .d-flex button[onclick*="openEditMeasureModal"]:not(.injaz-modal-footer *),
.table td button[onclick*="openDeleteMeasureModal"]:not(.injaz-modal-footer *),
.table td button[onclick*="openEditMeasureModal"]:not(.injaz-modal-footer *) {
  position: static !important;
  z-index: auto !important;
  float: none !important;
  transform: none !important;
}

/* BOOTSTRAP OVERRIDE: Ultra-specific selectors to beat Bootstrap CSS */
/* Target buttons in injaz-modal-footer with maximum specificity */
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn.injaz-btn-secondary:not(.btn),
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn.injaz-btn-delete:not(.btn),
div#deleteKpiModal.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn:not(.btn),
div#deleteMeasureModal.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn:not(.btn),
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button[type="button"]#confirmDeleteKpiBtn.injaz-btn:not(.btn),
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button[type="button"]#confirmDeleteMeasureBtn.injaz-btn:not(.btn) {
  all: revert !important;
  display: inline-block !important;
  padding: 0.5rem 1.25rem !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 0.4rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;
  background-image: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* BOOTSTRAP OVERRIDE: Secondary button (Cancel) */
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn.injaz-btn-secondary:not(.btn),
div#deleteKpiModal.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn-secondary:not(.btn),
div#deleteMeasureModal.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn-secondary:not(.btn) {
  background-color: #E7F5F7 !important;
  border-color: #E7F5F7 !important;
  color: #00274F !important;
}

div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn.injaz-btn-secondary:not(.btn):hover {
  background-color: #D1EDF0 !important;
  border-color: #D1EDF0 !important;
  color: #00274F !important;
}

/* BOOTSTRAP OVERRIDE: Delete button */
div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn.injaz-btn-delete:not(.btn),
div#deleteKpiModal.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn-delete:not(.btn),
div#deleteMeasureModal.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn-delete:not(.btn),
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button[type="button"]#confirmDeleteKpiBtn.injaz-btn:not(.btn),
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button[type="button"]#confirmDeleteMeasureBtn.injaz-btn:not(.btn) {
  background-color: #D33C40 !important;
  border-color: #D33C40 !important;
  color: white !important;
}

div.injaz-modal-backdrop div.injaz-modal div.injaz-modal-footer button[type="button"].injaz-btn.injaz-btn-delete:not(.btn):hover,
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button[type="button"]#confirmDeleteKpiBtn.injaz-btn:not(.btn):hover,
.injaz-modal-backdrop .injaz-modal .injaz-modal-footer button[type="button"]#confirmDeleteMeasureBtn.injaz-btn:not(.btn):hover {
  background-color: #b53033 !important;
  border-color: #b53033 !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(211, 60, 64, 0.4) !important;
}

/* RTL Support for Progress Tables and Elements */
html[dir="rtl"] .tiny-progress-wrapper {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .tiny-progress {
  direction: ltr; /* Keep progress bar left-to-right for visual consistency */
}

html[dir="rtl"] .tiny-progress-label {
  direction: rtl;
  text-align: right;
}

/* RTL Support for measures table */
html[dir="rtl"] .table {
  direction: rtl;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
  text-align: right !important;
}

html[dir="rtl"] .table .d-flex {
  justify-content: flex-end !important;
}

html[dir="rtl"] .table-secondary {
  direction: rtl;
}

/* RTL Table container alignment */
html[dir="rtl"] .mt-3[style*="overflow-x: auto"] {
  direction: rtl;
  text-align: right;
}

/* Force RTL alignment for table content */
html[dir="rtl"] .table-secondary tbody tr td {
  text-align: right !important;
  direction: rtl !important;
}

html[dir="rtl"] .table-secondary tbody tr td .d-flex {
  justify-content: flex-end !important;
  direction: rtl !important;
}

html[dir="rtl"] .table-secondary .tiny-progress-wrapper {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
  direction: rtl !important;
}

html[dir="rtl"] .table-secondary .tiny-progress-label {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL flexbox containers */
html[dir="rtl"] .d-flex.align-items-start {
  justify-content: flex-end !important;
}

html[dir="rtl"] .d-flex.gap-2 {
  justify-content: flex-end !important;
}

/* Hover effects for section action buttons */
.injaz-btn[style*="background-color: rgba(99, 102, 241, 0.08)"]:hover {
  background-color: rgba(99, 102, 241, 0.12) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.injaz-btn[style*="background-color: rgba(211, 60, 64, 0.08)"]:hover {
  background-color: rgba(211, 60, 64, 0.12) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(211, 60, 64, 0.2);
}

.injaz-btn[style*="background-color: #E7F5F7"]:hover {
  background-color: #D4F1F4 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(41, 139, 154, 0.2);
}

/* Compact button hover effects */
.injaz-btn[style*="padding: 0.3rem"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* RTL KPI-level progress positioning */
html[dir="rtl"] .d-flex.align-items-center.gap-3.flex-wrap {
  justify-content: flex-end !important;
  direction: rtl !important;
}

html[dir="rtl"] .kpi-item .tiny-progress-wrapper {
  margin-left: auto !important;
  margin-right: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .kpi-item .tiny-progress-label {
  direction: rtl !important;
  text-align: right !important;
}