/**
 * Custom Styles for NetaSampark Blog CMS
 * Matches netasampark-home design system
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: #0B1C2D;
    color: white;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  * {
    box-sizing: border-box;
  }

  a {
    text-decoration: none;
  }

  button {
    cursor: pointer;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #0B1C2D;
  }

  ::-webkit-scrollbar-thumb {
    background: #1a3a52;
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #244a6a;
  }
}

@layer components {
  /* Button Variants */
  .btn-primary {
    @apply bg-accent text-black px-6 py-3 font-semibold rounded-lg hover:bg-accent-400 transition-all duration-300 hover:shadow-glow active:scale-95 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-primary;
  }

  .btn-secondary {
    @apply border-2 border-white text-white px-6 py-3 font-semibold rounded-lg hover:bg-white hover:text-primary transition-all duration-300 active:scale-95 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary;
  }

  .btn-ghost {
    @apply text-gray-300 px-6 py-3 font-semibold rounded-lg hover:bg-white/10 hover:text-white transition-all duration-300 active:scale-95;
  }

  /* Card Styles */
  .card {
    @apply bg-secondary/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-6 transition-all duration-300 hover:border-accent/50 hover:shadow-large;
  }

  .card-elevated {
    @apply bg-secondary border border-gray-700/50 rounded-xl p-8 shadow-medium hover:shadow-large hover:-translate-y-1 transition-all duration-300;
  }

  /* Glass Morphism */
  .glass {
    @apply bg-white/5 backdrop-blur-md border border-white/10 rounded-xl;
  }

  /* Gradient Text */
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-accent to-accent-300;
  }

  /* Section Container */

.section-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
  /* Focus Styles */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-primary;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* Custom Shadows */
  .shadow-medium {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  .shadow-large {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  }

  .shadow-glow {
    box-shadow: 0 0 20px rgba(244, 180, 0, 0.4), 0 0 40px rgba(244, 180, 0, 0.2);
  }

  /* Line Clamp */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Animations */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tailwind Config Extension */
@layer base {
  :root {
    --color-primary: #0B1C2D;
    --color-secondary: #1a3a52;
    --color-accent: #F4B400;
  }
}

/* Rich Text Editor Styles */
.ql-editor {
  min-height: 300px;
  color: #333;
}

.ql-toolbar {
  background: #f5f5f5;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.ql-container {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Admin Panel Styles */
.admin-sidebar {
  background: #1a3a52;
  min-height: calc(100vh - 64px);
}

.admin-content {
  background: #0B1C2D;
  min-height: calc(100vh - 64px);
}

/* Form Styles */
.form-input {
  @apply w-full px-4 py-3 bg-primary/50 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all;
}

.form-textarea {
  @apply w-full px-4 py-3 bg-primary/50 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all resize-none;
}

.form-select {
  @apply w-full px-4 py-3 bg-primary/50 border border-gray-600 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all appearance-none cursor-pointer;
}

.form-label {
  @apply block text-sm font-semibold text-gray-300 mb-2;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(26, 58, 82, 0.3);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(244, 180, 0, 0.5);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 180, 0, 0.7);
}

/* Table Styles */
.admin-table {
  @apply w-full bg-secondary/30 rounded-lg overflow-hidden;
}

.admin-table th {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider bg-secondary/50;
}

.admin-table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-300;
}

.admin-table tr:hover {
  @apply bg-secondary/50;
}

/* Badge Styles */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
  @apply bg-green-500/20 text-green-400;
}

.badge-warning {
  @apply bg-yellow-500/20 text-yellow-400;
}

.badge-danger {
  @apply bg-red-500/20 text-red-400;
}

.badge-info {
  @apply bg-blue-500/20 text-blue-400;
}

/* Loading Spinner */
.spinner {
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #F4B400;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-container {
        padding-left: 2rem;
        padding-right: 2rem
    }
}
@media (min-width:1024px) {
    .section-container {
        padding-left: 3rem;
        padding-right: 3rem
    }
  }