@import url('https://cdn.ratcode.dev/css/reset.css');
@import url('https://cdn.ratcode.dev/css/default.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
  --accent  : red;

  &[data-theme="ratcode-dark"] {
    --bg      : #151515;
    --fg      : white;
    --bg-body : black;
    --logo-outline : var(--bg-body);
    --logo-inline  : var(--fg);
    #welcome { --logo-outline : var(--bg); }
  }
  &[data-theme="ratcode-light"] {
    --bg      : white;
    --fg      : black;
    --bg-body : #DDD;
    --logo-outline : var(--fg);
    --logo-inline  : var(--bg-body);
    #welcome { --logo-inline : var(--bg); }
  }
  &[data-theme="ratcode-oled"] {
    --bg      : black;
    --fg      : white;
    --bg-body : #111111;
    --logo-outline : var(--bg-body);
    --logo-inline  : var(--fg);
    #welcome { --logo-outline : var(--bg); }
  }
  &[data-theme="ratcode-dracula"] {
    --accent  : #ff79c6;
    --bg      : #282a36;
    --fg      : #f8f8f2;
    /*--fg      : #6272a4;*/
    --bg-body : #212126;
    --bg-body : color-mix(in oklch, var(--bg), black 10%);
    --fg-dock-active : var(--accent);
    
    --logo-outline : var(--bg-body);
    --logo-inline  : var(--fg);
    #welcome { --logo-outline : var(--bg); }
    --zebra : color-mix(in oklch, var(--bg), black 10%);
    
    /*--keyboard-btn-bg : hsl(from var(--bg) h s calc(l - 10%));*/
    --keyboard-btn-bg : color-mix(in oklch, var(--bg), black 10%);
  }
}

:root {
  --font     : "JetBrains Mono", monospace;
  --fontSize : 12px;
  
  --accent-25 : hsl(from var(--accent) h s l / 0.25);
  --accent-50 : hsl(from var(--accent) h s l / 0.50);
  --accent-75 : hsl(from var(--accent) h s l / 0.75);
  
  --fg-25 : hsl(from var(--fg) h s l / 0.25);
  --fg-50 : hsl(from var(--fg) h s l / 0.50);
  --fg-75 : hsl(from var(--fg) h s l / 0.75);
  
  --bg-darker-10  : hsl(from var(--bg) h s calc(l - 10%));
  --bg-lighter-10 : hsl(from var(--bg) h s calc(l + 10%));
}

* { font-family: var(--font); }
html, body { font-size: var(--fontSize); }
.icon { display: inline; }

html           { background: black; }
body           { background: var(--bg-body); color: var(--fg); }
#workspace > * { background: var(--bg); }
#underdock > * { background: var(--bg); }

body { overflow: hidden; }
#app { height: 100dvh; max-height: 100dvh; }
/*
#app { overflow: auto; }
*/

#nothing {
  height          : 100dvh;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 2rem;
  font-size       : 40px;
  
  svg { width: 200px; }
}

#app {
  display        : flex;
  flex-direction : column;
  gap : 1px; 
}
#workspace { flex: 1 0 auto; }
#underdock { flex: 0 0 auto; }


#workspace {
  display        : flex;
  flex-direction : column;
  gap            : 1px;
  position       : relative;
  
  > *     { flex : 0 0 auto; }
  #editor { flex : 1 1 auto; }
}

#underdock {
  display        : flex;
  flex-direction : column;
  gap : 1px;
  
  #keyboard { flex : 0 0 auto; }
}

:is(#workspace, #underdock) > * { padding : 0.5rem; }


/*
#dock {
  justify-content : space-between;
  > * {
    display        : flex;
    flex-direction : row;
    gap     : 0.25rem;
  }
}
*/


#editor { padding : 0; }
/*
#monaco-container    { height: 100%; }
*/

/*
#editor { padding : 0; }
#monaco-container    { height: 100%; }
.monaco-editor       { height: 100%!important; min-height: 0; }
.monaco-editor > div { height: 100%!important }
*/

/*
#editor { padding : 0; }
#monaco-container    { height: 100%; }
.monaco-editor       { height: 100%!important; min-height: 0; }
.monaco-editor > div { height: 100%!important }
*/

/*
#editor { display: flex; flex-direction: column; }
#editor #monaco-container { flex: 1 1 auto; }
*/
/*
#editor #monaco-container { height: 400px!important; }
#editor #monaco-container .monaco-editor { height: 300px!important; }
*/

/*
#editor #monaco-container { max-height: 100%!important; }
#editor #monaco-container .monaco-editor { max-height: 100%!important; }
*/

/*
#editor #monaco-container { display: flex; flex-direction: column; }
#editor #monaco-container .monaco-editor { flex: 1 1 auto; }
*/

#editor #monaco-container                { position: relative; }
#editor #monaco-container .monaco-editor { position: absolute; }

#editor #monaco-container                { height: 100%!important; }
#editor #monaco-container .monaco-editor { height: auto!important; }

#editor #monaco-container .monaco-editor { top: 0; bottom: 0; }
/*
#editor #monaco-container .monaco-editor { height: 100%!important; }
*/


#browser { 
  flex : 0 1 200px;
}
#dock {
  display               : grid;
  grid-template-columns : 1fr auto 1fr; 
  align-items           : center;
  font-size             : 20px;
  gap                   : 0.5rem;
  
  .section {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    gap            : 0.5rem;
    
    &:last-child   { justify-content: flex-end; }
    &:nth-child(2) { justify-content: center; }
  }
  
  > * > *        { opacity: 0.50; }
  > * > *.active { opacity: 1.00; color: var(--fg-dock-active, currentcolor); }
}
#filelist {
  display         : flex;
  flex-direction  : row;
  gap             : 1px;
  padding         : 0;
  justify-content : flex-start;
  overflow-x      : auto;
  
  > * {
    display        : flex;
    flex-direction : row;
    padding        : 0.25rem;
    gap            : 0.25rem;
  }
}
#statusbar {
  display         : flex;
  flex-direction  : row;
  gap             : 0.25rem;
  justify-content : space-between;
}
#toolbar {
  display         : flex;
  flex-direction  : row;
  justify-content : center;
  gap             : 0.5rem;
  font-size       : 20px;
}

/* Keyboard */
:root {
  --keyboard-bg          : var(--bg);
  --keyboard-btn-bg      : #AAA3;
  --keyboard-btn-fg      : var(--fg);
  --keyboard-btn-padding : 5px;
  --keyboard-btn-radius  : 0;
  --keyboard-btn-shape   : round;
  --keyboard-btn-gap     : 0.25rem;
  --keyboard-padding     : 0.50rem;
  --keyboard-font        : var(--font);
  
  --keyboard-btn-hover-bg : var(--accent);
  --keyboard-btn-hover-fg : white;
  
  --keyboard-symbol-bg     : var(--keyboard-btn-bg);
  --keyboard-symbol-fg     : var(--keyboard-btn-fg);
  --keyboard-symbol-radius : 50%;
  --keyboard-symbol-shape  : round;
}
#keyboard {
  display: flex; flex-direction: column;
  background  : var(--keyboard-bg);
  gap         : var(--keyboard-btn-gap);
  padding     : var(--keyboard-padding);
  font-family : var(--keyboard-font);
  
  .row {
    display: flex; 
    flex-direction: row; 
    justify-content: center;
    gap: var(--keyboard-btn-gap);
  }
}
#keyboard-keys,
#keyboard-symbols {
  display: flex; flex-direction: column;
  gap: var(--keyboard-btn-gap);
}
#keyboard button {
  background    : var(--keyboard-btn-bg);
  color         : var(--keyboard-btn-fg);
  border-radius : var(--keyboard-btn-radius);
  corner-shape  : var(--keyboard-btn-shape);
  padding       : var(--keyboard-btn-padding) 0;
  border        : none;
  display       : grid;
  height        : auto;
  place-content : center;
  
  &.symbol { aspect-ratio: 1; padding: 0; }
  
  flex-grow: 1; flex-shrink: 0; flex-basis: 0;
  &.w-1 { flex-grow: 1; }
  &.w-2 { flex-grow: 2; }
  &.w-3 { flex-grow: 3; }
  &.w-4 { flex-grow: 4; }
  &.w-5 { flex-grow: 5; }
  &.w-6 { flex-grow: 6; }
  &.w-7 { flex-grow: 7; }
  
  &.symbol { 
    background    : var(--keyboard-symbol-bg     , var(--keyboard-btn-bg));
    border-radius : var(--keyboard-symbol-radius , var(--keyboard-btn-radius));
    corner-shape  : var(--keyboard-symbol-shape  , var(--keyboard-btn-shape));
  }
  
  &:hover    { 
    background : var( --keyboard-btn-hover-bg    , var(--keyboard-btn-bg) );
    color      : var( --keyboard-btn-hover-fg    , var(--keyboard-btn-fg) ); 
  }
  &:disabled {
    background : var( --keyboard-btn-disabled-bg , var(--keyboard-btn-bg) );
    color      : var( --keyboard-btn-disabled-fg , var(--keyboard-btn-fg) );
    cursor     : not-allowed; 
    opacity    : 0.25; 
  }
  
}


.modal {
  background : var(--accent-75)!important;
  inset      : 0;
  padding    : 2rem!important;
  position   : absolute;
  z-index    : 100;
  display    : grid;
  place-items : center;
  overflow : hidden;
  
  .inner {
    display        : flex;
    flex-direction : column;
    gap            : 1px;
    max-width      : 720px;
    width          : 100%;
    height         : 100%;
    overflow       : hidden;
    background     : var(--bg);
    
    > * {
      background : var(--bg);
      padding    : 1rem;
    }
    
    .main { 
      flex       : 1 1 auto; 
      overflow   : auto;
      min-height : 0;
    }
  }
  
  .aside {
    align-items     : center;
    display         : flex;
    justify-content : space-between;
    font-size       : 20px;
    font-weight     : bold;
  }
}

.toggle {
  display : flex;
}

#commands .main {
  display   : flex;
  flex-flow : column nowrap;
  gap       : 0rem;
  padding   : 0;
  
  .commands-header { order: 2; padding: 1rem; }
  .commands-body   { order: 1; padding: 1rem; }
}

.commands-body {
  display   : flex;
  flex-flow : column nowrap;
  gap       : 1rem;
  overdlow  : auto;
}

.commands-header {
  background : var(--bg);
  position   : sticky;
  bottom     : 0;
}
.commands-header input {
  width      : 100%; 
  padding    : 0.5rem;
  background : none;
  color      : var(--fg);
  border     : 2px solid currentcolor;
  
  &:focus { color: var(--accent); }
}
.commands-list {
  list-style: none; padding: 0; margin: 0;
}
.commands-list li {
  padding         : 0.5rem;
  cursor          : pointer; 
  display         : flex; 
  justify-content : space-between; 
  align-items     : center;
  
  display : grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 
    "name icon"
    "key  icon";
  column-gap: 15px;    /* Abstand zwischen Text und Icon */
  
  &:nth-child(2n+1) {
    background : var(--zebra);
  }
  &.none {
    color      : var(--accent); 
    text-align : center;
  }
  strong {
    grid-area  : name;
    text-align : left;
  }
  small {
    grid-area  : key;
    text-align : left;
    color      : var(--accent);
  }
  .fav-btn {
    font-size : 1.5rem;
    grid-area: icon;
    justify-self: end;  /* Icon ganz nach rechts drücken */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


select {
  background : none;
  border     : 2px solid currentcolor;
  color      : currentcolor;
  padding    : 0.25rem;
}

.picker {
  display   : flex;
  flex-wrap : wrap;
  gap       : 4px;
  
  button {
    color   : var(--fg);
    padding : 0.25rem 0.5rem;
    border  : 1px solid currentcolor;
    border-radius: 4px;
    background: transparent;
    opacity : 0.5;
  }
  button:hover {
    opacity : 1;
  }
  button.active {
    color   : var(--accent);
    opacity : 1;
  }
}

.toggle {
  display     : flex;
  flex-flow   : row nowrap;
  align-items : center;
  gap         : 0.25rem;
}






/* File Browser Styles */
.filebrowser-header .btn-primary {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
  padding     : 0.5rem;
  background  : var(--accent);
  color       : white;
  border      : none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.filebrowser-header .btn-primary:hover {
  
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 400px;
  overflow-y: auto; /* Scrollbar, falls der Ordner riesig ist */
}

.file-item {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 8px 10px;
  border-right : 1px solid #eee;
  cursor       : pointer;
}

.file-item:hover {
  background-color: #f8f9fa;
}

.file-name {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Schneidet lange Dateinamen mit "..." ab */
}

/* Tree View */
.tree-root, .tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-block: 3px;
  border-radius: 4px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.tree-row.clickable  { cursor: pointer; }
.tree-row:hover      { background: var(--hover-bg, rgba(255,255,255,0.06)); }

.tree-arrow {
  display: flex;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.tree-arrow.open     { transform: rotate(90deg); }
.tree-arrow-spacer   { width: 16px; flex-shrink: 0; }

.tree-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-empty {
  padding-left: 38px;
  font-size: 12px;
  color: #555;
  padding-block: 2px;
}

#statusbar {
  display        : flex;
  align-items    : center;
  gap            : 0.5rem;
  padding        : 0.5rem;
  background     : var(--statusbar-bg, var(--bg));
  overflow       : hidden;
  white-space    : nowrap;
  text-transform : uppercase; 
  font-size      : 0.75em;

  .sb-spacer   { flex: 1; }
  .sb-sep      { color: var(--fg-25); }
  .sb-item     { cursor: default; }
  .sb-indent   { cursor: pointer; }
  .sb-name     { opacity: 0.50; }
  .sb-language { color: var(--accent); }

}

#welcome {
  display         : flex;
  flex-flow       : column nowrap;
  align-items     : center;
  justify-content : safe center;
  gap             : 2rem;
  height          : 100%;
  
  > * { opacity: 0.25; }
}


.modal .inner {
  box-shadow : 0 0 10px color-mix(in oklch, var(--bg), transparent 25%);
}


#settings {
  .main .section > *:nth-child(2n+2) {
    background : var(--zebra);
  }
  
  .field, .toggle { padding: 0.5rem 0.5rem; }
}