/* ==========================================================================
   Page-specific styles. CLAUDE.md: no inline styles — all styling lives here
   or in the other css/ files, with semantic, purpose-based class names.
   ========================================================================== */

/* --- Shared tool-page layout ------------------------------------------- */

/* A tool's input/output pane; combined with .bev-tool-pane-split in side-by-side view. */
.bev-tool-pane {
    min-height: 500px;
}

.bev-tool-pane-split {
    flex-grow: 1;
    flex-basis: 0;
    flex-shrink: 1;
    min-width: 0;
    max-width: 50%;
}

.bev-overflow-hidden {
    overflow: hidden;
}

/* Fixed-height scrollable panel bodies used inside tool panes. */
.bev-panel-scroll {
    height: 450px;
    overflow: auto;
}

.bev-panel-scroll-400 {
    height: 400px;
    overflow: auto;
}

/* Result areas that grow with content up to a cap. */
.bev-results-scroll {
    max-height: 500px;
    overflow: auto;
}

.bev-results-scroll-short {
    max-height: 400px;
    overflow: auto;
}

.bev-table-scroll-x {
    overflow-x: auto;
}

.bev-inline-block {
    display: inline-block;
}

.bev-h-auto {
    height: auto;
}

.bev-hidden {
    display: none;
}

.bev-mono {
    font-family: monospace;
}

/* --- Nav menu ----------------------------------------------------------- */

.nav-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-menu-links {
    flex: 1;
}

.nav-menu-footer {
    padding: 16px;
    margin-top: auto;
    text-align: center;
}

/* --- Data Set Comparer --------------------------------------------------- */

.dsc-summary-tile {
    cursor: pointer;
}

/* Summary tile backgrounds per theme; the dark values are the original design. */
.DarkMode .dsc-tile-unique-a { background-color: rgb(211 97 192); }
.DarkMode .dsc-tile-unique-b { background-color: rgb(255 82 139); }
.DarkMode .dsc-tile-differences { background-color: rgb(171 119 41); }
.DarkMode .dsc-tile-matching { background-color: rgb(46 118 70); }

.LightMode .dsc-tile-unique-a { background-color: rgb(238 178 230); }
.LightMode .dsc-tile-unique-b { background-color: rgb(255 179 201); }
.LightMode .dsc-tile-differences { background-color: rgb(233 204 150); }
.LightMode .dsc-tile-matching { background-color: rgb(158 216 182); }

.dsc-row-number {
    font-weight: bold;
}

.dsc-cell-different {
    background-color: var(--mud-palette-warning-lighten);
    font-weight: bold;
}

.dsc-value-a {
    color: var(--mud-palette-primary);
}

.dsc-value-b {
    color: var(--mud-palette-secondary);
}

/* --- Data Table ---------------------------------------------------------- */

.dt-export-select {
    max-width: 180px;
}

/* --- XML / HTML XPath tools ---------------------------------------------- */

.xpath-example-btn {
    text-transform: none;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.xpath-example-desc {
    font-weight: 600;
}

.xpath-example-query {
    color: var(--mud-palette-text-secondary);
}

.xpath-results-field {
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* --- Image Converter ------------------------------------------------------ */

.ic-panel-column {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ic-panel-fill {
    height: 100%;
}

.ic-preview-scroll {
    max-width: 100%;
    overflow: auto;
}

.ic-preview-image {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* --- Notes ----------------------------------------------------------------- */

.note-add-card {
    height: 300px;
    cursor: pointer;
    border: 2px dashed var(--mud-palette-primary);
}

.note-add-card-content {
    height: 100%;
}

.note-card {
    height: 300px;
}

.note-card-body {
    flex: 1;
    overflow: auto;
    cursor: pointer;
}

.note-preview-compact {
    line-height: 1.4;
}

.note-edit-preview {
    max-height: 350px;
    overflow: auto;
    line-height: 1.6;
}

.note-view-body {
    line-height: 1.6;
    padding: 16px;
}

/* --- Markdown Preview ------------------------------------------------------ */

.mdp-preview-scroll {
    height: 450px;
    overflow: auto;
    padding: 16px;
    line-height: 1.6;
}

/* --- RegExp Tester ----------------------------------------------------------- */

.regex-result-text {
    white-space: pre-wrap;
    font-family: monospace;
    line-height: 1.6;
}

/* Match highlight chips; text is forced dark so the palette reads on both themes. */
.regex-highlight {
    color: black;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.regex-highlight-0 { background-color: #ffeb3b; }
.regex-highlight-1 { background-color: #4caf50; }
.regex-highlight-2 { background-color: #2196f3; }
.regex-highlight-3 { background-color: #ff9800; }
.regex-highlight-4 { background-color: #ee8aff; }
.regex-highlight-5 { background-color: #ff5f54; }

/* --- CRON Builder ------------------------------------------------------------- */

.cron-diagram {
    font-family: monospace;
    margin: 0;
}

/* --- Text Replicator ------------------------------------------------------------ */

.tr-col-row-number {
    width: 60px;
}

.tr-col-actions {
    width: 100px;
}