/* ==========================================================================
   pages.css — Global page-specific styles
   Previously these lived as inline <style> blocks in each .razor file.
   Moving them here means no Blazor scope attributes, no rebuild required,
   and the rules apply exactly as they did before.
   ========================================================================== */

/* ---- Goals page --------------------------------------------------------- */
.goals-layout-wrapper {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 4.6rem);
    width: 100%;
    overflow: hidden;
}

.goals-sidebar {
    width: 260px;
    flex-shrink: 0;
    overflow-y: auto;
    background-color: #fff;
    border-right: 1px solid #dee2e6;
    padding: 0.75rem;
}

.goals-list-group {
    gap: 0.25rem;
}

.goals-sidebar .list-group-item {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
    background-color: transparent;
    border-radius: 0.25rem;
    border: none;
    text-align: left;
}

.goals-sidebar .list-group-item:hover {
    background-color: #f1f3f5;
}

.goals-sidebar .list-group-item.active {
    background-color: #e9ecef;
    color: #212529;
    border-left: 4px solid #6c757d;
}

.goals-board-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background-color: #f8f9fa;
}

.goals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #fff;
}

.kanban-board {
    display: flex;
    flex: 1;
    overflow-x: auto;
    padding: 1rem;
    gap: 1rem;
    align-items: stretch;
}

.kanban-column {
    flex: 0 0 350px;
    background-color: #ebedef;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    border: 1px solid #d1d5db;
}

.kanban-column-header {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #4b5563;
}

.status-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.status-count {
    background-color: #d1d5db;
    color: #1f2937;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
}

.kanban-column-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.goal-card {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.goal-card:active { cursor: grabbing; }

.goal-card.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.goal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.goal-type-dropdown {
    flex: 1;
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
}

.goal-description-input, .goal-plan-input {
    font-size: 0.875rem;
    resize: vertical;
    min-height: 80px;
}

.goal-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

@media (max-width: 991.98px) {
    .goals-layout-wrapper {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 4.6rem);
    }
    .goals-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        max-height: 35vh;
        padding: 0.5rem;
    }
    .goals-header { flex-wrap: wrap; padding: 0.85rem 1rem; }
    .goals-header .d-flex.gap-2 { width: 100%; }
    .kanban-board { padding: 0.75rem; gap: 0.75rem; }
    .kanban-column { flex-basis: 320px; }
}

@media (max-width: 575.98px) {
    .goals-header h2 { font-size: 1.4rem; }
    .kanban-board { padding: 0.5rem; }
    .kanban-column { flex: 0 0 88vw; }
    .goal-card { padding: 0.6rem; }
    .goal-card-header { align-items: flex-start; gap: 0.5rem; }
    .goal-type-dropdown { min-width: 0; }
    .goal-description-input, .goal-plan-input { min-height: 70px; }
}

/* ---- Knowledge page ----------------------------------------------------- */
.knowledge-layout-wrapper {
    display: flex;
    gap: 0;
    height: calc(100vh - 60px);
    width: 100%;
    background: #fff;
}

.knowledge-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.knowledge-sidebar > div {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.knowledge-list-group {
    list-style: none;
    padding: 0.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #6c757d;
    padding: 0.5rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.sidebar-section-label:first-child { margin-top: 0; }

.knowledge-sidebar .list-group-item {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
    background-color: transparent;
    border-radius: 0.25rem;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.knowledge-sidebar .list-group-item:hover:not(:disabled) { background-color: #e9ecef; }

.knowledge-sidebar .list-group-item.active {
    background-color: #e9ecef;
    color: #212529;
    border-left: 4px solid #5b7cfa;
}

.knowledge-sidebar .list-group-item:disabled { opacity: 0.6; cursor: not-allowed; }

.knowledge-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background-color: #fff;
}

.knowledge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}

.knowledge-header h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    color: #212529;
}

.knowledge-editor-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 1.5rem 1.5rem;
    overflow-y: auto;
}

.knowledge-editor-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1.5rem;
}

.knowledge-editor-divider { height: 0; }

.knowledge-editor-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.knowledge-editor-list h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

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

.knowledge-item-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    padding: 1rem;
    transition: all 0.2s ease;
}

.knowledge-item-card:hover {
    border-color: #5b7cfa;
    box-shadow: 0 2px 8px rgba(91, 124, 250, 0.1);
}

.knowledge-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.knowledge-item-key {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.knowledge-item-key code {
    font-weight: 600;
    color: #212529;
    background-color: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    word-break: break-all;
}

.knowledge-item-key .text-muted {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.knowledge-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.knowledge-item-value {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.knowledge-item-value .text-muted {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.knowledge-value-preview {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.5rem;
    font-size: 0.85rem;
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #212529;
}

.skill-markdown-editor {
    min-height: 20rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.45;
}

.skill-markdown-preview {
    max-height: 260px;
    margin: 0;
    white-space: pre-wrap;
}

.knowledge-item-footer {
    padding-top: 0.75rem;
    border-top: 1px solid #dee2e6;
    font-size: 0.85rem;
}

@media (max-width: 991.98px) {
    .knowledge-layout-wrapper { flex-direction: column; height: auto; min-height: calc(100vh - 60px); }
    .knowledge-sidebar { width: 100%; min-width: 0; max-width: none; border-right: none; border-bottom: 1px solid #dee2e6; max-height: 38vh; }
    .knowledge-header { flex-wrap: wrap; padding: 1rem; }
    .knowledge-header .d-flex.gap-2 { width: 100%; }
    .knowledge-editor-shell { padding: 0 1rem 1rem; }
    .knowledge-items-grid { grid-template-columns: 1fr; }
    .knowledge-item-header { flex-wrap: wrap; }
    .knowledge-item-actions { width: 100%; justify-content: flex-end; }
    .knowledge-value-preview { max-height: 220px; }
    .skill-markdown-editor { min-height: 16rem; }
}

@media (max-width: 575.98px) {
    .knowledge-header h2 { font-size: 1.4rem; }
    .knowledge-editor-form { gap: 0.75rem; padding: 1rem 0; }
    .knowledge-item-card { padding: 0.75rem; }
    .knowledge-item-actions { justify-content: stretch; }
    .knowledge-item-actions .btn { flex: 1 1 auto; }
    .knowledge-sidebar .list-group-item { padding: 0.65rem 0.5rem; }
}

/* ---- Workflows page ------------------------------------------------------ */
.workflows-layout-wrapper {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 4.6rem);
    width: 100%;
    overflow: auto;
}

.workflows-sidebar {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    background-color: #fff;
    border-right: 1px solid #dee2e6;
    padding: 0.75rem;
}

.workflows-list-group { gap: 0.25rem; }

.workflow-list-separator {
    height: 1px;
    background: #dee2e6;
    margin: 0.5rem 0;
}

.workflow-list-row {
    display: flex;
    align-items: stretch;
    border-radius: 0.25rem;
    overflow: auto;
}

.workflow-row-main { flex: 1 1 auto; min-width: 0; }

.workflow-inline-add {
    border: none;
    background: transparent;
    color: #6c757d;
    width: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.workflow-inline-add:hover { background: rgba(0,0,0,0.05); color: #212529; }

.workflows-sidebar .list-group-item {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
    background-color: transparent;
    border-radius: 0.25rem;
    border: none;
    text-align: left;
}

.workflows-sidebar .list-group-item:hover { background-color: #f1f3f5; }

.workflows-sidebar .list-group-item.active,
.workflow-list-row.active .workflow-row-main {
    background-color: #e9ecef;
    color: #212529;
    border-left: 4px solid #6c757d;
}

.workflows-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background-color: #fff;
}

.workflows-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.workflow-editor-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 1.25rem 1rem;
}

.workflow-editor-header {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #dee2e6;
}

.canvas-toolbar { padding: 0.5rem 0; }

.workflow-canvas {
    position: relative;
    min-height: 0;
    flex: 1;
    border: 1px solid #d9dee4;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
    overflow: auto;
    cursor: default;
}

.workflow-links {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: auto;
}

.workflow-link {
    fill: none;
    stroke: #5b7cfa;
    stroke-width: 2;
    opacity: 0.95;
    pointer-events: stroke;
    cursor: pointer;
}

.workflow-link-preview {
    stroke-dasharray: 6 4;
    opacity: 0.75;
}

.workflow-node {
    position: absolute;
    width: 260px;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(31, 41, 55, 0.08);
    z-index: 2;
}

.workflow-node.selected {
    border-color: #5b7cfa;
    box-shadow: 0 0 0 3px rgba(91, 124, 250, 0.15), 0 10px 20px rgba(31, 41, 55, 0.12);
}

.workflow-node-header {
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid #eef1f5;
    background: #f8faff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    cursor: move;
}

.node-title { font-size: 0.82rem; font-weight: 600; color: #334155; }
.workflow-node-body { padding: 0.65rem; }
.prompt-editor { min-height: 96px; resize: vertical; }

.prompt-preview {
    min-height: 74px;
    max-height: 120px;
    overflow: auto;
    font-size: 0.88rem;
    color: #374151;
    white-space: pre-wrap;
}

.port {
    position: absolute;
    top: 46px;
    width: 12px;
    height: 12px;
    border: 2px solid #5b7cfa;
    border-radius: 50%;
    background: #ffffff;
    padding: 0;
}

.port:hover { transform: scale(1.15); background: #e8eeff; }
.port-target-hover { transform: scale(1.15); background: #dbe7ff; box-shadow: 0 0 0 4px rgba(91, 124, 250, 0.22); }
.port-in { left: -7px; }
.port-out { right: -7px; }

@media (max-width: 991.98px) {
    .workflows-layout-wrapper { flex-direction: column; height: auto; min-height: calc(100vh - 4.6rem); }
    .workflows-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #dee2e6; max-height: 280px; }
    .workflow-editor-shell { min-height: 60vh; }
}

/* ---- MCP Servers & Tools pages (share .workflows-* classes) -------------- */
/* These pages use .workflows-layout-wrapper etc. in a sidebar+editor layout
   with height: calc(100vh - 60px) instead of 4.6rem */
.mcp-servers-page .workflows-layout-wrapper,
.tools-page .workflows-layout-wrapper {
    height: calc(100vh - 60px);
}

.workflows-sidebar > div { flex: 1; min-height: 0; overflow-y: auto; }

.workflows-editor {
    /* already defined above for Workflows page */
}

.workflows-header {
    padding: 1.5rem;
}

.workflow-editor-shell {
    padding: 0 1.5rem 1.5rem;
    overflow-y: auto;
}

.mcp-server-details { min-width: 0; }
.mcp-server-details .text-muted { word-break: break-word; }
.mcp-server-details code { white-space: pre-wrap; word-break: break-word; }

.tool-name-container { flex: 0 1 auto; }

/* Tools editor header — name + description inputs fill all available horizontal space */
.workflow-editor-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

.workflow-editor-header-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;        /* expand to fill the row, pushing the Delete button to the right */
    min-width: 0;   /* allow shrinking below content width */
}

.workflow-editor-header input,
.workflow-editor-header textarea {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
}

.workflow-editor-header input:focus,
.workflow-editor-header textarea:focus {
    border-color: #5b7cfa;
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 124, 250, 0.1);
}

.workflow-editor-header input:disabled,
.workflow-editor-header textarea:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .workflow-editor-header {
        flex-direction: column;
        align-items: stretch;
    }
    .workflow-editor-header .btn { width: 100%; }
}

@media (max-width: 991.98px) {
    .workflows-sidebar { max-height: 38vh; }
    .workflows-sidebar > div { overflow-y: visible; }
    .workflows-list-group { display: block; white-space: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.75rem; }
    .workflow-list-row { display: inline-flex; margin-right: 0.4rem; vertical-align: top; }
    .workflow-row-main { min-width: 8rem; }
    .workflows-header { flex-direction: column; align-items: stretch; padding: 1rem; }
    .workflows-header-actions { width: 100%; flex-wrap: wrap; }
    .workflows-header-actions .btn { flex: 1 1 11rem; }
    .workflow-editor-shell { padding: 0 0.75rem 0.75rem; }
    .mcp-server-card-body { flex-direction: column; align-items: stretch !important; gap: 0.75rem; }
    .mcp-server-card-body .btn { align-self: flex-end; }
}

/* ---- Schedules page ------------------------------------------------------ */
.schedule-prompt-preview {
    max-width: 32rem;
    white-space: pre-wrap;
}

.schedule-agent-chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border: 1px solid #ced4da;
    border-radius: 999px;
    background-color: #f8f9fa;
    color: #212529;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ---- Agents page --------------------------------------------------------- */
.agent-item {
    background-color: transparent;
    border: none;
    border-radius: 0;
    transition: background-color 0.15s ease;
}

.agent-item:hover { background-color: #f1f3f5; }

.agent-item.active {
    background-color: #e9ecef;
    color: #212529;
    border-left: 4px solid #6c757d;
}

.agent-item.active small { color: #495057 !important; }

/* ---- Transcribe page ----------------------------------------------------- */
.transcribe-container { max-width: 1000px; }

.transcription-display {
    height: 400px;
    overflow-y: auto;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.transcript-line { animation: transcript-fadeIn 0.3s ease-out; }

@keyframes transcript-fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.pulse { animation: pulse-red 2s infinite; }

@keyframes pulse-red {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* ---- Briefings page ------------------------------------------------------ */
.briefings-page {
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
}

.smaller { font-size: 0.75rem; }

.markdown-content p { margin-bottom: 0.5rem; }
.markdown-content p:last-child { margin-bottom: 0; }
.markdown-content ul, .markdown-content ol { margin-bottom: 0.5rem; padding-left: 1.25rem; }
.markdown-content a { color: var(--bs-primary); text-decoration: none; }
.markdown-content a:hover { text-decoration: underline; }

.featured-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 1rem;
    transition: transform 0.2s ease;
}

.briefing-card {
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.briefing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

.last-child-no-border:last-child { border-bottom: none !important; }

.topic-controls {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.topic-item:hover .topic-controls,
.topic-entry:hover .topic-controls {
    opacity: 1;
}

.news-feed { animation: news-fadeIn 0.5s ease-in; }

@keyframes news-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}