@charset "UTF-8";
/*!
 * Theme Default CSS
 * Veritral API Panel - Default Theme Styles
 * Mobile Responsive Design
 */

/* ===== ROOT VARIABLES ===== */
:root {
  /* Primary Colors */
  --theme-primary: #7367f0;
  --theme-primary-light: #9c8cf0;
  --theme-primary-dark: #5a4fcf;
  
  /* Secondary Colors */
  --theme-secondary: #808390;
  --theme-secondary-light: #a0a3b0;
  --theme-secondary-dark: #606370;
  
  /* Status Colors */
  --theme-success: #28c76f;
  --theme-info: #00bad1;
  --theme-warning: #ff9f43;
  --theme-danger: #ff4c51;
  
  /* Neutral Colors */
  --theme-white: #ffffff;
  --theme-black: #2f2b3d;
  --theme-gray-50: #f3f2f3;
  --theme-gray-100: #eaeaec;
  --theme-gray-200: #e6e6e8;
  --theme-gray-300: #c1bfc5;
  --theme-gray-400: #acaab1;
  --theme-gray-500: #97959e;
  --theme-gray-600: #82808b;
  --theme-gray-700: #6d6b77;
  --theme-gray-800: #595564;
  --theme-gray-900: #444050;
  
  /* Background Colors */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8f9fa;
  --theme-bg-tertiary: #f3f2f3;
  
  /* Text Colors */
  --theme-text-primary: #2f2b3d;
  --theme-text-secondary: #82808b;
  --theme-text-muted: #acaab1;
  
  /* Border Colors */
  --theme-border-light: #e6e6e8;
  --theme-border-medium: #c1bfc5;
  --theme-border-dark: #acaab1;
  
  /* Shadow Colors */
  --theme-shadow-sm: 0 0.125rem 0.25rem rgba(47, 43, 61, 0.075);
  --theme-shadow: 0 0.5rem 1rem rgba(47, 43, 61, 0.15);
  --theme-shadow-lg: 0 1rem 3rem rgba(47, 43, 61, 0.175);
  
  /* Spacing */
  --theme-spacing-xs: 0.25rem;
  --theme-spacing-sm: 0.5rem;
  --theme-spacing-md: 1rem;
  --theme-spacing-lg: 1.5rem;
  --theme-spacing-xl: 3rem;
  
  /* Border Radius */
  --theme-radius-sm: 0.25rem;
  --theme-radius: 0.375rem;
  --theme-radius-md: 0.5rem;
  --theme-radius-lg: 0.75rem;
  --theme-radius-xl: 1rem;
  
  /* Transitions */
  --theme-transition-fast: 0.15s ease-in-out;
  --theme-transition: 0.3s ease-in-out;
  --theme-transition-slow: 0.5s ease-in-out;
}

/* ===== DARK THEME VARIABLES ===== */
[data-bs-theme="dark"] {
  /* Primary Colors (same as light) */
  --theme-primary: #7367f0;
  --theme-primary-light: #9c8cf0;
  --theme-primary-dark: #5a4fcf;
  
  /* Background Colors */
  --theme-bg-primary: #2f3349;
  --theme-bg-secondary: #25293a;
  --theme-bg-tertiary: #1e222d;
  
  /* Text Colors */
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #b4b7bd;
  --theme-text-muted: #82808b;
  
  /* Border Colors */
  --theme-border-light: #404656;
  --theme-border-medium: #5a5f73;
  --theme-border-dark: #6d6b77;
  
  /* Shadow Colors */
  --theme-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --theme-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --theme-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

/* ===== BASE STYLES ===== */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--theme-text-primary);
  background-color: var(--theme-bg-primary);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--theme-text-primary);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: var(--theme-primary);
  text-decoration: none;
  transition: color var(--theme-transition-fast);
}

a:hover {
  color: var(--theme-primary-dark);
  text-decoration: underline;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  font-weight: 500;
  line-height: 1.5;
  color: var(--theme-text-primary);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--theme-radius);
  transition: all var(--theme-transition-fast);
}

.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.25);
}

.btn-primary {
  color: var(--theme-white);
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.btn-primary:hover {
  color: var(--theme-white);
  background-color: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
}

.btn-secondary {
  color: var(--theme-white);
  background-color: var(--theme-secondary);
  border-color: var(--theme-secondary);
}

.btn-secondary:hover {
  color: var(--theme-white);
  background-color: var(--theme-secondary-dark);
  border-color: var(--theme-secondary-dark);
}

.btn-success {
  color: var(--theme-white);
  background-color: var(--theme-success);
  border-color: var(--theme-success);
}

.btn-info {
  color: var(--theme-white);
  background-color: var(--theme-info);
  border-color: var(--theme-info);
}

.btn-warning {
  color: var(--theme-black);
  background-color: var(--theme-warning);
  border-color: var(--theme-warning);
}

.btn-danger {
  color: var(--theme-white);
  background-color: var(--theme-danger);
  border-color: var(--theme-danger);
}

/* ===== FORMS ===== */
.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--theme-text-primary);
  background-color: var(--theme-bg-primary);
  background-clip: padding-box;
  border: 1px solid var(--theme-border-medium);
  border-radius: var(--theme-radius);
  transition: border-color var(--theme-transition-fast), box-shadow var(--theme-transition-fast);
}

.form-control:focus {
  color: var(--theme-text-primary);
  background-color: var(--theme-bg-primary);
  border-color: var(--theme-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.25);
}

.form-control::placeholder {
  color: var(--theme-text-muted);
  opacity: 1;
}

.form-label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--theme-text-primary);
}

/* ===== CARDS ===== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--theme-bg-primary);
  background-clip: border-box;
  border: 1px solid var(--theme-border-light);
  border-radius: var(--theme-radius-lg);
  box-shadow: var(--theme-shadow-sm);
}

.card-body {
  flex: 1 1 auto;
  padding: 1.5rem;
}

.card-header {
  padding: 1rem 1.5rem;
  margin-bottom: 0;
  background-color: var(--theme-bg-secondary);
  border-bottom: 1px solid var(--theme-border-light);
  border-top-left-radius: calc(var(--theme-radius-lg) - 1px);
  border-top-right-radius: calc(var(--theme-radius-lg) - 1px);
}

.card-footer {
  padding: 1rem 1.5rem;
  background-color: var(--theme-bg-secondary);
  border-top: 1px solid var(--theme-border-light);
  border-bottom-left-radius: calc(var(--theme-radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--theme-radius-lg) - 1px);
}

/* ===== ALERTS ===== */
.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--theme-radius);
}

.alert-primary {
  color: #4a3c8a;
  background-color: #e7e3ff;
  border-color: #d1c7ff;
}

.alert-secondary {
  color: #5a5f73;
  background-color: #f0f1f3;
  border-color: #e6e8ec;
}

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/* ===== NAVIGATION ===== */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: var(--theme-bg-primary);
  border-bottom: 1px solid var(--theme-border-light);
}

.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-text-primary);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--theme-text-secondary);
  text-decoration: none;
  transition: color var(--theme-transition-fast);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--theme-text-primary);
}

.nav-link.active {
  color: var(--theme-primary);
}

/* ===== UTILITIES ===== */
.text-primary { color: var(--theme-primary) !important; }
.text-secondary { color: var(--theme-text-secondary) !important; }
.text-success { color: var(--theme-success) !important; }
.text-info { color: var(--theme-info) !important; }
.text-warning { color: var(--theme-warning) !important; }
.text-danger { color: var(--theme-danger) !important; }
.text-muted { color: var(--theme-text-muted) !important; }

.bg-primary { background-color: var(--theme-primary) !important; }
.bg-secondary { background-color: var(--theme-secondary) !important; }
.bg-success { background-color: var(--theme-success) !important; }
.bg-info { background-color: var(--theme-info) !important; }
.bg-warning { background-color: var(--theme-warning) !important; }
.bg-danger { background-color: var(--theme-danger) !important; }

.border { border: 1px solid var(--theme-border-light) !important; }
.border-primary { border-color: var(--theme-primary) !important; }
.border-secondary { border-color: var(--theme-secondary) !important; }

.rounded { border-radius: var(--theme-radius) !important; }
.rounded-sm { border-radius: var(--theme-radius-sm) !important; }
.rounded-lg { border-radius: var(--theme-radius-lg) !important; }

.shadow { box-shadow: var(--theme-shadow) !important; }
.shadow-sm { box-shadow: var(--theme-shadow-sm) !important; }
.shadow-lg { box-shadow: var(--theme-shadow-lg) !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }

.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* ===== RESPONSIVE DESIGN ===== */
/* Mobile First Approach */
@media (max-width: 575.98px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
  
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  
  .navbar-nav {
    flex-direction: row;
  }
  
  .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* ===== MOBILE SPECIFIC STYLES ===== */
@media (max-width: 767.98px) {
  /* Mobile navigation */
  .navbar {
    padding: 0.75rem 1rem;
  }
  
  .navbar-brand {
    font-size: 1.125rem;
  }
  
  /* Mobile forms */
  .form-control {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Mobile buttons */
  .btn {
    min-height: 44px; /* Touch target size */
    padding: 0.75rem 1rem;
  }
  
  /* Mobile cards */
  .card {
    margin-bottom: 1rem;
    border-radius: var(--theme-radius-md);
  }
  
  /* Mobile spacing */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  .btn {
    border: 1px solid black;
  }
  
  .card {
    border: 1px solid #ddd;
  }
}

/* ===== ACCESSIBILITY ===== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ===== FOCUS STYLES ===== */
*:focus {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}

.btn:focus,
.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.25);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-in-up {
  animation: slideInUp 0.3s ease-in-out;
}

/* ===== LOADING STATES ===== */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--theme-border-light);
  border-top-color: var(--theme-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ===== MOBILE PREVIEW SPECIFIC STYLES ===== */
/* Chrome DevTools Mobile Preview Optimizations */
@media screen and (max-width: 768px) {
  /* Prevent horizontal scrolling */
  body {
    overflow-x: hidden;
  }
  
  /* Optimize touch targets */
  button, .btn, input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Improve form usability on mobile */
  input, select, textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    -webkit-appearance: none;
    border-radius: var(--theme-radius);
  }
  
  /* Better spacing for mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Card adjustments for mobile */
  .card {
    margin-bottom: 1rem;
    border-radius: var(--theme-radius-md);
  }
  
  .card-body {
    padding: 1rem;
  }
  
  /* Navigation improvements */
  .navbar {
    padding: 0.75rem 1rem;
  }
  
  .navbar-brand {
    font-size: 1.125rem;
  }
  
  /* Table responsiveness */
  .table-responsive {
    border: none;
  }
  
  /* Modal adjustments */
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-content {
    border-radius: var(--theme-radius-lg);
  }
}

/* ===== CHROME EXTENSION ERROR PREVENTION ===== */
/* Hide Chrome extension related elements */
[src*="chrome-extension://"] {
  display: none !important;
}

/* Prevent Chrome extension scripts from loading */
script[src*="chrome-extension://"] {
  display: none !important;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Reduce repaints and reflows */
* {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Optimize animations */
.btn, .form-control, .card {
  will-change: transform;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* Focus indicators */
*:focus {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --theme-border-medium: #000000;
    --theme-text-primary: #000000;
    --theme-bg-primary: #ffffff;
  }
  
  [data-bs-theme="dark"] {
    --theme-border-medium: #ffffff;
    --theme-text-primary: #ffffff;
    --theme-bg-primary: #000000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== END OF THEME DEFAULT CSS ===== */