/* ===== COMPONENT DESIGN TOKENS ===== */
/* Import design tokens for Core & CCard components */

/* ===== PSC COMPONENT DESIGN TOKEN SYSTEM ===== */
/* World-class design tokens for Core & CCard components */
/* Based on 8-point spacing grid with golden ratio scaling */

:root {
  /* ===== SPACING SYSTEM - 8-Point Grid ===== */
  /* Base unit: 4px, scaling with golden ratio and practical considerations */
  --space-micro: 2px;        /* 0.125rem - Minimal spacing for borders */
  --space-xs: 4px;           /* 0.25rem - Tiny gaps between related elements */
  --space-sm: 8px;           /* 0.5rem - Small padding and margins */
  --space-md: 16px;          /* 1rem - Standard spacing unit */
  --space-lg: 24px;          /* 1.5rem - Medium section spacing */
  --space-xl: 32px;          /* 2rem - Large section spacing */
  --space-2xl: 48px;         /* 3rem - Extra large spacing */
  --space-3xl: 64px;         /* 4rem - Massive spacing */
  --space-4xl: 96px;         /* 6rem - Layout-level spacing */

  /* ===== COLOR SYSTEM - HSL-Based with Perceptual Lightness ===== */
  /* Primary Color Palette - Blue */
  --primary-50: hsl(210, 100%, 97%);   /* Almost white with blue tint */
  --primary-100: hsl(210, 100%, 95%);  /* Very light blue */
  --primary-200: hsl(210, 100%, 90%);  /* Light blue */
  --primary-300: hsl(210, 100%, 80%);  /* Medium light blue */
  --primary-400: hsl(210, 100%, 70%);  /* Medium blue */
  --primary-500: hsl(210, 100%, 60%);  /* Standard blue */
  --primary-600: hsl(210, 100%, 50%);  /* Strong blue */
  --primary-700: hsl(210, 100%, 40%);  /* Dark blue */
  --primary-800: hsl(210, 100%, 30%);  /* Very dark blue */
  --primary-900: hsl(210, 100%, 20%);  /* Nearly black blue */

  /* Semantic Color Palette */
  --success: hsl(142, 76%, 36%);       /* Green for success states */
  --warning: hsl(38, 92%, 50%);        /* Orange for warning states */
  --danger: hsl(0, 84%, 60%);          /* Red for error/danger states */
  --info: hsl(200, 98%, 39%);          /* Blue for informational states */

  /* Neutral Color Palette */
  --gray-50: hsl(210, 20%, 98%);       /* Almost white */
  --gray-100: hsl(210, 20%, 95%);      /* Very light gray */
  --gray-200: hsl(210, 16%, 93%);      /* Light gray */
  --gray-300: hsl(210, 14%, 89%);      /* Medium light gray */
  --gray-400: hsl(210, 14%, 83%);      /* Medium gray */
  --gray-500: hsl(210, 11%, 71%);      /* Standard gray */
  --gray-600: hsl(210, 9%, 31%);       /* Dark gray */
  --gray-700: hsl(210, 10%, 23%);      /* Very dark gray */
  --gray-800: hsl(210, 24%, 16%);      /* Nearly black */
  --gray-900: hsl(210, 24%, 10%);      /* Black */
}

/* ===== PRINT STYLES ===== */
/* Safari-compatible print styles */
@media print {
  /* Hide elements that shouldn't be printed */
  .noprint {
    visibility: hidden !important;
    display: none !important;
  }

  /* Hide common UI elements */
  .btn, .form-control, .dropdown, .navbar,
  .breadcrumb, .pagination, .alert-dismissible,
  .modal, .offcanvas, .tooltip, .popover,
  .spinner-border, .spinner-grow {
    visibility: hidden !important;
    display: none !important;
  }

  /* Show print-only elements */
  .print-only {
    visibility: visible !important;
    display: block !important;
  }

  /* Ensure good print layout */
  body {
    font-size: 12pt !important;
    line-height: 1.3 !important;
    color: #000 !important;
    background: white !important;
  }

  /* Page break controls */
  .page-break-before {
    page-break-before: always;
  }

  .page-break-after {
    page-break-after: always;
  }

  .page-break-avoid {
    page-break-inside: avoid;
  }

  /* Disable rainbow animations in print */
  .ccard--rainbow-border::before,
  .ccard--rainbow-top::before,
  .ccard--rainbow-bottom::before,
  .ccard--rainbow-left::before,
  .ccard--rainbow-right::before,
  .ccard--rainbow-all::before {
    animation: none !important;
    background: #0d6efd !important; /* Static blue color */
  }
}

  /* ===== ELEVATION SYSTEM - Box Shadows ===== */
  /* Consistent shadow system for depth perception */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);                     /* Subtle shadow */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Small shadow */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Medium shadow */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Large shadow */
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Extra large shadow */
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);               /* Massive shadow */
  
  /* Special shadows for premium effects */
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);            /* Inner shadow */
  --shadow-outline: 0 0 0 3px rgba(59, 130, 246, 0.5);              /* Focus outline */
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.4);                  /* Glow effect */

  /* ===== TYPOGRAPHY SYSTEM ===== */
  /* Modular scale with golden ratio (1.618) for harmonious proportions */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px - Base size */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */
  --text-8xl: 6rem;       /* 96px */
  --text-9xl: 8rem;       /* 128px */

  /* Font weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ===== ANIMATION & TRANSITIONS ===== */
  /* Cubic-bezier curves for natural motion */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* Slow start */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);       /* Slow end */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  /* Slow start and end */
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);   /* Sharp transition */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce effect */

  /* Animation durations */
  --duration-75: 75ms;     /* Very fast */
  --duration-100: 100ms;   /* Fast */
  --duration-150: 150ms;   /* Quick */
  --duration-200: 200ms;   /* Normal */
  --duration-300: 300ms;   /* Slow */
  --duration-500: 500ms;   /* Very slow */
  --duration-700: 700ms;   /* Extra slow */
  --duration-1000: 1000ms; /* Ultra slow */

  /* ===== BORDER RADIUS SYSTEM ===== */
  /* Consistent radius values for different UI elements */
  --radius-none: 0;
  --radius-sm: 0.125rem;   /* 2px */
  --radius-base: 0.25rem;  /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Fully rounded */

  /* ===== Z-INDEX SYSTEM ===== */
  /* Layering system for proper stacking context */
  --z-auto: auto;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;       /* Modal backdrop */
  --z-modal: 1000;  /* Modal content */
  --z-popover: 1010; /* Popovers and tooltips */
  --z-tooltip: 1020; /* Tooltips */
  --z-notification: 1030; /* Toast notifications */
  --z-debug: 10000;  /* Debug panels */
}

/* ===== PSC ANIMATION LIBRARY ===== */
/* World-class animations for Core & CCard components */
/* Hardware-accelerated animations with accessibility support */

/* ===== LOADING ANIMATIONS ===== */

/* Spinner Animation */
.animate-spin {
  animation: spin var(--duration-1000) linear infinite;
}

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

/* Pulse Animation */
.animate-pulse {
  animation: pulse var(--duration-1000) var(--ease-in-out) infinite;
}

@@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Skeleton Shimmer Animation */
.animate-shimmer {
  animation: shimmer var(--duration-1000) var(--ease-in-out) infinite;
  background: linear-gradient(90deg, 
    var(--gray-200) 25%, 
    var(--gray-100) 50%, 
    var(--gray-200) 75%);
  background-size: 200% 100%;
}

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

/* ===== ENTRANCE ANIMATIONS ===== */

/* Fade In */
.animate-fade-in {
  animation: fadeIn var(--duration-300) var(--ease-out) forwards;
}

@@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide In from Top */
.animate-slide-in-top {
  animation: slideInTop var(--duration-300) var(--ease-out) forwards;
}

@@keyframes slideInTop {
  from { 
    opacity: 0; 
    transform: translateY(-1rem); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Slide In from Bottom */
.animate-slide-in-bottom {
  animation: slideInBottom var(--duration-300) var(--ease-out) forwards;
}

@@keyframes slideInBottom {
  from { 
    opacity: 0; 
    transform: translateY(1rem); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Scale In */
.animate-scale-in {
  animation: scaleIn var(--duration-200) var(--ease-out) forwards;
}

@@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.9); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

/* ===== INTERACTION ANIMATIONS ===== */

/* Bounce */
.animate-bounce {
  animation: bounce var(--duration-1000) infinite;
}

@@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: var(--ease-bounce);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: var(--ease-bounce);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: var(--ease-bounce);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    animation-timing-function: var(--ease-bounce);
    transform: translate3d(0, -4px, 0);
  }
}

/* Shake */
.animate-shake {
  animation: shake var(--duration-500) var(--ease-in-out);
}

@@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* ===== PARTICLE ANIMATIONS ===== */

/* Floating Dots */
@@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Sparkle Animation */
@@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

/* RGB Border Animation */
@@keyframes rgbBorder {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ===== UTILITY CLASSES ===== */

/* Animation Delays */
.animate-delay-75 { animation-delay: 75ms; }
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-150 { animation-delay: 150ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-500 { animation-delay: 500ms; }

/* Animation Durations */
.animate-duration-75 { animation-duration: 75ms; }
.animate-duration-100 { animation-duration: 100ms; }
.animate-duration-150 { animation-duration: 150ms; }
.animate-duration-200 { animation-duration: 200ms; }
.animate-duration-300 { animation-duration: 300ms; }
.animate-duration-500 { animation-duration: 500ms; }
.animate-duration-700 { animation-duration: 700ms; }
.animate-duration-1000 { animation-duration: 1000ms; }

/* Animation Fill Modes */
.animate-fill-forwards { animation-fill-mode: forwards; }
.animate-fill-backwards { animation-fill-mode: backwards; }
.animate-fill-both { animation-fill-mode: both; }

/* Animation Iteration Counts */
.animate-once { animation-iteration-count: 1; }
.animate-infinite { animation-iteration-count: infinite; }

/* Reduced Motion Support */
@@media (prefers-reduced-motion: reduce) {
  .animate-spin,
  .animate-pulse,
  .animate-shimmer,
  .animate-bounce {
    animation: none;
  }
  
  .animate-fade-in,
  .animate-slide-in-top,
  .animate-slide-in-bottom,
  .animate-scale-in {
    animation: fadeInReduced var(--duration-150) var(--ease-out) forwards;
  }
  
  @@keyframes fadeInReduced {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Hardware Acceleration */
.hw-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ===== TETRIS LOGO ANIMATIONS ===== */
/* Blazor Reconnect UI tetris animations - MUST be global (not scoped) */
/* Blazor's CSS scoper corrupts @keyframes by adding scope attributes to percentage selectors */

/* Ghost piece falling animation */
@keyframes ghost-fall {
  0% { opacity: 0; transform: translateY(-200px); }
  50% { opacity: 0.5; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Tetris piece falling animation */
@keyframes piece-fall {
  0% { opacity: 1; transform: translateY(-200px); }
  70% { transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Tetris piece exit animation */
@keyframes piece-out {
  from {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(var(--y-out)) translateX(var(--x-out)) rotate(var(--r-out)) scale(0.5);
  }
}

/* Auto-start piece falling animation (CSS fallback) */
@keyframes auto-piece-fall {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  10% {
    opacity: 1;
  }
  70% {
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Auto-start ghost falling animation (CSS fallback) */
@keyframes auto-ghost-fall {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

/* Auto-start piece glow animation (CSS fallback) */
@keyframes auto-piece-glow {
  0% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 -1px 1px rgba(0, 0, 0, 0.2),
      0 4px 8px rgba(0, 0, 0, 0.15);
  }
  100% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 -1px 1px rgba(0, 0, 0, 0.2),
      0 0 25px var(--tetris-glow-color, #ffffff),
      0 5px 15px rgba(0, 0, 0, 0.3);
  }
}

/* Line clear flash animation */
@keyframes line-clear-anim {
  0% { opacity: 0; transform: translateX(-100%); }
  30% { opacity: 0.6; }
  70% { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(150%); }
}

.homerowblock {
    height: 245px;
    overflow: scroll;
    overflow-x: hidden;
}

/* Security Permissions Grid Enhancements */
.transition-transform {
    transition: transform 0.2s ease-in-out;
}

.rotate-180 {
    transform: rotate(180deg);
}

.draggable {
    z-index: 99999;
}

.pop-container {
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(132, 132, 132, 0.77);
}

.popconfirm {
    color: white;
    background-color: gray;
    border-style: solid;
    border-width: 1px;
    border-color: lightblue;
    padding: 10px;
    border-radius: 15px;
    min-width: 250px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pop-message-card, .pop-message-card div {
    background-color: rgba(0, 0, 0, 0.00)
}

.gradient-to-gray {
    background: linear-gradient(0deg,#000000,#888);
    color: #fff;
}

.btn-yes {
    background-color: darkgreen;
    color: limegreen;
    width: 100%;
}

.btn-no {
    background-color: darkred;
    color: lightcoral;
    width: 100%;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #4290a8 !important;
    border-color: #4290a8 !important;
}

.selectactive{
    background-color:darkblue;
    color:white;
}

.modal-wide {
    min-width: 80%;
}

.modal-wide .modal-body {
    overflow-y: auto;
}

.horizontal-scrollable {
    overflow-x: auto;
    white-space: nowrap;
}

/* Ensure Blazor error UI is on top */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999; /* Significantly increased z-index */
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Dropdown/Select field styling with icon */
.form-select, select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem !important;
}

/* Alternative styling for select elements that might not have Bootstrap classes */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Ensure the dropdown icon works well with Bootstrap form styling */
.form-group select, .input-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Darker icon for dark themes or specific styling */
.dark-theme select, .dropdown-dark select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
}

/* Fix table row alignment issues with Bootstrap contextual classes */
.table tbody tr.table-success td,
.table tbody tr.table-danger td,
.table tbody tr.table-warning td,
.table tbody tr.table-info td,
.table tbody tr.table-primary td,
.table tbody tr.table-secondary td,
.table tbody tr.table-light td,
.table tbody tr.table-dark td {
    /* Ensure consistent padding and no margin shifts */
    padding: 0.5rem 0.5rem !important;
    margin: 0 !important;
    /* Prevent any box-model changes that could shift alignment */
    box-sizing: border-box !important;
    /* Ensure vertical alignment stays consistent */
    vertical-align: middle !important;
}

/* Specific fix for checkbox column alignment in contextual table rows */
.table tbody tr.table-success td.text-center,
.table tbody tr.table-danger td.text-center,
.table tbody tr.table-warning td.text-center,
.table tbody tr.table-info td.text-center,
.table tbody tr.table-primary td.text-center,
.table tbody tr.table-secondary td.text-center {
    /* Ensure checkbox column doesn't shift */
    text-align: center !important;
    padding-left: 16px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

/* ===== LOADING ANIMATIONS ===== */
/* Smooth fade in/out transitions for loading overlays to prevent flash */

@keyframes core-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ccard-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Apply smooth transitions to loading elements */
.core-loading-overlay,
.ccard-loading-overlay-absolute {
    animation: core-fade-in 0.3s ease-in-out;
}

/* Ensure body content doesn't flash during loading state changes */
.core-body-content,
.ccard-body {
    transition: opacity 0.2s ease-in-out;
}