/* Custom styles for a sleek, modern look */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5; /* A slightly cooler, more modern gray */
}

.card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

/* Progress bar styles - Regular size */
.progress-bar {
    background-color: #e9ecef;
    border-radius: 9999px;
    height: 8px;
    overflow: hidden;
    position: relative;
}

.progress-bar .progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease-in-out;
}

/* Progress bar styles - Large size */
.progress-bar-lg {
    background-color: #e9ecef;
    border-radius: 9999px;
    height: 16px;
    overflow: hidden;
    position: relative;
}

.progress-bar-lg .progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease-in-out;
}

/* Color fills for progress bars */
.progress-bar-fill.progress-bar-green {
    background: linear-gradient(to right, #4CAF50, #81C784);
}

.progress-bar-fill.progress-bar-amber {
    background: linear-gradient(to right, #FFC107, #FFEB3B);
}

.progress-bar-fill.progress-bar-yellow {
    background: linear-gradient(to right, #FFC107, #FFEB3B);
}

.progress-bar-fill.progress-bar-red {
    background: linear-gradient(to right, #f44336, #E57373);
}

/* Text color classes for scores */
.score-text-green {
    color: #4CAF50;
}

.score-text-amber {
    color: #FFC107;
}

.score-text-yellow {
    color: #FFC107;
}

.score-text-red {
    color: #f44336;
}

/* Content snapshot bar container */
.content-snapshot-bar {
    display: flex;
    align-items: center;
    background-color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.content-snapshot-bar .progress-bar-lg {
    height: 12px;
    width: 100%;
}

/* Sidebar Styles */
#sidebar {
    transition: transform 0.3s ease-in-out;
}

#main-content {
    transition: margin-left 0.3s ease-in-out;
}

/* Styles for disabled links */
.disabled-link {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Login Form Styles */
.login-input {
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    width: 200px;
}

.login-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.login-button {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(90deg, #ef4444, #f87171);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.login-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: #9ca3af;
}

/* Custom styles for detail page elements */
.main-product-image {
    max-width: 50%;
    height: auto;
}

.thumbnail-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* Keywords table styles */
.keywords-table thead th {
    font-size: 0.75rem;
    padding: 0.75rem 1.5rem;
}

.keywords-table tbody td {
    padding: 0.5rem 1.5rem;
}

.keywords-table tbody td:first-child {
    font-weight: 500;
    color: #1a202c; /* text-gray-900 */
    word-wrap: break-word; /* Ensure long keywords wrap */
    max-width: 150px;
}

.keyword-count {
    font-size: 0.875rem; /* text-sm */
    font-weight: 700;
    color: #4a5568; /* text-gray-700 */
    text-align: center;
}

/* Grade badges styles */
.bg-green-500 {
    background-color: #22c55e;
}
.bg-yellow-400 {
    background-color: #facc15;
}
.bg-orange-500 {
    background-color: #f97316;
}
.bg-red-500 {
    background-color: #ef4444;
}
.text-black {
    color: #000;
}
.text-white {
    color: #fff;
}

/* Chart container height */
.chart-container {
    height: 400px;
}
/* Chart specific styles */
.chart-container canvas {
    max-height: 100%;
}

/* Chart card hover effects */
.chart-card {
    transition: all 0.3s ease;
}

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

/* Chart legend styling */
.chart-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.chart-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Health score scale styling */
.health-score-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0 0.5rem;
}

.health-score-scale-item {
    text-align: center;
    font-size: 0.75rem;
    color: #6b7280;
}

.health-score-scale-value {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.health-score-scale-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* --- Treeview Specific Styles - Enhanced --- */

.table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); /* Softer, more pronounced shadow */
    border: 1px solid #e0e0e0; /* Subtle border for definition */
}

.tree-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

/* Styling for nested tables */
.child-tree-table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent; /* Children tables inherit background or have a subtle shade */
}

.tree-table th,
.tree-table td {
    padding: 12px 18px; /* Slightly more padding */
    text-align: left;
    border-bottom: 1px solid #f0f0f0; /* Lighter border for distinction */
    white-space: nowrap;
    font-size: 0.925rem; /* Slightly larger text for readability */
    color: #333;
    transition: background-color 0.2s ease; /* Smooth hover effect */
}

.tree-table th {
    background-color: #f8f9fa; /* Lighter header background */
    font-weight: 600; /* Slightly less bold */
    text-transform: uppercase;
    color: #555;
    font-size: 0.75rem; /* Slightly smaller header text */
    letter-spacing: 0.06em; /* More letter spacing */
    position: sticky; /* Sticky header */
    top: 0;
    z-index: 10;
}

/* Node name specific styling */
.tree-table .node-name {
    font-weight: 700; /* Node names are bolder */
    display: flex; /* Allow flexbox for icon and text alignment */
    align-items: center;
    color: #2c3e50; /* Darker text for primary identification */
}

.tree-table .node-name .node-text {
    margin-left: 4px; /* Small space between icon and text */
}

/* Toggle button for expand/collapse */
.toggle-button {
    cursor: pointer;
    margin-right: 8px; /* Space from the node name */
    transition: transform 0.25s ease-out; /* Smoother transition */
    display: inline-flex; /* For better icon alignment */
    align-items: center;
    justify-content: center;
    width: 20px; /* Fixed width for consistency */
    height: 20px;
    color: #666; /* Subtle color for the icon */
    font-size: 0.85rem; /* Slightly smaller icon */
}

.toggle-button:hover {
    color: #007bff; /* Primary blue on hover */
}

.toggle-button.expanded {
    transform: rotate(90deg);
    color: #007bff; /* Primary blue when expanded */
}

/* Placeholder for nodes without children */
.toggle-button-placeholder {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px; /* Match spacing of toggle button */
}

/* Hover effect for tree nodes */
.tree-node:hover {
    background-color: #f5f5f5; /* Light grey on hover */
}

/* Health Score Color Coding (more vibrant/clear) */
.tree-node.bg-green-100 {
    background-color: #e6ffee; /* Light green */
}
.tree-node.bg-yellow-100 {
    background-color: #fffde6; /* Light yellow */
}
.tree-node.bg-red-100 {
    background-color: #ffe6e6; /* Light red */
}

/* Health Score Cell specific styling */
.health-score-cell {
    font-weight: 600; /* Make score stand out */
}

/* Styling for children containers (the row that holds the nested table) */
.children-container {
    background-color: #fcfcfc; /* Very subtle background for child sections */
    border-bottom: 1px solid #eee; /* Light border to separate groups */
}

/* Padding for the cell containing the nested table */
.nested-table-cell {
    padding: 0 !important; /* Remove padding from the cell itself */
    border-bottom: none !important; /* No border here, let child rows handle it */
}

/* Remove default padding from nested table's cells if needed, or adjust as desired */
.child-tree-table td {
    border-bottom: 1px dashed #f0f0f0; /* Dashed border for child rows */
}
.child-tree-table tr:last-child td {
    border-bottom: none; /* No border on the last child row of a group */
}