/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent-green: #39ff14;
    --border-color: #30363d;
    --hover-bg: #1c2128;
    --success-color: #28a745;
    --error-color: #dc3545;
    --warning-color: #ffc107;
    --danger-color: #ff4444;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

main {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Main content scrollbar */
main::-webkit-scrollbar {
    width: 10px;
}

main::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

main::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

main::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* App Layout with Sidebar */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

/* Sidebar Styles */
.sidebar {
    width: 200px;
    background: var(--bg-secondary);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 0 0 0 var(--border-color); /* Use shadow instead of border */
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    height: 80px;
    display: flex;
    align-items: center;
}

.sidebar-header h2 {
    color: var(--accent-green);
    font-size: 1.3rem;
    font-weight: normal;
    margin: 0;
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.nav-link {
    display: block;
    padding: 12px 20px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

li.hide-nav-item {
    display: none;
}

.nav-link:hover {
    background: var(--hover-bg);
    color: var(--accent-green);
}

.nav-link.active {
    background: var(--hover-bg);
    color: var(--accent-green);
    border-left-color: var(--accent-green);
}

/* Main Content Area */
.main-content {
    position: fixed;
    left: 200px;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-primary);
}

/* Header */
header {
    background: var(--bg-secondary);
    color: var(--accent-green);
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-color);
    margin: 0;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    flex-shrink: 0;
}

header h1 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    font-weight: normal;
}

header p {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Header with back button */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.back-button {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
    white-space: nowrap;
}

.back-button:hover {
    color: var(--accent-green);
    border-color: var(--accent-green);
    background: var(--hover-bg);
}

.back-link {
    color: var(--accent-green);
    text-decoration: none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.3s;
}

.back-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Tables */
.table-section {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
    width: 100%;
    box-sizing: border-box;
}

.table-section h3 {
    color: var(--accent-green);
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: normal;
}

/* Search Bar */
.search-container {
    margin-bottom: 15px;
    position: relative;
}

.search-bar {
    width: 100%;
    padding: 10px 15px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.search-bar:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 1px var(--accent-green);
}

.search-bar::placeholder {
    color: var(--text-secondary);
}

/* Table Controls (Search + Pagination combined) */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.table-controls .search-container {
    margin-bottom: 0;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.table-controls .search-bar {
    width: 100%;
}

.table-controls .pagination-controls {
    margin: 0;
    flex-shrink: 0;
}

.table-wrapper {
    overflow-x: auto;
}

/* Table wrapper scrollbar */
.table-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.table-wrapper::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}

/* Search Bar */
.search-container {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-input {
    flex: 1;
    max-width: 300px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 1px var(--accent-green);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Comprehensive Table Specific Styles */
.comprehensive-table {
    margin-top: 20px;
    border: 1px solid var(--border-color);
    max-width: 100%;
    overflow-x: auto;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.comprehensive-table table {
    min-width: 2200px;
}

.comprehensive-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg-primary);
}

.comprehensive-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg-primary);
}

/* Comprehensive table column widths */
#comprehensiveTable th:nth-child(1),  /* Date */
#comprehensiveTable td:nth-child(1) { min-width: 140px; }

#comprehensiveTable th:nth-child(2),  /* Hash */
#comprehensiveTable td:nth-child(2) { min-width: 80px; }

#comprehensiveTable th:nth-child(3),  /* User */
#comprehensiveTable td:nth-child(3) { min-width: 120px; }

#comprehensiveTable th:nth-child(4),  /* Project */
#comprehensiveTable td:nth-child(4) { min-width: 180px; }

#comprehensiveTable th:nth-child(5),  /* Organization */
#comprehensiveTable td:nth-child(5) { min-width: 120px; }

#comprehensiveTable th:nth-child(6),  /* Files */
#comprehensiveTable td:nth-child(6) { min-width: 60px; }

#comprehensiveTable th:nth-child(7),  /* +Lines */
#comprehensiveTable td:nth-child(7) { min-width: 70px; }

#comprehensiveTable th:nth-child(8),  /* -Lines */
#comprehensiveTable td:nth-child(8) { min-width: 50px; }

#comprehensiveTable th:nth-child(9),  /* Message */
#comprehensiveTable td:nth-child(9) { min-width: 400px; }

#comprehensiveTable th:nth-child(10),  /* Quality */
#comprehensiveTable td:nth-child(10) { min-width: 70px; }

#comprehensiveTable th:nth-child(11), /* Dev Level */
#comprehensiveTable td:nth-child(11) { min-width: 90px; }

#comprehensiveTable th:nth-child(12), /* Complexity */
#comprehensiveTable td:nth-child(12) { min-width: 90px; }

#comprehensiveTable th:nth-child(13), /* Hours */
#comprehensiveTable td:nth-child(13) { min-width: 60px; }

#comprehensiveTable th:nth-child(14), /* AI % */
#comprehensiveTable td:nth-child(14) { min-width: 60px; }

#comprehensiveTable th:nth-child(15), /* AI Hours */
#comprehensiveTable td:nth-child(15) { min-width: 80px; }

#comprehensiveTable th:nth-child(16), /* Savings */
#comprehensiveTable td:nth-child(16) { min-width: 120px; }

#comprehensiveTable th:nth-child(17), /* Tokens */
#comprehensiveTable td:nth-child(17) { min-width: 70px; }

#comprehensiveTable th:nth-child(18), /* Total Cost */
#comprehensiveTable td:nth-child(18) { min-width: 90px; }

#comprehensiveTable th:nth-child(19), /* Avg/Model */
#comprehensiveTable td:nth-child(19) { min-width: 90px; }

#comprehensiveTable th:nth-child(20), /* Action */
#comprehensiveTable td:nth-child(20) { min-width: 100px; }

.comprehensive-table::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.comprehensive-table::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.comprehensive-table::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

.comprehensive-table::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.comprehensive-table::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

thead {
    background-color: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 10;
}

th {
    text-align: left;
    padding: 12px;
    font-weight: normal;
    color: var(--accent-green);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.85rem;
    white-space: nowrap;
    background-color: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 10;
}

td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

tbody tr:hover {
    background-color: var(--hover-bg);
}

/* View Details Button */
.view-details {
    background: transparent;
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.85em;
    font-family: inherit;
    transition: all 0.3s;
    height: 32px;
    border-radius: 4px;
}

.view-details:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
}

/* Table Links */
.table-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s;
}

.table-link:hover {
    color: var(--accent-green);
    text-decoration: underline;
}

/* Action Buttons Container */
.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* GitHub Link Buttons */
.github-link,
.github-link-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.github-link:hover,
.github-link-btn:hover {
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.github-link::before {
    content: '↗';
    font-size: 0.8rem;
}

/* Grand Total Row */
tfoot tr {
    background-color: var(--bg-primary);
    color: var(--accent-green);
    font-weight: normal;
    border-top: 2px solid var(--accent-green);
}

tfoot td {
    padding: 15px 12px;
    border: none;
}

/* Compact header for details page */
.compact-header {
    padding: 20px 40px !important;
    margin-bottom: 0 !important;
    height: 80px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.compact-header h1 {
    font-size: 1.5rem !important;
    margin-bottom: 5px !important;
    font-weight: normal;
}

.compact-header .back-link {
    margin-bottom: 0 !important;
}


/* Section titles outside containers */
.section-title {
    color: var(--accent-green);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: normal;
    text-transform: uppercase;
}

/* Main page title */
.main-title {
    color: var(--accent-green);
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: normal;
    text-transform: uppercase;
}

/* Details Page Styles */
.commit-info {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.commit-info.compact {
    padding: 15px;
    margin-bottom: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.info-item {
    display: flex;
    align-items: baseline;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.label {
    font-weight: normal;
    color: var(--text-secondary);
    margin-right: 10px;
    min-width: 80px;
}

.value {
    color: var(--text-primary);
}

/* GitHub Links in Details Page */
.commit-link,
.user-link,
.project-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.commit-link:hover,
.user-link:hover,
.project-link:hover {
    color: var(--accent-green);
    text-decoration: underline;
}

.commit-link::after,
.user-link::after {
    content: '↗';
    font-size: 0.8em;
    opacity: 0.6;
}

/* Summary Stats */
.summary-stats {
    margin-bottom: 25px;
}

.summary-stats.compact {
    margin-bottom: 15px;
}

.summary-stats.compact h2 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

/* Analytics Page Styles */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 20px;
    transition: all 0.3s;
}

.stat-card:hover {
    border-color: var(--accent-green);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.1);
}

.stat-content h4 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: normal;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.stat-value {
    color: var(--accent-green);
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0;
}

.stat-card {
    background: var(--bg-secondary);
    padding: 15px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: normal;
    color: var(--accent-green);
    margin-bottom: 3px;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* Cost Summary */
.cost-summary {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.cost-summary.compact {
    padding: 15px;
    margin-bottom: 15px;
}

.cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

/* Model Cards */
.model-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.model-card {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
}

.model-details {
    margin-top: 0;
}

.model-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.model-name {
    font-weight: normal;
    color: var(--accent-green);
    text-transform: uppercase;
}

.model-provider {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Model Badges */
.model-badges {
    margin-top: 8px;
    min-height: 24px; /* Reserve space even when empty */
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.model-badges:empty {
    min-height: 24px; /* Maintain spacing for models without badges */
}

.model-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
}

.model-badge.most-expensive {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
}

.model-badge.cheapest {
    background: rgba(57, 255, 20, 0.2);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.model-badge.slowest {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
    border: 1px solid #ff9800;
}

.model-badge.fastest {
    background: rgba(0, 191, 255, 0.2);
    color: #00bfff;
    border: 1px solid #00bfff;
}

.model-scores {
    display: grid;
    gap: 10px;
    margin-bottom: 15px;
}

.score-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.reasoning {
    background: var(--bg-primary);
    padding: 10px;
    border: 1px solid var(--border-color);
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 100%;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.cost-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.cost-info span {
    flex: 1;
    min-width: 120px;
    text-align: center;
}

/* Code Analysis Section */
.code-analysis {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.code-analysis.compact {
    padding: 15px;
    margin-bottom: 15px;
}

.code-stats {
    margin-top: 10px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.code-breakdown {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.code-type {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
}

.type-header.code-type-header {
    color: var(--success-color);
}

.type-header.comment-type-header {
    color: #ff9800;
}

.type-header.text-type-header {
    color: #00bfff;
}

.progress-bar {
    height: 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.code-fill {
    background: rgba(57, 255, 20, 0.2);
    border: 1px solid var(--success-color);
}

.comment-fill {
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid #ff9800;
}

.text-fill {
    background: rgba(0, 191, 255, 0.2);
    border: 1px solid #00bfff;
}

.line-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Compact Code Analysis Styles */
.code-stats-compact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.stacked-progress-bar {
    height: 30px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    width: 100%;
}

.progress-segment {
    height: 100%;
    transition: width 0.3s ease;
    position: relative;
}

.progress-segment:not(:first-child) {
    margin-left: -1px;
}

.code-legend {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    width: 100%;
}

.code-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.legend-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.legend-label {
    font-weight: 600;
    color: var(--text-primary);
}

.legend-value {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-color.code-fill {
    border: 1px solid var(--success-color);
}

.legend-color.comment-fill {
    border: 1px solid #ff9800;
}

.legend-color.text-fill {
    border: 1px solid #00bfff;
}

/* Analysis Grid - Side by Side Layout */
.analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.analysis-section {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
}

.analysis-section .section-title {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}

.analysis-section .code-analysis,
.analysis-section .cost-summary {
    background: none;
    padding: 0;
    border: none;
    margin: 0;
}

.stat-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 0;
}

.cost-stats-compact {
    display: flex;
    flex-direction: column;
}

.cost-stats-compact .stat-line:last-child {
    margin-bottom: 0;
}

/* Responsive adjustment */
@media (max-width: 968px) {
    .analysis-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .code-legend {
        flex-wrap: wrap;
    }
    
    .code-legend .legend-item {
        flex: 0 0 auto;
        margin-bottom: 5px;
    }
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.chart-section {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
}

.chart-section h3 {
    color: var(--accent-green);
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: normal;
}

.chart-section canvas {
    max-height: 300px;
}

/* Chart.js dark mode overrides */
.chart-section {
    color: var(--text-primary);
}

/* Responsive charts */
@media (max-width: 968px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-section canvas {
        max-height: 250px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .info-grid,
    .cost-grid {
        grid-template-columns: 1fr;
    }
    
    /* Hide sidebar on mobile */
    .sidebar {
        display: none;
    }
    
    .main-content {
        margin-left: 0;
    }
}

/* AI Models Page Styles */
.provider-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.provider-badge.openai { background: #10a37f; color: white; }
.provider-badge.anthropic { background: #d4a574; color: black; }
.provider-badge.google { background: #4285f4; color: white; }
.provider-badge.xai { background: #000; color: white; border: 1px solid #333; }

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.status-badge.active { background: var(--success-color); color: white; }
.status-badge.inactive { background: var(--error-color); color: white; }
.status-badge.error { background: var(--warning-color); color: black; }
.status-badge.unknown { background: var(--text-secondary); color: white; }

.quality-score {
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
}

.quality-1, .quality-2 { background: var(--error-color); color: white; }
.quality-3 { background: var(--warning-color); color: black; }
.quality-4, .quality-5 { background: var(--success-color); color: white; }

.success-rate { color: var(--success-color); font-weight: bold; }
.error-rate.has-errors { color: var(--error-color); font-weight: bold; }

.test-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.form-select {
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85em;
    height: 32px;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-green);
}

.test-results {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.test-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.test-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.test-result.success { border-color: var(--success-color); }
.test-result.error { border-color: var(--error-color); }

.loading {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
}

.config-help {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.help-card {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.help-card h4 {
    color: var(--accent-green);
    margin-bottom: 10px;
}

.help-card code {
    background: var(--bg-primary);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    color: var(--accent-green);
}

.help-card ul {
    margin-left: 20px;
}

.help-card li {
    margin-bottom: 5px;
}

/* Pagination Styles */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.pagination-info {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin: 0 10px;
}

.pagination-size {
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9em;
}

.pagination-controls .btn {
    padding: 6px 12px;
    font-size: 0.9em;
    margin: 0;
}

.pagination-controls .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-controls .btn:disabled:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Alerts Page Styles */
.alert-summary {
    margin-bottom: 30px;
}

.alert-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.alert-error {
    border-color: #ff4444;
}

.alert-error .stat-value {
    color: #ff4444;
}

.alert-abnormal {
    border-color: #ff9800;
}

.alert-abnormal .stat-value {
    color: #ff9800;
}

.alert-ok {
    border-color: var(--success-color);
}

.alert-ok .stat-value {
    color: var(--success-color);
}

.alert-analyzing {
    border-color: #00bfff;
}

.alert-analyzing .stat-value {
    color: #00bfff;
}

/* Filter Section */
.filter-section {
    margin-bottom: 20px;
}

.filter-controls {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    cursor: pointer;
}

.filter-label input[type="checkbox"] {
    cursor: pointer;
}

/* Status Badge */
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
}

.status-error {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

.status-abnormal {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.status-ok {
    background: rgba(57, 255, 20, 0.2);
    color: var(--success-color);
}

/* Hours difference styling */
.hours-diff-positive {
    color: var(--success-color);
    font-weight: bold;
}

.hours-diff-negative {
    color: var(--error-color);
    font-weight: bold;
}

.status-active {
    background: rgba(57, 255, 20, 0.2);
    color: var(--success-color);
}

.status-inactive {
    background: rgba(128, 128, 128, 0.2);
    color: #888888;
}

.status-unknown {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.status-success {
    background: rgba(57, 255, 20, 0.2);
    color: var(--success-color);
}

.status-warning {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.status-analyzing {
    background: rgba(0, 191, 255, 0.2);
    color: #00bfff;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Models Table Column Widths */
#modelsTable th:nth-child(4),  /* Status column */
#modelsTable td:nth-child(4) {
    min-width: 100px;
}

/* Model Row Styling */
.model-row.model-active {
    background: rgba(57, 255, 20, 0.03);
}

.model-row.model-inactive {
    background: rgba(128, 128, 128, 0.05);
}

.model-row.model-error {
    background: rgba(255, 68, 68, 0.05);
}

.model-row.model-unknown {
    background: rgba(255, 215, 0, 0.05);
}

/* Performance Row Styling */
.performance-row.performance-excellent {
    background: rgba(57, 255, 20, 0.03);
}

.performance-row.performance-good {
    background: rgba(57, 255, 20, 0.02);
}

.performance-row.performance-warning {
    background: rgba(255, 152, 0, 0.03);
}

.performance-row.performance-poor {
    background: rgba(255, 68, 68, 0.05);
}

.error-text {
    color: #ff4444;
}

/* Alert Row Styling */
.alert-row.alert-error {
    background: rgba(255, 68, 68, 0.05);
}

.alert-row.alert-abnormal {
    background: rgba(255, 152, 0, 0.05);
}

.alert-row.alert-analyzing {
    background: rgba(0, 191, 255, 0.03);
}

.alert-reason {
    font-size: 0.9em;
    color: var(--text-secondary);
    max-width: 300px;
}

/* Unified alert stat cards with checkboxes */
.stat-card.clickable {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.stat-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-card .filter-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.stat-card .check-indicator {
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: var(--success-color);
    font-weight: bold;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.stat-card .check-indicator.hidden {
    opacity: 0;
}

/* Alert stat card colors */
.stat-card.alert-analyzing {
    background: rgba(0, 191, 255, 0.1);
    border-color: rgba(0, 191, 255, 0.3);
}

.stat-card.alert-analyzing .stat-value {
    color: #00bfff;
}

.stat-card.alert-error {
    background: rgba(255, 68, 68, 0.1);
    border-color: rgba(255, 68, 68, 0.3);
}

.stat-card.alert-error .stat-value {
    color: #ff4444;
}

.stat-card.alert-abnormal {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.3);
}

.stat-card.alert-abnormal .stat-value {
    color: #ff9800;
}

.stat-card.alert-ok {
    background: rgba(57, 255, 20, 0.1);
    border-color: rgba(57, 255, 20, 0.3);
}

.stat-card.alert-ok .stat-value {
    color: var(--accent-green);
}

/* Active state for checked cards - bolder border */
.stat-card.alert-analyzing.active {
    border: 3px solid #00bfff;
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.3);
}

.stat-card.alert-error.active {
    border: 3px solid #ff4444;
    box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.3);
}

.stat-card.alert-abnormal.active {
    border: 3px solid #ff9800;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.3);
}

.stat-card.alert-ok.active {
    border: 3px solid var(--accent-green);
    box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.3);
}

/* Settings Page Styles */
.settings-section {
    margin-bottom: 40px;
}

.settings-section h2 {
    color: var(--accent-green);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.integration-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
}

.integration-card.active {
    border-color: var(--accent-green);
}

.integration-card.coming-soon {
    opacity: 0.7;
}

.integration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.integration-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.integration-icon {
    color: var(--text-primary);
}

.integration-card.active .integration-icon {
    color: var(--accent-green);
}

.integration-info h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.integration-status {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.integration-status.active {
    color: var(--accent-green);
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid var(--accent-green);
}

.integration-status.coming-soon {
    color: var(--warning-color);
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--warning-color);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--hover-bg);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.integration-content {
    margin-top: 20px;
}

.org-section, .repo-section {
    margin-bottom: 20px;
}

.org-section h4, .repo-section h4 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.org-list {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
}

.org-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.org-icon {
    color: var(--text-secondary);
}

.org-name {
    flex: 1;
    font-weight: 500;
}

.org-type {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.repo-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.stat-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-green);
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.repo-list {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.repo-item {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.repo-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.repo-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.repo-icon {
    color: var(--accent-green);
}

.repo-name {
    font-family: 'Consolas', 'Monaco', monospace;
}

.btn-small {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-small:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.coming-soon-content {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
}

.coming-soon-content ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.coming-soon-content li {
    padding: 5px 0;
}

.coming-soon-content li:before {
    content: "→ ";
    color: var(--warning-color);
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.config-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px;
}

.config-item label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.config-select {
    width: 100%;
    padding: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.config-select:focus {
    outline: none;
    border-color: var(--accent-green);
}

/* User Management Section */
.user-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.user-management-header p {
    color: var(--text-secondary);
    margin: 0;
}

.btn.primary {
    background: var(--accent-green);
    color: var(--bg-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn.primary:hover {
    background: #2ed810;
    transform: translateY(-1px);
}

.btn.secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn.secondary:hover {
    background: var(--hover-bg);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn.danger {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn.danger:hover {
    background: #cc0000;
}

.btn-small.secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    font-size: 0.85rem;
}

.btn-small.danger {
    background: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    padding: 4px 12px;
    font-size: 0.85rem;
}

.btn-small.danger:hover:not(:disabled) {
    background: var(--danger-color);
    color: white;
}

.btn-small.danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.role-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.role-badge.role-admin {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning-color);
}

.role-badge.role-user {
    background: rgba(0, 123, 255, 0.2);
    color: #007bff;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-badge.status-active {
    background: rgba(57, 255, 20, 0.2);
    color: var(--success-color);
}

.status-badge.status-inactive {
    background: rgba(128, 128, 128, 0.2);
    color: #888888;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-content.modal-small {
    max-width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    color: var(--accent-green);
    margin: 0;
    font-size: 1.3rem;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group .required {
    color: var(--danger-color);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.2);
}

.form-help {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.warning-text {
    color: var(--warning-color);
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Notification Toast */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 4px;
    font-weight: 500;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 2000;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    background: var(--success-color);
    color: white;
}

.notification.error {
    background: var(--danger-color);
    color: white;
}

.notification.warning {
    background: var(--warning-color);
    color: var(--bg-primary);
}

/* Logout Section */
.logout-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.logout-btn {
    width: 100%;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: rgba(240, 82, 82, 0.1);
    color: var(--error-color);
    border-color: var(--error-color);
}

.logout-btn svg {
    width: 16px;
    height: 16px;
}

/* Contribution Graph Styles */
.contribution-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.contribution-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.contribution-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.contribution-count {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.contribution-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.year-select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.year-select:focus {
    outline: none;
    border-color: var(--accent-green);
}

.contribution-graph-wrapper {
    overflow-x: auto;
    padding-bottom: 10px;
}

.contribution-graph {
    display: inline-block;
    width: fit-content;
}

.months-labels {
    position: relative;
    padding-left: 34px;
    margin-bottom: 8px;
    height: 20px;
    display: block;
}

.month-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.graph-container {
    display: flex;
    gap: 4px;
    width: fit-content;
}

.weekdays-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 30px;
    padding-top: 2px;
}

.weekday-label {
    height: 12px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.contribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 12px);
    grid-template-rows: repeat(7, 12px);
    gap: 2px;
    grid-auto-flow: column;
    width: fit-content;
}

.contribution-day {
    width: 12px;
    height: 12px;
    background: var(--bg-primary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contribution-day:hover {
    border-color: var(--accent-green);
    transform: scale(1.4);
}

/* Contribution levels */
.contribution-day[data-level="0"] {
    background: var(--bg-primary);
}

.contribution-day[data-level="1"] {
    background: rgba(57, 255, 20, 0.2);
}

.contribution-day[data-level="2"] {
    background: rgba(57, 255, 20, 0.4);
}

.contribution-day[data-level="3"] {
    background: rgba(57, 255, 20, 0.6);
}

.contribution-day[data-level="4"] {
    background: rgba(57, 255, 20, 0.9);
}

.contribution-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    justify-content: flex-end;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.legend-scale {
    display: flex;
    gap: 3px;
}

.legend-item {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    cursor: help;
}

.legend-item[data-level="0"] {
    background: var(--bg-primary);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.legend-item[data-level="1"] {
    background: rgba(57, 255, 20, 0.2);
}

.legend-item[data-level="2"] {
    background: rgba(57, 255, 20, 0.4);
}

.legend-item[data-level="3"] {
    background: rgba(57, 255, 20, 0.6);
}

.legend-item[data-level="4"] {
    background: rgba(57, 255, 20, 0.9);
}

/* Contribution tooltip */
.contribution-tooltip {
    position: absolute;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--text-primary);
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.contribution-tooltip strong {
    color: var(--accent-green);
}

/* Delete Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    background-color: var(--bg-primary);
    margin: 10% auto;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
}

.danger-zone {
    border-color: #ff4444;
}

.danger-zone h2 {
    color: #ff4444;
    margin-bottom: 20px;
}

.danger-warning {
    background: rgba(255, 68, 68, 0.1);
    color: #ff4444;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 68, 68, 0.3);
}

.commit-details {
    background: var(--bg-secondary);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.commit-details p {
    margin: 5px 0;
}

.danger-input {
    width: 100%;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Consolas', monospace;
    margin-bottom: 20px;
}

.danger-input:focus {
    outline: none;
    border-color: #ff4444;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-cancel {
    padding: 10px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel:hover {
    background: var(--bg-primary);
    border-color: var(--text-secondary);
}

.btn-danger {
    padding: 10px 20px;
    background: #ff4444;
    border: 1px solid #ff4444;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.btn-danger:hover:not(:disabled) {
    background: #cc0000;
    border-color: #cc0000;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger-small {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #ff4444;
    border-radius: 4px;
    color: #ff4444;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.85em;
    height: 32px;
}

.btn-danger-small:hover {
    background: #ff4444;
    color: white;
}

/* Action buttons container */
.action-buttons {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
}

/* General button styles */
.btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85em;
    font-family: inherit;
    transition: all 0.3s;
    height: 32px;
    border-radius: 4px;
}

.btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent-green);
}

.btn.primary {
    background: var(--accent-green);
    color: var(--bg-primary);
    border-color: var(--accent-green);
}

.btn.primary:hover {
    background: rgba(57, 255, 20, 0.8);
}

.btn.secondary {
    background: transparent;
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.btn.secondary:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn.small {
    height: 32px;
    padding: 6px 12px;
    font-size: 0.85em;
}


/* Status Dropdown */
.status-select {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid;
    background: transparent;
    color: inherit;
    cursor: pointer;
    height: 32px;
}

.status-select.status-error {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
    border-color: #ff4444;
}

.status-select.status-abnormal {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
    border-color: #ff9800;
}

.status-select.status-ok {
    background: rgba(57, 255, 20, 0.2);
    color: var(--success-color);
    border-color: var(--success-color);
}

.status-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.last-modified {
    font-size: 0.9em;
    line-height: 1.2;
}

.last-modified small {
    color: var(--text-secondary);
}

/* Status History Section */
.status-history {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.status-history-content h4 {
    color: var(--text-secondary);
    margin: 20px 0 15px 0;
    font-size: 0.95em;
}

.current-status {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.no-history {
    color: var(--text-secondary);
    font-style: italic;
}

.status-timeline {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.status-change-item {
    background: var(--bg-primary);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.status-change-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.status-change-date {
    color: var(--text-primary);
}

.status-change-user {
    color: var(--text-secondary);
}

.status-change-details {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.status-arrow {
    color: var(--text-secondary);
    font-size: 1.2em;
}

.status-change-reason {
    color: var(--text-secondary);
    font-size: 0.9em;
    font-style: italic;
}

/* Tools Page Styles */
.filters-section {
    margin-bottom: 30px;
}

.filters-container {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-green);
}

/* Actions section styles */
.actions-container {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0;
}

.specific-date-group {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.specific-date-group input[type="date"] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.specific-date-group input[type="date"]:focus {
    outline: none;
    border-color: var(--accent-green);
}

.btn-primary {
    background: var(--accent-green);
    color: var(--bg-primary);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: rgba(57, 255, 20, 0.8);
    transform: translateY(-1px);
}

/* Tools Table Specific Styles */
#toolsTable {
    width: 100%;
}

#toolsTable th:nth-child(1) { /* Image column */
    width: 80px;
}

#toolsTable th:nth-child(2) { /* Name column */
    width: 200px;
}

#toolsTable th:nth-child(3) { /* Category column */
    width: 150px;
}

#toolsTable th:nth-child(5) { /* Price column */
    width: 120px;
}

#toolsTable th:nth-child(6) { /* Website column */
    width: 100px;
}

#toolsTable th:nth-child(7) { /* Actions column */
    width: 120px;
}

.tool-image {
    text-align: center;
}

.tool-image img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
}

.tool-image .no-image {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.tool-name {
    font-weight: 500;
    color: var(--text-primary);
}

/* Daily Commits Page - Enhanced Controls */
.daily-controls-section {
    margin-bottom: 30px;
}

.controls-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.control-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.control-card:hover {
    border-color: var(--accent-green);
    box-shadow: 0 4px 12px rgba(57, 255, 20, 0.1);
}

.card-header {
    background: rgba(57, 255, 20, 0.05);
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-content {
    padding: 20px;
}

/* Date Inputs Section */
.date-inputs {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.input-group {
    flex: 1;
}

.input-group label,
.user-select-group label,
.specific-date-section label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-input,
.user-select {
    width: 100%;
    padding: 10px 15px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

/* Fix calendar icon visibility - force white icons */
.date-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(1) brightness(2.5);
}

/* Alternative approach - use custom image */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23c9d1d9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0.7;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* For Firefox and other browsers */
input[type="date"] {
    color-scheme: dark;
    position: relative;
}

/* Additional fix for all date inputs */
.date-input,
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.date-input:hover,
.user-select:hover {
    border-color: var(--accent-green);
}

.date-input:focus,
.user-select:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.1);
}

.date-separator {
    color: var(--accent-green);
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0 5px;
    margin-top: 25px;
}

.user-select-group {
    margin-bottom: 20px;
}

/* Filter Actions */
.filter-actions {
    display: flex;
    gap: 10px;
}

.btn-apply,
.btn-reset {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-apply {
    background: var(--accent-green);
    color: var(--bg-primary);
}

.btn-apply:hover {
    background: #2bff00;
    box-shadow: 0 4px 12px rgba(57, 255, 20, 0.3);
}

.btn-reset {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-reset:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Generate Reports Card */
.btn-generate-all {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--accent-green), #2bff00);
    color: var(--bg-primary);
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-generate-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(57, 255, 20, 0.4);
}

.or-separator {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.or-separator span {
    background: var(--bg-secondary);
    padding: 0 15px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}

.or-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.specific-date-section {
    margin-top: 20px;
}

.date-action-group {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.date-action-group .date-input {
    flex: 1;
}

.btn-regenerate {
    padding: 10px 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-regenerate:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-icon {
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 968px) {
    .controls-container {
        grid-template-columns: 1fr;
    }
    
    .date-inputs {
        flex-direction: column;
        gap: 10px;
    }
    
    .date-separator {
        display: none;
    }
}

@media (max-width: 480px) {
    .filter-actions {
        flex-direction: column;
    }
    
    .date-action-group {
        flex-direction: column;
    }
}

/* Compact Daily Controls Layout */
.daily-controls-section.compact {
    margin-bottom: 20px;
}

.controls-container.compact {
    display: block;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.filter-group,
.action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 300px;
}

.filter-group label,
.action-group label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    margin: 0;
}

.filter-inputs,
.action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.date-input.compact,
.user-select.compact {
    padding: 6px 10px;
    font-size: 0.85rem;
    min-width: 120px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
}

.date-separator {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 4px;
}

.btn-apply.compact,
.btn-reset.compact,
.btn-generate.compact,
.btn-regenerate.compact {
    padding: 6px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-apply.compact:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
    border-color: var(--accent-green);
}

.btn-reset.compact:hover {
    background: var(--text-secondary);
    color: var(--bg-primary);
    border-color: var(--text-secondary);
}

.btn-generate.compact:hover,
.btn-regenerate.compact:hover {
    background: var(--hover-bg);
    border-color: var(--accent-green);
}

/* Responsive for compact layout */
@media (max-width: 1200px) {
    .control-row {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .filter-group,
    .action-group {
        min-width: auto;
        justify-content: space-between;
    }
    
    .filter-inputs,
    .action-buttons {
        flex: 1;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .filter-inputs,
    .action-buttons {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .date-input.compact,
    .user-select.compact {
        min-width: 100px;
        font-size: 0.8rem;
    }
    
    .btn-apply.compact,
    .btn-reset.compact,
    .btn-generate.compact,
    .btn-regenerate.compact {
        font-size: 0.8rem;
        padding: 5px 8px;
    }
}

/* Simple 2-Row Controls */
.simple-controls {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.filter-row,
.generate-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-row {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.simple-input,
.simple-select {
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 120px;
}

.simple-input:focus,
.simple-select:focus {
    outline: none;
    border-color: var(--accent-green);
}

.btn-simple {
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-simple.primary {
    background: var(--accent-green);
    color: var(--bg-primary);
    border-color: var(--accent-green);
}

.btn-simple:hover {
    background: var(--hover-bg);
    border-color: var(--accent-green);
}

.btn-simple.primary:hover {
    background: var(--accent-green);
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(57, 255, 20, 0.3);
}

.simple-controls span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Responsive for simple controls */
@media (max-width: 768px) {
    .filter-row,
    .generate-row {
        gap: 8px;
    }
    
    .simple-input,
    .simple-select {
        min-width: 100px;
        font-size: 0.85rem;
    }
    
    .btn-simple {
        font-size: 0.85rem;
        padding: 5px 10px;
    }
}

.category-badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tool-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    max-width: 400px;
}

.tool-price {
    font-weight: 500;
    color: var(--accent-green);
}

.tool-website a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
}

.tool-website a:hover {
    text-decoration: underline;
}

.tool-actions {
    white-space: nowrap;
}

.btn-small {
    padding: 4px 12px;
    margin: 0 2px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.btn-edit {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-edit:hover {
    background: var(--primary-color);
    color: white;
}

.btn-delete {
    border-color: #ff4444;
    color: #ff4444;
}

.btn-delete:hover {
    background: #ff4444;
    color: white;
}

/* Tool Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}

.modal-content {
    background-color: var(--bg-primary);
    margin: 5% auto;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    margin: 0;
    color: var(--text-primary);
}

.close {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus {
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-green);
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--hover-bg);
    border-color: var(--text-secondary);
}

.empty-message {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px;
    font-style: italic;
}
/* Contact Information Section */
.contact-info {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.contact-info.compact {
    padding: 15px;
    margin-bottom: 15px;
}

.contact-info .info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.editable {
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s;
    min-width: 200px;
    display: inline-block;
}

.editable.editing {
    background: var(--bg-primary);
    border: 1px solid var(--accent-green);
    outline: none;
}

.edit-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.edit-btn:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.whatsapp-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
}

.whatsapp-checkbox[disabled] {
    cursor: default;
}

.whatsapp-label {
    color: var(--text-primary);
    user-select: none;
}

/* Organizations Section */
.organizations-section {
    background: var(--bg-secondary);
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.organizations-section.compact {
    padding: 15px;
    margin-bottom: 15px;
}

.organizations-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.organization-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 4px;
    transition: all 0.3s;
}

.organization-card:hover {
    border-color: var(--accent-green);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.1);
}

.org-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.org-name {
    color: var(--accent-green);
    margin: 0;
    font-size: 1.1rem;
    font-weight: normal;
}

.org-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.org-role {
    font-weight: 500;
    color: var(--text-primary);
}

.remove-org-btn {
    background: transparent;
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-org-btn:hover {
    background: var(--danger-color);
    color: var(--bg-primary);
}

.add-org-btn {
    background: transparent;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
    width: 100%;
}

.add-org-btn:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
}

/* Developer Tools Section Styles */
.developer-tools-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
}

.tools-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.selected-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 40px;
}

.no-tools-message {
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.5rem 0;
}

.tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.9rem;
}

.tool-chip:hover {
    border-color: var(--accent-green);
}

.tool-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.tool-name {
    color: var(--text-primary);
}

.tool-name-loading {
    color: var(--text-secondary);
    font-style: italic;
}

.remove-tool {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.remove-tool:hover {
    background: var(--danger-color);
    color: white;
}

.add-tool-btn {
    background: transparent;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
    align-self: flex-start;
}

.add-tool-btn:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
}

/* Tool Subscriptions Section */
.tool-subscriptions-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.subscriptions-summary {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.summary-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-green);
}

#toolSubscriptionsTable {
    width: 100%;
    border-collapse: collapse;
}

#toolSubscriptionsTable th,
#toolSubscriptionsTable td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#toolSubscriptionsTable th {
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
}

#toolSubscriptionsTable td {
    color: var(--text-primary);
}

.subscription-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.subscription-status.active {
    background: rgba(57, 255, 20, 0.1);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.subscription-status.inactive {
    background: rgba(139, 148, 158, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--text-secondary);
}

.subscription-cost {
    font-weight: 500;
}

.subscription-cost.free {
    color: var(--text-secondary);
}

.subscription-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-cancel-subscription,
.btn-reactivate-subscription {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid;
}

.btn-cancel-subscription {
    background: transparent;
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-cancel-subscription:hover {
    background: var(--danger-color);
    color: white;
}

.btn-reactivate-subscription {
    background: transparent;
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.btn-reactivate-subscription:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
}

/* Tool Selector Modal */
.tool-selector-modal {
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.tool-selector-modal .modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tool-selector-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.tool-search-container {
    margin-bottom: 1.5rem;
}

.tool-search {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
}

.tool-search:focus {
    outline: none;
    border-color: var(--accent-green);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.tool-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.tool-card:hover {
    border-color: var(--accent-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tool-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.tool-card-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tool-card-icon-placeholder {
    width: 48px;
    height: 48px;
    background: var(--bg-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-secondary);
}

.tool-card-name {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.tool-card-category {
    font-size: 0.8rem;
    color: var(--accent-green);
}

.tool-card-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.no-tools-available {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-style: italic;
}

.tool-selector-modal .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
}

/* Tools Cost Calculator Styles */
.cost-calculator-section {
    background: var(--bg-secondary);
    padding: 25px;
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.cost-calculator-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.calculator-controls {
    display: flex;
    gap: 30px;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.exchange-rate-group {
    display: flex;
    flex-direction: column;
}

.exchange-rate-group > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.exchange-rate-input {
    width: 120px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 1rem;
}

.exchange-rate-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.cost-table-wrapper {
    margin-top: 20px;
}

.cost-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.cost-table th,
.cost-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.cost-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
}

.cost-table tbody tr:hover {
    background: rgba(57, 255, 20, 0.05);
}

.cost-table .total-row {
    background: var(--bg-secondary);
    font-size: 1.1rem;
}

.cost-table .total-row td {
    border-top: 2px solid var(--accent-green);
    border-bottom: none;
}

.no-user-selected {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.no-user-selected p {
    margin: 0;
    font-style: italic;
}

/* Prompt Section Styles */
.prompt-container {
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.prompt-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.prompt-header h4 {
    color: var(--accent-green);
    margin-bottom: 10px;
    font-size: 16px;
}

.prompt-header p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 14px;
}

.prompt-content {
    padding: 0;
    background: var(--bg-primary);
}

.prompt-content pre {
    margin: 0;
    padding: 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    border: none;
}

.prompt-content pre::-webkit-scrollbar {
    height: 8px;
}

.prompt-content pre::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.prompt-content pre::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.prompt-content pre::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* User Management Styles */
.user-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.user-management-header p {
    color: var(--text-secondary);
    margin: 0;
}

.user-management-header .btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.role-badge.role-admin {
    background: rgba(255, 69, 0, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(255, 69, 0, 0.4);
}

.role-badge.role-user {
    background: rgba(0, 191, 255, 0.2);
    color: #00bfff;
    border: 1px solid rgba(0, 191, 255, 0.4);
}

.status-badge.status-active {
    background: rgba(57, 255, 20, 0.2);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.status-badge.status-inactive {
    background: rgba(255, 69, 0, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
}

#usersTable code {
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--accent-green);
}

.btn-small.danger {
    background: transparent;
    color: #ff4444;
    border: 1px solid #ff4444;
}

.btn-small.danger:hover:not(:disabled) {
    background: rgba(255, 69, 0, 0.1);
}

.btn-small.danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Permissions Section Styles */
.section-description {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 14px;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.permission-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.permission-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.permission-header.admin {
    background: rgba(255, 69, 0, 0.05);
    border-bottom-color: rgba(255, 69, 0, 0.2);
}

.permission-header.user {
    background: rgba(0, 191, 255, 0.05);
    border-bottom-color: rgba(0, 191, 255, 0.2);
}

.permission-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
}

.permission-content {
    padding: 20px;
}

.permission-content h4 {
    color: var(--accent-green);
    margin: 0 0 10px 0;
    font-size: 16px;
}

.permission-content > p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 14px;
}

.permission-group {
    margin-bottom: 20px;
}

.permission-group:last-child {
    margin-bottom: 0;
}

.permission-group h5 {
    color: var(--text-primary);
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
}

.permission-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.permission-list li {
    margin-bottom: 6px;
    font-size: 13px;
}

.permission-list li strong {
    color: var(--text-primary);
}

.permission-list.blocked li {
    color: #ff6b6b;
    text-decoration: line-through;
    opacity: 0.7;
}

.permission-note {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.permission-note svg {
    color: var(--warning-color);
    flex-shrink: 0;
    margin-top: 2px;
}

.permission-note p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.permission-note strong {
    color: var(--text-primary);
}

/* Queue Controls in Analytics Page */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.queue-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.queue-info {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.queue-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.queue-value {
    color: var(--accent-green);
    font-weight: bold;
    font-size: 1.1rem;
}

.queue-status {
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.queue-status.status-running {
    color: var(--success-color);
    background: rgba(57, 255, 20, 0.1);
}

.queue-status.status-stopped {
    color: var(--error-color);
    background: rgba(255, 0, 0, 0.1);
}

#queueToggleBtn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-danger {
    background: var(--error-color);
    color: white;
}

.btn-danger:hover {
    background: rgba(255, 0, 0, 0.8);
}

.btn-success {
    background: var(--success-color);
    color: var(--bg-primary);
}

.btn-success:hover {
    background: rgba(57, 255, 20, 0.8);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.modal-header .close {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.modal-header .close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.2);
}

/* Delete confirmation styles */
.delete-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.2);
    border-radius: 8px;
}

.warning-icon {
    color: #ff453a;
    flex-shrink: 0;
    margin-top: 2px;
}

.delete-warning h3 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.delete-warning p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.confirmation-input {
    margin-top: 20px;
}

.confirmation-input label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

.confirmation-input input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.confirmation-input input:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.2);
}

.confirmation-input input.error {
    border-color: #ff453a;
    box-shadow: 0 0 0 2px rgba(255, 69, 58, 0.2);
}

.confirmation-input input.success {
    border-color: #30d158;
    box-shadow: 0 0 0 2px rgba(48, 209, 88, 0.2);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}