"""
ALASKA Task Monitor CSS Styles
Separated for maintainability
Supports dark/light theme switching
"""

MONITOR_CSS = '''
/* Theme variables */
:root {
  --bg-main: #1a1a1a;
  --bg-header: #252525;
  --bg-sidebar: #252525;
  --bg-content: #2d2d2d;
  --bg-hover: #333;
  --bg-input: #383838;
  --border-color: #444;
  --text-primary: #e0e0e0;
  --text-secondary: #9e9e9e;
  --text-accent: #4fc3f7;
  --text-accent2: #81d4fa;
  --text-warn: #ffcc80;
  --row-even: #383838;
  --row-hover: #424242;
  --tree-bg: #2d2d2d;
}

[data-theme="light"] {
  --bg-main: #f5f5f5;
  --bg-header: #fff;
  --bg-sidebar: #fafafa;
  --bg-content: #fff;
  --bg-hover: #e0e0e0;
  --bg-input: #f0f0f0;
  --border-color: #ddd;
  --text-primary: #333;
  --text-secondary: #666;
  --text-accent: #0288d1;
  --text-accent2: #0277bd;
  --text-warn: #e65100;
  --row-even: #f9f9f9;
  --row-hover: #e8e8e8;
  --tree-bg: #fff;
}

*{box-sizing:border-box}
body{font-family:sans-serif;margin:0;background:var(--bg-main);color:var(--text-primary);display:flex;flex-direction:column;height:100vh;transition:background 0.2s,color 0.2s}
.header{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--bg-header);border-bottom:1px solid var(--border-color)}
h1{color:var(--text-accent);margin:0;font-size:18px;white-space:nowrap}
.app-info{color:var(--text-warn);font-weight:normal}
.header-info{color:var(--text-secondary);font-size:12px}
.refresh-ctrl{display:flex;align-items:center;gap:8px;margin-left:auto}
.refresh-ctrl label{color:var(--text-secondary);font-size:12px}
.refresh-ctrl input[type="checkbox"]{width:14px;height:14px;cursor:pointer}
.refresh-ctrl select{background:var(--bg-content);color:var(--text-primary);border:1px solid var(--border-color);padding:3px 6px;border-radius:4px;cursor:pointer;font-size:11px}
.btn-theme{background:var(--bg-content);color:var(--text-primary);border:1px solid var(--border-color);padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px}
.btn-theme:hover{background:var(--bg-hover)}
.btn-clear{background:#d32f2f;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px}
.btn-clear:hover{background:#b71c1c}
.btn-refresh{background:#0288d1;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px}
.btn-refresh:hover{background:#0277bd}
.main-container{display:flex;flex:1;overflow:hidden}
.sidebar{width:200px;background:var(--bg-sidebar);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:width 0.2s}
.sidebar.collapsed{width:48px}
.sidebar-toggle{background:var(--bg-hover);border:none;color:var(--text-secondary);padding:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color);margin-top:auto}
.sidebar-toggle:hover{background:var(--bg-input);color:var(--text-primary)}
.sidebar-toggle svg{width:18px;height:18px}
.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)}
.sidebar-debug{display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(90deg,#ff6b0033,#ff9800 33);border-top:1px solid #ff9800;color:#ffb74d;font-size:11px;font-weight:bold}
.sidebar-debug .debug-icon{font-size:14px}
.sidebar-debug .debug-text{letter-spacing:1px}
.sidebar.collapsed .sidebar-debug .debug-text{display:none}
.sidebar.collapsed .sidebar-debug{justify-content:center}
.sidebar-nav{flex:1;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--text-secondary);cursor:pointer;border-left:3px solid transparent;transition:all 0.15s}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.active{background:#0288d1;color:#fff;border-left-color:#4fc3f7}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item span{white-space:nowrap;overflow:hidden;font-size:13px}
.sidebar.collapsed .nav-item span{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:12px}
.sidebar-logo{padding:16px 12px;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;gap:10px}
.sidebar-logo img{height:40px;opacity:0.9}
.sidebar.collapsed .sidebar-logo img{height:28px}
.sidebar-logo-text{text-align:center;line-height:1.4}
.sidebar-logo-title{color:var(--text-accent);font-size:16px;font-weight:bold}
.sidebar-logo-sub{color:var(--text-secondary);font-size:12px}
.sidebar.collapsed .sidebar-logo-text{display:none}
.content-area{flex:1;overflow:auto;padding:16px}
.panel{display:none;width:100%}
.panel.active{display:block;width:100%}
table{border-collapse:collapse;width:100%;background:var(--bg-content);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
th,td{border:1px solid var(--border-color);padding:10px;text-align:left;font-size:13px}
th{background:#0288d1;color:#fff}
#logs-table td{padding:4px 8px;line-height:1.2}
tr:nth-child(even){background:var(--row-even)}
tr:hover{background:var(--row-hover)}
.running{color:#4caf50;font-weight:bold}
.stopped{color:#f44336;font-weight:bold}
.num{text-align:right;font-family:monospace;color:var(--text-secondary)}
.fail{color:#f44336}
.warn{color:#ff9800}
.cpu-bar{background:var(--border-color);border-radius:4px;height:20px;overflow:hidden}
.cpu-bar-fill{height:100%;transition:width 0.3s}
.cpu-low{background:#4caf50}
.cpu-mid{background:#ff9800}
.cpu-high{background:#f44336}
.config-input{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color);padding:6px 10px;border-radius:4px;width:150px}
.btn-save{background:#4caf50;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer}
.btn-save:hover{background:#388e3c}
.msg{padding:4px 8px;border-radius:4px;font-size:12px}
.msg-ok{background:#4caf50;color:#fff}
.msg-err{background:#f44336;color:#fff}
.gconfig-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;background:var(--bg-content);border-radius:4px}
.gconfig-header span{color:var(--text-accent2);font-family:monospace}
.btn-expand,.btn-collapse{background:var(--bg-hover);color:var(--text-primary);border:none;padding:6px 12px;border-radius:4px;cursor:pointer}
.btn-expand:hover,.btn-collapse:hover{background:var(--bg-input)}
.tree-container{background:var(--tree-bg);padding:16px;border-radius:4px;font-family:monospace;font-size:14px;line-height:1.6}
.tree-node{margin-left:20px}
.tree-key{color:var(--text-accent2)}
.tree-key-0{color:#ff7043}
.tree-key-1{color:#42a5f5}
.tree-key-2{color:#66bb6a}
.tree-key-3{color:#ab47bc}
.tree-key-4{color:#ffa726}
.tree-val-str{color:#388e3c}
.tree-val-num{color:#e65100}
.tree-val-bool{color:#c62828}
.tree-val-null{color:var(--text-secondary)}
.tree-toggle{cursor:pointer;user-select:none;display:inline-block;width:16px;color:#ff9800}
.tree-toggle:hover{color:#ffcc80}
.tree-bracket{color:var(--text-secondary)}
.tree-collapsed>.tree-node{display:none}
.tree-collapsed>.tree-toggle::before{content:'▶'}
.tree-expanded>.tree-toggle::before{content:'▼'}
.tree-val-edit{cursor:pointer;padding:2px 4px;border-radius:3px}
.tree-val-edit:hover{background:var(--bg-hover)}
.tree-edit-input{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--text-accent);padding:2px 6px;border-radius:3px;font-family:monospace;font-size:14px;min-width:100px}
.tree-edit-msg{font-size:11px;margin-left:8px}
.gconfig-warning{margin-left:auto;background:#fff3e0;color:#e65100;padding:6px 12px;border-radius:4px;font-size:12px}
.gconfig-body{display:flex;gap:16px;height:calc(100vh - 200px);min-height:400px}
.gconfig-tree-wrap{flex:1;min-width:0;overflow-y:auto}
.value-setter{flex:1;min-width:0;background:var(--bg-content);padding:16px;border-radius:4px;height:fit-content;align-self:flex-start}
.value-setter h3{margin:0 0 16px 0;color:var(--text-accent2);font-size:14px;border-bottom:1px solid var(--border-color);padding-bottom:8px}
.value-setter-empty{color:var(--text-secondary);font-size:13px}
.setter-row{margin-bottom:12px}
.setter-label{color:var(--text-secondary);font-size:12px;margin-bottom:4px}
.setter-path{color:var(--text-accent2);font-family:monospace;font-size:13px;word-break:break-all;background:var(--bg-input);padding:8px;border-radius:4px}
.setter-input{width:100%;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color);padding:8px;border-radius:4px;font-family:monospace;font-size:13px;box-sizing:border-box}
.setter-input:focus{border-color:var(--text-accent);outline:none}
.setter-type{color:var(--text-secondary);font-size:11px;margin-top:4px}
.btn-change{background:#4caf50;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;width:100%;margin-top:8px;font-size:14px}
.btn-change:hover{background:#388e3c}
.setter-msg{margin-top:8px;padding:6px;border-radius:4px;font-size:12px;text-align:center}
.setter-msg-ok{background:#4caf50;color:#fff}
.setter-msg-err{background:#f44336;color:#fff}
.setter-rmi-notice{background:#e3f2fd;color:#1565c0;padding:8px 12px;border-radius:4px;font-size:12px;margin-bottom:12px;border-left:3px solid #2196f3}
.tree-val-edit.selected{background:#0288d1;color:#fff;border-radius:3px}
.theme-toggle{position:relative;display:inline-block;width:50px;height:26px}
.theme-toggle input{opacity:0;width:0;height:0}
.theme-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#555;transition:.3s;border-radius:26px}
.theme-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%}
.theme-toggle input:checked+.theme-slider{background:#0288d1}
.theme-toggle input:checked+.theme-slider:before{transform:translateX(24px)}
.nav-category{padding:8px 12px;color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;border-bottom:1px solid var(--border-color)}
.nav-category:hover{color:var(--text-primary);background:var(--bg-hover)}
.nav-category-icon{font-size:10px;transition:transform 0.2s}
.nav-category.collapsed .nav-category-icon{transform:rotate(-90deg)}
.nav-category.collapsed+.nav-group{display:none}
.nav-group{border-bottom:1px solid var(--border-color)}
.nav-group .nav-item{padding-left:24px}
.sidebar.collapsed .nav-category span{display:none}
.sidebar.collapsed .nav-category{justify-content:center;padding:8px}
.sidebar.collapsed .nav-category-icon{display:none}
.sidebar.collapsed .nav-group .nav-item{padding-left:12px}
.panel-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-color);margin-bottom:16px}
.panel-tab{padding:10px 20px;cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;transition:all 0.15s}
.panel-tab:hover{color:var(--text-primary);background:var(--bg-hover)}
.panel-tab.active{color:var(--text-accent);border-bottom-color:var(--text-accent)}
.tab-content{display:none;width:100%}
.tab-content.active{display:block;width:100%}
'''
