@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Admin styles using Tailwind's @apply directive */

  .admin-form-input {
    @apply mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
  }

  .admin-btn {
    @apply py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }

  .admin-btn-secondary {
    @apply py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }

  .admin-card {
    @apply bg-white shadow-md rounded-lg p-6 mb-6;
  }

  .admin-table {
    @apply min-w-full divide-y divide-gray-200;
  }

  .admin-table-header {
    @apply bg-gray-50;
  }

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

  .admin-table-row {
    @apply bg-white divide-y divide-gray-200;
  }

  .admin-link {
    @apply text-indigo-600 hover:text-indigo-900;
  }

  .admin-danger-link {
    @apply text-red-600 hover:text-red-900;
  }

  .admin-form-label {
    @apply block text-sm font-medium text-gray-700;
  }

  .admin-form-group {
    @apply mb-4;
  }

  .admin-sidebar {
    @apply w-64 bg-gray-800 text-white min-h-screen px-4 py-6;
  }

  .admin-sidebar-link {
    @apply block py-2 px-4 rounded hover:bg-gray-700;
  }

  .admin-sidebar-link-active {
    @apply bg-gray-700;
  }

  .admin-content {
    @apply flex-1 p-8;
  }

  .admin-heading {
    @apply text-2xl font-bold mb-6;
  }

  .admin-subheading {
    @apply text-lg font-medium text-gray-900 mb-4;
  }

  .admin-notice {
    @apply bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6;
  }

  .admin-alert {
    @apply bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6;
  }
}
@import "tailwindcss";

@layer components {
/* Code Block Styling */
.code-block-wrapper {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: rgb(17 24 39);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: rgb(31 41 55);
  border-bottom: 1px solid rgb(55 65 81);
}

.code-language {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(156 163 175);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.copy-code-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: rgb(156 163 175);
  background-color: rgb(55 65 81);
  border-radius: 0.25rem;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}

.copy-code-btn:hover {
  background-color: rgb(75 85 99);
  color: white;
}

.copy-code-btn.copied {
  background-color: rgb(21 128 61);
  color: rgb(220 252 231);
}

.copy-icon {
  width: 1rem;
  height: 1rem;
}

.copy-text {
  display: none;
}

.copy-code-btn:hover .copy-text {
  display: inline;
  margin-left: 0.25rem;
}

.copy-code-btn.copied .copy-text {
  display: inline;
  margin-left: 0.25rem;
}

/* Rouge syntax highlighting */
.highlight {
  background-color: rgb(17 24 39); /* bg-gray-900 */
  overflow-x: auto;
  color: #e5e7eb !important; /* Explicitly set light gray text color */
}

.highlight pre {
  padding: 1rem; /* p-4 */
  margin: 0; /* m-0 */
  color: #e5e7eb !important; /* Ensure pre elements have light text */
}

.highlight code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* font-mono */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.625; /* leading-relaxed */
  color: #e5e7eb !important; /* Ensure code elements have light text */
  background-color: transparent !important; /* Remove any background from code inside pre */
}

/* Add line numbers styling if needed */
.highlight .lineno {
  color: rgb(107 114 128); /* text-gray-500 */
  padding-right: 1rem; /* pr-4 */
  user-select: none; /* select-none */
}

/* Scrollbar styling for code blocks */
.highlight::-webkit-scrollbar {
  height: 0.5rem; /* h-2 */
}

.highlight::-webkit-scrollbar-track {
  background-color: rgb(31 41 55); /* bg-gray-800 */
}

.highlight::-webkit-scrollbar-thumb {
  background-color: rgb(75 85 99); /* bg-gray-600 */
  border-radius: 0.25rem; /* rounded */
}

.highlight::-webkit-scrollbar-thumb:hover {
  background-color: rgb(107 114 128); /* bg-gray-500 */
}
.highlight .c { color: rgb(156 163 175); font-style: italic; } /* Comment */
.highlight .err { color: rgb(239 68 68); } /* Error */
.highlight .k { color: rgb(216 180 254); font-weight: 600; } /* Keyword */
.highlight .o { color: rgb(234 179 8); } /* Operator */
.highlight .cm { color: rgb(107 114 128); } /* Comment.Multiline */
.highlight .cp { color: rgb(96 165 250); } /* Comment.Preproc */
.highlight .c1 { color: rgb(107 114 128); } /* Comment.Single */
.highlight .cs { color: rgb(107 114 128); } /* Comment.Special */
.highlight .gd { color: rgb(239 68 68); } /* Generic.Deleted */
.highlight .ge { font-style: italic; } /* Generic.Emph */
.highlight .gr { color: rgb(239 68 68); } /* Generic.Error */
.highlight .gh { color: rgb(96 165 250); } /* Generic.Heading */
.highlight .gi { color: rgb(34 197 94); } /* Generic.Inserted */
.highlight .go { color: rgb(107 114 128); } /* Generic.Output */
.highlight .gp { color: rgb(96 165 250); } /* Generic.Prompt */
.highlight .gs { font-weight: 700; } /* Generic.Strong */
.highlight .gu { color: rgb(192 132 252); } /* Generic.Subheading */
.highlight .gt { color: rgb(239 68 68); } /* Generic.Traceback */
.highlight .kc { color: rgb(192 132 252); } /* Keyword.Constant */
.highlight .kd { color: rgb(192 132 252); } /* Keyword.Declaration */
.highlight .kn { color: rgb(192 132 252); } /* Keyword.Namespace */
.highlight .kp { color: rgb(192 132 252); } /* Keyword.Pseudo */
.highlight .kr { color: rgb(192 132 252); } /* Keyword.Reserved */
.highlight .kt { color: rgb(234 179 8); } /* Keyword.Type */
.highlight .m { color: rgb(251 146 60); } /* Literal.Number */
.highlight .s { color: rgb(134 239 172); } /* Literal.String */
.highlight .na { color: rgb(96 165 250); } /* Name.Attribute */
.highlight .nb { color: rgb(234 179 8); } /* Name.Builtin */
.highlight .nc { color: rgb(234 179 8); } /* Name.Class */
.highlight .no { color: rgb(239 68 68); } /* Name.Constant */
.highlight .nd { color: rgb(96 165 250); } /* Name.Decorator */
.highlight .ni { color: rgb(192 132 252); } /* Name.Entity */
.highlight .ne { color: rgb(239 68 68); } /* Name.Exception */
.highlight .nf { color: rgb(147 197 253); font-weight: 600; } /* Name.Function */
.highlight .nl { color: rgb(234 179 8); } /* Name.Label */
.highlight .nn { color: rgb(234 179 8); } /* Name.Namespace */
.highlight .nt { color: rgb(96 165 250); } /* Name.Tag */
.highlight .nv { color: rgb(239 68 68); } /* Name.Variable */
.highlight .w { color: rgb(107 114 128); } /* Text.Whitespace */

@layer components {
  .article-body {
    color: rgb(31 41 55); /* text-gray-800 */
    line-height: 1.625; /* leading-relaxed */
  }

  .article-body h1, .article-h1 {
    position: relative;
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1.5rem; /* mb-6 */
    color: rgb(17 24 39); /* text-gray-900 */
    border-bottom-width: 2px; /* border-b-2 */
    border-color: rgb(229 231 235); /* border-gray-200 */
    padding-bottom: 0.75rem; /* pb-3 */
  }

  .article-body h2, .article-h2 {
    position: relative;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
    color: rgb(31 41 55); /* text-gray-800 */
    border-bottom-width: 1px; /* border-b */
    border-color: rgb(229 231 235); /* border-gray-200 */
    padding-bottom: 0.5rem; /* pb-2 */
  }

  .article-body h3, .article-h3 {
    position: relative;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    margin-top: 1.5rem; /* mt-6 */
    margin-bottom: 0.75rem; /* mb-3 */
    color: rgb(31 41 55); /* text-gray-800 */
  }

  .article-body h4, .article-h4 {
    position: relative;
    font-size: 1.25rem; /* text-xl */
    font-weight: 500; /* font-medium */
    margin-top: 1rem; /* mt-4 */
    margin-bottom: 0.5rem; /* mb-2 */
    color: rgb(55 65 81); /* text-gray-700 */
  }
  
  /* Add hover effect for header anchors */
  .article-h1:hover, .article-h2:hover, .article-h3:hover, .article-h4:hover {
    cursor: pointer;
  }
  
  .article-h1:hover::before, .article-h2:hover::before, .article-h3:hover::before, .article-h4:hover::before {
    content: "#";
    position: absolute;
    margin-left: -1.5rem; /* -ml-6 */
    color: rgb(156 163 175); /* text-gray-400 */
  }

  .article-body p {
    margin-top: 1rem; /* my-4 */
    margin-bottom: 1rem;
  }

  .article-body a {
    color: rgb(37 99 235); /* text-blue-600 */
    text-decoration: underline;
  }
  
  .article-body a:hover {
    color: rgb(30 64 175); /* hover:text-blue-800 */
  }

  .article-body ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 1rem; /* my-4 */
    margin-bottom: 1rem;
  }

  .article-body ol {
    list-style-type: decimal;
    list-style-position: inside;
    margin-top: 1rem; /* my-4 */
    margin-bottom: 1rem;
  }

  .article-body li {
    margin-top: 0.5rem; /* my-2 */
    margin-bottom: 0.5rem;
  }

  .article-body blockquote {
    padding-left: 1rem; /* pl-4 */
    border-left-width: 4px; /* border-l-4 */
    border-color: rgb(209 213 219); /* border-gray-300 */
    font-style: italic;
    margin-top: 1rem; /* my-4 */
    margin-bottom: 1rem;
  }

  .article-body pre {
    background-color: rgb(17 24 39); /* bg-gray-900 */
    border-radius: 0.5rem; /* rounded-lg */
    overflow-x: auto;
    color: #e5e7eb !important; /* Light gray text for code blocks */
  }

  .article-body pre code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* font-mono */
    font-size: 0.875rem; /* text-sm */
    color: #e5e7eb !important; /* Ensure code inside pre has light text */
    background-color: transparent !important;
  }

  .article-body code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* font-mono */
    font-size: 0.875rem; /* text-sm */
  }

  .article-body :not(pre) > code {
    background-color: rgb(243 244 246); /* bg-gray-100 */
    color: rgb(31 41 55); /* text-gray-800 */
    padding-left: 0.25rem; /* px-1 */
    padding-right: 0.25rem;
    padding-top: 0.125rem; /* py-0.5 */
    padding-bottom: 0.125rem;
    border-radius: 0.25rem; /* rounded */
  }

  .article-body table {
    min-width: 100%; /* min-w-full */
    border-width: 1px; /* border */
    border-color: rgb(209 213 219); /* border-gray-300 */
    margin-top: 1rem; /* my-4 */
    margin-bottom: 1rem;
  }

  .article-body th {
    background-color: rgb(243 244 246); /* bg-gray-100 */
    border-bottom-width: 1px; /* border-b */
    border-color: rgb(209 213 219); /* border-gray-300 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem;
    text-align: left;
  }

  .article-body td {
    border-bottom-width: 1px; /* border-b */
    border-color: rgb(209 213 219); /* border-gray-300 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem;
  }

  .article-body hr {
    margin-top: 2rem; /* my-8 */
    margin-bottom: 2rem;
    border-top-width: 1px; /* border-t */
    border-color: rgb(209 213 219); /* border-gray-300 */
  }

  .animate-slide-in-left {
    animation: slideInLeft 0.5s ease-out forwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.5s ease-out forwards;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
  #timeline > div {
    left: 20px !important;
  }
}
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


 .article-body p {
  padding: 0.5rem 0;
 }