/**
 * Edgewatch GraphiQL Custom Styles
 * Matches the branding and styling of the Swagger UI
 */

/* ============================================
   CSS Variables for Theming
   ============================================ */
:root {
    --edgewatch-primary: #005cb8;
    --edgewatch-primary-dark: #004a96;
    --edgewatch-primary-light: #0070e0;
    --edgewatch-accent: #0d6efd;
    --edgewatch-success: #198754;
    --edgewatch-warning: #fd7e14;
    --edgewatch-danger: #dc3545;
    
    /* GraphQL Pink (for badge) */
    --graphql-pink: #e10098;
    
    /* Light theme colors */
    --bg-dark: #ffffff;
    --bg-darker: #f8f9fa;
    --bg-sidebar: #f1f3f5;
    --bg-editor: #ffffff;
    --bg-result: #ffffff;
    --bg-hover: #e9ecef;
    --bg-active: #dee2e6;
    
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    
    --border-color: #dee2e6;
    --border-light: #ced4da;
    
    /* Scrollbar */
    --scrollbar-track: #f1f3f5;
    --scrollbar-thumb: #adb5bd;
    --scrollbar-thumb-hover: #868e96;
}

/* ============================================
   Global GraphiQL Container Overrides
   ============================================ */
.graphiql-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    height: 100%;
    background: var(--bg-dark);
}

/* Main container */
.graphiql-main {
    background: var(--bg-dark);
}

/* ============================================
   Sidebar / Explorer Styling
   ============================================ */
.graphiql-sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
}

.graphiql-sidebar-section {
    border-bottom: 1px solid var(--border-color);
}

/* Plugin icons */
.graphiql-sidebar button {
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.graphiql-sidebar button:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.graphiql-sidebar button.active {
    color: var(--edgewatch-accent);
    background: var(--bg-active);
}

/* ============================================
   Editor Panels
   ============================================ */
.graphiql-editors {
    background: var(--bg-editor);
}

.graphiql-editor {
    background: var(--bg-editor);
}

/* Editor tabs */
.graphiql-editor-tools {
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-color);
}

.graphiql-editor-tools button {
    color: var(--text-secondary);
    border: none;
    background: transparent;
    transition: all 0.2s;
}

.graphiql-editor-tools button:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.graphiql-editor-tools button[aria-selected="true"] {
    color: var(--edgewatch-accent);
    background: var(--bg-active);
}

/* Variables and Headers editor */
.graphiql-editor-tool {
    background: var(--bg-darker);
}

/* ============================================
   Session Tabs (Query tabs)
   ============================================ */
.graphiql-session-header {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
}

.graphiql-session-header-actions button {
    color: var(--text-secondary);
    transition: all 0.2s;
}

.graphiql-session-header-actions button:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.graphiql-tab {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.graphiql-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.graphiql-tab.graphiql-tab-active {
    background: var(--bg-editor);
    border-bottom-color: var(--bg-editor);
    color: var(--text-primary);
}

/* ============================================
   Execute Button
   ============================================ */
.graphiql-execute-button {
    background: var(--edgewatch-primary) !important;
    border: none !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 92, 184, 0.3) !important;
}

.graphiql-execute-button:hover {
    background: var(--edgewatch-primary-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 92, 184, 0.4) !important;
}

.graphiql-execute-button:active {
    transform: translateY(0);
}

/* Stop button */
.graphiql-stop-button {
    background: var(--edgewatch-danger) !important;
    border: none !important;
}

/* ============================================
   Toolbar
   ============================================ */
.graphiql-toolbar {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
}

.graphiql-toolbar button {
    color: var(--text-secondary);
    background: transparent;
    border: none;
    transition: all 0.2s;
}

.graphiql-toolbar button:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.graphiql-toolbar-icon {
    color: inherit;
}

/* ============================================
   Response Panel
   ============================================ */
.graphiql-response {
    background: var(--bg-result);
}

.result-window {
    background: var(--bg-result);
}

/* ============================================
   Documentation Explorer
   ============================================ */
.graphiql-plugin {
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border-color);
}

.graphiql-doc-explorer {
    background: var(--bg-sidebar);
}

.graphiql-doc-explorer-title {
    color: var(--text-primary);
    font-weight: 600;
}

.graphiql-doc-explorer-section-title {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.graphiql-doc-explorer-section-content {
    color: var(--text-secondary);
}

.graphiql-doc-explorer-type-name {
    color: var(--edgewatch-accent);
}

.graphiql-doc-explorer-field-name {
    color: #0d6efd;
}

.graphiql-doc-explorer-argument-name {
    color: #fd7e14;
}

.graphiql-markdown-description {
    color: var(--text-secondary);
}

/* Back button in docs */
.graphiql-doc-explorer-back {
    color: var(--text-secondary);
    transition: color 0.2s;
}

.graphiql-doc-explorer-back:hover {
    color: var(--edgewatch-accent);
}

/* ============================================
   History Panel
   ============================================ */
.graphiql-history {
    background: var(--bg-sidebar);
}

.graphiql-history-header {
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.graphiql-history-item {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.graphiql-history-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.graphiql-history-item-label {
    color: var(--text-primary);
}

/* ============================================
   Explorer Plugin Styling
   ============================================ */
.graphiql-explorer-root {
    background: var(--bg-sidebar);
    color: var(--text-secondary);
    padding: 12px;
}

.graphiql-explorer-root > div {
    padding: 8px 0;
}

/* Field names in explorer */
.graphiql-explorer-root .graphiql-explorer-field-view > span:first-child {
    color: #0d6efd;
}

/* Type names in explorer */
.graphiql-explorer-root .graphiql-explorer-type-name {
    color: var(--edgewatch-accent);
}

/* Checkboxes in explorer */
.graphiql-explorer-root input[type="checkbox"] {
    accent-color: var(--edgewatch-primary);
}

/* Arguments in explorer */
.graphiql-explorer-root .graphiql-explorer-arg {
    color: #fd7e14;
}

/* Argument input fields */
.graphiql-explorer-root input[type="text"],
.graphiql-explorer-root select {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 4px 8px;
}

.graphiql-explorer-root input[type="text"]:focus,
.graphiql-explorer-root select:focus {
    border-color: var(--edgewatch-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* ============================================
   CodeMirror Editor Styling
   ============================================ */
.cm-editor {
    background: var(--bg-editor);
}

.cm-gutters {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
}

.cm-activeLineGutter {
    background: var(--bg-hover);
}

.cm-activeLine {
    background: rgba(255, 255, 255, 0.03);
}

.cm-selectionBackground,
.cm-content ::selection {
    background: rgba(13, 110, 253, 0.3) !important;
}

.cm-cursor {
    border-left-color: var(--edgewatch-accent);
}

/* Syntax highlighting - Light theme */
.cm-keyword {
    color: #d63384;
}

.cm-property {
    color: #0d6efd;
}

.cm-def {
    color: #6f42c1;
}

.cm-string {
    color: #198754;
}

.cm-number {
    color: #0d6efd;
}

.cm-atom {
    color: #0d6efd;
}

.cm-variable {
    color: #fd7e14;
}

.cm-comment {
    color: var(--text-muted);
    font-style: italic;
}

/* Autocomplete dropdown */
.cm-tooltip-autocomplete {
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.cm-tooltip-autocomplete > ul {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
}

.cm-tooltip-autocomplete > ul > li {
    padding: 4px 12px;
    color: var(--text-secondary);
}

.cm-tooltip-autocomplete > ul > li[aria-selected="true"] {
    background: var(--edgewatch-primary);
    color: white;
}

/* Lint / error markers */
.cm-lintRange-error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 3 L3 0 L6 3' fill='none' stroke='%23dc3545' stroke-width='1'/%3E%3C/svg%3E");
}

.cm-lintRange-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 3 L3 0 L6 3' fill='none' stroke='%23fd7e14' stroke-width='1'/%3E%3C/svg%3E");
}

/* ============================================
   Dialog / Modal Styling
   ============================================ */
.graphiql-dialog {
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
}

.graphiql-dialog-header {
    border-bottom: 1px solid var(--border-color);
}

.graphiql-dialog-close {
    color: var(--text-secondary);
}

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

/* ============================================
   Buttons General
   ============================================ */
.graphiql-button {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    transition: all 0.2s;
}

.graphiql-button:hover {
    background: var(--bg-active);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.graphiql-button-primary {
    background: var(--edgewatch-primary);
    border-color: var(--edgewatch-primary);
    color: white;
}

.graphiql-button-primary:hover {
    background: var(--edgewatch-primary-light);
    border-color: var(--edgewatch-primary-light);
}

/* ============================================
   Scrollbar Styling
   ============================================ */
.graphiql-container ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.graphiql-container ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.graphiql-container ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

.graphiql-container ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.graphiql-container ::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* Firefox scrollbar */
.graphiql-container * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ============================================
   Status Bar / Footer
   ============================================ */
.graphiql-session-footer {
    background: var(--bg-darker);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ============================================
   Spinner / Loading
   ============================================ */
.graphiql-spinner {
    border-color: var(--border-color);
    border-top-color: var(--edgewatch-primary);
}

/* ============================================
   Info / Hint Tooltips
   ============================================ */
.graphiql-tooltip {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: 0.8rem;
}

/* ============================================
   Resizer Handles
   ============================================ */
.graphiql-horizontal-drag-bar,
.graphiql-vertical-drag-bar {
    background: var(--border-color);
    transition: background 0.2s;
}

.graphiql-horizontal-drag-bar:hover,
.graphiql-vertical-drag-bar:hover {
    background: var(--edgewatch-primary);
}

/* ============================================
   Response JSON Styling
   ============================================ */
.graphiql-response .cm-property {
    color: #0d6efd;
}

.graphiql-response .cm-string {
    color: #198754;
}

.graphiql-response .cm-number {
    color: #0d6efd;
}

.graphiql-response .cm-atom {
    color: #d63384;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    .graphiql-container {
        flex-direction: column;
    }
    
    .graphiql-sidebar {
        display: none;
    }
    
    .graphiql-plugin {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .edgewatch-header,
    .graphiql-sidebar,
    .graphiql-toolbar,
    .graphiql-execute-button,
    .graphiql-editor-tools {
        display: none !important;
    }
    
    .graphiql-container {
        background: white;
        color: black;
    }
}

/* ============================================
   Animation & Transitions
   ============================================ */
.graphiql-container * {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}

/* Disable transitions for performance-sensitive elements */
.cm-editor *,
.graphiql-response * {
    transition: none;
}

/* Focus outlines for accessibility */
.graphiql-container *:focus-visible {
    outline: 2px solid var(--edgewatch-accent);
    outline-offset: 2px;
}

/* Skip focus outline for mouse users */
.graphiql-container *:focus:not(:focus-visible) {
    outline: none;
}