/* public/style.css */

/* Apply sticky header and scrolling content layout */
body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ensure body takes full viewport height */
    overflow: hidden; /* Prevent body scrollbars */
}

header {
    position: sticky; /* Make header sticky */
    top: 0;
    z-index: 10; /* Keep header above scrolling content */
    background-color: #f3f4f6; /* bg-gray-100 */
    padding-bottom: 1rem; /* Padding below the config box */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    flex-shrink: 0; /* Prevent header from shrinking */
    transition: padding-bottom 0.3s ease-in-out;
}

/* Style for the config container when collapsed */
#config-container.collapsed {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out, border-width 0.3s ease-in-out;
}

/* Style for the toggle button icon when collapsed */
#config-toggle-button svg.collapsed {
    transform: rotate(180deg); /* Point down when collapsed */
}


main {
    flex: 1 1 auto; /* Allow main to grow and shrink */
    overflow-y: auto; /* Enable vertical scrolling ONLY for main */
    padding-bottom: 2rem;
}


/* --- Row Styles --- */
.result-row {}

.step-row {
    /* font-style: italic; */ /* Removed italic */
    /* font-size: 0.875rem; */ /* Use text-xs from cell */
    color: #4b5563; /* gray-600 */
}
.step-row:not(.clickable-step):hover { /* Only non-clickable steps get default hover */
    background-color: #f9fafb; /* gray-50 */
    cursor: default;
}
.step-row td {
    font-weight: normal;
    color: inherit;
}

/* NEW: Style for clickable steps */
.clickable-step {
    cursor: pointer;
}
.clickable-step:hover {
    background-color: #eff6ff; /* blue-50 */
}
.clickable-step td {
    color: #374151; /* gray-700 */
}
.clickable-step:hover td {
    color: #1d4ed8; /* blue-700 */
}


.final-row {
    font-weight: 500; /* Medium weight */
}
.final-row:hover {
    background-color: #f3f4f6; /* gray-100 */
    cursor: pointer; /* Make final rows indicate clickability */
}
.final-workflow-row .toggle-cell:hover { /* Only toggle cell hover changes color */
     color: #4f46e5; /* Indigo */
}


.toggle-cell {
    cursor: pointer;
}

.chevron {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 0.15em solid currentColor;
    border-top: 0.15em solid currentColor;
    transform: rotate(135deg); /* Down */
    transition: transform 0.2s ease-in-out;
    margin-left: 0.4em;
    vertical-align: middle;
}
.chevron.collapsed {
    transform: rotate(-45deg); /* Right */
}

/* Status code colors (used for both final and step rows) */
.status-success { color: #16a34a; font-weight: 500; } /* green-600 */
.status-redirect { color: #ea580c; font-weight: 500; } /* orange-600 */
.status-client-error { color: #dc2626; font-weight: 500; } /* red-600 */
.status-server-error { color: #b91c1c; font-weight: 500; } /* red-700 */
.status-other { color: #52525b; font-weight: 500; } /* zinc-600 */

/* Ensure preformatted text wraps in modal */
#detail-modal pre {
    white-space: pre-wrap;       /* CSS3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}