/* /css/newTask.css */

/* ---------- Theme + base (same as taskEdit.css) ---------- */
:root{
    --bg:#0f172a;
    --card:#111827;
    --muted:#94a3b8;
    --text:#e5e7eb;
    --ring:rgba(59,130,246,.35);
    --accent:#3b82f6;
}
html,body{height:100%}
body{
    margin:0;
    font:16px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
    background:
            radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.15), transparent 60%),
            radial-gradient(1000px 500px at -10% 0%, rgba(99,102,241,.12), transparent 60%),
            var(--bg);
    color:var(--text);
}
.wrap{
    max-width:760px;
    margin:32px auto;
    padding:0 16px
}

/* ---------- Topbar (same) ---------- */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px
}
.back{
    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    color:var(--text);
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer
}
.back:focus{outline:2px solid var(--ring);outline-offset:2px}
h1{font-size:22px;margin:0;text-align:center}

/* ---------- Card shell (alias of .card) ---------- */
.newTaskForm{
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(6px);
}

/* ---------- Grid rows (aliases of .row & .row.single) ---------- */
.TaskFormRow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
.NotesFormRow{
    display:grid;
    grid-template-columns:1fr;
    gap:16px
}

/* ---------- Form controls (same look) ---------- */
label{display:block;
    color:var(--muted);
    font-size:.95rem;
    margin:6px 0
}
input,textarea,select{
    width:100%;
    box-sizing:border-box;
    color:var(--text);
    background:#0b1220;
    border:1px solid rgba(255,255,255,.12);
    padding:10px 12px;
    border-radius:10px
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ring);outline-offset:2px}

/* ---------- Optional helpers to match edit page ---------- */
.mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.actions{
    display:flex;
    gap:12px;
    justify-content:flex-end;
    margin-top:18px
}
.btn{
    appearance:none;
    border:none;
    border-radius:10px;
    cursor:pointer;
    padding:10px 14px
}
.primary{
    background:var(--accent);color:#fff
}
.ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    color:var(--text)
}
.danger{
    background:#ef4444;color:#fff
}

/* Status */
.loading,.error{
    text-align:center;padding:18px
}

.btn{
    appearance:none;
    border:none;
    border-radius:10px;
    cursor:pointer;
    padding:10px 14px
}
.ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    color:var(--text)
}
.danger{
    background:#ef4444;
    color:#fff
}
.primary{
    background:var(--accent);
    color:#fff
}