/* assets/css/app.css — v5 supplemental styles */

/* Security group toggles */
.ppg-security-group summary::-webkit-details-marker { display: none; }
.ppg-security-group summary::before { 
  content: '+'; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: 4px;
  transition: all 0.2s;
}
.ppg-security-group[open] summary::before { 
  content: '-'; 
  background: var(--c-primary);
  color: white;
}

/* Content area typography */
.ppg-content { 
  font-size: 14px; 
  line-height: 1.7; 
}

.ppg-content p { 
  margin-bottom: 1em; 
}

/* Spinner animation */
@keyframes ppg-spin { 
  to { transform: rotate(360deg); } 
}

.ppg-spinner { 
  width: 36px; 
  height: 36px; 
  border: 3px solid var(--c-gray-200); 
  border-top-color: var(--c-primary); 
  border-radius: 50%; 
  animation: ppg-spin 0.7s linear infinite; 
  margin: 0 auto; 
}

.ppg-spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

/* Focus ring for accessibility */
*:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Better selection */
::selection {
  background: var(--c-primary);
  color: white;
}

/* Form validation states */
.ppg-input:valid:not(:placeholder-shown) {
  border-color: var(--c-success);
}

.ppg-input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--c-danger);
}

/* Loading state for buttons */
.ppg-btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

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

.ppg-btn-primary.loading::after {
  border-color: rgba(255,255,255,0.3);
  border-top-color: white;
}

/* Pulse animation for notifications */
@keyframes ppg-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.ppg-pulse {
  animation: ppg-pulse 2s ease-in-out infinite;
}

/* Skeleton loading */
.ppg-skeleton {
  background: linear-gradient(90deg, var(--c-gray-100) 25%, var(--c-gray-200) 50%, var(--c-gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tooltip styles */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 6px 12px;
  background: var(--c-gray-900);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  z-index: 1000;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}

/* Empty state styling */
.ppg-empty {
  text-align: center;
  padding: 60px 24px;
}

.ppg-empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.ppg-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-gray-800);
  margin-bottom: 8px;
}

.ppg-empty-text {
  font-size: 14px;
  color: var(--c-text-muted);
  margin-bottom: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Hover card effect */
.ppg-hover-lift {
  transition: all 0.2s ease;
}

.ppg-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Badge animations */
.ppg-badge-animated {
  animation: badge-pop 0.3s ease;
}

@keyframes badge-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Table row animations */
.ppg-table tr {
  transition: background-color 0.15s ease;
}

/* Gradient text */
.ppg-gradient-text {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glass effect */
.ppg-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Divider */
.ppg-divider {
  height: 1px;
  background: var(--c-border);
  margin: 24px 0;
}

.ppg-divider-text {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.ppg-divider-text::before,
.ppg-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* Avatar group */
.ppg-avatar-group {
  display: flex;
}

.ppg-avatar-group .ppg-user-avatar {
  margin-left: -10px;
  border: 2px solid white;
}

.ppg-avatar-group .ppg-user-avatar:first-child {
  margin-left: 0;
}

/* Progress bar */
.ppg-progress {
  height: 8px;
  background: var(--c-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.ppg-progress-bar {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.ppg-progress-bar.success { background: var(--c-success); }
.ppg-progress-bar.warning { background: var(--c-warning); }
.ppg-progress-bar.danger { background: var(--c-danger); }

/* Tag input */
.ppg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ppg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--c-gray-100);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-soft);
}

.ppg-tag-remove {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.ppg-tag-remove:hover {
  opacity: 1;
}

/* Notification dot */
.ppg-notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: var(--c-danger);
  border-radius: 50%;
  border: 2px solid white;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--c-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--c-gray-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-gray-400);
}

/* Print styles */
@media print {
  .ppg-sidebar,
  .ppg-header,
  .ppg-btn,
  .ppg-nav-item {
    display: none !important;
  }
  
  .ppg-content {
    margin: 0 !important;
    padding: 20px !important;
  }
  
  .ppg-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}