/* Sentinel System - Custom Styles */

/* Navigation Links */
.nav-link {
    @apply px-3 py-2 rounded-md text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

.nav-link.active {
    @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20;
}

.mobile-nav-link {
    @apply block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700;
}

.mobile-nav-link.active {
    @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20;
}

/* Cards */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply px-4 py-3 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
    @apply p-4;
}

/* Buttons */
.btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900;
}

.btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 focus:ring-gray-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

/* Forms */
.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-y;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
}

/* Alerts */
.alert {
    @apply p-4 rounded-md mb-4;
}

.alert-success {
    @apply bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800;
}

.alert-error {
    @apply bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-800;
}

.alert-warning {
    @apply bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800;
}

.alert-info {
    @apply bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800;
}

/* Markdown Content */
.prose-sentinel {
    @apply prose dark:prose-invert max-w-none;
}

.prose-sentinel h1 {
    @apply text-2xl font-bold mb-4 pb-2 border-b border-gray-200 dark:border-gray-700;
}

.prose-sentinel h2 {
    @apply text-xl font-semibold mt-6 mb-3;
}

.prose-sentinel h3 {
    @apply text-lg font-medium mt-4 mb-2;
}

.prose-sentinel p {
    @apply mb-4;
}

.prose-sentinel ul, .prose-sentinel ol {
    @apply mb-4 pl-6;
}

.prose-sentinel li {
    @apply mb-1;
}

.prose-sentinel code {
    @apply px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono;
}

.prose-sentinel pre {
    @apply p-4 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-x-auto mb-4;
}

.prose-sentinel pre code {
    @apply bg-transparent p-0;
}

.prose-sentinel blockquote {
    @apply pl-4 border-l-4 border-gray-300 dark:border-gray-600 italic text-gray-600 dark:text-gray-400;
}

.prose-sentinel table {
    @apply w-full border-collapse mb-4;
}

.prose-sentinel th, .prose-sentinel td {
    @apply border border-gray-300 dark:border-gray-600 px-3 py-2 text-left;
}

.prose-sentinel th {
    @apply bg-gray-100 dark:bg-gray-800 font-semibold;
}

.prose-sentinel a {
    @apply text-primary-600 dark:text-primary-400 hover:underline;
}

/* File Tree */
.file-tree {
    @apply font-mono text-sm;
}

.file-tree-item {
    @apply flex items-center py-1 px-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer;
}

.file-tree-item.active {
    @apply bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400;
}

.file-tree-folder {
    @apply text-yellow-600 dark:text-yellow-400;
}

.file-tree-file {
    @apply text-gray-600 dark:text-gray-400;
}

/* Search Results */
.search-result {
    @apply p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50;
}

.search-result:last-child {
    @apply border-b-0;
}

.search-result-path {
    @apply text-sm text-gray-500 dark:text-gray-400 font-mono;
}

.search-result-match {
    @apply mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono overflow-x-auto;
}

.search-highlight {
    @apply bg-yellow-200 dark:bg-yellow-800 px-0.5 rounded;
}

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

.badge-primary {
    @apply bg-primary-100 dark:bg-primary-900/30 text-primary-800 dark:text-primary-200;
}

.badge-gray {
    @apply bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200;
}

.badge-green {
    @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200;
}

.badge-yellow {
    @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200;
}

.badge-red {
    @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200;
}

/* Stat Cards */
.stat-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4;
}

.stat-value {
    @apply text-2xl font-bold text-gray-900 dark:text-gray-100;
}

.stat-label {
    @apply text-sm text-gray-500 dark:text-gray-400;
}

/* Loading Spinner */
.spinner {
    @apply animate-spin h-5 w-5 text-primary-600 dark:text-primary-400;
}

/* Dark mode transition */
html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

* {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}