/*
 * KDE Plasma.css - 制作指示書（完全版）に基づくスタイルシート
 *
 * 1. 🎨 UI哲学（Plasma Breezeテーマの本質）
 *    KDE Plasma の Breeze UI は以下の思想で構成される：
 *    - 透明感（半透明＋ぼかし）
 *    - 柔らかい影（ふわっと広がる）
 *    - 控えめな角丸（4〜6px）
 *    - 青系アクセント（#3daee9）
 *    - 薄い境界線（1px、明度差の小さいグレー）
 *    - フラットだけど立体感のあるボタン
 *    CSSでは「透明・影・境界線の階層」を正確に再現することが重要。
 *
 * 15. 🧭 実装方針（KDE Plasma.cssの作り方）
 *    - 色と影のトークン化 → --accent, --border, --shadow など変数化
 *    - ウィンドウ → タイトルバー → ボタン の順で作る → Plasmaの“階層”を守る
 *    - 透明＋ぼかしを最初に決める → backdrop-filter の値がUIの雰囲気を決める
 *    - 影は広く・薄く
 */

:root {
    /*
     * 3. 🎨 色（Breezeテーマ準拠）
     *    - アクセント: #3daee9
     *    - ウィンドウ背景: rgba(255,255,255,0.85)
     *    - タイトルバー背景: rgba(255,255,255,0.6)
     *    - ボタン背景: #eff0f1
     *    - パネル背景: rgba(255,255,255,0.5)
     *    - 薄い境界線: #cfd3d6, #d7dbde (タイトルバー), #bfc4c6 (ボタン/入力欄)
     *    - 影の色: rgba(0,0,0,0.25)
     */
    --plasma-blue: #3daee9;
    --plasma-bg-window: rgba(255, 255, 255, 0.85);
    --plasma-bg-titlebar: rgba(255, 255, 255, 0.6);
    --plasma-bg-button: #eff0f1;
    --plasma-bg-panel: rgba(255, 255, 255, 0.5);
    --plasma-border-light: #cfd3d6;
    --plasma-border-titlebar: #d7dbde;
    --plasma-border-button: #bfc4c6;
    --plasma-border-btn-control: rgba(0, 0, 0, 0.2);
    /* For window control buttons */
    --plasma-text-dark: #232629;
    --plasma-shadow-color: rgba(0, 0, 0, 0.25);

    /* Radii */
    --plasma-radius-window: 6px;
    --plasma-radius-button: 4px;
    --plasma-radius-input: 4px;
    --plasma-radius-checkbox: 3px;

    /* Shadows */
    --plasma-box-shadow: 0 8px 24px var(--plasma-shadow-color);
}

/* Base styles for the desktop environment */
body {
    margin: 0;
    font-family: "Noto Sans", sans-serif;
}

/*
 * .desktop - デスクトップ背景
 * 指示書に特定の背景画像の指定がないため、KDE Plasmaテーマに合わせた青系統のグラデーションを使用。
 */
.desktop {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom right, #0057E7, #00BFFF);
    /* KDE Blue gradient */
    background-size: cover;
    display: flex;
    flex-direction: column;
    position: relative;
}

/*
 * 13. 🟦 パネル（Plasmaのタスクバー）
 *    - 背景: rgba(255,255,255,0.5)
 *    - ぼかし: backdrop-filter: blur(10px)
 *    - 上部境界線: border-top: 1px solid #d7dbde
 *    - パディング: 6px
 */
.panel {
    position: fixed;
    width: 100%;
    height: 40px;
    /* Typical panel height */
    background: var(--plasma-bg-panel);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--plasma-border-titlebar);
    color: var(--plasma-text-dark);
    /* Changed color for better contrast */
    display: flex;
    align-items: center;
    padding: 6px;
    /* Changed padding */
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
    /* Adjusted shadow for panel to be subtle */
    box-sizing: border-box;
    z-index: 1000;
}

.panel.bottom {
    bottom: 0;
}

/* Start menu button (KDE "K" icon) */
.start-menu-button {
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0057E7;
    /* KDE Blue */
    border-radius: var(--plasma-radius-button);
    /* 4px */
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.2s;
}

.start-menu-button:hover {
    background-color: #004ac9;
}

.start-menu-button .icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    /* Makes placeholder icon white */
}

/* Task Manager in Panel */
.task-manager {
    flex-grow: 1;
    display: flex;
    gap: 5px;
}

.task-item {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--plasma-radius-button);
    /* 4px */
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.2s;
}

.task-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.task-item.active {
    background-color: rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid var(--plasma-blue);
}

.task-item .icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

/* System Tray in Panel */
.system-tray {
    display: flex;
    align-items: center;
    gap: 10px;
}

.system-tray .icon {
    width: 16px;
    height: 16px;
}

.system-tray .time {
    padding: 5px 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--plasma-radius-button);
    /* 4px */
    font-size: 0.9em;
}

/*
 * 6. 🪟 ウィンドウ本体のCSS (.window)
 *    - 背景: rgba(255,255,255,0.85)
 *    - 境界線: 1px solid #cfd3d6
 *    - 角丸: 6px
 *    - 影: box-shadow: 0 8px 24px rgba(0,0,0,0.25)
 *    - ぼかし: backdrop-filter: blur(12px)
 *    - その他: overflow: hidden;
 */
.window {
    position: absolute;
    background: var(--plasma-bg-window);
    border: 1px solid var(--plasma-border-light);
    border-radius: var(--plasma-radius-window);
    box-shadow: var(--plasma-box-shadow);
    backdrop-filter: blur(12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    resize: both;
    /* Allow resizing (for demonstration, might need JS for real drag/resize) */
    min-width: 200px;
    min-height: 100px;
    z-index: 999;
}

/*
 * 7. 🟦 タイトルバー (.titlebar)
 *    - 白系の半透明: background: rgba(255,255,255,0.6)
 *    - 薄い境界線: border-bottom: 1px solid #d7dbde
 *    - パディング: 6px 10px
 *    - 配置: display: flex; align-items: center; gap: 8px;
 */
.title-bar {
    background: var(--plasma-bg-titlebar);
    border-bottom: 1px solid var(--plasma-border-titlebar);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: grab;
}

.title-bar-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--plasma-text-dark);
    font-size: 0.9em;
}

/*
 * 8. 🔵 ウィンドウボタン（Breeze風）
 *    - close: #da4453
 *    - maximize: #27ae60
 *    - minimize: #f39c12
 *    - スタイル: width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); display: inline-block;
 */
.title-bar-controls {
    display: flex;
    gap: 8px;
}

.title-bar-controls button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--plasma-border-btn-control);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.title-bar-controls button[aria-label="Close"] {
    background: #da4453;
}

.title-bar-controls button[aria-label="Maximize"] {
    background: #27ae60;
}

.title-bar-controls button[aria-label="Minimize"] {
    background: #f39c12;
}

/* コンテンツエリア */
.window-body {
    flex-grow: 1;
    padding: 15px;
    background-color: #ffffff;
    color: var(--plasma-text-dark);
    overflow: auto;
    border-bottom-left-radius: var(--plasma-radius-window);
    border-bottom-right-radius: var(--plasma-radius-window);
}

/* .content class support */
.window-body {
    padding: 10px;
}

/* コンソール（preタグ）スタイル */
.content pre {
    background-color: #282c34;
    color: #abb2bf;
    padding: 10px;
    border-radius: var(--plasma-radius-button);
    /* 4px */
    overflow-x: auto;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/*
 * 9. 🟦 ボタン（Breezeボタンの質感）
 */
button {
    background: var(--plasma-bg-button);
    border: 1px solid var(--plasma-border-button);
    border-radius: var(--plasma-radius-button);
    padding: 6px 16px;
    color: var(--plasma-text-dark);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    margin: 2px;
}

button:hover {
    background: #f7f8f9;
    border-color: var(--plasma-blue);
}

button:active {
    background: #e5e6e7;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

button.default {
    background: var(--plasma-blue);
    color: white;
    border-color: var(--plasma-blue);
    font-weight: bold;
}

button.default:hover {
    filter: brightness(1.1);
}

button:disabled {
    opacity: 0.5;
    cursor: default;
    background: #eff0f1;
    border-color: #cfd3d6;
}

/*
 * 10. 🟦 入力欄（Breeze Input）
 */
input[type="text"] {
    background: #ffffff;
    border: 1px solid var(--plasma-border-button);
    border-radius: var(--plasma-radius-input);
    padding: 6px 10px;
    color: var(--plasma-text-dark);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
}

input[type="text"]:focus {
    border-color: var(--plasma-blue);
    box-shadow: 0 0 0 2px rgba(61, 174, 233, 0.3);
    outline: none;
}

/*
 * 11. 🟦 チェックボックス & ラジオボタン
 */
fieldset {
    border: 1px solid var(--plasma-border-light);
    border-radius: var(--plasma-radius-window);
    padding: 15px;
    margin: 10px 0;
}

legend {
    color: var(--plasma-text-dark);
    font-weight: bold;
    padding: 0 10px;
    font-size: 0.9em;
}

label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    color: var(--plasma-text-dark);
    font-size: 14px;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid var(--plasma-border-button);
    border-radius: var(--plasma-radius-checkbox);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--plasma-blue);
    border-color: var(--plasma-blue);
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/*
 * 12. 🟦 プログレスバー
 *    - スタイル: background: #e5e6e7; border-radius: 4px; overflow: hidden;
 *    - バー: height: 100%; background: #3daee9; width: 50%;
 */
.progress {
    background: #e5e6e7;
    border-radius: var(--plasma-radius-button);
    /* 4px */
    overflow: hidden;
    height: 8px;
    /* Added a default height */
    margin-top: 15px;
    /* Add some spacing */
}

.progress .bar {
    height: 100%;
    background: var(--plasma-blue);
    /* #3daee9 */
    transition: width 0.5s ease-in-out;
}

/*
 * ラジオボタン (.radio-container, .radiomark)
 * チェックボックスと同様の哲学を適用し、丸い形状にする。
 */
.radio-container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--plasma-text-dark);
}

.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radiomark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background: #fff;
    border: 1px solid var(--plasma-border-button);
    border-radius: 50%;
    /* Make it round */
}

.radio-container:hover input~.radiomark {
    background-color: #f0f0f0;
}

.radio-container input:checked~.radiomark {
    background: var(--plasma-blue);
    border-color: var(--plasma-blue);
}

.radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio-container input:checked~.radiomark:after {
    display: block;
}

.radio-container .radiomark:after {
    top: 5px;
    left: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/*
 * スライダー (.slider)
 * デフォルトのスタイルをリセットし、KDE Plasma風のシンプルなデザインを適用。
 * つまみ（thumb）を丸く青色にする。
 */
.slider {
    appearance: none;
    -webkit-appearance: none;
    /* Override default look */
    width: 100%;
    /* Full-width */
    height: 8px;
    /* Specified height */
    background: #d3d3d3;
    /* Grey background */
    outline: none;
    /* Remove outline */
    opacity: 0.7;
    /* Set transparency (for demo) */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    border-radius: var(--plasma-radius-button);
    margin-top: 10px;
    margin-bottom: 10px;
}

.slider:hover {
    opacity: 1;
    /* Fully opaque on hover */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    width: 16px;
    /* Set a specific slider handle width */
    height: 16px;
    /* Slider handle height */
    border-radius: 50%;
    /* Round handle */
    background: var(--plasma-blue);
    /* Blue handle */
    cursor: pointer;
    /* Cursor on hover */
    border: 1px solid var(--plasma-border-light);
}

.slider::-moz-range-thumb {
    width: 16px;
    /* Set a specific slider handle width */
    height: 16px;
    /* Slider handle height */
    border-radius: 50%;
    /* Round handle */
    background: var(--plasma-blue);
    /* Blue handle */
    cursor: pointer;
    /* Cursor on hover */
    border: 1px solid var(--plasma-border-light);
}

/*
 * メニュー (.menu-container, .menu, .menu-item, .menu-separator)
 * ウィンドウと同様の透明感、影、角丸を適用し、シンプルなドロップダウンメニューを再現。
 */
.menu-container {
    position: relative;
    display: inline-block;
    margin-top: 15px;
    margin-right: 15px;
}

.menu {
    display: none;
    /* Hidden by default */
    position: absolute;
    background: var(--plasma-bg-window);
    min-width: 160px;
    box-shadow: var(--plasma-box-shadow);
    border-radius: var(--plasma-radius-button);
    border: 1px solid var(--plasma-border-light);
    z-index: 1;
    overflow: hidden;
    left: 0;
    top: 100%;
    margin-top: 5px;
    backdrop-filter: blur(8px);
    /* Slightly less blur than window */
}

.menu-container:hover .menu {
    display: block;
    /* Show the menu on hover */
}

.menu-item {
    color: var(--plasma-text-dark);
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: background-color 0.2s;
}

.menu-item:hover {
    background-color: var(--plasma-blue);
    color: white;
}

.menu-separator {
    height: 1px;
    background-color: var(--plasma-border-light);
    margin: 5px 0;
}

/*
 * ツールチップ (.tooltip-container, .tooltip-text)
 * シンプルなホバーツールチップを再現。半透明の背景と角丸を適用。
 */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dotted var(--plasma-text-dark);
    /* Optional: dotted underline for tooltip trigger */
    color: var(--plasma-text-dark);
}

.tooltip-text {
    visibility: hidden;
    width: 160px;
    background-color: rgba(50, 50, 50, 0.9);
    /* Dark semi-transparent background */
    color: #fff;
    text-align: center;
    border-radius: var(--plasma-radius-button);
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    /* Position the tooltip above the text */
    left: 50%;
    margin-left: -80px;
    /* Use half the width to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(50, 50, 50, 0.9) transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/*
 * タブ (.tab-container, .tab-bar, .tab-item, .tab-content)
 * シンプルなタブインターフェースを再現。アクティブなタブが強調表示されます。
 */
.tab-container {
    margin-top: 15px;
    border: 1px solid var(--plasma-border-light);
    border-radius: var(--plasma-radius-window);
    overflow: hidden;
    background: var(--plasma-bg-window);
    backdrop-filter: blur(8px);
}

.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--plasma-border-light);
}

.tab-item {
    padding: 8px 15px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-right: 1px solid var(--plasma-border-light);
    color: var(--plasma-text-dark);
    transition: background-color 0.2s, color 0.2s;
    outline: none;
}

.tab-item:last-child {
    border-right: none;
}

.tab-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.tab-item.active {
    background: var(--plasma-blue);
    color: white;
    border-bottom: 2px solid var(--plasma-blue);
    /* Visual indicator */
    position: relative;
    top: 1px;
}

.tab-content {
    padding: 15px;
    color: var(--plasma-text-dark);
}

/*
 * リストビュー (.list-view, .list-item)
 * シンプルなリスト表示コンポーネントです。アクティブなアイテムは青色で強調表示されます。
 */
.list-view {
    border: 1px solid var(--plasma-border-light);
    border-radius: var(--plasma-radius-window);
    overflow: hidden;
    background: var(--plasma-bg-window);
    backdrop-filter: blur(8px);
    margin-top: 15px;
}

.list-item {
    padding: 8px 12px;
    color: var(--plasma-text-dark);
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Very light separator */
    transition: background-color 0.2s;
}

.list-item:last-child {
    border-bottom: none;
}

.list-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.list-item.active {
    background: var(--plasma-blue);
    color: white;
}

/*
 * スクロールバー (WebKit browsers)
 * WebKit系のブラウザ向けにスクロールバーのスタイルをKDE Plasma風にカスタマイズ。
 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
}

/* Dialog Box (Modal) styles */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    /* Above all other content */
}

.dialog-box {
    background: var(--plasma-bg-window);
    border: 1px solid var(--plasma-border-light);
    border-radius: var(--plasma-radius-window);
    box-shadow: var(--plasma-box-shadow);
    backdrop-filter: blur(12px);
    width: 400px;
    max-width: 90vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dialog-header {
    background: var(--plasma-bg-titlebar);
    border-bottom: 1px solid var(--plasma-border-titlebar);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    color: var(--plasma-text-dark);
}

.dialog-header .dialog-title {
    flex-grow: 1;
}

.dialog-header .btn.close {
    /* Reuse window close button style */
    background: #da4453;
    width: 18px;
    /* Slightly smaller */
    height: 18px;
    position: relative;
}

.dialog-header .btn.close::before {
    content: '✕';
    color: white;
    font-size: 0.7em;
    transform: rotate(0deg);
    /* No rotation for dialog close */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.dialog-content {
    padding: 15px;
    color: var(--plasma-text-dark);
    flex-grow: 1;
}

.dialog-footer {
    border-top: 1px solid var(--plasma-border-light);
    padding: 10px 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: #f0f0f0;
    /* Lighter background for footer */
}

/* Toast Notifications styles */
.toast-container {
    position: fixed;
    z-index: 3000;
    /* Above dialogs */
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast-container.top-right {
    top: 0;
    right: 0;
    align-items: flex-end;
}

.toast-message {
    background: rgba(50, 50, 50, 0.9);
    /* Dark semi-transparent */
    color: white;
    border-radius: var(--plasma-radius-button);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
    /* Example animation */
}

.toast-message .btn.close {
    background: transparent;
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    font-size: 1.2em;
    cursor: pointer;
    transition: color 0.2s;
}

.toast-message .btn.close::before {
    content: '✕';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8em;
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Spinner styles */
.spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border-top-color: var(--plasma-blue);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    margin: 15px;
    /* Adjust spacing */
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}