/*! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com */

/* Base styles */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::before,::after{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}

/* Custom NetzKiste Styles */
html{@apply dark}
body{@apply bg-dark-900 text-gray-100 font-sans antialiased}

/* Scrollbar Styling */
::-webkit-scrollbar{@apply w-2}
::-webkit-scrollbar-track{@apply bg-dark-800}
::-webkit-scrollbar-thumb{@apply bg-primary-500 rounded-full}
::-webkit-scrollbar-thumb:hover{@apply bg-primary-400}

/* Button Components */
.btn{@apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-900}
.btn-primary{@apply btn bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500 shadow-purple}
.btn-secondary{@apply btn bg-dark-700 text-gray-200 hover:bg-dark-600 focus:ring-dark-500 border border-dark-600}
.btn-accent-orange{@apply btn bg-accent-orange text-white hover:bg-orange-600 focus:ring-accent-orange}
.btn-accent-green{@apply btn bg-accent-green text-white hover:bg-green-600 focus:ring-accent-green}
.btn-outline{@apply btn border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white focus:ring-primary-500}

/* Form Components */
.form-input{@apply block w-full px-3 py-2 bg-dark-800 border border-dark-600 rounded-lg text-gray-100 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:outline-none transition-colors duration-200}
.form-label{@apply block text-sm font-medium text-gray-300 mb-2}
.form-error{@apply text-red-400 text-sm mt-1}
.form-success{@apply text-green-400 text-sm mt-1}

/* Card Components */
.card{@apply bg-dark-800 rounded-xl shadow-dark border border-dark-700}
.card-header{@apply px-6 py-4 border-b border-dark-700}
.card-body{@apply px-6 py-4}
.card-footer{@apply px-6 py-4 border-t border-dark-700}

/* Status Badges */
.badge{@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium}
.badge-success{@apply badge bg-green-900 text-green-200}
.badge-warning{@apply badge bg-yellow-900 text-yellow-200}
.badge-error{@apply badge bg-red-900 text-red-200}
.badge-info{@apply badge bg-blue-900 text-blue-200}
.badge-primary{@apply badge bg-primary-900 text-primary-200}

/* Navigation */
.nav-link{@apply flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200}
.nav-link-active{@apply nav-link bg-primary-500 text-white}
.nav-link-inactive{@apply nav-link text-gray-300 hover:bg-dark-700 hover:text-white}

/* Domain Status Indicators */
.domain-status-active{@apply w-3 h-3 rounded-full bg-green-500 animate-pulse}
.domain-status-pending{@apply w-3 h-3 rounded-full bg-yellow-500 animate-bounce-gentle}
.domain-status-expired{@apply w-3 h-3 rounded-full bg-red-500}
.domain-status-suspended{@apply w-3 h-3 rounded-full bg-gray-500}

/* Loading States */
.loading-spinner{@apply animate-spin rounded-full h-6 w-6 border-b-2 border-primary-500}
.loading-dots{@apply inline-flex space-x-1}
.loading-dots span{@apply w-2 h-2 bg-primary-500 rounded-full animate-bounce}
.loading-dots span:nth-child(2){animation-delay:0.1s}
.loading-dots span:nth-child(3){animation-delay:0.2s}

/* Responsive Grid */
.grid-responsive{@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6}
.grid-responsive-2{@apply grid grid-cols-1 lg:grid-cols-2 gap-6}

/* Mobile Menu */
.mobile-menu{@apply fixed inset-0 z-50 bg-dark-900 transform transition-transform duration-300 ease-in-out}
.mobile-menu-open{@apply translate-x-0}
.mobile-menu-closed{@apply -translate-x-full}

/* Hero Section */
.hero-gradient{background:linear-gradient(135deg,#9B59B6 0%,#8E44AD 50%,#7D3C98 100%)}

/* Glass Effect */
.glass{@apply bg-white/10 backdrop-blur-md border border-white/20}

/* Hover Effects */
.hover-lift{@apply transition-transform duration-200 hover:-translate-y-1}
.hover-glow{@apply transition-shadow duration-200 hover:shadow-purple-lg}

/* Text Gradients */
.text-gradient{@apply bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent}

/* Custom Animations */
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes slideUp{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes bounceGentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulsePurple{0%,100%{box-shadow:0 0 0 0 rgba(155,89,182,0.7)}70%{box-shadow:0 0 0 10px rgba(155,89,182,0)}}

.animate-fade-in{animation:fadeIn 0.5s ease-in-out}
.animate-slide-up{animation:slideUp 0.3s ease-out}
.animate-bounce-gentle{animation:bounceGentle 2s infinite}
.animate-pulse-purple{animation:pulsePurple 2s infinite}

/* Responsive Text */
.text-responsive{@apply text-sm sm:text-base lg:text-lg}
.text-responsive-xl{@apply text-2xl sm:text-3xl lg:text-4xl xl:text-5xl}

/* Safe Area for Mobile */
.safe-top{padding-top:env(safe-area-inset-top)}
.safe-bottom{padding-bottom:env(safe-area-inset-bottom)}

/* NetzKiste Color Palette */
:root{
  --primary-50: #f3e8ff;
  --primary-100: #e9d5ff;
  --primary-200: #d8b4fe;
  --primary-300: #c084fc;
  --primary-400: #a855f7;
  --primary-500: #9B59B6;
  --primary-600: #9333ea;
  --primary-700: #7c3aed;
  --primary-800: #6b21a8;
  --primary-900: #581c87;
  --accent-orange: #FF6F00;
  --accent-green: #00C853;
  --dark-50: #f8f9fa;
  --dark-100: #e9ecef;
  --dark-200: #dee2e6;
  --dark-300: #ced4da;
  --dark-400: #adb5bd;
  --dark-500: #6c757d;
  --dark-600: #495057;
  --dark-700: #343a40;
  --dark-800: #1E1E1E;
  --dark-900: #121212;
}

/* Utility Classes */
.bg-primary-500{background-color:var(--primary-500)}
.bg-primary-600{background-color:var(--primary-600)}
.bg-primary-400{background-color:var(--primary-400)}
.bg-primary-900{background-color:var(--primary-900)}
.bg-accent-orange{background-color:var(--accent-orange)}
.bg-accent-green{background-color:var(--accent-green)}
.bg-dark-800{background-color:var(--dark-800)}
.bg-dark-700{background-color:var(--dark-700)}
.bg-dark-600{background-color:var(--dark-600)}
.bg-dark-900{background-color:var(--dark-900)}
.bg-green-500{background-color:#10b981}
.bg-yellow-500{background-color:#f59e0b}
.bg-red-500{background-color:#ef4444}
.bg-gray-500{background-color:#6b7280}
.bg-green-900{background-color:#064e3b}
.bg-yellow-900{background-color:#78350f}
.bg-red-900{background-color:#7f1d1d}
.bg-blue-900{background-color:#1e3a8a}

.text-primary-500{color:var(--primary-500)}
.text-primary-400{color:var(--primary-400)}
.text-primary-600{color:var(--primary-600)}
.text-primary-200{color:var(--primary-200)}
.text-gray-100{color:#f3f4f6}
.text-gray-200{color:#e5e7eb}
.text-gray-300{color:#d1d5db}
.text-gray-400{color:#9ca3af}
.text-white{color:#ffffff}
.text-green-200{color:#bbf7d0}
.text-yellow-200{color:#fef3c7}
.text-red-200{color:#fecaca}
.text-blue-200{color:#bfdbfe}
.text-red-400{color:#f87171}
.text-green-400{color:#4ade80}

.border-primary-500{border-color:var(--primary-500)}
.border-dark-600{border-color:var(--dark-600)}
.border-dark-700{border-color:var(--dark-700)}

.ring-primary-500{--tw-ring-color:var(--primary-500)}
.ring-dark-500{--tw-ring-color:var(--dark-500)}
.ring-accent-orange{--tw-ring-color:var(--accent-orange)}
.ring-accent-green{--tw-ring-color:var(--accent-green)}

.shadow-purple{box-shadow:0 4px 14px 0 rgba(155,89,182,0.25)}
.shadow-purple-lg{box-shadow:0 10px 25px 0 rgba(155,89,182,0.3)}
.shadow-dark{box-shadow:0 4px 14px 0 rgba(0,0,0,0.5)}
.shadow-dark-lg{box-shadow:0 10px 25px 0 rgba(0,0,0,0.6)}

/* Responsive Design */
@media (min-width: 640px) {
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:text-base{font-size:1rem;line-height:1.5rem}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
}

@media (min-width: 768px) {
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .xl\:text-5xl{font-size:3rem;line-height:1}
}