/* Custom styles for GitFusion */

/* HTMX loading states - disabled to prevent flickering */
.htmx-request {
    opacity: 1;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-indicator {
    display: none;
}

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

::-webkit-scrollbar-track {
    @apply bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-600 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* Contribution calendar styling */
.contribution-calendar {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
}

/* Container for the entire graph with responsive behavior */
.contribution-graph-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Calendar container wrapper - maintains height during swaps */
#contribution-graph-calendar {
    min-height: 150px;
    /* Prevent layout shift during HTMX swaps */
    contain: layout;
}

/* Scrollable wrapper for the calendar */
.contribution-calendar {
    overflow: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    /* Prevent layout shift by setting a minimum height */
    min-height: 150px;
    /* Height will be set dynamically by JavaScript */
    transition: none; /* Disable any transitions */
}

/* Inner container to control the actual calendar width */
.contribution-calendar-inner {
    min-width: max-content;
    width: max-content;
    transform-origin: top left;
    /* Disable transitions to prevent flicker */
    transition: none;
    /* Apply transform immediately */
    will-change: transform;
}

/* Month labels row - matching embed SVG spacing */
.month-labels {
    display: flex;
    margin-bottom: 8px;
    min-width: max-content;
}

.month-spacer {
    width: 46px; /* Matches embed SVG graphStartX */
    flex-shrink: 0;
}

.month-label {
    width: 13px; /* 11px cell + 2px gap */
    text-align: left;
    color: #9ca3af; /* gray-400 */
    font-size: 10px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Main calendar grid */
.calendar-grid {
    display: flex;
    min-width: max-content;
}

.day-labels {
    display: flex;
    flex-direction: column;
    width: 46px; /* Matches embed SVG */
    margin-right: 0;
    flex-shrink: 0;
}

.day-label {
    height: 13px; /* 11px cell + 2px gap */
    display: flex;
    align-items: center;
    font-size: 10px;
    color: #9ca3af; /* gray-400 */
    opacity: 0.7;
}

.weeks-container {
    display: flex;
    gap: 2px; /* Matches embed SVG cellGap */
    min-width: max-content;
}

.week-column {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Matches embed SVG cellGap */
    flex-shrink: 0;
}

.contribution-day {
    width: 11px; /* Matches embed SVG cellSize */
    height: 11px; /* Matches embed SVG cellSize */
    border-radius: 2px; /* Matches embed SVG rx="2" */
    cursor: pointer;
    flex-shrink: 0;
}

.contribution-day.empty {
    background: transparent;
}

.contribution-day.level-0 {
    background-color: #374151; /* gray-700 */
}

.contribution-day.level-1 {
    background-color: #14532d; /* green-900 */
}

.contribution-day.level-2 {
    background-color: #15803d; /* green-700 */
}

.contribution-day.level-3 {
    background-color: #22c55e; /* green-500 */
}

.contribution-day.level-4 {
    background-color: #4ade80; /* green-400 */
}

.contribution-day:hover {
    ring: 1px;
    ring-color: white;
    opacity: 0.8;
}

/* Custom scrollbar for contribution calendar */
.contribution-calendar::-webkit-scrollbar {
    height: 8px;
}

.contribution-calendar::-webkit-scrollbar-track {
    @apply bg-gray-700 rounded;
    margin: 0 4px;
}

.contribution-calendar::-webkit-scrollbar-thumb {
    @apply bg-gray-500 rounded;
}

.contribution-calendar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Firefox scrollbar */
.contribution-calendar {
    scrollbar-width: thin;
    scrollbar-color: #6b7280 #374151;
}