/* ================================================================
   StudentOS — patches14.css  v4  (small, surgical)
   ================================================================ */

/* 1. SIDEBAR SEARCH — exact match to .nav-btn (44×44, r:12) */
#p14-nav-search {
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none;
    color:var(--text-muted); cursor:pointer;
    transition:all .2s; padding:0; flex-shrink:0; position:relative;
}
#p14-nav-search:hover { color:var(--text-main); background:var(--glass-hover); }
#p14-nav-search i { font-size:1.2rem; line-height:1; }
#p14-nav-search:hover::after {
    content:'Search'; position:absolute; left:56px;
    background:var(--glass-panel); backdrop-filter:blur(10px);
    border:var(--glass-border); padding:4px 10px; border-radius:6px;
    font-size:11px; color:var(--text-main); white-space:nowrap; z-index:50;
    font-weight:500; animation:fadeIn .15s;
}
#p12-nav-search { display:none !important; }

/* 2. AVATAR PREVIEW — large in settings */
#p10-avatar-preview-tab, .p10-avatar-display {
    width:96px !important; height:96px !important;
    border-radius:22px !important; overflow:hidden !important;
    flex-shrink:0 !important; font-size:2.6rem !important;
}
#avatar-preview {
    width:96px !important; height:96px !important;
    border-radius:22px !important; overflow:hidden !important;
    font-size:2.6rem !important;
}

/* 3. FORUM REPLY SPACING */
.sr-thread { gap:0 !important; }
.sr-reply  { margin-bottom:8px !important; }
.sr-card   { padding:13px 16px !important; border-radius:14px !important; }
.sr-header { margin-bottom:8px !important; }
.sr-children { gap:0 !important; margin-top:6px !important; }
.sr-children > .sr-reply { margin-bottom:6px !important; }

/* 4. TASK DRAG — handle always slightly visible */
.task-drag-handle {
    display:flex; align-items:center; justify-content:center;
    width:18px; flex-shrink:0;
    color:var(--text-muted); opacity:0.18;
    cursor:grab; font-size:.72rem; transition:opacity .15s; padding:0 2px;
}
.task-row:hover .task-drag-handle { opacity:.55; }
.task-drag-handle:hover  { opacity:1 !important; color:var(--accent); }
.task-drag-handle:active { cursor:grabbing; }
.task-row.p14-dragging  { opacity:.4 !important; background:color-mix(in srgb,var(--accent) 7%,transparent) !important; }
.task-row.p14-drag-over { background:color-mix(in srgb,var(--accent) 11%,transparent) !important; border-bottom-color:var(--accent) !important; }

/* 5. HABITS WIDGET */
#widget-habits .habit-inner { display:flex; flex-direction:column; gap:10px; }
.p14-hstats { display:flex; gap:6px; }
.p14-hstat  { flex:1; padding:9px 10px; border-radius:10px; display:flex; flex-direction:column; gap:2px; background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 16%,transparent); }
.p14-hnum   { font-size:1.3rem; font-weight:800; color:var(--accent); letter-spacing:-.04em; line-height:1; }
.p14-hlbl   { font-size:.58rem; color:var(--text-muted); font-weight:600; }
.p14-hweek  { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.p14-hwcol  { display:flex; flex-direction:column; align-items:center; gap:3px; }
.p14-hwlbl  { font-size:.55rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; }
.p14-hwdot  { width:100%; aspect-ratio:1; border-radius:5px; background:var(--glass-hover); border:1px solid rgba(255,255,255,.06); transition:all .2s; }
.p14-hwdot.done   { background:var(--accent); border-color:transparent; box-shadow:0 2px 5px color-mix(in srgb,var(--accent) 30%,transparent); }
.p14-hwdot.today  { border:2px solid var(--accent) !important; }
.p14-hwdot.done.today { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),0 2px 5px color-mix(in srgb,var(--accent) 30%,transparent); }
.p14-hprog { display:flex; align-items:center; gap:8px; }
.p14-htrack{ flex:1; height:4px; border-radius:99px; background:var(--glass-hover); overflow:hidden; }
.p14-hfill { height:100%; border-radius:99px; background:var(--accent); transition:width .4s; }
.p14-hplbl { font-size:.62rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.p14-hbtn  { width:100%; padding:9px; border-radius:10px; background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); color:var(--accent); font-size:.78rem; font-weight:700; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:6px; }
.p14-hbtn:hover:not(:disabled) { background:var(--accent); color:#fff; border-color:transparent; transform:translateY(-1px); }
.p14-hbtn.done { background:rgba(34,197,94,.09); border-color:rgba(34,197,94,.2); color:#22c55e; cursor:default; }
.p14-hbtn.done:hover { transform:none; }
[data-theme="light"] .p14-hwdot { background:rgba(0,0,0,.08); }
[data-theme="light"] .p14-hstat { background:color-mix(in srgb,var(--accent) 5%,#fff); }


/* 7. MOBILE NAV */
@media (max-width:768px) {
    .mob-nav-btn.active::before { content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:16px; height:3px; background:var(--accent); border-radius:99px; }
    #mobile-nav { background:color-mix(in srgb,var(--bg-color) 92%,transparent) !important; border-top:1px solid rgba(255,255,255,.09) !important; }
    [data-theme="light"] #mobile-nav { background:rgba(255,255,255,.95) !important; border-top-color:rgba(0,0,0,.08) !important; }
    #forum-fab { bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 16px) !important; }
    #sos-toast { bottom:calc(var(--nav-h,64px) + env(safe-area-inset-bottom,0px) + 12px) !important; }
}

/* 8. DASHBOARD DRAG */
.widget-item.widget-dragging  { will-change:transform; opacity:.5; box-shadow:0 12px 36px rgba(0,0,0,.4) !important; }
.widget-item.widget-drag-over { border-color:var(--accent) !important; }

/* confetti on top */
#p11-confetti-canvas { pointer-events:none !important; z-index:9999 !important; }
