:root{--bg:#0f1115;--card:#151924;--text:#e8e8e8;--muted:#a0a7b5;--line:#2a3142;--accent:#6aa2ff;--danger:#ff6a6a;}

/* Phase 6: Widget theme variables */
body[data-theme="default"]{
  --widget-border:#ffffff;
  --widget-bg:#e9ecef;
  --widget-text:#111111;
}
body[data-theme="notebook"]{
  --widget-border:#8ec5ff;
  --widget-bg:#b5d9ff;
  --widget-text:#0b2545;
}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:var(--bg);color:var(--text)}

/* Global top bar (Home icon left, Settings icon right) */
.topbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:rgba(15,17,21,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:20}
.topbar-left{display:flex;align-items:center;gap:10px}
.home-icon{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.home-icon:hover{background:rgba(255,255,255,.08)}
.topbar-center{flex:1;display:flex;justify-content:center}
.topbar-title{font-weight:700}
.brand{font-weight:800;letter-spacing:.2px}
.topbar-right{display:flex;align-items:center;gap:10px;position:relative}
.iconbtn{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{background:rgba(255,255,255,.08)}
.icon{font-size:18px;line-height:1}

/* Dropdown */
.dropdown{position:absolute;right:0;top:44px;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px rgba(0,0,0,.35);overflow:hidden}
.dropdown-head{padding:10px 12px;border-bottom:1px solid var(--line)}
.dropdown-user{font-weight:700;color:var(--text)}
.dropdown-row{padding:10px 12px}
.dropdown-item{display:block;padding:10px 12px;color:var(--text);text-decoration:none;border-top:1px solid var(--line)}
.dropdown-item:hover{background:rgba(255,255,255,.04)}
.dropdown-item.danger{color:var(--danger)}

/* Toggle */
.toggle{display:flex;gap:10px;align-items:center;user-select:none}
.toggle input{display:none}
.toggle-ui{width:42px;height:24px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);position:relative;flex:0 0 auto}
.toggle-ui::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text);opacity:.85;transition:transform .18s ease}
.toggle input:checked + .toggle-ui{background:rgba(106,162,255,.22);border-color:rgba(106,162,255,.5)}
.toggle input:checked + .toggle-ui::after{transform:translateX(18px)}
.toggle-label{color:var(--muted);font-weight:600}
.container{max-width:1100px;margin:0 auto;padding:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin:14px 0}
.h1{font-size:20px;margin:0 0 10px 0}
.muted{color:var(--muted);margin-top:10px}
label{display:block;margin:10px 0 6px;color:var(--muted)}
input,textarea,select{width:100%;padding:10px;border-radius:12px;border:1px solid var(--line);background:#0b0d12;color:var(--text)}
textarea{min-height:150px;resize:vertical}
.btn{display:inline-block;border:1px solid var(--line);background:var(--accent);color:#081018;padding:10px 12px;border-radius:12px;font-weight:700;cursor:pointer}
.btn.secondary{background:transparent;color:var(--text)}
.btn.danger{background:var(--danger);color:#140606}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.checkbox{display:flex;gap:8px;align-items:center;color:var(--muted)}
.alert{background:rgba(255,106,106,.12);border:1px solid rgba(255,106,106,.35);padding:10px;border-radius:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table a{color:var(--accent);text-decoration:none}
.pill{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}

/* Dashboard grid */
.grid-wrap{display:flex;gap:14px;flex-wrap:wrap}
.grid-controls{flex:1;min-width:260px}
.grid-stage{flex:2;min-width:320px}
.grid{position:relative;width:100%;aspect-ratio:1/1;max-width:650px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.01));overflow:hidden}
.grid::before{content:'';position:absolute;inset:0;background-image:
  linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:calc(100%/16) calc(100%/16);
  pointer-events:none;
}
.widget{position:absolute;border:1px solid var(--widget-border, rgba(255,255,255,.12));background:var(--widget-bg, rgba(255,255,255,.06));color:var(--widget-text, var(--text));border-radius:18px;overflow:hidden;touch-action:none}
.widget button{width:100%;height:100%;border:0;background:transparent;color:var(--text);font-weight:800;font-size:14px;cursor:pointer}
.widget .dot{position:absolute;right:8px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--danger);display:none}
.widget.attn .dot{display:block}
.widget .handle{position:absolute;width:18px;height:18px;right:2px;bottom:2px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.3);cursor:nwse-resize}

/* Candidate notification dot */
.name-dot{display:flex;gap:8px;align-items:center}
.name-dot .dot{width:10px;height:10px;border-radius:50%;background:var(--danger)}

/* Journal lined */
.lined{
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 28px);
  line-height:28px;
  padding:14px;
}


.kv{display:flex;gap:12px;margin:8px 0}
.kv .k{width:90px;opacity:.75}
.kv .v{flex:1;word-break:break-word}


/* Widget previews */
.widget-body{ margin-top:6px; font-size:clamp(10px, 2.2vw, 14px); line-height:1.2; overflow:hidden; }
.w-big{ font-size:clamp(18px, 4.6vw, 28px); font-weight:800; line-height:1.05; }
.w-muted{ opacity:.75; font-size:clamp(10px, 2.0vw, 13px); }
.w-list{ margin-top:6px; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.w-item{ display:flex; gap:6px; align-items:baseline; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w-when{ opacity:.75; font-size:clamp(10px, 1.9vw, 12px); flex:0 0 auto; }
.w-text{ overflow:hidden; text-overflow:ellipsis; }
.w-tag{ font-size:10px; padding:1px 6px; border:1px solid rgba(0,0,0,.15); border-radius:999px; opacity:.8; flex:0 0 auto; }
.w-lines{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; }

/* Placement ghost */
body.placing .grid{ cursor:crosshair; }
.ghost{ position:absolute; pointer-events:none; border:2px dashed rgba(0,0,0,.35); border-radius:10px; background:rgba(0,0,0,.06); z-index:5; }
.ghost.bad{ border-color:rgba(200,0,0,.55); background:rgba(200,0,0,.08); }

/* Delete X hidden unless delete-mode */
.widget .delx{ position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:999px; border:0; background:rgba(200,0,0,.92); color:#fff; font-size:18px; line-height:28px; display:none; }
.widget.delete-mode .delx{ display:block; }

/* Resize handle only in edit mode */
.widget .resize{ display:none; }
body.edit-mode .widget .resize{ display:block; position:absolute; right:6px; bottom:6px; width:18px; height:18px; border-radius:4px; background:rgba(0,0,0,.18); cursor:nwse-resize; }

/* Prevent weird selection */
.widget, .widget *{ user-select:none; -webkit-user-select:none; }


/* Dashboard full-screen grid under topbar (no topbar changes) */
.dashboard-full{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:-14px;
  margin-bottom:-14px;
  height:calc(100vh - 56px);
}
.dashboard-full .grid{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  max-width:none;
  border-radius:0;
}
.grid-fabs{position:absolute; inset:0;}
.grid-fab{
  pointer-events:auto;
  position:absolute;
  right:0;
  width:calc((100%/16)*4);
  height:calc((100%/16)*4);
  border:1px solid var(--line);
  background:rgba(15,17,21,.85);
  color:var(--text);
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:6;
}
.grid-fab#gridAddBtn{top:0}
.grid-fab#gridEditBtn{top:calc((100%/16)*4)}
.grid-add-menu{
  pointer-events:auto;
  position:absolute;
  right:calc((100%/16)*4 + 8px);
  top:8px;
  z-index:7;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
  min-width:180px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  max-height:60vh;
  overflow:auto;
}
.grid-add-item{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  border-radius:10px;
  cursor:pointer;
}
.grid-add-item:hover{background:rgba(255,255,255,.06)}

/* Top palette for Add Widgets (drag out to grid) */
.grid-palette{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:120px;
  z-index:8;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  margin:8px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.grid-palette[hidden]{ display:none !important; }
.palette-item{
  flex:0 0 auto;
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:12px;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.palette-item:active{ cursor:grabbing; transform:scale(.98); }