/* ============================================================
   OJ (Online Judge) Panel Styles  v1.0
   docs.yz520gzy.top · 算法在线练习
   支持 Material for MkDocs 亮色 & 暗色主题
   ============================================================ */

/* ── CSS 变量 ── */
:root {
  --oj-radius:       8px;
  --oj-radius-sm:    5px;
  --oj-primary:      #3949ab;
  --oj-primary-lt:   #5c6bc0;
  --oj-primary-dk:   #283593;
  --oj-ac-bg:        #e8f5e9;
  --oj-ac-border:    #43a047;
  --oj-ac-text:      #2e7d32;
  --oj-wa-bg:        #fff3e0;
  --oj-wa-border:    #fb8c00;
  --oj-wa-text:      #e65100;
  --oj-re-bg:        #fce4ec;
  --oj-re-border:    #e53935;
  --oj-re-text:      #b71c1c;
  --oj-toolbar-h:    48px;
  --oj-editor-h:     430px;
  --oj-results-h:    430px;
  --oj-font-mono:    "JetBrains Mono","Fira Code",Consolas,"Courier New",monospace;
}

[data-md-color-scheme="slate"] {
  --oj-ac-bg:        rgba(46, 125, 50,  0.18);
  --oj-ac-border:    #66bb6a;
  --oj-ac-text:      #a5d6a7;
  --oj-wa-bg:        rgba(230, 81, 0,   0.18);
  --oj-wa-border:    #ffa726;
  --oj-wa-text:      #ffcc80;
  --oj-re-bg:        rgba(183, 28, 28,  0.18);
  --oj-re-border:    #ef5350;
  --oj-re-text:      #ef9a9a;
}

/* ══════════════════════════════════════════════════════════════
   面板主容器
   ══════════════════════════════════════════════════════════════ */
.oj-problem {
  margin: 2rem 0;
  /* 使面板突破 Material 内容区最大宽度限制 */
}

.oj-panel {
  border:        1px solid var(--md-default-border-color, rgba(0,0,0,.12));
  border-radius: var(--oj-radius);
  overflow:      hidden;
  background:    var(--md-default-bg-color, #fff);
  box-shadow:    0 2px 8px rgba(0,0,0,0.06);
  transition:    box-shadow 0.2s ease;
}

.oj-panel:focus-within {
  box-shadow: 0 4px 16px rgba(57,73,171,0.15);
}

/* ══════════════════════════════════════════════════════════════
   工具栏
   ══════════════════════════════════════════════════════════════ */
.oj-toolbar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  height:           var(--oj-toolbar-h);
  padding:          0 14px;
  background:       var(--md-code-bg-color, #f5f5f5);
  border-bottom:    1px solid var(--md-default-border-color, rgba(0,0,0,.1));
  gap:              10px;
}

/* 语言选择器组 */
.oj-lang-group {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.oj-lang-label {
  font-size:    0.72rem;
  font-weight:  600;
  color:        var(--md-default-fg-color--light, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space:  nowrap;
}

.oj-select-wrap {
  position: relative;
}

.oj-select-wrap::after {
  content:      '▾';
  position:     absolute;
  right:        10px;
  top:          50%;
  transform:    translateY(-50%);
  pointer-events: none;
  font-size:    0.75rem;
  color:        var(--md-default-fg-color--light, #888);
}

.oj-lang-select,
.oj-mode-select {
  appearance:       none;
  -webkit-appearance: none;
  padding:          5px 28px 5px 10px;
  font-size:        0.82rem;
  font-family:      inherit;
  font-weight:      500;
  border:           1px solid var(--md-default-border-color, rgba(0,0,0,.2));
  border-radius:    var(--oj-radius-sm);
  background:       var(--md-default-bg-color, #fff);
  color:            var(--md-default-fg-color, #333);
  cursor:           pointer;
  transition:       border-color 0.15s, box-shadow 0.15s;
  outline:          none;
}

.oj-lang-select:hover,
.oj-lang-select:focus,
.oj-mode-select:hover,
.oj-mode-select:focus {
  border-color: var(--oj-primary);
  box-shadow:   0 0 0 2px rgba(57,73,171, 0.15);
}

/* 操作按钮区 */
.oj-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

.oj-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       6px 14px;
  font-size:     0.82rem;
  font-weight:   600;
  font-family:   inherit;
  border:        1px solid transparent;
  border-radius: var(--oj-radius-sm);
  cursor:        pointer;
  transition:    background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space:   nowrap;
  user-select:   none;
}

.oj-btn:active { transform: translateY(1px); }

/* 重置按钮 */
.oj-btn-reset {
  background: transparent;
  border-color: var(--md-default-border-color, rgba(0,0,0,.2));
  color:        var(--md-default-fg-color--light, #666);
}

.oj-btn-reset:hover {
  background:   var(--md-code-bg-color, #f0f0f0);
  border-color: var(--md-default-fg-color--light, #999);
  color:        var(--md-default-fg-color, #333);
}

.oj-btn-help {
  background: transparent;
  border-color: var(--md-default-border-color, rgba(0,0,0,.2));
  color: var(--md-default-fg-color--light, #666);
}

.oj-btn-help:hover {
  background: var(--md-code-bg-color, #f0f0f0);
  border-color: var(--oj-primary-lt);
  color: var(--md-default-fg-color, #333);
}

/* 运行按钮 */
.oj-btn-run {
  background:   var(--oj-primary);
  border-color: var(--oj-primary-dk);
  color:        #fff;
  box-shadow:   0 2px 4px rgba(57,73,171,0.3);
}

.oj-btn-run:hover:not(:disabled) {
  background:   var(--oj-primary-lt);
  box-shadow:   0 3px 8px rgba(57,73,171,0.4);
}

.oj-btn-run:disabled {
  opacity:  0.6;
  cursor:   not-allowed;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   主体区域：编辑器 + 结果（水平分栏）
   ══════════════════════════════════════════════════════════════ */
.oj-body {
  display: flex;
  min-height: 0;
}

/* 编辑器列 */
.oj-editor-col {
  flex:        0 0 62%;
  min-width:   0;
  border-right: 1px solid var(--md-default-border-color, rgba(0,0,0,.1));
}

.oj-editor-wrap {
  position:   relative;
  height:     var(--oj-editor-h);
  overflow:   hidden;
}

/* Monaco 挂载点 */
.oj-monaco-mount {
  position: absolute;
  inset:    0;
  display:  none; /* 加载完后由 oj.js 设为 block */
}

/* Monaco 不可用时降级编辑器 */
.oj-fallback-editor {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  font-family: var(--oj-font-mono);
  background: var(--md-code-bg-color, #fafafa);
  color: var(--md-code-fg-color, #111);
  tab-size: 2;
  box-sizing: border-box;
}

[data-md-color-scheme="slate"] .oj-fallback-editor {
  background: #111827;
  color: #e5e7eb;
}

/* 加载占位 */
.oj-placeholder {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  font-size:       0.88rem;
  color:           var(--md-default-fg-color--light, #888);
  background:      var(--md-code-bg-color, #fafafa);
  letter-spacing:  0.03em;
}

/* 结果列 */
.oj-results-col {
  flex:      1;
  min-width: 0;
  display:   flex;
  flex-direction: column;
  height:    var(--oj-results-h);
}

.oj-results-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       10px 14px 8px;
  border-bottom: 1px solid var(--md-default-border-color, rgba(0,0,0,.08));
  flex-shrink:   0;
}

.oj-results-title {
  font-size:   0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:       var(--md-default-fg-color--light, #888);
}

/* 结果 badge */
.oj-results-badge {
  font-size:    0.74rem;
  font-weight:  600;
  padding:      2px 9px;
  border-radius: 12px;
  background:   var(--md-code-bg-color, #f0f0f0);
  color:        var(--md-default-fg-color--light, #666);
  transition:   background 0.2s, color 0.2s;
}

.oj-badge-ac {
  background: var(--oj-ac-bg);
  color:      var(--oj-ac-text);
}

.oj-badge-wa {
  background: var(--oj-wa-bg);
  color:      var(--oj-wa-text);
}

.oj-results-list {
  flex:      1;
  overflow-y: auto;
  padding:   8px 8px 12px;
  scrollbar-width: thin;
}

.oj-results-list::-webkit-scrollbar { width: 5px; }
.oj-results-list::-webkit-scrollbar-thumb {
  background: var(--md-default-border-color, rgba(0,0,0,.2));
  border-radius: 3px;
}

/* Monaco 文本菜单项（text-only）显示优化 */
.monaco-menu .action-item.text-only {
  min-height: 32px;
}

.monaco-menu .action-item.text-only .action-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 5px 10px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
}

.monaco-menu .action-item.text-only .action-label > span:first-child,
.monaco-menu .action-item.text-only .action-label .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monaco-menu .action-item.text-only .action-label .keybinding,
.monaco-menu .action-item.text-only .action-label .monaco-keybinding {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.82;
  white-space: nowrap;
  font-size: 0.75rem;
}

[data-md-color-scheme="slate"] .monaco-menu .action-item.text-only .action-label {
  color: #e5e9f0 !important;
}

[data-md-color-scheme="slate"] .monaco-menu .action-item.text-only .action-label .keybinding,
[data-md-color-scheme="slate"] .monaco-menu .action-item.text-only .action-label .monaco-keybinding {
  color: #cfd8e3 !important;
}

.oj-results-hint {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          80%;
  font-size:       0.82rem;
  color:           var(--md-default-fg-color--light, #aaa);
  text-align:      center;
  padding:         16px;
  line-height:     1.6;
}

/* ── Running 状态 ── */
.oj-running {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  height:          80%;
  font-size:       0.83rem;
  color:           var(--md-default-fg-color--light, #888);
}

/* ══════════════════════════════════════════════════════════════
   测试结果条目
   ══════════════════════════════════════════════════════════════ */
.oj-result-item {
  margin-bottom:  6px;
  border:         1px solid var(--md-default-border-color, rgba(0,0,0,.1));
  border-radius:  var(--oj-radius-sm);
  overflow:       hidden;
  transition:     border-color 0.15s;
}

.oj-result-item.oj-ac { border-color: var(--oj-ac-border); }
.oj-result-item.oj-wa { border-color: var(--oj-wa-border); }
.oj-result-item.oj-re { border-color: var(--oj-re-border); }

.oj-result-head {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 10px;
  cursor:        default;
}

.oj-result-item.oj-ac .oj-result-head { background: var(--oj-ac-bg); }
.oj-result-item.oj-wa .oj-result-head { background: var(--oj-wa-bg); }
.oj-result-item.oj-re .oj-result-head { background: var(--oj-re-bg); }

.oj-result-status {
  font-size:   0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.oj-result-item.oj-ac .oj-result-status { color: var(--oj-ac-text); }
.oj-result-item.oj-wa .oj-result-status { color: var(--oj-wa-text); }
.oj-result-item.oj-re .oj-result-status { color: var(--oj-re-text); }

.oj-result-idx {
  flex:       1;
  font-size:  0.74rem;
  color:      var(--md-default-fg-color--light, #888);
  min-width:  0;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.oj-result-time {
  font-size:   0.7rem;
  color:       var(--md-default-fg-color--light, #aaa);
  font-family: var(--oj-font-mono);
  flex-shrink: 0;
}

/* 展开/收起按钮 */
.oj-toggle {
  font-size:    0.7rem;
  padding:      2px 7px;
  border:       1px solid var(--md-default-border-color, rgba(0,0,0,.2));
  border-radius: var(--oj-radius-sm);
  background:   transparent;
  color:        var(--md-default-fg-color--light, #777);
  cursor:       pointer;
  flex-shrink:  0;
  font-family:  inherit;
  transition:   background 0.12s;
}

.oj-toggle:hover {
  background: var(--md-code-bg-color, #eee);
}

/* 详情区 */
.oj-result-detail {
  padding:      10px 10px 2px;
  border-top:   1px solid var(--md-default-border-color, rgba(0,0,0,.08));
  background:   var(--md-default-bg-color, #fff);
}

.oj-detail-row {
  margin-bottom: 8px;
}

.oj-detail-label {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--md-default-fg-color--light, #999);
  margin-bottom:  3px;
}

.oj-detail-pre {
  margin:        0;
  padding:       6px 9px;
  font-family:   var(--oj-font-mono);
  font-size:     0.77rem;
  line-height:   1.55;
  background:    var(--md-code-bg-color, #f5f5f5);
  border-radius: var(--oj-radius-sm);
  overflow-x:    auto;
  white-space:   pre-wrap;
  word-break:    break-all;
  max-height:    140px;
  overflow-y:    auto;
  border:        1px solid var(--md-default-border-color, rgba(0,0,0,.06));
}

.oj-pre-ok      { border-color: var(--oj-ac-border) !important; }
.oj-pre-expected{ border-color: rgba(57,73,171,0.3) !important; }
.oj-pre-wrong   {
  border-color:  var(--oj-wa-border) !important;
  background:    var(--oj-wa-bg) !important;
}
.oj-pre-stderr  {
  border-color:  var(--oj-re-border) !important;
  background:    var(--oj-re-bg) !important;
  color:         var(--oj-re-text);
}

/* ══════════════════════════════════════════════════════════════
   页面顶部元数据条（题号、难度、标签）
   ══════════════════════════════════════════════════════════════ */
.oj-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         8px;
  margin:      0.6rem 0 1.6rem;
}

.oj-difficulty {
  padding:       3px 10px;
  border-radius: 14px;
  font-size:     0.75rem;
  font-weight:   700;
}

.oj-difficulty.easy   { background: #e8f5e9; color: #2e7d32; }
.oj-difficulty.medium { background: #fff3e0; color: #e65100; }
.oj-difficulty.hard   { background: #fce4ec; color: #c62828; }

[data-md-color-scheme="slate"] .oj-difficulty.easy   { background: rgba(46,125,50,.22); color: #a5d6a7; }
[data-md-color-scheme="slate"] .oj-difficulty.medium { background: rgba(230,81,0,.22);  color: #ffcc80; }
[data-md-color-scheme="slate"] .oj-difficulty.hard   { background: rgba(183,28,28,.22); color: #ef9a9a; }

.oj-tag {
  padding:       2px 9px;
  border-radius: 12px;
  font-size:     0.72rem;
  font-weight:   500;
  background:    var(--md-code-bg-color, #f0f0f0);
  color:         var(--md-default-fg-color--light, #666);
  border:        1px solid var(--md-default-border-color, rgba(0,0,0,.1));
}

/* ══════════════════════════════════════════════════════════════
   Spinner 动画
   ══════════════════════════════════════════════════════════════ */
@keyframes oj-spin { to { transform: rotate(360deg); } }

.oj-spinner-ring {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        2.5px solid var(--md-default-border-color, rgba(0,0,0,.15));
  border-top-color: var(--oj-primary);
  border-radius: 50%;
  animation:     oj-spin 0.7s linear infinite;
  flex-shrink:   0;
}

.oj-spinner-sm {
  width:  14px;
  height: 14px;
  border-width: 2px;
}

/* ══════════════════════════════════════════════════════════════
   Toast 通知
   ══════════════════════════════════════════════════════════════ */
.oj-toast {
  position:      fixed;
  bottom:        80px;
  left:          50%;
  transform:     translateX(-50%) translateY(12px);
  padding:       9px 18px;
  background:    rgba(30,30,30,0.9);
  color:         #fff;
  font-size:     0.83rem;
  border-radius: var(--oj-radius);
  pointer-events: none;
  opacity:       0;
  transition:    opacity 0.2s ease, transform 0.2s ease;
  z-index:       99999;
  white-space:   nowrap;
  backdrop-filter: blur(4px);
}

.oj-toast-show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════════
   错误提示
   ══════════════════════════════════════════════════════════════ */
.oj-load-error {
  padding:       12px 16px;
  background:    var(--oj-re-bg);
  color:         var(--oj-re-text);
  border-left:   3px solid var(--oj-re-border);
  border-radius: var(--oj-radius-sm);
  font-size:     0.85rem;
  margin:        1rem 0;
}

/* ══════════════════════════════════════════════════════════════
   题目列表卡片（index.md 用）
   ══════════════════════════════════════════════════════════════ */
.oj-problem-list {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   1rem;
  margin:                1.5rem 0;
}

.oj-problem-card {
  display:       flex;
  flex-direction: column;
  gap:           8px;
  padding:       14px 16px;
  border:        1px solid var(--md-default-border-color, rgba(0,0,0,.1));
  border-radius: var(--oj-radius);
  background:    var(--md-default-bg-color, #fff);
  text-decoration: none !important;
  color:         var(--md-default-fg-color, #333) !important;
  transition:    border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.oj-problem-card:hover {
  border-color: var(--oj-primary);
  box-shadow:   0 4px 12px rgba(57,73,171,0.12);
  transform:    translateY(-2px);
}

.oj-card-title {
  font-size:   0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.oj-card-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  align-items: center;
}

.oj-card-num {
  font-size:   0.7rem;
  font-family: var(--oj-font-mono);
  color:       var(--md-default-fg-color--light, #aaa);
}

/* ══════════════════════════════════════════════════════════════
   响应式 — 小屏幕：竖向堆叠
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  .oj-body {
    flex-direction: column;
  }

  .oj-editor-col {
    flex:        none;
    border-right: none;
    border-bottom: 1px solid var(--md-default-border-color, rgba(0,0,0,.1));
  }

  .oj-editor-wrap {
    height: 300px;
  }

  .oj-results-col {
    height: auto;
    max-height: 380px;
  }

  .oj-toolbar {
    flex-wrap: wrap;
    height:    auto;
    padding:   8px 12px;
    gap:       8px;
  }

  .oj-lang-group { flex: 1; }
  .oj-btn { font-size: 0.78rem; padding: 5px 11px; }

  .oj-problem-list {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 480px) {
  .oj-editor-wrap { height: 260px; }
}