/* ================================================================
   CodeX — Dev Toolbox Platform
   assets/css/tool.css | Dev Toolbox UI Styles
   Author: Sabbir Hasan | GitHub: Dark-Devil-king
================================================================ */

/* ===== LANGUAGE SELECTOR ===== */
.lang-selector-wrap { margin-bottom: 28px; }
.lang-selector-label {
  font-family: 'Share Tech Mono', monospace; font-size: 0.72rem;
  color: var(--cyan); letter-spacing: 0.2em; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.lang-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.lang-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  cursor: pointer; transition: all var(--transition);
  font-family: 'Exo 2', sans-serif;
}
.lang-tab:hover { border-color: rgba(0,245,255,0.3); color: var(--cyan); background: rgba(0,245,255,0.06); }
.lang-tab.active {
  border-color: var(--cyan); color: var(--cyan);
  background: rgba(0,245,255,0.1); box-shadow: 0 0 15px rgba(0,245,255,0.15);
}
.lang-tab-icon { font-size: 0.9rem; }

.lang-mode-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 99px;
  border: 1px solid rgba(0,245,255,0.15); background: rgba(0,245,255,0.04);
  font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; color: var(--cyan);
}
.lmb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.5s infinite; }

/* ===== TOOL WRAPPER ===== */
.tool-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* ===== INPUT PANEL ===== */
.tool-input-panel, .tool-preview-panel { padding: 24px; }

.tool-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
  font-family: 'Share Tech Mono', monospace; font-size: 0.82rem; color: var(--cyan); font-weight: 700;
}
.tool-lang-chip {
  padding: 3px 10px; border-radius: 6px; font-size: 0.68rem; font-weight: 700;
  background: rgba(0,245,255,0.12); border: 1px solid rgba(0,245,255,0.25); color: var(--cyan);
}
.output-mode-label { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); }
.output-mode-label i { color: var(--cyan); }

.input-group { margin-bottom: 16px; }
.input-group label { display: block; font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.15em; margin-bottom: 8px; }

.tool-textarea {
  width: 100%; height: 240px; padding: 14px 16px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-family: 'Share Tech Mono', monospace; font-size: 0.82rem;
  line-height: 1.6; resize: vertical; outline: none; transition: border-color var(--transition);
  tab-size: 2;
}
.tool-textarea:focus { border-color: rgba(0,245,255,0.4); box-shadow: 0 0 15px rgba(0,245,255,0.1); }
.tool-textarea::placeholder { color: rgba(232,234,246,0.2); font-style: italic; }

.input-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.char-count  { font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; color: var(--text-dim); }
.shortcut-hint { font-size: 0.68rem; color: var(--text-dim); }
kbd { background: rgba(0,245,255,0.1); border: 1px solid rgba(0,245,255,0.2); border-radius: 4px; padding: 2px 5px; font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; color: var(--cyan); }

/* ===== FILE UPLOAD ===== */
.file-upload-area {
  border: 2px dashed var(--glass-border); border-radius: var(--radius-sm);
  padding: 24px; text-align: center; cursor: pointer;
  transition: all var(--transition); position: relative; overflow: hidden;
}
.file-upload-area:hover, .file-upload-area.drag-over { border-color: var(--cyan); background: rgba(0,245,255,0.04); }
.file-upload-area input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.file-upload-icon { font-size: 1.8rem; color: var(--cyan); display: block; margin-bottom: 8px; opacity: 0.6; }
.file-upload-text { font-size: 0.8rem; color: var(--text-secondary); }
.file-upload-text small { color: var(--text-dim); font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; }
.file-name { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--cyan); margin-top: 8px; }

/* ===== TOOL BUTTONS ===== */
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tool-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; transition: all var(--transition); border: 1px solid;
  position: relative; overflow: hidden;
}
.tool-btn.primary  { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #000; border-color: transparent; box-shadow: 0 0 20px rgba(0,245,255,0.3); }
.tool-btn.primary:hover  { box-shadow: 0 0 30px rgba(0,245,255,0.5); transform: translateY(-1px); }
.tool-btn.copy-btn { background: rgba(176,96,255,0.1); border-color: rgba(176,96,255,0.3); color: var(--purple); }
.tool-btn.copy-btn:hover { background: rgba(176,96,255,0.2); box-shadow: var(--glow-purple); }
.tool-btn.dl-btn   { background: rgba(0,255,136,0.08); border-color: rgba(0,255,136,0.3); color: var(--green); }
.tool-btn.dl-btn:hover   { background: rgba(0,255,136,0.15); box-shadow: var(--glow-green); }
.tool-btn.clear-btn{ background: rgba(255,61,189,0.08); border-color: rgba(255,61,189,0.3); color: var(--pink); }
.tool-btn.clear-btn:hover{ background: rgba(255,61,189,0.15); box-shadow: var(--glow-pink); }
.tool-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ===== PREVIEW AREA ===== */
.preview-area {
  min-height: 300px; max-height: 480px; overflow-y: auto;
  background: rgba(0,0,0,0.2); border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border); margin-bottom: 14px;
}
.preview-area pre { margin: 0; border-radius: 0; }
.preview-area code { display: block; padding: 16px !important; font-size: 0.8rem !important; line-height: 1.6 !important; }
.preview-area .hljs { background: transparent; }

.preview-placeholder { display: flex; align-items: center; justify-content: center; height: 300px; }
.placeholder-inner   { text-align: center; }
.placeholder-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; }
.placeholder-text { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 6px; }
.placeholder-hint { color: rgba(232,234,246,0.2); font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; }

/* ===== HTML IFRAME ===== */
.html-iframe {
  width: 100%; height: 420px; border: none;
  border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
  background: #fff; margin-bottom: 14px;
}

/* ===== CONSOLE OUTPUT ===== */
.console-toolbar { display: flex; gap: 4px; margin-bottom: 12px; }
.console-tab-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px; font-size: 0.76rem; font-weight: 700;
  border: 1px solid var(--glass-border); background: var(--bg-card);
  color: var(--text-secondary); transition: all var(--transition);
}
.console-tab-btn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,245,255,0.08); }
.console-tab-btn:hover  { border-color: rgba(0,245,255,0.3); color: var(--cyan); }

.console-output {
  background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px;
}
.console-header { padding: 10px 16px; background: rgba(0,0,0,0.3); border-bottom: 1px solid var(--glass-border); font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; color: var(--cyan); display: flex; align-items: center; gap: 8px; }
.console-lines { padding: 12px; max-height: 300px; overflow-y: auto; font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; display: flex; flex-direction: column; gap: 4px; }
.console-line { display: flex; align-items: flex-start; gap: 10px; padding: 4px 8px; border-radius: 4px; }
.console-line.log   { color: var(--text-primary); }
.console-line.warn  { color: var(--yellow); background: rgba(255,230,0,0.05); }
.console-line.error { color: var(--pink);   background: rgba(255,61,189,0.05); }
.console-line.info  { color: var(--cyan); }
.console-prefix { color: var(--text-dim); flex-shrink: 0; }
.console-empty  { color: var(--text-dim); font-style: italic; padding: 8px; }

/* ===== STATUS ROW ===== */
.output-status-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.output-status-info { font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; color: var(--text-dim); }
.output-live-badge  { display: flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; color: var(--green); }

/* ===== LANGUAGE-SPECIFIC OUTPUT STYLES ===== */

/* JSON */
.json-output { padding: 16px; font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.json-key     { color: var(--cyan); }
.json-string  { color: var(--green); }
.json-number  { color: #f8c555; }
.json-boolean { color: var(--purple); }
.json-null    { color: var(--pink); }
.json-error   { color: var(--pink); padding: 16px; border: 1px solid rgba(255,61,189,0.2); border-radius: 8px; background: rgba(255,61,189,0.04); line-height: 1.6; }

/* Markdown */
.markdown-output { padding: 20px; line-height: 1.7; }
.markdown-output h1, .markdown-output h2, .markdown-output h3 { font-family: 'Orbitron', sans-serif; color: var(--cyan); margin: 1em 0 0.5em; }
.markdown-output h1 { font-size: 1.4rem; }
.markdown-output h2 { font-size: 1.15rem; }
.markdown-output h3 { font-size: 1rem; }
.markdown-output p  { color: var(--text-secondary); margin-bottom: 0.75em; }
.markdown-output code { background: rgba(0,245,255,0.08); border: 1px solid rgba(0,245,255,0.15); padding: 2px 6px; border-radius: 4px; font-family: 'Share Tech Mono', monospace; font-size: 0.82em; color: var(--cyan); }
.markdown-output pre { background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 8px; padding: 14px; margin: 12px 0; overflow-x: auto; }
.markdown-output pre code { background: none; border: none; padding: 0; color: var(--text-primary); }
.markdown-output blockquote { border-left: 3px solid var(--cyan); padding-left: 16px; margin: 12px 0; color: var(--text-dim); font-style: italic; }
.markdown-output ul, .markdown-output ol { margin: 0.5em 0 0.75em 1.5em; color: var(--text-secondary); }
.markdown-output li { margin-bottom: 0.25em; }
.markdown-output strong { color: var(--text-primary); font-weight: 700; }
.markdown-output em { color: var(--purple); }
.markdown-output a  { color: var(--cyan); text-decoration: underline; }
.markdown-output hr { border: none; border-top: 1px solid var(--glass-border); margin: 20px 0; }
.markdown-output table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.85rem; }
.markdown-output th { background: rgba(0,245,255,0.1); color: var(--cyan); padding: 8px 12px; text-align: left; border: 1px solid var(--glass-border); }
.markdown-output td { padding: 8px 12px; border: 1px solid var(--glass-border); color: var(--text-secondary); }

/* CSS preview */
.css-preview-wrap { padding: 16px; }
.css-preview-label { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.15em; margin-bottom: 10px; }
.css-preview-box { border: 1px solid var(--glass-border); border-radius: 8px; padding: 20px 24px; text-align: center; font-weight: 600; color: var(--text-primary); transition: all 0.5s ease; }

/* Bash terminal */
.bash-terminal { border-radius: var(--radius-sm); overflow: hidden; background: rgba(0,0,0,0.4); }
.bash-titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(60,60,60,0.8); }
.bash-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.bash-dot.red    { background: #ff5f57; }
.bash-dot.yellow { background: #febc2e; }
.bash-dot.green  { background: #28c840; }
.bash-titlebar-text { font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-left: 8px; }
.bash-body { padding: 16px; font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; }
.bash-prompt { color: var(--green); font-weight: bold; }
.bash-cmd    { color: var(--text-primary); }
.bash-output { display: block; margin: 8px 0; white-space: pre-wrap; line-height: 1.7; }
.bash-cursor { display: inline-block; width: 8px; height: 14px; background: var(--cyan); animation: blink 1s infinite; margin-left: 2px; vertical-align: middle; }