/* ========================================
   VSCode v1.104 - Custom Icons & UI
   絵文字を使わない専用アイコンシステム
   ======================================== */

/* 言語アイコン - SVGベース */
.lang-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Python */
.lang-icon.python {
    background: linear-gradient(135deg, #3572a5, #ffd43b);
}
.lang-icon.python::before {
    content: 'Py';
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* TypeScript */
.lang-icon.typescript {
    background: #3178c6;
}
.lang-icon.typescript::before {
    content: 'TS';
    color: white;
}

/* JavaScript */
.lang-icon.javascript {
    background: #f7df1e;
}
.lang-icon.javascript::before {
    content: 'JS';
    color: #000;
}

/* Rust */
.lang-icon.rust {
    background: #dea584;
}
.lang-icon.rust::before {
    content: 'Rs';
    color: #000;
}

/* Go */
.lang-icon.go {
    background: #00add8;
}
.lang-icon.go::before {
    content: 'Go';
    color: white;
}

/* C++ */
.lang-icon.cpp {
    background: #00599c;
}
.lang-icon.cpp::before {
    content: 'C+';
    color: white;
}

/* Java */
.lang-icon.java {
    background: #b07219;
}
.lang-icon.java::before {
    content: 'Jv';
    color: white;
}

/* Kotlin */
.lang-icon.kotlin {
    background: linear-gradient(135deg, #7f52ff, #c711e1);
}
.lang-icon.kotlin::before {
    content: 'Kt';
    color: white;
}

/* Swift */
.lang-icon.swift {
    background: #f05138;
}
.lang-icon.swift::before {
    content: 'Sw';
    color: white;
}

/* Haskell */
.lang-icon.haskell {
    background: #5e5086;
}
.lang-icon.haskell::before {
    content: 'Hs';
    color: white;
}

/* Zig */
.lang-icon.zig {
    background: #f7a41d;
}
.lang-icon.zig::before {
    content: 'Zg';
    color: #000;
}

/* PHP */
.lang-icon.php {
    background: #777bb4;
}
.lang-icon.php::before {
    content: 'Ph';
    color: white;
}

/* Lua */
.lang-icon.lua {
    background: #000080;
}
.lang-icon.lua::before {
    content: 'Lu';
    color: white;
}

/* Ruby */
.lang-icon.ruby {
    background: #cc342d;
}
.lang-icon.ruby::before {
    content: 'Rb';
    color: white;
}

/* JSON */
.lang-icon.json {
    background: #cbcb41;
}
.lang-icon.json::before {
    content: '{}';
    color: #000;
    font-size: 9px;
}

/* YAML */
.lang-icon.yaml {
    background: #cb171e;
}
.lang-icon.yaml::before {
    content: 'Ym';
    color: white;
}

/* Markdown */
.lang-icon.markdown {
    background: #083fa1;
}
.lang-icon.markdown::before {
    content: 'Md';
    color: white;
}

/* HTML */
.lang-icon.html {
    background: #e34c26;
}
.lang-icon.html::before {
    content: '<>';
    color: white;
    font-size: 9px;
}

/* CSS */
.lang-icon.css {
    background: #563d7c;
}
.lang-icon.css::before {
    content: '#';
    color: white;
}

/* Shell */
.lang-icon.shell {
    background: #89e051;
}
.lang-icon.shell::before {
    content: '$';
    color: #000;
}

/* Docker */
.lang-icon.docker {
    background: #384d54;
}
.lang-icon.docker::before {
    content: 'Dk';
    color: #0db7ed;
}

/* SQL */
.lang-icon.sql {
    background: #e38c00;
}
.lang-icon.sql::before {
    content: 'Sq';
    color: white;
}

/* ========================================
   拡張機能アイコン
   ======================================== */
.extension-icon-custom {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vscode-input-bg);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.extension-icon-custom::before {
    font-size: 20px;
    font-weight: 600;
}

/* Python Extension */
.ext-icon-python {
    background: linear-gradient(135deg, #3572a5 50%, #ffd43b 50%);
}
.ext-icon-python::before {
    content: 'Py';
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Rust Analyzer */
.ext-icon-rust {
    background: linear-gradient(135deg, #dea584, #b7410e);
}
.ext-icon-rust::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0,0,0,0.3);
    border-radius: 50%;
}

/* Go Extension */
.ext-icon-go {
    background: #00add8;
}
.ext-icon-go::before {
    content: 'Go';
    color: white;
    font-weight: 700;
}

/* GitLens */
.ext-icon-gitlens {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid #e94560;
}
.ext-icon-gitlens i {
    color: #e94560;
    font-size: 22px;
}

/* Prettier */
.ext-icon-prettier {
    background: #1a2b34;
}
.ext-icon-prettier::before {
    content: 'P';
    font-size: 24px;
    font-weight: 300;
    color: #56b3b4;
}

/* ESLint */
.ext-icon-eslint {
    background: #4b32c3;
}
.ext-icon-eslint::before {
    content: 'ES';
    color: white;
    font-weight: 600;
}

/* Quantum Development Kit */
.ext-icon-quantum {
    background: linear-gradient(135deg, #5c2d91, #0078d4);
}
.ext-icon-quantum::before {
    content: 'Q#';
    color: white;
    font-weight: 600;
}

/* Thunder Client */
.ext-icon-thunder {
    background: linear-gradient(135deg, #7e57c2, #512da8);
}
.ext-icon-thunder i {
    color: #ffd740;
    font-size: 22px;
}

/* Docker */
.ext-icon-docker {
    background: #0db7ed;
}
.ext-icon-docker i {
    color: white;
    font-size: 22px;
}

/* Remote SSH */
.ext-icon-remote {
    background: #0078d4;
}
.ext-icon-remote i {
    color: white;
    font-size: 20px;
}

/* GitHub Copilot */
.ext-icon-copilot {
    background: linear-gradient(135deg, #000, #1a1a2e);
    border: 1px solid #30363d;
}
.ext-icon-copilot i {
    color: white;
    font-size: 22px;
}

/* Live Share */
.ext-icon-liveshare {
    background: linear-gradient(135deg, #d62976, #fa7e1e);
}
.ext-icon-liveshare i {
    color: white;
    font-size: 20px;
}

/* ========================================
   ファイルツリーアイコン（SVG風）
   ======================================== */
.file-icon-svg {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* フォルダアイコン */
.folder-icon {
    color: #dcb67a;
}

.folder-icon.open {
    color: #e8c682;
}

.folder-icon.src { color: #6d8086; }
.folder-icon.test { color: #e37933; }
.folder-icon.docs { color: #519aba; }
.folder-icon.config { color: #6d8086; }
.folder-icon.scripts { color: #89e051; }
.folder-icon.github { color: #ffffff; }

/* ========================================
   ステータスバーアイコン
   ======================================== */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.status-icon.sync {
    animation: syncSpin 1s linear infinite;
}

@keyframes syncSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.status-icon.error { color: var(--vscode-error); }
.status-icon.warning { color: var(--vscode-warning); }
.status-icon.success { color: var(--vscode-success); }
.status-icon.info { color: var(--vscode-info); }

/* ========================================
   通知アイコン
   ======================================== */
.notification-icon-svg {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.notification-icon-svg.info {
    background: var(--vscode-info);
}

.notification-icon-svg.success {
    background: var(--vscode-success);
}

.notification-icon-svg.warning {
    background: var(--vscode-warning);
}

.notification-icon-svg.error {
    background: var(--vscode-error);
}

.notification-icon-svg i {
    color: white;
    font-size: 12px;
}

/* ========================================
   デバッグアイコン
   ======================================== */
.debug-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breakpoint-icon {
    width: 12px;
    height: 12px;
    background: #e51400;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(229, 20, 0, 0.5);
}

.breakpoint-icon.conditional {
    background: #e51400;
    position: relative;
}

.breakpoint-icon.conditional::after {
    content: '?';
    position: absolute;
    font-size: 8px;
    font-weight: bold;
    color: white;
}

.breakpoint-icon.logpoint {
    background: #e51400;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ========================================
   Git状態アイコン
   ======================================== */
.git-status-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
}

.git-status-icon.modified {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.git-status-icon.modified::before {
    content: 'M';
}

.git-status-icon.added {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.git-status-icon.added::before {
    content: 'A';
}

.git-status-icon.deleted {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.git-status-icon.deleted::before {
    content: 'D';
}

.git-status-icon.renamed {
    background: rgba(138, 43, 226, 0.2);
    color: #8a2be2;
}

.git-status-icon.renamed::before {
    content: 'R';
}

.git-status-icon.untracked {
    background: rgba(0, 122, 204, 0.2);
    color: #007acc;
}

.git-status-icon.untracked::before {
    content: 'U';
}

/* ========================================
   アクションボタン
   ======================================== */
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--vscode-text-secondary);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--vscode-text);
}

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

.action-btn.primary:hover {
    background: var(--vscode-accent-hover);
}

.action-btn.danger:hover {
    background: rgba(229, 20, 0, 0.2);
    color: #e51400;
}

/* ========================================
   バッジ
   ======================================== */
.badge-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
}

.badge-custom.info {
    background: var(--vscode-info);
    color: white;
}

.badge-custom.success {
    background: var(--vscode-success);
    color: white;
}

.badge-custom.warning {
    background: var(--vscode-warning);
    color: black;
}

.badge-custom.error {
    background: var(--vscode-error);
    color: white;
}

/* アクティビティバッジドット */
.badge-dot {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vscode-success);
    border: 2px solid var(--vscode-activity-bg);
}

.badge-dot.active {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.badge-dot.warning {
    background: var(--vscode-warning);
}

.badge-dot.error {
    background: var(--vscode-error);
}

/* ========================================
   プログレスバー
   ======================================== */
.progress-bar-custom {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vscode-accent), #40a9ff);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.progress-bar-fill.indeterminate {
    width: 30%;
    animation: indeterminateProgress 1.5s ease-in-out infinite;
}

@keyframes indeterminateProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ========================================
   スピナー
   ======================================== */
.spinner-custom {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: var(--vscode-accent);
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
}

@keyframes spinnerRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner-custom.small {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}

.spinner-custom.large {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* ========================================
   ツールチップ
   ======================================== */
.tooltip-custom {
    position: absolute;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--vscode-text);
    background: var(--vscode-sidebar-bg);
    border: 1px solid var(--vscode-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    pointer-events: none;
    white-space: nowrap;
    animation: tooltipFade 0.15s ease;
}

@keyframes tooltipFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tooltip-custom::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--vscode-border);
}

.tooltip-custom::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--vscode-sidebar-bg);
}