:root{
  --vscode-bg: #0d1117;
  --vscode-sidebar: #1e1e1e;
  --vscode-activity: #010409;
  --vscode-panel: #161b22;
  --vscode-accent: #4fc3f7;
  --vscode-fg: #e6edf3;
  --vscode-muted: #7d8590;
  --vscode-border: rgba(240,246,252,0.1);
  --max-width: 1200px;
  --sidebar-width: 220px;
  --code-bg: #0f1720;
  --code-fg: #e6eef8;
}

/* light theme overrides (applied by adding `light-theme` to the root element) */
.light-theme{
  --vscode-bg: #f9fef9;
  --vscode-sidebar: #e8f5e9;
  --vscode-activity: #d4e9d7;
  --vscode-panel: #ffffff;
  --vscode-accent: #1b4d2f;
  --vscode-fg: #1a3a1a;
  --vscode-muted: #5a6b5a;
  --vscode-border: rgba(45, 122, 79, 0.12);
  --code-bg: #1e2030;
  --code-fg: #c8d3f5;
}

*{box-sizing:border-box}
html,body,#root{height:100%;margin:0}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--vscode-bg);
  color: var(--vscode-fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.vscode-root{
  display:flex;
  height:100vh;
  width:100%;
  margin:0;
  box-shadow: 0 0 0 1px var(--vscode-border) inset;
}

.activity-bar{
  width:56px;
  background:var(--vscode-activity);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 6px;
  gap:8px;
}
.activity-bar .hamburger-btn{display:none}
.activity-bar button{
  width:40px;height:40px;border-radius:6px;border:none;background:transparent;color:var(--vscode-muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;
}
.activity-bar button.active{background:var(--vscode-accent);color:white}

.activity-bar-spacer {
  flex: 1;
}

.codicon{font-size:18px;line-height:1}

.sidebar-container{
  flex: 0 0 var(--sidebar-width);
  height: 100%;
}

.sidebar{
  height: 100%;
  width:var(--sidebar-width);
  background:var(--vscode-sidebar);
  border-right:1px solid var(--vscode-border);
  padding:12px 10px;overflow:auto;
}
.sidebar h3{margin:8px 0 12px 6px;font-size:14px;color:var(--vscode-muted)}
.nav-item{padding:8px 10px;border-radius:6px;color:var(--vscode-fg);display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.nav-item:hover{background:rgba(255,255,255,0.02)}
.nav-item .meta{color:var(--vscode-muted);font-size:12px}

/* tree styles for collapsible outline */
.tree .tree-item{display:flex;align-items:center;gap:6px;padding:0px;border-radius:4px;color:var(--vscode-fg);cursor:pointer}
.tree .tree-item .tree-label{font-size:13px;padding-left:2px}
.tree .tree-item .meta{color:var(--vscode-muted);font-size:11px}
.tree .tree-children{margin-left:12px;margin-top:4px;border-left:1px dashed rgba(255,255,255,0.04);padding-left:10px}
.tree .day .tree-label{font-size:12px}
.tree .tree-file{display:flex;align-items:center;gap:8px;padding:0px;border-radius:4px;color:var(--vscode-fg);font-size:13px;margin-left:8px}
.tree .tree-file .file-name{color:var(--vscode-fg);font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace}
.tree .tree-file:hover{background:rgba(255,255,255,0.02)}
.tree .tree-file.selected{background:rgba(255,255,255,0.05)}
.tree .tree-item.selected{background:rgba(255,255,255,0.05)}
.tree .tree-syllabus.selected .tree-item{background:rgba(255,255,255,0.05)}
.tree .spacer{flex:1}

/* Show mobile-only elements inside sidebar when in overlay mode */
@media (max-width:800px){
  .sidebar .mobile-only{display:block;margin-bottom:8px}
}

.tree .codicon{font-size:13px;color:var(--vscode-muted)}
/* Chevron toggle button styling */
.tree .tree-day .chev{
  appearance: none;
  background: transparent;
  border: none;
  color: var(--vscode-muted);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tree .tree-day .chev:hover{
  background: transparent;
}

/* Light theme chevron: no background/border, inherit icon color fix above */
.light-theme .tree .tree-day .chev{
  background: transparent;
  border: none;
}

/* Improve chevron/icon contrast in light mode */
.light-theme .tree .codicon{
  color: #3a3a3a;
}

.tree .tree-children.day-files{margin-left:8px;padding-left:6px}

/* tighter, compact look for week labels */
.tree .tree-week > .tree-item{padding-top:0px;padding-bottom:0px}
.tree .tree-day > .tree-item{padding-top:0px;padding-bottom:0px}

.editor-area{
  flex:1 1 auto;display:flex;flex-direction:column;background:var(--vscode-bg);
  min-height: 0;
  min-width: 0;
}
.title-bar{height:44px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--vscode-border);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.title-bar .title{font-weight:600}
.title-bar .spacer{flex:1}
.title-bar .btn{background:transparent;border:1px solid transparent;color:var(--vscode-muted);padding:6px 10px;border-radius:4px;cursor:pointer}
.title-bar .btn.primary{border-color:transparent;background:var(--vscode-accent);color:white}

.editor-content{padding:18px;overflow:auto;flex:1 1 auto;width:100%}

.lesson-card{background:var(--vscode-panel);border:1px solid var(--vscode-border);padding:14px;border-radius:8px;margin-bottom:12px;overflow-wrap:break-word;word-break:break-word}
.vc-columns{display:flex;flex-direction:column}
.vc-columns .vc-col{min-width:0}
@media(min-width:900px){.vc-columns{flex-direction:row;gap:16px;height:calc(100vh - 220px)}.vc-columns .vc-col{flex:1;overflow-y:auto;height:100%;padding-right:4px}}
.lesson-card h4{margin:0 0 6px 0}
.lesson-card p{margin:0;color:var(--vscode-muted);font-size:14px}
.lesson-card h5{margin:12px 0 6px 0}
.lesson-card ul{margin:8px 0;padding-left:18px;line-height:1.6}

pre,code{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}
pre{background:var(--code-bg);padding:12px;border-radius:6px;color:var(--code-fg);overflow:auto;max-width:100%;width:100%;word-wrap:break-word}
code.inline{background:var(--code-bg);color:var(--code-fg);padding:2px 6px;border-radius:4px}

/* small screens */
/* Mobile: show sidebar as overlay drawer */
@media (max-width:800px){
  .activity-bar{width:48px}
  .activity-bar .hamburger-btn{display:flex}
  .sidebar-container{position:fixed;top:0;left:0;height:100vh;width:0;pointer-events:none;z-index:1000}
  .sidebar-container.open{width:100vw;pointer-events:auto}
  .sidebar-container.open::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.35)}
  .sidebar-container > .sidebar{position:absolute;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform 0.2s ease;box-shadow:0 2px 12px rgba(0,0,0,0.3)}
  .sidebar-container.open > .sidebar{transform:translateX(0)}
  .sidebar-close{position:absolute;top:10px;left:calc(var(--sidebar-width) + 12px);background:var(--vscode-panel);color:var(--vscode-fg);border:1px solid var(--vscode-border);padding:6px;border-radius:6px}
}

/* Syllabus view */
.syllabus-root{padding:12px}
.syllabus-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.syllabus-header h2{margin:0;font-size:18px}
.syllabus-header .meta{color:var(--vscode-muted);font-size:13px}
.syllabus-list{display:flex;flex-direction:column;gap:8px}
.syllabus-week{padding:8px;border-radius:6px;background:var(--vscode-panel);border:1px solid var(--vscode-border)}
.week-title{font-weight:600;margin-bottom:6px}
.week-items{display:flex;gap:8px;flex-wrap:wrap}
.week-day{background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:6px;min-width:160px}
.day-title{font-weight:600;font-size:13px}
.day-desc{font-size:12px;color:var(--vscode-muted);margin-top:4px}

.syllabus-info{display:flex;flex-direction:column;gap:12px}
.syllabus-info .info-row{display:flex;gap:18px;align-items:flex-start}
.syllabus-info .info-row strong{
  flex: 0 0 220px;
  width: 220px;
  display: inline-block;
  color: var(--vscode-accent);
  font-weight: 700;
  padding-right: 12px;
  border-right: 1px solid rgba(255,255,255,0.04);
}

.syllabus-info .info-row{
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.syllabus-info .info-row:last-child{
  border-bottom:none;
}
.syllabus-info .info-row ul{margin:0;padding-left:18px}
.syllabus-info .info-row ol{margin:0;padding-left:18px}
.syllabus-info .info-row p{margin:0}

@media (min-width:900px){
  .vscode-root > .activity-bar + .editor-area .editor-content{padding-left:24px}
}

/* Settings layout boxes */
.box{background:var(--vscode-panel);border:1px solid var(--vscode-border);padding:12px;border-radius:8px}
.settings-grid{display:flex;flex-direction:column;gap:12px}
.settings-presets .preset-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px dashed rgba(255,255,255,0.02)}
.settings-presets .preset-row:first-of-type{border-top:0}
.preset-name{font-weight:600}
.settings-preview .preview-canvas{display:flex;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.preview-sidebar{width:60px;padding:8px;color:#fff;display:flex;align-items:center;justify-content:center}
.preview-main{flex:1;padding:12px;color:#fff}
.preview-title{font-weight:700}
.preview-body{margin-top:8px;font-size:13px;color:var(--vscode-muted)}
.preview-prim{margin-top:8px}

@media(min-width:1000px){
  .settings-grid{flex-direction:row}
  .settings-presets{flex:1}
  .settings-preview{flex:0 0 340px}
}

@media (max-width: 800px) {
  .syllabus-info .info-row {
    flex-direction: column;
    gap: 8px;
  }
  .syllabus-info .info-row strong {
    width: auto;
    flex: none;
    border-right: none;
    padding-right: 0;
    padding-bottom: 6px;
  }
}

/* Announcements wrapper and header (outside terminal) */
.announcements-wrapper {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-top: 1px solid var(--vscode-border);
}

.announcements-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--vscode-accent);
  font-weight: 600;
  font-size: 12px;
  background: var(--vscode-sidebar);
  border-bottom: 1px solid var(--vscode-border);
}

.announcements-header .codicon {
  font-size: 14px;
}

/* Announcements panel (terminal-style) */
.announcements-panel {
  display: flex;
  flex-direction: column;
  background: var(--vscode-panel);
  flex-shrink: 0;
  padding: 4px 8px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  font-size: 12px;
  height: 100%;
  overflow: hidden;
}

.announcements-resize-handle {
  width: 100%;
  height: 4px;
  background: var(--vscode-border);
  cursor: row-resize;
  transition: background 0.2s;
  flex-shrink: 0;
}

.announcements-resize-handle:hover {
  background: var(--vscode-accent);
}

.announcements-content {
  overflow-y: auto;
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.announcement-item {
  padding: 0;
  border-left: none;
  padding-left: 0;
  display: flex;
  gap: 8px;
  line-height: 1.2;
  animation: slideInLine 0.3s ease-out;
}

.announcement-date {
  color: var(--vscode-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.announcement-message {
  color: var(--vscode-fg);
  word-wrap: break-word;
  line-height: 1.2;
}

.announcement-empty {
  color: var(--vscode-muted);
  font-style: italic;
  padding: 6px;
}

/* Typewriter/terminal animation for announcements */
@keyframes slideInLine {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button and Input styling */
button.btn, .btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--vscode-border);
  color: var(--vscode-fg);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s ease;
}

button.btn:hover, .btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

button.btn:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="text"],
input[type="color"],
input[type="email"],
input[type="number"],
textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--vscode-border);
  color: var(--vscode-fg);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

input[type="text"]:focus,
input[type="color"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--vscode-accent);
  background: rgba(255, 255, 255, 0.08);
}

label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
}

label input,
label textarea {
  margin-top: 4px;
  width: 100%;
}

/* Light theme overrides for inputs and buttons */
.light-theme button.btn,
.light-theme .btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
}

.light-theme button.btn:hover,
.light-theme .btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.light-theme input[type="text"],
.light-theme input[type="color"],
.light-theme input[type="email"],
.light-theme input[type="number"],
.light-theme textarea {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.15);
}

.light-theme input[type="text"]:focus,
.light-theme input[type="color"]:focus,
.light-theme input[type="email"]:focus,
.light-theme input[type="number"]:focus,
.light-theme textarea:focus {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--vscode-accent);
}

/* Lesson content styling */
.lesson-component {
  width: 100%;
}

.lesson-section {
  margin-bottom: 20px;
}

.lesson-section h2 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--vscode-accent);
}

.lesson-section h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 1.1em;
}

.lesson-section h4 {
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 1em;
}

.lesson-section p {
  margin: 8px 0;
  line-height: 1.6;
}

.lesson-section ul,
.lesson-section ol {
  margin: 8px 0;
  padding-left: 24px;
  line-height: 1.6;
}

.lesson-section li {
  margin: 4px 0;
}

.lesson-section a {
  color: var(--vscode-accent);
  text-decoration: none;
}

.lesson-section a:hover {
  text-decoration: underline;
}

.lesson-section code {
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
  font-size: 0.9em;
}

.code-block {
  margin: 12px 0;
}

.code-block pre {
  background: var(--code-bg);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  color: var(--code-fg);
}

.code-block code {
  background: transparent;
  padding: 0;
  font-size: 0.9em;
}

.lesson-section section {
  margin: 16px 0;
}

/* Light theme adjustments for lesson content inline code */
.light-theme .lesson-section code {
  background: var(--code-bg);
  color: var(--code-fg);
}

/* Settings page styles */
.settings-section {
  background: var(--vscode-panel);
  border: 1px solid var(--vscode-border);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.settings-section h3 {
  color: var(--vscode-accent);
  font-size: 1em;
}

.settings-preview-box {
  border: 1px solid var(--vscode-border);
  border-radius: 8px;
  overflow: hidden;
}

.preview-mode-label {
  background: var(--vscode-sidebar);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vscode-muted);
  border-bottom: 1px solid var(--vscode-border);
}

.preview-canvas {
  display: flex;
  height: 120px;
}

.preview-sidebar {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--vscode-border);
  font-size: 11px;
}

.preview-main {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.preview-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}

.preview-text {
  font-size: 12px;
  margin-bottom: 8px;
}

.btn.primary {
  background: var(--vscode-accent);
  color: white;
  border-color: var(--vscode-accent);
}

.btn.primary:hover {
  opacity: 0.9;
}

.light-theme .btn.primary {
  color: white;
  background: var(--vscode-accent);
  border-color: var(--vscode-accent);
}

/* Input color picker styling */
input[type="color"] {
  height: 40px;
  cursor: pointer;
}

/* Color label in settings */
.color-label {
  display: block;
  font-size: 11px;
  color: var(--vscode-muted);
  margin-top: 4px;
  font-weight: 400;
}

/* Sidebar resize handle */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  cursor: col-resize;
  z-index: 100;
  transition: background 0.2s;
}

.sidebar-resize-handle:hover {
  background: var(--vscode-accent);
}

.sidebar-container {
  position: relative;
}